@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.101

package/dist-cjs/dropdown/DropdownButton.js

@@ -1,21 +1,19 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
 var useFormFieldLegacyProps = require('../form-field-context-legacy/useFormFieldLegacyProps.js');
-var clsx = require('clsx');
-var React = require('react');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var DropdownButton$1 = require('./DropdownButton.css.js');
 
 const withBaseName = core.makePrefixer("saltDropdownButton");
-const DropdownButton = React.forwardRef(function DropdownButton2({
-  IconComponent = icons.ChevronDownIcon,
+const DropdownButton = react.forwardRef(function DropdownButton2({
+  IconComponent,
   ariaHideOptionRole,
   className,
   disabled,
@@ -35,41 +33,49 @@ const DropdownButton = React.forwardRef(function DropdownButton2({
     css: DropdownButton$1,
     window: targetWindow
   });
+  const { ExpandIcon } = core.useIcon();
+  const Icon = IconComponent === void 0 ? ExpandIcon : IconComponent;
   const { inFormField } = useFormFieldLegacyProps.useFormFieldLegacyProps();
-  return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-    className: clsx.clsx(
-      withBaseName(),
-      {
-        [withBaseName("fullwidth")]: fullWidth,
-        [withBaseName("formField")]: inFormField
-      },
-      className
-    ),
-    "data-testid": "dropdown-button",
-    disabled,
-    variant: "secondary",
-    ...rest,
-    ref,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: withBaseName("content"),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          "aria-hidden": ariaHideOptionRole ? "true" : void 0,
-          ...labelAriaAttributes,
-          className: withBaseName("buttonLabel"),
-          id: labelId,
-          role: "option",
-          children: label
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
-          className: withBaseName("icon"),
-          size: iconSize,
-          "aria-label": null,
-          "aria-hidden": "true"
-        })
-      ]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Button,
+    {
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          [withBaseName("fullwidth")]: fullWidth,
+          [withBaseName("formField")]: inFormField
+        },
+        className
+      ),
+      "data-testid": "dropdown-button",
+      disabled,
+      variant: "secondary",
+      ...rest,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("content"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": ariaHideOptionRole ? "true" : void 0,
+            ...labelAriaAttributes,
+            className: withBaseName("buttonLabel"),
+            id: labelId,
+            role: "option",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Icon,
+          {
+            className: withBaseName("icon"),
+            size: iconSize,
+            "aria-label": null,
+            "aria-hidden": "true"
+          }
+        )
+      ] })
+    }
+  );
 });
 
 exports.DropdownButton = DropdownButton;

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

