@vuu-ui/vuu-ui-controls 0.8.44 → 0.8.45

package/cjs/combo-box/ComboBox.js

@@ -19,6 +19,8 @@ var List = require('../list/List.js');
 require('../drag-drop/DragDropProvider.js');
 require('../drag-drop/Draggable.js');
 var cx = require('clsx');
+require('@salt-ds/styles');
+require('@salt-ds/window');
 var ChevronIcon = require('../list/ChevronIcon.js');
 var useCombobox = require('./useCombobox.js');
 

package/cjs/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport { ForwardedRef, forwardRef, ReactElement, useCallback } from \"react\";\nimport {\n  CollectionProvider,\n  ComponentSelectionProps,\n  isMultiSelection,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { DropdownBase, DropdownBaseProps } from \"../dropdown\";\nimport { List, ListProps } from \"../list\";\nimport { ChevronIcon } from \"../list/ChevronIcon\";\nimport { useCombobox } from \"./useCombobox\";\nimport cx from \"clsx\";\n\nconst classBase = \"vuuCombobox\";\n\n//TODO why do we need onSelect from input ?\nexport interface ComboBoxProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends Omit<\n      DropdownBaseProps,\n      \"triggerComponent\" | \"onBlur\" | \"onChange\" | \"onFocus\"\n    >,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Omit<ComponentSelectionProps<Item, S>, \"onSelect\">,\n    Pick<ListProps<Item, S>, \"ListItem\" | \"itemToString\" | \"source\" | \"width\"> {\n  InputProps?: InputProps;\n  ListProps?: Omit<\n    ListProps<Item>,\n    \"ListItem\" | \"itemToString\" | \"source\" | \"onSelect\" | \"onSelectionChange\"\n  >;\n  allowBackspaceClearsSelection?: boolean;\n  allowEnterCommitsText?: boolean;\n  allowFreeText?: boolean;\n  defaultValue?: string;\n  getFilterRegex?: (inputValue: string) => RegExp;\n  initialHighlightedIndex?: number;\n  itemsToString?: (items: Item[]) => string;\n  onDeselect?: () => void;\n  onSetSelectedText?: (text: string) => void;\n  onListItemSelect?: ListProps<Item, S>[\"onSelect\"];\n  disableFilter?: boolean;\n  value?: string;\n}\n\n//TODO does not cutrrently support controlled vallue\n\nexport const ComboBox = forwardRef(function Combobox<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    InputProps: InputPropsProp,\n    ListProps,\n    PopupProps,\n    ListItem,\n    \"aria-label\": ariaLabel,\n    allowBackspaceClearsSelection,\n    allowEnterCommitsText,\n    allowFreeText,\n    children,\n    className,\n    defaultIsOpen,\n    defaultSelected,\n    defaultValue,\n    disabled,\n    disableFilter,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    onSetSelectedText,\n    openOnFocus = true,\n    getFilterRegex,\n    id: idProp,\n    initialHighlightedIndex = -1,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    itemsToString,\n    onDeselect,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    onListItemSelect,\n    selected: selectedProp,\n    selectionKeys,\n    selectionStrategy,\n    source,\n    value: valueProp,\n    width = 180,\n    ...props\n  }: ComboBoxProps<Item, S>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const isMultiSelect = isMultiSelection(selectionStrategy);\n\n  const valueFromSelected = (item: Item | null | Item[]) => {\n    return Array.isArray(item)\n      ? itemsToString?.(item) ?? item[0]\n      : item ?? undefined;\n  };\n\n  const getInitialValue = (\n    items1?: ComboBoxProps<Item, S>[\"selected\"],\n    items2?: ComboBoxProps<Item, S>[\"defaultSelected\"]\n  ) => {\n    const item = items1\n      ? valueFromSelected(items1)\n      : items2\n      ? valueFromSelected(items2)\n      : undefined;\n\n    return typeof item === \"string\" ? item : item ? itemToString(item) : \"\";\n  };\n\n  const initialValue = getInitialValue(selectedProp, defaultSelected);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      disableFilter,\n      filterPattern: isMultiSelect ? undefined : initialValue,\n      getFilterRegex,\n      itemToString,\n    },\n  });\n\n  const {\n    focusVisible,\n    highlightedIndex,\n    InputProps: { endAdornment: endAdornmentProp, ...InputProps },\n    isOpen,\n    listHandlers,\n    listControlProps: controlProps,\n    onOpenChange,\n    selected,\n    setContainerRef,\n  } = useCombobox<Item, S>({\n    InputProps: InputPropsProp,\n    allowEnterCommitsText,\n    allowBackspaceClearsSelection,\n    allowFreeText,\n    ariaLabel,\n    collectionHook,\n    defaultIsOpen,\n    defaultSelected,\n    defaultValue,\n    disabled,\n    initialHighlightedIndex,\n    itemCount: collectionHook.data.length,\n    label: props.title,\n    onBlur,\n    onDeselect,\n    onFocus,\n    onChange,\n    onSelect,\n    id,\n    isOpen: isOpenProp,\n    itemToString,\n    itemsToString,\n    onListItemSelect,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    onSetSelectedText,\n    selected: selectedProp,\n    selectionKeys,\n    selectionStrategy,\n    value: initialValue,\n  });\n\n  const handleDropdownIconClick = useCallback(() => {\n    if (isOpen) {\n      onOpenChange(false, \"toggle\");\n    } else {\n      onOpenChange(true);\n    }\n  }, [isOpen, onOpenChange]);\n\n  const endAdornment =\n    endAdornmentProp === null ? null : (\n      <ChevronIcon\n        direction={isOpen ? \"up\" : \"down\"}\n        onClick={handleDropdownIconClick}\n        role=\"button\"\n      />\n    );\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        PopupProps={PopupProps}\n        className={cx(classBase, className)}\n        id={id}\n        isOpen={isOpen && collectionHook.data.length > 0}\n        onOpenChange={onOpenChange}\n        openOnFocus={openOnFocus}\n        ref={forwardedRef}\n        width={width}\n      >\n        <Input\n          {...InputProps}\n          disabled={disabled}\n          {...controlProps}\n          endAdornment={endAdornment}\n        />\n\n        <List<Item, S>\n          {...ListProps}\n          ListItem={ListItem}\n          defaultSelected={undefined}\n          focusVisible={focusVisible}\n          highlightedIndex={highlightedIndex}\n          itemTextHighlightPattern={String(InputProps.value) || undefined}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange} // not really needed, since onClick in listHandlers will be used instead.\n          ref={setContainerRef}\n          selected={selected}\n          selectionStrategy={selectionStrategy}\n          tabIndex={-1}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, S extends SelectionStrategy = \"default\">(\n  props: ComboBoxProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ComboBoxProps<Item>>;\n"],"names":["forwardRef","ListProps","itemToString","defaultItemToString","useId","isMultiSelection","useCollectionItems","InputProps","useCombobox","useCallback","jsx","ChevronIcon","CollectionProvider","jsxs","DropdownBase","Input","List"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../../src/combo-box/ComboBox.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport { ForwardedRef, forwardRef, ReactElement, useCallback } from \"react\";\nimport {\n  CollectionProvider,\n  ComponentSelectionProps,\n  isMultiSelection,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { DropdownBase, DropdownBaseProps } from \"../dropdown\";\nimport { List, ListProps } from \"../list\";\nimport { ChevronIcon } from \"../list/ChevronIcon\";\nimport { useCombobox } from \"./useCombobox\";\nimport cx from \"clsx\";\n\nconst classBase = \"vuuCombobox\";\n\n//TODO why do we need onSelect from input ?\nexport interface ComboBoxProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends Omit<\n      DropdownBaseProps,\n      \"triggerComponent\" | \"onBlur\" | \"onChange\" | \"onFocus\"\n    >,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Omit<ComponentSelectionProps<Item, S>, \"onSelect\">,\n    Pick<ListProps<Item, S>, \"ListItem\" | \"itemToString\" | \"source\" | \"width\"> {\n  InputProps?: InputProps;\n  ListProps?: Omit<\n    ListProps<Item>,\n    \"ListItem\" | \"itemToString\" | \"source\" | \"onSelect\" | \"onSelectionChange\"\n  >;\n  allowBackspaceClearsSelection?: boolean;\n  allowEnterCommitsText?: boolean;\n  allowFreeText?: boolean;\n  defaultValue?: string;\n  getFilterRegex?: (inputValue: string) => RegExp;\n  initialHighlightedIndex?: number;\n  itemsToString?: (items: Item[]) => string;\n  onDeselect?: () => void;\n  onSetSelectedText?: (text: string) => void;\n  onListItemSelect?: ListProps<Item, S>[\"onSelect\"];\n  disableFilter?: boolean;\n  value?: string;\n}\n\n//TODO does not cutrrently support controlled vallue\n\nexport const ComboBox = forwardRef(function Combobox<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    InputProps: InputPropsProp,\n    ListProps,\n    PopupProps,\n    ListItem,\n    \"aria-label\": ariaLabel,\n    allowBackspaceClearsSelection,\n    allowEnterCommitsText,\n    allowFreeText,\n    children,\n    className,\n    defaultIsOpen,\n    defaultSelected,\n    defaultValue,\n    disabled,\n    disableFilter,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    onSetSelectedText,\n    openOnFocus = true,\n    getFilterRegex,\n    id: idProp,\n    initialHighlightedIndex = -1,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    itemsToString,\n    onDeselect,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    onListItemSelect,\n    selected: selectedProp,\n    selectionKeys,\n    selectionStrategy,\n    source,\n    value: valueProp,\n    width = 180,\n    ...props\n  }: ComboBoxProps<Item, S>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const isMultiSelect = isMultiSelection(selectionStrategy);\n\n  const valueFromSelected = (item: Item | null | Item[]) => {\n    return Array.isArray(item)\n      ? itemsToString?.(item) ?? item[0]\n      : item ?? undefined;\n  };\n\n  const getInitialValue = (\n    items1?: ComboBoxProps<Item, S>[\"selected\"],\n    items2?: ComboBoxProps<Item, S>[\"defaultSelected\"]\n  ) => {\n    const item = items1\n      ? valueFromSelected(items1)\n      : items2\n      ? valueFromSelected(items2)\n      : undefined;\n\n    return typeof item === \"string\" ? item : item ? itemToString(item) : \"\";\n  };\n\n  const initialValue = getInitialValue(selectedProp, defaultSelected);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      disableFilter,\n      filterPattern: isMultiSelect ? undefined : initialValue,\n      getFilterRegex,\n      itemToString,\n    },\n  });\n\n  const {\n    focusVisible,\n    highlightedIndex,\n    InputProps: { endAdornment: endAdornmentProp, ...InputProps },\n    isOpen,\n    listHandlers,\n    listControlProps: controlProps,\n    onOpenChange,\n    selected,\n    setContainerRef,\n  } = useCombobox<Item, S>({\n    InputProps: InputPropsProp,\n    allowEnterCommitsText,\n    allowBackspaceClearsSelection,\n    allowFreeText,\n    ariaLabel,\n    collectionHook,\n    defaultIsOpen,\n    defaultSelected,\n    defaultValue,\n    disabled,\n    initialHighlightedIndex,\n    itemCount: collectionHook.data.length,\n    label: props.title,\n    onBlur,\n    onDeselect,\n    onFocus,\n    onChange,\n    onSelect,\n    id,\n    isOpen: isOpenProp,\n    itemToString,\n    itemsToString,\n    onListItemSelect,\n    onOpenChange: onOpenChangeProp,\n    onSelectionChange,\n    onSetSelectedText,\n    selected: selectedProp,\n    selectionKeys,\n    selectionStrategy,\n    value: initialValue,\n  });\n\n  const handleDropdownIconClick = useCallback(() => {\n    if (isOpen) {\n      onOpenChange(false, \"toggle\");\n    } else {\n      onOpenChange(true);\n    }\n  }, [isOpen, onOpenChange]);\n\n  const endAdornment =\n    endAdornmentProp === null ? null : (\n      <ChevronIcon\n        direction={isOpen ? \"up\" : \"down\"}\n        onClick={handleDropdownIconClick}\n        role=\"button\"\n      />\n    );\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        PopupProps={PopupProps}\n        className={cx(classBase, className)}\n        id={id}\n        isOpen={isOpen && collectionHook.data.length > 0}\n        onOpenChange={onOpenChange}\n        openOnFocus={openOnFocus}\n        ref={forwardedRef}\n        width={width}\n      >\n        <Input\n          {...InputProps}\n          disabled={disabled}\n          {...controlProps}\n          endAdornment={endAdornment}\n        />\n\n        <List<Item, S>\n          {...ListProps}\n          ListItem={ListItem}\n          defaultSelected={undefined}\n          focusVisible={focusVisible}\n          highlightedIndex={highlightedIndex}\n          itemTextHighlightPattern={String(InputProps.value) || undefined}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange} // not really needed, since onClick in listHandlers will be used instead.\n          ref={setContainerRef}\n          selected={selected}\n          selectionStrategy={selectionStrategy}\n          tabIndex={-1}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, S extends SelectionStrategy = \"default\">(\n  props: ComboBoxProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ComboBoxProps<Item>>;\n"],"names":["forwardRef","ListProps","itemToString","defaultItemToString","useId","isMultiSelection","useCollectionItems","InputProps","useCombobox","useCallback","jsx","ChevronIcon","CollectionProvider","jsxs","DropdownBase","Input","List"],"mappings":"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"}

