@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist-cjs/dropdown/useDropdown.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+var React = require('react');
+require('../list/Highlighter.js');
+require('../list/ListItem.js');
+require('../list/List.js');
+var useList = require('../list/useList.js');
+require('../list/VirtualizedList.js');
+require('../common-hooks/collectionProvider.js');
+var itemToString = require('../common-hooks/itemToString.js');
+require('../common-hooks/keyUtils.js');
+require('react/jsx-runtime');
+require('../responsive/useResizeObserver.js');
+
+const NULL_REF = { current: null };
+const useDropdown = ({
+  collectionHook,
+  defaultHighlightedIndex: defaultHighlightedIndexProp,
+  defaultIsOpen,
+  defaultSelected,
+  highlightedIndex: highlightedIndexProp,
+  isOpen: isOpenProp,
+  itemToString: itemToString$1 = itemToString.itemToString,
+  onHighlight,
+  onOpenChange,
+  onSelectionChange,
+  onSelect,
+  selected,
+  selectionStrategy
+}) => {
+  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
+  const [isOpen, setIsOpen] = core.useControlled({
+    controlled: isOpenProp,
+    default: defaultIsOpen != null ? defaultIsOpen : false,
+    name: "useDropdownList"
+  });
+  const handleSelectionChange = React.useCallback(
+    (evt, selected2) => {
+      if (!isMultiSelect) {
+        setIsOpen(false);
+        onOpenChange == null ? void 0 : onOpenChange(false);
+      }
+      onSelectionChange == null ? void 0 : onSelectionChange(evt, selected2);
+    },
+    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]
+  );
+  const handleSelect = React.useCallback(
+    (evt, selected2) => {
+      if (!isMultiSelect) {
+        setIsOpen(false);
+        onOpenChange == null ? void 0 : onOpenChange(false);
+      }
+      onSelect == null ? void 0 : onSelect(evt, selected2);
+    },
+    [isMultiSelect, onOpenChange, onSelect, setIsOpen]
+  );
+  const listHook = useList.useList({
+    collectionHook,
+    defaultHighlightedIndex: (defaultHighlightedIndexProp != null ? defaultHighlightedIndexProp : highlightedIndexProp === void 0) ? 0 : void 0,
+    defaultSelected,
+    label: "useDropDownList",
+    onSelectionChange: handleSelectionChange,
+    onSelect: handleSelect,
+    containerRef: NULL_REF,
+    highlightedIndex: highlightedIndexProp,
+    onHighlight,
+    selected,
+    selectionStrategy,
+    tabToSelect: !isMultiSelect
+  });
+  const handleOpenChange = React.useCallback(
+    (open) => {
+      setIsOpen(open);
+      onOpenChange == null ? void 0 : onOpenChange(open);
+    },
+    [onOpenChange, setIsOpen]
+  );
+  const triggerLabel = React.useMemo(() => {
+    if (isMultiSelect && Array.isArray(listHook.selected)) {
+      const selectedItems = listHook.selected;
+      if (selectedItems.length === 0) {
+        return void 0;
+      } else if (selectedItems.length === 1) {
+        const { value } = selectedItems[0];
+        return value === null ? void 0 : itemToString$1(value);
+      } else {
+        return `${selectedItems.length} items selected`;
+      }
+    } else {
+      const selectedItem = listHook.selected;
+      return selectedItem == null || selectedItem.value === null ? void 0 : itemToString$1(selectedItem.value);
+    }
+  }, [isMultiSelect, itemToString$1, listHook.selected]);
+  return {
+    isOpen,
+    onOpenChange: handleOpenChange,
+    triggerLabel,
+    ...listHook
+  };
+};
+
+exports.useDropdown = useDropdown;
+//# sourceMappingURL=useDropdown.js.map

package/dist-cjs/dropdown/useDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"./dropdownTypes\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectHandler,\n  SelectionStrategy,\n} from \"../common-hooks\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect, setIsOpen]\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      } else if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      } else {\n        return `${selectedItems.length} items selected`;\n      }\n    } else {\n      const selectedItem = listHook.selected as CollectionItem<Item>;\n      return selectedItem == null || selectedItem.value === null\n        ? undefined\n        : itemToString(selectedItem.value);\n    }\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","useControlled","useCallback","selected","useList","useMemo"],"mappings":"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"}

