50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tf36,"use client" import { Autocomplete, useFilter } from "react-aria-components/Autocomplete" import { TextField } from "@/components/ui/text-field" import { Textarea } from "@/components/ui/textarea" import { useRef, useState } from "react" import { flushSync } from "react-dom" import getCaretRect from "textarea-caret" import { MenuItem, Menu, MenuTrigger } from "@/components/ui/menu" import { Label } from "@/components/ui/field" const usernames = [ { id: 1, name: "ethancarter" }, { id: 2, name: "lilyadams" }, { id: 3, name: "ryanhughes" }, { id: 4, name: "graceparker" }, { id: 5, name: "owenbailey" }, { id: 6, name: "hannahreed" }, { id: 7, name: "calebturner" }, { id: 8, name: "avafoster" }, { id: 9, name: "isaacward" }, { id: 10, name: "elliecooper" }, { id: 11, name: "nathanking" }, { id: 12, name: "rubybell" }, { id: 13, name: "adrianprice" }, { id: 14, name: "clairebennett" }, { id: 15, name: "eliwatson" }, { id: 16, name: "mayacoleman" }, { id: 17, name: "julianross" }, { id: 18, name: "norarussell" }, { id: 19, name: "aaronbrooks" }, { id: 20, name: "stellaperry" }, { id: 21, name: "wyattkelly" }, { id: 22, name: "leahmorgan" }, { id: 23, name: "sebastianhill" }, { id: 24, name: "isabelgray" }, { id: 25, name: "connorjames" }, ] export default function TextareaAutocompleteExample() { const { startsWith } = useFilter({ sensitivity: "base" }) const [inputValue, setInputValue] = useState("") const [anchorIndex, setAnchorIndex] = useState(-1) const [filterValue, setFilterValue] = useState("") const inputRef = useRef(null) function updateFilter() { let { selectionStart, selectionEnd, value } = inputRef.current! if (selectionStart === selectionEnd && document.activeElement === inputRef.current!) { let index = value.lastIndexOf("@", selectionStart) if (index >= 0) { let slice = value.slice(index + 1, selectionStart) if (!slice.includes(" ")) { setAnchorIndex(index) setFilterValue(slice) return } } } setAnchorIndex(-1) } return ( { setInputValue(value) updateFilter() }} onSelect={updateFilter} onBlur={updateFilter} > Reply

</TextField>
      <MenuTrigger>
        <Menu
          renderEmptyState={() => "No results found."}
          popover={{
            triggerRef: inputRef,
            isOpen: anchorIndex >= 0,
            isNonModal: true,
            placement: "bottom start",
            trigger: "MenuTrigger",
            getTargetRect: (target) => {
              let { top, left } = getCaretRect(inputRef.current!, anchorIndex!)
              let { top: targetTop, left: targetLeft } = target.getBoundingClientRect()
              return new DOMRect(targetLeft + left, targetTop + top, 1, 16)
            },
          }}
          items={usernames}
          onAction={(value) => {
            const user = usernames.find((user) => String(user.id) === String(value))

if (!user) {
              return
            }

let prefix = inputValue.slice(0, anchorIndex) + "@" + user.name + " "
            let suffix = inputValue.slice(inputRef.current!.selectionEnd)
            flushSync(() => setInputValue(prefix + suffix))
            inputRef.current!.setSelectionRange(prefix.length, prefix.length)
            updateFilter()
          }}
        >
          {(item) => (
            <MenuItem id={item.id} textValue={item.name}>
              {item.name}
            </MenuItem>
          )}
        </Menu>
      </MenuTrigger>
    </Autocomplete>
  )
}
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-aria-components",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-aria-components","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-aria-components"}]]}]}],["$","li","textarea-caret",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/textarea-caret","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"textarea-caret"}]]}]}]]}],["$","$L50",null,{"namespace":"@intentui","registryDependencies":["https://intentui.com/r/text-field","https://intentui.com/r/textarea","https://intentui.com/r/menu","https://intentui.com/r/field"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/examples/forms/textarea/textarea-autocomplete-example.tsx","content":"$52","type":"registry:page","target":"app/textarea-autocomplete-example/page.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>