@spark-ui/components
Version:
Spark (Leboncoin design system) components.
1 lines • 48.3 kB
Source Map (JSON)
{"version":3,"sources":["../../src/dropdown/DropdownContext.tsx","../../src/dropdown/useDropdown.ts","../../src/dropdown/utils.ts","../../src/dropdown/Dropdown.tsx","../../src/dropdown/DropdownDivider.tsx","../../src/dropdown/DropdownGroup.tsx","../../src/dropdown/DropdownItemsGroupContext.tsx","../../src/dropdown/DropdownItem.tsx","../../src/dropdown/DropdownItemContext.tsx","../../src/dropdown/DropdownItemIndicator.tsx","../../src/dropdown/DropdownItems.tsx","../../src/dropdown/DropdownItemText.tsx","../../src/dropdown/DropdownLabel.tsx","../../src/dropdown/DropdownLeadingIcon.tsx","../../src/dropdown/DropdownPopover.tsx","../../src/dropdown/DropdownPortal.tsx","../../src/dropdown/DropdownTrigger.tsx","../../src/dropdown/DropdownTrigger.styles.tsx","../../src/dropdown/DropdownValue.tsx","../../src/dropdown/index.ts"],"sourcesContent":["import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport {\n createContext,\n Dispatch,\n Fragment,\n PropsWithChildren,\n SetStateAction,\n useContext,\n useEffect,\n useId,\n useState,\n} from 'react'\n\nimport { Popover } from '../popover'\nimport { type DownshiftState, type DropdownItem, type ItemsMap } from './types'\nimport { useDropdown } from './useDropdown'\nimport { getElementByIndex, getItemsFromChildren, hasChildComponent } from './utils'\n\nexport interface DropdownContextState extends DownshiftState {\n itemsMap: ItemsMap\n highlightedItem: DropdownItem | undefined\n hasPopover: boolean\n setHasPopover: Dispatch<SetStateAction<boolean>>\n multiple: boolean\n disabled: boolean\n readOnly: boolean\n state?: 'error' | 'alert' | 'success'\n lastInteractionType: 'mouse' | 'keyboard'\n setLastInteractionType: (type: 'mouse' | 'keyboard') => void\n}\n\nexport type DropdownContextCommonProps = PropsWithChildren<{\n /**\n * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * Event handler called when the open state of the select changes.\n */\n onOpenChange?: (isOpen: boolean) => void\n /**\n * The open state of the select when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Use `state` prop to assign a specific state to the dropdown, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n */\n state?: 'error' | 'alert' | 'success'\n /**\n * When true, prevents the user from interacting with the dropdown.\n */\n disabled?: boolean\n /**\n * Sets the dropdown as interactive or not.\n */\n readOnly?: boolean\n}>\n\ninterface DropdownPropsSingle {\n /**\n * Prop 'multiple' indicating whether multiple values are allowed.\n */\n multiple?: false\n /**\n * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n */\n defaultValue?: string\n /**\n * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: string) => void\n}\n\ninterface DropdownPropsMultiple {\n /**\n * Prop 'multiple' indicating whether multiple values are allowed.\n */\n multiple: true\n /**\n * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n */\n defaultValue?: string[]\n /**\n * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n */\n value?: string[]\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: string[]) => void\n}\n\nexport type DropdownContextProps = DropdownContextCommonProps &\n (DropdownPropsSingle | DropdownPropsMultiple)\n\nconst DropdownContext = createContext<DropdownContextState | null>(null)\n\nexport const ID_PREFIX = ':dropdown'\n\nexport const DropdownProvider = ({\n children,\n defaultValue,\n value,\n onValueChange,\n open,\n onOpenChange,\n defaultOpen,\n multiple = false,\n disabled: disabledProp = false,\n readOnly: readOnlyProp = false,\n state: stateProp,\n}: DropdownContextProps) => {\n const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(children))\n const [hasPopover, setHasPopover] = useState<boolean>(\n hasChildComponent(children, 'Dropdown.Popover')\n )\n const [lastInteractionType, setLastInteractionType] = useState<'mouse' | 'keyboard'>('mouse')\n\n const field = useFormFieldControl()\n\n const state = field.state || stateProp\n\n const internalFieldLabelID = `${ID_PREFIX}-label-${useId()}`\n const internalFieldID = `${ID_PREFIX}-input-${useId()}`\n const id = field.id || internalFieldID\n const labelId = field.labelId || internalFieldLabelID\n\n const disabled = field.disabled ?? disabledProp\n const readOnly = field.readOnly ?? readOnlyProp\n\n const dropdownState = useDropdown({\n itemsMap,\n defaultValue,\n value,\n onValueChange,\n open,\n onOpenChange,\n defaultOpen,\n multiple,\n id,\n labelId,\n })\n\n /**\n * Indices in a Map are set when an element is added to the Map.\n * If for some reason, in the Dropdown:\n * - items order changes\n * - items are added\n * - items are removed\n *\n * The Map must be rebuilt from the new children in order to preserve logical indices.\n *\n * Downshift is heavily indices based for keyboard navigation, so it it important.\n */\n useEffect(() => {\n const newMap = getItemsFromChildren(children)\n\n const previousItems = [...itemsMap.values()]\n const newItems = [...newMap.values()]\n\n const hasItemsChanges =\n previousItems.length !== newItems.length ||\n previousItems.some((item, index) => {\n const hasUpdatedValue = item.value !== newItems[index]?.value\n const hasUpdatedText = item.text !== newItems[index]?.text\n\n return hasUpdatedValue || hasUpdatedText\n })\n\n if (hasItemsChanges) {\n setItemsMap(newMap)\n }\n }, [children])\n\n /**\n * Warning:\n * Downshift is expecting the items list to always be rendered, as per a11y guidelines.\n * This is why the `Popover` is always opened in this component, but visually hidden instead from Dropdown.Popover.\n */\n const [WrapperComponent, wrapperProps] = hasPopover ? [Popover, { open: true }] : [Fragment, {}]\n\n return (\n <DropdownContext.Provider\n value={{\n multiple,\n disabled,\n readOnly,\n ...dropdownState,\n itemsMap,\n highlightedItem: getElementByIndex(itemsMap, dropdownState.highlightedIndex),\n hasPopover,\n setHasPopover,\n state,\n lastInteractionType,\n setLastInteractionType,\n }}\n >\n <WrapperComponent {...wrapperProps}>{children}</WrapperComponent>\n </DropdownContext.Provider>\n )\n}\n\nexport const useDropdownContext = () => {\n const context = useContext(DropdownContext)\n\n if (!context) {\n throw Error('useDropdownContext must be used within a Dropdown provider')\n }\n\n return context\n}\n","import { useMultipleSelection, useSelect, UseSelectProps } from 'downshift'\n\nimport { type DropdownItem, type ItemsMap } from './types'\n\ntype OnChangeValueType = string & string[]\n\nexport interface DownshiftProps {\n itemsMap: ItemsMap\n value: string | string[] | undefined\n defaultValue: string | string[] | undefined\n onValueChange: ((value: string) => void) | ((value: string[]) => void) | undefined\n open: boolean | undefined\n onOpenChange: ((isOpen: boolean) => void) | undefined\n defaultOpen: boolean | undefined\n multiple: boolean | undefined\n id: string\n labelId: string\n}\n\n/**\n * This hook abstract the complexity of using downshift with both single and multiple selection.\n */\nexport const useDropdown = ({\n itemsMap,\n defaultValue,\n value,\n onValueChange,\n open,\n onOpenChange,\n defaultOpen,\n multiple,\n id,\n labelId,\n}: DownshiftProps) => {\n const items = [...itemsMap.values()]\n\n const downshiftMultipleSelection = useMultipleSelection<DropdownItem>({\n selectedItems:\n value != null && multiple\n ? items.filter(item =>\n multiple ? (value as string[]).includes(item.value) : value === item.value\n )\n : undefined,\n initialSelectedItems:\n defaultValue != null && multiple\n ? items.filter(item =>\n multiple ? (defaultValue as string[]).includes(item.value) : defaultValue === item.value\n )\n : undefined,\n\n onSelectedItemsChange: ({ selectedItems }) => {\n if (selectedItems != null && multiple) {\n onValueChange?.(selectedItems.map(item => item.value) as OnChangeValueType)\n }\n },\n })\n\n /**\n * Custom state reducer for multiple selection behaviour:\n * - keeps the component opened when the user selects an item\n * - preserves the higlighted index when the user select an item\n * - selected items can be unselected, even the last selected item (as opposed to single selection behaviour)\n */\n const stateReducer: UseSelectProps<DropdownItem>['stateReducer'] = (state, { changes, type }) => {\n if (!multiple) return changes\n\n const { selectedItems, removeSelectedItem, addSelectedItem } = downshiftMultipleSelection\n\n // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check\n switch (type) {\n case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n case useSelect.stateChangeTypes.ItemClick:\n if (changes.selectedItem != null) {\n const isAlreadySelected = selectedItems.some(\n selectedItem => selectedItem.value === changes.selectedItem?.value\n )\n\n if (isAlreadySelected) removeSelectedItem(changes.selectedItem)\n else addSelectedItem(changes.selectedItem)\n }\n\n return {\n ...changes,\n isOpen: true, // keep the menu open after selection.\n highlightedIndex: state.highlightedIndex, // preserve highlighted index position\n }\n default:\n return changes\n }\n }\n\n const downshift = useSelect<DropdownItem>({\n items,\n isItemDisabled: item => item.disabled,\n itemToString: item => (item ? item.text : ''),\n // a11y attributes\n id,\n labelId,\n // Controlled open state\n isOpen: open, // undefined must be passed for stateful behaviour (uncontrolled)\n onIsOpenChange: ({ isOpen }) => {\n if (isOpen != null) onOpenChange?.(isOpen)\n },\n initialIsOpen: defaultOpen ?? false,\n stateReducer,\n // Controlled mode (single selection)\n selectedItem: value != null && !multiple ? itemsMap.get(value as string) || null : undefined,\n initialSelectedItem:\n (defaultValue != null || value != null) && !multiple\n ? itemsMap.get(defaultValue as string) || null\n : undefined,\n onSelectedItemChange: ({ selectedItem }) => {\n if (selectedItem?.value != null && !multiple) {\n onValueChange?.(selectedItem?.value as OnChangeValueType)\n }\n },\n /**\n * 1. Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.\n */\n scrollIntoView: node => {\n if (node) {\n node.scrollIntoView({ block: 'nearest' })\n }\n\n return undefined\n },\n })\n\n return {\n ...downshift,\n ...downshiftMultipleSelection,\n /** There is a Downshift bug in React 19, it duplicates some selectedItems */\n selectedItems: [...new Set(downshiftMultipleSelection.selectedItems)],\n }\n}\n","import { type FC, isValidElement, type ReactElement, type ReactNode, Children } from 'react'\n\nimport { type ItemProps } from './DropdownItem'\nimport { ItemTextProps } from './DropdownItemText'\nimport { type DropdownItem, type ItemsMap } from './types'\n\nexport function getIndexByKey(map: ItemsMap, targetKey: string) {\n let index = 0\n for (const [key] of map.entries()) {\n if (key === targetKey) {\n return index\n }\n index++\n }\n\n return -1\n}\n\nconst getKeyAtIndex = (map: ItemsMap, index: number) => {\n let i = 0\n for (const key of map.keys()) {\n if (i === index) return key\n i++\n }\n\n return undefined\n}\n\nexport const getElementByIndex = (map: ItemsMap, index: number) => {\n const key = getKeyAtIndex(map, index)\n\n return key !== undefined ? map.get(key) : undefined\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nexport const getOrderedItems = (\n children: ReactNode,\n result: DropdownItem[] = []\n): DropdownItem[] => {\n Children.forEach(children, child => {\n if (!isValidElement(child)) return\n\n if (getElementDisplayName(child) === 'Dropdown.Item') {\n const childProps = child.props as ItemProps\n result.push({\n value: childProps.value,\n disabled: !!childProps.disabled,\n text: getItemText(childProps.children),\n })\n }\n\n if ((child.props as { children: ReactNode }).children) {\n getOrderedItems((child.props as { children: ReactNode }).children, result)\n }\n })\n\n return result\n}\n\n/**\n * If Dropdown.Item children:\n * - is a string, then the string is used.\n * - is JSX markup, then we look for Dropdown.ItemText to get its string value.\n */\nexport const getItemText = (children: ReactNode, itemText = ''): string => {\n if (typeof children === 'string') {\n return children\n }\n\n Children.forEach(children, child => {\n if (!isValidElement(child)) return\n\n if (getElementDisplayName(child) === 'Dropdown.ItemText') {\n itemText = (child.props as ItemTextProps).children\n }\n\n if ((child.props as { children: ReactNode }).children) {\n getItemText((child.props as { children: ReactNode }).children, itemText)\n }\n })\n\n return itemText\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n const newMap: ItemsMap = new Map()\n\n getOrderedItems(children).forEach(itemData => {\n newMap.set(itemData.value, itemData)\n })\n\n return newMap\n}\n\nexport const hasChildComponent = (children: ReactNode, displayName: string): boolean => {\n return Children.toArray(children).some(child => {\n if (!isValidElement(child)) return false\n\n if (getElementDisplayName(child) === displayName) {\n return true\n } else if ((child.props as { children: ReactNode }).children) {\n return hasChildComponent((child.props as { children: ReactNode }).children, displayName)\n }\n\n return false\n })\n}\n","import { type DropdownContextProps, DropdownProvider } from './DropdownContext'\n\nexport type DropdownProps = DropdownContextProps\n\nexport const Dropdown = ({ children, ...props }: DropdownProps) => {\n return <DropdownProvider {...props}>{children}</DropdownProvider>\n}\n\nDropdown.displayName = 'Dropdown'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\ninterface DividerProps {\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Divider = ({ className, ref: forwardedRef }: DividerProps) => {\n return <div ref={forwardedRef} className={cx('my-md border-b-sm border-outline', className)} />\n}\n\nDivider.displayName = 'Dropdown.Divider'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { DropdownGroupProvider, useDropdownGroupContext } from './DropdownItemsGroupContext'\n\ninterface GroupProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n return (\n <DropdownGroupProvider>\n <GroupContent ref={forwardedRef} {...props}>\n {children}\n </GroupContent>\n </DropdownGroupProvider>\n )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n const { labelId } = useDropdownGroupContext()\n\n return (\n <div ref={forwardedRef} role=\"group\" aria-labelledby={labelId} className={cx(className)}>\n {children}\n </div>\n )\n}\n\nGroup.displayName = 'Dropdown.Group'\n","import { createContext, type PropsWithChildren, useContext, useId } from 'react'\n\nimport { ID_PREFIX } from './DropdownContext'\n\nexport interface DropdownContextState {\n labelId: string\n}\n\ntype DropdownContextProps = PropsWithChildren\n\nconst DropdownGroupContext = createContext<DropdownContextState | null>(null)\n\nexport const DropdownGroupProvider = ({ children }: DropdownContextProps) => {\n const labelId = `${ID_PREFIX}-group-label-${useId()}`\n\n return (\n <DropdownGroupContext.Provider value={{ labelId }}>{children}</DropdownGroupContext.Provider>\n )\n}\n\nexport const useDropdownGroupContext = () => {\n const context = useContext(DropdownGroupContext)\n\n if (!context) {\n throw Error('useDropdownGroupContext must be used within a DropdownGroup provider')\n }\n\n return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cva, cx } from 'class-variance-authority'\nimport { type HTMLAttributes, type ReactNode, Ref } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\nimport { DropdownItemProvider, useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemProps extends HTMLAttributes<HTMLLIElement> {\n disabled?: boolean\n value: string\n children: ReactNode\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ children, ref: forwardedRef, ...props }: ItemProps) => {\n const { value, disabled } = props\n\n return (\n <DropdownItemProvider value={value} disabled={disabled}>\n <ItemContent ref={forwardedRef} {...props}>\n {children}\n </ItemContent>\n </DropdownItemProvider>\n )\n}\n\nconst styles = cva('px-lg py-md text-body-1', {\n variants: {\n selected: {\n true: 'font-bold',\n },\n disabled: {\n true: 'opacity-dim-3 cursor-not-allowed',\n false: 'cursor-pointer',\n },\n highlighted: {\n true: '',\n },\n interactionType: {\n mouse: '',\n keyboard: '',\n },\n },\n compoundVariants: [\n {\n highlighted: true,\n interactionType: 'mouse',\n class: 'bg-surface-hovered',\n },\n {\n highlighted: true,\n interactionType: 'keyboard',\n class: 'u-outline',\n },\n ],\n})\n\nconst ItemContent = ({\n className,\n disabled = false,\n value,\n children,\n ref: forwardedRef,\n}: ItemProps) => {\n const { getItemProps, highlightedItem, lastInteractionType } = useDropdownContext()\n const { textId, index, itemData, isSelected } = useDropdownItemContext()\n\n const isHighlighted = highlightedItem?.value === value\n\n const { ref: downshiftRef, ...downshiftItemProps } = getItemProps({ item: itemData, index })\n const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n return (\n <li\n ref={ref}\n className={cx(\n styles({\n selected: isSelected,\n disabled,\n highlighted: isHighlighted,\n interactionType: lastInteractionType,\n className,\n })\n )}\n key={value}\n {...downshiftItemProps}\n aria-selected={isSelected}\n aria-labelledby={textId}\n >\n {children}\n </li>\n )\n}\n\nItem.displayName = 'Dropdown.Item'\n","import {\n createContext,\n Dispatch,\n type PropsWithChildren,\n SetStateAction,\n useContext,\n useState,\n} from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\nimport { DropdownItem } from './types'\nimport { getIndexByKey, getItemText } from './utils'\n\ntype ItemTextId = string | undefined\n\ninterface DropdownItemContextState {\n textId: ItemTextId\n setTextId: Dispatch<SetStateAction<ItemTextId>>\n isSelected: boolean\n itemData: DropdownItem\n index: number\n disabled: boolean\n}\n\nconst DropdownItemContext = createContext<DropdownItemContextState | null>(null)\n\nexport const DropdownItemProvider = ({\n value,\n disabled = false,\n children,\n}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {\n const { multiple, itemsMap, selectedItem, selectedItems } = useDropdownContext()\n\n const [textId, setTextId] = useState<ItemTextId>(undefined)\n\n const index = getIndexByKey(itemsMap, value)\n const itemData: DropdownItem = { disabled, value, text: getItemText(children) }\n\n const isSelected = multiple\n ? selectedItems.some(selectedItem => selectedItem.value === value)\n : selectedItem?.value === value\n\n return (\n <DropdownItemContext.Provider\n value={{ textId, setTextId, isSelected, itemData, index, disabled }}\n >\n {children}\n </DropdownItemContext.Provider>\n )\n}\n\nexport const useDropdownItemContext = () => {\n const context = useContext(DropdownItemContext)\n\n if (!context) {\n throw Error('useDropdownItemContext must be used within a DropdownItem provider')\n }\n\n return context\n}\n","import { Check } from '@spark-ui/icons/Check'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemIndicatorProps {\n children?: ReactNode\n className?: string\n label?: string\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemIndicator = ({\n className,\n children,\n label,\n ref: forwardedRef,\n}: ItemIndicatorProps) => {\n const { disabled, isSelected } = useDropdownItemContext()\n\n const childElement = children || (\n <Icon size=\"sm\">\n <Check aria-label={label} />\n </Icon>\n )\n\n return (\n <span\n ref={forwardedRef}\n className={cx('min-h-sz-16 min-w-sz-16 flex', disabled && 'opacity-dim-3', className)}\n >\n {isSelected && childElement}\n </span>\n )\n}\n\nItemIndicator.displayName = 'Dropdown.ItemIndicator'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { ReactNode, Ref, useLayoutEffect, useRef } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\n\ninterface ItemsProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLUListElement>\n}\n\n/**\n * BUGFIX\n *\n * 1. The !pointer-events-auto class is needed to prevent a bug\n * which cannot be reproduced when running Storybook locally,\n * in scenarios such as when a Dropdown is nested within a Dialog,\n * the \"props\" object, containing styles computed by Radix\n * may erroneously contain \"pointerEvents = 'none'\", while the Dropdown is open,\n * making it impossible to select a value using a pointer device\n */\n\nexport const Items = ({ children, className, ref: forwardedRef, ...props }: ItemsProps) => {\n const { isOpen, getMenuProps, hasPopover, setLastInteractionType } = useDropdownContext()\n\n const { ref: downshiftRef, ...downshiftMenuProps } = getMenuProps({\n onMouseMove: () => {\n setLastInteractionType('mouse')\n },\n })\n\n const innerRef = useRef<HTMLElement>(null)\n\n const ref = useMergeRefs(forwardedRef, downshiftRef, innerRef)\n\n useLayoutEffect(() => {\n if (!hasPopover) return\n if (!innerRef.current) return\n\n if (innerRef.current.parentElement) {\n innerRef.current.parentElement.style.pointerEvents = isOpen ? '' : 'none'\n innerRef.current.style.pointerEvents = isOpen ? '' : 'none'\n }\n }, [isOpen, hasPopover])\n\n return (\n <ul\n ref={ref}\n className={cx(\n className,\n 'flex flex-col',\n isOpen\n ? 'pointer-events-auto! block' /* 1 */\n : 'pointer-events-none invisible absolute opacity-0',\n hasPopover && 'p-lg'\n )}\n {...props}\n {...downshiftMenuProps}\n /**\n * When used inside a Radix dialog/drawer, the focus trap behaviour of Radix prevent scrolling and hovering inside absolutely positioned elements in the dialog.\n * It does programatically in JS using the `style` attribute.\n *\n * Issue is known but there is no clear fix in sight: https://github.com/radix-ui/primitives/issues/1159\n *\n * A solution would be to make an abstraction of `Dialog.Overlay` instead of using the radix one, but that would mean managing body scroll freeze and scrollbar shifting ourselves.\n *\n */\n data-spark-component=\"dropdown-items\"\n >\n {children}\n </ul>\n )\n}\n\nItems.displayName = 'Dropdown.Items'\n","import { cx } from 'class-variance-authority'\nimport { Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX } from './DropdownContext'\nimport { useDropdownItemContext } from './DropdownItemContext'\n\nexport interface ItemTextProps {\n children: string\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const ItemText = ({ children, ref: forwardedRef }: ItemTextProps) => {\n const id = `${ID_PREFIX}-item-text-${useId()}`\n\n const { setTextId } = useDropdownItemContext()\n\n useEffect(() => {\n setTextId(id)\n\n return () => setTextId(undefined)\n })\n\n return (\n <span id={id} className={cx('inline')} ref={forwardedRef}>\n {children}\n </span>\n )\n}\n\nItemText.displayName = 'Dropdown.ItemText'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { useDropdownGroupContext } from './DropdownItemsGroupContext'\n\ninterface LabelProps {\n children: string\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Label = ({ children, className, ref: forwardedRef }: LabelProps) => {\n const { labelId } = useDropdownGroupContext()\n\n return (\n <div\n ref={forwardedRef}\n id={labelId}\n className={cx('px-md py-sm text-body-2 text-neutral italic', className)}\n >\n {children}\n </div>\n )\n}\n\nLabel.displayName = 'Dropdown.Label'\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n return (\n <Icon size={'sm'} className=\"shrink-0\">\n {children}\n </Icon>\n )\n}\n\nLeadingIcon.displayName = 'Dropdown.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentProps, useEffect } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\nimport { useDropdownContext } from './DropdownContext'\n\nexport const Popover = ({\n children,\n matchTriggerWidth = true,\n sideOffset = 4,\n className,\n elevation = 'dropdown',\n ref: forwardedRef,\n ...props\n}: ComponentProps<typeof SparkPopover.Content>) => {\n const ctx = useDropdownContext()\n\n useEffect(() => {\n ctx.setHasPopover(true)\n\n return () => ctx.setHasPopover(false)\n }, [])\n\n return (\n <SparkPopover.Content\n ref={forwardedRef}\n inset\n asChild\n matchTriggerWidth={matchTriggerWidth}\n elevation={elevation}\n className={cx('relative', className)}\n sideOffset={sideOffset}\n onOpenAutoFocus={e => {\n /**\n * With a combobox pattern, the focus should remain on the trigger at all times.\n * Passing the focus to the dropdown popover would break keyboard navigation.\n */\n e.preventDefault()\n }}\n {...props}\n data-spark-component=\"dropdown-popover\"\n >\n {children}\n </SparkPopover.Content>\n )\n}\n\nPopover.displayName = 'Dropdown.Popover'\n","import { ReactElement } from 'react'\n\nimport { Popover as SparkPopover } from '../popover'\n\nexport const Portal: typeof SparkPopover.Portal = ({ children, ...rest }): ReactElement => (\n <SparkPopover.Portal {...rest}>{children}</SparkPopover.Portal>\n)\n\nPortal.displayName = 'Dropdown.Portal'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { Fragment, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Popover } from '../popover'\nimport { VisuallyHidden } from '../visually-hidden'\nimport { useDropdownContext } from './DropdownContext'\nimport { styles } from './DropdownTrigger.styles'\n\ninterface TriggerProps {\n 'aria-label'?: string\n children: ReactNode\n className?: string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({\n 'aria-label': ariaLabel,\n children,\n className,\n ref: forwardedRef,\n}: TriggerProps) => {\n const {\n getToggleButtonProps,\n getDropdownProps,\n getLabelProps,\n hasPopover,\n disabled,\n readOnly,\n state,\n setLastInteractionType,\n } = useDropdownContext()\n\n const [WrapperComponent, wrapperProps] = hasPopover\n ? [Popover.Trigger, { asChild: true }]\n : [Fragment, {}]\n\n const { ref: downshiftRef, ...downshiftTriggerProps } = getToggleButtonProps({\n ...getDropdownProps(),\n onKeyDown: () => {\n setLastInteractionType('keyboard')\n },\n })\n\n const isExpanded = downshiftTriggerProps['aria-expanded']\n\n const ref = useMergeRefs(forwardedRef, downshiftRef)\n\n return (\n <>\n {ariaLabel && (\n <VisuallyHidden>\n <label {...getLabelProps()}>{ariaLabel}</label>\n </VisuallyHidden>\n )}\n <WrapperComponent {...wrapperProps}>\n <button\n type=\"button\"\n ref={ref}\n disabled={disabled || readOnly}\n className={styles({ className, state, disabled, readOnly })}\n {...downshiftTriggerProps}\n data-spark-component=\"dropdown-trigger\"\n >\n <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n <Icon\n className={cx('ml-md shrink-0 rotate-0 transition duration-100 ease-in', {\n 'rotate-180': isExpanded,\n })}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </button>\n </WrapperComponent>\n </>\n )\n}\n\nTrigger.displayName = 'Dropdown.Trigger'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'flex w-full items-center justify-between',\n 'min-h-sz-44 rounded-lg bg-surface text-on-surface px-lg',\n 'text-body-1',\n // outline styles\n 'ring-1 outline-hidden ring-inset focus:ring-2',\n ],\n {\n variants: {\n state: {\n undefined: 'ring-outline focus:ring-outline-high',\n error: 'ring-error',\n alert: 'ring-alert',\n success: 'ring-success',\n },\n disabled: {\n true: 'disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3',\n },\n readOnly: {\n true: 'disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3',\n },\n },\n compoundVariants: [\n {\n disabled: false,\n state: undefined,\n class: 'hover:ring-outline-high',\n },\n ],\n }\n)\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { useDropdownContext } from './DropdownContext'\n\nexport interface ValueProps {\n children?: ReactNode\n className?: string\n placeholder: string\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({ children, className, placeholder, ref: forwardedRef }: ValueProps) => {\n const { selectedItem, multiple, selectedItems } = useDropdownContext()\n\n const hasSelectedItems = !!(multiple ? selectedItems.length : selectedItem)\n const text = multiple ? selectedItems[0]?.text : selectedItem?.text\n const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''\n\n return (\n <span ref={forwardedRef} className={cx('flex shrink items-center text-left', className)}>\n <span\n className={cx(\n 'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n !hasSelectedItems && 'text-on-surface/dim-1'\n )}\n >\n {!hasSelectedItems ? placeholder : children || text}\n </span>\n {suffix && <span>{suffix}</span>}\n </span>\n )\n}\n\nValue.displayName = 'Dropdown.Value'\n","import { Dropdown as Root } from './Dropdown'\nimport { DropdownProvider, useDropdownContext } from './DropdownContext'\nimport { Divider } from './DropdownDivider'\nimport { Group } from './DropdownGroup'\nimport { Item } from './DropdownItem'\nimport { ItemIndicator } from './DropdownItemIndicator'\nimport { Items } from './DropdownItems'\nimport { ItemText } from './DropdownItemText'\nimport { Label } from './DropdownLabel'\nimport { LeadingIcon } from './DropdownLeadingIcon'\nimport { Popover } from './DropdownPopover'\nimport { Portal } from './DropdownPortal'\nimport { Trigger } from './DropdownTrigger'\nimport { Value } from './DropdownValue'\n\nexport { useDropdownContext, DropdownProvider }\n\nexport const Dropdown: typeof Root & {\n Group: typeof Group\n Item: typeof Item\n Items: typeof Items\n ItemText: typeof ItemText\n ItemIndicator: typeof ItemIndicator\n Label: typeof Label\n Popover: typeof Popover\n Divider: typeof Divider\n Trigger: typeof Trigger\n Value: typeof Value\n LeadingIcon: typeof LeadingIcon\n Portal: typeof Portal\n} = Object.assign(Root, {\n Group,\n Item,\n Items,\n ItemText,\n ItemIndicator,\n Label,\n Popover,\n Divider,\n Trigger,\n Value,\n LeadingIcon,\n Portal,\n})\n\nDropdown.displayName = 'Dropdown'\nGroup.displayName = 'Dropdown.Group'\nItems.displayName = 'Dropdown.Items'\nItem.displayName = 'Dropdown.Item'\nItemText.displayName = 'Dropdown.ItemText'\nItemIndicator.displayName = 'Dropdown.ItemIndicator'\nLabel.displayName = 'Dropdown.Label'\nPopover.displayName = 'Dropdown.Popover'\nDivider.displayName = 'Dropdown.Divider'\nTrigger.displayName = 'Dropdown.Trigger'\nValue.displayName = 'Dropdown.Value'\nLeadingIcon.displayName = 'Dropdown.LeadingIcon'\nPortal.displayName = 'Dropdown.Portal'\n"],"mappings":"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","names":["jsx","jsx","cx","createContext","useContext","useId","jsx","createContext","useId","useContext","jsx","cx","cx","createContext","useContext","useState","jsx","createContext","useState","selectedItem","useContext","jsx","cx","cx","jsx","cx","useMergeRefs","cx","jsx","useMergeRefs","cx","cx","useEffect","useId","jsx","useId","useEffect","cx","cx","jsx","cx","jsx","cx","useEffect","jsx","Popover","useEffect","cx","jsx","useMergeRefs","cx","Fragment","cva","styles","Fragment","jsx","useMergeRefs","styles","cx","cx","jsx","jsxs","cx","Dropdown","Popover"]}