package/dist-cjs/dropdown/useDropdownBase.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+var React = require('react');
+var useClickAway = require('./useClickAway.js');
+require('react/jsx-runtime');
+var useResizeObserver = require('../responsive/useResizeObserver.js');
+require('../form-field-context-legacy/FormFieldLegacyContext.js');
+var useFormFieldLegacyProps = require('../form-field-context-legacy/useFormFieldLegacyProps.js');
+
+const NO_OBSERVER = [];
+const useDropdownBase = ({
+  ariaLabelledBy: ariaLabelledByProp,
+  defaultIsOpen,
+  disabled,
+  fullWidth: fullWidthProp,
+  id,
+  isOpen: isOpenProp,
+  onOpenChange,
+  onKeyDown: onKeyDownProp,
+  openOnFocus,
+  popupComponent: { props: componentProps },
+  popupWidth: popupWidthProp,
+  rootRef,
+  width
+}) => {
+  var _a;
+  const justFocused = React.useRef(null);
+  const popperRef = React.useRef(null);
+  const popperCallbackRef = React.useCallback((element) => {
+    popperRef.current = element;
+  }, []);
+  const [isOpen, setIsOpen] = core.useControlled({
+    controlled: isOpenProp,
+    default: Boolean(defaultIsOpen),
+    name: "useDropdown",
+    state: "isOpen"
+  });
+  const {
+    inFormField,
+    setFocused: setFormFieldFocused,
+    a11yProps: { "aria-labelledby": ariaLabelledBy, ...restA11yProps } = {}
+  } = useFormFieldLegacyProps.useFormFieldLegacyProps();
+  const [popup, setPopup] = React.useState({
+    width: (_a = popupWidthProp != null ? popupWidthProp : width) != null ? _a : 0
+  });
+  const showDropdown = React.useCallback(() => {
+    setIsOpen(true);
+    onOpenChange == null ? void 0 : onOpenChange(true);
+  }, [onOpenChange, setIsOpen]);
+  const hideDropdown = React.useCallback(() => {
+    setIsOpen(false);
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  }, [onOpenChange, setIsOpen]);
+  useClickAway.useClickAway({
+    popperRef,
+    rootRef,
+    isOpen,
+    onClose: hideDropdown
+  });
+  const handleTriggerFocus = React.useCallback(() => {
+    if (!disabled) {
+      setFormFieldFocused == null ? void 0 : setFormFieldFocused(true);
+      if (openOnFocus) {
+        setIsOpen(true);
+        onOpenChange == null ? void 0 : onOpenChange(true);
+        justFocused.current = window.setTimeout(() => {
+          justFocused.current = null;
+        }, 1e3);
+      }
+    }
+  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);
+  const handleTriggerBlur = React.useCallback(() => {
+    setFormFieldFocused == null ? void 0 : setFormFieldFocused(false);
+  }, [setFormFieldFocused]);
+  const handleTriggerToggle = React.useCallback(
+    (e) => {
+      if (["Enter", " "].indexOf(
+        e.key
+      ) === -1) {
+        const newIsOpen = !isOpen;
+        setIsOpen(newIsOpen);
+        onOpenChange == null ? void 0 : onOpenChange(newIsOpen);
+      }
+    },
+    [isOpen, setIsOpen, onOpenChange]
+  );
+  const handleKeydown = React.useCallback(
+    (evt) => {
+      if ((evt.key === "Tab" || evt.key === "Escape") && isOpen) {
+        hideDropdown();
+      } else if ((evt.key === "Enter" || evt.key === "ArrowDown" || evt.key === " ") && !isOpen) {
+        evt.preventDefault();
+        showDropdown();
+      } else {
+        onKeyDownProp == null ? void 0 : onKeyDownProp(evt);
+      }
+    },
+    [hideDropdown, isOpen, onKeyDownProp, showDropdown]
+  );
+  const fullWidth = fullWidthProp != null ? fullWidthProp : inFormField;
+  const measurements2 = fullWidth ? useResizeObserver.WidthOnly : NO_OBSERVER;
+  useResizeObserver.useResizeObserver(rootRef, measurements2, setPopup, fullWidth);
+  const componentId = `${id}-dropdown`;
+  const getAriaLabelledBy = (labelledBy, labelledByProp) => {
+    if (labelledBy === void 0 && labelledByProp === void 0) {
+      return void 0;
+    } else {
+      return [labelledBy, labelledByProp].filter((x) => !!x).join(" ");
+    }
+  };
+  const triggerProps = {
+    ...restA11yProps,
+    "aria-expanded": isOpen,
+    "aria-labelledby": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),
+    "aria-owns": isOpen ? componentId : void 0,
+    id: `${id}-control`,
+    onClick: disabled || openOnFocus ? void 0 : handleTriggerToggle,
+    onFocus: handleTriggerFocus,
+    onBlur: handleTriggerBlur,
+    role: "listbox",
+    onKeyDown: disabled ? void 0 : handleKeydown,
+    style: { width: fullWidth ? void 0 : width }
+  };
+  const dropdownComponentProps = {
+    "aria-labelledby": ariaLabelledBy,
+    id: componentId,
+    width: popup.width
+  };
+  return {
+    componentProps: dropdownComponentProps,
+    popperRef: popperCallbackRef,
+    isOpen,
+    label: "Dropdown Button",
+    triggerProps
+  };
+};
+
+exports.useDropdownBase = useDropdownBase;
+//# sourceMappingURL=useDropdownBase.js.map

