@easypost/easy-ui 1.0.0-alpha.112 → 1.0.0-alpha.113

package/MultiSelect/index.js

@@ -51,12 +51,13 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../__chunks__/jsx-runtime-CH1d66I3.js");
 const React = require("react");
 const Button = require("../__chunks__/Button-BpQFyL49.js");
 const utils = require("../__chunks__/utils-CRWC8dEm.js");
 const Input = require("../__chunks__/Input-CwXLFYJK.js");
 const Label = require("../__chunks__/Label-B6GdFt8f.js");
-const PillGroup = require("../__chunks__/PillGroup-CAHVIlU0.js");
+const PillGroup = require("../__chunks__/PillGroup-rTS853Rr.js");
 const Dialog = require("../__chunks__/Dialog-iU9BJB0o.js");
 const Text = require("../__chunks__/Text-B9fD1q8n.js");
 const filterDOMProps = require("../__chunks__/filterDOMProps-p6wKN-SS.js");
@@ -81,10 +82,10 @@ const useSelectableList = require("../__chunks__/useSelectableList-DeSKmxTV.js")
 const useLocalizedStringFormatter = require("../__chunks__/useLocalizedStringFormatter-DxxEMHfO.js");
 const useMenuTrigger = require("../__chunks__/useMenuTrigger-DQl6sBWY.js");
 const useTextField = require("../__chunks__/useTextField-BlTYl2ML.js");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Icon = require("../__chunks__/Icon-BVa5ddiD.js");
 const utilities = require("../__chunks__/utilities-Q88aR_Y9.js");
-const Spinner = require("../__chunks__/Spinner-D0ifPtVV.js");
-const Text$1 = require("../__chunks__/Text-CSESKR_s.js");
+const Spinner = require("../__chunks__/Spinner-Dd68v9QX.js");
+const Text$1 = require("../__chunks__/Text-C4CEsglh.js");
 const utilities_css = require("../utilities/css.js");
 const utilities_useScrollbar = require("../utilities/useScrollbar.js");
 const VisuallyHidden = require("../__chunks__/VisuallyHidden-CIjowwM_.js");
