@telegraph/combobox 0.0.28 → 0.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +295 -270
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Combobox/Combobox.d.ts +5 -4
- package/dist/types/Combobox/Combobox.d.ts.map +1 -1
- package/dist/types/Combobox/Combobox.helpers.d.ts +1 -1
- package/dist/types/Combobox/Combobox.helpers.d.ts.map +1 -1
- package/package.json +11 -10
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Combobox/Combobox.constants.ts","../../src/Combobox/Combobox.helpers.ts","../../src/Combobox/Combobox.tsx"],"sourcesContent":["export const TRIGGER_MIN_HEIGHT = {\n \"0\": \"5\",\n \"1\": \"6\",\n \"2\": \"8\",\n \"3\": \"10\",\n};\n","export type Option = { value: string; label?: string };\nexport const isMultiSelect = (\n value: Option | Array<Option>,\n): value is Array<Option> => {\n return Array.isArray(value);\n};\n\nexport const isSingleSelect = (\n value: Option | Array<Option>,\n): value is Option => {\n return typeof value === \"object\" && !Array.isArray(value);\n};\n","import { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button as TelegraphButton } from \"@telegraph/button\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport {\n RefToTgphRef,\n type TgphComponentProps,\n type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Input as TelegraphInput } from \"@telegraph/input\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Menu as TelegraphMenu } from \"@telegraph/menu\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Text } from \"@telegraph/typography\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { TRIGGER_MIN_HEIGHT } from \"./Combobox.constants\";\nimport { type Option, isMultiSelect, isSingleSelect } from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype RootProps = (\n | {\n value?: Array<Option>;\n onValueChange?: (value: Array<Option>) => void;\n layout?: \"truncate\" | \"wrap\";\n }\n | {\n value?: Option;\n onValueChange?: (value: Option) => void;\n layout?: never;\n }\n) & {\n open?: boolean;\n defaultOpen?: boolean;\n errored?: boolean;\n placeholder?: string;\n onOpenChange?: (open: boolean) => void;\n modal?: boolean;\n closeOnSelect?: boolean;\n children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n Omit<RootProps, \"children\"> & {\n contentId: string;\n triggerId: string;\n open: boolean;\n setOpen: (open: boolean) => void;\n onOpenToggle: () => void;\n searchQuery?: string;\n setSearchQuery?: (query: string) => void;\n triggerRef?: React.RefObject<HTMLDivElement>;\n searchRef?: React.RefObject<HTMLInputElement>;\n contentRef?: React.RefObject<HTMLDivElement>;\n }\n>({\n onValueChange: () => {},\n contentId: \"\",\n triggerId: \"\",\n open: false,\n setOpen: () => {},\n onOpenToggle: () => {},\n});\n\nconst Root = ({\n modal = true,\n closeOnSelect = true,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n defaultOpen: defaultOpenProp,\n value,\n onValueChange,\n errored,\n placeholder,\n layout,\n ...props\n}: RootProps) => {\n const contentId = React.useId();\n const triggerId = React.useId();\n const triggerRef = React.useRef(null);\n const searchRef = React.useRef(null);\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const [searchQuery, setSearchQuery] = React.useState<string>(\"\");\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpenProp,\n onChange: onOpenChangeProp,\n });\n\n const onOpenToggle = React.useCallback(() => {\n setOpen((prevOpen) => !prevOpen);\n }, [setOpen]);\n\n React.useEffect(() => {\n // If the combobox is closed clear\n // the search query\n if (!open) {\n setSearchQuery(\"\");\n }\n }, [open]);\n\n return (\n <ComboboxContext.Provider\n value={{\n contentId,\n triggerId,\n value,\n onValueChange,\n placeholder,\n open,\n setOpen,\n onOpenToggle,\n closeOnSelect,\n searchQuery,\n setSearchQuery,\n triggerRef,\n searchRef,\n contentRef,\n errored,\n layout,\n }}\n >\n <TelegraphMenu.Root\n open={open}\n onOpenChange={setOpen}\n modal={modal}\n {...props}\n />\n </ComboboxContext.Provider>\n );\n};\n\ntype TriggerTagProps = {\n value: string;\n label?: string;\n};\n\nconst TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {\n const context = React.useContext(ComboboxContext);\n\n return (\n <Tag.Root\n size=\"1\"\n as={motion.span}\n initial={{ opacity: 0, transform: \"scale(0.8)\" }}\n animate={{ opacity: 1, transform: \"scale(1)\" }}\n exit={{ opacity: 0, transform: \"scale(0.5)\" }}\n layout=\"position\"\n transition={{\n duration: 0.2,\n type: \"spring\",\n bounce: 0,\n layout: {\n duration: 0.05,\n type: \"spring\",\n bounce: 0,\n },\n }}\n {...props}\n >\n <Tag.Text>{label || value}</Tag.Text>\n <Tag.Button\n icon={{ icon: Lucide.X, alt: `Remove ${value}` }}\n onClick={(event: React.MouseEvent) => {\n const onValueChange = context.onValueChange as (\n v: Array<Option>,\n ) => void;\n const contextValue = context.value as Array<Option>;\n const newValue = contextValue.filter((v) => v.value !== value);\n onValueChange(newValue);\n // Stop click event from bubbling up\n event.stopPropagation();\n // Stop the button \"submit\" action from triggering\n event.preventDefault();\n }}\n />\n </Tag.Root>\n );\n};\n\nconst TriggerValue = () => {\n const context = React.useContext(ComboboxContext);\n\n if (context.value && isMultiSelect(context.value)) {\n const contextValue = context.value as Array<Option>;\n const layout = context.layout || \"truncate\";\n const truncatedLength = contextValue.length - 2;\n const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n if (contextValue.length === 0) {\n return (\n <TelegraphButton.Text color=\"gray\">\n {context.placeholder}\n </TelegraphButton.Text>\n );\n }\n\n return (\n <Stack\n gap=\"1\"\n w=\"full\"\n wrap={layout === \"wrap\" ? \"wrap\" : \"nowrap\"}\n align=\"center\"\n style={{\n position: \"relative\",\n flexGrow: 1,\n }}\n >\n <AnimatePresence initial={false} mode=\"popLayout\">\n {contextValue.map((v, i) => {\n if ((layout === \"truncate\" && i <= 1) || layout === \"wrap\") {\n return (\n <RefToTgphRef key={v.value}>\n <TriggerTag {...v} />\n </RefToTgphRef>\n );\n }\n })}\n </AnimatePresence>\n <AnimatePresence>\n {layout === \"truncate\" && contextValue.length > 2 && (\n <Stack\n as={motion.div}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n h=\"full\"\n pr=\"1\"\n pl=\"8\"\n align=\"center\"\n aria-label={`${truncatedLength} more selected`}\n style={{\n position: \"absolute\",\n right: 0,\n backgroundImage:\n \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n }}\n key=\"truncated text\"\n >\n <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n +\n <AnimatePresence mode=\"wait\" initial={false}>\n {truncatedLengthStringArray.map((n) => (\n <Box\n as={motion.span}\n w=\"2\"\n display=\"inline-block\"\n initial={{\n opacity: 0.5,\n }}\n animate={{\n opacity: 1,\n }}\n exit={{\n opacity: 0.5,\n }}\n transition={{ duration: 0.1, type: \"spring\", bounce: 0 }}\n key={n}\n >\n {n}\n </Box>\n ))}\n </AnimatePresence>{\" \"}\n more\n </Text>\n </Stack>\n )}\n </AnimatePresence>\n </Stack>\n );\n }\n\n return (\n <TelegraphButton.Text color={!context.value ? \"gray\" : \"default\"}>\n {context?.value?.label || context?.value?.value || context.placeholder}\n </TelegraphButton.Text>\n );\n};\n\ntype TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {\n placeholder?: string;\n size?: TgphComponentProps<typeof TelegraphButton.Root>[\"size\"];\n};\n\nconst Trigger = ({ size = \"2\", ...props }: TriggerProps) => {\n const context = React.useContext(ComboboxContext);\n\n const getAriaLabelString = React.useCallback(() => {\n if (!context.value) return context.placeholder;\n if (isSingleSelect(context.value)) {\n return (\n context.value?.label || context.value?.value || context.placeholder\n );\n } else {\n return (\n context.value?.map((v) => v.label).join(\", \") || context.placeholder\n );\n }\n }, [context.value, context.placeholder]);\n\n return (\n <TelegraphMenu.Trigger\n {...props}\n asChild\n onClick={(event: React.MouseEvent) => {\n event.preventDefault();\n context.onOpenToggle();\n context.triggerRef?.current?.focus();\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n // Lets the user tab in and out of the combobox as usual\n if (event.key === \"Tab\") {\n event.stopPropagation();\n return;\n }\n if (SELECT_KEYS.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n if (event.key === \"ArrowDown\") {\n context.onOpenToggle();\n return;\n }\n }}\n tgphRef={context.triggerRef}\n >\n <TelegraphButton.Root\n id={context.triggerId}\n bg=\"surface-1\"\n variant=\"outline\"\n align=\"center\"\n minH={TRIGGER_MIN_HEIGHT[size]}\n h=\"full\"\n w=\"full\"\n py=\"1\"\n size={size}\n color={context.errored ? \"red\" : \"gray\"}\n justify=\"space-between\"\n // Accessibility attributes\n role=\"combobox\"\n aria-label={getAriaLabelString()}\n aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-haspopup=\"listbox\"\n // Custom attributes\n data-tgph-combobox-trigger\n data-tgph-comobox-trigger-open={context.open}\n >\n <TriggerValue />\n <TelegraphButton.Icon\n as={motion.div}\n icon={Lucide.ChevronDown}\n animate={{ rotate: context.open ? \"180deg\" : \"0deg\" }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n aria-hidden\n />\n </TelegraphButton.Root>\n </TelegraphMenu.Trigger>\n );\n};\n\ntype ContentProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphMenu.Content<T>\n>;\n\nconst Content = <T extends TgphElement>({\n tgphRef,\n style,\n children,\n ...props\n}: ContentProps<T>) => {\n const context = React.useContext(ComboboxContext);\n const hasInteractedOutside = React.useRef(false);\n const composedRef = useComposedRefs<unknown>(tgphRef, context.contentRef);\n\n const internalContentRef = React.useRef(null);\n\n const [height, setHeight] = React.useState(0);\n const [initialAnimationComplete, setInitialAnimationComplete] =\n React.useState(false);\n\n const setHeightFromContent = React.useCallback(\n (element: Element) => {\n // Set the initial height of the content after the animation completes\n const rect = element.getBoundingClientRect();\n if (rect) {\n setHeight(rect.height);\n }\n\n if (!initialAnimationComplete) {\n setInitialAnimationComplete(true);\n }\n },\n [initialAnimationComplete],\n );\n\n React.useEffect(() => {\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const element = entry.target;\n setHeightFromContent(element);\n }\n });\n // Attatch the observer once the initial animation completes\n // and the content ref is available\n if (internalContentRef.current && initialAnimationComplete) {\n observer.observe(internalContentRef.current);\n }\n\n return () => observer.disconnect();\n }, [initialAnimationComplete, setHeightFromContent]);\n\n // Reset the animation complete state when the combobox is closed\n React.useEffect(() => {\n if (initialAnimationComplete === true && context.open === false) {\n setInitialAnimationComplete(false);\n }\n }, [context.open, initialAnimationComplete]);\n\n return (\n <TelegraphMenu.Content\n as={motion.div}\n mt=\"1\"\n initial={{\n opacity: 0,\n scale: 0.8,\n height: \"auto\",\n }}\n animate={{\n opacity: 1,\n scale: 1,\n // Set height based on the internalContentRef so that\n // we get smooth animations when the content changes\n minHeight: height ? `${height}px` : \"0\",\n }}\n exit={{ opacity: 0, scale: 0 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n onAnimationComplete={() => {\n // Set height when the initial animation for\n // displaying the content completes\n if (!initialAnimationComplete && internalContentRef) {\n const element = internalContentRef.current as unknown as Element;\n setHeightFromContent(element);\n }\n }}\n onCloseAutoFocus={(event: Event) => {\n if (!hasInteractedOutside.current) context.triggerRef?.current?.focus();\n hasInteractedOutside.current = false;\n\n event.preventDefault();\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n // If the first option is focused and the user presses the up\n // arrow key, focus the search input\n const options = context.contentRef?.current?.querySelectorAll(\n \"[data-tgph-combobox-option]\",\n );\n\n if (\n document.activeElement === options?.[0] &&\n LAST_KEYS.includes(event.key)\n ) {\n context.searchRef?.current?.focus();\n }\n\n // Close the combobox if the user presses the escape key\n if (event.key === \"Escape\") {\n context.setOpen(false);\n }\n\n event.stopPropagation();\n }}\n bg=\"surface-1\"\n style={{\n width: \"var(--tgph-comobobox-trigger-width)\",\n ...style,\n ...{\n \"--tgph-comobobox-content-transform-origin\":\n \"var(--radix-popper-transform-origin)\",\n \"--tgph-combobox-content-available-width\":\n \"var(--radix-popper-available-width)\",\n \"--tgph-combobox-content-available-height\":\n \"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))\",\n \"--tgph-comobobox-trigger-width\": \"var(--radix-popper-anchor-width)\",\n \"--tgph-combobox-trigger-height\": \"var(--radix-popper-anchor-height)\",\n },\n }}\n {...props}\n tgphRef={composedRef}\n data-tgph-combobox-content\n data-tgph-combobox-content-open={initialAnimationComplete}\n // Cancel out accessibility attirbutes related to aria menu\n role={undefined}\n aria-orientation={undefined}\n >\n <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n {children}\n </Stack>\n </TelegraphMenu.Content>\n );\n};\n\ntype OptionsProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>>;\n\nconst Options = <T extends TgphElement>({ ...props }: OptionsProps<T>) => {\n const context = React.useContext(ComboboxContext);\n return (\n <Stack\n id={context.contentId}\n direction=\"column\"\n gap=\"1\"\n style={{\n overflowY: \"auto\",\n // Available Height - Padding from edge of screen\n maxHeight:\n \"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))\",\n }}\n // Accessibility attributes\n role=\"listbox\"\n {...props}\n />\n );\n};\n\ntype OptionProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphMenu.Button<T>\n> & {\n value: string;\n label?: string;\n selected?: boolean | null;\n};\n\nconst Option = <T extends TgphElement>({\n value,\n label,\n selected,\n onSelect,\n ...props\n}: OptionProps<T>) => {\n const context = React.useContext(ComboboxContext);\n const [isFocused, setIsFocused] = React.useState(false);\n const contextValue = context.value ?? [];\n\n const isVisible = isMultiSelect(contextValue)\n ? !context.searchQuery ||\n value.toLowerCase().includes(context.searchQuery.toLowerCase())\n : !context.searchQuery ||\n value.toLowerCase().includes(context.searchQuery.toLowerCase());\n\n const isSelected = isMultiSelect(contextValue)\n ? contextValue.some((v) => v.value === value)\n : contextValue.value === value;\n\n const handleSelection = (event: Event | React.KeyboardEvent) => {\n // Don't do anything if the key isn't a selection key\n const keyboardEvent = event as React.KeyboardEvent;\n if (keyboardEvent.key && !SELECT_KEYS.includes(keyboardEvent.key)) return;\n\n // Don't bubble up the event\n event.stopPropagation();\n event.preventDefault();\n\n if (context.closeOnSelect === true) {\n context.setOpen(false);\n }\n\n if (onSelect) {\n // Need to convert to non keyboard type event\n // since onSelect is expecting a mouse event\n // and we've handled the keyboard event already\n const onSelectEvent = event as unknown as Event;\n return onSelect(onSelectEvent);\n }\n\n if (isMultiSelect(contextValue)) {\n const onValueChange = context.onValueChange as (v: Array<Option>) => void;\n\n const newValue = isSelected\n ? contextValue.filter((v) => v.value !== value)\n : [...contextValue, { value, label }];\n\n onValueChange(newValue);\n } else if (isSingleSelect(contextValue)) {\n const onValueChange = context.onValueChange as (v: Option) => void;\n onValueChange({ value, label });\n }\n\n context.triggerRef?.current?.focus();\n };\n\n if (isVisible) {\n return (\n <TelegraphMenu.Button\n type=\"button\"\n onSelect={handleSelection}\n onKeyDown={handleSelection}\n // Force null if selected equals null so we\n // can override the icon of the button\n selected={selected === null ? null : selected ?? isSelected}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n // Accessibility attributes\n role=\"option\"\n aria-selected={isSelected ? \"true\" : \"false\"}\n // Custom attributes\n data-tgph-combobox-option\n data-tgph-combobox-option-focused={isFocused}\n data-tgph-combobox-option-value={value}\n data-tgph-combobox-option-label={label}\n {...props}\n >\n {label || value}\n </TelegraphMenu.Button>\n );\n }\n};\n\ntype SearchProps = TgphComponentProps<typeof TelegraphInput> & {\n label?: string;\n};\n\nconst Search = ({\n label = \"Search\",\n placeholder = \"Search\",\n tgphRef,\n ...props\n}: SearchProps) => {\n const id = React.useId();\n const context = React.useContext(ComboboxContext);\n const composedRef = useComposedRefs(tgphRef, context.searchRef);\n\n React.useEffect(() => {\n const handleSearchKeyDown = (event: KeyboardEvent) => {\n if (FIRST_KEYS.includes(event.key)) {\n context.contentRef?.current?.focus({ preventScroll: true });\n }\n\n if (event.key === \"Escape\") {\n context.setOpen(false);\n }\n\n event.stopPropagation();\n };\n\n const searchInput = context.searchRef?.current;\n\n if (searchInput) {\n searchInput.addEventListener(\"keydown\", handleSearchKeyDown);\n return () => {\n searchInput.removeEventListener(\"keydown\", handleSearchKeyDown);\n };\n }\n }, [context]);\n\n return (\n <Box borderBottom=\"px\" px=\"1\" pb=\"1\">\n <VisuallyHidden.Root>\n <Text as=\"label\" htmlFor={id}>\n {label}\n </Text>\n </VisuallyHidden.Root>\n <TelegraphInput\n id={id}\n variant=\"ghost\"\n placeholder={placeholder}\n value={context.searchQuery}\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n context?.setSearchQuery?.(event.target.value);\n }}\n LeadingComponent={<Icon icon={Lucide.Search} alt=\"Search Icon\" />}\n TrailingComponent={\n context?.searchQuery && context?.searchQuery?.length > 0 ? (\n <TelegraphButton\n as={motion.button}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n variant=\"ghost\"\n color=\"gray\"\n icon={{ icon: Lucide.X, alt: \"Clear Search Query\" }}\n onClick={() => context.setSearchQuery?.(\"\")}\n />\n ) : null\n }\n autoFocus\n data-tgph-combobox-search\n aria-controls={context.contentId}\n {...props}\n tgphRef={composedRef}\n />\n </Box>\n );\n};\n\ntype EmptyProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>> & {\n icon?: TgphComponentProps<typeof Icon> | null;\n message?: string | null;\n};\n\nconst Empty = <T extends TgphElement>({\n icon = { icon: Lucide.Search, alt: \"Search Icon\" },\n message = \"No results found\",\n children,\n ...props\n}: EmptyProps<T>) => {\n const context = React.useContext(ComboboxContext);\n const [isVisible, setIsVisible] = React.useState(false);\n\n React.useEffect(() => {\n const options = context.contentRef?.current?.querySelectorAll(\n \"[data-tgph-combobox-option]\",\n );\n\n if (options?.length === 0) {\n setIsVisible(true);\n } else {\n setIsVisible(false);\n }\n }, [context.searchQuery, context.contentRef, children]);\n\n if (isVisible) {\n return (\n <Stack\n as={motion.div}\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n gap=\"1\"\n align=\"center\"\n justify=\"center\"\n w=\"full\"\n my=\"8\"\n data-tgph-combobox-empty\n {...props}\n >\n {icon === null ? <></> : <Icon {...icon} />}\n {message === null ? <></> : <Text as=\"span\">{message}</Text>}\n </Stack>\n );\n }\n};\n\ntype CreateProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphMenu.Button<T>\n> & {\n leadingText?: string;\n values?: Array<Option>;\n onCreate?: (value: Option) => void;\n};\n\nconst Create = <T extends TgphElement>({\n leadingText = \"Create\",\n values,\n onCreate,\n selected = null,\n ...props\n}: CreateProps<T>) => {\n const context = React.useContext(ComboboxContext);\n\n const variableAlreadyExists = React.useCallback(\n (searchQuery: string | undefined) => {\n if (!values || values?.length === 0) return false;\n return values.some((v) => v.value === searchQuery);\n },\n [values],\n );\n\n if (context.searchQuery && !variableAlreadyExists(context.searchQuery)) {\n return (\n <Option\n leadingIcon={{ icon: Lucide.Plus, \"aria-hidden\": true }}\n mx=\"1\"\n value={context.searchQuery}\n label={`${leadingText} \"${context.searchQuery}\"`}\n selected={selected}\n onSelect={() => {\n if (onCreate && context.value && context.searchQuery) {\n if (isSingleSelect(context.value)) {\n onCreate({ value: context.searchQuery });\n }\n\n if (isMultiSelect(context.value)) {\n onCreate({ value: context.searchQuery });\n }\n\n context.setSearchQuery?.(\"\");\n }\n }}\n {...props}\n />\n );\n }\n};\n\nconst Combobox = {} as {\n Root: typeof Root;\n Trigger: typeof Trigger;\n Content: typeof Content;\n Options: typeof Options;\n Option: typeof Option;\n Search: typeof Search;\n Empty: typeof Empty;\n Create: typeof Create;\n};\n\nObject.assign(Combobox, {\n Root,\n Trigger,\n Content,\n Options,\n Option,\n Search,\n Empty,\n Create,\n});\n\nexport { Combobox };\n"],"names":["TRIGGER_MIN_HEIGHT","isMultiSelect","value","isSingleSelect","FIRST_KEYS","LAST_KEYS","SELECT_KEYS","ComboboxContext","React","Root","modal","closeOnSelect","openProp","onOpenChangeProp","defaultOpenProp","onValueChange","errored","placeholder","layout","props","contentId","triggerId","triggerRef","searchRef","contentRef","searchQuery","setSearchQuery","open","setOpen","useControllableState","onOpenToggle","prevOpen","jsx","TelegraphMenu","TriggerTag","label","context","jsxs","Tag","motion","Lucide","event","newValue","v","TriggerValue","contextValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","AnimatePresence","i","RefToTgphRef","Text","n","Box","_b","Trigger","size","getAriaLabelString","_a","_c","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","height","setHeight","initialAnimationComplete","setInitialAnimationComplete","setHeightFromContent","element","rect","observer","entries","entry","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","isVisible","isSelected","handleSelection","keyboardEvent","Search","id","handleSearchKeyDown","searchInput","VisuallyHidden","TelegraphInput","Icon","Empty","icon","message","setIsVisible","Fragment","Create","leadingText","values","onCreate","variableAlreadyExists","Combobox"],"mappings":";;;;;;;;;;;;;;AAAO,MAAMA,IAAqB;AAAA,EAChC,GAAK;AAAA,EACL,GAAK;AAAA,EACL,GAAK;AAAA,EACL,GAAK;AACP,GCJaC,IAAgB,CAC3BC,MAEO,MAAM,QAAQA,CAAK,GAGfC,IAAiB,CAC5BD,MAEO,OAAOA,KAAU,YAAY,CAAC,MAAM,QAAQA,CAAK,GCWpDE,IAAa,CAAC,aAAa,UAAU,MAAM,GAC3CC,IAAY,CAAC,WAAW,YAAY,KAAK,GACzCC,IAAc,CAAC,SAAS,GAAG,GAwB3BC,IAAkBC,EAAM,cAa5B;AAAA,EACA,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,cAAc,MAAM;AAAA,EAAC;AACvB,CAAC,GAEKC,IAAO,CAAC;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,eAAAC,IAAgB;AAAA,EAChB,MAAMC;AAAA,EACN,cAAcC;AAAA,EACd,aAAaC;AAAA,EACb,OAAAZ;AAAA,EACA,eAAAa;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,MAAiB;AACT,QAAAC,IAAYZ,EAAM,SAClBa,IAAYb,EAAM,SAClBc,IAAad,EAAM,OAAO,IAAI,GAC9Be,IAAYf,EAAM,OAAO,IAAI,GAC7BgB,IAAahB,EAAM,OAAuB,IAAI,GAE9C,CAACiB,GAAaC,CAAc,IAAIlB,EAAM,SAAiB,EAAE,GACzD,CAACmB,IAAO,IAAOC,CAAO,IAAIC,EAAqB;AAAA,IACnD,MAAMjB;AAAA,IACN,aAAaE;AAAA,IACb,UAAUD;AAAA,EAAA,CACX,GAEKiB,IAAetB,EAAM,YAAY,MAAM;AACnC,IAAAoB,EAAA,CAACG,MAAa,CAACA,CAAQ;AAAA,EAAA,GAC9B,CAACH,CAAO,CAAC;AAEZ,SAAApB,EAAM,UAAU,MAAM;AAGpB,IAAKmB,KACHD,EAAe,EAAE;AAAA,EACnB,GACC,CAACC,CAAI,CAAC,GAGP,gBAAAK;AAAA,IAACzB,EAAgB;AAAA,IAAhB;AAAA,MACC,OAAO;AAAA,QACL,WAAAa;AAAA,QACA,WAAAC;AAAA,QACA,OAAAnB;AAAA,QACA,eAAAa;AAAA,QACA,aAAAE;AAAA,QACA,MAAAU;AAAA,QACA,SAAAC;AAAA,QACA,cAAAE;AAAA,QACA,eAAAnB;AAAA,QACA,aAAAc;AAAA,QACA,gBAAAC;AAAA,QACA,YAAAJ;AAAA,QACA,WAAAC;AAAA,QACA,YAAAC;AAAA,QACA,SAAAR;AAAA,QACA,QAAAE;AAAA,MACF;AAAA,MAEA,UAAA,gBAAAc;AAAA,QAACC,EAAc;AAAA,QAAd;AAAA,UACC,MAAAN;AAAA,UACA,cAAcC;AAAA,UACd,OAAAlB;AAAA,UACC,GAAGS;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAAA;AAGN,GAOMe,IAAa,CAAC,EAAE,OAAAC,GAAO,OAAAjC,GAAO,GAAGiB,QAA6B;AAC5D,QAAAiB,IAAU5B,EAAM,WAAWD,CAAe;AAG9C,SAAA,gBAAA8B;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,MAAK;AAAA,MACL,IAAIC,EAAO;AAAA,MACX,SAAS,EAAE,SAAS,GAAG,WAAW,aAAa;AAAA,MAC/C,SAAS,EAAE,SAAS,GAAG,WAAW,WAAW;AAAA,MAC7C,MAAM,EAAE,SAAS,GAAG,WAAW,aAAa;AAAA,MAC5C,QAAO;AAAA,MACP,YAAY;AAAA,QACV,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,UACN,UAAU;AAAA,UACV,MAAM;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAGpB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAa,EAACM,EAAI,MAAJ,EAAU,UAAAH,KAASjC,GAAM;AAAA,QAC1B,gBAAA8B;AAAA,UAACM,EAAI;AAAA,UAAJ;AAAA,YACC,MAAM,EAAE,MAAME,EAAO,GAAG,KAAK,UAAUtC,CAAK,GAAG;AAAA,YAC/C,SAAS,CAACuC,MAA4B;AACpC,oBAAM1B,IAAgBqB,EAAQ,eAIxBM,IADeN,EAAQ,MACC,OAAO,CAACO,MAAMA,EAAE,UAAUzC,CAAK;AAC7D,cAAAa,EAAc2B,CAAQ,GAEtBD,EAAM,gBAAgB,GAEtBA,EAAM,eAAe;AAAA,YACvB;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMG,IAAe,MAAM;;AACnB,QAAAR,IAAU5B,EAAM,WAAWD,CAAe;AAEhD,MAAI6B,EAAQ,SAASnC,EAAcmC,EAAQ,KAAK,GAAG;AACjD,UAAMS,IAAeT,EAAQ,OACvBlB,IAASkB,EAAQ,UAAU,YAC3BU,IAAkBD,EAAa,SAAS,GACxCE,IAA6BD,EAAgB,SAAS,EAAE,MAAM,EAAE;AAElE,WAAAD,EAAa,WAAW,sBAEvBG,EAAgB,MAAhB,EAAqB,OAAM,QACzB,YAAQ,YACX,CAAA,IAKF,gBAAAX;AAAA,MAACY;AAAA,MAAA;AAAA,QACC,KAAI;AAAA,QACJ,GAAE;AAAA,QACF,MAAM/B,MAAW,SAAS,SAAS;AAAA,QACnC,OAAM;AAAA,QACN,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,QACZ;AAAA,QAEA,UAAA;AAAA,UAAC,gBAAAc,EAAAkB,GAAA,EAAgB,SAAS,IAAO,MAAK,aACnC,UAAaL,EAAA,IAAI,CAACF,GAAGQ,MAAM;AAC1B,gBAAKjC,MAAW,cAAciC,KAAK,KAAMjC,MAAW;AAEhD,qBAAA,gBAAAc,EAACoB,KACC,UAAC,gBAAApB,EAAAE,GAAA,EAAY,GAAGS,EAAG,CAAA,EAAA,GADFA,EAAE,KAErB;AAAA,UAGL,CAAA,GACH;AAAA,4BACCO,GACE,EAAA,UAAAhC,MAAW,cAAc2B,EAAa,SAAS,KAC9C,gBAAAb;AAAA,YAACiB;AAAA,YAAA;AAAA,cACC,IAAIV,EAAO;AAAA,cACX,SAAS,EAAE,SAAS,EAAE;AAAA,cACtB,SAAS,EAAE,SAAS,EAAE;AAAA,cACtB,MAAM,EAAE,SAAS,EAAE;AAAA,cACnB,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,cACvD,GAAE;AAAA,cACF,IAAG;AAAA,cACH,IAAG;AAAA,cACH,OAAM;AAAA,cACN,cAAY,GAAGO,CAAe;AAAA,cAC9B,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,iBACE;AAAA,cACJ;AAAA,cAGA,UAAA,gBAAAT,EAACgB,GAAK,EAAA,IAAG,QAAO,MAAK,KAAI,OAAO,EAAE,YAAY,SAAA,GAAY,UAAA;AAAA,gBAAA;AAAA,gBAExD,gBAAArB,EAACkB,KAAgB,MAAK,QAAO,SAAS,IACnC,UAAAH,EAA2B,IAAI,CAACO,MAC/B,gBAAAtB;AAAA,kBAACuB;AAAA,kBAAA;AAAA,oBACC,IAAIhB,EAAO;AAAA,oBACX,GAAE;AAAA,oBACF,SAAQ;AAAA,oBACR,SAAS;AAAA,sBACP,SAAS;AAAA,oBACX;AAAA,oBACA,SAAS;AAAA,sBACP,SAAS;AAAA,oBACX;AAAA,oBACA,MAAM;AAAA,sBACJ,SAAS;AAAA,oBACX;AAAA,oBACA,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,oBAGtD,UAAAe;AAAA,kBAAA;AAAA,kBAFIA;AAAA,gBAIR,CAAA,GACH;AAAA,gBAAmB;AAAA,gBAAI;AAAA,cAAA,GAEzB;AAAA,YAAA;AAAA,YA3BI;AAAA,UAAA,GA8BV;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,2BACGN,EAAgB,MAAhB,EAAqB,OAAQZ,EAAQ,QAAiB,YAAT,QAC3C,uCAAS,4BAAO,YAASoB,IAAApB,KAAA,gBAAAA,EAAS,UAAT,gBAAAoB,EAAgB,UAASpB,EAAQ,YAC7D,CAAA;AAEJ,GAOMqB,IAAU,CAAC,EAAE,MAAAC,IAAO,KAAK,GAAGvC,QAA0B;AACpD,QAAAiB,IAAU5B,EAAM,WAAWD,CAAe,GAE1CoD,IAAqBnD,EAAM,YAAY,MAAM;;AACjD,WAAK4B,EAAQ,QACTjC,EAAeiC,EAAQ,KAAK,MAE5BwB,IAAAxB,EAAQ,UAAR,gBAAAwB,EAAe,YAASJ,IAAApB,EAAQ,UAAR,gBAAAoB,EAAe,UAASpB,EAAQ,gBAIxDyB,IAAAzB,EAAQ,UAAR,gBAAAyB,EAAe,IAAI,CAAClB,MAAMA,EAAE,OAAO,KAAK,UAASP,EAAQ,cAPlCA,EAAQ;AAAA,KAUlC,CAACA,EAAQ,OAAOA,EAAQ,WAAW,CAAC;AAGrC,SAAA,gBAAAJ;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACE,GAAGd;AAAA,MACJ,SAAO;AAAA,MACP,SAAS,CAACsB,MAA4B;;AACpC,QAAAA,EAAM,eAAe,GACrBL,EAAQ,aAAa,IACboB,KAAAI,IAAAxB,EAAA,eAAA,gBAAAwB,EAAY,YAAZ,QAAAJ,EAAqB;AAAA,MAC/B;AAAA,MACA,WAAW,CAACf,MAA+B;AAErC,YAAAA,EAAM,QAAQ,OAAO;AACvB,UAAAA,EAAM,gBAAgB;AACtB;AAAA,QACF;AACA,YAAInC,EAAY,SAASmC,EAAM,GAAG,GAAG;AACnC,UAAAA,EAAM,eAAe;AACrB;AAAA,QACF;AAEI,YAAAA,EAAM,QAAQ,aAAa;AAC7B,UAAAL,EAAQ,aAAa;AACrB;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAASA,EAAQ;AAAA,MAEjB,UAAA,gBAAAC;AAAA,QAACW,EAAgB;AAAA,QAAhB;AAAA,UACC,IAAIZ,EAAQ;AAAA,UACZ,IAAG;AAAA,UACH,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAMpC,EAAmB0D,CAAI;AAAA,UAC7B,GAAE;AAAA,UACF,GAAE;AAAA,UACF,IAAG;AAAA,UACH,MAAAA;AAAA,UACA,OAAOtB,EAAQ,UAAU,QAAQ;AAAA,UACjC,SAAQ;AAAA,UAER,MAAK;AAAA,UACL,cAAYuB,EAAmB;AAAA,UAC/B,iBAAevB,EAAQ;AAAA,UACvB,iBAAeA,EAAQ;AAAA,UACvB,iBAAc;AAAA,UAEd,8BAA0B;AAAA,UAC1B,kCAAgCA,EAAQ;AAAA,UAExC,UAAA;AAAA,YAAA,gBAAAJ,EAACY,GAAa,EAAA;AAAA,YACd,gBAAAZ;AAAA,cAACgB,EAAgB;AAAA,cAAhB;AAAA,gBACC,IAAIT,EAAO;AAAA,gBACX,MAAMC,EAAO;AAAA,gBACb,SAAS,EAAE,QAAQJ,EAAQ,OAAO,WAAW,OAAO;AAAA,gBACpD,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,gBACvD,eAAW;AAAA,cAAA;AAAA,YACb;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,GAMM0B,IAAU,CAAwB;AAAA,EACtC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAG9C;AACL,MAAuB;AACf,QAAAiB,IAAU5B,EAAM,WAAWD,CAAe,GAC1C2D,IAAuB1D,EAAM,OAAO,EAAK,GACzC2D,IAAcC,EAAyBL,GAAS3B,EAAQ,UAAU,GAElEiC,IAAqB7D,EAAM,OAAO,IAAI,GAEtC,CAAC8D,GAAQC,CAAS,IAAI/D,EAAM,SAAS,CAAC,GACtC,CAACgE,GAA0BC,CAA2B,IAC1DjE,EAAM,SAAS,EAAK,GAEhBkE,IAAuBlE,EAAM;AAAA,IACjC,CAACmE,MAAqB;AAEd,YAAAC,IAAOD,EAAQ;AACrB,MAAIC,KACFL,EAAUK,EAAK,MAAM,GAGlBJ,KACHC,EAA4B,EAAI;AAAA,IAEpC;AAAA,IACA,CAACD,CAAwB;AAAA,EAAA;AAG3B,SAAAhE,EAAM,UAAU,MAAM;AACpB,UAAMqE,IAAW,IAAI,eAAe,CAACC,MAAY;AAC/C,iBAAWC,KAASD,GAAS;AAC3B,cAAMH,IAAUI,EAAM;AACtB,QAAAL,EAAqBC,CAAO;AAAA,MAC9B;AAAA,IAAA,CACD;AAGG,WAAAN,EAAmB,WAAWG,KACvBK,EAAA,QAAQR,EAAmB,OAAO,GAGtC,MAAMQ,EAAS;EAAW,GAChC,CAACL,GAA0BE,CAAoB,CAAC,GAGnDlE,EAAM,UAAU,MAAM;AACpB,IAAIgE,MAA6B,MAAQpC,EAAQ,SAAS,MACxDqC,EAA4B,EAAK;AAAA,EAElC,GAAA,CAACrC,EAAQ,MAAMoC,CAAwB,CAAC,GAGzC,gBAAAxC;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,IAAIM,EAAO;AAAA,MACX,IAAG;AAAA,MACH,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA;AAAA;AAAA,QAGP,WAAW+B,IAAS,GAAGA,CAAM,OAAO;AAAA,MACtC;AAAA,MACA,MAAM,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,MAC7B,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,MACvD,qBAAqB,MAAM;AAGrB,YAAA,CAACE,KAA4BH,GAAoB;AACnD,gBAAMM,IAAUN,EAAmB;AACnC,UAAAK,EAAqBC,CAAO;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,kBAAkB,CAAClC,MAAiB;;AAClC,QAAKyB,EAAqB,YAAiBV,KAAAI,IAAAxB,EAAA,eAAA,gBAAAwB,EAAY,YAAZ,QAAAJ,EAAqB,SAChEU,EAAqB,UAAU,IAE/BzB,EAAM,eAAe;AAAA,MACvB;AAAA,MACA,WAAW,CAACA,MAA+B;;AAGnC,cAAAuC,KAAUxB,KAAAI,IAAAxB,EAAQ,eAAR,gBAAAwB,EAAoB,YAApB,gBAAAJ,EAA6B;AAAA,UAC3C;AAAA;AAIA,QAAA,SAAS,mBAAkBwB,KAAA,gBAAAA,EAAU,OACrC3E,EAAU,SAASoC,EAAM,GAAG,OAEpBwC,KAAApB,IAAAzB,EAAA,cAAA,gBAAAyB,EAAW,YAAX,QAAAoB,EAAoB,UAI1BxC,EAAM,QAAQ,YAChBL,EAAQ,QAAQ,EAAK,GAGvBK,EAAM,gBAAgB;AAAA,MACxB;AAAA,MACA,IAAG;AAAA,MACH,OAAO;AAAA,QACL,OAAO;AAAA,QACP,GAAGuB;AAAA,QAED,6CACE;AAAA,QACF,2CACE;AAAA,QACF,4CACE;AAAA,QACF,kCAAkC;AAAA,QAClC,kCAAkC;AAAA,MAEtC;AAAA,MACC,GAAG7C;AAAA,MACJ,SAASgD;AAAA,MACT,8BAA0B;AAAA,MAC1B,mCAAiCK;AAAA,MAEjC,MAAM;AAAA,MACN,oBAAkB;AAAA,MAElB,UAAA,gBAAAxC,EAACiB,KAAM,WAAU,UAAS,KAAI,KAAI,SAASoB,GACxC,UAAAJ,EACH,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAIMiB,KAAU,CAAwB,EAAE,GAAG/D,QAA6B;AAClE,QAAAiB,IAAU5B,EAAM,WAAWD,CAAe;AAE9C,SAAA,gBAAAyB;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,IAAIb,EAAQ;AAAA,MACZ,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,OAAO;AAAA,QACL,WAAW;AAAA;AAAA,QAEX,WACE;AAAA,MACJ;AAAA,MAEA,MAAK;AAAA,MACJ,GAAGjB;AAAA,IAAA;AAAA,EAAA;AAGV,GAUMgE,IAAS,CAAwB;AAAA,EACrC,OAAAjF;AAAA,EACA,OAAAiC;AAAA,EACA,UAAAiD;AAAA,EACA,UAAAC;AAAA,EACA,GAAGlE;AACL,MAAsB;AACd,QAAAiB,IAAU5B,EAAM,WAAWD,CAAe,GAC1C,CAAC+E,GAAWC,CAAY,IAAI/E,EAAM,SAAS,EAAK,GAChDqC,IAAeT,EAAQ,SAAS,IAEhCoD,KAAYvF,EAAc4C,CAAY,GACxC,CAACT,EAAQ,eACTlC,EAAM,cAAc,SAASkC,EAAQ,YAAY,aAAa,IAI5DqD,IAAaxF,EAAc4C,CAAY,IACzCA,EAAa,KAAK,CAACF,MAAMA,EAAE,UAAUzC,CAAK,IAC1C2C,EAAa,UAAU3C,GAErBwF,IAAkB,CAACjD,MAAuC;;AAE9D,UAAMkD,IAAgBlD;AACtB,QAAI,EAAAkD,EAAc,OAAO,CAACrF,EAAY,SAASqF,EAAc,GAAG,IAUhE;AAAA,UAPAlD,EAAM,gBAAgB,GACtBA,EAAM,eAAe,GAEjBL,EAAQ,kBAAkB,MAC5BA,EAAQ,QAAQ,EAAK,GAGnBiD;AAKF,eAAOA,EADe5C,CACO;AAG3B,UAAAxC,EAAc4C,CAAY,GAAG;AAC/B,cAAM9B,IAAgBqB,EAAQ,eAExBM,IAAW+C,IACb5C,EAAa,OAAO,CAACF,MAAMA,EAAE,UAAUzC,CAAK,IAC5C,CAAC,GAAG2C,GAAc,EAAE,OAAA3C,GAAO,OAAAiC,GAAO;AAEtC,QAAApB,EAAc2B,CAAQ;AAAA,MAAA,WACbvC,EAAe0C,CAAY,GAAG;AACvC,cAAM9B,IAAgBqB,EAAQ;AAChB,QAAArB,EAAA,EAAE,OAAAb,GAAO,OAAAiC,EAAA,CAAO;AAAA,MAChC;AAEQ,OAAAqB,KAAAI,IAAAxB,EAAA,eAAA,gBAAAwB,EAAY,YAAZ,QAAAJ,EAAqB;AAAA;AAAA,EAAM;AAGrC,MAAIgC;AAEA,WAAA,gBAAAxD;AAAA,MAACC,EAAc;AAAA,MAAd;AAAA,QACC,MAAK;AAAA,QACL,UAAUyD;AAAA,QACV,WAAWA;AAAA,QAGX,UAAUN,MAAa,OAAO,OAAOA,KAAYK;AAAA,QACjD,SAAS,MAAMF,EAAa,EAAI;AAAA,QAChC,QAAQ,MAAMA,EAAa,EAAK;AAAA,QAEhC,MAAK;AAAA,QACL,iBAAeE,IAAa,SAAS;AAAA,QAErC,6BAAyB;AAAA,QACzB,qCAAmCH;AAAA,QACnC,mCAAiCpF;AAAA,QACjC,mCAAiCiC;AAAA,QAChC,GAAGhB;AAAA,QAEH,UAASgB,KAAAjC;AAAA,MAAA;AAAA,IAAA;AAIlB,GAMM0F,KAAS,CAAC;AAAA,EACd,OAAAzD,IAAQ;AAAA,EACR,aAAAlB,IAAc;AAAA,EACd,SAAA8C;AAAA,EACA,GAAG5C;AACL,MAAmB;;AACX,QAAA0E,IAAKrF,EAAM,SACX4B,IAAU5B,EAAM,WAAWD,CAAe,GAC1C4D,IAAcC,EAAgBL,GAAS3B,EAAQ,SAAS;AAE9D,SAAA5B,EAAM,UAAU,MAAM;;AACd,UAAAsF,IAAsB,CAACrD,MAAyB;;AACpD,MAAIrC,EAAW,SAASqC,EAAM,GAAG,OAC/Be,KAAAI,IAAAxB,EAAQ,eAAR,gBAAAwB,EAAoB,YAApB,QAAAJ,EAA6B,MAAM,EAAE,eAAe,QAGlDf,EAAM,QAAQ,YAChBL,EAAQ,QAAQ,EAAK,GAGvBK,EAAM,gBAAgB;AAAA,IAAA,GAGlBsD,KAAcnC,IAAAxB,EAAQ,cAAR,gBAAAwB,EAAmB;AAEvC,QAAImC;AACU,aAAAA,EAAA,iBAAiB,WAAWD,CAAmB,GACpD,MAAM;AACC,QAAAC,EAAA,oBAAoB,WAAWD,CAAmB;AAAA,MAAA;AAAA,EAElE,GACC,CAAC1D,CAAO,CAAC,qBAGTmB,GAAI,EAAA,cAAa,MAAK,IAAG,KAAI,IAAG,KAC/B,UAAA;AAAA,IAAC,gBAAAvB,EAAAgE,EAAe,MAAf,EACC,UAAC,gBAAAhE,EAAAqB,GAAA,EAAK,IAAG,SAAQ,SAASwC,GACvB,UAAA1D,EAAA,CACH,EACF,CAAA;AAAA,IACA,gBAAAH;AAAA,MAACiE;AAAAA,MAAA;AAAA,QACC,IAAAJ;AAAA,QACA,SAAQ;AAAA,QACR,aAAA5E;AAAA,QACA,OAAOmB,EAAQ;AAAA,QACf,UAAU,CAACK,MAA+C;;AAC/C,WAAAmB,IAAAxB,KAAA,gBAAAA,EAAA,mBAAA,QAAAwB,EAAA,KAAAxB,GAAiBK,EAAM,OAAO;AAAA,QACzC;AAAA,QACA,kBAAmB,gBAAAT,EAAAkE,GAAA,EAAK,MAAM1D,EAAO,QAAQ,KAAI,eAAc;AAAA,QAC/D,mBACEJ,KAAA,QAAAA,EAAS,iBAAewB,IAAAxB,KAAA,gBAAAA,EAAS,gBAAT,gBAAAwB,EAAsB,UAAS,IACrD,gBAAA5B;AAAA,UAACgB;AAAAA,UAAA;AAAA,YACC,IAAIT,EAAO;AAAA,YACX,SAAS,EAAE,SAAS,EAAE;AAAA,YACtB,SAAS,EAAE,SAAS,EAAE;AAAA,YACtB,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,YACvD,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAM,EAAE,MAAMC,EAAO,GAAG,KAAK,qBAAqB;AAAA,YAClD,SAAS,MAAM;;AAAA,sBAAAoB,IAAAxB,EAAQ,mBAAR,gBAAAwB,EAAA,KAAAxB,GAAyB;AAAA;AAAA,UAAE;AAAA,QAAA,IAE1C;AAAA,QAEN,WAAS;AAAA,QACT,6BAAyB;AAAA,QACzB,iBAAeA,EAAQ;AAAA,QACtB,GAAGjB;AAAA,QACJ,SAASgD;AAAA,MAAA;AAAA,IACX;AAAA,EACF,EAAA,CAAA;AAEJ,GAOMgC,KAAQ,CAAwB;AAAA,EACpC,MAAAC,IAAO,EAAE,MAAM5D,EAAO,QAAQ,KAAK,cAAc;AAAA,EACjD,SAAA6D,IAAU;AAAA,EACV,UAAApC;AAAA,EACA,GAAG9C;AACL,MAAqB;AACb,QAAAiB,IAAU5B,EAAM,WAAWD,CAAe,GAC1C,CAACiF,GAAWc,CAAY,IAAI9F,EAAM,SAAS,EAAK;AActD,MAZAA,EAAM,UAAU,MAAM;;AACd,UAAAwE,KAAUxB,KAAAI,IAAAxB,EAAQ,eAAR,gBAAAwB,EAAoB,YAApB,gBAAAJ,EAA6B;AAAA,MAC3C;AAAA;AAGE,KAAAwB,KAAA,gBAAAA,EAAS,YAAW,IACtBsB,EAAa,EAAI,IAEjBA,EAAa,EAAK;AAAA,EACpB,GACC,CAAClE,EAAQ,aAAaA,EAAQ,YAAY6B,CAAQ,CAAC,GAElDuB;AAEA,WAAA,gBAAAnD;AAAA,MAACY;AAAA,MAAA;AAAA,QACC,IAAIV,EAAO;AAAA,QACX,SAAS,EAAE,SAAS,GAAG,OAAO,IAAI;AAAA,QAClC,SAAS,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,QAChC,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,QACvD,KAAI;AAAA,QACJ,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,GAAE;AAAA,QACF,IAAG;AAAA,QACH,4BAAwB;AAAA,QACvB,GAAGpB;AAAA,QAEH,UAAA;AAAA,UAAAiF,MAAS,OAAS,gBAAApE,EAAAuE,GAAA,CAAA,CAAA,IAAO,gBAAAvE,EAAAkE,GAAA,EAAM,GAAGE,GAAM;AAAA,UACxCC,MAAY,OAAS,gBAAArE,EAAAuE,GAAA,CAAA,CAAA,sBAAOlD,GAAK,EAAA,IAAG,QAAQ,UAAQgD,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAI7D,GAUMG,KAAS,CAAwB;AAAA,EACrC,aAAAC,IAAc;AAAA,EACd,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAvB,IAAW;AAAA,EACX,GAAGjE;AACL,MAAsB;AACd,QAAAiB,IAAU5B,EAAM,WAAWD,CAAe,GAE1CqG,IAAwBpG,EAAM;AAAA,IAClC,CAACiB,MACK,CAACiF,MAAUA,KAAA,gBAAAA,EAAQ,YAAW,IAAU,KACrCA,EAAO,KAAK,CAAC/D,MAAMA,EAAE,UAAUlB,CAAW;AAAA,IAEnD,CAACiF,CAAM;AAAA,EAAA;AAGT,MAAItE,EAAQ,eAAe,CAACwE,EAAsBxE,EAAQ,WAAW;AAEjE,WAAA,gBAAAJ;AAAA,MAACmD;AAAA,MAAA;AAAA,QACC,aAAa,EAAE,MAAM3C,EAAO,MAAM,eAAe,GAAK;AAAA,QACtD,IAAG;AAAA,QACH,OAAOJ,EAAQ;AAAA,QACf,OAAO,GAAGqE,CAAW,KAAKrE,EAAQ,WAAW;AAAA,QAC7C,UAAAgD;AAAA,QACA,UAAU,MAAM;;AACd,UAAIuB,KAAYvE,EAAQ,SAASA,EAAQ,gBACnCjC,EAAeiC,EAAQ,KAAK,KAC9BuE,EAAS,EAAE,OAAOvE,EAAQ,YAAa,CAAA,GAGrCnC,EAAcmC,EAAQ,KAAK,KAC7BuE,EAAS,EAAE,OAAOvE,EAAQ,YAAa,CAAA,IAGzCwB,IAAAxB,EAAQ,mBAAR,QAAAwB,EAAA,KAAAxB,GAAyB;AAAA,QAE7B;AAAA,QACC,GAAGjB;AAAA,MAAA;AAAA,IAAA;AAIZ,GAEM0F,KAAW,CAAC;AAWlB,OAAO,OAAOA,IAAU;AAAA,EACtB,MAAApG;AAAA,EACA,SAAAgD;AAAA,EACA,SAAAK;AAAA,EACA,SAAAoB;AAAA,EACA,QAAAC;AAAA,EACA,QAAAS;AAAA,EACA,OAAAO;AAAA,EACA,QAAAK;AACF,CAAC;"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Combobox/Combobox.constants.ts","../../src/Combobox/Combobox.helpers.ts","../../src/Combobox/Combobox.tsx"],"sourcesContent":["export const TRIGGER_MIN_HEIGHT = {\n \"0\": \"5\",\n \"1\": \"6\",\n \"2\": \"8\",\n \"3\": \"10\",\n};\n","export type Option = { value: string; label?: string };\nexport const isMultiSelect = (\n value: Option | Array<Option>,\n): value is Array<Option> => {\n return Array.isArray(value);\n};\n\nexport const isSingleSelect = (\n value: Option | Array<Option>,\n): value is Option => {\n return typeof value === \"object\" && !Array.isArray(value);\n};\n","import { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as VisuallyHidden from \"@radix-ui/react-visually-hidden\";\nimport { Button as TelegraphButton } from \"@telegraph/button\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport {\n RefToTgphRef,\n type TgphComponentProps,\n type TgphElement,\n} from \"@telegraph/helpers\";\nimport { Icon, Lucide } from \"@telegraph/icon\";\nimport { Input as TelegraphInput } from \"@telegraph/input\";\nimport { Box, Stack } from \"@telegraph/layout\";\nimport { Menu as TelegraphMenu } from \"@telegraph/menu\";\nimport { Tag } from \"@telegraph/tag\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { TRIGGER_MIN_HEIGHT } from \"./Combobox.constants\";\nimport { type Option, isMultiSelect, isSingleSelect } from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype RootProps = (\n | {\n value?: Array<Option>;\n onValueChange?: (value: Array<Option> | undefined) => void;\n layout?: \"truncate\" | \"wrap\";\n }\n | {\n value?: Option;\n onValueChange?: (value: Option | undefined) => void;\n layout?: never;\n }\n) & {\n open?: boolean;\n defaultOpen?: boolean;\n errored?: boolean;\n placeholder?: string;\n onOpenChange?: (open: boolean) => void;\n modal?: boolean;\n closeOnSelect?: boolean;\n clearable?: boolean;\n children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n Omit<RootProps, \"children\"> & {\n contentId: string;\n triggerId: string;\n open: boolean;\n setOpen: (open: boolean) => void;\n onOpenToggle: () => void;\n searchQuery?: string;\n setSearchQuery?: (query: string) => void;\n triggerRef?: React.RefObject<HTMLDivElement>;\n searchRef?: React.RefObject<HTMLInputElement>;\n contentRef?: React.RefObject<HTMLDivElement>;\n }\n>({\n onValueChange: () => {},\n contentId: \"\",\n triggerId: \"\",\n open: false,\n setOpen: () => {},\n onOpenToggle: () => {},\n clearable: false,\n});\n\nconst Root = ({\n modal = true,\n closeOnSelect = true,\n clearable = false,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n defaultOpen: defaultOpenProp,\n value,\n onValueChange,\n errored,\n placeholder,\n layout,\n ...props\n}: RootProps) => {\n const contentId = React.useId();\n const triggerId = React.useId();\n const triggerRef = React.useRef(null);\n const searchRef = React.useRef(null);\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const [searchQuery, setSearchQuery] = React.useState<string>(\"\");\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpenProp,\n onChange: onOpenChangeProp,\n });\n\n const onOpenToggle = React.useCallback(() => {\n setOpen((prevOpen) => !prevOpen);\n }, [setOpen]);\n\n React.useEffect(() => {\n // If the combobox is closed clear\n // the search query\n if (!open) {\n setSearchQuery(\"\");\n }\n }, [open]);\n\n return (\n <ComboboxContext.Provider\n value={{\n contentId,\n triggerId,\n value,\n onValueChange,\n placeholder,\n open,\n setOpen,\n onOpenToggle,\n closeOnSelect,\n clearable,\n searchQuery,\n setSearchQuery,\n triggerRef,\n searchRef,\n contentRef,\n errored,\n layout,\n }}\n >\n <TelegraphMenu.Root\n open={open}\n onOpenChange={setOpen}\n modal={modal}\n {...props}\n />\n </ComboboxContext.Provider>\n );\n};\n\ntype TriggerTagProps = {\n value: string;\n label?: string;\n};\n\nconst TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {\n const context = React.useContext(ComboboxContext);\n\n return (\n <Tag.Root\n size=\"1\"\n as={motion.span}\n initial={{ opacity: 0, transform: \"scale(0.8)\" }}\n animate={{ opacity: 1, transform: \"scale(1)\" }}\n exit={{ opacity: 0, transform: \"scale(0.5)\" }}\n layout=\"position\"\n transition={{\n duration: 0.2,\n type: \"spring\",\n bounce: 0,\n layout: {\n duration: 0.05,\n type: \"spring\",\n bounce: 0,\n },\n }}\n {...props}\n >\n <Tag.Text>{label || value}</Tag.Text>\n <Tag.Button\n icon={{ icon: Lucide.X, alt: `Remove ${value}` }}\n onClick={(event: React.MouseEvent) => {\n const onValueChange = context.onValueChange as (\n v: Array<Option>,\n ) => void;\n const contextValue = context.value as Array<Option>;\n const newValue = contextValue.filter((v) => v.value !== value);\n onValueChange(newValue);\n // Stop click event from bubbling up\n event.stopPropagation();\n // Stop the button \"submit\" action from triggering\n event.preventDefault();\n }}\n />\n </Tag.Root>\n );\n};\n\nconst TriggerValue = () => {\n const context = React.useContext(ComboboxContext);\n\n if (context.value && isMultiSelect(context.value)) {\n const contextValue = context.value as Array<Option>;\n const layout = context.layout || \"truncate\";\n const truncatedLength = contextValue.length - 2;\n const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n if (contextValue.length === 0) {\n return (\n <TelegraphButton.Text color=\"gray\">\n {context.placeholder}\n </TelegraphButton.Text>\n );\n }\n\n return (\n <Stack\n gap=\"1\"\n w=\"full\"\n wrap={layout === \"wrap\" ? \"wrap\" : \"nowrap\"}\n align=\"center\"\n style={{\n position: \"relative\",\n flexGrow: 1,\n }}\n >\n <AnimatePresence initial={false} mode=\"popLayout\">\n {contextValue.map((v, i) => {\n if ((layout === \"truncate\" && i <= 1) || layout === \"wrap\") {\n return (\n <RefToTgphRef key={v.value}>\n <TriggerTag {...v} />\n </RefToTgphRef>\n );\n }\n })}\n </AnimatePresence>\n <AnimatePresence>\n {layout === \"truncate\" && contextValue.length > 2 && (\n <Stack\n as={motion.div}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n h=\"full\"\n pr=\"1\"\n pl=\"8\"\n align=\"center\"\n aria-label={`${truncatedLength} more selected`}\n style={{\n position: \"absolute\",\n right: 0,\n backgroundImage:\n \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n }}\n key=\"truncated text\"\n >\n <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n +\n <AnimatePresence mode=\"wait\" initial={false}>\n {truncatedLengthStringArray.map((n) => (\n <Box\n as={motion.span}\n w=\"2\"\n display=\"inline-block\"\n initial={{\n opacity: 0.5,\n }}\n animate={{\n opacity: 1,\n }}\n exit={{\n opacity: 0.5,\n }}\n transition={{ duration: 0.1, type: \"spring\", bounce: 0 }}\n key={n}\n >\n {n}\n </Box>\n ))}\n </AnimatePresence>{\" \"}\n more\n </Text>\n </Stack>\n )}\n </AnimatePresence>\n </Stack>\n );\n }\n\n return (\n <TelegraphButton.Text color={!context.value ? \"gray\" : \"default\"}>\n {context?.value?.label || context?.value?.value || context.placeholder}\n </TelegraphButton.Text>\n );\n};\n\ntype TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {\n placeholder?: string;\n size?: TgphComponentProps<typeof TelegraphButton.Root>[\"size\"];\n};\n\nconst Trigger = ({ size = \"2\", ...props }: TriggerProps) => {\n const context = React.useContext(ComboboxContext);\n\n const getAriaLabelString = React.useCallback(() => {\n if (!context.value) return context.placeholder;\n if (isSingleSelect(context.value)) {\n return (\n context.value?.label || context.value?.value || context.placeholder\n );\n } else {\n return (\n context.value?.map((v) => v.label).join(\", \") || context.placeholder\n );\n }\n }, [context.value, context.placeholder]);\n\n return (\n <TelegraphMenu.Trigger\n {...props}\n asChild\n onClick={(event: React.MouseEvent) => {\n event.preventDefault();\n context.onOpenToggle();\n context.triggerRef?.current?.focus();\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n // Lets the user tab in and out of the combobox as usual\n if (event.key === \"Tab\") {\n event.stopPropagation();\n return;\n }\n if (SELECT_KEYS.includes(event.key)) {\n event.preventDefault();\n return;\n }\n\n if (event.key === \"ArrowDown\") {\n context.onOpenToggle();\n return;\n }\n }}\n tgphRef={context.triggerRef}\n >\n <TelegraphButton.Root\n id={context.triggerId}\n bg=\"surface-1\"\n variant=\"outline\"\n align=\"center\"\n minH={TRIGGER_MIN_HEIGHT[size]}\n h=\"full\"\n w=\"full\"\n py=\"1\"\n size={size}\n color={context.errored ? \"red\" : \"gray\"}\n justify=\"space-between\"\n // Accessibility attributes\n role=\"combobox\"\n aria-label={getAriaLabelString()}\n aria-controls={context.contentId}\n aria-expanded={context.open}\n aria-haspopup=\"listbox\"\n // Custom attributes\n data-tgph-combobox-trigger\n data-tgph-comobox-trigger-open={context.open}\n >\n <TriggerValue />\n <Stack align=\"center\" gap=\"1\">\n {context.clearable && context.value && (\n <Tooltip label=\"Clear field\">\n <TelegraphButton\n type=\"button\"\n icon={{ icon: Lucide.X, alt: \"Clear field\" }}\n size=\"1\"\n variant=\"ghost\"\n onClick={(event: React.MouseEvent) => {\n if (!context.value) return;\n event.stopPropagation();\n context?.onValueChange?.(undefined);\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.stopPropagation();\n context?.onValueChange?.(undefined);\n }\n }}\n data-tgph-combobox-clear\n />\n </Tooltip>\n )}\n <TelegraphButton.Icon\n as={motion.div}\n icon={Lucide.ChevronDown}\n animate={{ rotate: context.open ? \"180deg\" : \"0deg\" }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n aria-hidden\n />\n </Stack>\n </TelegraphButton.Root>\n </TelegraphMenu.Trigger>\n );\n};\n\ntype ContentProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphMenu.Content<T>\n>;\n\nconst Content = <T extends TgphElement>({\n tgphRef,\n style,\n children,\n ...props\n}: ContentProps<T>) => {\n const context = React.useContext(ComboboxContext);\n const hasInteractedOutside = React.useRef(false);\n const composedRef = useComposedRefs<unknown>(tgphRef, context.contentRef);\n\n const internalContentRef = React.useRef(null);\n\n const [height, setHeight] = React.useState(0);\n const [initialAnimationComplete, setInitialAnimationComplete] =\n React.useState(false);\n\n const setHeightFromContent = React.useCallback(\n (element: Element) => {\n // Set the initial height of the content after the animation completes\n const rect = element.getBoundingClientRect();\n if (rect) {\n setHeight(rect.height);\n }\n\n if (!initialAnimationComplete) {\n setInitialAnimationComplete(true);\n }\n },\n [initialAnimationComplete],\n );\n\n React.useEffect(() => {\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const element = entry.target;\n setHeightFromContent(element);\n }\n });\n // Attatch the observer once the initial animation completes\n // and the content ref is available\n if (internalContentRef.current && initialAnimationComplete) {\n observer.observe(internalContentRef.current);\n }\n\n return () => observer.disconnect();\n }, [initialAnimationComplete, setHeightFromContent]);\n\n // Reset the animation complete state when the combobox is closed\n React.useEffect(() => {\n if (initialAnimationComplete === true && context.open === false) {\n setInitialAnimationComplete(false);\n }\n }, [context.open, initialAnimationComplete]);\n\n return (\n <TelegraphMenu.Content\n as={motion.div}\n mt=\"1\"\n initial={{\n opacity: 0,\n scale: 0.8,\n height: \"auto\",\n }}\n animate={{\n opacity: 1,\n scale: 1,\n // Set height based on the internalContentRef so that\n // we get smooth animations when the content changes\n minHeight: height ? `${height}px` : \"0\",\n }}\n exit={{ opacity: 0, scale: 0 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n onAnimationComplete={() => {\n // Set height when the initial animation for\n // displaying the content completes\n if (!initialAnimationComplete && internalContentRef) {\n const element = internalContentRef.current as unknown as Element;\n setHeightFromContent(element);\n }\n }}\n onCloseAutoFocus={(event: Event) => {\n if (!hasInteractedOutside.current) context.triggerRef?.current?.focus();\n hasInteractedOutside.current = false;\n\n event.preventDefault();\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n // If the first option is focused and the user presses the up\n // arrow key, focus the search input\n const options = context.contentRef?.current?.querySelectorAll(\n \"[data-tgph-combobox-option]\",\n );\n\n if (\n document.activeElement === options?.[0] &&\n LAST_KEYS.includes(event.key)\n ) {\n context.searchRef?.current?.focus();\n }\n\n // Close the combobox if the user presses the escape key\n if (event.key === \"Escape\") {\n context.setOpen(false);\n }\n\n event.stopPropagation();\n }}\n bg=\"surface-1\"\n style={{\n width: \"var(--tgph-comobobox-trigger-width)\",\n ...style,\n ...{\n \"--tgph-comobobox-content-transform-origin\":\n \"var(--radix-popper-transform-origin)\",\n \"--tgph-combobox-content-available-width\":\n \"var(--radix-popper-available-width)\",\n \"--tgph-combobox-content-available-height\":\n \"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))\",\n \"--tgph-comobobox-trigger-width\": \"var(--radix-popper-anchor-width)\",\n \"--tgph-combobox-trigger-height\": \"var(--radix-popper-anchor-height)\",\n },\n }}\n {...props}\n tgphRef={composedRef}\n data-tgph-combobox-content\n data-tgph-combobox-content-open={initialAnimationComplete}\n // Cancel out accessibility attirbutes related to aria menu\n role={undefined}\n aria-orientation={undefined}\n >\n <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n {children}\n </Stack>\n </TelegraphMenu.Content>\n );\n};\n\ntype OptionsProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>>;\n\nconst Options = <T extends TgphElement>({ ...props }: OptionsProps<T>) => {\n const context = React.useContext(ComboboxContext);\n return (\n <Stack\n id={context.contentId}\n direction=\"column\"\n gap=\"1\"\n style={{\n overflowY: \"auto\",\n // Available Height - Padding from edge of screen\n maxHeight:\n \"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))\",\n }}\n // Accessibility attributes\n role=\"listbox\"\n {...props}\n />\n );\n};\n\ntype OptionProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphMenu.Button<T>\n> & {\n value: string;\n label?: string;\n selected?: boolean | null;\n};\n\nconst Option = <T extends TgphElement>({\n value,\n label,\n selected,\n onSelect,\n ...props\n}: OptionProps<T>) => {\n const context = React.useContext(ComboboxContext);\n const [isFocused, setIsFocused] = React.useState(false);\n const contextValue = context.value ?? [];\n\n const isVisible = isMultiSelect(contextValue)\n ? !context.searchQuery ||\n value.toLowerCase().includes(context.searchQuery.toLowerCase())\n : !context.searchQuery ||\n value.toLowerCase().includes(context.searchQuery.toLowerCase());\n\n const isSelected = isMultiSelect(contextValue)\n ? contextValue.some((v) => v.value === value)\n : contextValue.value === value;\n\n const handleSelection = (event: Event | React.KeyboardEvent) => {\n // Don't do anything if the key isn't a selection key\n const keyboardEvent = event as React.KeyboardEvent;\n if (keyboardEvent.key && !SELECT_KEYS.includes(keyboardEvent.key)) return;\n\n // Don't bubble up the event\n event.stopPropagation();\n event.preventDefault();\n\n if (context.closeOnSelect === true) {\n context.setOpen(false);\n }\n\n if (onSelect) {\n // Need to convert to non keyboard type event\n // since onSelect is expecting a mouse event\n // and we've handled the keyboard event already\n const onSelectEvent = event as unknown as Event;\n return onSelect(onSelectEvent);\n }\n\n if (isMultiSelect(contextValue)) {\n const onValueChange = context.onValueChange as (v: Array<Option>) => void;\n\n const newValue = isSelected\n ? contextValue.filter((v) => v.value !== value)\n : [...contextValue, { value, label }];\n\n onValueChange(newValue);\n } else if (isSingleSelect(contextValue)) {\n const onValueChange = context.onValueChange as (v: Option) => void;\n onValueChange({ value, label });\n }\n\n context.triggerRef?.current?.focus();\n };\n\n if (isVisible) {\n return (\n <TelegraphMenu.Button\n type=\"button\"\n onSelect={handleSelection}\n onKeyDown={handleSelection}\n // Force null if selected equals null so we\n // can override the icon of the button\n selected={selected === null ? null : selected ?? isSelected}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n // Accessibility attributes\n role=\"option\"\n aria-selected={isSelected ? \"true\" : \"false\"}\n // Custom attributes\n data-tgph-combobox-option\n data-tgph-combobox-option-focused={isFocused}\n data-tgph-combobox-option-value={value}\n data-tgph-combobox-option-label={label}\n {...props}\n >\n {label || value}\n </TelegraphMenu.Button>\n );\n }\n};\n\ntype SearchProps = TgphComponentProps<typeof TelegraphInput> & {\n label?: string;\n};\n\nconst Search = ({\n label = \"Search\",\n placeholder = \"Search\",\n tgphRef,\n value: controlledValueProp,\n onValueChange: onValueChangeProp,\n ...props\n}: SearchProps) => {\n const id = React.useId();\n const context = React.useContext(ComboboxContext);\n const composedRef = useComposedRefs(tgphRef, context.searchRef);\n\n const value = controlledValueProp ?? context.searchQuery;\n const onValueChange = onValueChangeProp ?? context.setSearchQuery;\n\n React.useEffect(() => {\n const handleSearchKeyDown = (event: KeyboardEvent) => {\n if (FIRST_KEYS.includes(event.key)) {\n context.contentRef?.current?.focus({ preventScroll: true });\n }\n\n if (event.key === \"Escape\") {\n context.setOpen(false);\n }\n\n event.stopPropagation();\n };\n\n const searchInput = context.searchRef?.current;\n\n if (searchInput) {\n searchInput.addEventListener(\"keydown\", handleSearchKeyDown);\n return () => {\n searchInput.removeEventListener(\"keydown\", handleSearchKeyDown);\n };\n }\n }, [context]);\n\n return (\n <Box borderBottom=\"px\" px=\"1\" pb=\"1\">\n <VisuallyHidden.Root>\n <Text as=\"label\" htmlFor={id}>\n {label}\n </Text>\n </VisuallyHidden.Root>\n <TelegraphInput\n id={id}\n variant=\"ghost\"\n placeholder={placeholder}\n value={value}\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n onValueChange(event.target.value);\n }}\n LeadingComponent={<Icon icon={Lucide.Search} alt=\"Search Icon\" />}\n TrailingComponent={\n context?.searchQuery && context?.searchQuery?.length > 0 ? (\n <TelegraphButton\n as={motion.button}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n variant=\"ghost\"\n color=\"gray\"\n icon={{ icon: Lucide.X, alt: \"Clear Search Query\" }}\n onClick={() => context.setSearchQuery?.(\"\")}\n />\n ) : null\n }\n autoFocus\n data-tgph-combobox-search\n aria-controls={context.contentId}\n {...props}\n tgphRef={composedRef}\n />\n </Box>\n );\n};\n\ntype EmptyProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>> & {\n icon?: TgphComponentProps<typeof Icon> | null;\n message?: string | null;\n};\n\nconst Empty = <T extends TgphElement>({\n icon = { icon: Lucide.Search, alt: \"Search Icon\" },\n message = \"No results found\",\n children,\n ...props\n}: EmptyProps<T>) => {\n const context = React.useContext(ComboboxContext);\n const [isVisible, setIsVisible] = React.useState(false);\n\n React.useEffect(() => {\n const options = context.contentRef?.current?.querySelectorAll(\n \"[data-tgph-combobox-option]\",\n );\n\n if (options?.length === 0) {\n setIsVisible(true);\n } else {\n setIsVisible(false);\n }\n }, [context.searchQuery, context.contentRef, children]);\n\n if (isVisible) {\n return (\n <Stack\n as={motion.div}\n initial={{ opacity: 0, scale: 0.8 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n gap=\"1\"\n align=\"center\"\n justify=\"center\"\n w=\"full\"\n my=\"8\"\n data-tgph-combobox-empty\n {...props}\n >\n {icon === null ? <></> : <Icon {...icon} />}\n {message === null ? <></> : <Text as=\"span\">{message}</Text>}\n </Stack>\n );\n }\n};\n\ntype CreateProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphMenu.Button<T>\n> & {\n leadingText?: string;\n values?: Array<Option>;\n onCreate?: (value: Option) => void;\n};\n\nconst Create = <T extends TgphElement>({\n leadingText = \"Create\",\n values,\n onCreate,\n selected = null,\n ...props\n}: CreateProps<T>) => {\n const context = React.useContext(ComboboxContext);\n\n const variableAlreadyExists = React.useCallback(\n (searchQuery: string | undefined) => {\n if (!values || values?.length === 0) return false;\n return values.some((v) => v.value === searchQuery);\n },\n [values],\n );\n\n if (context.searchQuery && !variableAlreadyExists(context.searchQuery)) {\n return (\n <Option\n leadingIcon={{ icon: Lucide.Plus, \"aria-hidden\": true }}\n mx=\"1\"\n value={context.searchQuery}\n label={`${leadingText} \"${context.searchQuery}\"`}\n selected={selected}\n onSelect={() => {\n if (onCreate && context.value && context.searchQuery) {\n if (isSingleSelect(context.value)) {\n onCreate({ value: context.searchQuery });\n }\n\n if (isMultiSelect(context.value)) {\n onCreate({ value: context.searchQuery });\n }\n\n context.setSearchQuery?.(\"\");\n }\n }}\n {...props}\n />\n );\n }\n};\n\nconst Combobox = {} as {\n Root: typeof Root;\n Trigger: typeof Trigger;\n Content: typeof Content;\n Options: typeof Options;\n Option: typeof Option;\n Search: typeof Search;\n Empty: typeof Empty;\n Create: typeof Create;\n};\n\nObject.assign(Combobox, {\n Root,\n Trigger,\n Content,\n Options,\n Option,\n Search,\n Empty,\n Create,\n});\n\nexport { Combobox };\n"],"names":["TRIGGER_MIN_HEIGHT","isMultiSelect","value","isSingleSelect","FIRST_KEYS","LAST_KEYS","SELECT_KEYS","ComboboxContext","React","Root","modal","closeOnSelect","clearable","openProp","onOpenChangeProp","defaultOpenProp","onValueChange","errored","placeholder","layout","props","contentId","triggerId","triggerRef","searchRef","contentRef","searchQuery","setSearchQuery","open","setOpen","useControllableState","onOpenToggle","prevOpen","jsx","TelegraphMenu","TriggerTag","label","context","jsxs","Tag","motion","Lucide","event","newValue","v","TriggerValue","contextValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","AnimatePresence","i","RefToTgphRef","Text","n","Box","_b","Trigger","size","getAriaLabelString","_a","_c","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","height","setHeight","initialAnimationComplete","setInitialAnimationComplete","setHeightFromContent","element","rect","observer","entries","entry","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","isVisible","isSelected","handleSelection","keyboardEvent","Search","controlledValueProp","onValueChangeProp","id","handleSearchKeyDown","searchInput","VisuallyHidden","TelegraphInput","Icon","Empty","icon","message","setIsVisible","Fragment","Create","leadingText","values","onCreate","variableAlreadyExists","Combobox"],"mappings":"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"}
|
|
@@ -9,11 +9,11 @@ import { Option } from './Combobox.helpers';
|
|
|
9
9
|
|
|
10
10
|
type RootProps = ({
|
|
11
11
|
value?: Array<Option>;
|
|
12
|
-
onValueChange?: (value: Array<Option>) => void;
|
|
12
|
+
onValueChange?: (value: Array<Option> | undefined) => void;
|
|
13
13
|
layout?: "truncate" | "wrap";
|
|
14
14
|
} | {
|
|
15
15
|
value?: Option;
|
|
16
|
-
onValueChange?: (value: Option) => void;
|
|
16
|
+
onValueChange?: (value: Option | undefined) => void;
|
|
17
17
|
layout?: never;
|
|
18
18
|
}) & {
|
|
19
19
|
open?: boolean;
|
|
@@ -23,9 +23,10 @@ type RootProps = ({
|
|
|
23
23
|
onOpenChange?: (open: boolean) => void;
|
|
24
24
|
modal?: boolean;
|
|
25
25
|
closeOnSelect?: boolean;
|
|
26
|
+
clearable?: boolean;
|
|
26
27
|
children?: React.ReactNode;
|
|
27
28
|
};
|
|
28
|
-
declare const Root: ({ modal, closeOnSelect, open: openProp, onOpenChange: onOpenChangeProp, defaultOpen: defaultOpenProp, value, onValueChange, errored, placeholder, layout, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare const Root: ({ modal, closeOnSelect, clearable, open: openProp, onOpenChange: onOpenChangeProp, defaultOpen: defaultOpenProp, value, onValueChange, errored, placeholder, layout, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
30
|
type TriggerProps = React.ComponentProps<typeof TelegraphMenu.Trigger> & {
|
|
30
31
|
placeholder?: string;
|
|
31
32
|
size?: TgphComponentProps<typeof TelegraphButton.Root>["size"];
|
|
@@ -44,7 +45,7 @@ declare const Option: <T extends TgphElement>({ value, label, selected, onSelect
|
|
|
44
45
|
type SearchProps = TgphComponentProps<typeof TelegraphInput> & {
|
|
45
46
|
label?: string;
|
|
46
47
|
};
|
|
47
|
-
declare const Search: ({ label, placeholder, tgphRef, ...props }: SearchProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
declare const Search: ({ label, placeholder, tgphRef, value: controlledValueProp, onValueChange: onValueChangeProp, ...props }: SearchProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
49
|
type EmptyProps<T extends TgphElement> = TgphComponentProps<typeof Stack<T>> & {
|
|
49
50
|
icon?: TgphComponentProps<typeof Icon> | null;
|
|
50
51
|
message?: string | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAU,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAO,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,6 @@ export type Option = {
|
|
|
2
2
|
value: string;
|
|
3
3
|
label?: string;
|
|
4
4
|
};
|
|
5
|
-
export declare const isMultiSelect: (value: Option | Array<Option>) => value is Option
|
|
5
|
+
export declare const isMultiSelect: (value: Option | Array<Option>) => value is Array<Option>;
|
|
6
6
|
export declare const isSingleSelect: (value: Option | Array<Option>) => value is Option;
|
|
7
7
|
//# sourceMappingURL=Combobox.helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.helpers.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.helpers.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACvD,eAAO,MAAM,aAAa,UACjB,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"Combobox.helpers.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.helpers.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACvD,eAAO,MAAM,aAAa,UACjB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAC5B,KAAK,IAAI,KAAK,CAAC,MAAM,CAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,UAClB,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAC5B,KAAK,IAAI,MAEX,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/combobox",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.30",
|
|
4
4
|
"description": "A styled menu, triggered by a Select, that combines an Input and Single- or Multi-select.",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/combobox",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -34,15 +34,16 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@radix-ui/react-use-controllable-state": "^1.1.0",
|
|
36
36
|
"@radix-ui/react-visually-hidden": "^1.1.0",
|
|
37
|
-
"@telegraph/button": "^0.0.
|
|
37
|
+
"@telegraph/button": "^0.0.49",
|
|
38
38
|
"@telegraph/compose-refs": "^0.0.2",
|
|
39
|
-
"@telegraph/helpers": "^0.0.
|
|
40
|
-
"@telegraph/icon": "^0.0.
|
|
41
|
-
"@telegraph/input": "^0.0.
|
|
42
|
-
"@telegraph/layout": "^0.0.
|
|
43
|
-
"@telegraph/menu": "^0.0.
|
|
44
|
-
"@telegraph/tag": "^0.0.
|
|
45
|
-
"@telegraph/
|
|
39
|
+
"@telegraph/helpers": "^0.0.7",
|
|
40
|
+
"@telegraph/icon": "^0.0.31",
|
|
41
|
+
"@telegraph/input": "^0.0.23",
|
|
42
|
+
"@telegraph/layout": "^0.0.29",
|
|
43
|
+
"@telegraph/menu": "^0.0.30",
|
|
44
|
+
"@telegraph/tag": "^0.0.50",
|
|
45
|
+
"@telegraph/tooltip": "^0.0.23",
|
|
46
|
+
"@telegraph/typography": "^0.0.29",
|
|
46
47
|
"framer-motion": "^11.1.9"
|
|
47
48
|
},
|
|
48
49
|
"devDependencies": {
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
"eslint": "^8.56.0",
|
|
57
58
|
"react": "^18.2.0",
|
|
58
59
|
"react-dom": "^18.3.1",
|
|
59
|
-
"typescript": "^5.
|
|
60
|
+
"typescript": "^5.5.4",
|
|
60
61
|
"vite": "^5.3.5"
|
|
61
62
|
},
|
|
62
63
|
"peerDependencies": {
|