package/cjs/combo-box/useCombobox.js

@@ -14,6 +14,8 @@ require('../list/List.js');
 var useList = require('../list/useList.js');
 require('react/jsx-runtime');
 require('clsx');
+require('@salt-ds/styles');
+require('@salt-ds/window');
 
 const EnterOnly = ["Enter"];
 const useCombobox = ({

package/cjs/combo-box/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { InputProps, useControlled } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEventHandler,\n  MouseEvent,\n  RefCallback,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ComponentSelectionProps,\n  hasSelection,\n  isMultiSelection,\n  itemToString as defaultItemToString,\n  MultiSelectionHandler,\n  MultiSelectionStrategy,\n  SelectionStrategy,\n  SelectionType,\n  SingleSelectionHandler,\n} from \"../common-hooks\";\nimport {\n  DropdownHookProps,\n  DropdownHookResult,\n  OpenChangeHandler,\n} from \"../dropdown\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { ComboBoxProps } from \"./ComboBox\";\n\nconst EnterOnly = [\"Enter\"];\nexport interface ComboboxHookProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Pick<\n      ComboBoxProps<Item>,\n      | \"allowBackspaceClearsSelection\"\n      | \"allowEnterCommitsText\"\n      | \"allowFreeText\"\n      | \"defaultValue\"\n      | \"initialHighlightedIndex\"\n      | \"itemsToString\"\n      | \"onDeselect\"\n      | \"onSetSelectedText\"\n      | \"onListItemSelect\"\n      | \"value\"\n    >,\n    Omit<ComponentSelectionProps<Item, S>, \"onSelect\">,\n    Omit<\n      ListHookProps<Item, S>,\n      \"containerRef\" | \"defaultSelected\" | \"onSelect\" | \"selected\"\n    > {\n  InputProps?: InputProps;\n  ariaLabel?: string;\n  id: string;\n  itemCount: number;\n  itemToString?: (item: Item) => string;\n}\n\nexport interface ComboboxHookResult<Item, S extends SelectionStrategy>\n  extends Pick<\n      ListHookResult<Item>,\n      \"focusVisible\" | \"highlightedIndex\" | \"listControlProps\" | \"listHandlers\"\n    >,\n    Partial<DropdownHookResult> {\n  InputProps: InputProps;\n  onOpenChange: OpenChangeHandler;\n  selected?: S extends MultiSelectionStrategy ? Item[] : Item | null;\n  setContainerRef: RefCallback<HTMLDivElement>;\n}\n\nexport const useCombobox = <Item, S extends SelectionStrategy>({\n  allowBackspaceClearsSelection,\n  allowEnterCommitsText,\n  allowFreeText,\n  ariaLabel,\n  collectionHook,\n  defaultIsOpen,\n  defaultSelected,\n  defaultValue,\n  onBlur,\n  onFocus,\n  onChange,\n  onDeselect,\n  onSelect,\n  id,\n  initialHighlightedIndex = -1,\n  isOpen: isOpenProp,\n  itemCount,\n  itemsToString,\n  itemToString = defaultItemToString as (item: Item) => string,\n  onListItemSelect,\n  onOpenChange,\n  onSelectionChange,\n  onSetSelectedText,\n  selected: selectedProp,\n  selectionKeys = EnterOnly,\n  selectionStrategy,\n  value: valueProp,\n  InputProps = {\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n  },\n}: ComboboxHookProps<Item, S>): ComboboxHookResult<Item, S> => {\n  const isMultiSelect = isMultiSelection(selectionStrategy);\n\n  const noSelection = () => (isMultiSelect ? [] : null);\n\n  const { setFilterPattern } = collectionHook;\n  const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n  const selectedRef = useRef(selectedProp ?? defaultSelected ?? noSelection());\n  // Input select events are used to identify user navigation within the input text.\n  // The initial select event fired on focus is an exception that we ignore.\n  const ignoreSelectOnFocus = useRef(true);\n\n  const [isOpen, _setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const [value, setValue] = useControlled({\n    controlled: undefined,\n    default: defaultValue ?? valueProp,\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n    useState(true);\n\n  const setIsOpen = useCallback(\n    (isOpen: boolean) => {\n      _setIsOpen(isOpen);\n      setDisableAriaActiveDescendant(!isOpen);\n    },\n    [_setIsOpen]\n  );\n\n  const highlightSelectedItem = useCallback((selected) => {\n    if (Array.isArray(selected)) {\n      // TODO multi selection\n    } else if (selected == null) {\n      setHighlightedIndexRef.current?.(-1);\n    }\n  }, []);\n\n  const setTextValue = useCallback(\n    (value: string, applyFilter = true) => {\n      setValue(value);\n      if (applyFilter) {\n        setFilterPattern(value === \"\" ? undefined : value);\n      }\n    },\n    [setFilterPattern, setValue]\n  );\n\n  const reconcileInput = useCallback(\n    (selected?: SelectionType<Item, S>) => {\n      let newValue = allowFreeText ? value ?? \"\" : \"\";\n      if (Array.isArray(selected)) {\n        if (selected.length === 1) {\n          newValue = itemToString(selected[0]);\n        } else if (selected.length > 1) {\n          newValue = itemsToString?.(selected) || \"\";\n        }\n      } else if (selected) {\n        newValue = itemToString(selected as Item);\n      }\n      if (newValue !== value) {\n        setTextValue(newValue, !isMultiSelect);\n        onSetSelectedText?.(newValue);\n        return true;\n      } else {\n        return false;\n      }\n    },\n    [\n      allowFreeText,\n      isMultiSelect,\n      itemToString,\n      itemsToString,\n      onSetSelectedText,\n      setTextValue,\n      value,\n    ]\n  );\n\n  const applySelection = useCallback(() => {\n    const { current: selected } = selectedRef;\n    if (reconcileInput(selected as any)) {\n      if (selected) {\n        // selected ref will be undefined if user has changed nothing\n        if (Array.isArray(selected)) {\n          (onSelectionChange as MultiSelectionHandler<Item>)?.(\n            null,\n            selected as Item[]\n          );\n        } else if (selected) {\n          (onSelectionChange as SingleSelectionHandler<Item>)?.(\n            null,\n            selected as Item\n          );\n        }\n      }\n    }\n  }, [onSelectionChange, reconcileInput]);\n\n  const selectFreeTextInputValue = useCallback(() => {\n    if (allowFreeText) {\n      const text = value?.trim();\n      const { current: selected } = selectedRef;\n      if (text) {\n        if (itemCount === 0 && text) {\n          // TODO should this be a different event ?\n          if (isMultiSelect) {\n            (onSelectionChange as MultiSelectionHandler<string>)?.(null, [\n              text,\n            ]);\n          } else {\n            (onSelectionChange as SingleSelectionHandler<string>)?.(null, text);\n          }\n          selectedRef.current = null;\n          return true;\n        } else if (selected && !isMultiSelect) {\n          if (\n            selected &&\n            !Array.isArray(selected) &&\n            itemToString(selected as Item) === text\n          ) {\n            // it has already been selected, nothing to do\n          }\n        }\n      }\n    }\n    return false;\n  }, [\n    allowFreeText,\n    value,\n    itemCount,\n    isMultiSelect,\n    onSelectionChange,\n    itemToString,\n  ]);\n\n  const handleOpenChange = useCallback<OpenChangeHandler>(\n    (open, closeReason) => {\n      if (open && isMultiSelect) {\n        setTextValue(\"\", false);\n      }\n      setIsOpen(open);\n      onOpenChange?.(open, closeReason);\n      if (!open && closeReason !== \"Escape\") {\n        if (!selectFreeTextInputValue()) {\n          applySelection();\n        }\n      }\n    },\n    [\n      applySelection,\n      isMultiSelect,\n      onOpenChange,\n      selectFreeTextInputValue,\n      setIsOpen,\n      setTextValue,\n    ]\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt, selected) => {\n      selectedRef.current = selected;\n      if (!isMultiSelect) {\n        handleOpenChange(false, \"select\");\n      }\n    },\n    [handleOpenChange, isMultiSelect]\n  );\n\n  const {\n    focusVisible,\n    setHighlightedIndex,\n    highlightedIndex,\n    listControlProps,\n    listHandlers: listHookListHandlers,\n    selected,\n    setContainerRef,\n  } = useList<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex: initialHighlightedIndex,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    disableAriaActiveDescendant,\n    disableHighlightOnFocus: true,\n    disableTypeToSelect: true,\n    label: \"combobox\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: onListItemSelect,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionKeys,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  setHighlightedIndexRef.current = setHighlightedIndex;\n\n  const { onClick: listHandlersOnClick } = listHookListHandlers;\n  const handleListClick = useCallback(\n    (evt: MouseEvent) => {\n      document.getElementById(`${id}-input`)?.focus();\n      listHandlersOnClick?.(evt);\n    },\n    [id, listHandlersOnClick]\n  );\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const newValue = evt.target.value;\n      setValue(newValue);\n\n      if (newValue && newValue.trim().length) {\n        setFilterPattern(newValue);\n      } else {\n        setFilterPattern(undefined);\n        //        onSelectionChange?.(evt, []);\n      }\n\n      setIsOpen(true);\n    },\n    [setFilterPattern, setIsOpen, setValue]\n  );\n\n  const handleInputKeyDown = useCallback<\n    KeyboardEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      if (\n        e.key === \"Enter\" &&\n        value !== undefined &&\n        value !== \"\" &&\n        // TODO this whole allowEnterCommitsText isquestionable\n        allowEnterCommitsText\n      ) {\n        setIsOpen(false);\n      }\n\n      InputProps.inputProps?.onKeyDown?.(e);\n      if (e.isDefaultPrevented()) {\n        // no more to do;\n      } else if (e.key === \"Backspace\" && allowBackspaceClearsSelection) {\n        selectedRef.current = null;\n        onDeselect?.();\n      }\n    },\n    [\n      InputProps.inputProps,\n      allowBackspaceClearsSelection,\n      allowEnterCommitsText,\n      onDeselect,\n      setIsOpen,\n      value,\n    ]\n  );\n\n  const { onFocus: inputOnFocus = onFocus } = InputProps;\n  const { onFocus: listOnFocus } = listControlProps;\n  const handleInputFocus = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      setDisableAriaActiveDescendant(false);\n      listOnFocus?.(evt);\n      inputOnFocus?.(evt);\n    },\n    [inputOnFocus, listOnFocus]\n  );\n\n  const listFocused = useCallback(\n    (evt: FocusEvent) => {\n      const element = evt.relatedTarget as HTMLElement;\n      return element?.id === `${id}-list`;\n    },\n    [id]\n  );\n\n  const { onBlur: inputOnBlur = onBlur } = InputProps;\n  const { onBlur: listOnBlur } = listControlProps;\n  // TODO do we need this check at all, given that DropdownV=BAse will close dropdown\n  const handleInputBlur = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      if (listFocused(evt)) {\n        // nothing doing\n      } else {\n        listOnBlur?.(evt);\n        inputOnBlur?.(evt);\n        // setDisableAriaActiveDescendant(true);\n        ignoreSelectOnFocus.current = true;\n      }\n    },\n    [listFocused, listOnBlur, inputOnBlur]\n  );\n\n  const { onSelect: inputOnSelect } = InputProps;\n  const handleInputSelect = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      if (ignoreSelectOnFocus.current) {\n        ignoreSelectOnFocus.current = false;\n      } else {\n        // setDisableAriaActiveDescendant(true);\n      }\n      inputOnSelect?.(event);\n    },\n    [inputOnSelect]\n  );\n\n  // If we have selected item(s) and we filter down the list by typing,\n  // the position of selected items within the list may be changing.\n  // Relocate highlighted index to the selection whenever this happens,\n  // so if we resume keyboard navigation, navigation begins from the selected\n  // item.\n  useLayoutEffectSkipFirst(() => {\n    if (hasSelection(selected)) {\n      highlightSelectedItem(selected);\n    } else {\n      setHighlightedIndex(initialHighlightedIndex);\n    }\n  }, [\n    highlightSelectedItem,\n    itemCount,\n    initialHighlightedIndex,\n    selected,\n    setHighlightedIndex,\n    setIsOpen,\n  ]);\n\n  const mergedInputProps = {\n    ...InputProps.inputProps,\n    \"aria-label\": ariaLabel,\n    autoComplete: \"off\",\n    onKeyDown: handleInputKeyDown,\n  };\n\n  return {\n    focusVisible,\n    highlightedIndex,\n    isOpen,\n    onOpenChange: handleOpenChange,\n    InputProps: {\n      ...InputProps,\n      // \"aria-activedescendant\": activeDescendant,\n      id: `${id}-input`,\n      inputProps: mergedInputProps,\n      onChange: handleInputChange,\n      onSelect: handleInputSelect,\n      role: \"combobox\",\n      value,\n    },\n    listControlProps: {\n      ...listControlProps,\n      onBlur: handleInputBlur,\n      onFocus: handleInputFocus,\n    },\n    listHandlers: {\n      ...listHookListHandlers,\n      onClick: handleListClick,\n    },\n    selected: selectedRef.current as SelectionType<Item, S>,\n    setContainerRef,\n  };\n};\n"],"names":["itemToString","defaultItemToString","InputProps","isMultiSelection","useRef","useControlled","useState","useCallback","isOpen","selected","value","useList","useLayoutEffectSkipFirst","hasSelection"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../../src/combo-box/useCombobox.ts"],"sourcesContent":["import { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { InputProps, useControlled } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEventHandler,\n  MouseEvent,\n  RefCallback,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ComponentSelectionProps,\n  hasSelection,\n  isMultiSelection,\n  itemToString as defaultItemToString,\n  MultiSelectionHandler,\n  MultiSelectionStrategy,\n  SelectionStrategy,\n  SelectionType,\n  SingleSelectionHandler,\n} from \"../common-hooks\";\nimport {\n  DropdownHookProps,\n  DropdownHookResult,\n  OpenChangeHandler,\n} from \"../dropdown\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { ComboBoxProps } from \"./ComboBox\";\n\nconst EnterOnly = [\"Enter\"];\nexport interface ComboboxHookProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends Partial<Omit<DropdownHookProps, \"id\" | \"onKeyDown\">>,\n    Pick<InputProps, \"onBlur\" | \"onChange\" | \"onFocus\" | \"onSelect\">,\n    Pick<\n      ComboBoxProps<Item>,\n      | \"allowBackspaceClearsSelection\"\n      | \"allowEnterCommitsText\"\n      | \"allowFreeText\"\n      | \"defaultValue\"\n      | \"initialHighlightedIndex\"\n      | \"itemsToString\"\n      | \"onDeselect\"\n      | \"onSetSelectedText\"\n      | \"onListItemSelect\"\n      | \"value\"\n    >,\n    Omit<ComponentSelectionProps<Item, S>, \"onSelect\">,\n    Omit<\n      ListHookProps<Item, S>,\n      \"containerRef\" | \"defaultSelected\" | \"onSelect\" | \"selected\"\n    > {\n  InputProps?: InputProps;\n  ariaLabel?: string;\n  id: string;\n  itemCount: number;\n  itemToString?: (item: Item) => string;\n}\n\nexport interface ComboboxHookResult<Item, S extends SelectionStrategy>\n  extends Pick<\n      ListHookResult<Item>,\n      \"focusVisible\" | \"highlightedIndex\" | \"listControlProps\" | \"listHandlers\"\n    >,\n    Partial<DropdownHookResult> {\n  InputProps: InputProps;\n  onOpenChange: OpenChangeHandler;\n  selected?: S extends MultiSelectionStrategy ? Item[] : Item | null;\n  setContainerRef: RefCallback<HTMLDivElement>;\n}\n\nexport const useCombobox = <Item, S extends SelectionStrategy>({\n  allowBackspaceClearsSelection,\n  allowEnterCommitsText,\n  allowFreeText,\n  ariaLabel,\n  collectionHook,\n  defaultIsOpen,\n  defaultSelected,\n  defaultValue,\n  onBlur,\n  onFocus,\n  onChange,\n  onDeselect,\n  onSelect,\n  id,\n  initialHighlightedIndex = -1,\n  isOpen: isOpenProp,\n  itemCount,\n  itemsToString,\n  itemToString = defaultItemToString as (item: Item) => string,\n  onListItemSelect,\n  onOpenChange,\n  onSelectionChange,\n  onSetSelectedText,\n  selected: selectedProp,\n  selectionKeys = EnterOnly,\n  selectionStrategy,\n  value: valueProp,\n  InputProps = {\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n  },\n}: ComboboxHookProps<Item, S>): ComboboxHookResult<Item, S> => {\n  const isMultiSelect = isMultiSelection(selectionStrategy);\n\n  const noSelection = () => (isMultiSelect ? [] : null);\n\n  const { setFilterPattern } = collectionHook;\n  const setHighlightedIndexRef = useRef<null | ((i: number) => void)>(null);\n  const selectedRef = useRef(selectedProp ?? defaultSelected ?? noSelection());\n  // Input select events are used to identify user navigation within the input text.\n  // The initial select event fired on focus is an exception that we ignore.\n  const ignoreSelectOnFocus = useRef(true);\n\n  const [isOpen, _setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const [value, setValue] = useControlled({\n    controlled: undefined,\n    default: defaultValue ?? valueProp,\n    name: \"ComboBox\",\n    state: \"value\",\n  });\n\n  const [disableAriaActiveDescendant, setDisableAriaActiveDescendant] =\n    useState(true);\n\n  const setIsOpen = useCallback(\n    (isOpen: boolean) => {\n      _setIsOpen(isOpen);\n      setDisableAriaActiveDescendant(!isOpen);\n    },\n    [_setIsOpen]\n  );\n\n  const highlightSelectedItem = useCallback((selected) => {\n    if (Array.isArray(selected)) {\n      // TODO multi selection\n    } else if (selected == null) {\n      setHighlightedIndexRef.current?.(-1);\n    }\n  }, []);\n\n  const setTextValue = useCallback(\n    (value: string, applyFilter = true) => {\n      setValue(value);\n      if (applyFilter) {\n        setFilterPattern(value === \"\" ? undefined : value);\n      }\n    },\n    [setFilterPattern, setValue]\n  );\n\n  const reconcileInput = useCallback(\n    (selected?: SelectionType<Item, S>) => {\n      let newValue = allowFreeText ? value ?? \"\" : \"\";\n      if (Array.isArray(selected)) {\n        if (selected.length === 1) {\n          newValue = itemToString(selected[0]);\n        } else if (selected.length > 1) {\n          newValue = itemsToString?.(selected) || \"\";\n        }\n      } else if (selected) {\n        newValue = itemToString(selected as Item);\n      }\n      if (newValue !== value) {\n        setTextValue(newValue, !isMultiSelect);\n        onSetSelectedText?.(newValue);\n        return true;\n      } else {\n        return false;\n      }\n    },\n    [\n      allowFreeText,\n      isMultiSelect,\n      itemToString,\n      itemsToString,\n      onSetSelectedText,\n      setTextValue,\n      value,\n    ]\n  );\n\n  const applySelection = useCallback(() => {\n    const { current: selected } = selectedRef;\n    if (reconcileInput(selected as any)) {\n      if (selected) {\n        // selected ref will be undefined if user has changed nothing\n        if (Array.isArray(selected)) {\n          (onSelectionChange as MultiSelectionHandler<Item>)?.(\n            null,\n            selected as Item[]\n          );\n        } else if (selected) {\n          (onSelectionChange as SingleSelectionHandler<Item>)?.(\n            null,\n            selected as Item\n          );\n        }\n      }\n    }\n  }, [onSelectionChange, reconcileInput]);\n\n  const selectFreeTextInputValue = useCallback(() => {\n    if (allowFreeText) {\n      const text = value?.trim();\n      const { current: selected } = selectedRef;\n      if (text) {\n        if (itemCount === 0 && text) {\n          // TODO should this be a different event ?\n          if (isMultiSelect) {\n            (onSelectionChange as MultiSelectionHandler<string>)?.(null, [\n              text,\n            ]);\n          } else {\n            (onSelectionChange as SingleSelectionHandler<string>)?.(null, text);\n          }\n          selectedRef.current = null;\n          return true;\n        } else if (selected && !isMultiSelect) {\n          if (\n            selected &&\n            !Array.isArray(selected) &&\n            itemToString(selected as Item) === text\n          ) {\n            // it has already been selected, nothing to do\n          }\n        }\n      }\n    }\n    return false;\n  }, [\n    allowFreeText,\n    value,\n    itemCount,\n    isMultiSelect,\n    onSelectionChange,\n    itemToString,\n  ]);\n\n  const handleOpenChange = useCallback<OpenChangeHandler>(\n    (open, closeReason) => {\n      if (open && isMultiSelect) {\n        setTextValue(\"\", false);\n      }\n      setIsOpen(open);\n      onOpenChange?.(open, closeReason);\n      if (!open && closeReason !== \"Escape\") {\n        if (!selectFreeTextInputValue()) {\n          applySelection();\n        }\n      }\n    },\n    [\n      applySelection,\n      isMultiSelect,\n      onOpenChange,\n      selectFreeTextInputValue,\n      setIsOpen,\n      setTextValue,\n    ]\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt, selected) => {\n      selectedRef.current = selected;\n      if (!isMultiSelect) {\n        handleOpenChange(false, \"select\");\n      }\n    },\n    [handleOpenChange, isMultiSelect]\n  );\n\n  const {\n    focusVisible,\n    setHighlightedIndex,\n    highlightedIndex,\n    listControlProps,\n    listHandlers: listHookListHandlers,\n    selected,\n    setContainerRef,\n  } = useList<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex: initialHighlightedIndex,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    disableAriaActiveDescendant,\n    disableHighlightOnFocus: true,\n    disableTypeToSelect: true,\n    label: \"combobox\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: onListItemSelect,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionKeys,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  setHighlightedIndexRef.current = setHighlightedIndex;\n\n  const { onClick: listHandlersOnClick } = listHookListHandlers;\n  const handleListClick = useCallback(\n    (evt: MouseEvent) => {\n      document.getElementById(`${id}-input`)?.focus();\n      listHandlersOnClick?.(evt);\n    },\n    [id, listHandlersOnClick]\n  );\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const newValue = evt.target.value;\n      setValue(newValue);\n\n      if (newValue && newValue.trim().length) {\n        setFilterPattern(newValue);\n      } else {\n        setFilterPattern(undefined);\n        //        onSelectionChange?.(evt, []);\n      }\n\n      setIsOpen(true);\n    },\n    [setFilterPattern, setIsOpen, setValue]\n  );\n\n  const handleInputKeyDown = useCallback<\n    KeyboardEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      if (\n        e.key === \"Enter\" &&\n        value !== undefined &&\n        value !== \"\" &&\n        // TODO this whole allowEnterCommitsText isquestionable\n        allowEnterCommitsText\n      ) {\n        setIsOpen(false);\n      }\n\n      InputProps.inputProps?.onKeyDown?.(e);\n      if (e.isDefaultPrevented()) {\n        // no more to do;\n      } else if (e.key === \"Backspace\" && allowBackspaceClearsSelection) {\n        selectedRef.current = null;\n        onDeselect?.();\n      }\n    },\n    [\n      InputProps.inputProps,\n      allowBackspaceClearsSelection,\n      allowEnterCommitsText,\n      onDeselect,\n      setIsOpen,\n      value,\n    ]\n  );\n\n  const { onFocus: inputOnFocus = onFocus } = InputProps;\n  const { onFocus: listOnFocus } = listControlProps;\n  const handleInputFocus = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      setDisableAriaActiveDescendant(false);\n      listOnFocus?.(evt);\n      inputOnFocus?.(evt);\n    },\n    [inputOnFocus, listOnFocus]\n  );\n\n  const listFocused = useCallback(\n    (evt: FocusEvent) => {\n      const element = evt.relatedTarget as HTMLElement;\n      return element?.id === `${id}-list`;\n    },\n    [id]\n  );\n\n  const { onBlur: inputOnBlur = onBlur } = InputProps;\n  const { onBlur: listOnBlur } = listControlProps;\n  // TODO do we need this check at all, given that DropdownV=BAse will close dropdown\n  const handleInputBlur = useCallback(\n    (evt: FocusEvent<HTMLInputElement>) => {\n      if (listFocused(evt)) {\n        // nothing doing\n      } else {\n        listOnBlur?.(evt);\n        inputOnBlur?.(evt);\n        // setDisableAriaActiveDescendant(true);\n        ignoreSelectOnFocus.current = true;\n      }\n    },\n    [listFocused, listOnBlur, inputOnBlur]\n  );\n\n  const { onSelect: inputOnSelect } = InputProps;\n  const handleInputSelect = useCallback(\n    (event: SyntheticEvent<HTMLDivElement>) => {\n      if (ignoreSelectOnFocus.current) {\n        ignoreSelectOnFocus.current = false;\n      } else {\n        // setDisableAriaActiveDescendant(true);\n      }\n      inputOnSelect?.(event);\n    },\n    [inputOnSelect]\n  );\n\n  // If we have selected item(s) and we filter down the list by typing,\n  // the position of selected items within the list may be changing.\n  // Relocate highlighted index to the selection whenever this happens,\n  // so if we resume keyboard navigation, navigation begins from the selected\n  // item.\n  useLayoutEffectSkipFirst(() => {\n    if (hasSelection(selected)) {\n      highlightSelectedItem(selected);\n    } else {\n      setHighlightedIndex(initialHighlightedIndex);\n    }\n  }, [\n    highlightSelectedItem,\n    itemCount,\n    initialHighlightedIndex,\n    selected,\n    setHighlightedIndex,\n    setIsOpen,\n  ]);\n\n  const mergedInputProps = {\n    ...InputProps.inputProps,\n    \"aria-label\": ariaLabel,\n    autoComplete: \"off\",\n    onKeyDown: handleInputKeyDown,\n  };\n\n  return {\n    focusVisible,\n    highlightedIndex,\n    isOpen,\n    onOpenChange: handleOpenChange,\n    InputProps: {\n      ...InputProps,\n      // \"aria-activedescendant\": activeDescendant,\n      id: `${id}-input`,\n      inputProps: mergedInputProps,\n      onChange: handleInputChange,\n      onSelect: handleInputSelect,\n      role: \"combobox\",\n      value,\n    },\n    listControlProps: {\n      ...listControlProps,\n      onBlur: handleInputBlur,\n      onFocus: handleInputFocus,\n    },\n    listHandlers: {\n      ...listHookListHandlers,\n      onClick: handleListClick,\n    },\n    selected: selectedRef.current as SelectionType<Item, S>,\n    setContainerRef,\n  };\n};\n"],"names":["itemToString","defaultItemToString","InputProps","isMultiSelection","useRef","useControlled","useState","useCallback","isOpen","selected","value","useList","useLayoutEffectSkipFirst","hasSelection"],"mappings":"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"}

