@commercetools/nimbus 0.0.12-rc1 → 0.0.13-rc2

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

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