mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
fix(select): onSelectionChange can handle number (#2937)
* 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
GitHub
parent
c8f792ccd7
commit
a2133009f7
6
.changeset/green-ravens-brake.md
Normal file
6
.changeset/green-ravens-brake.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@nextui-org/select": patch
|
||||
"@nextui-org/use-aria-multiselect": patch
|
||||
---
|
||||
|
||||
Fix onSelectionChange can handle number (#2926)
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -51,7 +39,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const SelectorIcon = `export const SelectorIcon = (props) => (
|
||||
@ -62,7 +50,7 @@ export default function App() {
|
||||
selectorIcon={<SelectorIcon />}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -39,7 +27,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -38,7 +26,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -39,7 +27,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -37,7 +25,7 @@ export default function App() {
|
||||
placeholder="Select an animal"
|
||||
className="max-w-xs"
|
||||
>
|
||||
{(animal) => <SelectItem key={animal.value}>{animal.label}</SelectItem>}
|
||||
{(animal) => <SelectItem>{animal.label}</SelectItem>}
|
||||
</Select>
|
||||
);
|
||||
}`;
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -49,7 +37,7 @@ export default function App() {
|
||||
onClose={() => setTouched(true)}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -48,7 +36,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -67,7 +55,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -47,7 +35,7 @@ export default function App() {
|
||||
onChange={handleSelectionChange}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -78,7 +66,7 @@ export default function App() {
|
||||
onChange={handleSelectionChange}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -43,7 +31,7 @@ export default function App() {
|
||||
onSelectionChange={setValues}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -70,7 +58,7 @@ export default function App() {
|
||||
onSelectionChange={setValues}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -38,7 +26,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem, Button} from "@nextui-org/react";
|
||||
@ -43,7 +31,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -50,7 +38,7 @@ export default function App() {
|
||||
className="max-w-[45%]"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -39,7 +27,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -47,7 +35,7 @@ export default function App() {
|
||||
onChange={handleSelectionChange}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -78,7 +66,7 @@ export default function App() {
|
||||
onChange={handleSelectionChange}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
|
||||
@ -43,7 +31,7 @@ export default function App() {
|
||||
onSelectionChange={setValue}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -70,7 +58,7 @@ export default function App() {
|
||||
onSelectionChange={setValue}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -42,7 +30,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -54,7 +42,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const PetIcon = `export const PetIcon = (props) => (
|
||||
@ -67,20 +55,19 @@ import {animals} from "./data";
|
||||
export default function App() {
|
||||
return (
|
||||
<Select
|
||||
className="max-w-xs"
|
||||
defaultSelectedKeys={["cat"]}
|
||||
label="Favorite Animal"
|
||||
placeholder="Select an animal"
|
||||
startContent={<PetIcon />}
|
||||
defaultSelectedKeys={["cat"]}
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
<SelectItem key={animal.key}>{animal.label}</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}`;
|
||||
}
|
||||
`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -37,7 +25,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -48,7 +36,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -42,7 +30,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -54,7 +42,7 @@ export default function App() {
|
||||
className="max-w-xs"
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -1,29 +1,17 @@
|
||||
const data = `export const animals = [
|
||||
{label: "Cat", value: "cat", description: "The second most popular pet in the world"},
|
||||
{label: "Dog", value: "dog", description: "The most popular pet in the world"},
|
||||
{label: "Elephant", value: "elephant", description: "The largest land animal"},
|
||||
{label: "Lion", value: "lion", description: "The king of the jungle"},
|
||||
{label: "Tiger", value: "tiger", description: "The largest cat species"},
|
||||
{label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
|
||||
{
|
||||
label: "Dolphin",
|
||||
value: "dolphin",
|
||||
description: "A widely distributed and diverse group of aquatic mammals",
|
||||
},
|
||||
{label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
|
||||
{label: "Zebra", value: "zebra", description: "A several species of African equids"},
|
||||
{
|
||||
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"},
|
||||
{key: "cat", label: "Cat"},
|
||||
{key: "dog", label: "Dog"},
|
||||
{key: "elephant", label: "Elephant"},
|
||||
{key: "lion", label: "Lion"},
|
||||
{key: "tiger", label: "Tiger"},
|
||||
{key: "giraffe", label: "Giraffe"},
|
||||
{key: "dolphin", label: "Dolphin"},
|
||||
{key: "penguin", label: "Penguin"},
|
||||
{key: "zebra", label: "Zebra"},
|
||||
{key: "shark", label: "Shark"},
|
||||
{key: "whale", label: "Whale"},
|
||||
{key: "otter", label: "Otter"},
|
||||
{key: "crocodile", label: "Crocodile"}
|
||||
];`;
|
||||
|
||||
const App = `import {Select, SelectItem} from "@nextui-org/react";
|
||||
@ -41,7 +29,7 @@ export default function App() {
|
||||
}}
|
||||
>
|
||||
{animals.map((animal) => (
|
||||
<SelectItem key={animal.value} value={animal.value}>
|
||||
<SelectItem key={animal.key}>
|
||||
{animal.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
||||
@ -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.
|
||||
|
||||
<CodeDemo title="Disabled Items" highlightedLines="8" files={selectContent.disabledItems} />
|
||||
<CodeDemo title="Disabled Items" highlightedLines="10" files={selectContent.disabledItems} />
|
||||
|
||||
### Required
|
||||
|
||||
@ -81,7 +81,7 @@ the end of the label and the select will be required.
|
||||
|
||||
### Sizes
|
||||
|
||||
<CodeDemo title="Sizes" highlightedLines="13,26" files={selectContent.sizes} />
|
||||
<CodeDemo title="Sizes" highlightedLines="13,24" files={selectContent.sizes} />
|
||||
|
||||
### 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`.
|
||||
|
||||
<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.
|
||||
|
||||
@ -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
|
||||
the select.
|
||||
|
||||
<CodeDemo title="Start Content" highlightedLines="9" files={selectContent.startContent} />
|
||||
<CodeDemo title="Start Content" highlightedLines="13" files={selectContent.startContent} />
|
||||
|
||||
### Item Start & End Content
|
||||
|
||||
|
||||
@ -8,23 +8,23 @@ import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter} from "../../mo
|
||||
|
||||
type Item = {
|
||||
label: string;
|
||||
value: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
const itemsData: Item[] = [
|
||||
{label: "Cat", value: "cat"},
|
||||
{label: "Dog", value: "dog"},
|
||||
{label: "Elephant", value: "elephant"},
|
||||
{label: "Lion", value: "lion"},
|
||||
{label: "Tiger", value: "tiger"},
|
||||
{label: "Giraffe", value: "giraffe"},
|
||||
{label: "Dolphin", value: "dolphin"},
|
||||
{label: "Penguin", value: "penguin"},
|
||||
{label: "Zebra", value: "zebra"},
|
||||
{label: "Shark", value: "shark"},
|
||||
{label: "Whale", value: "whale"},
|
||||
{label: "Otter", value: "otter"},
|
||||
{label: "Crocodile", value: "crocodile"},
|
||||
{label: "Cat", id: "cat"},
|
||||
{label: "Dog", id: "dog"},
|
||||
{label: "Elephant", id: "elephant"},
|
||||
{label: "Lion", id: "lion"},
|
||||
{label: "Tiger", id: "tiger"},
|
||||
{label: "Giraffe", id: "giraffe"},
|
||||
{label: "Dolphin", id: "dolphin"},
|
||||
{label: "Penguin", id: "penguin"},
|
||||
{label: "Zebra", id: "zebra"},
|
||||
{label: "Shark", id: "shark"},
|
||||
{label: "Whale", id: "whale"},
|
||||
{label: "Otter", id: "otter"},
|
||||
{label: "Crocodile", id: "crocodile"},
|
||||
];
|
||||
|
||||
const itemsSectionData = [
|
||||
@ -49,18 +49,18 @@ const itemsSectionData = [
|
||||
];
|
||||
|
||||
describe("Select", () => {
|
||||
let user;
|
||||
|
||||
beforeEach(() => {
|
||||
user = userEvent.setup();
|
||||
});
|
||||
|
||||
it("should render correctly", () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>,
|
||||
);
|
||||
|
||||
@ -72,15 +72,9 @@ describe("Select", () => {
|
||||
|
||||
render(
|
||||
<Select ref={ref} aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>,
|
||||
);
|
||||
expect(ref.current).not.toBeNull();
|
||||
@ -89,7 +83,7 @@ describe("Select", () => {
|
||||
it("should render correctly (dynamic)", () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" items={itemsData} label="Favorite Animal">
|
||||
{(item) => <SelectItem key={item.value}>{item.label}</SelectItem>}
|
||||
{(item) => <SelectItem>{item.label}</SelectItem>}
|
||||
</Select>,
|
||||
);
|
||||
|
||||
@ -100,17 +94,11 @@ describe("Select", () => {
|
||||
const wrapper = render(
|
||||
<Select aria-label="Favorite Animal" label="Favorite Animal">
|
||||
<SelectSection title="Birds">
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
</SelectSection>
|
||||
<SelectSection title="Mammals">
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</SelectSection>
|
||||
</Select>,
|
||||
);
|
||||
@ -147,18 +135,11 @@ describe("Select", () => {
|
||||
aria-label="Favorite Animal"
|
||||
label="Favorite Animal"
|
||||
selectionMode="single"
|
||||
value="penguin"
|
||||
onSelectionChange={onSelectionChange}
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>,
|
||||
);
|
||||
|
||||
@ -171,7 +152,7 @@ describe("Select", () => {
|
||||
expect(listboxItems.length).toBe(3);
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(listboxItems[1]);
|
||||
await user.click(listboxItems[1]);
|
||||
|
||||
expect(onSelectionChange).toBeCalledTimes(1);
|
||||
});
|
||||
@ -189,15 +170,9 @@ describe("Select", () => {
|
||||
selectionMode="multiple"
|
||||
onSelectionChange={onSelectionChange}
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>,
|
||||
);
|
||||
|
||||
@ -210,8 +185,8 @@ describe("Select", () => {
|
||||
expect(listboxItems.length).toBe(3);
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(listboxItems[1]);
|
||||
await userEvent.click(listboxItems[2]);
|
||||
await user.click(listboxItems[1]);
|
||||
await user.click(listboxItems[2]);
|
||||
|
||||
expect(onSelectionChange).toBeCalledTimes(2);
|
||||
});
|
||||
@ -232,15 +207,9 @@ describe("Select", () => {
|
||||
placeholder={placeholder}
|
||||
renderValue={renderValue}
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
@ -256,13 +225,13 @@ describe("Select", () => {
|
||||
const select = wrapper.getByTestId("render-selected-item-test");
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(select);
|
||||
await user.click(select);
|
||||
});
|
||||
|
||||
const listboxItems = wrapper.getAllByRole("option");
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(listboxItems[0]);
|
||||
await user.click(listboxItems[0]);
|
||||
});
|
||||
|
||||
expect(select).toHaveTextContent("Penguin");
|
||||
@ -286,15 +255,9 @@ describe("Select", () => {
|
||||
data-testid="close-when-clicking-outside-test"
|
||||
label="Favorite Animal"
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>,
|
||||
);
|
||||
|
||||
@ -302,7 +265,7 @@ describe("Select", () => {
|
||||
|
||||
// open the select dropdown
|
||||
await act(async () => {
|
||||
await userEvent.click(select);
|
||||
await user.click(select);
|
||||
});
|
||||
|
||||
// assert that the select is open
|
||||
@ -310,7 +273,7 @@ describe("Select", () => {
|
||||
|
||||
// click outside the select component
|
||||
await act(async () => {
|
||||
await userEvent.click(document.body);
|
||||
await user.click(document.body);
|
||||
});
|
||||
|
||||
// assert that the select is closed
|
||||
@ -328,15 +291,9 @@ describe("Select", () => {
|
||||
data-testid="close-when-clicking-outside-test"
|
||||
label="Favorite Animal"
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>
|
||||
</ModalBody>
|
||||
<ModalFooter>Modal footer</ModalFooter>
|
||||
@ -348,7 +305,7 @@ describe("Select", () => {
|
||||
|
||||
// open the select dropdown
|
||||
await act(async () => {
|
||||
await userEvent.click(select);
|
||||
await user.click(select);
|
||||
});
|
||||
|
||||
// assert that the select is open
|
||||
@ -356,7 +313,7 @@ describe("Select", () => {
|
||||
|
||||
// click outside the select component
|
||||
await act(async () => {
|
||||
await userEvent.click(document.body);
|
||||
await user.click(document.body);
|
||||
});
|
||||
|
||||
// assert that the select is closed
|
||||
@ -373,30 +330,123 @@ describe("Select", () => {
|
||||
data-testid="test-select"
|
||||
label="Favorite Animal"
|
||||
selectionMode="single"
|
||||
value="penguin"
|
||||
onSelectionChange={onSelectionChange}
|
||||
>
|
||||
<SelectItem key="penguin" value="penguin">
|
||||
Penguin
|
||||
</SelectItem>
|
||||
<SelectItem key="zebra" value="zebra">
|
||||
Zebra
|
||||
</SelectItem>
|
||||
<SelectItem key="shark" value="shark">
|
||||
Shark
|
||||
</SelectItem>
|
||||
<SelectItem key="penguin">Penguin</SelectItem>
|
||||
<SelectItem key="zebra">Zebra</SelectItem>
|
||||
<SelectItem key="shark">Shark</SelectItem>
|
||||
</Select>,
|
||||
);
|
||||
const select = wrapper.getByTestId("test-select");
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(document.body);
|
||||
await userEvent.tab();
|
||||
await userEvent.type(select, "z", {skipClick: true});
|
||||
await user.click(document.body);
|
||||
await user.tab();
|
||||
await user.type(select, "z", {skipClick: true});
|
||||
|
||||
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", () => {
|
||||
|
||||
@ -129,10 +129,8 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
|
||||
{!isOutsideLeft ? labelContent : null}
|
||||
<div {...getInnerWrapperProps()}>
|
||||
{startContent}
|
||||
<span {...getValueProps()}>
|
||||
{renderSelectedItem}
|
||||
{state.selectedItems && <VisuallyHidden>,</VisuallyHidden>}
|
||||
</span>
|
||||
<span {...getValueProps()}>{renderSelectedItem}</span>
|
||||
{endContent && state.selectedItems && <VisuallyHidden>,</VisuallyHidden>}
|
||||
{endContent}
|
||||
</div>
|
||||
{renderIndicator}
|
||||
|
||||
@ -32,7 +32,7 @@ export function useMultiSelectListState<T extends object>(
|
||||
if (!props.isLoading && selectedKeys.size !== 0) {
|
||||
return Array.from(selectedKeys)
|
||||
.filter(Boolean)
|
||||
.filter((key) => !collection.getItem(`${key}`));
|
||||
.filter((key) => !collection.getItem(key));
|
||||
}
|
||||
|
||||
return [];
|
||||
@ -42,7 +42,7 @@ export function useMultiSelectListState<T extends object>(
|
||||
selectedKeys.size !== 0
|
||||
? Array.from(selectedKeys)
|
||||
.map((key) => {
|
||||
return collection.getItem(`${key}`);
|
||||
return collection.getItem(key);
|
||||
})
|
||||
// Remove undefined values when some keys are not present in the collection
|
||||
.filter(Boolean)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user