@telegraph/combobox 0.0.47 → 0.0.49
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/CHANGELOG.md +24 -0
- package/dist/cjs/default.js +2 -0
- package/dist/cjs/default.js.map +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/default.mjs +2 -0
- package/dist/esm/default.mjs.map +1 -0
- package/dist/esm/index.mjs +263 -363
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Combobox/Combobox.d.ts.map +1 -1
- package/package.json +10 -11
- package/dist/css/default.css +0 -1
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 DefinedOption = { value: string; label?: string | React.ReactNode };\nexport type Option = DefinedOption | undefined;\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)) || !value;\n};\n","import { DismissableLayer } from \"@radix-ui/react-dismissable-layer\";\nimport { 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 {\n type DefinedOption,\n type Option,\n isMultiSelect,\n isSingleSelect,\n} from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype SingleSelect = {\n value?: Option;\n onValueChange?: (value: Option) => void;\n};\n\ntype MultiSelect = {\n value?: Array<Option>;\n onValueChange?: (value: Array<Option>) => void;\n};\n\ntype LayoutValue<O extends Option | Array<Option>> = O extends Option\n ? never\n : \"truncate\" | \"wrap\";\n\ntype RootProps<O extends Option | Array<Option>> = {\n value?: O;\n onValueChange?: (value: O) => void;\n layout?: LayoutValue<O>;\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 disabled?: boolean;\n children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n Omit<RootProps<Option | Array<Option>>, \"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 value: undefined,\n onValueChange: () => {},\n contentId: \"\",\n triggerId: \"\",\n open: false,\n setOpen: () => {},\n onOpenToggle: () => {},\n clearable: false,\n disabled: false,\n});\n\nconst Root = <O extends Option | Array<Option>>({\n modal = true,\n closeOnSelect = true,\n clearable = false,\n disabled = false,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n defaultOpen: defaultOpenProp,\n value,\n onValueChange,\n errored,\n placeholder,\n layout,\n ...props\n}: RootProps<O>) => {\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 // Need to cast this to avoid type errors\n // because the type of onValueChange is not\n // consistent with the value type\n onValueChange: onValueChange as (value: Option | Array<Option>) => void,\n placeholder,\n open,\n setOpen,\n onOpenToggle,\n closeOnSelect,\n clearable,\n disabled,\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: DefinedOption[\"value\"];\n label?: DefinedOption[\"label\"];\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 if (!context.onValueChange) return;\n const onValueChange =\n context.onValueChange as MultiSelect[\"onValueChange\"];\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 layout = context.layout || \"truncate\";\n const truncatedLength = context.value.length - 2;\n const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n if (context.value.length === 0) {\n return (\n <TelegraphButton.Text color=\"gray\">\n {context.placeholder}\n </TelegraphButton.Text>\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 {context.value.map((v, i) => {\n if (\n v?.value &&\n ((layout === \"truncate\" && i <= 1) || layout === \"wrap\")\n ) {\n return (\n <RefToTgphRef key={v.value}>\n <TriggerTag {...v} />\n </RefToTgphRef>\n );\n }\n })}\n </AnimatePresence>\n <AnimatePresence>\n {layout === \"truncate\" && context.value.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 const shouldShowClearable = React.useMemo(() => {\n if (isMultiSelect(context.value)) {\n return context.clearable && context.value?.length > 0;\n }\n\n if (isSingleSelect(context.value)) {\n return context.clearable && context.value;\n }\n }, [context.clearable, context.value]);\n\n const handleClear = () => {\n if (isMultiSelect(context.value)) {\n const onValueChange =\n context.onValueChange as MultiSelect[\"onValueChange\"];\n onValueChange?.([]);\n }\n\n if (isSingleSelect(context.value)) {\n const onValueChange =\n context.onValueChange as SingleSelect[\"onValueChange\"];\n onValueChange?.(undefined);\n }\n context.triggerRef?.current?.focus();\n };\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 // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n event.preventDefault();\n context.onOpenToggle();\n return;\n }\n }}\n tgphRef={context.triggerRef}\n >\n <TelegraphButton.Root\n id={context.triggerId}\n type=\"button\"\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 disabled={context.disabled}\n >\n <TriggerValue />\n <Stack align=\"center\" gap=\"1\">\n {shouldShowClearable && (\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 handleClear();\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.stopPropagation();\n handleClear();\n }\n }}\n data-tgph-combobox-clear\n style={{\n // Remove margin to make the clear button flush\n // with the trigger button\n marginTop: \"calc(-1 * var(--tgph-spacing-1)\",\n marginBottom: \"calc(-1 * var(--tgph-spacing-1)\",\n }}\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 // We add radix's dismissable layer here so that we can swallow any escape key\n // presses to prevent cases like a modal closing when we close the combobox\n <DismissableLayer\n onEscapeKeyDown={(event) => {\n if (context.open) {\n // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n event.preventDefault();\n context.setOpen(false);\n }\n }}\n >\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)\n context.triggerRef?.current?.focus();\n hasInteractedOutside.current = false;\n\n event.preventDefault();\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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 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\":\n \"var(--radix-popper-anchor-width)\",\n \"--tgph-combobox-trigger-height\":\n \"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 </DismissableLayer>\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: DefinedOption[\"value\"];\n label?: DefinedOption[\"label\"];\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 allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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.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 (isSingleSelect(contextValue)) {\n const onValueChange =\n context.onValueChange as SingleSelect[\"onValueChange\"];\n onValueChange?.({ value, label });\n } else if (isMultiSelect(contextValue)) {\n const onValueChange =\n context.onValueChange as MultiSelect[\"onValueChange\"];\n\n const newValue = isSelected\n ? contextValue.filter((v) => v?.value !== value)\n : [...contextValue, { value, label }];\n\n onValueChange?.(newValue);\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: DefinedOption) => 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","disabled","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","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","AnimatePresence","i","RefToTgphRef","Text","Box","_b","Trigger","size","getAriaLabelString","_a","_c","shouldShowClearable","handleClear","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","height","setHeight","initialAnimationComplete","setInitialAnimationComplete","setHeightFromContent","element","rect","observer","entries","entry","DismissableLayer","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","contextValue","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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"}
|
|
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 DefinedOption = { value: string; label?: string | React.ReactNode };\nexport type Option = DefinedOption | undefined;\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)) || !value;\n};\n","import { DismissableLayer } from \"@radix-ui/react-dismissable-layer\";\nimport { 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 React from \"react\";\n\nimport { TRIGGER_MIN_HEIGHT } from \"./Combobox.constants\";\nimport {\n type DefinedOption,\n type Option,\n isMultiSelect,\n isSingleSelect,\n} from \"./Combobox.helpers\";\n\nconst FIRST_KEYS = [\"ArrowDown\", \"PageUp\", \"Home\"];\nconst LAST_KEYS = [\"ArrowUp\", \"PageDown\", \"End\"];\nconst SELECT_KEYS = [\"Enter\", \" \"];\n\ntype SingleSelect = {\n value?: Option;\n onValueChange?: (value: Option) => void;\n};\n\ntype MultiSelect = {\n value?: Array<Option>;\n onValueChange?: (value: Array<Option>) => void;\n};\n\ntype LayoutValue<O extends Option | Array<Option>> = O extends Option\n ? never\n : \"truncate\" | \"wrap\";\n\ntype RootProps<O extends Option | Array<Option>> = {\n value?: O;\n onValueChange?: (value: O) => void;\n layout?: LayoutValue<O>;\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 disabled?: boolean;\n children?: React.ReactNode;\n};\n\nconst ComboboxContext = React.createContext<\n Omit<RootProps<Option | Array<Option>>, \"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 value: undefined,\n onValueChange: () => {},\n contentId: \"\",\n triggerId: \"\",\n open: false,\n setOpen: () => {},\n onOpenToggle: () => {},\n clearable: false,\n disabled: false,\n});\n\nconst Root = <O extends Option | Array<Option>>({\n modal = true,\n closeOnSelect = true,\n clearable = false,\n disabled = false,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n defaultOpen: defaultOpenProp,\n value,\n onValueChange,\n errored,\n placeholder,\n layout,\n ...props\n}: RootProps<O>) => {\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 // Need to cast this to avoid type errors\n // because the type of onValueChange is not\n // consistent with the value type\n onValueChange: onValueChange as (value: Option | Array<Option>) => void,\n placeholder,\n open,\n setOpen,\n onOpenToggle,\n closeOnSelect,\n clearable,\n disabled,\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: DefinedOption[\"value\"];\n label?: DefinedOption[\"label\"];\n};\n\nconst TriggerTag = ({ label, value, ...props }: TriggerTagProps) => {\n const context = React.useContext(ComboboxContext);\n\n return (\n <Tag.Root size=\"1\" layout=\"position\" {...props}>\n <Tag.Text>{label || value}</Tag.Text>\n <Tag.Button\n icon={{ icon: Lucide.X, alt: `Remove ${value}` }}\n onClick={(event: React.MouseEvent) => {\n if (!context.onValueChange) return;\n const onValueChange =\n context.onValueChange as MultiSelect[\"onValueChange\"];\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 layout = context.layout || \"truncate\";\n const truncatedLength = context.value.length - 2;\n const truncatedLengthStringArray = truncatedLength.toString().split(\"\");\n\n if (context.value.length === 0) {\n return (\n <TelegraphButton.Text color=\"gray\">\n {context.placeholder}\n </TelegraphButton.Text>\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 {context.value.map((v, i) => {\n if (\n v?.value &&\n ((layout === \"truncate\" && i <= 1) || layout === \"wrap\")\n ) {\n return (\n <RefToTgphRef key={v.value}>\n <TriggerTag {...v} />\n </RefToTgphRef>\n );\n }\n })}\n {layout === \"truncate\" && context.value.length > 2 && (\n <Stack\n h=\"full\"\n pr=\"1\"\n pl=\"8\"\n align=\"center\"\n aria-label={`${truncatedLength} more selected`}\n position=\"absolute\"\n right=\"0\"\n style={{\n backgroundImage:\n \"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)\",\n }}\n >\n <Text as=\"span\" size=\"1\" style={{ whiteSpace: \"nowrap\" }}>\n +\n {truncatedLengthStringArray.map((n) => (\n <Box as=\"span\" w=\"2\" display=\"inline-block\" key={n}>\n {n}\n </Box>\n ))}{\" \"}\n more\n </Text>\n </Stack>\n )}\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 const shouldShowClearable = React.useMemo(() => {\n if (isMultiSelect(context.value)) {\n return context.clearable && context.value?.length > 0;\n }\n\n if (isSingleSelect(context.value)) {\n return context.clearable && context.value;\n }\n }, [context.clearable, context.value]);\n\n const handleClear = () => {\n if (isMultiSelect(context.value)) {\n const onValueChange =\n context.onValueChange as MultiSelect[\"onValueChange\"];\n onValueChange?.([]);\n }\n\n if (isSingleSelect(context.value)) {\n const onValueChange =\n context.onValueChange as SingleSelect[\"onValueChange\"];\n onValueChange?.(undefined);\n }\n context.triggerRef?.current?.focus();\n };\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 // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n event.preventDefault();\n context.onOpenToggle();\n return;\n }\n }}\n tgphRef={context.triggerRef}\n >\n <TelegraphButton.Root\n id={context.triggerId}\n type=\"button\"\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 disabled={context.disabled}\n >\n <TriggerValue />\n <Stack align=\"center\" gap=\"1\">\n {shouldShowClearable && (\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 handleClear();\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.stopPropagation();\n handleClear();\n }\n }}\n data-tgph-combobox-clear\n style={{\n // Remove margin to make the clear button flush\n // with the trigger button\n marginTop: \"calc(-1 * var(--tgph-spacing-1)\",\n marginBottom: \"calc(-1 * var(--tgph-spacing-1)\",\n }}\n />\n </Tooltip>\n )}\n <TelegraphButton.Icon icon={Lucide.ChevronDown} aria-hidden />\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 // We add radix's dismissable layer here so that we can swallow any escape key\n // presses to prevent cases like a modal closing when we close the combobox\n <DismissableLayer\n onEscapeKeyDown={(event) => {\n if (context.open) {\n // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n event.preventDefault();\n context.setOpen(false);\n }\n }}\n >\n <Box tgphRef={composedRef}>\n <TelegraphMenu.Content\n // as={motion.div}\n mt=\"1\"\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)\n context.triggerRef?.current?.focus();\n hasInteractedOutside.current = false;\n\n event.preventDefault();\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\":\n \"var(--radix-popper-anchor-width)\",\n \"--tgph-combobox-trigger-height\":\n \"var(--radix-popper-anchor-height)\",\n },\n }}\n {...props}\n tgphRef={composedRef}\n data-tgph-combobox-content\n data-tgph-combobox-content-open={context.open}\n // Cancel out accessibility attirbutes related to aria menu\n role={undefined}\n aria-orientation={undefined}\n onKeyDown={(event: React.KeyboardEvent) => {\n // Don't allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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 >\n <Stack direction=\"column\" gap=\"1\" tgphRef={internalContentRef}>\n {children}\n </Stack>\n </TelegraphMenu.Content>\n </Box>\n </DismissableLayer>\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: DefinedOption[\"value\"];\n label?: DefinedOption[\"label\"];\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 allow the event to bubble up outside of the menu\n event.stopPropagation();\n\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.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 (isSingleSelect(contextValue)) {\n const onValueChange =\n context.onValueChange as SingleSelect[\"onValueChange\"];\n onValueChange?.({ value, label });\n } else if (isMultiSelect(contextValue)) {\n const onValueChange =\n context.onValueChange as MultiSelect[\"onValueChange\"];\n\n const newValue = isSelected\n ? contextValue.filter((v) => v?.value !== value)\n : [...contextValue, { value, label }];\n\n onValueChange?.(newValue);\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 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 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: DefinedOption) => 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","disabled","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","Lucide","event","newValue","v","TriggerValue","truncatedLength","truncatedLengthStringArray","TelegraphButton","Stack","i","RefToTgphRef","Text","n","Box","_b","Trigger","size","getAriaLabelString","_a","_c","shouldShowClearable","handleClear","Tooltip","Content","tgphRef","style","children","hasInteractedOutside","composedRef","useComposedRefs","internalContentRef","DismissableLayer","options","_d","Options","Option","selected","onSelect","isFocused","setIsFocused","contextValue","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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAGA,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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/combobox",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.49",
|
|
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",
|
|
@@ -35,24 +35,23 @@
|
|
|
35
35
|
"@radix-ui/react-dismissable-layer": "^1.1.1",
|
|
36
36
|
"@radix-ui/react-use-controllable-state": "^1.1.0",
|
|
37
37
|
"@radix-ui/react-visually-hidden": "^1.1.0",
|
|
38
|
-
"@telegraph/button": "^0.0.
|
|
38
|
+
"@telegraph/button": "^0.0.57",
|
|
39
39
|
"@telegraph/compose-refs": "^0.0.2",
|
|
40
40
|
"@telegraph/helpers": "^0.0.7",
|
|
41
|
-
"@telegraph/icon": "^0.0.
|
|
42
|
-
"@telegraph/input": "^0.0.
|
|
43
|
-
"@telegraph/layout": "^0.1.
|
|
44
|
-
"@telegraph/menu": "^0.0.
|
|
45
|
-
"@telegraph/
|
|
46
|
-
"@telegraph/
|
|
47
|
-
"@telegraph/
|
|
48
|
-
"
|
|
41
|
+
"@telegraph/icon": "^0.0.37",
|
|
42
|
+
"@telegraph/input": "^0.0.29",
|
|
43
|
+
"@telegraph/layout": "^0.1.3",
|
|
44
|
+
"@telegraph/menu": "^0.0.40",
|
|
45
|
+
"@telegraph/motion": "^0.0.2",
|
|
46
|
+
"@telegraph/tag": "^0.0.61",
|
|
47
|
+
"@telegraph/tooltip": "^0.0.30",
|
|
48
|
+
"@telegraph/typography": "^0.1.3"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@knocklabs/eslint-config": "^0.0.3",
|
|
52
52
|
"@knocklabs/typescript-config": "^0.0.2",
|
|
53
53
|
"@telegraph/postcss-config": "^0.0.20",
|
|
54
54
|
"@telegraph/prettier-config": "^0.0.6",
|
|
55
|
-
"@telegraph/tailwind-config": "^0.0.11",
|
|
56
55
|
"@telegraph/vite-config": "^0.0.11",
|
|
57
56
|
"@types/react": "^18.2.48",
|
|
58
57
|
"eslint": "^8.56.0",
|
package/dist/css/default.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.tgph .absolute{position:absolute}.tgph .relative{position:relative}.tgph .inline-block{display:inline-block}.tgph .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tgph .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tgph .outline{outline-style:solid}.tgph .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tgph .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
|