{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "textarea-autocomplete-example",
  "title": "Textarea Autocomplete",
  "description": "textarea-autocomplete-example",
  "dependencies": [
    "react-aria-components",
    "textarea-caret"
  ],
  "registryDependencies": [
    "https://intentui.com/r/text-field",
    "https://intentui.com/r/textarea",
    "https://intentui.com/r/menu",
    "https://intentui.com/r/field"
  ],
  "files": [
    {
      "path": "src/components/examples/forms/textarea/textarea-autocomplete-example.tsx",
      "content": "'use client'\n\nimport { Autocomplete, useFilter } from 'react-aria-components/Autocomplete'\nimport { TextField } from '@/components/ui/text-field'\nimport { Textarea } from '@/components/ui/textarea'\nimport { useRef, useState } from 'react'\nimport { flushSync } from 'react-dom'\nimport getCaretRect from 'textarea-caret'\nimport { Menu, MenuContent, MenuItem } from '@/components/ui/menu'\nimport { Label } from '@/components/ui/field'\n\nconst usernames = [\n  { id: 1, name: 'ethancarter' },\n  { id: 2, name: 'lilyadams' },\n  { id: 3, name: 'ryanhughes' },\n  { id: 4, name: 'graceparker' },\n  { id: 5, name: 'owenbailey' },\n  { id: 6, name: 'hannahreed' },\n  { id: 7, name: 'calebturner' },\n  { id: 8, name: 'avafoster' },\n  { id: 9, name: 'isaacward' },\n  { id: 10, name: 'elliecooper' },\n  { id: 11, name: 'nathanking' },\n  { id: 12, name: 'rubybell' },\n  { id: 13, name: 'adrianprice' },\n  { id: 14, name: 'clairebennett' },\n  { id: 15, name: 'eliwatson' },\n  { id: 16, name: 'mayacoleman' },\n  { id: 17, name: 'julianross' },\n  { id: 18, name: 'norarussell' },\n  { id: 19, name: 'aaronbrooks' },\n  { id: 20, name: 'stellaperry' },\n  { id: 21, name: 'wyattkelly' },\n  { id: 22, name: 'leahmorgan' },\n  { id: 23, name: 'sebastianhill' },\n  { id: 24, name: 'isabelgray' },\n  { id: 25, name: 'connorjames' },\n]\n\nexport default function TextareaAutocompleteExample() {\n  const { startsWith } = useFilter({ sensitivity: 'base' })\n  const [inputValue, setInputValue] = useState('')\n  const [anchorIndex, setAnchorIndex] = useState(-1)\n  const [filterValue, setFilterValue] = useState('')\n  const inputRef = useRef<HTMLTextAreaElement>(null)\n\n  function updateFilter() {\n    let { selectionStart, selectionEnd, value } = inputRef.current!\n    if (selectionStart === selectionEnd && document.activeElement === inputRef.current!) {\n      let index = value.lastIndexOf('@', selectionStart)\n      if (index >= 0) {\n        let slice = value.slice(index + 1, selectionStart)\n        if (!slice.includes(' ')) {\n          setAnchorIndex(index)\n          setFilterValue(slice)\n          return\n        }\n      }\n    }\n\n    setAnchorIndex(-1)\n  }\n\n  return (\n    <Autocomplete inputValue={filterValue} filter={startsWith}>\n      <TextField\n        value={inputValue}\n        onChange={(value) => {\n          setInputValue(value)\n          updateFilter()\n        }}\n        onSelect={updateFilter}\n        onBlur={updateFilter}\n      >\n        <Label>Reply</Label>\n        <Textarea ref={inputRef} placeholder=\"Type @ for mention\" />\n      </TextField>\n      <Menu>\n        <MenuContent\n          renderEmptyState={() => 'No results found.'}\n          popover={{\n            triggerRef: inputRef,\n            isOpen: anchorIndex >= 0,\n            isNonModal: true,\n            placement: 'bottom start',\n            trigger: 'MenuTrigger',\n            getTargetRect: (target) => {\n              let { top, left } = getCaretRect(inputRef.current!, anchorIndex!)\n              let { top: targetTop, left: targetLeft } = target.getBoundingClientRect()\n              return new DOMRect(targetLeft + left, targetTop + top, 1, 16)\n            },\n          }}\n          items={usernames}\n          onAction={(value) => {\n            const user = usernames.find((user) => String(user.id) === String(value))\n\n            if (!user) {\n              return\n            }\n\n            let prefix = inputValue.slice(0, anchorIndex) + '@' + user.name + ' '\n            let suffix = inputValue.slice(inputRef.current!.selectionEnd)\n            flushSync(() => setInputValue(prefix + suffix))\n            inputRef.current!.setSelectionRange(prefix.length, prefix.length)\n            updateFilter()\n          }}\n        >\n          {(item) => (\n            <MenuItem id={item.id} textValue={item.name}>\n              {item.name}\n            </MenuItem>\n          )}\n        </MenuContent>\n      </Menu>\n    </Autocomplete>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/textarea-autocomplete-example/page.tsx"
    }
  ],
  "type": "registry:page"
}