[
{
"path": ".github/FUNDING.yml",
"content": "github: pacocoursey\n"
},
{
"path": ".github/workflows/test.yml",
"content": "name: Run E2E tests\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n test:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n\n - uses: pnpm/action-setup@v4 # respects packageManager in package.json\n\n - uses: actions/setup-node@v4\n with:\n cache: 'pnpm'\n\n - run: pnpm install\n env:\n CI: true\n\n - run: pnpm build\n - run: pnpm test:format\n - run: pnpm playwright install --with-deps\n - run: pnpm test || exit 1\n\n - name: Upload test results\n uses: actions/upload-artifact@v4\n with:\n name: playwright-report\n path: playwright-report.json\n"
},
{
"path": ".gitignore",
"content": ".DS_Store\n.idea\n.env\n.env.local\n.env.development\n.env.development.local\n*.log\nyalc.lock\n\n.vercel/\n.turbo/\n.next/\n.yalc/\nbuild/\ndist/\nnode_modules/\n.vercel\n"
},
{
"path": ".husky/pre-commit",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\npnpm lint-staged\n"
},
{
"path": ".prettierignore",
"content": ".next\ndist\npnpm-lock.yaml\n.pnpm-store\n.vercel\n"
},
{
"path": ".prettierrc.js",
"content": "module.exports = {\n semi: false,\n singleQuote: true,\n tabWidth: 2,\n trailingComma: 'all',\n printWidth: 120,\n}\n"
},
{
"path": "ARCHITECTURE.md",
"content": "# Architecture\n\n> Document is a work in progress!\n\n⌘K is born from a simple constraint: can you write a combobox with filtering and sorting using the [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) approach? We didn't want to render items manually from an array:\n\n```tsx\n// No\n<>\n {items.map((item) => {\n return
{item}
\n })}\n\n```\n\nWe didn't want to provide a render prop:\n\n```tsx\n// No\nonItemRender={({ item }) => {\n return
{item}
\n}}\n```\n\nInstead, we wanted to render components:\n\n```tsx\n// Yes\nMy item\n```\n\nEspecially, we wanted full component composition:\n\n```tsx\n// YES\n<>\n \n {staticItems}\n\n```\n\nCompound components are natural and easy to write. A few months after exploring this library, we were pleased to see [Radix UI](https://www.radix-ui.com) released using this exact approach of component structure – setting the standard for ease of use and composability.\n\nHowever, for a combobox, it is a terrible, terrible constraint that we've spent 2 years fighting.\n\n## Approach\n\n⌘K always keeps every item and group rendered in the React tree. Each item and group adds or removes itself from the DOM based on the search input. The DOM is authoritative. Item selection order is based on the DOM order, which is based on the React render order, which the consumer provides.\n\n### Discarded approach\n\nWe did not use `React.Children` iteration because it will not support component composition. There is no way to \"peek inside\" the items contained within ``, so those items cannot be filtered.\n\nWe did not use an object-based data array for each item, like `{ name: \"Logout\", action: () => logout() }` because this is strict and limiting. In reality, the interface of those objects grows with edge-cases, like `image`, `detailedSubTitle`, `hideWhenRootSearch`, etc. We prefer that you have full control of item rendering, including icons, keyboard shortcuts, and styling. Don't want an item shown? Don't render it. Only want to show an item under condition xyz? Render it.\n\nWe did not use a render prop because they are an inelegant pattern and quickly fall to long, centralised if-else logic chains. For example, if you want a fancy sparkle rainbow item, you need a new if statement to render that item specially.\n\nThe original approach for tracking which item was selected was to keep an index 0..n. But it's impossible to know which Item is in which position within the React tree when React Strict Mode is enabled, because `useEffect` runs twice and `useRef` cannot be used for stable IDs. This may be possible with `useId`, now. We created [use-descendants](https://github.com/pacocoursey/use-descendants) to track relative component indeces, but abandoned it because it could not work in Strict Mode, and will be incompatible with upcoming concurrent mode. Now, we track the selected item with its value, because it is stable across item mounts and unmounts.\n\n## Example\n\n```tsx\n\n\n A\n B\n\n```\n\nThe \"A\" item should not be shown! But we cannot remove it from the React tree, because the user controls it. In most cases, this is easy because the rendered items is sourced from a backing data array:\n\n```tsx\n<>\n {['A', 'B'].map((item) => {\n if (matches(item, search)) {\n return {item}\n }\n })}\n\n```\n\nBut in our case, the item will remain in the React tree and just be removed from the DOM:\n\n```tsx\n\n {/* returns `null`, no DOM created */}\n A\n B\n\n```\n\n## Performance\n\nThis is more expensive memory wise, because if there are 2,000 items but the list is filtered to only 2 items, we still allocate memory for 2,000 instances of the Item component. But it's our only option! Thankfully we can still keep the DOM size to 2 items.\n\n## Groups\n\nItem mount informs both the root and the parent group, which keeps track of items within it. Each group informs the root.\n"
},
{
"path": "LICENSE.md",
"content": "MIT License\n\nCopyright (c) 2022 Paco Coursey\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "
\n\n
\n\n# ⌘K [](https://www.npmjs.com/package/cmdk?activeTab=code) [](https://www.npmjs.com/package/cmdk)\n\n⌘K is a command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically. ⌘K supports a fully composable API [How?](/ARCHITECTURE.md), so you can wrap items in other components or even as static JSX.\n\n## Install\n\n```bash\npnpm install cmdk\n```\n\n## Use\n\n```tsx\nimport { Command } from 'cmdk'\n\nconst CommandMenu = () => {\n return (\n \n \n \n No results found.\n\n \n a\n b\n \n c\n \n\n Apple\n \n \n )\n}\n```\n\nOr in a dialog:\n\n```tsx\nimport { Command } from 'cmdk'\n\nconst CommandMenu = () => {\n const [open, setOpen] = React.useState(false)\n\n // Toggle the menu when ⌘K is pressed\n React.useEffect(() => {\n const down = (e) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n setOpen((open) => !open)\n }\n }\n\n document.addEventListener('keydown', down)\n return () => document.removeEventListener('keydown', down)\n }, [])\n\n return (\n \n \n \n No results found.\n\n \n a\n b\n \n c\n \n\n Apple\n \n \n )\n}\n```\n\n## Parts and styling\n\nAll parts forward props, including `ref`, to an appropriate element. Each part has a specific data-attribute (starting with `cmdk-`) that can be used for styling.\n\n### Command `[cmdk-root]`\n\nRender this to show the command menu inline, or use [Dialog](#dialog-cmdk-dialog-cmdk-overlay) to render in a elevated context. Can be controlled with the `value` and `onValueChange` props.\n\n> **Note**\n>\n> Values are always trimmed with the [trim()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim) method.\n\n```tsx\nconst [value, setValue] = React.useState('apple')\n\nreturn (\n \n \n \n Orange\n Apple\n \n \n)\n```\n\nYou can provide a custom `filter` function that is called to rank each item. Note that the value will be trimmed.\n\n```tsx\n {\n if (value.includes(search)) return 1\n return 0\n }}\n/>\n```\n\nA third argument, `keywords`, can also be provided to the filter function. Keywords act as aliases for the item value, and can also affect the rank of the item. Keywords are trimmed.\n\n```tsx\n {\n const extendValue = value + ' ' + keywords.join(' ')\n if (extendValue.includes(search)) return 1\n return 0\n }}\n/>\n```\n\nOr disable filtering and sorting entirely:\n\n```tsx\n\n \n {filteredItems.map((item) => {\n return (\n \n {item}\n \n )\n })}\n \n\n```\n\nYou can make the arrow keys wrap around the list (when you reach the end, it goes back to the first item) by setting the `loop` prop:\n\n```tsx\n\n```\n\n### Dialog `[cmdk-dialog]` `[cmdk-overlay]`\n\nProps are forwarded to [Command](#command-cmdk-root). Composes Radix UI's Dialog component. The overlay is always rendered. See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog) for more information. Can be controlled with the `open` and `onOpenChange` props.\n\n```tsx\nconst [open, setOpen] = React.useState(false)\n\nreturn (\n \n ...\n \n)\n```\n\nYou can provide a `container` prop that accepts an HTML element that is forwarded to Radix UI's Dialog Portal component to specify which element the Dialog should portal into (defaults to `body`). See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog#portal) for more information.\n\n```tsx\nconst containerElement = React.useRef(null)\n\nreturn (\n <>\n \n \n \n)\n```\n\n### Input `[cmdk-input]`\n\nAll props are forwarded to the underlying `input` element. Can be controlled with the `value` and `onValueChange` props.\n\n```tsx\nconst [search, setSearch] = React.useState('')\n\nreturn \n```\n\n### List `[cmdk-list]`\n\nContains items and groups. Animate height using the `--cmdk-list-height` CSS variable.\n\n```css\n[cmdk-list] {\n min-height: 300px;\n height: var(--cmdk-list-height);\n max-height: 500px;\n transition: height 100ms ease;\n}\n```\n\nTo scroll item into view earlier near the edges of the viewport, use scroll-padding:\n\n```css\n[cmdk-list] {\n scroll-padding-block-start: 8px;\n scroll-padding-block-end: 8px;\n}\n```\n\n### Item `[cmdk-item]` `[data-disabled?]` `[data-selected?]`\n\nItem that becomes active on pointer enter. You should provide a unique `value` for each item, but it will be automatically inferred from the `.textContent`.\n\n```tsx\n console.log('Selected', value)}\n // Value is implicity \"apple\" because of the provided text content\n>\n Apple\n\n```\n\nYou can also provide a `keywords` prop to help with filtering. Keywords are trimmed.\n\n```tsx\nApple\n```\n\n```tsx\n console.log('Selected', value)}\n // Value is implicity \"apple\" because of the provided text content\n>\n Apple\n\n```\n\nYou can force an item to always render, regardless of filtering, by passing the `forceMount` prop.\n\n### Group `[cmdk-group]` `[hidden?]`\n\nGroups items together with the given `heading` (`[cmdk-group-heading]`).\n\n```tsx\n\n Apple\n\n```\n\nGroups will not unmount from the DOM, rather the `hidden` attribute is applied to hide it from view. This may be relevant in your styling.\n\nYou can force a group to always render, regardless of filtering, by passing the `forceMount` prop.\n\n### Separator `[cmdk-separator]`\n\nVisible when the search query is empty or `alwaysRender` is true, hidden otherwise.\n\n### Empty `[cmdk-empty]`\n\nAutomatically renders when there are no results for the search query.\n\n### Loading `[cmdk-loading]`\n\nYou should conditionally render this with `progress` while loading asynchronous items.\n\n```tsx\nconst [loading, setLoading] = React.useState(false)\n\nreturn {loading && Hang on…}\n```\n\n### `useCommandState(state => state.selectedField)`\n\nHook that composes [`useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Pass a function that returns a slice of the command menu state to re-render when that slice changes. This hook is provided for advanced use cases and should not be commonly used.\n\nA good use case would be to render a more detailed empty state, like so:\n\n```tsx\nconst search = useCommandState((state) => state.search)\nreturn No results found for \"{search}\".\n```\n\n## Examples\n\nCode snippets for common use cases.\n\n### Nested items\n\nOften selecting one item should navigate deeper, with a more refined set of items. For example selecting \"Change theme…\" should show new items \"Dark theme\" and \"Light theme\". We call these sets of items \"pages\", and they can be implemented with simple state:\n\n```tsx\nconst ref = React.useRef(null)\nconst [open, setOpen] = React.useState(false)\nconst [search, setSearch] = React.useState('')\nconst [pages, setPages] = React.useState([])\nconst page = pages[pages.length - 1]\n\nreturn (\n {\n // Escape goes to previous page\n // Backspace goes to previous page when search is empty\n if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {\n e.preventDefault()\n setPages((pages) => pages.slice(0, -1))\n }\n }}\n >\n \n \n {!page && (\n <>\n setPages([...pages, 'projects'])}>Search projects…\n setPages([...pages, 'teams'])}>Join a team…\n \n )}\n\n {page === 'projects' && (\n <>\n Project A\n Project B\n \n )}\n\n {page === 'teams' && (\n <>\n Team 1\n Team 2\n \n )}\n \n \n)\n```\n\n### Show sub-items when searching\n\nIf your items have nested sub-items that you only want to reveal when searching, render based on the search state:\n\n```tsx\nconst SubItem = (props) => {\n const search = useCommandState((state) => state.search)\n if (!search) return null\n return \n}\n\nreturn (\n \n \n \n Change theme…\n Change theme to dark\n Change theme to light\n \n \n)\n```\n\n### Asynchronous results\n\nRender the items as they become available. Filtering and sorting will happen automatically.\n\n```tsx\nconst [loading, setLoading] = React.useState(false)\nconst [items, setItems] = React.useState([])\n\nReact.useEffect(() => {\n async function getItems() {\n setLoading(true)\n const res = await api.get('/dictionary')\n setItems(res)\n setLoading(false)\n }\n\n getItems()\n}, [])\n\nreturn (\n \n \n \n {loading && Fetching words…}\n {items.map((item) => {\n return (\n \n {item}\n \n )\n })}\n \n \n)\n```\n\n### Use inside Popover\n\nWe recommend using the [Radix UI popover](https://www.radix-ui.com/docs/primitives/components/popover) component. ⌘K relies on the Radix UI Dialog component, so this will reduce your bundle size a bit due to shared dependencies.\n\n```bash\n$ pnpm install @radix-ui/react-popover\n```\n\nRender `Command` inside of the popover content:\n\n```tsx\nimport * as Popover from '@radix-ui/react-popover'\n\nreturn (\n \n Toggle popover\n\n \n \n \n \n Apple\n \n \n \n \n)\n```\n\n### Drop in stylesheets\n\nYou can find global stylesheets to drop in as a starting point for styling. See [website/styles/cmdk](website/styles/cmdk) for examples.\n\n## FAQ\n\n**Accessible?** Yes. Labeling, aria attributes, and DOM ordering tested with Voice Over and Chrome DevTools. [Dialog](#dialog-cmdk-dialog-cmdk-overlay) composes an accessible Dialog implementation.\n\n**Virtualization?** No. Good performance up to 2,000-3,000 items, though. Read below to bring your own.\n\n**Filter/sort items manually?** Yes. Pass `shouldFilter={false}` to [Command](#command-cmdk-root). Better memory usage and performance. Bring your own virtualization this way.\n\n**React 18 safe?** Yes, required. Uses React 18 hooks like `useId` and `useSyncExternalStore`.\n\n**Unstyled?** Yes, use the listed CSS selectors.\n\n**Hydration mismatch?** No, likely a bug in your code. Ensure the `open` prop to `Command.Dialog` is `false` on the server.\n\n**React strict mode safe?** Yes. Open an issue if you notice an issue.\n\n**Weird/wrong behavior?** Make sure your `Command.Item` has a `key` and unique `value`.\n\n**Concurrent mode safe?** Maybe, but concurrent mode is not yet real. Uses risky approaches like manual DOM ordering.\n\n**React server component?** No, it's a client component.\n\n**Listen for ⌘K automatically?** No, do it yourself to have full control over keybind context.\n\n**React Native?** No, and no plans to support it. If you build a React Native version, let us know and we'll link your repository here.\n\n## History\n\nWritten in 2019 by Paco ([@pacocoursey](https://twitter.com/pacocoursey)) to see if a composable combobox API was possible. Used for the Vercel command menu and autocomplete by Rauno ([@raunofreiberg](https://twitter.com/raunofreiberg)) in 2020. Re-written independently in 2022 with a simpler and more performant approach. Ideas and help from Shu ([@shuding\\_](https://twitter.com/shuding_)).\n\n[use-descendants](https://github.com/pacocoursey/use-descendants) was extracted from the 2019 version.\n\n## Testing\n\nFirst, install dependencies and Playwright browsers:\n\n```bash\npnpm install\npnpm playwright install\n```\n\nThen ensure you've built the library:\n\n```bash\npnpm build\n```\n\nThen run the tests using your local build against real browser engines:\n\n```bash\npnpm test\n```\n"
},
{
"path": "cmdk/package.json",
"content": "{\n \"name\": \"cmdk\",\n \"version\": \"1.1.1\",\n \"license\": \"MIT\",\n \"main\": \"./dist/index.js\",\n \"module\": \"./dist/index.mjs\",\n \"types\": \"./dist/index.d.ts\",\n \"files\": [\n \"dist\"\n ],\n \"exports\": {\n \".\": {\n \"types\": \"./dist/index.d.ts\",\n \"import\": \"./dist/index.mjs\",\n \"require\": \"./dist/index.js\"\n }\n },\n \"scripts\": {\n \"prepublishOnly\": \"cp ../README.md . && pnpm build\",\n \"postpublish\": \"rm README.md\",\n \"build\": \"tsup src\",\n \"dev\": \"tsup src --watch\"\n },\n \"peerDependencies\": {\n \"react\": \"^18 || ^19 || ^19.0.0-rc\",\n \"react-dom\": \"^18 || ^19 || ^19.0.0-rc\"\n },\n \"dependencies\": {\n \"@radix-ui/react-compose-refs\": \"^1.1.1\",\n \"@radix-ui/react-dialog\": \"^1.1.6\",\n \"@radix-ui/react-id\": \"^1.1.0\",\n \"@radix-ui/react-primitive\": \"^2.0.2\"\n },\n \"devDependencies\": {\n \"@types/react\": \"18.0.15\"\n },\n \"sideEffects\": false,\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/pacocoursey/cmdk.git\",\n \"directory\": \"cmdk\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/pacocoursey/cmdk/issues\"\n },\n \"homepage\": \"https://github.com/pacocoursey/cmdk#readme\",\n \"author\": {\n \"name\": \"Paco\",\n \"url\": \"https://github.com/pacocoursey\"\n }\n}\n"
},
{
"path": "cmdk/src/command-score.ts",
"content": "// The scores are arranged so that a continuous match of characters will\n// result in a total score of 1.\n//\n// The best case, this character is a match, and either this is the start\n// of the string, or the previous character was also a match.\nvar SCORE_CONTINUE_MATCH = 1,\n // A new match at the start of a word scores better than a new match\n // elsewhere as it's more likely that the user will type the starts\n // of fragments.\n // NOTE: We score word jumps between spaces slightly higher than slashes, brackets\n // hyphens, etc.\n SCORE_SPACE_WORD_JUMP = 0.9,\n SCORE_NON_SPACE_WORD_JUMP = 0.8,\n // Any other match isn't ideal, but we include it for completeness.\n SCORE_CHARACTER_JUMP = 0.17,\n // If the user transposed two letters, it should be significantly penalized.\n //\n // i.e. \"ouch\" is more likely than \"curtain\" when \"uc\" is typed.\n SCORE_TRANSPOSITION = 0.1,\n // The goodness of a match should decay slightly with each missing\n // character.\n //\n // i.e. \"bad\" is more likely than \"bard\" when \"bd\" is typed.\n //\n // This will not change the order of suggestions based on SCORE_* until\n // 100 characters are inserted between matches.\n PENALTY_SKIPPED = 0.999,\n // The goodness of an exact-case match should be higher than a\n // case-insensitive match by a small amount.\n //\n // i.e. \"HTML\" is more likely than \"haml\" when \"HM\" is typed.\n //\n // This will not change the order of suggestions based on SCORE_* until\n // 1000 characters are inserted between matches.\n PENALTY_CASE_MISMATCH = 0.9999,\n // Match higher for letters closer to the beginning of the word\n PENALTY_DISTANCE_FROM_START = 0.9,\n // If the word has more characters than the user typed, it should\n // be penalised slightly.\n //\n // i.e. \"html\" is more likely than \"html5\" if I type \"html\".\n //\n // However, it may well be the case that there's a sensible secondary\n // ordering (like alphabetical) that it makes sense to rely on when\n // there are many prefix matches, so we don't make the penalty increase\n // with the number of tokens.\n PENALTY_NOT_COMPLETE = 0.99\n\nvar IS_GAP_REGEXP = /[\\\\\\/_+.#\"@\\[\\(\\{&]/,\n COUNT_GAPS_REGEXP = /[\\\\\\/_+.#\"@\\[\\(\\{&]/g,\n IS_SPACE_REGEXP = /[\\s-]/,\n COUNT_SPACE_REGEXP = /[\\s-]/g\n\nfunction commandScoreInner(\n string,\n abbreviation,\n lowerString,\n lowerAbbreviation,\n stringIndex,\n abbreviationIndex,\n memoizedResults,\n) {\n if (abbreviationIndex === abbreviation.length) {\n if (stringIndex === string.length) {\n return SCORE_CONTINUE_MATCH\n }\n return PENALTY_NOT_COMPLETE\n }\n\n var memoizeKey = `${stringIndex},${abbreviationIndex}`\n if (memoizedResults[memoizeKey] !== undefined) {\n return memoizedResults[memoizeKey]\n }\n\n var abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex)\n var index = lowerString.indexOf(abbreviationChar, stringIndex)\n var highScore = 0\n\n var score, transposedScore, wordBreaks, spaceBreaks\n\n while (index >= 0) {\n score = commandScoreInner(\n string,\n abbreviation,\n lowerString,\n lowerAbbreviation,\n index + 1,\n abbreviationIndex + 1,\n memoizedResults,\n )\n if (score > highScore) {\n if (index === stringIndex) {\n score *= SCORE_CONTINUE_MATCH\n } else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {\n score *= SCORE_NON_SPACE_WORD_JUMP\n wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP)\n if (wordBreaks && stringIndex > 0) {\n score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length)\n }\n } else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {\n score *= SCORE_SPACE_WORD_JUMP\n spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP)\n if (spaceBreaks && stringIndex > 0) {\n score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length)\n }\n } else {\n score *= SCORE_CHARACTER_JUMP\n if (stringIndex > 0) {\n score *= Math.pow(PENALTY_SKIPPED, index - stringIndex)\n }\n }\n\n if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {\n score *= PENALTY_CASE_MISMATCH\n }\n }\n\n if (\n (score < SCORE_TRANSPOSITION &&\n lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) ||\n (lowerAbbreviation.charAt(abbreviationIndex + 1) === lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428\n lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))\n ) {\n transposedScore = commandScoreInner(\n string,\n abbreviation,\n lowerString,\n lowerAbbreviation,\n index + 1,\n abbreviationIndex + 2,\n memoizedResults,\n )\n\n if (transposedScore * SCORE_TRANSPOSITION > score) {\n score = transposedScore * SCORE_TRANSPOSITION\n }\n }\n\n if (score > highScore) {\n highScore = score\n }\n\n index = lowerString.indexOf(abbreviationChar, index + 1)\n }\n\n memoizedResults[memoizeKey] = highScore\n return highScore\n}\n\nfunction formatInput(string) {\n // convert all valid space characters to space so they match each other\n return string.toLowerCase().replace(COUNT_SPACE_REGEXP, ' ')\n}\n\nexport function commandScore(string: string, abbreviation: string, aliases: string[]): number {\n /* NOTE:\n * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()\n * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.\n */\n string = aliases && aliases.length > 0 ? `${string + ' ' + aliases.join(' ')}` : string\n return commandScoreInner(string, abbreviation, formatInput(string), formatInput(abbreviation), 0, 0, {})\n}\n"
},
{
"path": "cmdk/src/index.tsx",
"content": "'use client'\n\nimport * as RadixDialog from '@radix-ui/react-dialog'\nimport * as React from 'react'\nimport { commandScore } from './command-score'\nimport { Primitive } from '@radix-ui/react-primitive'\nimport { useId } from '@radix-ui/react-id'\nimport { composeRefs } from '@radix-ui/react-compose-refs'\n\ntype Children = { children?: React.ReactNode }\ntype DivProps = React.ComponentPropsWithoutRef\n\ntype LoadingProps = Children &\n DivProps & {\n /** Estimated progress of loading asynchronous options. */\n progress?: number\n /**\n * Accessible label for this loading progressbar. Not shown visibly.\n */\n label?: string\n }\n\ntype EmptyProps = Children & DivProps & {}\ntype SeparatorProps = DivProps & {\n /** Whether this separator should always be rendered. Useful if you disable automatic filtering. */\n alwaysRender?: boolean\n}\ntype DialogProps = RadixDialog.DialogProps &\n CommandProps & {\n /** Provide a className to the Dialog overlay. */\n overlayClassName?: string\n /** Provide a className to the Dialog content. */\n contentClassName?: string\n /** Provide a custom element the Dialog should portal into. */\n container?: HTMLElement\n }\ntype ListProps = Children &\n DivProps & {\n /**\n * Accessible label for this List of suggestions. Not shown visibly.\n */\n label?: string\n }\ntype ItemProps = Children &\n Omit & {\n /** Whether this item is currently disabled. */\n disabled?: boolean\n /** Event handler for when this item is selected, either via click or keyboard selection. */\n onSelect?: (value: string) => void\n /**\n * A unique value for this item.\n * If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.\n */\n value?: string\n /** Optional keywords to match against when filtering. */\n keywords?: string[]\n /** Whether this item is forcibly rendered regardless of filtering. */\n forceMount?: boolean\n }\ntype GroupProps = Children &\n Omit & {\n /** Optional heading to render for this group. */\n heading?: React.ReactNode\n /** If no heading is provided, you must provide a value that is unique for this group. */\n value?: string\n /** Whether this group is forcibly rendered regardless of filtering. */\n forceMount?: boolean\n }\ntype InputProps = Omit, 'value' | 'onChange' | 'type'> & {\n /**\n * Optional controlled state for the value of the search input.\n */\n value?: string\n /**\n * Event handler called when the search value changes.\n */\n onValueChange?: (search: string) => void\n}\ntype CommandFilter = (value: string, search: string, keywords?: string[]) => number\ntype CommandProps = Children &\n DivProps & {\n /**\n * Accessible label for this command menu. Not shown visibly.\n */\n label?: string\n /**\n * Optionally set to `false` to turn off the automatic filtering and sorting.\n * If `false`, you must conditionally render valid items based on the search query yourself.\n */\n shouldFilter?: boolean\n /**\n * Custom filter function for whether each command menu item should matches the given search query.\n * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.\n * By default, uses the `command-score` library.\n */\n filter?: CommandFilter\n /**\n * Optional default item value when it is initially rendered.\n */\n defaultValue?: string\n /**\n * Optional controlled state of the selected command menu item.\n */\n value?: string\n /**\n * Event handler called when the selected item of the menu changes.\n */\n onValueChange?: (value: string) => void\n /**\n * Optionally set to `true` to turn on looping around when using the arrow keys.\n */\n loop?: boolean\n /**\n * Optionally set to `true` to disable selection via pointer events.\n */\n disablePointerSelection?: boolean\n /**\n * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.\n */\n vimBindings?: boolean\n }\n\ntype Context = {\n value: (id: string, value: string, keywords?: string[]) => void\n item: (id: string, groupId: string) => () => void\n group: (id: string) => () => void\n filter: () => boolean\n label: string\n getDisablePointerSelection: () => boolean\n // Ids\n listId: string\n labelId: string\n inputId: string\n // Refs\n listInnerRef: React.RefObject\n}\ntype State = {\n search: string\n value: string\n selectedItemId?: string\n filtered: { count: number; items: Map; groups: Set }\n}\ntype Store = {\n subscribe: (callback: () => void) => () => void\n snapshot: () => State\n setState: (key: K, value: State[K], opts?: any) => void\n emit: () => void\n}\ntype Group = {\n id: string\n forceMount?: boolean\n}\n\nconst GROUP_SELECTOR = `[cmdk-group=\"\"]`\nconst GROUP_ITEMS_SELECTOR = `[cmdk-group-items=\"\"]`\nconst GROUP_HEADING_SELECTOR = `[cmdk-group-heading=\"\"]`\nconst ITEM_SELECTOR = `[cmdk-item=\"\"]`\nconst VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled=\"true\"])`\nconst SELECT_EVENT = `cmdk-item-select`\nconst VALUE_ATTR = `data-value`\nconst defaultFilter: CommandFilter = (value, search, keywords) => commandScore(value, search, keywords)\n\nconst CommandContext = React.createContext(undefined)\nconst useCommand = () => React.useContext(CommandContext)\nconst StoreContext = React.createContext(undefined)\nconst useStore = () => React.useContext(StoreContext)\nconst GroupContext = React.createContext(undefined)\n\nconst Command = React.forwardRef((props, forwardedRef) => {\n const state = useLazyRef(() => ({\n /** Value of the search query. */\n search: '',\n /** Currently selected item value. */\n value: props.value ?? props.defaultValue ?? '',\n /** Currently selected item id. */\n selectedItemId: undefined,\n filtered: {\n /** The count of all visible items. */\n count: 0,\n /** Map from visible item id to its search score. */\n items: new Map(),\n /** Set of groups with at least one visible item. */\n groups: new Set(),\n },\n }))\n const allItems = useLazyRef>(() => new Set()) // [...itemIds]\n const allGroups = useLazyRef>>(() => new Map()) // groupId → [...itemIds]\n const ids = useLazyRef>(() => new Map()) // id → { value, keywords }\n const listeners = useLazyRef void>>(() => new Set()) // [...rerenders]\n const propsRef = useAsRef(props)\n const {\n label,\n children,\n value,\n onValueChange,\n filter,\n shouldFilter,\n loop,\n disablePointerSelection = false,\n vimBindings = true,\n ...etc\n } = props\n\n const listId = useId()\n const labelId = useId()\n const inputId = useId()\n\n const listInnerRef = React.useRef(null)\n\n const schedule = useScheduleLayoutEffect()\n\n /** Controlled mode `value` handling. */\n useLayoutEffect(() => {\n if (value !== undefined) {\n const v = value.trim()\n state.current.value = v\n store.emit()\n }\n }, [value])\n\n useLayoutEffect(() => {\n schedule(6, scrollSelectedIntoView)\n }, [])\n\n const store: Store = React.useMemo(() => {\n return {\n subscribe: (cb) => {\n listeners.current.add(cb)\n return () => listeners.current.delete(cb)\n },\n snapshot: () => {\n return state.current\n },\n setState: (key, value, opts) => {\n if (Object.is(state.current[key], value)) return\n state.current[key] = value\n\n if (key === 'search') {\n // Filter synchronously before emitting back to children\n filterItems()\n sort()\n schedule(1, selectFirstItem)\n } else if (key === 'value') {\n // Force focus input or root so accessibility works\n if (document.activeElement.hasAttribute('cmdk-input') || document.activeElement.hasAttribute('cmdk-root')) {\n const input = document.getElementById(inputId)\n if (input) input.focus()\n else document.getElementById(listId)?.focus()\n }\n\n schedule(7, () => {\n state.current.selectedItemId = getSelectedItem()?.id\n store.emit()\n })\n\n // opts is a boolean referring to whether it should NOT be scrolled into view\n if (!opts) {\n // Scroll the selected item into view\n schedule(5, scrollSelectedIntoView)\n }\n if (propsRef.current?.value !== undefined) {\n // If controlled, just call the callback instead of updating state internally\n const newValue = (value ?? '') as string\n propsRef.current.onValueChange?.(newValue)\n return\n }\n }\n\n // Notify subscribers that state has changed\n store.emit()\n },\n emit: () => {\n listeners.current.forEach((l) => l())\n },\n }\n }, [])\n\n const context: Context = React.useMemo(\n () => ({\n // Keep id → {value, keywords} mapping up-to-date\n value: (id, value, keywords) => {\n if (value !== ids.current.get(id)?.value) {\n ids.current.set(id, { value, keywords })\n state.current.filtered.items.set(id, score(value, keywords))\n schedule(2, () => {\n sort()\n store.emit()\n })\n }\n },\n // Track item lifecycle (mount, unmount)\n item: (id, groupId) => {\n allItems.current.add(id)\n\n // Track this item within the group\n if (groupId) {\n if (!allGroups.current.has(groupId)) {\n allGroups.current.set(groupId, new Set([id]))\n } else {\n allGroups.current.get(groupId).add(id)\n }\n }\n\n // Batch this, multiple items can mount in one pass\n // and we should not be filtering/sorting/emitting each time\n schedule(3, () => {\n filterItems()\n sort()\n\n // Could be initial mount, select the first item if none already selected\n if (!state.current.value) {\n selectFirstItem()\n }\n\n store.emit()\n })\n\n return () => {\n ids.current.delete(id)\n allItems.current.delete(id)\n state.current.filtered.items.delete(id)\n const selectedItem = getSelectedItem()\n\n // Batch this, multiple items could be removed in one pass\n schedule(4, () => {\n filterItems()\n\n // The item removed have been the selected one,\n // so selection should be moved to the first\n if (selectedItem?.getAttribute('id') === id) selectFirstItem()\n\n store.emit()\n })\n }\n },\n // Track group lifecycle (mount, unmount)\n group: (id) => {\n if (!allGroups.current.has(id)) {\n allGroups.current.set(id, new Set())\n }\n\n return () => {\n ids.current.delete(id)\n allGroups.current.delete(id)\n }\n },\n filter: () => {\n return propsRef.current.shouldFilter\n },\n label: label || props['aria-label'],\n getDisablePointerSelection: () => {\n return propsRef.current.disablePointerSelection\n },\n listId,\n inputId,\n labelId,\n listInnerRef,\n }),\n [],\n )\n\n function score(value: string, keywords?: string[]) {\n const filter = propsRef.current?.filter ?? defaultFilter\n return value ? filter(value, state.current.search, keywords) : 0\n }\n\n /** Sorts items by score, and groups by highest item score. */\n function sort() {\n if (\n !state.current.search ||\n // Explicitly false, because true | undefined is the default\n propsRef.current.shouldFilter === false\n ) {\n return\n }\n\n const scores = state.current.filtered.items\n\n // Sort the groups\n const groups: [string, number][] = []\n state.current.filtered.groups.forEach((value) => {\n const items = allGroups.current.get(value)\n\n // Get the maximum score of the group's items\n let max = 0\n items.forEach((item) => {\n const score = scores.get(item)\n max = Math.max(score, max)\n })\n\n groups.push([value, max])\n })\n\n // Sort items within groups to bottom\n // Sort items outside of groups\n // Sort groups to bottom (pushes all non-grouped items to the top)\n const listInsertionElement = listInnerRef.current\n\n // Sort the items\n getValidItems()\n .sort((a, b) => {\n const valueA = a.getAttribute('id')\n const valueB = b.getAttribute('id')\n return (scores.get(valueB) ?? 0) - (scores.get(valueA) ?? 0)\n })\n .forEach((item) => {\n const group = item.closest(GROUP_ITEMS_SELECTOR)\n\n if (group) {\n group.appendChild(item.parentElement === group ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`))\n } else {\n listInsertionElement.appendChild(\n item.parentElement === listInsertionElement ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`),\n )\n }\n })\n\n groups\n .sort((a, b) => b[1] - a[1])\n .forEach((group) => {\n const element = listInnerRef.current?.querySelector(\n `${GROUP_SELECTOR}[${VALUE_ATTR}=\"${encodeURIComponent(group[0])}\"]`,\n )\n element?.parentElement.appendChild(element)\n })\n }\n\n function selectFirstItem() {\n const item = getValidItems().find((item) => item.getAttribute('aria-disabled') !== 'true')\n const value = item?.getAttribute(VALUE_ATTR)\n store.setState('value', value || undefined)\n }\n\n /** Filters the current items. */\n function filterItems() {\n if (\n !state.current.search ||\n // Explicitly false, because true | undefined is the default\n propsRef.current.shouldFilter === false\n ) {\n state.current.filtered.count = allItems.current.size\n // Do nothing, each item will know to show itself because search is empty\n return\n }\n\n // Reset the groups\n state.current.filtered.groups = new Set()\n let itemCount = 0\n\n // Check which items should be included\n for (const id of allItems.current) {\n const value = ids.current.get(id)?.value ?? ''\n const keywords = ids.current.get(id)?.keywords ?? []\n const rank = score(value, keywords)\n state.current.filtered.items.set(id, rank)\n if (rank > 0) itemCount++\n }\n\n // Check which groups have at least 1 item shown\n for (const [groupId, group] of allGroups.current) {\n for (const itemId of group) {\n if (state.current.filtered.items.get(itemId) > 0) {\n state.current.filtered.groups.add(groupId)\n break\n }\n }\n }\n\n state.current.filtered.count = itemCount\n }\n\n function scrollSelectedIntoView() {\n const item = getSelectedItem()\n\n if (item) {\n if (item.parentElement?.firstChild === item) {\n // First item in Group, ensure heading is in view\n item.closest(GROUP_SELECTOR)?.querySelector(GROUP_HEADING_SELECTOR)?.scrollIntoView({ block: 'nearest' })\n }\n\n // Ensure the item is always in view\n item.scrollIntoView({ block: 'nearest' })\n }\n }\n\n /** Getters */\n\n function getSelectedItem() {\n return listInnerRef.current?.querySelector(`${ITEM_SELECTOR}[aria-selected=\"true\"]`)\n }\n\n function getValidItems() {\n return Array.from(listInnerRef.current?.querySelectorAll(VALID_ITEM_SELECTOR) || [])\n }\n\n /** Setters */\n\n function updateSelectedToIndex(index: number) {\n const items = getValidItems()\n const item = items[index]\n if (item) store.setState('value', item.getAttribute(VALUE_ATTR))\n }\n\n function updateSelectedByItem(change: 1 | -1) {\n const selected = getSelectedItem()\n const items = getValidItems()\n const index = items.findIndex((item) => item === selected)\n\n // Get item at this index\n let newSelected = items[index + change]\n\n if (propsRef.current?.loop) {\n newSelected =\n index + change < 0\n ? items[items.length - 1]\n : index + change === items.length\n ? items[0]\n : items[index + change]\n }\n\n if (newSelected) store.setState('value', newSelected.getAttribute(VALUE_ATTR))\n }\n\n function updateSelectedByGroup(change: 1 | -1) {\n const selected = getSelectedItem()\n let group = selected?.closest(GROUP_SELECTOR)\n let item: HTMLElement\n\n while (group && !item) {\n group = change > 0 ? findNextSibling(group, GROUP_SELECTOR) : findPreviousSibling(group, GROUP_SELECTOR)\n item = group?.querySelector(VALID_ITEM_SELECTOR)\n }\n\n if (item) {\n store.setState('value', item.getAttribute(VALUE_ATTR))\n } else {\n updateSelectedByItem(change)\n }\n }\n\n const last = () => updateSelectedToIndex(getValidItems().length - 1)\n\n const next = (e: React.KeyboardEvent) => {\n e.preventDefault()\n\n if (e.metaKey) {\n // Last item\n last()\n } else if (e.altKey) {\n // Next group\n updateSelectedByGroup(1)\n } else {\n // Next item\n updateSelectedByItem(1)\n }\n }\n\n const prev = (e: React.KeyboardEvent) => {\n e.preventDefault()\n\n if (e.metaKey) {\n // First item\n updateSelectedToIndex(0)\n } else if (e.altKey) {\n // Previous group\n updateSelectedByGroup(-1)\n } else {\n // Previous item\n updateSelectedByItem(-1)\n }\n }\n\n return (\n {\n etc.onKeyDown?.(e)\n\n // Check if IME composition is finished before triggering key binds\n // This prevents unwanted triggering while user is still inputting text with IME\n // e.keyCode === 229 is for the CJK IME with Legacy Browser [https://w3c.github.io/uievents/#determine-keydown-keyup-keyCode]\n // isComposing is for the CJK IME with Modern Browser [https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent/isComposing]\n const isComposing = e.nativeEvent.isComposing || e.keyCode === 229\n\n if (e.defaultPrevented || isComposing) {\n return\n }\n\n switch (e.key) {\n case 'n':\n case 'j': {\n // vim keybind down\n if (vimBindings && e.ctrlKey) {\n next(e)\n }\n break\n }\n case 'ArrowDown': {\n next(e)\n break\n }\n case 'p':\n case 'k': {\n // vim keybind up\n if (vimBindings && e.ctrlKey) {\n prev(e)\n }\n break\n }\n case 'ArrowUp': {\n prev(e)\n break\n }\n case 'Home': {\n // First item\n e.preventDefault()\n updateSelectedToIndex(0)\n break\n }\n case 'End': {\n // Last item\n e.preventDefault()\n last()\n break\n }\n case 'Enter': {\n // Trigger item onSelect\n e.preventDefault()\n const item = getSelectedItem()\n if (item) {\n const event = new Event(SELECT_EVENT)\n item.dispatchEvent(event)\n }\n }\n }\n }}\n >\n \n {label}\n \n {SlottableWithNestedChildren(props, (child) => (\n \n {child}\n \n ))}\n \n )\n})\n\n/**\n * Command menu item. Becomes active on pointer enter or through keyboard navigation.\n * Preferably pass a `value`, otherwise the value will be inferred from `children` or\n * the rendered item's `textContent`.\n */\nconst Item = React.forwardRef((props, forwardedRef) => {\n const id = useId()\n const ref = React.useRef(null)\n const groupContext = React.useContext(GroupContext)\n const context = useCommand()\n const propsRef = useAsRef(props)\n const forceMount = propsRef.current?.forceMount ?? groupContext?.forceMount\n\n useLayoutEffect(() => {\n if (!forceMount) {\n return context.item(id, groupContext?.id)\n }\n }, [forceMount])\n\n const value = useValue(id, ref, [props.value, props.children, ref], props.keywords)\n\n const store = useStore()\n const selected = useCmdk((state) => state.value && state.value === value.current)\n const render = useCmdk((state) =>\n forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.items.get(id) > 0,\n )\n\n React.useEffect(() => {\n const element = ref.current\n if (!element || props.disabled) return\n element.addEventListener(SELECT_EVENT, onSelect)\n return () => element.removeEventListener(SELECT_EVENT, onSelect)\n }, [render, props.onSelect, props.disabled])\n\n function onSelect() {\n select()\n propsRef.current.onSelect?.(value.current)\n }\n\n function select() {\n store.setState('value', value.current, true)\n }\n\n if (!render) return null\n\n const { disabled, value: _, onSelect: __, forceMount: ___, keywords: ____, ...etc } = props\n\n return (\n \n {props.children}\n \n )\n})\n\n/**\n * Group command menu items together with a heading.\n * Grouped items are always shown together.\n */\nconst Group = React.forwardRef((props, forwardedRef) => {\n const { heading, children, forceMount, ...etc } = props\n const id = useId()\n const ref = React.useRef(null)\n const headingRef = React.useRef(null)\n const headingId = useId()\n const context = useCommand()\n const render = useCmdk((state) =>\n forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id),\n )\n\n useLayoutEffect(() => {\n return context.group(id)\n }, [])\n\n useValue(id, ref, [props.value, props.heading, headingRef])\n\n const contextValue = React.useMemo(() => ({ id, forceMount }), [forceMount])\n\n return (\n \n {heading && (\n
![](\"./website/public/og.png\")
\n