@easypost/easy-ui 1.0.0-alpha.9 → 1.0.0-alpha.90

package/__chunks__/SelectOverlay-Wgoyy1xh.mjs

@@ -0,0 +1,421 @@
+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-CUeEhwOT.mjs";
+import { a as $fc909762b330b746$export$61c6a8c84e605fb6, d as $337b884510726a0d$export$c6fdb837b070b4ff } from "./Overlay-aI53DFC4.mjs";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "./useSingleSelectListState-ByDUc5Ex.mjs";
+import React__default, { useState, useMemo, useRef, createContext, useContext } from "react";
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $bdb11010cef70236$export$f680877a34711e37, f as $ff5963eb1fccf552$export$e08e3b67e392101e } from "./mergeProps-CORsYhTp.mjs";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.mjs";
+import { b as $2a25aae57d74318e$export$a05409b8bb224a5a } from "./useSelectableList-By73z8mx.mjs";
+import { c as $fb3050f43d946246$export$e32c88dfddc6e1d8 } from "./useSelectableItem-DeMnuLRU.mjs";
+import { l as $507fabe10e71c6fb$export$8397ddfc504fdb9a } from "./useFocusVisible-S02S36Aj.mjs";
+import { $ as $325a3faab7a68acd$export$a16aca283550c30d } from "./useCollator-D97tqUbx.mjs";
+import { $ as $2baaea4c71418dea$export$294aa081a6c6f55d } from "./useField-D1rL_Lz6.mjs";
+import { $ as $168583247155ddda$export$dc9c12ed27dd1b49 } from "./useMenuTrigger-C91gC8Fc.mjs";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-XL_MAi9u.mjs";
+import { $ as $5c3e21d68f1c4674$export$a966af930f325cab } from "./VisuallyHidden-CEixEKmF.mjs";
+import { T as Text } from "./Text-BWjD7__Y.mjs";
+import { $ as $293f70390ea03370$export$497855f14858aa34, a as $af383d3bef1cfdc9$export$c3f9f39876e4bc7, b as $c132121280ec012d$export$50eacbbf140a3141 } from "./useListBoxSection-C0KVZkom.mjs";
+import { $ as $c1d7fb2ec91bae71$export$6d08773d2e66f8f2 } from "./Item-FD89BR0i.mjs";
+import { $ as $f2f8a6077418541e$export$542a6fd13ac93354, g as getUnmergedPopoverStyles, a as $86ea4cb521eb2e37$export$2317d149ed6f78c4, D as DEFAULT_MAX_ITEMS_UNTIL_SCROLL, b as DEFAULT_WIDTH, c as DEFAULT_PLACEMENT, O as OVERLAY_OFFSET, d as OVERLAY_PADDING_FROM_CONTAINER, I as ITEM_HEIGHT, Y as Y_PADDING_INSIDE_OVERLAY } from "./utilities-DUnS31dY.mjs";
+import { useScrollbar } from "../utilities/useScrollbar.mjs";
+import { $ as $f4b273590fab9f93$export$52210f68a14655d0, a as $9fc4852771d079eb$export$6e2c8f0811a474ce } from "./useTriggerWidth-74VNM0k9.mjs";
+function $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props) {
+  let triggerState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let [focusStrategy, setFocusStrategy] = useState(null);
+  let listState = $a0d645289fe9b86b$export$e7f05e985daf4b5f(__spreadProps(__spreadValues({}, props), {
+    onSelectionChange: (key) => {
+      if (props.onSelectionChange != null) props.onSelectionChange(key);
+      triggerState.close();
+      validationState.commitValidation();
+    }
+  }));
+  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value: listState.selectedKey
+  }));
+  let [isFocused, setFocused] = useState(false);
+  let isEmpty = useMemo(() => {
+    var _listState_collection_getItem;
+    return listState.collection.size === 0 || listState.collection.size === 1 && ((_listState_collection_getItem = listState.collection.getItem(listState.collection.getFirstKey())) === null || _listState_collection_getItem === void 0 ? void 0 : _listState_collection_getItem.type) === "loader";
+  }, [
+    listState.collection
+  ]);
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, validationState), listState), triggerState), {
+    focusStrategy,
+    open(focusStrategy2 = null) {
+      if (!isEmpty) {
+        setFocusStrategy(focusStrategy2);
+        triggerState.open();
+      }
+    },
+    toggle(focusStrategy2 = null) {
+      if (!isEmpty) {
+        setFocusStrategy(focusStrategy2);
+        triggerState.toggle();
+      }
+    },
+    isFocused,
+    setFocused
+  });
+}
+const $58aed456727eb0f3$export$703601b7e90536f8 = /* @__PURE__ */ new WeakMap();
+function $58aed456727eb0f3$export$e64b2f635402ca43(props, state, ref) {
+  let { keyboardDelegate, isDisabled, isRequired, name, 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) => {
+    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;
+  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,
+    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
+  };
+}
+function $bdd25dc72710631f$export$f809e80f58e251d1(props, state, triggerRef) {
+  let data = $58aed456727eb0f3$export$703601b7e90536f8.get(state) || {};
+  let { autoComplete, name = data.name, isDisabled = data.isDisabled } = props;
+  let { validationBehavior, isRequired } = data;
+  let { visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab();
+  $99facab73266f662$export$5add1d006293d136(props.selectRef, state.selectedKey, state.setSelectedKey);
+  $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);
+  var _state_selectedKey;
+  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,
+      required: validationBehavior === "native" && isRequired,
+      name,
+      value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : void 0,
+      onChange: (e) => state.setSelectedKey(e.target.value)
+    }
+  };
+}
+function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
+  let { state, triggerRef, label, name, isDisabled } = props;
+  let selectRef = useRef(null);
+  let { containerProps, selectProps } = $bdd25dc72710631f$export$f809e80f58e251d1(__spreadProps(__spreadValues({}, props), {
+    selectRef
+  }), state, triggerRef);
+  var _state_selectedKey;
+  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) return /* @__PURE__ */ React__default.createElement("input", {
+    type: "hidden",
+    autoComplete: selectProps.autoComplete,
+    name,
+    disabled: isDisabled,
+    value: (_state_selectedKey = state.selectedKey) !== null && _state_selectedKey !== void 0 ? _state_selectedKey : ""
+  });
+  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_1cjme_4";
+const listboxRoot = "_listboxRoot_1cjme_9";
+const listbox = "_listbox_1cjme_9";
+const listboxList = "_listboxList_1cjme_78";
+const sectionList = "_sectionList_1cjme_79";
+const optionContent = "_optionContent_1cjme_85";
+const separator = "_separator_1cjme_86";
+const option = "_option_1cjme_85";
+const fieldRoot = "_fieldRoot_1cjme_129";
+const selectField = "_selectField_1cjme_150";
+const selectSizeSm = "_selectSizeSm_1cjme_187";
+const selectSizeLg = "_selectSizeLg_1cjme_199";
+const selectFieldError = "_selectFieldError_1cjme_205";
+const selectFieldIconStart = "_selectFieldIconStart_1cjme_213";
+const selectFieldIconEnd = "_selectFieldIconEnd_1cjme_217";
+const selectFieldIconContainer = "_selectFieldIconContainer_1cjme_221";
+const selectFieldText = "_selectFieldText_1cjme_227";
+const listboxOpen = "_listboxOpen_1cjme_231";
+const styles = {
+  underlay,
+  listboxRoot,
+  listbox,
+  listboxList,
+  sectionList,
+  optionContent,
+  separator,
+  option,
+  fieldRoot,
+  selectField,
+  selectSizeSm,
+  selectSizeLg,
+  selectFieldError,
+  selectFieldIconStart,
+  selectFieldIconEnd,
+  selectFieldIconContainer,
+  selectFieldText,
+  listboxOpen
+};
+function SelectOption(_props) {
+  return null;
+}
+Object.assign(SelectOption, $c1d7fb2ec91bae71$export$6d08773d2e66f8f2);
+function SelectOptionContent({ item, state }) {
+  const ref = React__default.useRef(null);
+  const { optionProps, isSelected, isFocused, isDisabled } = $293f70390ea03370$export$497855f14858aa34({
+    key: item.key
+  }, state, ref);
+  return React__default.createElement("li", __spreadProps(__spreadValues({}, optionProps), {
+    ref,
+    className: styles.option,
+    "data-is-disabled": isDisabled,
+    "data-is-focused": isFocused,
+    "data-is-selected": isSelected
+  }), React__default.createElement("div", {
+    className: styles.optionContent
+  }, React__default.createElement(Text, {
+    variant: "body1",
+    truncate: true
+  }, item.rendered)));
+}
+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 React__default.createElement(React__default.Fragment, null, section.key !== state.collection.getFirstKey() && React__default.createElement("li", __spreadProps(__spreadValues({}, separatorProps), {
+    className: styles.separator
+  })), React__default.createElement("li", __spreadValues({}, itemProps), section.hasChildNodes && React__default.createElement("ul", __spreadProps(__spreadValues({}, groupProps), {
+    className: styles.sectionList
+  }), [...section.childNodes].map((item) => {
+    return React__default.createElement(SelectOptionContent, {
+      key: item.key,
+      item,
+      state
+    });
+  }))));
+}
+function SelectOverlay() {
+  const { selectState, triggerWidth } = useInternalSelectContext();
+  if (!selectState.isOpen || triggerWidth === null) {
+    return null;
+  }
+  return React__default.createElement(SelectOverlayContent, null);
+}
+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 React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, null, React__default.createElement("div", __spreadProps(__spreadValues({}, underlayProps), {
+    className: styles.underlay
+  })), React__default.createElement("div", __spreadProps(__spreadValues({}, $3ef42575df84b30b$export$9d1611c77c2fe928(popoverProps, {
+    style
+  })), {
+    ref: popoverRef,
+    className: styles.listboxRoot
+  }), React__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: selectState.close
+  }), React__default.createElement("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
+  }), React__default.createElement("ul", {
+    className: styles.listboxList
+  }, [...selectState.collection].map((item) => {
+    return item.type === "section" ? React__default.createElement(SelectSectionContent, {
+      key: item.key,
+      section: item,
+      state: selectState
+    }) : React__default.createElement(SelectOptionContent, {
+      key: item.key,
+      item,
+      state: selectState
+    });
+  }))), React__default.createElement($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
+};