package/dist-cjs/dropdown/useDropdownBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\nimport { measurements, useResizeObserver, WidthOnly } from \"../responsive\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupComponent: { props: componentProps },\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    setFocused: setFormFieldFocused,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldLegacyProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange, setIsOpen]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange, setIsOpen]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    if (!disabled) {\n      setFormFieldFocused?.(true);\n\n      if (openOnFocus) {\n        setIsOpen(true);\n        onOpenChange?.(true);\n        // Suppress response to click if click was the cause of focus\n        justFocused.current = window.setTimeout(() => {\n          justFocused.current = null;\n        }, 1000);\n      }\n    }\n  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);\n\n  const handleTriggerBlur = useCallback(() => {\n    setFormFieldFocused?.(false);\n  }, [setFormFieldFocused]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, setIsOpen, onOpenChange]\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown]\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    } else {\n      return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n    }\n  };\n\n  // TODO do we use aria-popup - valid values are menu, disloag, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: handleTriggerFocus,\n    onBlur: handleTriggerBlur,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["useRef","useCallback","useControlled","useFormFieldLegacyProps","useState","useClickAway","measurements","WidthOnly","useResizeObserver"],"mappings":";;;;;;;;;;;;AAQA,MAAM,cAAwB,EAAC,CAAA;AAExB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA,EAEA,SAAW,EAAA,aAAA;AAAA,EACX,EAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,WAAA;AAAA,EACA,cAAA,EAAgB,EAAE,KAAA,EAAO,cAAe,EAAA;AAAA,EACxC,UAAY,EAAA,cAAA;AAAA,EACZ,OAAA;AAAA,EACA,KAAA;AACF,CAA6C,KAAA;AAzB7C,EAAA,IAAA,EAAA,CAAA;AA0BE,EAAM,MAAA,WAAA,GAAcA,aAAsB,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,SAAA,GAAYA,aAA2B,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,iBAAA,GAAoBC,iBAAY,CAAA,CAAC,OAAgC,KAAA;AACrE,IAAA,SAAA,CAAU,OAAU,GAAA,OAAA,CAAA;AAAA,GACtB,EAAG,EAAE,CAAA,CAAA;AACL,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACxC,UAAY,EAAA,UAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,aAAa,CAAA;AAAA,IAC9B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,QAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,WAAW,EAAE,iBAAA,EAAmB,cAAmB,EAAA,GAAA,aAAA,KAAkB,EAAC;AAAA,MACpEC,+CAAwB,EAAA,CAAA;AAE5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,cAAuB,CAAA;AAAA,IAC/C,KAAA,EAAA,CAAO,EAAkB,GAAA,cAAA,IAAA,IAAA,GAAA,cAAA,GAAA,KAAA,KAAlB,IAA2B,GAAA,EAAA,GAAA,CAAA;AAAA,GACnC,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAeH,kBAAY,MAAM;AACrC,IAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAAA,GACd,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA,CAAA;AAE5B,EAAM,MAAA,YAAA,GAAeA,kBAAY,MAAM;AACrC,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACd,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA,CAAA;AAE5B,EAAaI,yBAAA,CAAA;AAAA,IACX,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,GACV,CAAA,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqBJ,kBAAY,MAAM;AAC3C,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAsB,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,IAAA,CAAA,CAAA;AAEtB,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAEf,QAAY,WAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC5C,UAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AAAA,WACrB,GAAI,CAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,KACC,CAAC,QAAA,EAAU,cAAc,WAAa,EAAA,mBAAA,EAAqB,SAAS,CAAC,CAAA,CAAA;AAExE,EAAM,MAAA,iBAAA,GAAoBA,kBAAY,MAAM;AAC1C,IAAsB,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACxB,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,mBAAsB,GAAAA,iBAAA;AAAA,IAC1B,CAAC,CAAkB,KAAA;AAEjB,MACE,IAAA,CAAC,OAAS,EAAA,GAAG,CAAE,CAAA,OAAA;AAAA,QACZ,CAA+C,CAAA,GAAA;AAAA,YAC5C,CACN,CAAA,EAAA;AACA,QAAA,MAAM,YAAY,CAAC,MAAA,CAAA;AACnB,QAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,SAAA,CAAA,CAAA;AAAA,OACjB;AAAA,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,SAAA,EAAW,YAAY,CAAA;AAAA,GAClC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,GAAoC,KAAA;AACnC,MAAA,IAAA,CAAK,IAAI,GAAQ,KAAA,KAAA,IAAS,GAAI,CAAA,GAAA,KAAQ,aAAa,MAAQ,EAAA;AAEzD,QAAa,YAAA,EAAA,CAAA;AAAA,OACf,MAAA,IAAA,CACG,GAAI,CAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,CAAI,GAAQ,KAAA,WAAA,IAAe,GAAI,CAAA,GAAA,KAAQ,GAC/D,KAAA,CAAC,MACD,EAAA;AACA,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAa,YAAA,EAAA,CAAA;AAAA,OACR,MAAA;AACL,QAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,YAAA,EAAc,MAAQ,EAAA,aAAA,EAAe,YAAY,CAAA;AAAA,GACpD,CAAA;AAEA,EAAA,MAAM,YAAY,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,WAAA,CAAA;AACnC,EAAMK,MAAAA,aAAAA,GAAe,YAAYC,2BAAY,GAAA,WAAA,CAAA;AAC7C,EAAkBC,mCAAA,CAAA,OAAA,EAASF,aAAc,EAAA,QAAA,EAAU,SAAS,CAAA,CAAA;AAE5D,EAAA,MAAM,cAAc,CAAG,EAAA,EAAA,CAAA,SAAA,CAAA,CAAA;AAEvB,EAAM,MAAA,iBAAA,GAAoB,CACxB,UAAA,EACA,cACuB,KAAA;AACvB,IAAI,IAAA,UAAA,KAAe,KAAa,CAAA,IAAA,cAAA,KAAmB,KAAW,CAAA,EAAA;AAC5D,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAA,OAAO,CAAC,UAAA,EAAY,cAAc,CAAA,CAAE,MAAO,CAAA,CAAC,CAAM,KAAA,CAAC,CAAC,CAAC,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAAA,KACjE;AAAA,GACF,CAAA;AAGA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,GAAG,aAAA;AAAA,IACH,eAAiB,EAAA,MAAA;AAAA,IACjB,iBAAA,EAAmB,iBAAkB,CAAA,cAAA,EAAgB,kBAAkB,CAAA;AAAA,IACvE,WAAA,EAAa,SAAS,WAAc,GAAA,KAAA,CAAA;AAAA,IACpC,IAAI,CAAG,EAAA,EAAA,CAAA,QAAA,CAAA;AAAA,IACP,OAAA,EAAS,QAAY,IAAA,WAAA,GAAc,KAAY,CAAA,GAAA,mBAAA;AAAA,IAC/C,OAAS,EAAA,kBAAA;AAAA,IACT,MAAQ,EAAA,iBAAA;AAAA,IACR,IAAM,EAAA,SAAA;AAAA,IACN,SAAA,EAAW,WAAW,KAAY,CAAA,GAAA,aAAA;AAAA,IAClC,KAAO,EAAA,EAAE,KAAO,EAAA,SAAA,GAAY,SAAY,KAAM,EAAA;AAAA,GAChD,CAAA;AAEA,EAAA,MAAM,sBAAyB,GAAA;AAAA,IAC7B,iBAAmB,EAAA,cAAA;AAAA,IACnB,EAAI,EAAA,WAAA;AAAA,IACJ,OAAO,KAAM,CAAA,KAAA;AAAA,GACf,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,cAAgB,EAAA,sBAAA;AAAA,IAChB,SAAW,EAAA,iBAAA;AAAA,IACX,MAAA;AAAA,IACA,KAAO,EAAA,iBAAA;AAAA,IACP,YAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-cjs/dropdown-next/DropdownNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDropdownNext {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-color: var(--salt-content-primary-foreground);\n  --dropdownNext-cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdownNext-background);\n  cursor: var(--dropdownNext-cursor);\n  min-height: var(--salt-size-base);\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdownNext-borderColor);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  gap: var(--salt-spacing-100);\n  color: var(--dropdownNext-color);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltDropdownNext:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext:focus-visible {\n  outline: var(--salt-focused-outline);\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n\n.saltDropdownNext-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdownNext-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n}\n\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n}\n\n.saltDropdownNext:disabled {\n  --dropdownNext-background: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-color: var(--salt-content-primary-foreground-disabled);\n  --dropdownNext-cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltDropdownNext[aria-readonly=\"true\"] {\n  --dropdownNext-background: var(--salt-editable-primary-background-readonly);\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-color: var(--salt-content-primary-foreground);\n  --dropdownNext-cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltDropdownNext-error {\n  --dropdownNext-background: var(--salt-status-error-background);\n  --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-error .saltDropdownNext:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n  --dropdownNext-borderColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdownNext-warning {\n  --dropdownNext-background: var(--salt-status-warning-background);\n  --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-warning .saltDropdownNext:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n  --dropdownNext-borderColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdownNext-success {\n  --dropdownNext-background: var(--salt-status-success-background);\n  --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdownNext-success .saltDropdownNext:focus-visible {\n  outline-color: var(--salt-status-success-borderColor);\n  --dropdownNext-borderColor: var(--salt-status-success-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DropdownNext.css.js.map

package/dist-cjs/dropdown-next/DropdownNext.css.js.map

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

package/dist-cjs/dropdown-next/DropdownNext.js

@@ -0,0 +1,350 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ListControlState = require('../list-control/ListControlState.js');
+var icons = require('@salt-ds/icons');
+var core = require('@salt-ds/core');
+var react = require('@floating-ui/react');
+var clsx = require('clsx');
+var window$1 = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var DropdownNext$1 = require('./DropdownNext.css.js');
+var ListControlContext = require('../list-control/ListControlContext.js');
+var OptionList = require('../option/OptionList.js');
+
+function ExpandIcon({ open }) {
+  return open ? /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, {
+    "aria-hidden": true
+  }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {
+    "aria-hidden": true
+  });
+}
+const withBaseName = core.makePrefixer("saltDropdownNext");
+const DropdownNext = React.forwardRef(
+  function DropdownNext2(props, ref) {
+    var _a, _b;
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      children,
+      className,
+      disabled: disabledProp,
+      emptyReadOnlyMarker = "\u2014",
+      readOnly: readOnlyProp,
+      multiselect,
+      onSelectionChange,
+      selected,
+      defaultSelected,
+      defaultOpen,
+      defaultValue: defaultValueProp,
+      value,
+      onOpenChange,
+      open,
+      placeholder,
+      startAdornment,
+      required: requiredProp,
+      variant = "primary",
+      validationStatus: validationStatusProp,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      ...rest
+    } = props;
+    const targetWindow = window$1.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-DropdownNext",
+      css: DropdownNext$1,
+      window: targetWindow
+    });
+    const {
+      a11yProps: {
+        "aria-describedby": formFieldDescribedBy,
+        "aria-labelledby": formFieldLabelledBy
+      } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      necessity: formFieldRequired,
+      validationStatus: formFieldValidationStatus
+    } = core.useFormFieldProps();
+    const disabled = Boolean(disabledProp) || formFieldDisabled;
+    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
+    const validationStatus = validationStatusProp != null ? validationStatusProp : formFieldValidationStatus;
+    const required = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : requiredProp;
+    const isEmptyReadOnly = readOnly && !defaultValueProp && !value;
+    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+    const listControl = ListControlState.useListControl({
+      open,
+      defaultOpen,
+      onOpenChange,
+      multiselect,
+      defaultSelected,
+      selected,
+      onSelectionChange,
+      defaultValue,
+      value
+    });
+    const {
+      activeState,
+      setActive,
+      openState,
+      setOpen,
+      openKey,
+      getOptionAtIndex,
+      getIndexOfOption,
+      getOptionsMatching,
+      getOptionFromSearch,
+      options,
+      selectedState,
+      select,
+      valueState,
+      setFocusVisibleState,
+      focusedState,
+      setFocusedState,
+      listRef
+    } = listControl;
+    const { Component: FloatingComponent } = core.useFloatingComponent();
+    const { x, y, strategy, elements, floating, reference } = core.useFloatingUI({
+      open,
+      placement: "bottom-start",
+      middleware: [
+        react.size({
+          apply({ rects, elements: elements2, availableHeight }) {
+            Object.assign(elements2.floating.style, {
+              minWidth: `${rects.reference.width}px`,
+              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
+            });
+          }
+        }),
+        react.flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    const buttonRef = React.useRef(null);
+    const handleTriggerRef = core.useForkRef(
+      reference,
+      buttonRef
+    );
+    const handleButtonRef = core.useForkRef(handleTriggerRef, ref);
+    const handleClick = (event) => {
+      if (!readOnly) {
+        setFocusVisibleState(false);
+        setOpen(event, !openState);
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    const typeaheadString = React.useRef("");
+    const typeaheadTimeout = React.useRef();
+    const handleTypeahead = (event) => {
+      if (typeaheadTimeout.current) {
+        clearTimeout(typeaheadTimeout.current);
+      }
+      typeaheadString.current += event.key;
+      typeaheadTimeout.current = window.setTimeout(() => {
+        typeaheadString.current = "";
+      }, 500);
+      if (!openState) {
+        setOpen(event, true);
+      }
+      let newOption = getOptionFromSearch(typeaheadString.current, activeState);
+      if (!newOption) {
+        newOption = getOptionFromSearch(typeaheadString.current);
+      }
+      if (newOption) {
+        setActive(newOption);
+        setFocusVisibleState(true);
+      }
+    };
+    const handleKeyDown = (event) => {
+      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
+      const count = options.length - 1;
+      if (readOnly) {
+        return;
+      }
+      if (!openState) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          setOpen(event, true);
+          return;
+        }
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleTypeahead(event);
+      }
+      let newActive;
+      switch (event.key) {
+        case "ArrowDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
+          break;
+        case "ArrowUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
+          break;
+        case "Home":
+          newActive = getOptionAtIndex(0);
+          break;
+        case "End":
+          newActive = getOptionAtIndex(count);
+          break;
+        case "PageUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
+          break;
+        case "PageDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
+          break;
+        case "Enter":
+        case " ":
+          if (openState && Boolean(activeState == null ? void 0 : activeState.disabled) || typeaheadString.current.trim().length > 0 && event.key === " ") {
+            event.preventDefault();
+            return;
+          }
+          if (!openState || !activeState) {
+            return;
+          }
+          event.preventDefault();
+          select(event, activeState);
+          if (!multiselect) {
+            setOpen(event, false);
+          }
+          break;
+        case "Escape":
+          setOpen(event, false);
+          break;
+        case "Tab":
+          if (!multiselect && activeState) {
+            select(event, activeState);
+          }
+          break;
+      }
+      if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
+        event.preventDefault();
+        setActive(newActive);
+        setFocusVisibleState(true);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleFocus = (event) => {
+      setFocusedState(true);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const ignoreBlur = React.useRef(false);
+    const handleBlur = (event) => {
+      if (!ignoreBlur.current) {
+        setOpen(event, false);
+      }
+      ignoreBlur.current = false;
+      setFocusedState(false);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleListMouseOver = () => {
+      setFocusVisibleState(false);
+    };
+    const handleListMouseDown = () => {
+      ignoreBlur.current = true;
+    };
+    const handleListFocus = () => {
+      var _a2;
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+    };
+    const handleListClick = () => {
+      var _a2;
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+    };
+    React.useEffect(() => {
+      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
+      if (openState && activeIndex < 0) {
+        if (openKey.current.key === "ArrowDown") {
+          setActive(getOptionAtIndex(0));
+        } else if (openKey.current.key === "ArrowUp") {
+          setActive(getOptionAtIndex(options.length - 1));
+        } else {
+          if (selectedState.length > 0) {
+            const selected2 = getOptionsMatching(
+              (option) => option.value === selectedState[0]
+            ).pop();
+            if (selected2) {
+              setActive(selected2);
+            }
+          } else {
+            setActive(getOptionAtIndex(0));
+          }
+        }
+      } else if (!openState) {
+        setActive(void 0);
+      }
+    }, [openState, children]);
+    const listId = core.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(ListControlContext.ListControlContext.Provider, {
+      value: listControl,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", {
+          className: clsx.clsx(
+            withBaseName(),
+            withBaseName(variant),
+            {
+              [withBaseName("disabled")]: disabled,
+              [withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus
+            },
+            className
+          ),
+          ref: handleButtonRef,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          role: "combobox",
+          type: "button",
+          disabled,
+          "aria-readonly": readOnly ? "true" : void 0,
+          "aria-required": required ? "true" : void 0,
+          "aria-expanded": openState,
+          "aria-activedescendant": activeState == null ? void 0 : activeState.id,
+          "aria-labelledby": clsx.clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+          "aria-describedby": clsx.clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
+          "aria-multiselectable": multiselect,
+          "aria-controls": openState ? listId : void 0,
+          ...rest,
+          children: [
+            startAdornment,
+            /* @__PURE__ */ jsxRuntime.jsx("span", {
+              className: clsx.clsx(withBaseName("content"), {
+                [withBaseName("placeholder")]: !valueState
+              }),
+              children: valueState != null ? valueState : placeholder
+            }),
+            validationStatus && /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, {
+              status: validationStatus
+            }),
+            !readOnly && /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {
+              open: openState
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
+          open: (openState || focusedState) && !readOnly,
+          left: x != null ? x : 0,
+          top: y != null ? y : 0,
+          position: strategy,
+          width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+          height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+          ref: floating,
+          children: /* @__PURE__ */ jsxRuntime.jsx(OptionList.OptionList, {
+            id: listId,
+            collapsed: !openState,
+            onMouseOver: handleListMouseOver,
+            onMouseDown: handleListMouseDown,
+            onFocus: handleListFocus,
+            onClick: handleListClick,
+            ref: listRef,
+            children
+          })
+        })
+      ]
+    });
+  }
+);
+
+exports.DropdownNext = DropdownNext;
+//# sourceMappingURL=DropdownNext.js.map