@@ -1803,7 +1804,7 @@ function MultiSelectDropdown(props) {
   const style = __spreadValues(__spreadValues({
     width
   }, utilities_css.getComponentToken("menu", "item_height", `${utilities_css.pxToRem(utilities.ITEM_HEIGHT)}rem`)), utilities_css.getComponentToken("menu", "padding.y", `${utilities_css.pxToRem(utilities.Y_PADDING_INSIDE_OVERLAY)}rem`));
-  return React.createElement(Dialog.$07b14b47974efb58$export$5b6b19405a83ff9d, {
+  return jsxRuntime.jsxRuntimeExports.jsx(Dialog.$07b14b47974efb58$export$5b6b19405a83ff9d, {
     isNonModal: true,
     className: styles$1.popover,
     style,
@@ -1812,43 +1813,51 @@ function MultiSelectDropdown(props) {
     trigger: "ComboBox",
     maxHeight: utilities.getMenuPopoverMaxHeight({
       maxItemsUntilScroll
+    }),
+    children: isLoading ? jsxRuntime.jsxRuntimeExports.jsx("div", {
+      className: styles$1.spinnerContainer,
+      children: jsxRuntime.jsxRuntimeExports.jsx("div", {
+        className: styles$1.spinner,
+        children: jsxRuntime.jsxRuntimeExports.jsx(Spinner.Spinner, {
+          isIndeterminate: true,
+          "aria-label": "Loading",
+          size: "sm"
+        })
+      })
+    }) : jsxRuntime.jsxRuntimeExports.jsx(ScrollContainer, {
+      scrollRef: menuRef,
+      children: jsxRuntime.jsxRuntimeExports.jsx(PillGroup.$eed445e0843c11d0$export$41f133550aa26f48, {
+        renderEmptyState: () => jsxRuntime.jsxRuntimeExports.jsx("div", {
+          className: styles$1.listEmptyState,
+          children: jsxRuntime.jsxRuntimeExports.jsx(Text$1.Text, {
+            variant: "subtitle2",
+            color: "neutral.400",
+            children: "No results found"
+          })
+        }),
+        selectionMode: "multiple",
+        children
+      })
     })
-  }, isLoading ? React.createElement("div", {
-    className: styles$1.spinnerContainer
-  }, React.createElement("div", {
-    className: styles$1.spinner
-  }, React.createElement(Spinner.Spinner, {
-    isIndeterminate: true,
-    "aria-label": "Loading",
-    size: "sm"
-  }))) : React.createElement(ScrollContainer, {
-    scrollRef: menuRef
-  }, React.createElement(PillGroup.$eed445e0843c11d0$export$41f133550aa26f48, {
-    renderEmptyState: () => React.createElement("div", {
-      className: styles$1.listEmptyState
-    }, React.createElement(Text$1.Text, {
-      variant: "subtitle2",
-      color: "neutral.400"
-    }, "No results found")),
-    selectionMode: "multiple"
-  }, children)));
+  });
 }
 function MultiSelectDropdownOption(props) {
-  return React.createElement(PillGroup.$eed445e0843c11d0$export$a11e76429ed99b4, __spreadProps(__spreadValues({}, props), {
+  return jsxRuntime.jsxRuntimeExports.jsx(PillGroup.$eed445e0843c11d0$export$a11e76429ed99b4, __spreadProps(__spreadValues({}, props), {
     className: styles$1.option
   }));
 }
 function MultiSelectDropdownOptionText(props) {
-  return React.createElement(Text$1.Text, __spreadValues({
+  return jsxRuntime.jsxRuntimeExports.jsx(Text$1.Text, __spreadValues({
     variant: "body1"
   }, props));
 }
 function ScrollContainer({ scrollRef, children }) {
   utilities_useScrollbar.useScrollbar(scrollRef, "ezui-os-theme-overlay");
-  return React.createElement("div", {
+  return jsxRuntime.jsxRuntimeExports.jsx("div", {
     className: styles$1.menu,
-    ref: scrollRef
-  }, children);
+    ref: scrollRef,
+    children
+  });
 }
 function useElementWidth(elementRef) {
   const [width, setWidth] = React.useState(0);
@@ -1928,61 +1937,75 @@ function MultiSelect(props) {
     onInputChange("");
     setTempSelectedKey(null);
   };
-  return React.createElement("div", {
+  return jsxRuntime.jsxRuntimeExports.jsxs("div", {
     ref: rootRef,
-    className: styles.MultiSelect
-  }, selectedItems.length > 0 ? React.createElement(PillGroup.PillGroup, {
-    items: selectedItems,
-    horizontalStackContainerProps: {
-      gap: "1"
-    },
-    onRemove: onRemoveSelectedItem,
-    label: "Selected items",
-    background: pillBackground,
-    isBorderless: isPillBorderless
-  }, renderPill) : React.createElement(VisuallyHidden.$5c3e21d68f1c4674$export$439d29a4e110a164, null, React.createElement(Text$1.Text, null, "No selected items")), React.createElement("div", {
-    className: styles.comboBoxContainer
-  }, React.createElement($d01f2c01039c0eec$export$72b9695b8216309a, {
-    className: styles.comboBox,
-    allowsEmptyCollection: true,
-    "aria-label": "Available items",
-    selectedKey: tempSelectedKey,
-    onSelectionChange: onComboBoxSelectionChange,
-    items: dropdownItems,
-    inputValue,
-    onInputChange: onComboBoxInputChange,
-    disabledKeys
-  }, React.createElement("div", {
-    className: styles.inputContainer
-  }, React.createElement(Input.$3985021b0ad6602f$export$f5b8910cec6cf069, {
-    placeholder,
-    className: styles.input,
-    onBlur: onComboBoxInputBlur,
-    onKeyDownCapture: onComboBoxInputKeyDownCapture
-  }), React.createElement(VisuallyHidden.$5c3e21d68f1c4674$export$439d29a4e110a164, null, React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
-    type: "button",
-    slot: "remove",
-    "aria-label": "Clear",
-    ref: clearComboBoxButtonRef
-  }))), React.createElement(MultiSelectDropdown, {
-    triggerRef: rootRef,
-    menuRef,
-    maxItemsUntilScroll,
-    isLoading,
-    width: rootWidth
-  }, children)), React.createElement("button", {
-    type: "button",
-    className: styles.dropdownArrowButton,
-    onClick: () => {
-      var _a;
-      return (_a = clearComboBoxButtonRef.current) == null ? void 0 : _a.click();
-    },
-    tabIndex: -1
-  }, React.createElement(Text$1.Text, {
-    visuallyHidden: true
-  }, "Open dropdown"), React.createElement(Icon.Icon, {
-    symbol: KeyboardArrowDown
-  }))));
+    className: styles.MultiSelect,
+    children: [selectedItems.length > 0 ? jsxRuntime.jsxRuntimeExports.jsx(PillGroup.PillGroup, {
+      items: selectedItems,
+      horizontalStackContainerProps: {
+        gap: "1"
+      },
+      onRemove: onRemoveSelectedItem,
+      label: "Selected items",
+      background: pillBackground,
+      isBorderless: isPillBorderless,
+      children: renderPill
+    }) : jsxRuntime.jsxRuntimeExports.jsx(VisuallyHidden.$5c3e21d68f1c4674$export$439d29a4e110a164, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(Text$1.Text, {
+        children: "No selected items"
+      })
+    }), jsxRuntime.jsxRuntimeExports.jsxs("div", {
+      className: styles.comboBoxContainer,
+      children: [jsxRuntime.jsxRuntimeExports.jsxs($d01f2c01039c0eec$export$72b9695b8216309a, {
+        className: styles.comboBox,
+        allowsEmptyCollection: true,
+        "aria-label": "Available items",
+        selectedKey: tempSelectedKey,
+        onSelectionChange: onComboBoxSelectionChange,
+        items: dropdownItems,
+        inputValue,
+        onInputChange: onComboBoxInputChange,
+        disabledKeys,
+        children: [jsxRuntime.jsxRuntimeExports.jsxs("div", {
+          className: styles.inputContainer,
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Input.$3985021b0ad6602f$export$f5b8910cec6cf069, {
+            placeholder,
+            className: styles.input,
+            onBlur: onComboBoxInputBlur,
+            onKeyDownCapture: onComboBoxInputKeyDownCapture
+          }), jsxRuntime.jsxRuntimeExports.jsx(VisuallyHidden.$5c3e21d68f1c4674$export$439d29a4e110a164, {
+            children: jsxRuntime.jsxRuntimeExports.jsx(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+              type: "button",
+              slot: "remove",
+              "aria-label": "Clear",
+              ref: clearComboBoxButtonRef
+            })
+          })]
+        }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelectDropdown, {
+          triggerRef: rootRef,
+          menuRef,
+          maxItemsUntilScroll,
+          isLoading,
+          width: rootWidth,
+          children
+        })]
+      }), jsxRuntime.jsxRuntimeExports.jsxs("button", {
+        type: "button",
+        className: styles.dropdownArrowButton,
+        onClick: () => {
+          var _a;
+          return (_a = clearComboBoxButtonRef.current) == null ? void 0 : _a.click();
+        },
+        tabIndex: -1,
+        children: [jsxRuntime.jsxRuntimeExports.jsx(Text$1.Text, {
+          visuallyHidden: true,
+          children: "Open dropdown"
+        }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+          symbol: KeyboardArrowDown
+        })]
+      })]
+    })]
+  });
 }
 MultiSelect.Pill = PillGroup.PillGroup.Pill;
 MultiSelect.Option = MultiSelectDropdownOption;

