chore(docs): replace the props of autocomplete from value to key

heroui-inc · Nov 21, 2024 · 7ffedaa · 7ffedaa
1 parent e056c0b
commit 7ffedaa
Show file tree

Hide file tree

Showing 25 changed files with 360 additions and 366 deletions.
diff --git a/apps/docs/content/components/autocomplete/colors.raw.jsx b/apps/docs/content/components/autocomplete/colors.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -43,7 +43,7 @@ export default function App() {
           label="Favorite Animal"
           placeholder="Search an animal"
         >
-          {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+          {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
         </Autocomplete>
       ))}
     </div>

diff --git a/apps/docs/content/components/autocomplete/controlled.raw.jsx b/apps/docs/content/components/autocomplete/controlled.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -43,7 +43,7 @@ export default function App() {
           label="Favorite Animal"
           placeholder="Search an animal"
         >
-          {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+          {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
         </Autocomplete>
       ))}
     </div>

diff --git a/apps/docs/content/components/autocomplete/controlled.raw.tsx b/apps/docs/content/components/autocomplete/controlled.raw.tsx
@@ -2,35 +2,35 @@ import React from "react";
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
-  const [value, setValue] = React.useState<React.Key | null>("cat");
+  const [key, setValue] = React.useState<React.Key | null>("cat");
 
   return (
     <div className="flex w-full max-w-xs flex-col gap-2">
@@ -39,13 +39,13 @@ export default function App() {
         defaultItems={animals}
         label="Favorite Animal"
         placeholder="Search an animal"
-        selectedKey={value}
+        selectedKey={key}
         variant="bordered"
         onSelectionChange={setValue}
       >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
       </Autocomplete>
-      <p className="text-default-500 text-small">Selected: {value}</p>
+      <p className="text-default-500 text-small">Selected: {key}</p>
     </div>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -40,7 +40,7 @@ export default function App() {
         }}
         placeholder="Search an animal"
       >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
       </Autocomplete>
     </div>
   );

diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -51,7 +51,7 @@ export default function App() {
       label="Search an animal"
       variant="bordered"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -51,7 +51,7 @@ export default function App() {
       label="Search an animal"
       variant="bordered"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx
@@ -22,31 +22,31 @@ const SelectorIcon = (props) => (
 );
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -60,7 +60,7 @@ export default function App() {
       placeholder="Search an animal"
       selectorIcon={<SelectorIcon />}
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }