@commercetools/nimbus 0.0.0-canary-20250929125459 → 0.0.0-canary-20250930095152

package/dist/chunks/select-CwavXa9Y.es.js

@@ -0,0 +1,580 @@
+import { jsx as d, jsxs as F } from "react/jsx-runtime";
+import m, { useMemo as z, useRef as K, useCallback as U, useState as I, forwardRef as X, createContext as N, useContext as _ } from "react";
+import { createSlotRecipeContext as de, useSlotRecipe as ce, chakra as fe } from "@chakra-ui/react/styled-system";
+import { mergeRefs as ue } from "@chakra-ui/react";
+import { Close as be, Loop as $e, KeyboardArrowDown as pe } from "@commercetools/nimbus-icons";
+import { B as A } from "./box-DuBoAZvq.es.js";
+import { $ as J, a as me } from "./Button-CNBS3n5a.es.js";
+import { f as ve, b as he, c as ye, g as ge, $ as xe } from "./Dialog-CpUyTYgL.es.js";
+import { $ as Q, c as Y, a as Z, b as Se, e as Pe, d as Ce } from "./utils-BkdW_cdL.es.js";
+import { $ as Re } from "./FieldError-CXcEMuBf.es.js";
+import { $ as De } from "./Form-CXcEMuBf.es.js";
+import { $ as Fe } from "./intlStrings-Cd44R5hT.es.js";
+import { $ as ee } from "./Label-B2YyCdLl.es.js";
+import { a as Ke, b as Be, c as Ie, d as Ee, e as we } from "./ListBox-Vxd1SXUB.es.js";
+import { $ as j } from "./Text-DOcU1ycg.es.js";
+import { f as Oe, g as Me } from "./Separator-Qp4OCFiC.es.js";
+import { $ as T, a as ke, e as qe } from "./mergeProps-B_9syxhT.es.js";
+import { $ as G } from "./filterDOMProps-BSVCO5jK.es.js";
+import { $ as Ve, a as Te } from "./OverlayArrow-sJzRZNbO.es.js";
+import { $ as ze } from "./useLocalizedStringFormatter-BRnRyxJp.es.js";
+import { a as Ne, $ as je } from "./useFormValidation-4hZ1_a6w.es.js";
+import { $ as Ge } from "./useSingleSelectListState-BsnptkyP.es.js";
+import { $ as Le } from "./useFocusRing-updnkDQg.es.js";
+import { $ as We, j as He } from "./SelectionManager-BCXBpjO4.es.js";
+import { c as Ae } from "./useFocusVisible-CWDaG0ze.es.js";
+import { $ as Ue } from "./useCollator-BHMZd1r6.es.js";
+import { $ as Xe } from "./useField-Ce9zQxmx.es.js";
+import { $ as _e } from "./useFormReset-DurgUJL-.es.js";
+import { a as Je } from "./VisuallyHidden-VHEPK04F.es.js";
+import { j as te } from "./index-CRta5Y1_.es.js";
+import { I as Qe } from "./icon-button-C_i4ydsN.es.js";
+import { defineMessages as Ye, useIntl as Ze } from "react-intl";
+import { e as le } from "./extractStyleProps-DkXeCUuq.es.js";
+import { $ as et } from "./useObjectRef-CaJ5pgjX.es.js";
+import { Flex as V } from "@chakra-ui/react/flex";
+import { c as tt } from "./Header-CRiZqLJU.es.js";
+const L = /* @__PURE__ */ new WeakMap();
+function lt(e, t, r) {
+  let { keyboardDelegate: a, isDisabled: l, isRequired: n, name: f, form: i, validationBehavior: s = "aria" } = e, $ = Ue({
+    usage: "search",
+    sensitivity: "base"
+  }), o = z(() => a || new We(t.collection, t.disabledKeys, r, $), [
+    a,
+    t.collection,
+    t.disabledKeys,
+    $,
+    r
+  ]), { menuTriggerProps: p, menuProps: b } = ve({
+    isDisabled: l,
+    type: "listbox"
+  }, t, r), c = (u) => {
+    switch (u.key) {
+      case "ArrowLeft": {
+        var x, S;
+        u.preventDefault();
+        let D = t.selectedKey != null ? (x = o.getKeyAbove) === null || x === void 0 ? void 0 : x.call(o, t.selectedKey) : (S = o.getFirstKey) === null || S === void 0 ? void 0 : S.call(o);
+        D && t.setSelectedKey(D);
+        break;
+      }
+      case "ArrowRight": {
+        var k, q;
+        u.preventDefault();
+        let D = t.selectedKey != null ? (k = o.getKeyBelow) === null || k === void 0 ? void 0 : k.call(o, t.selectedKey) : (q = o.getFirstKey) === null || q === void 0 ? void 0 : q.call(o);
+        D && t.setSelectedKey(D);
+        break;
+      }
+    }
+  }, { typeSelectProps: v } = He({
+    keyboardDelegate: o,
+    selectionManager: t.selectionManager,
+    onTypeSelect(u) {
+      t.setSelectedKey(u);
+    }
+  }), { isInvalid: y, validationErrors: C, validationDetails: E } = t.displayValidation, { labelProps: w, fieldProps: R, descriptionProps: g, errorMessageProps: O } = Xe({
+    ...e,
+    labelElementType: "span",
+    isInvalid: y,
+    errorMessage: e.errorMessage || C
+  });
+  v.onKeyDown = v.onKeyDownCapture, delete v.onKeyDownCapture;
+  let M = G(e, {
+    labelable: !0
+  }), h = T(v, p, R), B = ke();
+  return L.set(t, {
+    isDisabled: l,
+    isRequired: n,
+    name: f,
+    form: i,
+    validationBehavior: s
+  }), {
+    labelProps: {
+      ...w,
+      onClick: () => {
+        if (!e.isDisabled) {
+          var u;
+          (u = r.current) === null || u === void 0 || u.focus(), Ae("keyboard");
+        }
+      }
+    },
+    triggerProps: T(M, {
+      ...h,
+      isDisabled: l,
+      onKeyDown: qe(h.onKeyDown, c, e.onKeyDown),
+      onKeyUp: e.onKeyUp,
+      "aria-labelledby": [
+        B,
+        h["aria-labelledby"],
+        h["aria-label"] && !h["aria-labelledby"] ? h.id : null
+      ].filter(Boolean).join(" "),
+      onFocus(u) {
+        t.isFocused || (e.onFocus && e.onFocus(u), e.onFocusChange && e.onFocusChange(!0), t.setFocused(!0));
+      },
+      onBlur(u) {
+        t.isOpen || (e.onBlur && e.onBlur(u), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      }
+    }),
+    valueProps: {
+      id: B
+    },
+    menuProps: {
+      ...b,
+      autoFocus: t.focusStrategy || !0,
+      shouldSelectOnPressUp: !0,
+      shouldFocusOnHover: !0,
+      disallowEmptySelection: !0,
+      linkBehavior: "selection",
+      onBlur: (u) => {
+        u.currentTarget.contains(u.relatedTarget) || (e.onBlur && e.onBlur(u), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      },
+      "aria-labelledby": [
+        R["aria-labelledby"],
+        h["aria-label"] && !R["aria-labelledby"] ? h.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps: g,
+    errorMessageProps: O,
+    isInvalid: y,
+    validationErrors: C,
+    validationDetails: E,
+    hiddenSelectProps: {
+      isDisabled: l,
+      name: f,
+      label: e.label,
+      state: t,
+      triggerRef: r,
+      form: i
+    }
+  };
+}
+function ot(e, t, r) {
+  let a = L.get(t) || {}, { autoComplete: l, name: n = a.name, form: f = a.form, isDisabled: i = a.isDisabled } = e, { validationBehavior: s, isRequired: $ } = a, { visuallyHiddenProps: o } = Je({
+    style: {
+      // Prevent page scrolling.
+      position: "fixed",
+      top: 0,
+      left: 0
+    }
+  });
+  _e(e.selectRef, t.defaultSelectedKey, t.setSelectedKey), Ne({
+    validationBehavior: s,
+    focus: () => {
+      var c;
+      return (c = r.current) === null || c === void 0 ? void 0 : c.focus();
+    }
+  }, t, e.selectRef);
+  let p = U((c) => t.setSelectedKey(c.currentTarget.value), [
+    t.setSelectedKey
+  ]);
+  var b;
+  return {
+    containerProps: {
+      ...o,
+      "aria-hidden": !0,
+      // @ts-ignore
+      "data-react-aria-prevent-focus": !0,
+      // @ts-ignore
+      "data-a11y-ignore": "aria-hidden-focus"
+    },
+    inputProps: {
+      style: {
+        display: "none"
+      }
+    },
+    selectProps: {
+      tabIndex: -1,
+      autoComplete: l,
+      disabled: i,
+      required: s === "native" && $,
+      name: n,
+      form: f,
+      value: (b = t.selectedKey) !== null && b !== void 0 ? b : "",
+      onChange: p,
+      onInput: p
+    }
+  };
+}
+function at(e) {
+  let { state: t, triggerRef: r, label: a, name: l, form: n, isDisabled: f } = e, i = K(null), s = K(null), { containerProps: $, selectProps: o } = ot({
+    ...e,
+    selectRef: t.collection.size <= 300 ? i : s
+  }, t, r);
+  if (t.collection.size <= 300) return /* @__PURE__ */ m.createElement("div", {
+    ...$,
+    "data-testid": "hidden-select-container"
+  }, /* @__PURE__ */ m.createElement("label", null, a, /* @__PURE__ */ m.createElement("select", {
+    ...o,
+    ref: i
+  }, /* @__PURE__ */ m.createElement("option", null), [
+    ...t.collection.getKeys()
+  ].map((b) => {
+    let c = t.collection.getItem(b);
+    if (c && c.type === "item") return /* @__PURE__ */ m.createElement("option", {
+      key: c.key,
+      value: c.key
+    }, c.textValue);
+  }))));
+  if (l) {
+    let b = L.get(t) || {}, { validationBehavior: c } = b;
+    var p;
+    let v = {
+      type: "hidden",
+      autoComplete: o.autoComplete,
+      name: l,
+      form: n,
+      disabled: f,
+      value: (p = t.selectedKey) !== null && p !== void 0 ? p : ""
+    };
+    return c === "native" ? /* @__PURE__ */ m.createElement("input", {
+      ...v,
+      ref: s,
+      style: {
+        display: "none"
+      },
+      type: "text",
+      required: o.required,
+      onChange: () => {
+      }
+    }) : /* @__PURE__ */ m.createElement("input", {
+      ...v,
+      ref: s
+    });
+  }
+  return null;
+}
+function it(e) {
+  let t = Ve(e), [r, a] = I(null), l = Ge({
+    ...e,
+    onSelectionChange: (o) => {
+      e.onSelectionChange != null && e.onSelectionChange(o), t.close(), n.commitValidation();
+    }
+  }), n = je({
+    ...e,
+    value: l.selectedKey
+  }), [f, i] = I(!1), [s] = I(l.selectedKey);
+  var $;
+  return {
+    ...n,
+    ...l,
+    ...t,
+    defaultSelectedKey: ($ = e.defaultSelectedKey) !== null && $ !== void 0 ? $ : s,
+    focusStrategy: r,
+    open(o = null) {
+      l.collection.size !== 0 && (a(o), t.open());
+    },
+    toggle(o = null) {
+      l.collection.size !== 0 && (a(o), t.toggle());
+    },
+    isFocused: f,
+    setFocused: i
+  };
+}
+function rt(e) {
+  return e && e.__esModule ? e.default : e;
+}
+const W = /* @__PURE__ */ N(null), H = /* @__PURE__ */ N(null), nt = /* @__PURE__ */ X(function(t, r) {
+  [t, r] = Q(t, r, W);
+  let { children: a, isDisabled: l = !1, isInvalid: n = !1, isRequired: f = !1 } = t, i = z(() => typeof a == "function" ? a({
+    isOpen: !1,
+    isDisabled: l,
+    isInvalid: n,
+    isRequired: f,
+    isFocused: !1,
+    isFocusVisible: !1,
+    defaultChildren: null
+  }) : a, [
+    a,
+    l,
+    n,
+    f
+  ]);
+  return /* @__PURE__ */ m.createElement(Oe, {
+    content: i
+  }, (s) => /* @__PURE__ */ m.createElement(dt, {
+    props: t,
+    collection: s,
+    selectRef: r
+  }));
+}), st = [
+  ee,
+  J,
+  j
+];
+function dt({ props: e, selectRef: t, collection: r }) {
+  let { validationBehavior: a } = Y(De) || {};
+  var l, n;
+  let f = (n = (l = e.validationBehavior) !== null && l !== void 0 ? l : a) !== null && n !== void 0 ? n : "native", i = it({
+    ...e,
+    collection: r,
+    children: void 0,
+    validationBehavior: f
+  }), { isFocusVisible: s, focusProps: $ } = Le({
+    within: !0
+  }), o = K(null), [p, b] = Se(!e["aria-label"] && !e["aria-labelledby"]), { labelProps: c, triggerProps: v, valueProps: y, menuProps: C, descriptionProps: E, errorMessageProps: w, hiddenSelectProps: R, ...g } = lt({
+    ...Pe(e),
+    label: b,
+    validationBehavior: f
+  }, i, o), [O, M] = I(null), h = U(() => {
+    o.current && M(o.current.offsetWidth + "px");
+  }, [
+    o
+  ]);
+  Te({
+    ref: o,
+    onResize: h
+  });
+  let B = z(() => ({
+    isOpen: i.isOpen,
+    isFocused: i.isFocused,
+    isFocusVisible: s,
+    isDisabled: e.isDisabled || !1,
+    isInvalid: g.isInvalid || !1,
+    isRequired: e.isRequired || !1
+  }), [
+    i.isOpen,
+    i.isFocused,
+    s,
+    e.isDisabled,
+    g.isInvalid,
+    e.isRequired
+  ]), u = Z({
+    ...e,
+    values: B,
+    defaultClassName: "react-aria-Select"
+  }), x = G(e, {
+    global: !0
+  });
+  delete x.id;
+  let S = K(null);
+  return /* @__PURE__ */ m.createElement(Ce, {
+    values: [
+      [
+        W,
+        e
+      ],
+      [
+        H,
+        i
+      ],
+      [
+        oe,
+        y
+      ],
+      [
+        ee,
+        {
+          ...c,
+          ref: p,
+          elementType: "span"
+        }
+      ],
+      [
+        J,
+        {
+          ...v,
+          ref: o,
+          isPressed: i.isOpen,
+          autoFocus: e.autoFocus
+        }
+      ],
+      [
+        he,
+        i
+      ],
+      [
+        ye,
+        {
+          trigger: "Select",
+          triggerRef: o,
+          scrollRef: S,
+          placement: "bottom start",
+          style: {
+            "--trigger-width": O
+          },
+          "aria-labelledby": C["aria-labelledby"],
+          clearContexts: st
+        }
+      ],
+      [
+        Ke,
+        {
+          ...C,
+          ref: S
+        }
+      ],
+      [
+        Be,
+        i
+      ],
+      [
+        j,
+        {
+          slots: {
+            description: E,
+            errorMessage: w
+          }
+        }
+      ],
+      [
+        Re,
+        g
+      ]
+    ]
+  }, /* @__PURE__ */ m.createElement("div", {
+    ...T(x, u, $),
+    ref: t,
+    slot: e.slot || void 0,
+    "data-focused": i.isFocused || void 0,
+    "data-focus-visible": s || void 0,
+    "data-open": i.isOpen || void 0,
+    "data-disabled": e.isDisabled || void 0,
+    "data-invalid": g.isInvalid || void 0,
+    "data-required": e.isRequired || void 0
+  }, u.children, /* @__PURE__ */ m.createElement(at, {
+    ...R,
+    autoComplete: e.autoComplete
+  })));
+}
+const oe = /* @__PURE__ */ N(null), ct = /* @__PURE__ */ X(function(t, r) {
+  var a, l;
+  [t, r] = Q(t, r, oe);
+  let n = _(H), { placeholder: f } = Y(W), i = n.selectedKey != null ? n.collection.getItem(n.selectedKey) : null, s = i?.props.children;
+  typeof s == "function" && (s = s({
+    isHovered: !1,
+    isPressed: !1,
+    isSelected: !1,
+    isFocused: !1,
+    isFocusVisible: !1,
+    isDisabled: !1,
+    selectionMode: "single",
+    selectionBehavior: "toggle"
+  }));
+  let $ = ze(rt(Fe), "react-aria-components");
+  var o, p, b;
+  let c = Z({
+    ...t,
+    defaultChildren: (o = s ?? f) !== null && o !== void 0 ? o : $.format("selectPlaceholder"),
+    defaultClassName: "react-aria-SelectValue",
+    values: {
+      selectedItem: (p = (a = n.selectedItem) === null || a === void 0 ? void 0 : a.value) !== null && p !== void 0 ? p : null,
+      selectedText: (b = (l = n.selectedItem) === null || l === void 0 ? void 0 : l.textValue) !== null && b !== void 0 ? b : null,
+      isPlaceholder: !i
+    }
+  }), v = G(t, {
+    global: !0
+  });
+  return /* @__PURE__ */ m.createElement("span", {
+    ref: r,
+    ...v,
+    ...c,
+    "data-placeholder": !i || void 0
+  }, /* @__PURE__ */ m.createElement(j.Provider, {
+    value: void 0
+  }, c.children));
+}), { withProvider: ft, withContext: P } = /* @__PURE__ */ de({
+  recipe: te
+}), ut = /* @__PURE__ */ ft(
+  "div",
+  "root"
+), bt = /* @__PURE__ */ P("div", "leadingElement"), $t = /* @__PURE__ */ P("button", "trigger"), pt = /* @__PURE__ */ P("span", "triggerLabel"), mt = /* @__PURE__ */ P("div", "options"), vt = /* @__PURE__ */ P("div", "option"), ht = /* @__PURE__ */ P("div", "optionGroup"), yt = /* @__PURE__ */ Ye({
+  clearSelection: {
+    id: "Nimbus.Select.clearSelection",
+    description: "aria-label for select clear button",
+    defaultMessage: "Clear selection"
+  }
+}), ae = () => {
+  const e = _(H), t = Ze();
+  if (!e?.selectedKey)
+    return null;
+  const r = () => {
+    e?.setSelectedKey(null);
+  };
+  return /* @__PURE__ */ d(ge, { children: /* @__PURE__ */ d(
+    Qe,
+    {
+      pointerEvents: "all",
+      size: "2xs",
+      variant: "ghost",
+      "aria-label": t.formatMessage(yt.clearSelection),
+      "aria-labelledby": "",
+      onPress: r,
+      children: /* @__PURE__ */ d(be, {})
+    }
+  ) });
+};
+ae.displayName = "Select.ClearButton";
+const ie = function({
+  ref: t,
+  children: r,
+  leadingElement: a,
+  isLoading: l,
+  isDisabled: n,
+  isClearable: f = !0,
+  ...i
+}) {
+  const s = K(null), $ = et(ue(s, t)), o = ce({ recipe: te }), [p, b] = o.splitVariantProps(i), [c, v] = le(b), y = {
+    ...v,
+    isDisabled: l || n
+  };
+  return /* @__PURE__ */ d(ut, { asChild: !0, ref: $, ...p, ...c, children: /* @__PURE__ */ F(nt, { ...y, children: [
+    /* @__PURE__ */ F(fe.div, { position: "relative", children: [
+      /* @__PURE__ */ d($t, { zIndex: 0, asChild: !0, children: /* @__PURE__ */ F(me, { children: [
+        a && /* @__PURE__ */ d(bt, { asChild: !0, children: a }),
+        /* @__PURE__ */ d(pt, { asChild: !0, children: /* @__PURE__ */ d(ct, {}) })
+      ] }) }),
+      /* @__PURE__ */ F(
+        V,
+        {
+          position: "absolute",
+          top: "0",
+          bottom: "0",
+          zIndex: 1,
+          right: "400",
+          pointerEvents: "none",
+          children: [
+            f && /* @__PURE__ */ d(V, { width: "600", my: "auto", children: /* @__PURE__ */ d(ae, {}) }),
+            /* @__PURE__ */ d(V, { my: "auto", w: "600", h: "600", pointerEvents: "none", children: /* @__PURE__ */ d(A, { color: "neutral.9", asChild: !0, m: "auto", w: "400", h: "400", children: l ? /* @__PURE__ */ d(A, { asChild: !0, animation: "spin", animationDuration: "slowest", children: /* @__PURE__ */ d($e, {}) }) : /* @__PURE__ */ d(pe, {}) }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ d(xe, { children: r })
+  ] }) });
+};
+ie.displayName = "Select.Root";
+const re = (e) => {
+  const { ref: t, ...r } = e, [a, l] = le(r);
+  return /* @__PURE__ */ d(mt, { asChild: !0, ...a, children: /* @__PURE__ */ d(Ie, { ref: t, ...l }) });
+};
+re.displayName = "Select.Options";
+const ne = ({
+  ref: e,
+  ...t
+}) => /* @__PURE__ */ d(vt, { asChild: !0, ref: e, children: /* @__PURE__ */ d(Ee, { ...t }) });
+ne.displayName = "Select.Option";
+const se = (e) => {
+  const { ref: t, label: r, items: a, children: l, ...n } = e;
+  if (a && typeof l != "function")
+    throw new Error(
+      'SelectOptionGroup: When "items" is provided, "children" must be a function'
+    );
+  return /* @__PURE__ */ F(we, { ref: t, ...n, children: [
+    /* @__PURE__ */ d(ht, { asChild: !0, children: /* @__PURE__ */ d(tt, { children: r }) }),
+    a ? /* @__PURE__ */ d(Me, { items: a, children: (f) => typeof l == "function" ? l(f) : null }) : l
+  ] });
+};
+se.displayName = "Select.OptionGroup";
+const ll = {
+  Root: ie,
+  Options: re,
+  Option: ne,
+  OptionGroup: se
+};
+export {
+  ll as S,
+  ie as a,
+  re as b,
+  ne as c,
+  se as d
+};
+//# sourceMappingURL=select-CwavXa9Y.es.js.map