package/cjs/date-input/DateInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var dateInputCss = ".vuuDateInput {\n  border: solid 1px var(--salt-editable-borderColor);\n  display: inline-flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  gap: 1px;\n  padding: 0 0 0 2px;\n\n\n  .saltInput-input {\n    border: none;\n    outline: none;\n    padding-left: 0;\n  }\n}\n\n.vuuDateInput-calendar {\n  padding: 2px;\n}\n\n.vuuDatePickerInput:focus {\n  outline: none;\n}\n\ninput[type=\"date\"]{\n  font-family: var(--salt-typography-fontFamily);\n  min-width: 80px;\n}\n\ninput[type=\"date\"]::-webkit-calendar-picker-indicator {\n  display: none;\n}\n";
+
+module.exports = dateInputCss;
+//# sourceMappingURL=DateInput.css.js.map

package/cjs/date-input/DateInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/date-input/DateInput.js

@@ -2,10 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var vuuUtils = require('@vuu-ui/vuu-utils');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
 var DatePopup = require('../date-popup/DatePopup.js');
 var useDatePicker = require('./useDatePicker.js');
+var DateInput$1 = require('./DateInput.css.js');
 
 const classBase = "vuuDateInput";
 const DateInput = ({
@@ -16,6 +19,12 @@ const DateInput = ({
   className,
   ...htmlAttributes
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-data-input",
+    css: DateInput$1,
+    window: targetWindow
+  });
   const { handleOnBlur } = useDatePicker.useDatePicker({ onBlur });
   const popupRef = React.useRef(null);
   const onInputChange = React.useCallback(

package/cjs/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../src/date-input/DateInput.tsx"],"sourcesContent":["import { toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport { DateValue } from \"@internationalized/date\";\nimport { clsx } from \"clsx\";\nimport {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { CalendarProps } from \"../calendar/Calendar\";\nimport { DatePopup } from \"../date-popup\";\nimport { useDatePicker } from \"./useDatePicker\";\n\nimport \"./DateInput.css\";\n\nconst classBase = \"vuuDateInput\";\n\nexport interface DateInputProps\n  extends Pick<CalendarProps, \"hideOutOfRangeDates\" | \"hideYearDropdown\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  inputProps?: Partial<HTMLAttributes<HTMLInputElement>>;\n  onChange: (selected: DateValue, source: \"input\" | \"calendar\") => void;\n  selectedDate: DateValue | undefined;\n  closeOnSelection?: boolean;\n  onBlur?: () => void;\n  className?: string;\n}\n\nexport const DateInput = ({\n  inputProps,\n  selectedDate,\n  onChange,\n  onBlur,\n  className,\n  ...htmlAttributes\n}: DateInputProps) => {\n  const { handleOnBlur } = useDatePicker({ onBlur });\n  const popupRef = useRef<HTMLButtonElement>(null);\n  const onInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      const v = e.target.value;\n      if (v === \"\") return;\n      else onChange(toCalendarDate(new Date(v)), \"input\");\n    },\n    [onChange]\n  );\n\n  const onKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>((e) => {\n    if (e.key === \"Tab\" && !e.shiftKey) {\n      requestAnimationFrame(() => {\n        popupRef.current?.focus();\n      });\n    }\n  }, []);\n\n  const onChangeCalendar = useCallback(\n    (date: DateValue) => {\n      onChange(date, \"calendar\");\n    },\n    [onChange]\n  );\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(classBase, className)}\n      onBlur={handleOnBlur}\n    >\n      <input\n        {...inputProps}\n        aria-label=\"date-input\"\n        className={clsx(\"saltInput-input\", classBase)}\n        type=\"date\"\n        value={selectedDate?.toString() ?? \"\"}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        max=\"9999-12-31\" // without this it shows expty space on the right\n      />\n\n      <DatePopup\n        data-embedded\n        onBlur={onBlur}\n        onChange={onChangeCalendar}\n        ref={popupRef}\n        selectedDate={selectedDate}\n        selectionVariant=\"default\"\n      />\n    </div>\n  );\n};\n"],"names":["useDatePicker","useRef","useCallback","toCalendarDate","jsxs","clsx","jsx","DatePopup"],"mappings":";;;;;;;;;AAeA,MAAM,SAAY,GAAA,cAAA,CAAA;AAaX,MAAM,YAAY,CAAC;AAAA,EACxB,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,EAAE,YAAa,EAAA,GAAIA,2BAAc,CAAA,EAAE,QAAQ,CAAA,CAAA;AACjD,EAAM,MAAA,QAAA,GAAWC,aAA0B,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,CAAA,GAAI,EAAE,MAAO,CAAA,KAAA,CAAA;AACnB,MAAA,IAAI,CAAM,KAAA,EAAA;AAAI,QAAA,OAAA;AAAA;AACT,QAAA,QAAA,CAASC,wBAAe,IAAI,IAAA,CAAK,CAAC,CAAC,GAAG,OAAO,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,SAAA,GAAYD,iBAAoD,CAAA,CAAC,CAAM,KAAA;AAC3E,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,KAAS,IAAA,CAAC,EAAE,QAAU,EAAA;AAClC,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,OACzB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACnB,MAAA,QAAA,CAAS,MAAM,UAAU,CAAA,CAAA;AAAA,KAC3B;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EACE,uBAAAE,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAWC,OAAK,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACpC,MAAQ,EAAA,YAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,YAAW,EAAA,YAAA;AAAA,YACX,SAAA,EAAWD,OAAK,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,YAC5C,IAAK,EAAA,MAAA;AAAA,YACL,KAAA,EAAO,YAAc,EAAA,QAAA,EAAc,IAAA,EAAA;AAAA,YACnC,QAAU,EAAA,aAAA;AAAA,YACV,SAAA;AAAA,YACA,GAAI,EAAA,YAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBAEAC,cAAA;AAAA,UAACC,mBAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,MAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,GAAK,EAAA,QAAA;AAAA,YACL,YAAA;AAAA,YACA,gBAAiB,EAAA,SAAA;AAAA,WAAA;AAAA,SACnB;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DateInput.js","sources":["../../src/date-input/DateInput.tsx"],"sourcesContent":["import { toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport { DateValue } from \"@internationalized/date\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { CalendarProps } from \"../calendar/Calendar\";\nimport { DatePopup } from \"../date-popup\";\nimport { useDatePicker } from \"./useDatePicker\";\n\nimport dateInputCss from \"./DateInput.css\";\n\nconst classBase = \"vuuDateInput\";\n\nexport interface DateInputProps\n  extends Pick<CalendarProps, \"hideOutOfRangeDates\" | \"hideYearDropdown\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  inputProps?: Partial<HTMLAttributes<HTMLInputElement>>;\n  onChange: (selected: DateValue, source: \"input\" | \"calendar\") => void;\n  selectedDate: DateValue | undefined;\n  closeOnSelection?: boolean;\n  onBlur?: () => void;\n  className?: string;\n}\n\nexport const DateInput = ({\n  inputProps,\n  selectedDate,\n  onChange,\n  onBlur,\n  className,\n  ...htmlAttributes\n}: DateInputProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-data-input\",\n    css: dateInputCss,\n    window: targetWindow,\n  });\n\n  const { handleOnBlur } = useDatePicker({ onBlur });\n  const popupRef = useRef<HTMLButtonElement>(null);\n  const onInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      const v = e.target.value;\n      if (v === \"\") return;\n      else onChange(toCalendarDate(new Date(v)), \"input\");\n    },\n    [onChange]\n  );\n\n  const onKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>((e) => {\n    if (e.key === \"Tab\" && !e.shiftKey) {\n      requestAnimationFrame(() => {\n        popupRef.current?.focus();\n      });\n    }\n  }, []);\n\n  const onChangeCalendar = useCallback(\n    (date: DateValue) => {\n      onChange(date, \"calendar\");\n    },\n    [onChange]\n  );\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={clsx(classBase, className)}\n      onBlur={handleOnBlur}\n    >\n      <input\n        {...inputProps}\n        aria-label=\"date-input\"\n        className={clsx(\"saltInput-input\", classBase)}\n        type=\"date\"\n        value={selectedDate?.toString() ?? \"\"}\n        onChange={onInputChange}\n        onKeyDown={onKeyDown}\n        max=\"9999-12-31\" // without this it shows expty space on the right\n      />\n\n      <DatePopup\n        data-embedded\n        onBlur={onBlur}\n        onChange={onChangeCalendar}\n        ref={popupRef}\n        selectedDate={selectedDate}\n        selectionVariant=\"default\"\n      />\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","dateInputCss","useDatePicker","useRef","useCallback","toCalendarDate","jsxs","clsx","jsx","DatePopup"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,SAAY,GAAA,cAAA,CAAA;AAaX,MAAM,YAAY,CAAC;AAAA,EACxB,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAa,EAAA,GAAIC,2BAAc,CAAA,EAAE,QAAQ,CAAA,CAAA;AACjD,EAAM,MAAA,QAAA,GAAWC,aAA0B,IAAI,CAAA,CAAA;AAC/C,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,CAAA,GAAI,EAAE,MAAO,CAAA,KAAA,CAAA;AACnB,MAAA,IAAI,CAAM,KAAA,EAAA;AAAI,QAAA,OAAA;AAAA;AACT,QAAA,QAAA,CAASC,wBAAe,IAAI,IAAA,CAAK,CAAC,CAAC,GAAG,OAAO,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,SAAA,GAAYD,iBAAoD,CAAA,CAAC,CAAM,KAAA;AAC3E,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,KAAS,IAAA,CAAC,EAAE,QAAU,EAAA;AAClC,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,OACzB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,IAAoB,KAAA;AACnB,MAAA,QAAA,CAAS,MAAM,UAAU,CAAA,CAAA;AAAA,KAC3B;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EACE,uBAAAE,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAWC,OAAK,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACpC,MAAQ,EAAA,YAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACE,GAAG,UAAA;AAAA,YACJ,YAAW,EAAA,YAAA;AAAA,YACX,SAAA,EAAWD,OAAK,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,YAC5C,IAAK,EAAA,MAAA;AAAA,YACL,KAAA,EAAO,YAAc,EAAA,QAAA,EAAc,IAAA,EAAA;AAAA,YACnC,QAAU,EAAA,aAAA;AAAA,YACV,SAAA;AAAA,YACA,GAAI,EAAA,YAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBAEAC,cAAA;AAAA,UAACC,mBAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,MAAA;AAAA,YACA,QAAU,EAAA,gBAAA;AAAA,YACV,GAAK,EAAA,QAAA;AAAA,YACL,YAAA;AAAA,YACA,gBAAiB,EAAA,SAAA;AAAA,WAAA;AAAA,SACnB;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/cjs/date-popup/DatePopup.js

@@ -15,6 +15,8 @@ require('../dropdown/Dropdown.js');
 require('../common-hooks/collectionProvider.js');
 require('../common-hooks/use-resize-observer.js');
 require('@vuu-ui/vuu-utils');
+require('@salt-ds/styles');
+require('@salt-ds/window');
 var IconButton = require('../icon-button/IconButton.js');
 var useDatePopup = require('./useDatePopup.js');
 

package/cjs/date-popup/DatePopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePopup.js","sources":["../../src/date-popup/DatePopup.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  today as getTodayDate,\n} from \"@internationalized/date\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { Calendar, CalendarProps } from \"../calendar\";\nimport { DropdownBase, DropdownCloseHandler } from \"../dropdown\";\nimport { IconButton } from \"../icon-button\";\nimport { useDatePopup } from \"./useDatePopup\";\n\nconst classBase = \"vuuDatePopup\";\n\nexport interface DatePopupProps\n  extends Pick<CalendarProps, \"selectionVariant\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onKeyDown\"> {\n  \"data-embedded\"?: boolean;\n  selectedDate?: DateValue;\n  onPopupClose?: DropdownCloseHandler;\n  onPopupOpen?: () => void;\n  onChange: (date: DateValue) => void;\n}\n\nconst tz = getLocalTimeZone();\nconst today = getTodayDate(tz);\n\nexport const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(\n  function DatePopup(\n    {\n      selectedDate,\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectionVariant,\n      \"data-embedded\": dataEmbedded,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const {\n      calendarRef,\n      date,\n      isOpen,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      handleOpenChange,\n      triggererRef,\n      visibleMonth,\n    } = useDatePopup({\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectedDate: selectedDate || today,\n      selectionVariant,\n    });\n\n    return (\n      <DropdownBase\n        {...htmlAttributes}\n        className={classBase}\n        isOpen={isOpen}\n        placement=\"below\"\n        onOpenChange={handleOpenChange}\n      >\n        <IconButton\n          data-embedded={dataEmbedded}\n          icon=\"date\"\n          ref={useForkRef(forwardedRef, triggererRef)}\n          variant=\"secondary\"\n          className={cx({ \"saltButton-active\": isOpen })}\n        />\n        <Calendar\n          visibleMonth={visibleMonth}\n          ref={calendarRef}\n          selectedDate={date}\n          selectionVariant=\"default\"\n          onSelectedDateChange={onSelectedDateChange}\n          onVisibleMonthChange={onVisibleMonthChange}\n          className={`${classBase}-calendar`}\n        />\n      </DropdownBase>\n    );\n  }\n);\n"],"names":["getLocalTimeZone","getTodayDate","forwardRef","DatePopup","useDatePopup","jsxs","DropdownBase","jsx","IconButton","useForkRef","Calendar"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYlB,MAAM,KAAKA,qBAAiB,EAAA,CAAA;AAC5B,MAAM,KAAA,GAAQC,WAAa,EAAE,CAAA,CAAA;AAEtB,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAiB,EAAA,YAAA;AAAA,IACjB,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,QACEC,yBAAa,CAAA;AAAA,MACf,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,YAAgB,IAAA,KAAA;AAAA,MAC9B,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAW,EAAA,SAAA;AAAA,QACX,MAAA;AAAA,QACA,SAAU,EAAA,OAAA;AAAA,QACV,YAAc,EAAA,gBAAA;AAAA,QAEd,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,qBAAA;AAAA,YAAA;AAAA,cACC,eAAe,EAAA,YAAA;AAAA,cACf,IAAK,EAAA,MAAA;AAAA,cACL,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,cAC1C,OAAQ,EAAA,WAAA;AAAA,cACR,SAAW,EAAA,EAAA,CAAG,EAAE,mBAAA,EAAqB,QAAQ,CAAA;AAAA,aAAA;AAAA,WAC/C;AAAA,0BACAF,cAAA;AAAA,YAACG,iBAAA;AAAA,YAAA;AAAA,cACC,YAAA;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,YAAc,EAAA,IAAA;AAAA,cACd,gBAAiB,EAAA,SAAA;AAAA,cACjB,oBAAA;AAAA,cACA,oBAAA;AAAA,cACA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,aAAA;AAAA,WACzB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DatePopup.js","sources":["../../src/date-popup/DatePopup.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  today as getTodayDate,\n} from \"@internationalized/date\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { Calendar, CalendarProps } from \"../calendar\";\nimport { DropdownBase, DropdownCloseHandler } from \"../dropdown\";\nimport { IconButton } from \"../icon-button\";\nimport { useDatePopup } from \"./useDatePopup\";\n\nconst classBase = \"vuuDatePopup\";\n\nexport interface DatePopupProps\n  extends Pick<CalendarProps, \"selectionVariant\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onKeyDown\"> {\n  \"data-embedded\"?: boolean;\n  selectedDate?: DateValue;\n  onPopupClose?: DropdownCloseHandler;\n  onPopupOpen?: () => void;\n  onChange: (date: DateValue) => void;\n}\n\nconst tz = getLocalTimeZone();\nconst today = getTodayDate(tz);\n\nexport const DatePopup = forwardRef<HTMLButtonElement, DatePopupProps>(\n  function DatePopup(\n    {\n      selectedDate,\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectionVariant,\n      \"data-embedded\": dataEmbedded,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const {\n      calendarRef,\n      date,\n      isOpen,\n      onSelectedDateChange,\n      onVisibleMonthChange,\n      handleOpenChange,\n      triggererRef,\n      visibleMonth,\n    } = useDatePopup({\n      onChange,\n      onPopupClose,\n      onPopupOpen,\n      selectedDate: selectedDate || today,\n      selectionVariant,\n    });\n\n    return (\n      <DropdownBase\n        {...htmlAttributes}\n        className={classBase}\n        isOpen={isOpen}\n        placement=\"below\"\n        onOpenChange={handleOpenChange}\n      >\n        <IconButton\n          data-embedded={dataEmbedded}\n          icon=\"date\"\n          ref={useForkRef(forwardedRef, triggererRef)}\n          variant=\"secondary\"\n          className={cx({ \"saltButton-active\": isOpen })}\n        />\n        <Calendar\n          visibleMonth={visibleMonth}\n          ref={calendarRef}\n          selectedDate={date}\n          selectionVariant=\"default\"\n          onSelectedDateChange={onSelectedDateChange}\n          onVisibleMonthChange={onVisibleMonthChange}\n          className={`${classBase}-calendar`}\n        />\n      </DropdownBase>\n    );\n  }\n);\n"],"names":["getLocalTimeZone","getTodayDate","forwardRef","DatePopup","useDatePopup","jsxs","DropdownBase","jsx","IconButton","useForkRef","Calendar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAYlB,MAAM,KAAKA,qBAAiB,EAAA,CAAA;AAC5B,MAAM,KAAA,GAAQC,WAAa,EAAE,CAAA,CAAA;AAEtB,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,YAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAiB,EAAA,YAAA;AAAA,IACjB,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,QACEC,yBAAa,CAAA;AAAA,MACf,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,YAAgB,IAAA,KAAA;AAAA,MAC9B,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAW,EAAA,SAAA;AAAA,QACX,MAAA;AAAA,QACA,SAAU,EAAA,OAAA;AAAA,QACV,YAAc,EAAA,gBAAA;AAAA,QAEd,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,qBAAA;AAAA,YAAA;AAAA,cACC,eAAe,EAAA,YAAA;AAAA,cACf,IAAK,EAAA,MAAA;AAAA,cACL,GAAA,EAAKC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,cAC1C,OAAQ,EAAA,WAAA;AAAA,cACR,SAAW,EAAA,EAAA,CAAG,EAAE,mBAAA,EAAqB,QAAQ,CAAA;AAAA,aAAA;AAAA,WAC/C;AAAA,0BACAF,cAAA;AAAA,YAACG,iBAAA;AAAA,YAAA;AAAA,cACC,YAAA;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACL,YAAc,EAAA,IAAA;AAAA,cACd,gBAAiB,EAAA,SAAA;AAAA,cACjB,oBAAA;AAAA,cACA,oBAAA;AAAA,cACA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,aAAA;AAAA,WACzB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/cjs/drag-drop/Draggable.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var draggableCss = ".vuuDraggable {\n  background: transparent;\n  box-shadow: var(--salt-overlayable-shadow-drag);\n  cursor: var(--salt-draggable-grab-cursor-active);\n  position: absolute;\n  opacity: .95;\n  z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n  display: var(--vuuDraggable-display, inline-block);\n  height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n  transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n  width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n  display: var(--saltDraggable-display, inline-block);\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  height: 0px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n  transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n  /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n  /* width: var(--saltDraggable-spacer-width, 0); */\n  background-color: var(--salt-palette-accent-background);\n  height: 2px;\n  width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n  content: '';\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  background-color: var(--salt-palette-accent-background);\n  position: absolute;\n  top: -2px;\n  left: -3px;\n}\n\n.vuuDraggable-settling {\n  transition-property: left, top;\n  transition-duration: .15s;\n  transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n  order: 1;\n}";
+
+module.exports = draggableCss;
+//# sourceMappingURL=Draggable.css.js.map

package/cjs/drag-drop/Draggable.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/drag-drop/Draggable.js

@@ -3,12 +3,21 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 var vuuPopups = require('@vuu-ui/vuu-popups');
+var Draggable$1 = require('./Draggable.css.js');
 
 const makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
 const Draggable = React.forwardRef(
   function Draggable2({ wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 }, forwardedRef) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-draggable",
+      css: Draggable$1,
+      window: targetWindow
+    });
     const handleVuuDrop = React.useCallback(() => {
       onDropped?.();
     }, [onDropped]);

package/cjs/drag-drop/Draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Draggable.js","sources":["../../src/drag-drop/Draggable.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  MutableRefObject,\n  RefCallback,\n  TransitionEventHandler,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\n\nimport \"./Draggable.css\";\n\nconst makeClassNames = (classNames: string) =>\n  classNames.split(\" \").map((className) => `vuuDraggable-${className}`);\n\nexport interface DraggableProps extends HTMLAttributes<HTMLDivElement> {\n  wrapperClassName: string;\n  element: HTMLElement;\n  onDropped?: () => void;\n  onTransitionEnd?: TransitionEventHandler;\n  scale?: number;\n  style: CSSProperties;\n}\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  function Draggable(\n    { wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 },\n    forwardedRef\n  ) {\n    const handleVuuDrop = useCallback(() => {\n      onDropped?.();\n    }, [onDropped]);\n\n    const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n      (el: HTMLDivElement) => {\n        if (el) {\n          el.innerHTML = \"\";\n          el.appendChild(element);\n          if (scale !== 1) {\n            el.style.transform = `scale(${scale},${scale})`;\n          }\n          el.addEventListener(\"vuu-dropped\", handleVuuDrop);\n        }\n      },\n      [element, handleVuuDrop, scale]\n    );\n    const forkedRef = useForkRef<HTMLDivElement>(forwardedRef, callbackRef);\n\n    const position = useMemo(\n      () => ({\n        left: 0,\n        top: 0,\n      }),\n      []\n    );\n\n    return (\n      <Portal>\n        <Popup\n          anchorElement={{ current: document.body }}\n          className=\"vuuPopup\"\n          placement=\"absolute\"\n          position={position}\n        >\n          <div\n            className={cx(\"vuuDraggable\", ...makeClassNames(wrapperClassName))}\n            ref={forkedRef}\n            onTransitionEnd={onTransitionEnd}\n            style={style}\n          />\n        </Popup>\n      </Portal>\n    );\n  }\n);\n\n// const colors = [\"black\", \"red\", \"green\", \"yellow\"];\n// let color_idx = 0;\nexport const createDragSpacer = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-spacer\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n\nexport const createDropIndicatorPosition = (): HTMLElement => {\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicatorPosition\";\n  return spacer;\n};\n\nexport const createDropIndicator = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicator\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n"],"names":["forwardRef","Draggable","useCallback","useForkRef","useMemo","Portal","jsx","Popup"],"mappings":";;;;;;;;AAgBA,MAAM,cAAiB,GAAA,CAAC,UACtB,KAAA,UAAA,CAAW,KAAM,CAAA,GAAG,CAAE,CAAA,GAAA,CAAI,CAAC,SAAA,KAAc,CAAgB,aAAA,EAAA,SAAS,CAAE,CAAA,CAAA,CAAA;AAW/D,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA,EAAE,gBAAkB,EAAA,OAAA,EAAS,SAAW,EAAA,eAAA,EAAiB,KAAO,EAAA,KAAA,GAAQ,CAAE,EAAA,EAC1E,YACA,EAAA;AACA,IAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,MAAY,SAAA,IAAA,CAAA;AAAA,KACd,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,IAAA,MAAM,WAAc,GAAAA,iBAAA;AAAA,MAClB,CAAC,EAAuB,KAAA;AACtB,QAAA,IAAI,EAAI,EAAA;AACN,UAAA,EAAA,CAAG,SAAY,GAAA,EAAA,CAAA;AACf,UAAA,EAAA,CAAG,YAAY,OAAO,CAAA,CAAA;AACtB,UAAA,IAAI,UAAU,CAAG,EAAA;AACf,YAAA,EAAA,CAAG,KAAM,CAAA,SAAA,GAAY,CAAS,MAAA,EAAA,KAAK,IAAI,KAAK,CAAA,CAAA,CAAA,CAAA;AAAA,WAC9C;AACA,UAAG,EAAA,CAAA,gBAAA,CAAiB,eAAe,aAAa,CAAA,CAAA;AAAA,SAClD;AAAA,OACF;AAAA,MACA,CAAC,OAAS,EAAA,aAAA,EAAe,KAAK,CAAA;AAAA,KAChC,CAAA;AACA,IAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,YAAA,EAAc,WAAW,CAAA,CAAA;AAEtE,IAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,MACf,OAAO;AAAA,QACL,IAAM,EAAA,CAAA;AAAA,QACN,GAAK,EAAA,CAAA;AAAA,OACP,CAAA;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAA,sCACGC,gBACC,EAAA,EAAA,QAAA,kBAAAC,cAAA;AAAA,MAACC,wBAAA;AAAA,MAAA;AAAA,QACC,aAAe,EAAA,EAAE,OAAS,EAAA,QAAA,CAAS,IAAK,EAAA;AAAA,QACxC,SAAU,EAAA,UAAA;AAAA,QACV,SAAU,EAAA,UAAA;AAAA,QACV,QAAA;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAW,EAAG,CAAA,cAAA,EAAgB,GAAG,cAAA,CAAe,gBAAgB,CAAC,CAAA;AAAA,YACjE,GAAK,EAAA,SAAA;AAAA,YACL,eAAA;AAAA,YACA,KAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAIa,MAAA,gBAAA,GAAmB,CAC9B,aACgB,KAAA;AAGhB,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC3C,EAAA,MAAA,CAAO,SAAY,GAAA,qBAAA,CAAA;AACnB,EAAA,IAAI,aAAe,EAAA;AACjB,IAAO,MAAA,CAAA,gBAAA,CAAiB,iBAAiB,MAAM;AAC7C,MAAA,aAAA,CAAc,OAAU,GAAA,KAAA,CAAA;AAAA,KACzB,CAAA,CAAA;AAAA,GACH;AACA,EAAO,OAAA,MAAA,CAAA;AACT,EAAA;AAEO,MAAM,8BAA8B,MAAmB;AAC5D,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC3C,EAAA,MAAA,CAAO,SAAY,GAAA,oCAAA,CAAA;AACnB,EAAO,OAAA,MAAA,CAAA;AACT,EAAA;AAEa,MAAA,mBAAA,GAAsB,CACjC,aACgB,KAAA;AAEhB,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC3C,EAAA,MAAA,CAAO,SAAY,GAAA,4BAAA,CAAA;AACnB,EAAA,IAAI,aAAe,EAAA;AACjB,IAAO,MAAA,CAAA,gBAAA,CAAiB,iBAAiB,MAAM;AAC7C,MAAA,aAAA,CAAc,OAAU,GAAA,KAAA,CAAA;AAAA,KACzB,CAAA,CAAA;AAAA,GACH;AACA,EAAO,OAAA,MAAA,CAAA;AACT;;;;;;;"}
+{"version":3,"file":"Draggable.js","sources":["../../src/drag-drop/Draggable.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  MutableRefObject,\n  RefCallback,\n  TransitionEventHandler,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\n\nimport draggableCss from \"./Draggable.css\";\n\nconst makeClassNames = (classNames: string) =>\n  classNames.split(\" \").map((className) => `vuuDraggable-${className}`);\n\nexport interface DraggableProps extends HTMLAttributes<HTMLDivElement> {\n  wrapperClassName: string;\n  element: HTMLElement;\n  onDropped?: () => void;\n  onTransitionEnd?: TransitionEventHandler;\n  scale?: number;\n  style: CSSProperties;\n}\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  function Draggable(\n    { wrapperClassName, element, onDropped, onTransitionEnd, style, scale = 1 },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-draggable\",\n      css: draggableCss,\n      window: targetWindow,\n    });\n\n    const handleVuuDrop = useCallback(() => {\n      onDropped?.();\n    }, [onDropped]);\n\n    const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n      (el: HTMLDivElement) => {\n        if (el) {\n          el.innerHTML = \"\";\n          el.appendChild(element);\n          if (scale !== 1) {\n            el.style.transform = `scale(${scale},${scale})`;\n          }\n          el.addEventListener(\"vuu-dropped\", handleVuuDrop);\n        }\n      },\n      [element, handleVuuDrop, scale]\n    );\n    const forkedRef = useForkRef<HTMLDivElement>(forwardedRef, callbackRef);\n\n    const position = useMemo(\n      () => ({\n        left: 0,\n        top: 0,\n      }),\n      []\n    );\n\n    return (\n      <Portal>\n        <Popup\n          anchorElement={{ current: document.body }}\n          className=\"vuuPopup\"\n          placement=\"absolute\"\n          position={position}\n        >\n          <div\n            className={cx(\"vuuDraggable\", ...makeClassNames(wrapperClassName))}\n            ref={forkedRef}\n            onTransitionEnd={onTransitionEnd}\n            style={style}\n          />\n        </Popup>\n      </Portal>\n    );\n  }\n);\n\n// const colors = [\"black\", \"red\", \"green\", \"yellow\"];\n// let color_idx = 0;\nexport const createDragSpacer = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-spacer\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n\nexport const createDropIndicatorPosition = (): HTMLElement => {\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicatorPosition\";\n  return spacer;\n};\n\nexport const createDropIndicator = (\n  transitioning?: MutableRefObject<boolean>\n): HTMLElement => {\n  // const idx = color_idx++ % 4;\n  const spacer = document.createElement(\"div\");\n  spacer.className = \"vuuDraggable-dropIndicator\";\n  if (transitioning) {\n    spacer.addEventListener(\"transitionend\", () => {\n      transitioning.current = false;\n    });\n  }\n  return spacer;\n};\n"],"names":["forwardRef","Draggable","useWindow","useComponentCssInjection","draggableCss","useCallback","useForkRef","useMemo","Portal","jsx","Popup"],"mappings":"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"}

