@easypost/easy-ui 1.0.0-alpha.7 → 1.0.0-alpha.71

package/__chunks__/SelectOverlay-QpThRYAk.js

@@ -0,0 +1,413 @@
+"use strict";
+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));
+const useFormValidation = require("./useFormValidation-BeqiYVJN.js");
+const Overlay = require("./Overlay-CwJbrICR.js");
+const useSingleSelectListState = require("./useSingleSelectListState-5RB1w9vv.js");
+const React = require("react");
+const mergeProps = require("./mergeProps-DniMwM6P.js");
+const filterDOMProps = require("./filterDOMProps-D3iOHP0H.js");
+const useSelectableList = require("./useSelectableList-Dk3TxzYJ.js");
+const useSelectableItem = require("./useSelectableItem-BEkjpB_K.js");
+const useFocusVisible = require("./useFocusVisible-CiIrKjuz.js");
+const useCollator = require("./useCollator-DGrSWVh4.js");
+const useField = require("./useField-BJW_bXVD.js");
+const useMenuTrigger = require("./useMenuTrigger-DhSBxWW5.js");
+const useFormReset = require("./useFormReset-Bgj93eR3.js");
+const VisuallyHidden = require("./VisuallyHidden-DcUrMWfu.js");
+const Text = require("./Text-DKSomTmh.js");
+const useListBoxSection = require("./useListBoxSection-TdoNdwIM.js");
+const Item = require("./Item-CfWjPrxx.js");
+const utilities = require("./utilities-DIZYscJV.js");
+const utilities_useScrollbar = require("../utilities/useScrollbar.js");
+const useTriggerWidth = require("./useTriggerWidth-B-IM2wNY.js");
+function $2bc3a590c5373a4e$export$5159ec8b34d4ec12(props) {
+  let triggerState = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let [focusStrategy, setFocusStrategy] = React.useState(null);
+  let listState = useSingleSelectListState.$a0d645289fe9b86b$export$e7f05e985daf4b5f(__spreadProps(__spreadValues({}, props), {
+    onSelectionChange: (key) => {
+      if (props.onSelectionChange != null) props.onSelectionChange(key);
+      triggerState.close();
+      validationState.commitValidation();
+    }
+  }));
+  let validationState = useFormValidation.$e5be200c675c3b3a$export$fc1a364ae1f3ff10(__spreadProps(__spreadValues({}, props), {
+    value: listState.selectedKey
+  }));
+  let [isFocused, setFocused] = React.useState(false);
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, validationState), listState), triggerState), {
+    focusStrategy,
+    open(focusStrategy2 = null) {
+      if (listState.collection.size !== 0) {
+        setFocusStrategy(focusStrategy2);
+        triggerState.open();
+      }
+    },
+    toggle(focusStrategy2 = null) {
+      if (listState.collection.size !== 0) {
+        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 = useCollator.$325a3faab7a68acd$export$a16aca283550c30d({
+    usage: "search",
+    sensitivity: "base"
+  });
+  let delegate = React.useMemo(() => keyboardDelegate || new useSelectableList.$2a25aae57d74318e$export$a05409b8bb224a5a(state.collection, state.disabledKeys, ref, collator), [
+    keyboardDelegate,
+    state.collection,
+    state.disabledKeys,
+    collator
+  ]);
+  let { menuTriggerProps, menuProps } = useMenuTrigger.$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 } = useSelectableItem.$fb3050f43d946246$export$e32c88dfddc6e1d8({
+    keyboardDelegate: delegate,
+    selectionManager: state.selectionManager,
+    onTypeSelect(key) {
+      state.setSelectedKey(key);
+    }
+  });
+  let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField.$2baaea4c71418dea$export$294aa081a6c6f55d(__spreadProps(__spreadValues({}, props), {
+    labelElementType: "span",
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  }));
+  typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
+  delete typeSelectProps.onKeyDownCapture;
+  let domProps = filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let triggerProps = mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, menuTriggerProps, fieldProps);
+  let valueId = mergeProps.$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();
+          useFocusVisible.$507fabe10e71c6fb$export$8397ddfc504fdb9a("keyboard");
+        }
+      }
+    }),
+    triggerProps: mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, __spreadProps(__spreadValues({}, triggerProps), {
+      isDisabled,
+      onKeyDown: mergeProps.$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 } = VisuallyHidden.$5c3e21d68f1c4674$export$a966af930f325cab();
+  useFormReset.$99facab73266f662$export$5add1d006293d136(props.selectRef, state.selectedKey, state.setSelectedKey);
+  useFormValidation.$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 : "",
+      onChange: (e) => state.setSelectedKey(e.target.value)
+    }
+  };
+}
+function $bdd25dc72710631f$export$cbd84cdb2e668835(props) {
+  let { state, triggerRef, label, name, isDisabled } = props;
+  let selectRef = React.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.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
+    "data-testid": "hidden-select-container"
+  }), /* @__PURE__ */ React.createElement("label", null, label, /* @__PURE__ */ React.createElement("select", __spreadProps(__spreadValues({}, selectProps), {
+    ref: selectRef
+  }), /* @__PURE__ */ React.createElement("option", null), [
+    ...state.collection.getKeys()
+  ].map((key) => {
+    let item = state.collection.getItem(key);
+    if (item && item.type === "item") return /* @__PURE__ */ React.createElement("option", {
+      key: item.key,
+      value: item.key
+    }, item.textValue);
+  }))));
+  else if (name) return /* @__PURE__ */ React.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 = React.createContext(null);
+function useInternalSelectContext() {
+  const selectContext = React.useContext(InternalSelectContext);
+  if (!selectContext) {
+    throw new Error("InternalSelectContext must be used inside a <Select />");
+  }
+  return selectContext;
+}
+const underlay = "_underlay_37eqo_5";
+const listboxRoot = "_listboxRoot_37eqo_10";
+const listbox = "_listbox_37eqo_10";
+const listboxList = "_listboxList_37eqo_79";
+const sectionList = "_sectionList_37eqo_80";
+const optionContent = "_optionContent_37eqo_86";
+const separator = "_separator_37eqo_87";
+const option = "_option_37eqo_86";
+const fieldRoot = "_fieldRoot_37eqo_130";
+const selectField = "_selectField_37eqo_151";
+const selectSizeSm = "_selectSizeSm_37eqo_188";
+const selectSizeLg = "_selectSizeLg_37eqo_200";
+const selectFieldError = "_selectFieldError_37eqo_206";
+const selectFieldIconStart = "_selectFieldIconStart_37eqo_214";
+const selectFieldIconEnd = "_selectFieldIconEnd_37eqo_218";
+const selectFieldIconContainer = "_selectFieldIconContainer_37eqo_222";
+const selectFieldText = "_selectFieldText_37eqo_228";
+const listboxOpen = "_listboxOpen_37eqo_232";
+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, Item.$c1d7fb2ec91bae71$export$6d08773d2e66f8f2);
+function SelectOptionContent({ item, state }) {
+  const ref = React.useRef(null);
+  const { optionProps, isSelected, isFocused, isDisabled } = useListBoxSection.$293f70390ea03370$export$497855f14858aa34({
+    key: item.key
+  }, state, ref);
+  return React.createElement("li", __spreadProps(__spreadValues({}, optionProps), {
+    ref,
+    className: styles.option,
+    "data-is-disabled": isDisabled,
+    "data-is-focused": isFocused,
+    "data-is-selected": isSelected
+  }), React.createElement("div", {
+    className: styles.optionContent
+  }, React.createElement(Text.Text, {
+    variant: "body1",
+    truncate: true
+  }, item.rendered)));
+}
+function SelectSection(_props) {
+  return null;
+}
+Object.assign(SelectSection, useTriggerWidth.$9fc4852771d079eb$export$6e2c8f0811a474ce);
+function SelectSectionContent({ section, state }) {
+  const { itemProps, groupProps } = useListBoxSection.$af383d3bef1cfdc9$export$c3f9f39876e4bc7({
+    "aria-label": section["aria-label"]
+  });
+  const { separatorProps } = useTriggerWidth.$f4b273590fab9f93$export$52210f68a14655d0({
+    elementType: "li"
+  });
+  return React.createElement(React.Fragment, null, section.key !== state.collection.getFirstKey() && React.createElement("li", __spreadProps(__spreadValues({}, separatorProps), {
+    className: styles.separator
+  })), React.createElement("li", __spreadValues({}, itemProps), section.hasChildNodes && React.createElement("ul", __spreadProps(__spreadValues({}, groupProps), {
+    className: styles.sectionList
+  }), [...section.childNodes].map((item) => {
+    return React.createElement(SelectOptionContent, {
+      key: item.key,
+      item,
+      state
+    });
+  }))));
+}
+function SelectOverlay() {
+  const { selectState, triggerWidth } = useInternalSelectContext();
+  if (!selectState.isOpen || triggerWidth === null) {
+    return null;
+  }
+  return React.createElement(SelectOverlayContent, null);
+}
+function SelectOverlayContent() {
+  const { selectState, triggerRef, listBoxPropsFromSelect, triggerWidth } = useInternalSelectContext();
+  const popoverRef = React.useRef(null);
+  const listBoxRef = React.useRef(null);
+  const { popoverProps, underlayProps } = utilities.$f2f8a6077418541e$export$542a6fd13ac93354({
+    containerPadding: utilities.OVERLAY_PADDING_FROM_CONTAINER,
+    maxHeight: utilities.ITEM_HEIGHT * utilities.DEFAULT_MAX_ITEMS_UNTIL_SCROLL + utilities.Y_PADDING_INSIDE_OVERLAY * 2 + 2,
+    offset: utilities.OVERLAY_OFFSET,
+    placement: utilities.DEFAULT_PLACEMENT,
+    popoverRef,
+    scrollRef: listBoxRef,
+    triggerRef
+  }, selectState);
+  const { listBoxProps } = useListBoxSection.$c132121280ec012d$export$50eacbbf140a3141(listBoxPropsFromSelect, selectState, listBoxRef);
+  utilities_useScrollbar.useScrollbar(listBoxRef, "ezui-os-theme-overlay");
+  const style = __spreadValues(__spreadValues({}, popoverProps.style), utilities.getUnmergedPopoverStyles(utilities.DEFAULT_WIDTH, triggerWidth));
+  return React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, null, React.createElement("div", __spreadProps(__spreadValues({}, underlayProps), {
+    className: styles.underlay
+  })), React.createElement("div", __spreadProps(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(popoverProps, {
+    style
+  })), {
+    ref: popoverRef,
+    className: styles.listboxRoot
+  }), React.createElement(utilities.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: selectState.close
+  }), React.createElement("div", __spreadProps(__spreadValues({}, listBoxProps), {
+    ref: listBoxRef,
+    className: styles.listbox,
+    "data-width": utilities.DEFAULT_WIDTH,
+    "data-max-items-until-scroll": utilities.DEFAULT_MAX_ITEMS_UNTIL_SCROLL,
+    "data-overlayscrollbars-initialize": true
+  }), React.createElement("ul", {
+    className: styles.listboxList
+  }, [...selectState.collection].map((item) => {
+    return item.type === "section" ? React.createElement(SelectSectionContent, {
+      key: item.key,
+      section: item,
+      state: selectState
+    }) : React.createElement(SelectOptionContent, {
+      key: item.key,
+      item,
+      state: selectState
+    });
+  }))), React.createElement(utilities.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: selectState.close
+  })));
+}
+exports.$2bc3a590c5373a4e$export$5159ec8b34d4ec12 = $2bc3a590c5373a4e$export$5159ec8b34d4ec12;
+exports.$58aed456727eb0f3$export$e64b2f635402ca43 = $58aed456727eb0f3$export$e64b2f635402ca43;
+exports.$bdd25dc72710631f$export$cbd84cdb2e668835 = $bdd25dc72710631f$export$cbd84cdb2e668835;
+exports.InternalSelectContext = InternalSelectContext;
+exports.SelectOption = SelectOption;
+exports.SelectOverlay = SelectOverlay;
+exports.SelectSection = SelectSection;
+exports.styles = styles;
+exports.useInternalSelectContext = useInternalSelectContext;