From 4cb8d49a358a741e08749b8afe1765df4aed6c40 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Wed, 23 Oct 2024 20:06:31 +0800 Subject: [PATCH 1/9] feat(docs): add *.js?raw module --- apps/docs/global.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/apps/docs/global.d.ts b/apps/docs/global.d.ts index 5a51aa5838..1a622ff3b6 100644 --- a/apps/docs/global.d.ts +++ b/apps/docs/global.d.ts @@ -7,3 +7,8 @@ declare module "*.jsx?raw" { const content: string; export default content; } + +declare module "*.js?raw" { + const content: string; + export default content; +} From b0677be8d0a0b49ad7be8c72029fb650e8e4d9fb Mon Sep 17 00:00:00 2001 From: WK Wong Date: Wed, 23 Oct 2024 20:07:07 +0800 Subject: [PATCH 2/9] feat(docs): change to react-jsx and add **/*.js --- apps/docs/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json index 0475fdc067..db48bcf066 100644 --- a/apps/docs/tsconfig.json +++ b/apps/docs/tsconfig.json @@ -11,7 +11,7 @@ "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, - "jsx": "preserve", + "jsx": "react-jsx", "plugins": [ { "name": "next" @@ -23,6 +23,7 @@ "next-env.d.ts", "**/*.ts", "**/*.tsx", + "**/*.js", "**/*.jsx", ".next/types/**/*.ts", ".contentlayer/generated", From a46fd7c11ad179b13a50a71ac4457c6ac5bd2f91 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Wed, 23 Oct 2024 20:07:30 +0800 Subject: [PATCH 3/9] chore(root): include js and jsx --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 662d939e50..0139a64ffe 100644 --- a/package.json +++ b/package.json @@ -29,9 +29,9 @@ "typecheck": "turbo typecheck", "lint": "pnpm lint:pkg && pnpm lint:docs", "lint:pkg": "eslint -c .eslintrc.json ./packages/**/*.{ts,tsx}", - "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}", + "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}", "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/*.{ts,tsx}", - "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}", + "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}", "check:rap": "tsx scripts/check-rap-updates.ts", "fix:rap": "tsx scripts/fix-rap.ts", "format:check": "prettier --check packages/**/**/src --cache", From 4eb80fd224e2853fe60dbf60e5c190993fde3038 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Wed, 23 Oct 2024 20:29:40 +0800 Subject: [PATCH 4/9] refactor(docs): autocomplete dx --- .../autocomplete/async-filtering.raw.jsx | 34 ++ .../autocomplete/async-filtering.raw.tsx | 41 +++ .../autocomplete/async-filtering.ts | 78 +---- .../autocomplete/async-loading-items.raw.jsx | 97 ++++++ .../autocomplete/async-loading-items.raw.tsx | 107 ++++++ .../autocomplete/async-loading-items.ts | 179 +--------- .../components/autocomplete/colors.raw.jsx | 51 +++ .../content/components/autocomplete/colors.ts | 61 +--- .../autocomplete/controlled.raw.jsx | 51 +++ .../autocomplete/controlled.raw.tsx | 51 +++ .../components/autocomplete/controlled.ts | 79 +---- .../custom-empty-content-message.raw.jsx | 47 +++ .../custom-empty-content-message.ts | 50 +-- .../autocomplete/custom-filtering.raw.jsx | 57 ++++ .../autocomplete/custom-filtering.raw.tsx | 57 ++++ .../autocomplete/custom-filtering.ts | 91 +---- .../autocomplete/custom-items.raw.jsx | 229 +++++++++++++ .../components/autocomplete/custom-items.ts | 232 +------------ .../custom-sections-style.raw.jsx | 49 +++ .../autocomplete/custom-sections-style.ts | 49 +-- .../autocomplete/custom-selector-icon.raw.jsx | 68 ++++ .../autocomplete/custom-selector-icon.ts | 71 +--- .../autocomplete/custom-styles.raw.jsx | 303 +++++++++++++++++ .../components/autocomplete/custom-styles.ts | 312 +----------------- .../autocomplete/custom-value.raw.jsx | 43 +++ .../components/autocomplete/custom-value.ts | 46 +-- .../autocomplete/description.raw.jsx | 44 +++ .../components/autocomplete/description.ts | 47 +-- .../autocomplete/disabled-items.raw.jsx | 43 +++ .../components/autocomplete/disabled-items.ts | 46 +-- .../components/autocomplete/dynamic.raw.jsx | 41 +++ .../components/autocomplete/dynamic.ts | 45 +-- .../autocomplete/error-message.raw.jsx | 54 +++ .../components/autocomplete/error-message.ts | 57 +--- .../components/autocomplete/events.raw.jsx | 60 ++++ .../components/autocomplete/events.raw.tsx | 61 ++++ .../content/components/autocomplete/events.ts | 103 +----- .../autocomplete/fully-controlled.raw.jsx | 96 ++++++ .../autocomplete/fully-controlled.raw.tsx | 103 ++++++ .../autocomplete/fully-controlled.ts | 180 +--------- .../autocomplete/item-start-content.raw.jsx | 68 ++++ .../autocomplete/item-start-content.ts | 68 +--- .../components/autocomplete/read-only.raw.jsx | 44 +++ .../components/autocomplete/read-only.ts | 47 +-- .../components/autocomplete/required.raw.jsx | 44 +++ .../components/autocomplete/required.ts | 47 +-- .../components/autocomplete/sections.raw.jsx | 28 ++ .../components/autocomplete/sections.ts | 33 +- .../components/autocomplete/sizes.raw.jsx | 59 ++++ .../content/components/autocomplete/sizes.ts | 62 +--- .../autocomplete/start-content.raw.jsx | 79 +++++ .../components/autocomplete/start-content.ts | 84 +---- .../components/autocomplete/usage.raw.jsx | 51 +++ .../content/components/autocomplete/usage.ts | 57 +--- .../components/autocomplete/variants.raw.jsx | 62 ++++ .../components/autocomplete/variants.ts | 65 +--- .../without-scroll-shadow.raw.jsx | 9 + .../docs/content/docs/components/dropdown.mdx | 20 +- 58 files changed, 2273 insertions(+), 2167 deletions(-) create mode 100644 apps/docs/content/components/autocomplete/async-filtering.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/async-filtering.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/async-loading-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/async-loading-items.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/colors.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/controlled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/controlled.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-filtering.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-filtering.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/custom-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-value.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/description.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/disabled-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/dynamic.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/error-message.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/events.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/events.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/fully-controlled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/fully-controlled.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/item-start-content.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/read-only.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/required.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/sections.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/sizes.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/start-content.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/usage.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/variants.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.jsx b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx new file mode 100644 index 0000000000..138e2e28fe --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx @@ -0,0 +1,34 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + let list = useAsyncList({ + async load({signal, filterText}) { + let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal}); + let json = await res.json(); + + return { + items: json.results, + }; + }, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} \ No newline at end of file diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.tsx b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx new file mode 100644 index 0000000000..8f88d88bc6 --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx @@ -0,0 +1,41 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +type SWCharacter = { + name: string; + height: string; + mass: string; + birth_year: string; +}; + +export default function App() { + let list = useAsyncList({ + async load({signal, filterText}) { + let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal}); + let json = await res.json(); + + return { + items: json.results, + }; + }, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-filtering.ts b/apps/docs/content/components/autocomplete/async-filtering.ts index 308bc843b2..6bcbb952f0 100644 --- a/apps/docs/content/components/autocomplete/async-filtering.ts +++ b/apps/docs/content/components/autocomplete/async-filtering.ts @@ -1,79 +1,5 @@ -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - let list = useAsyncList({ - async load({signal, filterText}) { - let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal}); - let json = await res.json(); - - return { - items: json.results, - }; - }, - }); - - return ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -type SWCharacter = { - name: string; - height: string; - mass: string; - birth_year: string; -}; - -export default function App() { - let list = useAsyncList({ - async load({signal, filterText}) { - let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal}); - let json = await res.json(); - - return { - items: json.results, - }; - }, - }); - - return ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; +import App from "./async-filtering.raw.jsx?raw"; +import AppTs from "./async-filtering.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx new file mode 100644 index 0000000000..ab72057a1d --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx @@ -0,0 +1,97 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; + +export function usePokemonList({fetchDelay = 0} = {}) { + const [items, setItems] = React.useState([]); + const [hasMore, setHasMore] = React.useState(true); + const [isLoading, setIsLoading] = React.useState(false); + const [offset, setOffset] = React.useState(0); + const limit = 10; // Number of items per page, adjust as necessary + + const loadPokemon = async (currentOffset) => { + const controller = new AbortController(); + const {signal} = controller; + + try { + setIsLoading(true); + + if (offset > 0) { + // Delay to simulate network latency + await new Promise((resolve) => setTimeout(resolve, fetchDelay)); + } + + const res = await fetch( + `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`, + {signal}, + ); + + if (!res.ok) { + throw new Error("Network response was not ok"); + } + + let json = await res.json(); + + setHasMore(json.next !== null); + // Append new results to existing ones + setItems((prevItems) => [...prevItems, ...json.results]); + } catch (error) { + if (error.name === "AbortError") { + console.log("Fetch aborted"); + } else { + console.error("There was an error with the fetch operation:", error); + } + } finally { + setIsLoading(false); + } + }; + + React.useEffect(() => { + loadPokemon(offset); + }, []); + + const onLoadMore = () => { + const newOffset = offset + limit; + + setOffset(newOffset); + loadPokemon(newOffset); + }; + + return { + items, + hasMore, + isLoading, + onLoadMore, + }; +}; + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); + + const [, scrollerRef] = useInfiniteScroll({ + hasMore, + isEnabled: isOpen, + shouldUseLoader: false, // We don't want to show the loader at the bottom of the list + onLoadMore, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} \ No newline at end of file diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx new file mode 100644 index 0000000000..355ba841b3 --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx @@ -0,0 +1,107 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; + +export type Pokemon = { + name: string; + url: string; +}; + +export type UsePokemonListProps = { + /** Delay to wait before fetching more items */ + fetchDelay?: number; +}; + +export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) { + const [items, setItems] = React.useState([]); + const [hasMore, setHasMore] = React.useState(true); + const [isLoading, setIsLoading] = React.useState(false); + const [offset, setOffset] = React.useState(0); + const limit = 10; // Number of items per page, adjust as necessary + + const loadPokemon = async (currentOffset: number) => { + const controller = new AbortController(); + const {signal} = controller; + + try { + setIsLoading(true); + + if (offset > 0) { + // Delay to simulate network latency + await new Promise((resolve) => setTimeout(resolve, fetchDelay)); + } + + let res = await fetch( + `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`, + {signal}, + ); + + if (!res.ok) { + throw new Error("Network response was not ok"); + } + + let json = await res.json(); + + setHasMore(json.next !== null); + // Append new results to existing ones + setItems((prevItems) => [...prevItems, ...json.results]); + } catch (error) { + if (error.name === "AbortError") { + console.log("Fetch aborted"); + } else { + console.error("There was an error with the fetch operation:", error); + } + } finally { + setIsLoading(false); + } + }; + + React.useEffect(() => { + loadPokemon(offset); + }, []); + + const onLoadMore = () => { + const newOffset = offset + limit; + + setOffset(newOffset); + loadPokemon(newOffset); + }; + + return { + items, + hasMore, + isLoading, + onLoadMore, + }; +} + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); + + const [, scrollerRef] = useInfiniteScroll({ + hasMore, + isEnabled: isOpen, + shouldUseLoader: false, // We don't want to show the loader at the bottom of the list + onLoadMore, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-loading-items.ts b/apps/docs/content/components/autocomplete/async-loading-items.ts index 495c845ebf..a69188c565 100644 --- a/apps/docs/content/components/autocomplete/async-loading-items.ts +++ b/apps/docs/content/components/autocomplete/async-loading-items.ts @@ -1,185 +1,12 @@ -const usePokemonListTs = `export type Pokemon = { - name: string; - url: string; -}; - -export type UsePokemonListProps = { - /** Delay to wait before fetching more items */ - fetchDelay?: number; -}; - -export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) { - const [items, setItems] = React.useState([]); - const [hasMore, setHasMore] = React.useState(true); - const [isLoading, setIsLoading] = React.useState(false); - const [offset, setOffset] = React.useState(0); - const limit = 10; // Number of items per page, adjust as necessary - - const loadPokemon = async (currentOffset: number) => { - const controller = new AbortController(); - const {signal} = controller; - - try { - setIsLoading(true); - - if (offset > 0) { - // Delay to simulate network latency - await new Promise((resolve) => setTimeout(resolve, fetchDelay)); - } - - let res = await fetch( - \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, - {signal}, - ); - - if (!res.ok) { - throw new Error("Network response was not ok"); - } - - let json = await res.json(); - - setHasMore(json.next !== null); - // Append new results to existing ones - setItems((prevItems) => [...prevItems, ...json.results]); - } catch (error) { - if (error.name === "AbortError") { - console.log("Fetch aborted"); - } else { - console.error("There was an error with the fetch operation:", error); - } - } finally { - setIsLoading(false); - } - }; - - React.useEffect(() => { - loadPokemon(offset); - }, []); - - const onLoadMore = () => { - const newOffset = offset + limit; - - setOffset(newOffset); - loadPokemon(newOffset); - }; - - return { - items, - hasMore, - isLoading, - onLoadMore, - }; -} - -`; - -const usePokemonList = `export function usePokemonList({fetchDelay = 0} = {}) { - const [items, setItems] = React.useState([]); - const [hasMore, setHasMore] = React.useState(true); - const [isLoading, setIsLoading] = React.useState(false); - const [offset, setOffset] = React.useState(0); - const limit = 10; // Number of items per page, adjust as necessary - - const loadPokemon = async (currentOffset) => { - const controller = new AbortController(); - const {signal} = controller; - - try { - setIsLoading(true); - - if (offset > 0) { - // Delay to simulate network latency - await new Promise((resolve) => setTimeout(resolve, fetchDelay)); - } - - let res = await fetch( - \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, - {signal}, - ); - - if (!res.ok) { - throw new Error("Network response was not ok"); - } - - let json = await res.json(); - - setHasMore(json.next !== null); - // Append new results to existing ones - setItems((prevItems) => [...prevItems, ...json.results]); - } catch (error) { - if (error.name === "AbortError") { - console.log("Fetch aborted"); - } else { - console.error("There was an error with the fetch operation:", error); - } - } finally { - setIsLoading(false); - } - }; - - React.useEffect(() => { - loadPokemon(offset); - }, []); - - const onLoadMore = () => { - const newOffset = offset + limit; - - setOffset(newOffset); - loadPokemon(newOffset); - }; - - return { - items, - hasMore, - isLoading, - onLoadMore, - }; -};`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; -import {usePokemonList} from "./usePokemonList"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); - - const [, scrollerRef] = useInfiniteScroll({ - hasMore, - isEnabled: isOpen, - shouldUseLoader: false, // We don't want to show the loader at the bottom of the list - onLoadMore, - }); - - return ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; +import App from "./async-loading-items.raw.jsx?raw"; +import AppTs from "./async-loading-items.raw.tsx?raw"; const react = { "/App.jsx": App, - "/usePokemonList.js": usePokemonList, }; const reactTs = { - "/App.tsx": App, - "/usePokemonList.ts": usePokemonListTs, + "/App.tsx": AppTs, }; export default { diff --git a/apps/docs/content/components/autocomplete/colors.raw.jsx b/apps/docs/content/components/autocomplete/colors.raw.jsx new file mode 100644 index 0000000000..02453bca27 --- /dev/null +++ b/apps/docs/content/components/autocomplete/colors.raw.jsx @@ -0,0 +1,51 @@ +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: "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"}, +]; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + {(item) => {item.label}} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/colors.ts b/apps/docs/content/components/autocomplete/colors.ts index 1ac3ba0075..d5bef810aa 100644 --- a/apps/docs/content/components/autocomplete/colors.ts +++ b/apps/docs/content/components/autocomplete/colors.ts @@ -1,66 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger", - ]; - - return ( -
- {colors.map((color) => ( - - {(item) => {item.label}} - - ))} -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/controlled.raw.jsx b/apps/docs/content/components/autocomplete/controlled.raw.jsx new file mode 100644 index 0000000000..02453bca27 --- /dev/null +++ b/apps/docs/content/components/autocomplete/controlled.raw.jsx @@ -0,0 +1,51 @@ +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: "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"}, +]; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + {(item) => {item.label}} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/controlled.raw.tsx b/apps/docs/content/components/autocomplete/controlled.raw.tsx new file mode 100644 index 0000000000..e1e51384d3 --- /dev/null +++ b/apps/docs/content/components/autocomplete/controlled.raw.tsx @@ -0,0 +1,51 @@ +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: "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"}, +]; + +export default function App() { + const [value, setValue] = React.useState("cat"); + + return ( +
+ + {(item) => {item.label}} + +

Selected: {value}

+
+ ); +} diff --git a/apps/docs/content/components/autocomplete/controlled.ts b/apps/docs/content/components/autocomplete/controlled.ts index f8a35ea4aa..1f1a363363 100644 --- a/apps/docs/content/components/autocomplete/controlled.ts +++ b/apps/docs/content/components/autocomplete/controlled.ts @@ -1,87 +1,12 @@ -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"}, -];`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState("cat"); - - return ( -
- - {(item) => {item.label}} - -