package/cjs/dropdown/Dropdown.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var dropdownBaseCss = ".vuuDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  --saltButton-height: var(--vuuDropdown-height);\n  --saltButton-width : var(--vuuDropdown-width);\n\n  line-height: 0;\n  position: relative;\n\n}\n\n.vuuDropdownButton.saltButton-secondary {\n  --saltButton-background: var(--salt-editable-background);\n  --saltButton-color: var(--salt-editable-foreground);\n  --saltButton-borderStyle: solid;\n  --saltButton-borderColor: var(--salt-editable-borderColor);\n  --saltButton-borderWidth: 1px;\n}\n\n.vuuDropdown-fullWidth {\n  width: 100%;\n}\n\n.vuuDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n\n.vuuDropdown-popup-component {\n  --vuuList-borderStyle: none;\n}\n";
+
+module.exports = dropdownBaseCss;
+//# sourceMappingURL=Dropdown.css.js.map

package/cjs/dropdown/Dropdown.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/dropdown/Dropdown.js

@@ -16,6 +16,8 @@ var List = require('../list/List.js');
 require('../drag-drop/DragDropProvider.js');
 require('../drag-drop/Draggable.js');
 require('clsx');
+require('@salt-ds/styles');
+require('@salt-ds/window');
 var DropdownBase = require('./DropdownBase.js');
 var DropdownButton = require('./DropdownButton.js');
 var useDropdown = require('./useDropdown.js');

