@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist-es/packages/lab/src/dropdown/DropdownButton.js

@@ -1,64 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer, Button } from '@salt-ds/core';
-import { ChevronDownIcon, DEFAULT_ICON_SIZE } from '@salt-ds/icons';
-import '../form-field-context/FormFieldContext.js';
-import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import './DropdownButton.css.js';
-
-const withBaseName = makePrefixer("saltDropdownButton");
-const DropdownButton = forwardRef(function DropdownButton2({
-  IconComponent = ChevronDownIcon,
-  ariaHideOptionRole,
-  className,
-  disabled,
-  iconSize = DEFAULT_ICON_SIZE,
-  isOpen,
-  label,
-  labelId,
-  fullWidth,
-  posInSet,
-  setSize,
-  labelAriaAttributes,
-  ...rest
-}, ref) {
-  const { inFormField } = useFormFieldProps();
-  return /* @__PURE__ */ jsx(Button, {
-    className: clsx(
-      withBaseName(),
-      {
-        [withBaseName("fullwidth")]: fullWidth,
-        [withBaseName("formField")]: inFormField
-      },
-      className
-    ),
-    "data-testid": "dropdown-button",
-    disabled,
-    variant: "secondary",
-    ...rest,
-    ref,
-    children: /* @__PURE__ */ jsxs("div", {
-      className: withBaseName("content"),
-      children: [
-        /* @__PURE__ */ jsx("span", {
-          "aria-hidden": ariaHideOptionRole ? "true" : void 0,
-          ...labelAriaAttributes,
-          className: withBaseName("buttonLabel"),
-          id: labelId,
-          role: "option",
-          children: label
-        }),
-        /* @__PURE__ */ jsx(IconComponent, {
-          className: withBaseName("icon"),
-          size: iconSize,
-          "aria-label": null,
-          "aria-hidden": "true"
-        })
-      ]
-    })
-  });
-});
-
-export { DropdownButton };
-//# sourceMappingURL=DropdownButton.js.map

package/dist-es/packages/lab/src/dropdown/DropdownButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon, IconProps, DEFAULT_ICON_SIZE } from \"@salt-ds/icons\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { clsx } from \"clsx\";\nimport { AriaAttributes, ComponentType, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\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   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\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 withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent = ChevronDownIcon,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\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 { inFormField } = useFormFieldProps();\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={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"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={withBaseName(\"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        <IconComponent\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton"],"mappings":";;;;;;;;;AAsDA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAgB,GAAA,eAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAI1C,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/dropdown/useDropdown.js

@@ -1,91 +0,0 @@
-import { useControlled } from '@salt-ds/core';
-import { useCallback, useMemo } from 'react';
-import '../list/Highlighter.js';
-import '../list/ListItem.js';
-import '../list/List.js';
-import { useList } from '../list/useList.js';
-import '../list/VirtualizedList.js';
-import '../common-hooks/collectionProvider.js';
-import { itemToString } from '../common-hooks/itemToString.js';
-import '../common-hooks/keyUtils.js';
-import '../utils/useFloatingUI.js';
-import 'react/jsx-runtime';
-import '../responsive/useResizeObserver.js';
-
-const NULL_REF = { current: null };
-const useDropdown = ({
-  collectionHook,
-  defaultHighlightedIndex: defaultHighlightedIndexProp,
-  defaultIsOpen,
-  defaultSelected,
-  highlightedIndex: highlightedIndexProp,
-  isOpen: isOpenProp,
-  itemToString: itemToString$1 = itemToString,
-  onHighlight,
-  onOpenChange,
-  onSelectionChange,
-  selected,
-  selectionStrategy
-}) => {
-  const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
-  const [isOpen, setIsOpen] = useControlled({
-    controlled: isOpenProp,
-    default: defaultIsOpen != null ? defaultIsOpen : false,
-    name: "useDropdownList"
-  });
-  const handleSelectionChange = 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 listHook = useList({
-    collectionHook,
-    defaultHighlightedIndex: (defaultHighlightedIndexProp != null ? defaultHighlightedIndexProp : highlightedIndexProp === void 0) ? 0 : void 0,
-    defaultSelected,
-    label: "useDropDownList",
-    onSelectionChange: handleSelectionChange,
-    containerRef: NULL_REF,
-    highlightedIndex: highlightedIndexProp,
-    onHighlight,
-    selected,
-    selectionStrategy,
-    tabToSelect: !isMultiSelect
-  });
-  const handleOpenChange = useCallback(
-    (open) => {
-      setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange, setIsOpen]
-  );
-  const triggerLabel = 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
-  };
-};
-
-export { useDropdown };
-//# sourceMappingURL=useDropdown.js.map