Selected: {value}

-
- ); -}`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState("cat"); - - return ( -
- - {(item) => {item.label}} - -

Selected: {value}

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { 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 new file mode 100644 index 0000000000..1c1072f365 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx @@ -0,0 +1,47 @@ +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: "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"}, +]; + +export default function App() { + return ( +
+ + {(item) => {item.label}} + +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts index 7e7e27dcc1..b88aaeea2a 100644 --- a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts @@ -1,55 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( -
- - {(item) => {item.label}} - -
- ); -}`; +import App from "./custom-empty-content-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx new file mode 100644 index 0000000000..7f0ff19257 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx @@ -0,0 +1,57 @@ +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: "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"}, +]; + +export default function App() { + const myFilter = (textValue, inputValue) => { + if (inputValue.length === 0) { + return true; + } + + // Normalize both strings so we can slice safely + // take into account the ignorePunctuation option as well... + textValue = textValue.normalize("NFC").toLocaleLowerCase(); + inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); + + return textValue.slice(0, inputValue.length) === inputValue; + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx new file mode 100644 index 0000000000..58f68bd410 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx @@ -0,0 +1,57 @@ +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: "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"}, +]; + +export default function App() { + const myFilter = (textValue: string, inputValue: string) => { + if (inputValue.length === 0) { + return true; + } + + // Normalize both strings so we can slice safely + // take into account the ignorePunctuation option as well... + textValue = textValue.normalize("NFC").toLocaleLowerCase(); + inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); + + return textValue.slice(0, inputValue.length) === inputValue; + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-filtering.ts b/apps/docs/content/components/autocomplete/custom-filtering.ts index 5ebcd8336f..22640a1882 100644 --- a/apps/docs/content/components/autocomplete/custom-filtering.ts +++ b/apps/docs/content/components/autocomplete/custom-filtering.ts @@ -1,95 +1,8 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const myFilter = (textValue, inputValue) => { - if (inputValue.length === 0) { - return true; - } - - // Normalize both strings so we can slice safely - // take into account the ignorePunctuation option as well... - textValue = textValue.normalize("NFC").toLocaleLowerCase(); - inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); - - return textValue.slice(0, inputValue.length) === inputValue; - }; - - return ( - - {(item) => {item.label}} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const myFilter = (textValue: string, inputValue: string) => { - if (inputValue.length === 0) { - return true; - } - - // Normalize both strings so we can slice safely - // take into account the ignorePunctuation option as well... - textValue = textValue.normalize("NFC").toLocaleLowerCase(); - inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); - - return textValue.slice(0, inputValue.length) === inputValue; - }; - - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./custom-filtering.raw.jsx?raw"; +import AppTs from "./custom-filtering.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { diff --git a/apps/docs/content/components/autocomplete/custom-items.raw.jsx b/apps/docs/content/components/autocomplete/custom-items.raw.jsx new file mode 100644 index 0000000000..2f2b27f9e4 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-items.raw.jsx @@ -0,0 +1,229 @@ +import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + {(user) => ( + +
+ +
+ {user.name} + {user.email} +
+
+ + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-items.ts b/apps/docs/content/components/autocomplete/custom-items.ts index 205ead3a5c..26a1e0f9ac 100644 --- a/apps/docs/content/components/autocomplete/custom-items.ts +++ b/apps/docs/content/components/autocomplete/custom-items.ts @@ -1,237 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - {(user) => ( - -
- -
- {user.name} - {user.email} -
-
- - )} - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx new file mode 100644 index 0000000000..7d4f300b08 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx @@ -0,0 +1,49 @@ +import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; + +export default function App() { + const headingClasses = + "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; + + return ( + + + Lion + Tiger + Elephant + Kangaroo + Panda + Giraffe + Zebra + Cheetah + + + Eagle + Parrot + Penguin + Ostrich + Peacock + Swan + Falcon + Flamingo + + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.ts b/apps/docs/content/components/autocomplete/custom-sections-style.ts index 13770de8a4..9ba8a6cd9c 100644 --- a/apps/docs/content/components/autocomplete/custom-sections-style.ts +++ b/apps/docs/content/components/autocomplete/custom-sections-style.ts @@ -1,51 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; - -export default function App() { - const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; - - return ( - - - Lion - Tiger - Elephant - Kangaroo - Panda - Giraffe - Zebra - Cheetah - - - Eagle - Parrot - Penguin - Ostrich - Peacock - Swan - Falcon - Flamingo - - - ); -}`; +import App from "./custom-sections-style.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx new file mode 100644 index 0000000000..2a7508ec25 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx @@ -0,0 +1,68 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +import {SelectorIcon} from "./SelectorIcon"; + +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"}, +]; + +export const SelectorIcon = (props) => ( + +); + +export default function App() { + return ( + } + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.ts b/apps/docs/content/components/autocomplete/custom-selector-icon.ts index 2fc1f523b4..ee2c7d9a8b 100644 --- a/apps/docs/content/components/autocomplete/custom-selector-icon.ts +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.ts @@ -1,76 +1,7 @@ -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"}, -];`; - -const SelectorIcon = `export const SelectorIcon = (props) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {SelectorIcon} from "./SelectorIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - } - > - {(item) => {item.label}} - - ); -}`; +import App from "./custom-selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-styles.raw.jsx b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx new file mode 100644 index 0000000000..63a29d4184 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx @@ -0,0 +1,303 @@ +import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react"; + +import {SearchIcon} from "./SearchIcon"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => ( + +); + +export default function App() { + return ( + } + variant="bordered" + > + {(item) => ( + +
+
+ +
+ {item.name} + {item.team} +
+
+ +
+ + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-styles.ts b/apps/docs/content/components/autocomplete/custom-styles.ts index 8782766986..da3ea9093a 100644 --- a/apps/docs/content/components/autocomplete/custom-styles.ts +++ b/apps/docs/content/components/autocomplete/custom-styles.ts @@ -1,317 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const SearchIcon = `export const SearchIcon = ({ - size = 24, - strokeWidth = 1.5, - width, - height, - ...props -}) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react"; -import {SearchIcon} from "./SearchIcon"; -import {users} from "./data"; - -export default function App() { - return ( - } - radius="full" - variant="bordered" - > - {(item) => ( - -
-
- -
- {item.name} - {item.team} -
-
- -
- - )} - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SearchIcon.jsx": SearchIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-value.raw.jsx b/apps/docs/content/components/autocomplete/custom-value.raw.jsx new file mode 100644 index 0000000000..93d0c71244 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-value.raw.jsx @@ -0,0 +1,43 @@ +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: "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"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-value.ts b/apps/docs/content/components/autocomplete/custom-value.ts index ef17993ac6..a3d01f165d 100644 --- a/apps/docs/content/components/autocomplete/custom-value.ts +++ b/apps/docs/content/components/autocomplete/custom-value.ts @@ -1,51 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./custom-value.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/description.raw.jsx b/apps/docs/content/components/autocomplete/description.raw.jsx new file mode 100644 index 0000000000..d68aa29122 --- /dev/null +++ b/apps/docs/content/components/autocomplete/description.raw.jsx @@ -0,0 +1,44 @@ +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: "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"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/description.ts b/apps/docs/content/components/autocomplete/description.ts index 17947b2824..aeb6340b6b 100644 --- a/apps/docs/content/components/autocomplete/description.ts +++ b/apps/docs/content/components/autocomplete/description.ts @@ -1,52 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx new file mode 100644 index 0000000000..41ab6f13bb --- /dev/null +++ b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx @@ -0,0 +1,43 @@ +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: "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"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/disabled-items.ts b/apps/docs/content/components/autocomplete/disabled-items.ts index caa7c63254..4ff907eed2 100644 --- a/apps/docs/content/components/autocomplete/disabled-items.ts +++ b/apps/docs/content/components/autocomplete/disabled-items.ts @@ -1,51 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./disabled-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/dynamic.raw.jsx b/apps/docs/content/components/autocomplete/dynamic.raw.jsx new file mode 100644 index 0000000000..9a53ced7ee --- /dev/null +++ b/apps/docs/content/components/autocomplete/dynamic.raw.jsx @@ -0,0 +1,41 @@ +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: "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"}, +]; +export default function App() { + return ( + + {(animal) => {animal.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/dynamic.ts b/apps/docs/content/components/autocomplete/dynamic.ts index d24de783be..5d3c97bb9a 100644 --- a/apps/docs/content/components/autocomplete/dynamic.ts +++ b/apps/docs/content/components/autocomplete/dynamic.ts @@ -1,50 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(animal) => {animal.label}} - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/error-message.raw.jsx b/apps/docs/content/components/autocomplete/error-message.raw.jsx new file mode 100644 index 0000000000..a44a21f67f --- /dev/null +++ b/apps/docs/content/components/autocomplete/error-message.raw.jsx @@ -0,0 +1,54 @@ +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: "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"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + const [touched, setTouched] = React.useState(false); + + const isValid = value === "cat"; + + return ( + setTouched(true)} + onSelectionChange={setValue} + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/error-message.ts b/apps/docs/content/components/autocomplete/error-message.ts index 4f703637d8..fb8101b132 100644 --- a/apps/docs/content/components/autocomplete/error-message.ts +++ b/apps/docs/content/components/autocomplete/error-message.ts @@ -1,62 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(""); - const [touched, setTouched] = React.useState(false); - - const isValid = value === "cat"; - - return ( - setTouched(true)} - > - {(item) => {item.label}} - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/events.raw.jsx b/apps/docs/content/components/autocomplete/events.raw.jsx new file mode 100644 index 0000000000..67e36c6606 --- /dev/null +++ b/apps/docs/content/components/autocomplete/events.raw.jsx @@ -0,0 +1,60 @@ +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: "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"}, +]; + +export default function App() { + const [value, setValue] = React.useState(''); + const [selectedKey, setSelectedKey] = React.useState(null); + + const onSelectionChange = (id) => { + setSelectedKey(id); + }; + + const onInputChange = (value) => { + setValue(value) + }; + + return ( +
+ + {(item) => {item.label}} + +

Current selected animal: {selectedKey}

+

Current input text: {value}

+
+ ); +} \ No newline at end of file diff --git a/apps/docs/content/components/autocomplete/events.raw.tsx b/apps/docs/content/components/autocomplete/events.raw.tsx new file mode 100644 index 0000000000..3c072be3a6 --- /dev/null +++ b/apps/docs/content/components/autocomplete/events.raw.tsx @@ -0,0 +1,61 @@ +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: "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"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + const [selectedKey, setSelectedKey] = React.useState(null); + + const onSelectionChange = (key: React.Key | null) => { + setSelectedKey(key); + }; + + const onInputChange = (value: string) => { + setValue(value); + }; + + return ( +
+ + {(item) => {item.label}} + +

Current selected animal: {selectedKey}

+

Current input text: {value}

+
+ ); +} diff --git a/apps/docs/content/components/autocomplete/events.ts b/apps/docs/content/components/autocomplete/events.ts index 1983ff3fa4..eec42f6942 100644 --- a/apps/docs/content/components/autocomplete/events.ts +++ b/apps/docs/content/components/autocomplete/events.ts @@ -1,110 +1,11 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - - -export default function App() { - const [value, setValue] = React.useState(''); - const [selectedKey, setSelectedKey] = React.useState(null); - - const onSelectionChange = (id) => { - setSelectedKey(id); - }; - - const onInputChange = (value) => { - setValue(value) - }; - - return ( -
- - {(item) => {item.label}} - -

Current selected animal: {selectedKey}

-

Current input text: {value}

-
- ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(''); - const [selectedKey, setSelectedKey] = React.useState(null); - - const onSelectionChange = (key: React.Key) => { - setSelectedKey(key); - }; - - const onInputChange = (value: string) => { - setValue(value) - }; - - return ( -
- - {(item) => {item.label}} - -

Current selected animal: {selectedKey}

-

Current input text: {value}

-
- ); -}`; +import App from "./events.raw.jsx?raw"; +import AppTs from "./events.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, -}; - -const reactTs = { "/App.tsx": AppTs, }; export default { ...react, - ...reactTs, }; diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx new file mode 100644 index 0000000000..99449aaa4c --- /dev/null +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx @@ -0,0 +1,96 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useFilter} from "@react-aria/i18n"; + +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"}, +]; + +export default function App() { + // Store Autocomplete input value, selected option, open state, and items + // in a state tracker + const [fieldState, setFieldState] = React.useState({ + selectedKey: "", + inputValue: "", + items: animals, + }); + + // Implement custom filtering logic and control what items are + // available to the Autocomplete. + const {startsWith} = useFilter({sensitivity: "base"}); + + // Specify how each of the Autocomplete values should change when an + // option is selected from the list box + const onSelectionChange = (key) => { + setFieldState((prevState) => { + let selectedItem = prevState.items.find((option) => option.value === key); + + return { + inputValue: selectedItem?.label || "", + selectedKey: key, + items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), + }; + }); + }; + + // Specify how each of the Autocomplete values should change when the input + // field is altered by the user + const onInputChange = (value) => { + setFieldState((prevState) => ({ + inputValue: value, + selectedKey: value === "" ? null : prevState.selectedKey, + items: animals.filter((item) => startsWith(item.label, value)), + })); + }; + + // Show entire list if user opens the menu manually + const onOpenChange = (isOpen, menuTrigger) => { + if (menuTrigger === "manual" && isOpen) { + setFieldState((prevState) => ({ + inputValue: prevState.inputValue, + selectedKey: prevState.selectedKey, + items: animals, + })); + } + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx new file mode 100644 index 0000000000..b4c4bfb238 --- /dev/null +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx @@ -0,0 +1,103 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react"; +import {useFilter} from "@react-aria/i18n"; + +export type FieldState = { + selectedKey: React.Key | null; + inputValue: string; + items: typeof animals; +}; + +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"}, +]; + +export default function App() { + // Store Autocomplete input value, selected option, open state, and items + // in a state tracker + const [fieldState, setFieldState] = React.useState({ + selectedKey: "", + inputValue: "", + items: animals, + }); + + // Implement custom filtering logic and control what items are + // available to the Autocomplete. + const {startsWith} = useFilter({sensitivity: "base"}); + + // Specify how each of the Autocomplete values should change when an + // option is selected from the list box + const onSelectionChange = (key: React.Key | null) => { + setFieldState((prevState) => { + let selectedItem = prevState.items.find((option) => option.value === key); + + return { + inputValue: selectedItem?.label || "", + selectedKey: key, + items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), + }; + }); + }; + + // Specify how each of the Autocomplete values should change when the input + // field is altered by the user + const onInputChange = (value: string) => { + setFieldState((prevState) => ({ + inputValue: value, + selectedKey: value === "" ? null : prevState.selectedKey, + items: animals.filter((item) => startsWith(item.label, value)), + })); + }; + + // Show entire list if user opens the menu manually + const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => { + if (menuTrigger === "manual" && isOpen) { + setFieldState((prevState) => ({ + inputValue: prevState.inputValue, + selectedKey: prevState.selectedKey, + items: animals, + })); + } + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/fully-controlled.ts b/apps/docs/content/components/autocomplete/fully-controlled.ts index 9b969ba31c..a32d212100 100644 --- a/apps/docs/content/components/autocomplete/fully-controlled.ts +++ b/apps/docs/content/components/autocomplete/fully-controlled.ts @@ -1,187 +1,11 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useFilter} from "@react-aria/i18n"; -import {animals} from "./data"; - -export default function App() { - // Store Autocomplete input value, selected option, open state, and items - // in a state tracker - const [fieldState, setFieldState] = React.useState({ - selectedKey: "", - inputValue: "", - items: animals, - }); - - // Implement custom filtering logic and control what items are - // available to the Autocomplete. - const {startsWith} = useFilter({sensitivity: "base"}); - - // Specify how each of the Autocomplete values should change when an - // option is selected from the list box - const onSelectionChange = (key) => { - setFieldState((prevState) => { - let selectedItem = prevState.items.find((option) => option.value === key); - - return { - inputValue: selectedItem?.label || "", - selectedKey: key, - items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), - }; - }); - }; - - // Specify how each of the Autocomplete values should change when the input - // field is altered by the user - const onInputChange = (value) => { - setFieldState((prevState) => ({ - inputValue: value, - selectedKey: value === "" ? null : prevState.selectedKey, - items: animals.filter((item) => startsWith(item.label, value)), - })); - }; - - // Show entire list if user opens the menu manually - const onOpenChange = (isOpen, menuTrigger) => { - if (menuTrigger === "manual" && isOpen) { - setFieldState((prevState) => ({ - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey, - items: animals, - })); - } - }; - - return ( - - {(item) => {item.label}} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react"; -import {useFilter} from "@react-aria/i18n"; -import {animals} from "./data"; - -type FieldState = { - selectedKey: React.Key | null; - inputValue: string; - items: typeof animals; -}; - -export default function App() { - // Store Autocomplete input value, selected option, open state, and items - // in a state tracker - const [fieldState, setFieldState] = React.useState({ - selectedKey: "", - inputValue: "", - items: animals, - }); - - // Implement custom filtering logic and control what items are - // available to the Autocomplete. - const {startsWith} = useFilter({sensitivity: "base"}); - - // Specify how each of the Autocomplete values should change when an - // option is selected from the list box - const onSelectionChange = (key: React.Key) => { - setFieldState((prevState) => { - let selectedItem = prevState.items.find((option) => option.value === key); - - return { - inputValue: selectedItem?.label || "", - selectedKey: key, - items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), - }; - }); - }; - - // Specify how each of the Autocomplete values should change when the input - // field is altered by the user - const onInputChange = (value: string) => { - setFieldState((prevState) => ({ - inputValue: value, - selectedKey: value === "" ? null : prevState.selectedKey, - items: animals.filter((item) => startsWith(item.label, value)), - })); - }; - - // Show entire list if user opens the menu manually - const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => { - if (menuTrigger === "manual" && isOpen) { - setFieldState((prevState) => ({ - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey, - items: animals, - })); - } - }; - - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./fully-controlled.raw.tsx?raw"; +import AppTs from "./fully-controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, -}; - -const reactTs = { "/App.tsx": AppTs, }; export default { ...react, - ...reactTs, }; diff --git a/apps/docs/content/components/autocomplete/item-start-content.raw.jsx b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx new file mode 100644 index 0000000000..70468dd7bd --- /dev/null +++ b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx @@ -0,0 +1,68 @@ +import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( + + + } + > + Argentina + + + } + > + Venezuela + + } + > + Brazil + + + } + > + Switzerland + + } + > + Germany + + } + > + Spain + + } + > + France + + } + > + Italy + + } + > + Mexico + + + ); +} diff --git a/apps/docs/content/components/autocomplete/item-start-content.ts b/apps/docs/content/components/autocomplete/item-start-content.ts index 02a9e14bd1..331ed6f102 100644 --- a/apps/docs/content/components/autocomplete/item-start-content.ts +++ b/apps/docs/content/components/autocomplete/item-start-content.ts @@ -1,70 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( - - } - > - Argentina - - } - > - Venezuela - - } - > - Brazil - - - } - > - Switzerland - - } - > - Germany - - } - > - Spain - - } - > - France - - } - > - Italy - - } - > - Mexico - - - ); -}`; +import App from "./item-start-cotent.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/read-only.raw.jsx b/apps/docs/content/components/autocomplete/read-only.raw.jsx new file mode 100644 index 0000000000..d5d2b084f4 --- /dev/null +++ b/apps/docs/content/components/autocomplete/read-only.raw.jsx @@ -0,0 +1,44 @@ +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: "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"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/read-only.ts b/apps/docs/content/components/autocomplete/read-only.ts index 006d69b118..caf4be10cf 100644 --- a/apps/docs/content/components/autocomplete/read-only.ts +++ b/apps/docs/content/components/autocomplete/read-only.ts @@ -1,52 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./read-only.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/required.raw.jsx b/apps/docs/content/components/autocomplete/required.raw.jsx new file mode 100644 index 0000000000..cb4c4faa16 --- /dev/null +++ b/apps/docs/content/components/autocomplete/required.raw.jsx @@ -0,0 +1,44 @@ +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: "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"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/required.ts b/apps/docs/content/components/autocomplete/required.ts index d30e1b0547..b50b781e6f 100644 --- a/apps/docs/content/components/autocomplete/required.ts +++ b/apps/docs/content/components/autocomplete/required.ts @@ -1,52 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/sections.raw.jsx b/apps/docs/content/components/autocomplete/sections.raw.jsx new file mode 100644 index 0000000000..f78b068927 --- /dev/null +++ b/apps/docs/content/components/autocomplete/sections.raw.jsx @@ -0,0 +1,28 @@ +import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; + +export default function App() { + return ( + + + Lion + Tiger + Elephant + Kangaroo + Panda + Giraffe + Zebra + Cheetah + + + Eagle + Parrot + Penguin + Ostrich + Peacock + Swan + Falcon + Flamingo + + + ); +} diff --git a/apps/docs/content/components/autocomplete/sections.ts b/apps/docs/content/components/autocomplete/sections.ts index 09219558dc..17cd360ea3 100644 --- a/apps/docs/content/components/autocomplete/sections.ts +++ b/apps/docs/content/components/autocomplete/sections.ts @@ -1,35 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; - -export default function App() { - return ( - - - Lion - Tiger - Elephant - Kangaroo - Panda - Giraffe - Zebra - Cheetah - - - Eagle - Parrot - Penguin - Ostrich - Peacock - Swan - Falcon - Flamingo - - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/sizes.raw.jsx b/apps/docs/content/components/autocomplete/sizes.raw.jsx new file mode 100644 index 0000000000..bf6365be1f --- /dev/null +++ b/apps/docs/content/components/autocomplete/sizes.raw.jsx @@ -0,0 +1,59 @@ +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: "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"}, +]; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( +
+ + {(item) => {item.label}} + + + {(item) => {item.label}} + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/sizes.ts b/apps/docs/content/components/autocomplete/sizes.ts index 06acaf7e0a..85a2f5b30b 100644 --- a/apps/docs/content/components/autocomplete/sizes.ts +++ b/apps/docs/content/components/autocomplete/sizes.ts @@ -1,67 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const sizes = ["sm", "md", "lg"]; - - return ( -
- {sizes.map((size) => ( -
- - {(item) => {item.label}} - - - {(item) => {item.label}} - -
- ))} -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/start-content.raw.jsx b/apps/docs/content/components/autocomplete/start-content.raw.jsx new file mode 100644 index 0000000000..4a99e4e01d --- /dev/null +++ b/apps/docs/content/components/autocomplete/start-content.raw.jsx @@ -0,0 +1,79 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const PetIcon = (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: "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"}, +]; + +export default function App() { + return ( + } + variant="bordered" + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/start-content.ts b/apps/docs/content/components/autocomplete/start-content.ts index 90ee37634d..59191d72a7 100644 --- a/apps/docs/content/components/autocomplete/start-content.ts +++ b/apps/docs/content/components/autocomplete/start-content.ts @@ -1,89 +1,7 @@ -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"}, -];`; - -const PetIcon = `export const PetIcon = (props) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {PetIcon} from "./PetIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - } - defaultSelectedKey="cat" - className="max-w-xs" - > - {(item) => {item.label}} - - ); -}`; +import App from "./start-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/PetIcon.jsx": PetIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/usage.raw.jsx b/apps/docs/content/components/autocomplete/usage.raw.jsx new file mode 100644 index 0000000000..d25bbd6e74 --- /dev/null +++ b/apps/docs/content/components/autocomplete/usage.raw.jsx @@ -0,0 +1,51 @@ +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: "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"}, +]; + +export default function App() { + return ( +
+ + {animals.map((animal) => ( + + {animal.label} + + ))} + + + {(item) => {item.label}} + +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/usage.ts b/apps/docs/content/components/autocomplete/usage.ts index ee0831fa26..1118304c37 100644 --- a/apps/docs/content/components/autocomplete/usage.ts +++ b/apps/docs/content/components/autocomplete/usage.ts @@ -1,62 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( -
- - {animals.map((animal) => ( - - {animal.label} - - ))} - - - {(item) => {item.label}} - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/variants.raw.jsx b/apps/docs/content/components/autocomplete/variants.raw.jsx new file mode 100644 index 0000000000..dcfa9bea18 --- /dev/null +++ b/apps/docs/content/components/autocomplete/variants.raw.jsx @@ -0,0 +1,62 @@ +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: "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"}, +]; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
+ {variants.map((variant) => ( +
+ + {(item) => {item.label}} + + + {animals.map((animal) => ( + + {animal.label} + + ))} + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/variants.ts b/apps/docs/content/components/autocomplete/variants.ts index f0c5c12101..ddea95fb2e 100644 --- a/apps/docs/content/components/autocomplete/variants.ts +++ b/apps/docs/content/components/autocomplete/variants.ts @@ -1,70 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
- {variants.map((variant) => ( -
- - {(item) => {item.label}} - - - {animals.map((animal) => ( - - {animal.label} - - ))} - -
- ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx new file mode 100644 index 0000000000..1cfe3080fa --- /dev/null +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx @@ -0,0 +1,9 @@ +import App from "./without-scroll-shadow.raw.jsx?raw"; + +const react = { + "/App.jsx": App, +}; + +export default { + ...react, +}; diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx index 24e48716d0..2fdf16c7dc 100644 --- a/apps/docs/content/docs/components/dropdown.mdx +++ b/apps/docs/content/docs/components/dropdown.mdx @@ -42,18 +42,18 @@ NextUI exports 5 dropdown-related components: From 4912666cd02b7c52de82ad51d689cd1c4a7618b7 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sun, 27 Oct 2024 20:02:30 +0800 Subject: [PATCH 5/9] chore(docs): rollback overrides --- apps/docs/.eslintrc.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json index 23dda4847f..bf12dab1cd 100644 --- a/apps/docs/.eslintrc.json +++ b/apps/docs/.eslintrc.json @@ -3,7 +3,7 @@ "ignorePatterns": ["!**/*"], "overrides": [ { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "files": ["*.ts", "*.tsx"], "parserOptions": { "project": ["apps/docs/tsconfig(.*)?.json"], "ecmaFeatures": { @@ -22,10 +22,6 @@ { "files": ["*.ts", "*.tsx"], "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} } ] } From 1e222f786ce39c8fae5e5a2a564586e98d223cd6 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sun, 27 Oct 2024 20:05:03 +0800 Subject: [PATCH 6/9] chore(autocomplete): lint --- .../autocomplete/async-filtering.raw.jsx | 2 +- .../autocomplete/async-loading-items.raw.jsx | 10 ++++++---- .../components/autocomplete/events.raw.jsx | 20 +++++++++---------- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.jsx b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx index 138e2e28fe..2e25aaa5b4 100644 --- a/apps/docs/content/components/autocomplete/async-filtering.raw.jsx +++ b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx @@ -31,4 +31,4 @@ export default function App() { )} ); -} \ No newline at end of file +} diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx index ab72057a1d..f7d810e3ea 100644 --- a/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx +++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx @@ -37,8 +37,10 @@ export function usePokemonList({fetchDelay = 0} = {}) { setItems((prevItems) => [...prevItems, ...json.results]); } catch (error) { if (error.name === "AbortError") { + // eslint-disable-next-line no-console console.log("Fetch aborted"); } else { + // eslint-disable-next-line no-console console.error("There was an error with the fetch operation:", error); } } finally { @@ -63,7 +65,7 @@ export function usePokemonList({fetchDelay = 0} = {}) { isLoading, onLoadMore, }; -}; +} export default function App() { const [isOpen, setIsOpen] = React.useState(false); @@ -79,12 +81,12 @@ export default function App() { return ( {(item) => ( @@ -94,4 +96,4 @@ export default function App() { )} ); -} \ No newline at end of file +} diff --git a/apps/docs/content/components/autocomplete/events.raw.jsx b/apps/docs/content/components/autocomplete/events.raw.jsx index 67e36c6606..4fca879e86 100644 --- a/apps/docs/content/components/autocomplete/events.raw.jsx +++ b/apps/docs/content/components/autocomplete/events.raw.jsx @@ -29,27 +29,27 @@ export const animals = [ ]; export default function App() { - const [value, setValue] = React.useState(''); + const [value, setValue] = React.useState(""); const [selectedKey, setSelectedKey] = React.useState(null); const onSelectionChange = (id) => { setSelectedKey(id); }; - + const onInputChange = (value) => { - setValue(value) + setValue(value); }; return (
- {(item) => {item.label}} @@ -57,4 +57,4 @@ export default function App() {

Current input text: {value}

); -} \ No newline at end of file +} From 42d172c15406bd9f924e8e397e29f73fac6b8c63 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 28 Oct 2024 21:20:04 +0800 Subject: [PATCH 7/9] fix(autocomplete): incorrect import path --- apps/docs/content/components/autocomplete/item-start-content.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/components/autocomplete/item-start-content.ts b/apps/docs/content/components/autocomplete/item-start-content.ts index 331ed6f102..294a22e6b2 100644 --- a/apps/docs/content/components/autocomplete/item-start-content.ts +++ b/apps/docs/content/components/autocomplete/item-start-content.ts @@ -1,4 +1,4 @@ -import App from "./item-start-cotent.raw.jsx?raw"; +import App from "./item-start-content.raw.jsx?raw"; const react = { "/App.jsx": App, From 64b6b379664a741d8b053055af9439d2a68bcc5d Mon Sep 17 00:00:00 2001 From: WK Wong Date: Wed, 6 Nov 2024 13:16:00 +0800 Subject: [PATCH 8/9] fix(docs): autocomplete dx --- .../autocomplete/custom-selector-icon.raw.jsx | 42 +++++----- .../autocomplete/custom-styles.raw.jsx | 56 +++++++------ .../components/autocomplete/disabled.raw.jsx | 44 +++++++++++ .../components/autocomplete/disabled.ts | 47 +---------- .../components/autocomplete/dynamic.raw.jsx | 1 + .../autocomplete/label-placements.raw.jsx | 74 +++++++++++++++++ .../autocomplete/label-placements.ts | 79 +------------------ .../autocomplete/start-content.raw.jsx | 68 ++++++++-------- .../without-scroll-shadow.raw.jsx | 51 ++++++++++-- .../autocomplete/without-scroll-shadow.ts | 49 +----------- 10 files changed, 248 insertions(+), 263 deletions(-) create mode 100644 apps/docs/content/components/autocomplete/disabled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/label-placements.raw.jsx diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx index 2a7508ec25..f4d192332f 100644 --- a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx @@ -1,6 +1,25 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {SelectorIcon} from "./SelectorIcon"; +const SelectorIcon = (props) => ( + +); export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, @@ -30,27 +49,6 @@ export const animals = [ {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ]; -export const SelectorIcon = (props) => ( - -); - export default function App() { return ( ( + +); export const users = [ { @@ -205,34 +231,6 @@ export const users = [ }, ]; -export const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => ( - -); - export default function App() { return ( + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/disabled.ts b/apps/docs/content/components/autocomplete/disabled.ts index 4642caaa37..1a215cc91f 100644 --- a/apps/docs/content/components/autocomplete/disabled.ts +++ b/apps/docs/content/components/autocomplete/disabled.ts @@ -1,52 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/dynamic.raw.jsx b/apps/docs/content/components/autocomplete/dynamic.raw.jsx index 9a53ced7ee..4acc4fb52e 100644 --- a/apps/docs/content/components/autocomplete/dynamic.raw.jsx +++ b/apps/docs/content/components/autocomplete/dynamic.raw.jsx @@ -27,6 +27,7 @@ export const animals = [ {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, ]; + export default function App() { return ( +
+

Without placeholder

+
+ {placements.map((placement) => ( + + {(item) => {item.label}} + + ))} +
+
+
+

With placeholder

+
+ {placements.map((placement) => ( + + {animals.map((animal) => ( + + {animal.label} + + ))} + + ))} +
+
+ + ); +} diff --git a/apps/docs/content/components/autocomplete/label-placements.ts b/apps/docs/content/components/autocomplete/label-placements.ts index 391dba7ed9..cd2a65d352 100644 --- a/apps/docs/content/components/autocomplete/label-placements.ts +++ b/apps/docs/content/components/autocomplete/label-placements.ts @@ -1,84 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
-
-

Without placeholder

-
- {placements.map((placement) => ( - - {(item) => {item.label}} - - ))} -
-
-
-

With placeholder

-
- {placements.map((placement) => ( - - {animals.map((animal) => ( - - {animal.label} - - ))} - - ))} -
-
-
- ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/start-content.raw.jsx b/apps/docs/content/components/autocomplete/start-content.raw.jsx index 4a99e4e01d..a343e7c689 100644 --- a/apps/docs/content/components/autocomplete/start-content.raw.jsx +++ b/apps/docs/content/components/autocomplete/start-content.raw.jsx @@ -1,38 +1,40 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -export const PetIcon = (props) => ( - -); +const PetIcon = (props) => { + return ( + + ); +}; export const animals = [ {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx index 1cfe3080fa..3f332407ae 100644 --- a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx @@ -1,9 +1,46 @@ -import App from "./without-scroll-shadow.raw.jsx?raw"; +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -const react = { - "/App.jsx": App, -}; +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"}, +]; -export default { - ...react, -}; +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts index 43123ca2d1..1cfe3080fa 100644 --- a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts @@ -1,54 +1,7 @@ -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"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./without-scroll-shadow.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { From e1c1e69fbb1d663225afb12ed10dac4a735f2e45 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Wed, 6 Nov 2024 13:19:05 +0800 Subject: [PATCH 9/9] chore(docs): remove highlightedLines --- .../content/docs/components/autocomplete.mdx | 33 +++++++------------ 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx index b826b21556..8cc44adda5 100644 --- a/apps/docs/content/docs/components/autocomplete.mdx +++ b/apps/docs/content/docs/components/autocomplete.mdx @@ -63,43 +63,43 @@ Autocomplete follows the [Collection Components API](https://react-spectrum.adob - **Static**: The usage example above shows the static implementation, which can be used when the full list of options is known ahead of time. - **Dynamic**: The example below can be used when the options come from an external data source such as an API call, or update over time. - + ### Disabled - + ### Disabled Items You can disable specific items by using the `disabledKeys` property. - + ### Required If you pass the `isRequired` property to the autocomplete, it will have a `danger` asterisk at the end of the label and the autocomplete will be required. - + ### Read Only If you pass the `isReadOnly` property to the Autocomplete, the Listbox will open to display all available options, but users won't be able to select any of the listed options. - + ### Sizes - + ### Colors - + ### Variants - + ### Label Placements @@ -107,7 +107,6 @@ You can change the position of the label by setting the `labelPlacement` propert @@ -118,7 +117,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 autocomplete. - + ### Item Start & End Content @@ -134,7 +133,7 @@ By default, `Autocomplete` doesn't allow users to specify a value that doesn't e revert the input value to the current selected value on blur. By specifying `allowsCustomValue`, this behavior is suppressed and the user is free to enter any value within the field. - + ### Custom Selector Icon @@ -143,7 +142,6 @@ customize this icon by passing a custom one to the `selectorIcon` property. @@ -156,7 +154,6 @@ You can disable this shadow by passing using the `scrollShadowProps` property. @@ -166,7 +163,7 @@ You can disable this shadow by passing using the `scrollShadowProps` property. You can add a description to the autocomplete by passing the `description` property. - + ### With Error Message @@ -174,7 +171,6 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid @@ -188,7 +184,7 @@ whether through typing or option selection. The example below uses `onSelectionChange` and `onInputChange` to update the selection and input value stored in React state. - + ### Controlled @@ -196,7 +192,6 @@ You can use the `selectedKey` and `onSelectionChange` properties to control the @@ -227,7 +222,6 @@ import {useFilter} from "@react-aria/i18n"; title="Fully Controlled" showPreview={false} showOpenInCodeSandbox={false} - highlightedLines="63-64,67,69-71" files={autocompleteContent.fullyControlled} /> @@ -255,7 +249,6 @@ The following example uses the `defaultFilter` prop to filter the list of option @@ -283,7 +276,6 @@ import {useAsyncList} from "@react-stately/data"; title="Asynchronous Filtering" showPreview={false} showOpenInCodeSandbox={false} - highlightedLines="27-29,33" files={autocompleteContent.asyncFiltering} /> @@ -312,7 +304,6 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; showOpenInCodeSandbox={false} typescriptStrict={true} title="Asynchronous Loading" - highlightedLines="21-22,25,27" files={autocompleteContent.asyncLoadingItems} />