package/cjs/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport {\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n  SelectionType,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List, ListProps } from \"../list\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, S>,\n      | \"ListItem\"\n      | \"defaultSelected\"\n      | \"itemToString\"\n      | \"onSelect\"\n      | \"onSelectionChange\"\n      | \"selected\"\n      | \"selectionStrategy\"\n      | \"source\"\n      | \"width\"\n    > {\n  // TODO There is overlap here between ListProps and top level List props\n  ListProps?: Omit<ListProps<Item, S>, \"ListItem\" | \"itemToString\" | \"source\">;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, S>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    setContainerRef,\n    ...dropdownListHook\n  } = useDropdown<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    listRef,\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionStrategy,\n  });\n\n  const itemIdToItem = useCallback(\n    (itemId: string | string[]) => {\n      if (Array.isArray(itemId)) {\n        const items = itemId.map((id) => collectionHook.itemById(id));\n        return items as SelectionType<Item, S>;\n      } else {\n        return collectionHook.itemById(itemId) as SelectionType<Item, S>;\n      }\n    },\n    [collectionHook]\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...(dropdownListHook.isOpen ? listControlProps : {})}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        placement={\n          ListProps?.width === undefined ? \"below-full-width\" : \"below\"\n        }\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, S>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          ref={setContainerRef}\n          selected={selected === undefined ? undefined : itemIdToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, S extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item>>;\n"],"names":["forwardRef","Dropdown","itemToString","defaultItemToString","ListProps","useId","useRef","useForkRef","useCollectionItems","useDropdown","useCallback","id","cloneElement","forwardCallbackProps","jsx","DropdownButton","CollectionProvider","jsxs","DropdownBase","List"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport {\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n  SelectionType,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List, ListProps } from \"../list\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, S>,\n      | \"ListItem\"\n      | \"defaultSelected\"\n      | \"itemToString\"\n      | \"onSelect\"\n      | \"onSelectionChange\"\n      | \"selected\"\n      | \"selectionStrategy\"\n      | \"source\"\n      | \"width\"\n    > {\n  // TODO There is overlap here between ListProps and top level List props\n  ListProps?: Omit<ListProps<Item, S>, \"ListItem\" | \"itemToString\" | \"source\">;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, S>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    setContainerRef,\n    ...dropdownListHook\n  } = useDropdown<Item, S>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    listRef,\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionStrategy,\n  });\n\n  const itemIdToItem = useCallback(\n    (itemId: string | string[]) => {\n      if (Array.isArray(itemId)) {\n        const items = itemId.map((id) => collectionHook.itemById(id));\n        return items as SelectionType<Item, S>;\n      } else {\n        return collectionHook.itemById(itemId) as SelectionType<Item, S>;\n      }\n    },\n    [collectionHook]\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...(dropdownListHook.isOpen ? listControlProps : {})}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        placement={\n          ListProps?.width === undefined ? \"below-full-width\" : \"below\"\n        }\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, S>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          ref={setContainerRef}\n          selected={selected === undefined ? undefined : itemIdToItem(selected)}\n          selectionStrategy={selectionStrategy}\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, S extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item>>;\n"],"names":["forwardRef","Dropdown","itemToString","defaultItemToString","ListProps","useId","useRef","useForkRef","useCollectionItems","useDropdown","useCallback","id","cloneElement","forwardCallbackProps","jsx","DropdownButton","CollectionProvider","jsxs","DropdownBase","List"],"mappings":"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"}