@@ -1 +1 @@
-{"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 { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { clsx } from \"clsx\";\nimport { AriaAttributes, ComponentType, ForwardedRef, forwardRef } from \"react\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dropdownButtonCss from \"./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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n\n  const { inFormField } = useFormFieldLegacyProps();\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":["makePrefixer","forwardRef","DropdownButton","ChevronDownIcon","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","dropdownButtonCss","useFormFieldLegacyProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;;;AAyDA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAgB,GAAAC,qBAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;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,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,+CAAwB,EAAA,CAAA;AAIhD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;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,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAACH,cAAA,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,wBACCA,cAAA,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;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { DEFAULT_ICON_SIZE, type IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<IconProps>;\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,\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 targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n  const Icon = IconComponent === undefined ? ExpandIcon : IconComponent;\n  const { inFormField } = useFormFieldLegacyProps();\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          role=\"option\"\n        >\n          {label}\n        </span>\n        <Icon\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","DropdownButton","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","dropdownButtonCss","useIcon","useFormFieldLegacyProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;AA6DA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiBC,gBAAA,CAAW,SAASC,eAAAA,CAChD;AAAA,EACE,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA,GAAWC,uBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,sBAAA;AAAA,IACR,GAAA,EAAKC,gBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,YAAA,EAAQ;AAC/B,EAAA,MAAM,IAAA,GAAO,aAAA,KAAkB,MAAA,GAAY,UAAA,GAAa,aAAA;AACxD,EAAA,MAAM,EAAE,WAAA,EAAY,GAAIC,+CAAA,EAAwB;AAIhD,EAAA,uBACEC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAA,EAAY,iBAAA;AAAA,MACZ,QAAA;AAAA,MACA,OAAA,EAAQ,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,SAAS,CAAA,EACpC,QAAA,EAAA;AAAA,wBAAAH,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAA,GAAS,MAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,EAAA,EAAI,OAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YAEJ,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBACAA,cAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,IAAA,EAAM,QAAA;AAAA,YACN,YAAA,EAAY,IAAA;AAAA,YACZ,aAAA,EAAY;AAAA;AAAA;AACd,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist-cjs/dropdown/useClickAway.js

@@ -1,8 +1,6 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
+var react = require('react');
 
 const NO_HANDLERS = [];
 const useClickAway = ({
@@ -11,7 +9,7 @@ const useClickAway = ({
   isOpen,
   onClose
 }) => {
-  React.useEffect(() => {
+  react.useEffect(() => {
     const [clickHandler, escapeKeyHandler] = isOpen ? [
       (evt) => {
         var _a, _b;
@@ -36,7 +34,7 @@ const useClickAway = ({
         document.body.removeEventListener("keydown", escapeKeyHandler, true);
       }
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, popperRef, rootRef]);
 };
 
 exports.useClickAway = useClickAway;

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

@@ -1 +1 @@
-{"version":3,"file":"useClickAway.js","sources":["../src/dropdown/useClickAway.ts"],"sourcesContent":["import { RefObject, useEffect } from \"react\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: () => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              onClose();\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              onClose();\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose]);\n};\n"],"names":["useEffect"],"mappings":";;;;;;AAYA,MAAM,cAA2D,EAAC,CAAA;AAE3D,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AACJ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AAvB/B,QAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAwBY,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,EAAA,CAAC,EAAU,GAAA,SAAA,CAAA,OAAA,KAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC7B,CAAA,CAAA,IAAA,EAAA,CAAC,EAAQ,GAAA,OAAA,CAAA,OAAA,KAAR,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC3B,CAAA,CAAA,EAAA;AACA,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,OAAO,CAAC,CAAA,CAAA;AACtB;;;;"}
+{"version":3,"file":"useClickAway.js","sources":["../src/dropdown/useClickAway.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: () => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              onClose();\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              onClose();\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":["useEffect"],"mappings":";;;;AAYA,MAAM,cAA2D,EAAC;AAE3D,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MAAA,GACrC;AAAA,MACE,CAAC,GAAA,KAAoB;AAvB/B,QAAA,IAAA,EAAA,EAAA,EAAA;AAwBY,QAAA,MAAM,gBAAgB,GAAA,CAAI,MAAA;AAC1B,QAAA,IACE,EAAA,CAAC,EAAA,GAAA,SAAA,CAAU,OAAA,KAAV,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,QAAA,CAAS,aAAA,CAAA,CAAA,IAC7B,EAAA,CAAC,EAAA,GAAA,OAAA,CAAQ,OAAA,KAAR,IAAA,GAAA,MAAA,GAAA,EAAA,CAAiB,QAAA,CAAS,aAAA,CAAA,CAAA,EAC3B;AACA,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,MACA,CAAC,CAAA,KAAqB;AACpB,QAAA,IAAI,CAAA,CAAE,QAAQ,QAAA,EAAU;AACtB,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF;AAAA,KACF,GACA,WAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAA,EAAkB;AACpC,MAAA,QAAA,CAAS,IAAA,CAAK,gBAAA,CAAiB,WAAA,EAAa,YAAA,EAAc,IAAI,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAA,CAAK,gBAAA,CAAiB,SAAA,EAAW,gBAAA,EAAkB,IAAI,CAAA;AAAA,IAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAA,EAAkB;AACpC,QAAA,QAAA,CAAS,IAAA,CAAK,mBAAA,CAAoB,WAAA,EAAa,YAAA,EAAc,IAAI,CAAA;AACjE,QAAA,QAAA,CAAS,IAAA,CAAK,mBAAA,CAAoB,SAAA,EAAW,gBAAA,EAAkB,IAAI,CAAA;AAAA,MACrE;AAAA,IACF,CAAA;AAAA,EACF,GAAG,CAAC,MAAA,EAAQ,OAAA,EAAS,SAAA,EAAW,OAAO,CAAC,CAAA;AAC1C;;;;"}

package/dist-cjs/dropdown/useDropdown.js

@@ -1,20 +1,17 @@
 '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');
+var react = require('react');
 require('../common-hooks/collectionProvider.js');
 var itemToString = require('../common-hooks/itemToString.js');
 require('../common-hooks/keyUtils.js');
-require('../utils/useFloatingUI.js');
 require('react/jsx-runtime');
 require('../responsive/useResizeObserver.js');
+require('../list/Highlighter.js');
+require('../list/List.js');
+require('../list/ListItem.js');
+var useList = require('../list/useList.js');
+require('../list/VirtualizedList.js');
 
 const NULL_REF = { current: null };
 const useDropdown = ({
@@ -28,16 +25,17 @@ const useDropdown = ({
   onHighlight,
   onOpenChange,
   onSelectionChange,
+  onSelect,
   selected,
   selectionStrategy
 }) => {
   const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
   const [isOpen, setIsOpen] = core.useControlled({
     controlled: isOpenProp,
-    default: defaultIsOpen != null ? defaultIsOpen : false,
+    default: defaultIsOpen ?? false,
     name: "useDropdownList"
   });
-  const handleSelectionChange = React.useCallback(
+  const handleSelectionChange = react.useCallback(
     (evt, selected2) => {
       if (!isMultiSelect) {
         setIsOpen(false);
@@ -45,14 +43,25 @@ const useDropdown = ({
       }
       onSelectionChange == null ? void 0 : onSelectionChange(evt, selected2);
     },
-    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]
+    [isMultiSelect, onOpenChange, onSelectionChange]
+  );
+  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]
   );
   const listHook = useList.useList({
     collectionHook,
-    defaultHighlightedIndex: (defaultHighlightedIndexProp != null ? defaultHighlightedIndexProp : highlightedIndexProp === void 0) ? 0 : void 0,
+    defaultHighlightedIndex: defaultHighlightedIndexProp ?? highlightedIndexProp === void 0 ? 0 : void 0,
     defaultSelected,
     label: "useDropDownList",
     onSelectionChange: handleSelectionChange,
+    onSelect: handleSelect,
     containerRef: NULL_REF,
     highlightedIndex: highlightedIndexProp,
     onHighlight,
@@ -60,28 +69,27 @@ const useDropdown = ({
     selectionStrategy,
     tabToSelect: !isMultiSelect
   });
-  const handleOpenChange = React.useCallback(
+  const handleOpenChange = react.useCallback(
     (open) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open);
     },
-    [onOpenChange, setIsOpen]
+    [onOpenChange]
   );
-  const triggerLabel = React.useMemo(() => {
+  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) {
+      }
+      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);
+      return `${selectedItems.length} items selected`;
     }
+    const selectedItem = listHook.selected;
+    return selectedItem == null || selectedItem.value === null ? void 0 : itemToString$1(selectedItem.value);
   }, [isMultiSelect, itemToString$1, listHook.selected]);
   return {
     isOpen,

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

@@ -1 +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  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","useControlled","useCallback","selected","useList","useMemo"],"mappings":"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"}
+{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  type CollectionItem,\n  itemToString as defaultItemToString,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n} from \"../common-hooks\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\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: (open: boolean) => void;\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],\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],\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],\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      }\n      if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      }\n      return `${selectedItems.length} items selected`;\n    }\n    const selectedItem = listHook.selected as CollectionItem<Item>;\n    return selectedItem == null || selectedItem.value === null\n      ? undefined\n      : itemToString(selectedItem.value);\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

@@ -1,36 +1,32 @@
 '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('../utils/useFloatingUI.js');
+var react = require('react');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
 var useFormFieldLegacyProps = require('../form-field-context-legacy/useFormFieldLegacyProps.js');
+require('react/jsx-runtime');
+var useResizeObserver = require('../responsive/useResizeObserver.js');
+var useClickAway = require('./useClickAway.js');
 
 const NO_OBSERVER = [];
 const useDropdownBase = ({
   ariaLabelledBy: ariaLabelledByProp,
   defaultIsOpen,
   disabled,
+  // TODO check how we're using fullWidth, do we need a separate value for the popup component
   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) => {
+  const justFocused = react.useRef(null);
+  const popperRef = react.useRef(null);
+  const popperCallbackRef = react.useCallback((element) => {
     popperRef.current = element;
   }, []);
   const [isOpen, setIsOpen] = core.useControlled({
@@ -44,24 +40,24 @@ const useDropdownBase = ({
     setFocused: setFormFieldFocused,
     a11yProps: { "aria-labelledby": ariaLabelledBy, ...restA11yProps } = {}
   } = useFormFieldLegacyProps.useFormFieldLegacyProps();
-  const [popup, setPopup] = React.useState({
-    width: (_a = popupWidthProp != null ? popupWidthProp : width) != null ? _a : 0
+  const [popup, setPopup] = react.useState({
+    width: popupWidthProp ?? width ?? 0
   });
-  const showDropdown = React.useCallback(() => {
+  const showDropdown = react.useCallback(() => {
     setIsOpen(true);
     onOpenChange == null ? void 0 : onOpenChange(true);
-  }, [onOpenChange, setIsOpen]);
-  const hideDropdown = React.useCallback(() => {
+  }, [onOpenChange]);
+  const hideDropdown = react.useCallback(() => {
     setIsOpen(false);
     onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange, setIsOpen]);
+  }, [onOpenChange]);
   useClickAway.useClickAway({
     popperRef,
     rootRef,
     isOpen,
     onClose: hideDropdown
   });
-  const handleTriggerFocus = React.useCallback(() => {
+  const handleTriggerFocus = react.useCallback(() => {
     if (!disabled) {
       setFormFieldFocused == null ? void 0 : setFormFieldFocused(true);
       if (openOnFocus) {
@@ -72,11 +68,11 @@ const useDropdownBase = ({
         }, 1e3);
       }
     }
-  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);
-  const handleTriggerBlur = React.useCallback(() => {
+  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused]);
+  const handleTriggerBlur = react.useCallback(() => {
     setFormFieldFocused == null ? void 0 : setFormFieldFocused(false);
   }, [setFormFieldFocused]);
-  const handleTriggerToggle = React.useCallback(
+  const handleTriggerToggle = react.useCallback(
     (e) => {
       if (["Enter", " "].indexOf(
         e.key
@@ -86,9 +82,9 @@ const useDropdownBase = ({
         onOpenChange == null ? void 0 : onOpenChange(newIsOpen);
       }
     },
-    [isOpen, setIsOpen, onOpenChange]
+    [isOpen, onOpenChange]
   );
-  const handleKeydown = React.useCallback(
+  const handleKeydown = react.useCallback(
     (evt) => {
       if ((evt.key === "Tab" || evt.key === "Escape") && isOpen) {
         hideDropdown();
@@ -101,16 +97,15 @@ const useDropdownBase = ({
     },
     [hideDropdown, isOpen, onKeyDownProp, showDropdown]
   );
-  const fullWidth = fullWidthProp != null ? fullWidthProp : inFormField;
-  const measurements2 = fullWidth ? useResizeObserver.WidthOnly : NO_OBSERVER;
-  useResizeObserver.useResizeObserver(rootRef, measurements2, setPopup, fullWidth);
+  const fullWidth = fullWidthProp ?? inFormField;
+  const measurements = fullWidth ? useResizeObserver.WidthOnly : NO_OBSERVER;
+  useResizeObserver.useResizeObserver(rootRef, measurements, 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(" ");
     }
+    return [labelledBy, labelledByProp].filter((x) => !!x).join(" ");
   };
   const triggerProps = {
     ...restA11yProps,

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

@@ -1 +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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"}
+{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { type measurements, useResizeObserver, WidthOnly } from \"../responsive\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\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  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]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange]);\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]);\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, 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    }\n    return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n  };\n\n  // TODO do we use aria-popup - valid values are menu, dialog, 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","WidthOnly","useResizeObserver"],"mappings":"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"}