package/dist-es/packages/lab/src/dropdown/useDropdown.js.map

@@ -1 +0,0 @@
-{"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  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  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 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    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","selected"],"mappings":"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"}

package/dist-es/packages/lab/src/dropdown/useDropdownBase.js

@@ -1,129 +0,0 @@
-import { useControlled } from '@salt-ds/core';
-import { useRef, useCallback, useState } from 'react';
-import { useClickAway } from './useClickAway.js';
-import 'react/jsx-runtime';
-import { useResizeObserver, WidthOnly } from '../responsive/useResizeObserver.js';
-import '../utils/useFloatingUI.js';
-import '../form-field-context/FormFieldContext.js';
-import { useFormFieldProps } from '../form-field-context/useFormFieldProps.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 = useRef(null);
-  const popperRef = useRef(null);
-  const popperCallbackRef = useCallback((element) => {
-    popperRef.current = element;
-  }, []);
-  const [isOpen, setIsOpen] = useControlled({
-    controlled: isOpenProp,
-    default: Boolean(defaultIsOpen),
-    name: "useDropdown",
-    state: "isOpen"
-  });
-  const {
-    inFormField,
-    a11yProps: { "aria-labelledby": ariaLabelledBy, ...restA11yProps } = {}
-  } = useFormFieldProps();
-  const [popup, setPopup] = useState({
-    width: (_a = popupWidthProp != null ? popupWidthProp : width) != null ? _a : 0
-  });
-  const showDropdown = useCallback(() => {
-    setIsOpen(true);
-    onOpenChange == null ? void 0 : onOpenChange(true);
-  }, [onOpenChange, setIsOpen]);
-  const hideDropdown = useCallback(() => {
-    setIsOpen(false);
-    onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange, setIsOpen]);
-  useClickAway({
-    popperRef,
-    rootRef,
-    isOpen,
-    onClose: hideDropdown
-  });
-  const handleTriggerFocus = useCallback(() => {
-    setIsOpen(true);
-    onOpenChange == null ? void 0 : onOpenChange(true);
-    justFocused.current = window.setTimeout(() => {
-      justFocused.current = null;
-    }, 1e3);
-  }, [onOpenChange, setIsOpen]);
-  const handleTriggerToggle = useCallback(
-    (e) => {
-      if (["Enter", " "].indexOf(
-        e.key
-      ) === -1) {
-        const newIsOpen = !isOpen;
-        setIsOpen(newIsOpen);
-        onOpenChange == null ? void 0 : onOpenChange(newIsOpen);
-      }
-    },
-    [isOpen, setIsOpen, onOpenChange]
-  );
-  const handleKeydown = 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 ? WidthOnly : NO_OBSERVER;
-  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: openOnFocus && !disabled ? handleTriggerFocus : void 0,
-    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
-  };
-};
-
-export { useDropdownBase };
-//# sourceMappingURL=useDropdownBase.js.map

package/dist-es/packages/lab/src/dropdown/useDropdownBase.js.map

@@ -1 +0,0 @@
-{"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 { useFormFieldProps } from \"../form-field-context\";\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    // onFocus: formFieldOnFocus,\n    // onBlur: formFieldOnBlur,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldProps();\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    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  }, [onOpenChange, setIsOpen]);\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: openOnFocus && !disabled ? handleTriggerFocus : undefined,\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":["measurements"],"mappings":"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"}

package/dist-es/packages/lab/src/editable-label/EditableLabel.css.js

