@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.120

package/__chunks__/SelectOverlay-C23EXgqX.mjs

@@ -0,0 +1,575 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a } from "./useFormValidation-Bdyc51B-.mjs";
+import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "./useListState-3s3ZON5A.mjs";
+import { a as $fc909762b330b746$export$61c6a8c84e605fb6, d as $337b884510726a0d$export$c6fdb837b070b4ff } from "./Overlay-Dkjxuk6V.mjs";
+import { $ as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useControlledState-BPR3PrW4.mjs";
+import React__default, { useState, useMemo, useRef, useCallback, createContext, useContext } from "react";
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $bdb11010cef70236$export$f680877a34711e37, e as $ff5963eb1fccf552$export$e08e3b67e392101e } from "./mergeProps-COnPag8r.mjs";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-eGTqWSTd.mjs";
+import { b as $2a25aae57d74318e$export$a05409b8bb224a5a } from "./useSelectableList-CQpiui2v.mjs";
+import { c as $fb3050f43d946246$export$e32c88dfddc6e1d8 } from "./useSelectableItem-BP2rZ6Gy.mjs";
+import { w as $507fabe10e71c6fb$export$8397ddfc504fdb9a } from "./useFocusVisible-DDvp2PwR.mjs";
+import { $ as $325a3faab7a68acd$export$a16aca283550c30d } from "./useCollator-BR9eXLiM.mjs";
+import { $ as $2baaea4c71418dea$export$294aa081a6c6f55d } from "./useField-C5BKHYDX.mjs";
+import { $ as $168583247155ddda$export$dc9c12ed27dd1b49 } from "./useMenuTrigger-e_p0x3OT.mjs";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-DjC42YuS.mjs";
+import { $ as $5c3e21d68f1c4674$export$a966af930f325cab } from "./VisuallyHidden-BrpRPZGD.mjs";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { T as Text } from "./Text-D6oT5WJQ.mjs";
+import { $ as $293f70390ea03370$export$497855f14858aa34, a as $af383d3bef1cfdc9$export$c3f9f39876e4bc7, b as $c132121280ec012d$export$50eacbbf140a3141 } from "./useListBoxSection-BdO_lWyz.mjs";
+import { $ as $c1d7fb2ec91bae71$export$6d08773d2e66f8f2 } from "./Item-FD89BR0i.mjs";
+import { g as getUnmergedPopoverStyles, D as DEFAULT_MAX_ITEMS_UNTIL_SCROLL, a as DEFAULT_WIDTH, b as DEFAULT_PLACEMENT, O as OVERLAY_OFFSET, c as OVERLAY_PADDING_FROM_CONTAINER, I as ITEM_HEIGHT, Y as Y_PADDING_INSIDE_OVERLAY } from "./utilities-CBYsZn-t.mjs";
+import { useScrollbar } from "../utilities/useScrollbar.mjs";
+import { $ as $f4b273590fab9f93$export$52210f68a14655d0, a as $9fc4852771d079eb$export$6e2c8f0811a474ce } from "./useTriggerWidth-CBghrvjy.mjs";
+import { $ as $f2f8a6077418541e$export$542a6fd13ac93354, a as $86ea4cb521eb2e37$export$2317d149ed6f78c4 } from "./usePopover-BTGHi16_.mjs";
+function $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props) {
+  let { selectionMode = "single" } = props;
+  let triggerState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let [focusStrategy, setFocusStrategy] = useState(null);
+  let defaultValue = useMemo(() => {
+    var _props_defaultSelectedKey2;
+    return props.defaultValue !== void 0 ? props.defaultValue : selectionMode === "single" ? (_props_defaultSelectedKey2 = props.defaultSelectedKey) !== null && _props_defaultSelectedKey2 !== void 0 ? _props_defaultSelectedKey2 : null : [];
+  }, [
+    props.defaultValue,
+    props.defaultSelectedKey,
+    selectionMode
+  ]);
+  let value = useMemo(() => {
+    return props.value !== void 0 ? props.value : selectionMode === "single" ? props.selectedKey : void 0;
+  }, [
+    props.value,
+    props.selectedKey,
+    selectionMode
+  ]);
+  let [controlledValue, setControlledValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, props.onChange);
+  let displayValue = selectionMode === "single" && Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
+  let setValue = (value2) => {
+    if (selectionMode === "single") {
+      var _props_onSelectionChange;
+      var _value_;
+      let key = Array.isArray(value2) ? (_value_ = value2[0]) !== null && _value_ !== void 0 ? _value_ : null : value2;
+      setControlledValue(key);
+      if (key !== displayValue) (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, key);
+    } else {
+      let keys = [];
+      if (Array.isArray(value2)) keys = value2;
+      else if (value2 != null) keys = [
+        value2
+      ];
+      setControlledValue(keys);
+    }
+  };
+  let listState = $e72dd72e1c76a225$export$2f645645f7bca764(__spreadProps(__spreadValues({}, props), {
+    selectionMode,
+    disallowEmptySelection: selectionMode === "single",
+    allowDuplicateSelectionEvents: true,
+    selectedKeys: useMemo(() => $2bc3a590c5373a4e$var$convertValue(displayValue), [
+      displayValue
+    ]),
+    onSelectionChange: (keys) => {
+      if (keys === "all") return;
+      if (selectionMode === "single") {
+        var _keys_values_next_value;
+        let key = (_keys_values_next_value = keys.values().next().value) !== null && _keys_values_next_value !== void 0 ? _keys_values_next_value : null;
+        setValue(key);
+        triggerState.close();
+      } else setValue([
+        ...keys
+      ]);
+      validationState.commitValidation();
+    }
+  }));
+  let selectedKey = listState.selectionManager.firstSelectedKey;
+  let selectedItems = useMemo(() => {
+    return [
+      ...listState.selectionManager.selectedKeys
+    ].map((key) => listState.collection.getItem(key)).filter((item) => item != null);
+  }, [
+    listState.selectionManager.selectedKeys,
+    listState.collection
+  ]);
+  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value: Array.isArray(displayValue) && displayValue.length === 0 ? null : displayValue
+  }));
+  let [isFocused, setFocused] = useState(false);
+  let [initialValue] = useState(displayValue);
+  var _selectedItems_, _props_defaultSelectedKey;
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, validationState), listState), triggerState), {
+    value: displayValue,
+    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue,
+    setValue,
+    selectedKey,
+    setSelectedKey: setValue,
+    selectedItem: (_selectedItems_ = selectedItems[0]) !== null && _selectedItems_ !== void 0 ? _selectedItems_ : null,
+    selectedItems,
+    defaultSelectedKey: (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : props.selectionMode === "single" ? initialValue : null,
+    focusStrategy,
+    open(focusStrategy2 = null) {
+      if (listState.collection.size !== 0 || props.allowsEmptyCollection) {
+        setFocusStrategy(focusStrategy2);
+        triggerState.open();
+      }
+    },
+    toggle(focusStrategy2 = null) {
+      if (listState.collection.size !== 0 || props.allowsEmptyCollection) {
+        setFocusStrategy(focusStrategy2);
+        triggerState.toggle();
+      }
+    },
+    isFocused,
+    setFocused
+  });
+}
+function $2bc3a590c5373a4e$var$convertValue(value) {
+  if (value === void 0) return void 0;
+  if (value === null) return [];
+  return Array.isArray(value) ? value : [
+    value
+  ];
+}
+const $58aed456727eb0f3$export$703601b7e90536f8 = /* @__PURE__ */ new WeakMap();
+function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
+  let { keyboardDelegate, isDisabled, isRequired, name, form, validationBehavior = "aria" } = props;
+  let collator = $325a3faab7a68acd$export$a16aca283550c30d({
+    usage: "search",
+    sensitivity: "base"
+  });
+  let delegate = useMemo(() => keyboardDelegate || new $2a25aae57d74318e$export$a05409b8bb224a5a(state.collection, state.disabledKeys, ref, collator), [
+    keyboardDelegate,
+    state.collection,
+    state.disabledKeys,
+    collator,
+    ref
+  ]);
+  let { menuTriggerProps, menuProps } = $168583247155ddda$export$dc9c12ed27dd1b49({
+    isDisabled,
+    type: "listbox"
+  }, state, ref);
+  let onKeyDown = (e) => {
+    if (state.selectionManager.selectionMode === "multiple") return;
+    switch (e.key) {
+      case "ArrowLeft": {
+        var _delegate_getKeyAbove, _delegate_getFirstKey;
+        e.preventDefault();
+        let key = state.selectedKey != null ? (_delegate_getKeyAbove = delegate.getKeyAbove) === null || _delegate_getKeyAbove === void 0 ? void 0 : _delegate_getKeyAbove.call(delegate, state.selectedKey) : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate);
+        if (key) state.setSelectedKey(key);
+        break;
+      }
+      case "ArrowRight": {
+        var _delegate_getKeyBelow, _delegate_getFirstKey1;
+        e.preventDefault();
+        let key = state.selectedKey != null ? (_delegate_getKeyBelow = delegate.getKeyBelow) === null || _delegate_getKeyBelow === void 0 ? void 0 : _delegate_getKeyBelow.call(delegate, state.selectedKey) : (_delegate_getFirstKey1 = delegate.getFirstKey) === null || _delegate_getFirstKey1 === void 0 ? void 0 : _delegate_getFirstKey1.call(delegate);
+        if (key) state.setSelectedKey(key);
+        break;
+      }
+    }
+  };
+  let { typeSelectProps } = $fb3050f43d946246$export$e32c88dfddc6e1d8({
+    keyboardDelegate: delegate,
+    selectionManager: state.selectionManager,
+    onTypeSelect(key) {
+      state.setSelectedKey(key);
+    }
+  });
+  let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
+    labelElementType: "span",
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  }));
+  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
+  delete typeSelectProps.onKeyDownCapture;
+  if (state.selectionManager.selectionMode === "multiple") typeSelectProps = {};
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let triggerProps = $3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, menuTriggerProps, fieldProps);
+  let valueId = $bdb11010cef70236$export$f680877a34711e37();
+  $58aed456727eb0f3$export$703601b7e90536f8.set(state, {
+    isDisabled,
+    isRequired,
+    name,
+    form,
+    validationBehavior
+  });
+  return {
+    labelProps: __spreadProps(__spreadValues({}, labelProps), {
+      onClick: () => {
+        if (!props.isDisabled) {
+          var _ref_current;
+          (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+          $507fabe10e71c6fb$export$8397ddfc504fdb9a("keyboard");
+        }
+      }
+    }),
+    triggerProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, triggerProps), {
+      isDisabled,
+      onKeyDown: $ff5963eb1fccf552$export$e08e3b67e392101e(triggerProps.onKeyDown, onKeyDown, props.onKeyDown),
+      onKeyUp: props.onKeyUp,
+      "aria-labelledby": [
+        valueId,
+        triggerProps["aria-labelledby"],
+        triggerProps["aria-label"] && !triggerProps["aria-labelledby"] ? triggerProps.id : null
+      ].filter(Boolean).join(" "),
+      onFocus(e) {
+        if (state.isFocused) return;
+        if (props.onFocus) props.onFocus(e);
+        if (props.onFocusChange) props.onFocusChange(true);
+        state.setFocused(true);
+      },
+      onBlur(e) {
+        if (state.isOpen) return;
+        if (props.onBlur) props.onBlur(e);
+        if (props.onFocusChange) props.onFocusChange(false);
+        state.setFocused(false);
+      }
+    })),
+    valueProps: {
+      id: valueId
+    },
+    menuProps: __spreadProps(__spreadValues({}, menuProps), {
+      autoFocus: state.focusStrategy || true,
+      shouldSelectOnPressUp: true,
+      shouldFocusOnHover: true,
+      disallowEmptySelection: true,
+      linkBehavior: "selection",
+      onBlur: (e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) return;
+        if (props.onBlur) props.onBlur(e);
+        if (props.onFocusChange) props.onFocusChange(false);
+        state.setFocused(false);
+      },
+      "aria-labelledby": [
+        fieldProps["aria-labelledby"],
+        triggerProps["aria-label"] && !fieldProps["aria-labelledby"] ? triggerProps.id : null
+      ].filter(Boolean).join(" ")
+    }),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails,
+    hiddenSelectProps: {
+      isDisabled,
+      name,
+      label: props.label,
+      state,
+      triggerRef: ref,
+      form
+    }
+  };
+}
+function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
+  let data = $58aed456727eb0f3$export$703601b7e90536f8.get(state) || {};
+  let { autoComplete, name = data.name, form = data.form, isDisabled = data.isDisabled } = props;
+  let { validationBehavior, isRequired } = data;
+  let { visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab({
+    style: {
+      // Prevent page scrolling.
+      position: "fixed",
+      top: 0,
+      left: 0
+    }
+  });
+  $99facab73266f662$export$5add1d006293d136(props.selectRef, state.defaultValue, state.setValue);
+  $e93e671b31057976$export$b8473d3665f3a75a({
+    validationBehavior,
+    focus: () => {
+      var _triggerRef_current;
+      return (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+    }
+  }, state, props.selectRef);
+  let setValue = state.setValue;
+  let onChange = useCallback((e) => {
+    if (e.target.multiple) setValue(Array.from(e.target.selectedOptions, (option2) => option2.value));
+    else setValue(e.currentTarget.value);
+  }, [
+    setValue
+  ]);
+  var _state_value;
+  return {
+    containerProps: __spreadProps(__spreadValues({}, visuallyHiddenProps), {
+      "aria-hidden": true,
+      // @ts-ignore
+      ["data-react-aria-prevent-focus"]: true,
+      // @ts-ignore
+      ["data-a11y-ignore"]: "aria-hidden-focus"
+    }),
+    inputProps: {
+      style: {
+        display: "none"
+      }
+    },
+    selectProps: {
+      tabIndex: -1,
+      autoComplete,
+      disabled: isDisabled,
+      multiple: state.selectionManager.selectionMode === "multiple",
+      required: validationBehavior === "native" && isRequired,
+      name,
+      form,
+      value: (_state_value = state.value) !== null && _state_value !== void 0 ? _state_value : "",
+      onChange,
+      onInput: onChange
+    }
+  };
+}
+function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
+  let { state, triggerRef, label, name, form, isDisabled } = props;
+  let selectRef = useRef(null);
+  let inputRef = useRef(null);
+  let { containerProps, selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1(__spreadProps(__spreadValues({}, props), {
+    selectRef: state.collection.size <= 300 ? selectRef : inputRef
+  }), state, triggerRef);
+  if (state.collection.size <= 300) return /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
+    "data-testid": "hidden-select-container"
+  }), /* @__PURE__ */ React__default.createElement("label", null, label, /* @__PURE__ */ React__default.createElement("select", __spreadProps(__spreadValues({}, selectProps), {
+    ref: selectRef
+  }), /* @__PURE__ */ React__default.createElement("option", null), [
+    ...state.collection.getKeys()
+  ].map((key) => {
+    let item = state.collection.getItem(key);
+    if (item && item.type === "item") return /* @__PURE__ */ React__default.createElement("option", {
+      key: item.key,
+      value: item.key
+    }, item.textValue);
+  }))));
+  else if (name) {
+    let data = $58aed456727eb0f3$export$703601b7e90536f8.get(state) || {};
+    let { validationBehavior } = data;
+    let values = Array.isArray(state.value) ? state.value : [
+      state.value
+    ];
+    if (values.length === 0) values = [
+      null
+    ];
+    let res = values.map((value, i) => {
+      let inputProps = {
+        type: "hidden",
+        autoComplete: selectProps.autoComplete,
+        name,
+        form,
+        disabled: isDisabled,
+        value: value !== null && value !== void 0 ? value : ""
+      };
+      if (validationBehavior === "native")
+        return /* @__PURE__ */ React__default.createElement("input", __spreadProps(__spreadValues({
+          key: i
+        }, inputProps), {
+          ref: i === 0 ? inputRef : null,
+          style: {
+            display: "none"
+          },
+          type: "text",
+          required: i === 0 ? selectProps.required : false,
+          onChange: () => {
+          }
+        }));
+      return /* @__PURE__ */ React__default.createElement("input", __spreadProps(__spreadValues({
+        key: i
+      }, inputProps), {
+        ref: i === 0 ? inputRef : null
+      }));
+    });
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, res);
+  }
+  return null;
+}
+const InternalSelectContext = createContext(null);
+function useInternalSelectContext() {
+  const selectContext = useContext(InternalSelectContext);
+  if (!selectContext) {
+    throw new Error("InternalSelectContext must be used inside a <Select />");
+  }
+  return selectContext;
+}
+const underlay = "_underlay_fl67g_4";
+const listboxRoot = "_listboxRoot_fl67g_9";
+const listbox = "_listbox_fl67g_9";
+const listboxList = "_listboxList_fl67g_79";
+const sectionList = "_sectionList_fl67g_80";
+const option = "_option_fl67g_91";
+const optionContent = "_optionContent_fl67g_98";
+const separator = "_separator_fl67g_108";
+const optionDescription = "_optionDescription_fl67g_129";
+const fieldRoot = "_fieldRoot_fl67g_143";
+const selectField = "_selectField_fl67g_164";
+const selectSizeSm = "_selectSizeSm_fl67g_202";
+const selectSizeLg = "_selectSizeLg_fl67g_213";
+const selectFieldError = "_selectFieldError_fl67g_219";
+const selectFieldIconStart = "_selectFieldIconStart_fl67g_227";
+const selectFieldIconEnd = "_selectFieldIconEnd_fl67g_231";
+const selectFieldIconContainer = "_selectFieldIconContainer_fl67g_235";
+const selectFieldText = "_selectFieldText_fl67g_241";
+const selectedDescription = "_selectedDescription_fl67g_253";
+const listboxOpen = "_listboxOpen_fl67g_259";
+const styles = {
+  underlay,
+  listboxRoot,
+  listbox,
+  listboxList,
+  sectionList,
+  option,
+  optionContent,
+  separator,
+  optionDescription,
+  fieldRoot,
+  selectField,
+  selectSizeSm,
+  selectSizeLg,
+  selectFieldError,
+  selectFieldIconStart,
+  selectFieldIconEnd,
+  selectFieldIconContainer,
+  selectFieldText,
+  selectedDescription,
+  listboxOpen
+};
+function SelectOption(_props) {
+  return null;
+}
+Object.assign(SelectOption, $c1d7fb2ec91bae71$export$6d08773d2e66f8f2);
+function SelectOptionContent({ item, state }) {
+  var _a;
+  const ref = React__default.useRef(null);
+  const { optionProps, isSelected, isFocused, isDisabled } = $293f70390ea03370$export$497855f14858aa34({
+    key: item.key
+  }, state, ref);
+  const description = (_a = item.props) == null ? void 0 : _a.description;
+  return jsx("li", __spreadProps(__spreadValues({}, optionProps), {
+    ref,
+    className: styles.option,
+    "data-is-disabled": isDisabled,
+    "data-is-focused": isFocused,
+    "data-is-selected": isSelected,
+    children: jsxs("div", {
+      className: styles.optionContent,
+      children: [jsx(Text, {
+        variant: "body2",
+        truncate: true,
+        children: item.rendered
+      }), description && jsx("span", {
+        className: styles.optionDescription,
+        children: jsx(Text, {
+          variant: "caption",
+          color: "neutral.600",
+          truncate: true,
+          children: description
+        })
+      })]
+    })
+  }));
+}
+function SelectSection(_props) {
+  return null;
+}
+Object.assign(SelectSection, $9fc4852771d079eb$export$6e2c8f0811a474ce);
+function SelectSectionContent({ section, state }) {
+  const { itemProps, groupProps } = $af383d3bef1cfdc9$export$c3f9f39876e4bc7({
+    "aria-label": section["aria-label"]
+  });
+  const { separatorProps } = $f4b273590fab9f93$export$52210f68a14655d0({
+    elementType: "li"
+  });
+  return jsxs(Fragment, {
+    children: [section.key !== state.collection.getFirstKey() && jsx("li", __spreadProps(__spreadValues({}, separatorProps), {
+      className: styles.separator
+    })), jsx("li", __spreadProps(__spreadValues({}, itemProps), {
+      children: section.hasChildNodes && jsx("ul", __spreadProps(__spreadValues({}, groupProps), {
+        className: styles.sectionList,
+        children: [...section.childNodes].map((item) => {
+          return jsx(SelectOptionContent, {
+            item,
+            state
+          }, item.key);
+        })
+      }))
+    }))]
+  });
+}
+function SelectOverlay() {
+  const { selectState, triggerWidth } = useInternalSelectContext();
+  if (!selectState.isOpen || triggerWidth === null) {
+    return null;
+  }
+  return jsx(SelectOverlayContent, {});
+}
+function SelectOverlayContent() {
+  const { selectState, triggerRef, listBoxPropsFromSelect, triggerWidth } = useInternalSelectContext();
+  const popoverRef = React__default.useRef(null);
+  const listBoxRef = React__default.useRef(null);
+  const { popoverProps, underlayProps } = $f2f8a6077418541e$export$542a6fd13ac93354({
+    containerPadding: OVERLAY_PADDING_FROM_CONTAINER,
+    maxHeight: ITEM_HEIGHT * DEFAULT_MAX_ITEMS_UNTIL_SCROLL + Y_PADDING_INSIDE_OVERLAY * 2 + 2,
+    offset: OVERLAY_OFFSET,
+    placement: DEFAULT_PLACEMENT,
+    popoverRef,
+    scrollRef: listBoxRef,
+    triggerRef
+  }, selectState);
+  const { listBoxProps } = $c132121280ec012d$export$50eacbbf140a3141(listBoxPropsFromSelect, selectState, listBoxRef);
+  useScrollbar(listBoxRef, "ezui-os-theme-overlay");
+  const style = __spreadValues(__spreadValues({}, popoverProps.style), getUnmergedPopoverStyles(DEFAULT_WIDTH, triggerWidth));
+  return jsxs($337b884510726a0d$export$c6fdb837b070b4ff, {
+    children: [jsx("div", __spreadProps(__spreadValues({}, underlayProps), {
+      className: styles.underlay
+    })), jsxs("div", __spreadProps(__spreadValues({}, $3ef42575df84b30b$export$9d1611c77c2fe928(popoverProps, {
+      style
+    })), {
+      ref: popoverRef,
+      className: styles.listboxRoot,
+      children: [jsx($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+        onDismiss: selectState.close
+      }), jsx("div", __spreadProps(__spreadValues({}, listBoxProps), {
+        ref: listBoxRef,
+        className: styles.listbox,
+        "data-width": DEFAULT_WIDTH,
+        "data-max-items-until-scroll": DEFAULT_MAX_ITEMS_UNTIL_SCROLL,
+        "data-overlayscrollbars-initialize": true,
+        children: jsx("ul", {
+          className: styles.listboxList,
+          children: [...selectState.collection].map((item) => {
+            return item.type === "section" ? jsx(SelectSectionContent, {
+              section: item,
+              state: selectState
+            }, item.key) : jsx(SelectOptionContent, {
+              item,
+              state: selectState
+            }, item.key);
+          })
+        })
+      })), jsx($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+        onDismiss: selectState.close
+      })]
+    }))]
+  });
+}
+export {
+  $bdd25dc72710631f$export$cbd84cdb2e668835 as $,
+  InternalSelectContext as I,
+  SelectOverlay as S,
+  $2bc3a590c5373a4e$export$5159ec8b34d4ec12 as a,
+  $58aed456727eb0f3$export$e64b2f635402ca43 as b,
+  SelectSection as c,
+  SelectOption as d,
+  styles as s,
+  useInternalSelectContext as u
+};