package/cjs/dropdown/DropdownBase.js

@@ -5,13 +5,16 @@ var vuuPopups = require('@vuu-ui/vuu-popups');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var core = require('@salt-ds/core');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 var forwardCallbackProps = require('../utils/forwardCallbackProps.js');
 var useDropdownBase = require('./useDropdownBase.js');
+var Dropdown = require('./Dropdown.css.js');
 
 const classBase = "vuuDropdown";
 const DropdownBase = React.forwardRef(
-  function Dropdown({
+  function Dropdown$1({
     PopupProps,
     "aria-labelledby": ariaLabelledByProp,
     children,
@@ -30,6 +33,12 @@ const DropdownBase = React.forwardRef(
     width,
     ...htmlAttributes
   }, forwardedRef) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "vuu-dropdown-base",
+      css: Dropdown,
+      window: targetWindow
+    });
     const rootRef = React.useRef(null);
     const className = cx(classBase, classNameProp, {
       [`${classBase}-fullWidth`]: fullWidth,

package/cjs/dropdown/DropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","sources":["../../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport \"./Dropdown.css\";\n\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst classBase = \"vuuDropdown\";\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      PopupProps,\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      defaultIsOpen,\n      disabled,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openKeys,\n      openOnFocus,\n      placement = \"below-full-width\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = cx(classBase, classNameProp, {\n      [`${classBase}-fullWidth`]: fullWidth,\n      [`${classBase}-disabled`]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n\n    const { componentProps, isOpen, popupComponentRef, triggerProps } =\n      useDropdownBase({\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openKeys,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      });\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: cx(className, `${classBase}-popup-component`),\n        id,\n        ref: popupComponentRef,\n        width: placement.endsWith(\"full-width\") ? \"auto\" : ownWidth ?? width,\n      });\n    };\n\n    const ref = useForkRef(rootRef, forwardedRef);\n\n    return (\n      <div {...htmlAttributes} className={className} id={idProp} ref={ref}>\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal>\n            <Popup\n              {...PopupProps}\n              anchorElement={rootRef}\n              placement={placement}\n            >\n              {getPopupComponent()}\n            </Popup>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","useRef","Children","useId","useDropdownBase","id","cloneElement","forwardCallbackProps","width","className","useForkRef","Portal","jsx","Popup"],"mappings":"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"}
+{"version":3,"file":"DropdownBase.js","sources":["../../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { PopupComponent as Popup, Portal } from \"@vuu-ui/vuu-popups\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Children, cloneElement, forwardRef, useRef } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport dropdownBaseCss from \"./Dropdown.css\";\n\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst classBase = \"vuuDropdown\";\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      PopupProps,\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      defaultIsOpen,\n      disabled,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openKeys,\n      openOnFocus,\n      placement = \"below-full-width\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-dropdown-base\",\n      css: dropdownBaseCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = cx(classBase, classNameProp, {\n      [`${classBase}-fullWidth`]: fullWidth,\n      [`${classBase}-disabled`]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n\n    const { componentProps, isOpen, popupComponentRef, triggerProps } =\n      useDropdownBase({\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openKeys,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      });\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: cx(className, `${classBase}-popup-component`),\n        id,\n        ref: popupComponentRef,\n        width: placement.endsWith(\"full-width\") ? \"auto\" : ownWidth ?? width,\n      });\n    };\n\n    const ref = useForkRef(rootRef, forwardedRef);\n\n    return (\n      <div {...htmlAttributes} className={className} id={idProp} ref={ref}>\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal>\n            <Popup\n              {...PopupProps}\n              anchorElement={rootRef}\n              placement={placement}\n            >\n              {getPopupComponent()}\n            </Popup>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","Dropdown","useWindow","useComponentCssInjection","dropdownBaseCss","useRef","Children","useId","useDropdownBase","id","cloneElement","forwardCallbackProps","width","className","useForkRef","Portal","jsx","Popup"],"mappings":"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"}

package/cjs/dropdown/DropdownButton.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var dropdownButtonCss = ".vuuDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n\n  --vuu-icon-size: 16px;\n}\n\n.vuuDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.vuuDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.vuuDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.vuuDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.vuuDropdownButton-formField.saltButton:focus,\n.vuuDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
+
+module.exports = dropdownButtonCss;
+//# sourceMappingURL=DropdownButton.css.js.map

package/cjs/dropdown/DropdownButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/dropdown/DropdownButton.js

@@ -2,8 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
+var DropdownButton$1 = require('./DropdownButton.css.js');
 
 const classBase = "vuuDropdownButton";
 const DropdownButton = React.forwardRef(function DropdownButton2({
@@ -20,6 +23,12 @@ const DropdownButton = React.forwardRef(function DropdownButton2({
   labelAriaAttributes,
   ...rest
 }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-dropdown-button",
+    css: DropdownButton$1,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Button,
     {

package/cjs/dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { AriaAttributes, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  icon?: string;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst classBase = \"vuuDropdownButton\";\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    ariaHideOptionRole,\n    className,\n    disabled,\n    icon = \"chevron-down\",\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={cx(\n        classBase,\n        {\n          [`${classBase}-fullWidth`]: fullWidth,\n        },\n        className\n      )}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={`${classBase}-content`}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={`${classBase}-buttonLabel`}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <span\n          className={`${classBase}-buttonIcon`}\n          data-icon={icon}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["forwardRef","DropdownButton","jsx","Button","jsxs"],"mappings":";;;;;;;AAgDA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEL,MAAA,cAAA,GAAiBA,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,cAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAA,EACA,GACA,EAAA;AAIA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA;AAAA,UACE,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAAF,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACH;AAAA,wBACAA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,YACvB,WAAW,EAAA,IAAA;AAAA,YACX,aAAY,EAAA,MAAA;AAAA,WAAA;AAAA,SACd;AAAA,OACF,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { AriaAttributes, ForwardedRef, forwardRef } from \"react\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  icon?: string;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst classBase = \"vuuDropdownButton\";\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    ariaHideOptionRole,\n    className,\n    disabled,\n    icon = \"chevron-down\",\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={cx(\n        classBase,\n        {\n          [`${classBase}-fullWidth`]: fullWidth,\n        },\n        className\n      )}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={`${classBase}-content`}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={`${classBase}-buttonLabel`}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <span\n          className={`${classBase}-buttonIcon`}\n          data-icon={icon}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["forwardRef","DropdownButton","useWindow","useComponentCssInjection","dropdownButtonCss","jsx","Button","jsxs"],"mappings":";;;;;;;;;;AAkDA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAEL,MAAA,cAAA,GAAiBA,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAO,GAAA,cAAA;AAAA,EACP,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAKD,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA;AAAA,UACE,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAAF,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,CAAA;AAAA,YACvB,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACH;AAAA,wBACAA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,WAAA,CAAA;AAAA,YACvB,WAAW,EAAA,IAAA;AAAA,YACX,aAAY,EAAA,MAAA;AAAA,WAAA;AAAA,SACd;AAAA,OACF,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/cjs/dropdown/useDropdown.js

@@ -14,6 +14,8 @@ require('../list/List.js');
 var useList = require('../list/useList.js');
 require('react/jsx-runtime');
 require('clsx');
+require('@salt-ds/styles');
+require('@salt-ds/window');
 
 const useDropdown = ({
   collectionHook,