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

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":"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"}

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,345 @@
+'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 && children != void 0,
+        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