@@ -1,7 +0,0 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".saltEditableLabel {\n  --saltInput-minWidth: 14px;\n  --saltInput-position: absolute;\n  --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n  --editableLabel-height: var(--saltEditableLabel-height, 26px);\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.saltEditableLabel .saltInput {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  right: var(--editableLabel-padding, 0);\n}\n\n.saltEditableLabel-input {\n  outline: none;\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };
-//# sourceMappingURL=EditableLabel.css.js.map

package/dist-es/packages/lab/src/editable-label/EditableLabel.css.js.map

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

package/dist-es/packages/lab/src/editable-label/EditableLabel.js

@@ -1,104 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
-import { forwardRef, useRef, useCallback } from 'react';
-import { useControlled, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import { Input } from '../input/Input.js';
-import '../input/StaticInputAdornment.js';
-import './EditableLabel.css.js';
-
-const classBase = "saltEditableLabel";
-const EditableLabel = forwardRef(function EditableLabel2({
-  className: classNameProp,
-  defaultEditing,
-  defaultValue,
-  editing: editingProp,
-  onChange,
-  onEnterEditMode,
-  onExitEditMode,
-  value: valueProp
-}, forwardedRef) {
-  const inputRef = useRef(null);
-  const [value, setValue] = useControlled({
-    controlled: valueProp,
-    default: defaultValue != null ? defaultValue : "",
-    name: "EditableLabel",
-    state: "value"
-  });
-  const [editing, setEditing] = useControlled({
-    controlled: editingProp,
-    default: defaultEditing != null ? defaultEditing : false,
-    name: "EditableLabel",
-    state: "editing"
-  });
-  const initialValue = useRef(value);
-  useIsomorphicLayoutEffect(() => {
-    if (editing) {
-      if (inputRef.current !== null) {
-        inputRef.current.select();
-        inputRef.current.focus();
-      }
-    }
-  }, [editing, inputRef]);
-  const enterEditMode = useCallback(() => {
-    setEditing(true);
-    onEnterEditMode && onEnterEditMode();
-  }, [onEnterEditMode, setEditing]);
-  const exitEditMode = ({
-    cancelEdit = false,
-    allowDeactivation = false
-  } = {}) => {
-    setEditing(false);
-    const originalValue = initialValue.current;
-    if (originalValue !== value) {
-      if (cancelEdit) {
-        setValue(originalValue);
-      } else {
-        initialValue.current = value;
-      }
-    }
-    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);
-  };
-  const handleChange = (evt) => {
-    const { value: value2 } = evt.target;
-    setValue(value2);
-    onChange && onChange(value2);
-  };
-  const handleDoubleClick = () => {
-    enterEditMode();
-  };
-  const handleBlur = () => {
-    exitEditMode({ allowDeactivation: true });
-  };
-  const handleKeyDown = (evt) => {
-    if (editing && evt.key === "Enter") {
-      evt.stopPropagation();
-      exitEditMode();
-    } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
-      evt.stopPropagation();
-    } else if (evt.key === "Escape") {
-      exitEditMode({ cancelEdit: true });
-    }
-  };
-  const className = clsx(classBase, classNameProp, {
-    [`${classBase}-editing`]: editing
-  });
-  return /* @__PURE__ */ jsx("div", {
-    className,
-    onDoubleClick: handleDoubleClick,
-    "data-text": value,
-    ref: forwardedRef,
-    children: editing ? /* @__PURE__ */ jsx(Input, {
-      inputProps: { className: `${classBase}-input` },
-      value,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      ref: inputRef,
-      style: { padding: 0 },
-      textAlign: "left"
-    }) : value
-  });
-});
-
-export { EditableLabel };
-//# sourceMappingURL=EditableLabel.js.map

package/dist-es/packages/lab/src/editable-label/EditableLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = clsx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}

package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.css.js

@@ -1,7 +0,0 @@
-import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-dropTarget-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: calc(var(--salt-size-unit) * 3);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-dropTarget-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background-emphasize);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-dropTarget-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-dropTarget-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
-styleInject(css_248z);
-
-export { css_248z as default };
-//# sourceMappingURL=FileDropZone.css.js.map

package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.css.js.map

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