package/MultiSelect/index.mjs

@@ -49,14 +49,15 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import { j as jsxRuntimeExports } from "../__chunks__/jsx-runtime-DTpFD6nx.mjs";
 import * as React from "react";
 import React__default, { useState, useMemo, useRef, useCallback, useEffect, useReducer, createContext, forwardRef } from "react";
 import { $ as $d2b4bc8c273e7be6$export$24d547caef80ccd1, a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-B4DxcTvZ.mjs";
 import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, a as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $64fa3d84918910a7$export$2881499e37b75b9a } from "../__chunks__/utils-C1be5hOp.mjs";
 import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $ee014567cb39d3f0$export$ff05c3ac10437e03, c as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../__chunks__/Input-BIRbdEcT.mjs";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../__chunks__/Label-LpYJUKnw.mjs";
-import { $ as $0d86e9c8f07f9a7b$export$79c0c687a5963b0a, a as $eed445e0843c11d0$export$7ff8f37d2d81a48d, b as $e1995378a142960e$export$bf788dd355e3a401, c as $eed445e0843c11d0$export$7c5906fe4f1f2af2, d as $eed445e0843c11d0$export$41f133550aa26f48, e as $eed445e0843c11d0$export$a11e76429ed99b4, P as PillGroup } from "../__chunks__/PillGroup-DjLJ4wVb.mjs";
-import { f } from "../__chunks__/PillGroup-DjLJ4wVb.mjs";
+import { $ as $0d86e9c8f07f9a7b$export$79c0c687a5963b0a, a as $eed445e0843c11d0$export$7ff8f37d2d81a48d, b as $e1995378a142960e$export$bf788dd355e3a401, c as $eed445e0843c11d0$export$7c5906fe4f1f2af2, d as $eed445e0843c11d0$export$41f133550aa26f48, e as $eed445e0843c11d0$export$a11e76429ed99b4, P as PillGroup } from "../__chunks__/PillGroup-EJ8t8SrT.mjs";
+import { f } from "../__chunks__/PillGroup-EJ8t8SrT.mjs";
 import { c as $de32f1b87079253c$export$d2f961adcb0afbe, d as $07b14b47974efb58$export$9b9a0cd73afb7ca4, a as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../__chunks__/Dialog-DIhV589X.mjs";
 import { $ as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../__chunks__/Text-BBBs9zA4.mjs";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../__chunks__/filterDOMProps-eGTqWSTd.mjs";
@@ -81,10 +82,10 @@ import { b as $2a25aae57d74318e$export$a05409b8bb224a5a, a as $453cc9f0df89c0a5$
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../__chunks__/useLocalizedStringFormatter-DWQ_olZl.mjs";
 import { $ as $168583247155ddda$export$dc9c12ed27dd1b49 } from "../__chunks__/useMenuTrigger-e_p0x3OT.mjs";
 import { $ as $2d73ec29415bd339$export$712718f7aec83d5 } from "../__chunks__/useTextField-0Mbs_DmY.mjs";
-import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { I as Icon } from "../__chunks__/Icon-DzTns8u5.mjs";
 import { D as DEFAULT_MAX_ITEMS_UNTIL_SCROLL, Y as Y_PADDING_INSIDE_OVERLAY, I as ITEM_HEIGHT, e as getMenuPopoverMaxHeight } from "../__chunks__/utilities-CBYsZn-t.mjs";
-import { S as Spinner } from "../__chunks__/Spinner-DOmPV59I.mjs";
-import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
+import { S as Spinner } from "../__chunks__/Spinner-2PFCOK3I.mjs";
+import { T as Text } from "../__chunks__/Text-u9mYLeWj.mjs";
 import { getComponentToken, pxToRem } from "../utilities/css.mjs";
 import { useScrollbar } from "../utilities/useScrollbar.mjs";
 import { a as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../__chunks__/VisuallyHidden-BrpRPZGD.mjs";
@@ -1786,7 +1787,7 @@ function MultiSelectDropdown(props) {
   const style = __spreadValues(__spreadValues({
     width
   }, getComponentToken("menu", "item_height", `${pxToRem(ITEM_HEIGHT)}rem`)), getComponentToken("menu", "padding.y", `${pxToRem(Y_PADDING_INSIDE_OVERLAY)}rem`));
-  return React__default.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, {
+  return jsxRuntimeExports.jsx($07b14b47974efb58$export$5b6b19405a83ff9d, {
     isNonModal: true,
     className: styles$1.popover,
     style,
@@ -1795,43 +1796,51 @@ function MultiSelectDropdown(props) {
     trigger: "ComboBox",
     maxHeight: getMenuPopoverMaxHeight({
       maxItemsUntilScroll
+    }),
+    children: isLoading ? jsxRuntimeExports.jsx("div", {
+      className: styles$1.spinnerContainer,
+      children: jsxRuntimeExports.jsx("div", {
+        className: styles$1.spinner,
+        children: jsxRuntimeExports.jsx(Spinner, {
+          isIndeterminate: true,
+          "aria-label": "Loading",
+          size: "sm"
+        })
+      })
+    }) : jsxRuntimeExports.jsx(ScrollContainer, {
+      scrollRef: menuRef,
+      children: jsxRuntimeExports.jsx($eed445e0843c11d0$export$41f133550aa26f48, {
+        renderEmptyState: () => jsxRuntimeExports.jsx("div", {
+          className: styles$1.listEmptyState,
+          children: jsxRuntimeExports.jsx(Text, {
+            variant: "subtitle2",
+            color: "neutral.400",
+            children: "No results found"
+          })
+        }),
+        selectionMode: "multiple",
+        children
+      })
     })
-  }, isLoading ? React__default.createElement("div", {
-    className: styles$1.spinnerContainer
-  }, React__default.createElement("div", {
-    className: styles$1.spinner
-  }, React__default.createElement(Spinner, {
-    isIndeterminate: true,
-    "aria-label": "Loading",
-    size: "sm"
-  }))) : React__default.createElement(ScrollContainer, {
-    scrollRef: menuRef
-  }, React__default.createElement($eed445e0843c11d0$export$41f133550aa26f48, {
-    renderEmptyState: () => React__default.createElement("div", {
-      className: styles$1.listEmptyState
-    }, React__default.createElement(Text, {
-      variant: "subtitle2",
-      color: "neutral.400"
-    }, "No results found")),
-    selectionMode: "multiple"
-  }, children)));
+  });
 }
 function MultiSelectDropdownOption(props) {
-  return React__default.createElement($eed445e0843c11d0$export$a11e76429ed99b4, __spreadProps(__spreadValues({}, props), {
+  return jsxRuntimeExports.jsx($eed445e0843c11d0$export$a11e76429ed99b4, __spreadProps(__spreadValues({}, props), {
     className: styles$1.option
   }));
 }
 function MultiSelectDropdownOptionText(props) {
-  return React__default.createElement(Text, __spreadValues({
+  return jsxRuntimeExports.jsx(Text, __spreadValues({
     variant: "body1"
   }, props));
 }
 function ScrollContainer({ scrollRef, children }) {
   useScrollbar(scrollRef, "ezui-os-theme-overlay");
-  return React__default.createElement("div", {
+  return jsxRuntimeExports.jsx("div", {
     className: styles$1.menu,
-    ref: scrollRef
-  }, children);
+    ref: scrollRef,
+    children
+  });
 }
 function useElementWidth(elementRef) {
   const [width, setWidth] = useState(0);
@@ -1911,61 +1920,75 @@ function MultiSelect(props) {
     onInputChange("");
     setTempSelectedKey(null);
   };
-  return React__default.createElement("div", {
+  return jsxRuntimeExports.jsxs("div", {
     ref: rootRef,
-    className: styles.MultiSelect
-  }, selectedItems.length > 0 ? React__default.createElement(PillGroup, {
-    items: selectedItems,
-    horizontalStackContainerProps: {
-      gap: "1"
-    },
-    onRemove: onRemoveSelectedItem,
-    label: "Selected items",
-    background: pillBackground,
-    isBorderless: isPillBorderless
-  }, renderPill) : React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, null, React__default.createElement(Text, null, "No selected items")), React__default.createElement("div", {
-    className: styles.comboBoxContainer
-  }, React__default.createElement($d01f2c01039c0eec$export$72b9695b8216309a, {
-    className: styles.comboBox,
-    allowsEmptyCollection: true,
-    "aria-label": "Available items",
-    selectedKey: tempSelectedKey,
-    onSelectionChange: onComboBoxSelectionChange,
-    items: dropdownItems,
-    inputValue,
-    onInputChange: onComboBoxInputChange,
-    disabledKeys
-  }, React__default.createElement("div", {
-    className: styles.inputContainer
-  }, React__default.createElement($3985021b0ad6602f$export$f5b8910cec6cf069, {
-    placeholder,
-    className: styles.input,
-    onBlur: onComboBoxInputBlur,
-    onKeyDownCapture: onComboBoxInputKeyDownCapture
-  }), React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, null, React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
-    type: "button",
-    slot: "remove",
-    "aria-label": "Clear",
-    ref: clearComboBoxButtonRef
-  }))), React__default.createElement(MultiSelectDropdown, {
-    triggerRef: rootRef,
-    menuRef,
-    maxItemsUntilScroll,
-    isLoading,
-    width: rootWidth
-  }, children)), React__default.createElement("button", {
-    type: "button",
-    className: styles.dropdownArrowButton,
-    onClick: () => {
-      var _a;
-      return (_a = clearComboBoxButtonRef.current) == null ? void 0 : _a.click();
-    },
-    tabIndex: -1
-  }, React__default.createElement(Text, {
-    visuallyHidden: true
-  }, "Open dropdown"), React__default.createElement(Icon, {
-    symbol: KeyboardArrowDown
-  }))));
+    className: styles.MultiSelect,
+    children: [selectedItems.length > 0 ? jsxRuntimeExports.jsx(PillGroup, {
+      items: selectedItems,
+      horizontalStackContainerProps: {
+        gap: "1"
+      },
+      onRemove: onRemoveSelectedItem,
+      label: "Selected items",
+      background: pillBackground,
+      isBorderless: isPillBorderless,
+      children: renderPill
+    }) : jsxRuntimeExports.jsx($5c3e21d68f1c4674$export$439d29a4e110a164, {
+      children: jsxRuntimeExports.jsx(Text, {
+        children: "No selected items"
+      })
+    }), jsxRuntimeExports.jsxs("div", {
+      className: styles.comboBoxContainer,
+      children: [jsxRuntimeExports.jsxs($d01f2c01039c0eec$export$72b9695b8216309a, {
+        className: styles.comboBox,
+        allowsEmptyCollection: true,
+        "aria-label": "Available items",
+        selectedKey: tempSelectedKey,
+        onSelectionChange: onComboBoxSelectionChange,
+        items: dropdownItems,
+        inputValue,
+        onInputChange: onComboBoxInputChange,
+        disabledKeys,
+        children: [jsxRuntimeExports.jsxs("div", {
+          className: styles.inputContainer,
+          children: [jsxRuntimeExports.jsx($3985021b0ad6602f$export$f5b8910cec6cf069, {
+            placeholder,
+            className: styles.input,
+            onBlur: onComboBoxInputBlur,
+            onKeyDownCapture: onComboBoxInputKeyDownCapture
+          }), jsxRuntimeExports.jsx($5c3e21d68f1c4674$export$439d29a4e110a164, {
+            children: jsxRuntimeExports.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+              type: "button",
+              slot: "remove",
+              "aria-label": "Clear",
+              ref: clearComboBoxButtonRef
+            })
+          })]
+        }), jsxRuntimeExports.jsx(MultiSelectDropdown, {
+          triggerRef: rootRef,
+          menuRef,
+          maxItemsUntilScroll,
+          isLoading,
+          width: rootWidth,
+          children
+        })]
+      }), jsxRuntimeExports.jsxs("button", {
+        type: "button",
+        className: styles.dropdownArrowButton,
+        onClick: () => {
+          var _a;
+          return (_a = clearComboBoxButtonRef.current) == null ? void 0 : _a.click();
+        },
+        tabIndex: -1,
+        children: [jsxRuntimeExports.jsx(Text, {
+          visuallyHidden: true,
+          children: "Open dropdown"
+        }), jsxRuntimeExports.jsx(Icon, {
+          symbol: KeyboardArrowDown
+        })]
+      })]
+    })]
+  });
 }
 MultiSelect.Pill = PillGroup.Pill;
 MultiSelect.Option = MultiSelectDropdownOption;

package/MultiSelect/utilities.d.ts

@@ -1,3 +1,3 @@
 import { RefObject } from "react";
-export declare function useElementWidth(elementRef: RefObject<HTMLDivElement>): number;
+export declare function useElementWidth(elementRef: RefObject<HTMLDivElement | null>): number;
 //# sourceMappingURL=utilities.d.ts.map

package/MultiSelect/utilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/utilities.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,wBAAgB,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,UAcpE"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/utilities.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,wBAAgB,eAAe,CAAC,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,UAc3E"}