@midas-ds/components 1.0.2

package/index81.js

@@ -0,0 +1,491 @@
+import { jsxs as T, jsx as p } from "react/jsx-runtime";
+import b, { useMemo as M, useRef as E, useState as w, forwardRef as z, useCallback as J, createContext as q, useContext as Q } from "react";
+import { a as X, $ as Y } from "./Button-CCevm2s3.js";
+import { a as Z, $ as ee, b as ae, c as te } from "./ListBox-D21tdwTs.js";
+import { e as le, f as ie, g as oe, h as se, i as re, a as ne } from "./Dialog-CLTyYwkS.js";
+import { n as V, e as N, k as de, G as ce, D as fe, a as W, u as j, c as ue, v as be, w as $e, d as H, x as ve } from "./useFocusRing-D97-G3fT.js";
+import { a as me, b as pe, $ as ye, c as ge, d as xe } from "./Form-DXLoQL91.js";
+import { $ as he } from "./intlStrings-Cd44R5hT.js";
+import { $ as Pe, a as De } from "./Label-C18A_4Z5.js";
+import { $ as U } from "./Text-DGLaY3HR.js";
+import { c as Re } from "./Collection-B3xUVWPF.js";
+import { $ as Se } from "./useSingleSelectListState-CmX9_L5H.js";
+import { $ as Ie, a as Be } from "./ListKeyboardDelegate-DxMjfMsI.js";
+import { g as Fe } from "./SelectionManager-D4WtKtey.js";
+import { $ as Ce } from "./VisuallyHidden-B_XzVvlX.js";
+import { $ as ke } from "./useLocalizedStringFormatter-DVCAZqcL.js";
+import { I as Ke } from "./TextField-C_hq9WeT.js";
+import { C as _e } from "./chevron-down-Cd1bkzXT.js";
+import './Select.css';const A = /* @__PURE__ */ new WeakMap();
+function Ee(e, a, i) {
+  let { keyboardDelegate: o, isDisabled: l, isRequired: d, name: s, validationBehavior: t = "aria" } = e, c = Ie({
+    usage: "search",
+    sensitivity: "base"
+  }), r = M(() => o || new Be(a.collection, a.disabledKeys, i, c), [
+    o,
+    a.collection,
+    a.disabledKeys,
+    c
+  ]), { menuTriggerProps: n, menuProps: f } = le({
+    isDisabled: l,
+    type: "listbox"
+  }, a, i), m = (u) => {
+    switch (u.key) {
+      case "ArrowLeft": {
+        var g, x;
+        u.preventDefault();
+        let D = a.selectedKey != null ? (g = r.getKeyAbove) === null || g === void 0 ? void 0 : g.call(r, a.selectedKey) : (x = r.getFirstKey) === null || x === void 0 ? void 0 : x.call(r);
+        D && a.setSelectedKey(D);
+        break;
+      }
+      case "ArrowRight": {
+        var K, _;
+        u.preventDefault();
+        let D = a.selectedKey != null ? (K = r.getKeyBelow) === null || K === void 0 ? void 0 : K.call(r, a.selectedKey) : (_ = r.getFirstKey) === null || _ === void 0 ? void 0 : _.call(r);
+        D && a.setSelectedKey(D);
+        break;
+      }
+    }
+  }, { typeSelectProps: v } = Fe({
+    keyboardDelegate: r,
+    selectionManager: a.selectionManager,
+    onTypeSelect(u) {
+      a.setSelectedKey(u);
+    }
+  }), { isInvalid: h, validationErrors: S, validationDetails: B } = a.displayValidation, { labelProps: F, fieldProps: P, descriptionProps: y, errorMessageProps: C } = Pe({
+    ...e,
+    labelElementType: "span",
+    isInvalid: h,
+    errorMessage: e.errorMessage || S
+  });
+  v.onKeyDown = v.onKeyDownCapture, delete v.onKeyDownCapture;
+  let k = V(e, {
+    labelable: !0
+  }), $ = N(v, n, P), I = de();
+  return A.set(a, {
+    isDisabled: l,
+    isRequired: d,
+    name: s,
+    validationBehavior: t
+  }), {
+    labelProps: {
+      ...F,
+      onClick: () => {
+        if (!e.isDisabled) {
+          var u;
+          (u = i.current) === null || u === void 0 || u.focus(), ce("keyboard");
+        }
+      }
+    },
+    triggerProps: N(k, {
+      ...$,
+      isDisabled: l,
+      onKeyDown: fe($.onKeyDown, m, e.onKeyDown),
+      onKeyUp: e.onKeyUp,
+      "aria-labelledby": [
+        I,
+        $["aria-labelledby"],
+        $["aria-label"] && !$["aria-labelledby"] ? $.id : null
+      ].filter(Boolean).join(" "),
+      onFocus(u) {
+        a.isFocused || (e.onFocus && e.onFocus(u), e.onFocusChange && e.onFocusChange(!0), a.setFocused(!0));
+      },
+      onBlur(u) {
+        a.isOpen || (e.onBlur && e.onBlur(u), e.onFocusChange && e.onFocusChange(!1), a.setFocused(!1));
+      }
+    }),
+    valueProps: {
+      id: I
+    },
+    menuProps: {
+      ...f,
+      autoFocus: a.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), a.setFocused(!1));
+      },
+      "aria-labelledby": [
+        P["aria-labelledby"],
+        $["aria-label"] && !P["aria-labelledby"] ? $.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps: y,
+    errorMessageProps: C,
+    isInvalid: h,
+    validationErrors: S,
+    validationDetails: B
+  };
+}
+function we(e, a, i) {
+  let o = A.get(a) || {}, { autoComplete: l, name: d = o.name, isDisabled: s = o.isDisabled } = e, { validationBehavior: t, isRequired: c } = o, { visuallyHiddenProps: r } = Ce();
+  me(e.selectRef, a.selectedKey, a.setSelectedKey), pe({
+    validationBehavior: t,
+    focus: () => {
+      var f;
+      return (f = i.current) === null || f === void 0 ? void 0 : f.focus();
+    }
+  }, a, e.selectRef);
+  var n;
+  return {
+    containerProps: {
+      ...r,
+      "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: s,
+      required: t === "native" && c,
+      name: d,
+      value: (n = a.selectedKey) !== null && n !== void 0 ? n : "",
+      onChange: (f) => a.setSelectedKey(f.target.value)
+    }
+  };
+}
+function Me(e) {
+  let { state: a, triggerRef: i, label: o, name: l, isDisabled: d } = e, s = E(null), { containerProps: t, selectProps: c } = we({
+    ...e,
+    selectRef: s
+  }, a, i);
+  var r;
+  return a.collection.size <= 300 ? /* @__PURE__ */ b.createElement("div", {
+    ...t,
+    "data-testid": "hidden-select-container"
+  }, /* @__PURE__ */ b.createElement("label", null, o, /* @__PURE__ */ b.createElement("select", {
+    ...c,
+    ref: s
+  }, /* @__PURE__ */ b.createElement("option", null), [
+    ...a.collection.getKeys()
+  ].map((n) => {
+    let f = a.collection.getItem(n);
+    if (f && f.type === "item") return /* @__PURE__ */ b.createElement("option", {
+      key: f.key,
+      value: f.key
+    }, f.textValue);
+  })))) : l ? /* @__PURE__ */ b.createElement("input", {
+    type: "hidden",
+    autoComplete: c.autoComplete,
+    name: l,
+    disabled: d,
+    value: (r = a.selectedKey) !== null && r !== void 0 ? r : ""
+  }) : null;
+}
+function qe(e) {
+  let a = ie(e), [i, o] = w(null), l = Se({
+    ...e,
+    onSelectionChange: (c) => {
+      e.onSelectionChange != null && e.onSelectionChange(c), a.close(), d.commitValidation();
+    }
+  }), d = ye({
+    ...e,
+    value: l.selectedKey
+  }), [s, t] = w(!1);
+  return {
+    ...d,
+    ...l,
+    ...a,
+    focusStrategy: i,
+    open(c = null) {
+      l.collection.size !== 0 && (o(c), a.open());
+    },
+    toggle(c = null) {
+      l.collection.size !== 0 && (o(c), a.toggle());
+    },
+    isFocused: s,
+    setFocused: t
+  };
+}
+function Ve(e) {
+  return e && e.__esModule ? e.default : e;
+}
+const O = /* @__PURE__ */ q(null), L = /* @__PURE__ */ q(null);
+function Oe(e, a) {
+  [e, a] = W(e, a, O);
+  let { children: i, isDisabled: o = !1, isInvalid: l = !1, isRequired: d = !1 } = e, s = M(() => typeof i == "function" ? i({
+    isOpen: !1,
+    isDisabled: o,
+    isInvalid: l,
+    isRequired: d,
+    isFocused: !1,
+    isFocusVisible: !1,
+    defaultChildren: null
+  }) : i, [
+    i,
+    o,
+    l,
+    d
+  ]);
+  return /* @__PURE__ */ b.createElement(Re, {
+    content: s
+  }, (t) => /* @__PURE__ */ b.createElement(Te, {
+    props: e,
+    collection: t,
+    selectRef: a
+  }));
+}
+function Te({ props: e, selectRef: a, collection: i }) {
+  let { validationBehavior: o } = j(ge) || {};
+  var l, d;
+  let s = (d = (l = e.validationBehavior) !== null && l !== void 0 ? l : o) !== null && d !== void 0 ? d : "native", t = qe({
+    ...e,
+    collection: i,
+    children: void 0,
+    validationBehavior: s
+  }), { isFocusVisible: c, focusProps: r } = ue({
+    within: !0
+  }), n = E(null), [f, m] = be(), { labelProps: v, triggerProps: h, valueProps: S, menuProps: B, descriptionProps: F, errorMessageProps: P, ...y } = Ee({
+    ...$e(e),
+    label: m,
+    validationBehavior: s
+  }, t, n), [C, k] = w(null), $ = J(() => {
+    n.current && k(n.current.offsetWidth + "px");
+  }, [
+    n
+  ]);
+  oe({
+    ref: n,
+    onResize: $
+  });
+  let I = M(() => ({
+    isOpen: t.isOpen,
+    isFocused: t.isFocused,
+    isFocusVisible: c,
+    isDisabled: e.isDisabled || !1,
+    isInvalid: y.isInvalid || !1,
+    isRequired: e.isRequired || !1
+  }), [
+    t.isOpen,
+    t.isFocused,
+    c,
+    e.isDisabled,
+    y.isInvalid,
+    e.isRequired
+  ]), u = H({
+    ...e,
+    values: I,
+    defaultClassName: "react-aria-Select"
+  }), g = V(e);
+  delete g.id;
+  let x = E(null);
+  return /* @__PURE__ */ b.createElement(ve, {
+    values: [
+      [
+        O,
+        e
+      ],
+      [
+        L,
+        t
+      ],
+      [
+        G,
+        S
+      ],
+      [
+        De,
+        {
+          ...v,
+          ref: f,
+          elementType: "span"
+        }
+      ],
+      [
+        X,
+        {
+          ...h,
+          ref: n,
+          isPressed: t.isOpen
+        }
+      ],
+      [
+        se,
+        t
+      ],
+      [
+        re,
+        {
+          trigger: "Select",
+          triggerRef: n,
+          scrollRef: x,
+          placement: "bottom start",
+          style: {
+            "--trigger-width": C
+          }
+        }
+      ],
+      [
+        Z,
+        {
+          ...B,
+          ref: x
+        }
+      ],
+      [
+        ee,
+        t
+      ],
+      [
+        U,
+        {
+          slots: {
+            description: F,
+            errorMessage: P
+          }
+        }
+      ],
+      [
+        xe,
+        y
+      ]
+    ]
+  }, /* @__PURE__ */ b.createElement("div", {
+    ...g,
+    ...u,
+    ...r,
+    ref: a,
+    slot: e.slot || void 0,
+    "data-focused": t.isFocused || void 0,
+    "data-focus-visible": c || void 0,
+    "data-open": t.isOpen || void 0,
+    "data-disabled": e.isDisabled || void 0,
+    "data-invalid": y.isInvalid || void 0,
+    "data-required": e.isRequired || void 0
+  }), /* @__PURE__ */ b.createElement(Me, {
+    state: t,
+    triggerRef: n,
+    label: m,
+    name: e.name,
+    isDisabled: e.isDisabled
+  }));
+}
+const Ne = /* @__PURE__ */ z(Oe), G = /* @__PURE__ */ q(null);
+function ze(e, a) {
+  var i, o;
+  [e, a] = W(e, a, G);
+  let l = Q(L), { placeholder: d } = j(O), s = l.selectedKey != null ? l.collection.getItem(l.selectedKey) : null, t = s == null ? void 0 : s.props.children;
+  typeof t == "function" && (t = t({
+    isHovered: !1,
+    isPressed: !1,
+    isSelected: !1,
+    isFocused: !1,
+    isFocusVisible: !1,
+    isDisabled: !1,
+    selectionMode: "single",
+    selectionBehavior: "toggle"
+  }));
+  let c = ke(Ve(he), "react-aria-components");
+  var r, n, f;
+  let m = H({
+    ...e,
+    defaultChildren: (r = t ?? d) !== null && r !== void 0 ? r : c.format("selectPlaceholder"),
+    defaultClassName: "react-aria-SelectValue",
+    values: {
+      selectedItem: (n = (i = l.selectedItem) === null || i === void 0 ? void 0 : i.value) !== null && n !== void 0 ? n : null,
+      selectedText: (f = (o = l.selectedItem) === null || o === void 0 ? void 0 : o.textValue) !== null && f !== void 0 ? f : null,
+      isPlaceholder: !s
+    }
+  }), v = V(e);
+  return /* @__PURE__ */ b.createElement("span", {
+    ref: a,
+    ...v,
+    ...m,
+    "data-placeholder": !s || void 0
+  }, /* @__PURE__ */ b.createElement(U.Provider, {
+    value: void 0
+  }, m.children));
+}
+const We = /* @__PURE__ */ z(ze), je = '"../theme/tokens.css"', He = '"Inter", sans-serif', Ue = "#000000", Ae = "#b31b1b", Le = "(max-width: 767px)", Ge = "#bfbfbf", Je = "#e6e6e6", Qe = "0 0 0 2px #ffffff, 0 0 0 4px #000000", Xe = "#f2f2f2", Ye = "_button_1n8ts_4", Ze = "_select_1n8ts_41", ea = "_popover_1n8ts_57", aa = "_listBoxItem_1n8ts_65", ta = "_icon_1n8ts_87", R = {
+  tokens: je,
+  display: He,
+  black: Ue,
+  signalRed130: Ae,
+  smBreakpoint: Le,
+  gray50: Ge,
+  gray20: Je,
+  focus: Qe,
+  backgroundSecondary: Xe,
+  button: Ye,
+  select: Ze,
+  popover: ea,
+  listBoxItem: aa,
+  icon: ta
+};
+function ha({
+  label: e,
+  description: a,
+  errorMessage: i,
+  children: o,
+  items: l,
+  ...d
+}) {
+  const s = b.useRef(null);
+  return /* @__PURE__ */ T(
+    Ne,
+    {
+      className: R.select,
+      ref: s,
+      ...d,
+      children: [
+        /* @__PURE__ */ p(
+          Ke,
+          {
+            label: e,
+            description: a,
+            errorMessage: i,
+            children: /* @__PURE__ */ T(Y, { className: R.button, children: [
+              /* @__PURE__ */ p(We, {}),
+              /* @__PURE__ */ p(
+                "div",
+                {
+                  className: R.icon,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ p(
+                    _e,
+                    {
+                      size: 20,
+                      "aria-hidden": !0
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ p(
+          ne,
+          {
+            className: R.popover,
+            offset: 0,
+            UNSTABLE_portalContainer: s.current || void 0,
+            children: /* @__PURE__ */ p(ae, { items: l, children: o })
+          }
+        )
+      ]
+    }
+  );
+}
+function Pa(e) {
+  return /* @__PURE__ */ p(
+    te,
+    {
+      className: R.listBoxItem,
+      ...e
+    }
+  );
+}
+export {
+  Pa as Item,
+  ha as Select
+};