From a2133009f73aa728a0e5deeb9b742aa1defd4de2 Mon Sep 17 00:00:00 2001 From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> Date: Mon, 20 May 2024 04:49:06 +0900 Subject: [PATCH] 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 --- .changeset/green-ravens-brake.md | 6 + apps/docs/content/components/select/colors.ts | 40 +-- .../components/select/custom-selector-icon.ts | 40 +-- .../content/components/select/description.ts | 40 +-- .../components/select/disabled-items.ts | 40 +-- .../content/components/select/disabled.ts | 40 +-- .../docs/content/components/select/dynamic.ts | 40 +-- .../components/select/error-message.ts | 40 +-- .../components/select/label-placements.ts | 42 +-- .../select/multiple-controlled-onchange.ts | 42 +-- .../components/select/multiple-controlled.ts | 42 +-- .../content/components/select/multiple.ts | 40 +-- .../content/components/select/open-state.ts | 40 +-- apps/docs/content/components/select/radius.ts | 40 +-- .../content/components/select/required.ts | 40 +-- .../select/single-controlled-onchange.ts | 42 +-- .../components/select/single-controlled.ts | 42 +-- apps/docs/content/components/select/sizes.ts | 42 +-- .../components/select/start-content.ts | 49 ++-- apps/docs/content/components/select/usage.ts | 42 +-- .../content/components/select/variants.ts | 42 +-- .../select/without-scroll-shadow.ts | 40 +-- apps/docs/content/docs/components/select.mdx | 8 +- .../select/__tests__/select.test.tsx | 270 +++++++++++------- packages/components/select/src/select.tsx | 6 +- .../src/use-multiselect-list-state.ts | 4 +- 26 files changed, 480 insertions(+), 679 deletions(-) create mode 100644 .changeset/green-ravens-brake.md diff --git a/.changeset/green-ravens-brake.md b/.changeset/green-ravens-brake.md new file mode 100644 index 0000000000..376cf949eb --- /dev/null +++ b/.changeset/green-ravens-brake.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/select": patch +"@nextui-org/use-aria-multiselect": patch +--- + +Fix onSelectionChange can handle number (#2926) diff --git a/apps/docs/content/components/select/colors.ts b/apps/docs/content/components/select/colors.ts index 5bda6e4c47..c830262ca1 100644 --- a/apps/docs/content/components/select/colors.ts +++ b/apps/docs/content/components/select/colors.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/custom-selector-icon.ts b/apps/docs/content/components/select/custom-selector-icon.ts index 3d14d188f1..18770cfb44 100644 --- a/apps/docs/content/components/select/custom-selector-icon.ts +++ b/apps/docs/content/components/select/custom-selector-icon.ts @@ -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={} > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/description.ts b/apps/docs/content/components/select/description.ts index c9429822de..b39c36847d 100644 --- a/apps/docs/content/components/select/description.ts +++ b/apps/docs/content/components/select/description.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/disabled-items.ts b/apps/docs/content/components/select/disabled-items.ts index 0d5ed862d3..64bed55e89 100644 --- a/apps/docs/content/components/select/disabled-items.ts +++ b/apps/docs/content/components/select/disabled-items.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/disabled.ts b/apps/docs/content/components/select/disabled.ts index e4cf9cd3f3..dc9b756812 100644 --- a/apps/docs/content/components/select/disabled.ts +++ b/apps/docs/content/components/select/disabled.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/dynamic.ts b/apps/docs/content/components/select/dynamic.ts index 1a73d48ba8..6a7c5304c9 100644 --- a/apps/docs/content/components/select/dynamic.ts +++ b/apps/docs/content/components/select/dynamic.ts @@ -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) => {animal.label}} + {(animal) => {animal.label}} ); }`; diff --git a/apps/docs/content/components/select/error-message.ts b/apps/docs/content/components/select/error-message.ts index 63b0763e1d..416a1d49bb 100644 --- a/apps/docs/content/components/select/error-message.ts +++ b/apps/docs/content/components/select/error-message.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/label-placements.ts b/apps/docs/content/components/select/label-placements.ts index 7bbfd5f01a..a147bb84a7 100644 --- a/apps/docs/content/components/select/label-placements.ts +++ b/apps/docs/content/components/select/label-placements.ts @@ -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) => ( - + {animal.label} ))} @@ -67,7 +55,7 @@ export default function App() { className="max-w-xs" > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.ts b/apps/docs/content/components/select/multiple-controlled-onchange.ts index 90de996ef3..e12d5cf7d3 100644 --- a/apps/docs/content/components/select/multiple-controlled-onchange.ts +++ b/apps/docs/content/components/select/multiple-controlled-onchange.ts @@ -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) => ( - + {animal.label} ))} @@ -78,7 +66,7 @@ export default function App() { onChange={handleSelectionChange} > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/multiple-controlled.ts b/apps/docs/content/components/select/multiple-controlled.ts index dc158135a9..2bfc63c6c7 100644 --- a/apps/docs/content/components/select/multiple-controlled.ts +++ b/apps/docs/content/components/select/multiple-controlled.ts @@ -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) => ( - + {animal.label} ))} @@ -70,7 +58,7 @@ export default function App() { onSelectionChange={setValues} > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/multiple.ts b/apps/docs/content/components/select/multiple.ts index f01c8343c0..5edb2da50f 100644 --- a/apps/docs/content/components/select/multiple.ts +++ b/apps/docs/content/components/select/multiple.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/open-state.ts b/apps/docs/content/components/select/open-state.ts index b1977ace5b..97e13a99a7 100644 --- a/apps/docs/content/components/select/open-state.ts +++ b/apps/docs/content/components/select/open-state.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/radius.ts b/apps/docs/content/components/select/radius.ts index 4854e66618..543c0c91df 100644 --- a/apps/docs/content/components/select/radius.ts +++ b/apps/docs/content/components/select/radius.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/required.ts b/apps/docs/content/components/select/required.ts index 85e5f34dda..f6447eba53 100644 --- a/apps/docs/content/components/select/required.ts +++ b/apps/docs/content/components/select/required.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/single-controlled-onchange.ts b/apps/docs/content/components/select/single-controlled-onchange.ts index 2124028721..b74254621a 100644 --- a/apps/docs/content/components/select/single-controlled-onchange.ts +++ b/apps/docs/content/components/select/single-controlled-onchange.ts @@ -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) => ( - + {animal.label} ))} @@ -78,7 +66,7 @@ export default function App() { onChange={handleSelectionChange} > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/single-controlled.ts b/apps/docs/content/components/select/single-controlled.ts index 59e0d570a7..cae9bd5401 100644 --- a/apps/docs/content/components/select/single-controlled.ts +++ b/apps/docs/content/components/select/single-controlled.ts @@ -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) => ( - + {animal.label} ))} @@ -70,7 +58,7 @@ export default function App() { onSelectionChange={setValue} > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/sizes.ts b/apps/docs/content/components/select/sizes.ts index 6b5520492c..02b1cde2d0 100644 --- a/apps/docs/content/components/select/sizes.ts +++ b/apps/docs/content/components/select/sizes.ts @@ -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) => ( - + {animal.label} ))} @@ -54,7 +42,7 @@ export default function App() { className="max-w-xs" > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/start-content.ts b/apps/docs/content/components/select/start-content.ts index 8b0d2dca97..7b896eaf3f 100644 --- a/apps/docs/content/components/select/start-content.ts +++ b/apps/docs/content/components/select/start-content.ts @@ -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 ( ); -}`; +} +`; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/select/usage.ts b/apps/docs/content/components/select/usage.ts index 0cde961b11..d676e3edb7 100644 --- a/apps/docs/content/components/select/usage.ts +++ b/apps/docs/content/components/select/usage.ts @@ -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) => ( - + {animal.label} ))} @@ -48,7 +36,7 @@ export default function App() { className="max-w-xs" > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/variants.ts b/apps/docs/content/components/select/variants.ts index 5d719be91a..040be0e123 100644 --- a/apps/docs/content/components/select/variants.ts +++ b/apps/docs/content/components/select/variants.ts @@ -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) => ( - + {animal.label} ))} @@ -54,7 +42,7 @@ export default function App() { className="max-w-xs" > {animals.map((animal) => ( - + {animal.label} ))} diff --git a/apps/docs/content/components/select/without-scroll-shadow.ts b/apps/docs/content/components/select/without-scroll-shadow.ts index 95b1dd2fc6..7a4d8b585d 100644 --- a/apps/docs/content/components/select/without-scroll-shadow.ts +++ b/apps/docs/content/components/select/without-scroll-shadow.ts @@ -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) => ( - + {animal.label} ))} diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx index 9324dc4c47..ee5d1b4d8e 100644 --- a/apps/docs/content/docs/components/select.mdx +++ b/apps/docs/content/docs/components/select.mdx @@ -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. - + ### Required @@ -81,7 +81,7 @@ the end of the label and the select will be required. ### 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`. - + > **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. - + ### Item Start & End Content diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index 3c46a4f59f..06e248dc2c 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -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( , ); @@ -72,15 +72,9 @@ describe("Select", () => { render( , ); expect(ref.current).not.toBeNull(); @@ -89,7 +83,7 @@ describe("Select", () => { it("should render correctly (dynamic)", () => { const wrapper = render( , ); @@ -100,17 +94,11 @@ describe("Select", () => { const wrapper = render( , ); @@ -147,18 +135,11 @@ describe("Select", () => { aria-label="Favorite Animal" label="Favorite Animal" selectionMode="single" - value="penguin" onSelectionChange={onSelectionChange} > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -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} > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -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} > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark ); }; @@ -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" > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); @@ -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" > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark Modal footer @@ -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} > - - Penguin - - - Zebra - - - Shark - + Penguin + Zebra + Shark , ); 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( + , + ); + + 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( + , + ); + + 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( + , + ); + const select = wrapper.getByTestId("test-select"); + const displayedText = select?.textContent?.trim(); + + expect(displayedText).toBe("Penguin, Zebra"); + }); }); describe("Select with React Hook Form", () => { diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx index 9db6723a0e..aea1609258 100644 --- a/packages/components/select/src/select.tsx +++ b/packages/components/select/src/select.tsx @@ -129,10 +129,8 @@ function Select(props: Props, ref: ForwardedRef {startContent} - - {renderSelectedItem} - {state.selectedItems && ,} - + {renderSelectedItem} + {endContent && state.selectedItems && ,} {endContent} {renderIndicator} diff --git a/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts b/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts index f031020215..3384d27d05 100644 --- a/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts +++ b/packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts @@ -32,7 +32,7 @@ export function useMultiSelectListState( 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( 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)