archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(select): onSelectionChange can handle number (#2937)

Browse Source 
* fix: onSelectionChange type for dynamic items in Select component

* docs: remove unnecessary properties

* docs: update highlightedLines

* chore: add changeset
This commit is contained in:
Ryo Matsukawa 2024-05-20 04:49:06 +09:00 committed by GitHub
parent c8f792ccd7
commit a2133009f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 480 additions and 679 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/green-ravens-brake.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/select": patch
"@nextui-org/use-aria-multiselect": patch
---
Fix onSelectionChange can handle number (#2926)

40
apps/docs/content/components/select/colors.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -51,7 +39,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/custom-selector-icon.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const SelectorIcon = `export const SelectorIcon = (props) => ( const SelectorIcon = `export const SelectorIcon = (props) => (
@ -62,7 +50,7 @@ export default function App() {
selectorIcon={<SelectorIcon />} selectorIcon={<SelectorIcon />}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/description.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -39,7 +27,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/disabled-items.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -38,7 +26,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/disabled.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -39,7 +27,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/dynamic.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -37,7 +25,7 @@ export default function App() {
placeholder="Select an animal" placeholder="Select an animal"
className="max-w-xs" className="max-w-xs"
> >
{(animal) => <SelectItem key={animal.value}>{animal.label}</SelectItem>} {(animal) => <SelectItem>{animal.label}</SelectItem>}
</Select> </Select>
); );
}`; }`;

40
apps/docs/content/components/select/error-message.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -49,7 +37,7 @@ export default function App() {
onClose={() => setTouched(true)} onClose={() => setTouched(true)}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

42
apps/docs/content/components/select/label-placements.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -48,7 +36,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -67,7 +55,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

42
apps/docs/content/components/select/multiple-controlled-onchange.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -47,7 +35,7 @@ export default function App() {
onChange={handleSelectionChange} onChange={handleSelectionChange}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -78,7 +66,7 @@ export default function App() {
onChange={handleSelectionChange} onChange={handleSelectionChange}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

42
apps/docs/content/components/select/multiple-controlled.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -43,7 +31,7 @@ export default function App() {
onSelectionChange={setValues} onSelectionChange={setValues}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -70,7 +58,7 @@ export default function App() {
onSelectionChange={setValues} onSelectionChange={setValues}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/multiple.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -38,7 +26,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/open-state.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem, Button} from "@nextui-org/react"; const App = `import {Select, SelectItem, Button} from "@nextui-org/react";
@ -43,7 +31,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/radius.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -50,7 +38,7 @@ export default function App() {
className="max-w-[45%]" className="max-w-[45%]"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/required.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -39,7 +27,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

42
apps/docs/content/components/select/single-controlled-onchange.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -47,7 +35,7 @@ export default function App() {
onChange={handleSelectionChange} onChange={handleSelectionChange}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -78,7 +66,7 @@ export default function App() {
onChange={handleSelectionChange} onChange={handleSelectionChange}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

42
apps/docs/content/components/select/single-controlled.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react"; const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
@ -43,7 +31,7 @@ export default function App() {
onSelectionChange={setValue} onSelectionChange={setValue}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -70,7 +58,7 @@ export default function App() {
onSelectionChange={setValue} onSelectionChange={setValue}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

42
apps/docs/content/components/select/sizes.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -42,7 +30,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -54,7 +42,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

49
apps/docs/content/components/select/start-content.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const PetIcon = `export const PetIcon = (props) => ( const PetIcon = `export const PetIcon = (props) => (
@ -67,20 +55,19 @@ import {animals} from "./data";
export default function App() { export default function App() {
return ( return (
<Select <Select
className="max-w-xs"
defaultSelectedKeys={["cat"]}
label="Favorite Animal" label="Favorite Animal"
placeholder="Select an animal" placeholder="Select an animal"
startContent={<PetIcon />} startContent={<PetIcon />}
defaultSelectedKeys={["cat"]}
className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>{animal.label}</SelectItem>
{animal.label}
</SelectItem>
))} ))}
</Select> </Select>
); );
}`; }
`;
const react = { const react = {
"/App.jsx": App, "/App.jsx": App,

42
apps/docs/content/components/select/usage.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -37,7 +25,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -48,7 +36,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

42
apps/docs/content/components/select/variants.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -42,7 +30,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}
@ -54,7 +42,7 @@ export default function App() {
className="max-w-xs" className="max-w-xs"
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

40
apps/docs/content/components/select/without-scroll-shadow.ts
View File

@ -1,29 +1,17 @@
const data = `export const animals = [ const data = `export const animals = [
{label: "Cat", value: "cat", description: "The second most popular pet in the world"}, {key: "cat", label: "Cat"},
{label: "Dog", value: "dog", description: "The most popular pet in the world"}, {key: "dog", label: "Dog"},
{label: "Elephant", value: "elephant", description: "The largest land animal"}, {key: "elephant", label: "Elephant"},
{label: "Lion", value: "lion", description: "The king of the jungle"}, {key: "lion", label: "Lion"},
{label: "Tiger", value: "tiger", description: "The largest cat species"}, {key: "tiger", label: "Tiger"},
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, {key: "giraffe", label: "Giraffe"},
{ {key: "dolphin", label: "Dolphin"},
label: "Dolphin", {key: "penguin", label: "Penguin"},
value: "dolphin", {key: "zebra", label: "Zebra"},
description: "A widely distributed and diverse group of aquatic mammals", {key: "shark", label: "Shark"},
}, {key: "whale", label: "Whale"},
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, {key: "otter", label: "Otter"},
{label: "Zebra", value: "zebra", description: "A several species of African equids"}, {key: "crocodile", label: "Crocodile"}
{
label: "Shark",
value: "shark",
description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
},
{
label: "Whale",
value: "whale",
description: "Diverse group of fully aquatic placental marine mammals",
},
{label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
{label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
];`; ];`;
const App = `import {Select, SelectItem} from "@nextui-org/react"; const App = `import {Select, SelectItem} from "@nextui-org/react";
@ -41,7 +29,7 @@ export default function App() {
}} }}
> >
{animals.map((animal) => ( {animals.map((animal) => (
<SelectItem key={animal.value} value={animal.value}> <SelectItem key={animal.key}>
{animal.label} {animal.label}
</SelectItem> </SelectItem>
))} ))}

8
apps/docs/content/docs/components/select.mdx
View File

@ -70,7 +70,7 @@ You can use the `selectionMode="multiple"` property to allow multiple selection.
You can disable specific items by using the `disabledKeys` property. You can disable specific items by using the `disabledKeys` property.
<CodeDemo title="Disabled Items" highlightedLines="8" files={selectContent.disabledItems} /> <CodeDemo title="Disabled Items" highlightedLines="10" files={selectContent.disabledItems} />
### Required ### Required
@ -81,7 +81,7 @@ the end of the label and the select will be required.
### Sizes ### Sizes
<CodeDemo title="Sizes" highlightedLines="13,26" files={selectContent.sizes} /> <CodeDemo title="Sizes" highlightedLines="13,24" files={selectContent.sizes} />
### Colors ### Colors
@ -99,7 +99,7 @@ the end of the label and the select will be required.
You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`. You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`.
<CodeDemo title="Label Placements" highlightedLines="20,37" files={selectContent.labelPlacements} /> <CodeDemo title="Label Placements" highlightedLines="19,37" files={selectContent.labelPlacements} />
> **Note**: If the `label` is not passed, the `labelPlacement` property will be `outside` by default. > **Note**: If the `label` is not passed, the `labelPlacement` property will be `outside` by default.
@ -108,7 +108,7 @@ You can change the position of the label by setting the `labelPlacement` propert
You can use the `startContent` and `endContent` properties to add content to the start and end of You can use the `startContent` and `endContent` properties to add content to the start and end of
the select. the select.
<CodeDemo title="Start Content" highlightedLines="9" files={selectContent.startContent} /> <CodeDemo title="Start Content" highlightedLines="13" files={selectContent.startContent} />
### Item Start & End Content ### Item Start & End Content

270
packages/components/select/__tests__/select.test.tsx
View File

@ -8,23 +8,23 @@ import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter} from "../../mo
type Item = { type Item = {
label: string; label: string;
value: string; id: string;
}; };
const itemsData: Item[] = [ const itemsData: Item[] = [
{label: "Cat", value: "cat"}, {label: "Cat", id: "cat"},
{label: "Dog", value: "dog"}, {label: "Dog", id: "dog"},
{label: "Elephant", value: "elephant"}, {label: "Elephant", id: "elephant"},
{label: "Lion", value: "lion"}, {label: "Lion", id: "lion"},
{label: "Tiger", value: "tiger"}, {label: "Tiger", id: "tiger"},
{label: "Giraffe", value: "giraffe"}, {label: "Giraffe", id: "giraffe"},
{label: "Dolphin", value: "dolphin"}, {label: "Dolphin", id: "dolphin"},
{label: "Penguin", value: "penguin"}, {label: "Penguin", id: "penguin"},
{label: "Zebra", value: "zebra"}, {label: "Zebra", id: "zebra"},
{label: "Shark", value: "shark"}, {label: "Shark", id: "shark"},
{label: "Whale", value: "whale"}, {label: "Whale", id: "whale"},
{label: "Otter", value: "otter"}, {label: "Otter", id: "otter"},
{label: "Crocodile", value: "crocodile"}, {label: "Crocodile", id: "crocodile"},
]; ];
const itemsSectionData = [ const itemsSectionData = [
@ -49,18 +49,18 @@ const itemsSectionData = [
]; ];
describe("Select", () => { describe("Select", () => {
let user;
beforeEach(() => {
user = userEvent.setup();
});
it("should render correctly", () => { it("should render correctly", () => {
const wrapper = render( const wrapper = render(
<Select aria-label="Favorite Animal" label="Favorite Animal"> <Select aria-label="Favorite Animal" label="Favorite Animal">
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select>, </Select>,
); );
@ -72,15 +72,9 @@ describe("Select", () => {
render( render(
<Select ref={ref} aria-label="Favorite Animal" label="Favorite Animal"> <Select ref={ref} aria-label="Favorite Animal" label="Favorite Animal">
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select>, </Select>,
); );
expect(ref.current).not.toBeNull(); expect(ref.current).not.toBeNull();
@ -89,7 +83,7 @@ describe("Select", () => {
it("should render correctly (dynamic)", () => { it("should render correctly (dynamic)", () => {
const wrapper = render( const wrapper = render(
<Select aria-label="Favorite Animal" items={itemsData} label="Favorite Animal"> <Select aria-label="Favorite Animal" items={itemsData} label="Favorite Animal">
{(item) => <SelectItem key={item.value}>{item.label}</SelectItem>} {(item) => <SelectItem>{item.label}</SelectItem>}
</Select>, </Select>,
); );
@ -100,17 +94,11 @@ describe("Select", () => {
const wrapper = render( const wrapper = render(
<Select aria-label="Favorite Animal" label="Favorite Animal"> <Select aria-label="Favorite Animal" label="Favorite Animal">
<SelectSection title="Birds"> <SelectSection title="Birds">
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin
</SelectItem>
</SelectSection> </SelectSection>
<SelectSection title="Mammals"> <SelectSection title="Mammals">
<SelectItem key="zebra" value="zebra"> <SelectItem key="zebra">Zebra</SelectItem>
Zebra <SelectItem key="shark">Shark</SelectItem>
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</SelectSection> </SelectSection>
</Select>, </Select>,
); );
@ -147,18 +135,11 @@ describe("Select", () => {
aria-label="Favorite Animal" aria-label="Favorite Animal"
label="Favorite Animal" label="Favorite Animal"
selectionMode="single" selectionMode="single"
value="penguin"
onSelectionChange={onSelectionChange} onSelectionChange={onSelectionChange}
> >
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select>, </Select>,
); );
@ -171,7 +152,7 @@ describe("Select", () => {
expect(listboxItems.length).toBe(3); expect(listboxItems.length).toBe(3);
await act(async () => { await act(async () => {
await userEvent.click(listboxItems[1]); await user.click(listboxItems[1]);
expect(onSelectionChange).toBeCalledTimes(1); expect(onSelectionChange).toBeCalledTimes(1);
}); });
@ -189,15 +170,9 @@ describe("Select", () => {
selectionMode="multiple" selectionMode="multiple"
onSelectionChange={onSelectionChange} onSelectionChange={onSelectionChange}
> >
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select>, </Select>,
); );
@ -210,8 +185,8 @@ describe("Select", () => {
expect(listboxItems.length).toBe(3); expect(listboxItems.length).toBe(3);
await act(async () => { await act(async () => {
await userEvent.click(listboxItems[1]); await user.click(listboxItems[1]);
await userEvent.click(listboxItems[2]); await user.click(listboxItems[2]);
expect(onSelectionChange).toBeCalledTimes(2); expect(onSelectionChange).toBeCalledTimes(2);
}); });
@ -232,15 +207,9 @@ describe("Select", () => {
placeholder={placeholder} placeholder={placeholder}
renderValue={renderValue} renderValue={renderValue}
> >
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select> </Select>
); );
}; };
@ -256,13 +225,13 @@ describe("Select", () => {
const select = wrapper.getByTestId("render-selected-item-test"); const select = wrapper.getByTestId("render-selected-item-test");
await act(async () => { await act(async () => {
await userEvent.click(select); await user.click(select);
}); });
const listboxItems = wrapper.getAllByRole("option"); const listboxItems = wrapper.getAllByRole("option");
await act(async () => { await act(async () => {
await userEvent.click(listboxItems[0]); await user.click(listboxItems[0]);
}); });
expect(select).toHaveTextContent("Penguin"); expect(select).toHaveTextContent("Penguin");
@ -286,15 +255,9 @@ describe("Select", () => {
data-testid="close-when-clicking-outside-test" data-testid="close-when-clicking-outside-test"
label="Favorite Animal" label="Favorite Animal"
> >
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select>, </Select>,
); );
@ -302,7 +265,7 @@ describe("Select", () => {
// open the select dropdown // open the select dropdown
await act(async () => { await act(async () => {
await userEvent.click(select); await user.click(select);
}); });
// assert that the select is open // assert that the select is open
@ -310,7 +273,7 @@ describe("Select", () => {
// click outside the select component // click outside the select component
await act(async () => { await act(async () => {
await userEvent.click(document.body); await user.click(document.body);
}); });
// assert that the select is closed // assert that the select is closed
@ -328,15 +291,9 @@ describe("Select", () => {
data-testid="close-when-clicking-outside-test" data-testid="close-when-clicking-outside-test"
label="Favorite Animal" label="Favorite Animal"
> >
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select> </Select>
</ModalBody> </ModalBody>
<ModalFooter>Modal footer</ModalFooter> <ModalFooter>Modal footer</ModalFooter>
@ -348,7 +305,7 @@ describe("Select", () => {
// open the select dropdown // open the select dropdown
await act(async () => { await act(async () => {
await userEvent.click(select); await user.click(select);
}); });
// assert that the select is open // assert that the select is open
@ -356,7 +313,7 @@ describe("Select", () => {
// click outside the select component // click outside the select component
await act(async () => { await act(async () => {
await userEvent.click(document.body); await user.click(document.body);
}); });
// assert that the select is closed // assert that the select is closed
@ -373,30 +330,123 @@ describe("Select", () => {
data-testid="test-select" data-testid="test-select"
label="Favorite Animal" label="Favorite Animal"
selectionMode="single" selectionMode="single"
value="penguin"
onSelectionChange={onSelectionChange} onSelectionChange={onSelectionChange}
> >
<SelectItem key="penguin" value="penguin"> <SelectItem key="penguin">Penguin</SelectItem>
Penguin <SelectItem key="zebra">Zebra</SelectItem>
</SelectItem> <SelectItem key="shark">Shark</SelectItem>
<SelectItem key="zebra" value="zebra">
Zebra
</SelectItem>
<SelectItem key="shark" value="shark">
Shark
</SelectItem>
</Select>, </Select>,
); );
const select = wrapper.getByTestId("test-select"); const select = wrapper.getByTestId("test-select");
await act(async () => { await act(async () => {
await userEvent.click(document.body); await user.click(document.body);
await userEvent.tab(); await user.tab();
await userEvent.type(select, "z", {skipClick: true}); await user.type(select, "z", {skipClick: true});
expect(onSelectionChange).toBeCalledTimes(0); expect(onSelectionChange).toBeCalledTimes(0);
}); });
}); });
it("onSelectionChange should be called with a Set of item ids upon selection", async () => {
const itemsWithId = [
{id: 1, value: "penguin"},
{id: 2, value: "zebra"},
{id: 3, value: "shark"},
];
const onSelectionChangeId = jest.fn();
const wrapperWithId = render(
<Select
isOpen
items={itemsWithId}
label="Test with ID"
onSelectionChange={onSelectionChangeId}
>
{(item) => <SelectItem>{item.value}</SelectItem>}
</Select>,
);
const listbox = wrapperWithId.getByRole("listbox");
expect(listbox).toBeInTheDocument();
// Select item and check the correct ID is passed to the callback
await act(async () => {
await user.click(wrapperWithId.getByRole("option", {name: itemsWithId[0].value}));
});
expect(onSelectionChangeId).toHaveBeenCalled();
let selectionArg = onSelectionChangeId.mock.calls[0][0];
expect([...selectionArg]).toEqual([itemsWithId[0].id]);
await act(async () => {
await user.click(wrapperWithId.getByRole("option", {name: itemsWithId[1].value}));
});
expect(onSelectionChangeId).toHaveBeenCalledTimes(2);
selectionArg = onSelectionChangeId.mock.calls[1][0];
expect([...selectionArg]).toEqual([itemsWithId[1].id]);
});
it("onSelectionChange should be called with a Set of item keys upon selection", async () => {
const itemsWithKey = [
{key: 1, value: "penguin"},
{key: 2, value: "zebra"},
{key: 3, value: "shark"},
];
const onSelectionChangeKey = jest.fn();
const wrapperWithKey = render(
<Select
isOpen
items={itemsWithKey}
label="Test with Key"
onSelectionChange={onSelectionChangeKey}
>
{(item) => <SelectItem>{item.value}</SelectItem>}
</Select>,
);
const listbox = wrapperWithKey.getByRole("listbox");
expect(listbox).toBeInTheDocument();
// Select item and check the correct key is passed to the callback
await act(async () => {
await user.click(wrapperWithKey.getByRole("option", {name: itemsWithKey[0].value}));
});
expect(onSelectionChangeKey).toHaveBeenCalled();
let selectionArg = onSelectionChangeKey.mock.calls[0][0];
expect([...selectionArg]).toEqual([itemsWithKey[0].key]);
await act(async () => {
await user.click(wrapperWithKey.getByRole("option", {name: itemsWithKey[1].value}));
});
expect(onSelectionChangeKey).toHaveBeenCalledTimes(2);
selectionArg = onSelectionChangeKey.mock.calls[1][0];
expect([...selectionArg]).toEqual([itemsWithKey[1].key]);
});
it("should display selected items as comma-separated string inside the select", async () => {
const wrapper = render(
<Select
isDisabled
aria-label="Favorite Animal"
data-testid="test-select"
selectedKeys={["penguin", "zebra"]}
selectionMode="multiple"
>
<SelectItem key="penguin">Penguin</SelectItem>
<SelectItem key="zebra">Zebra</SelectItem>
<SelectItem key="shark">Shark</SelectItem>
</Select>,
);
const select = wrapper.getByTestId("test-select");
const displayedText = select?.textContent?.trim();
expect(displayedText).toBe("Penguin, Zebra");
});
}); });
describe("Select with React Hook Form", () => { describe("Select with React Hook Form", () => {

6
packages/components/select/src/select.tsx
View File

@ -129,10 +129,8 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
{!isOutsideLeft ? labelContent : null} {!isOutsideLeft ? labelContent : null}
<div {...getInnerWrapperProps()}> <div {...getInnerWrapperProps()}>
{startContent} {startContent}
<span {...getValueProps()}> <span {...getValueProps()}>{renderSelectedItem}</span>
{renderSelectedItem} {endContent && state.selectedItems && <VisuallyHidden>,</VisuallyHidden>}
{state.selectedItems && <VisuallyHidden>,</VisuallyHidden>}
</span>
{endContent} {endContent}
</div> </div>
{renderIndicator} {renderIndicator}

4
packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts
View File

@ -32,7 +32,7 @@ export function useMultiSelectListState<T extends object>(
if (!props.isLoading && selectedKeys.size !== 0) { if (!props.isLoading && selectedKeys.size !== 0) {
return Array.from(selectedKeys) return Array.from(selectedKeys)
.filter(Boolean) .filter(Boolean)
.filter((key) => !collection.getItem(`${key}`)); .filter((key) => !collection.getItem(key));
} }
return []; return [];
@ -42,7 +42,7 @@ export function useMultiSelectListState<T extends object>(
selectedKeys.size !== 0 selectedKeys.size !== 0
? Array.from(selectedKeys) ? Array.from(selectedKeys)
.map((key) => { .map((key) => {
return collection.getItem(`${key}`); return collection.getItem(key);
}) })
// Remove undefined values when some keys are not present in the collection // Remove undefined values when some keys are not present in the collection
.filter(Boolean) .filter(Boolean)