@midas-ds/components 1.0.2 → 1.1.0

package/index78.js

@@ -1,104 +1,489 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { $ as p } from "./Link-BU1h3K2a.js";
-import { c as m } from "./clsx-OuTLNxxd.js";
-import { c as y } from "./createLucideIcon-DeWljiyi.js";
-import { C as _, a as g } from "./chevron-right-DBMc9VMi.js";
-import { $ as Z } from "./useFocusRing-D97-G3fT.js";
-import './LinkButton.css';/**
- * @license lucide-react v0.453.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const h = y("SquareArrowOutUpRight", [
-  ["path", { d: "M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6", key: "y09zxi" }],
-  ["path", { d: "m21 3-9 9", key: "mpx6sq" }],
-  ["path", { d: "M15 3h6v6", key: "1q9fwt" }]
-]), b = '"../theme/tokens.css"', k = "#143c50", q = "#25607f", x = "#4289ad", B = '"Inter", sans-serif', w = "1rem", R = "500", z = "#ffffff", L = "#bfbfbf", N = "#f2f2f2", $ = "#e6e6e6", S = "#000000", C = "undefined", j = "0 0 0 2px #ffffff, 0 0 0 4px #000000", A = "(max-width: 767px)", I = "#e62323", M = "#b31b1b", O = "#801313", U = "_linkButton_7qa6p_4", W = "_secondary_7qa6p_43", v = "_tertiary_7qa6p_67", H = "_danger_7qa6p_88", V = "_iconBtn_7qa6p_110", D = "_iconLeft_7qa6p_131", E = "_fullwidth_7qa6p_135", F = "_button_7qa6p_140", t = {
-  tokens: b,
-  blue150: k,
-  blue130: q,
-  blue90: x,
-  display: B,
-  desktopSize: w,
-  mediumWeight: R,
-  white: z,
-  gray50: L,
-  gray10: N,
-  gray20: $,
-  black: S,
-  medium: C,
-  focus: j,
-  smBreakpoint: A,
-  signalRed100: I,
-  signalRed130: M,
-  signalRed150: O,
-  linkButton: U,
-  secondary: W,
-  tertiary: v,
-  danger: H,
-  iconBtn: V,
-  iconLeft: D,
-  fullwidth: E,
-  button: F
-}, T = ({
-  children: a,
-  variant: e,
-  fullwidth: r,
-  icon: o,
-  iconPlacement: s,
-  className: i,
-  as: f,
-  ...c
-}) => {
-  const d = f || p, l = () => o ? /* @__PURE__ */ n(
-    o,
-    {
-      size: 20,
-      className: t.icon
+import { jsxs as T, jsx as v } 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-DL6nqUco.js";
+import { a as Z, $ as ee, b as ae, c as te } from "./ListBox-DBBiqvcR.js";
+import { e as le, f as ne, g as ie, h as oe, i as de, a as se } from "./Dialog-D6Bqrpn-.js";
+import { o as V, e as N, k as re, K as ce, I as fe, a as W, y as j, c as ue, z as be, A as $e, d as H, B as me } from "./useFocusRing-9PXyKy2A.js";
+import { d as pe, e as ve, c as ye, $ as ge, a as xe } from "./Form-BWBjJC6v.js";
+import { $ as he } from "./intlStrings-Cd44R5hT.js";
+import { b as Pe, $ as De } from "./useField-DMzJIIN4.js";
+import { $ as U } from "./Text-BCF0xvqL.js";
+import { $ as Re } from "./Collection-KMFfVuzU.js";
+import { $ as Se } from "./useSingleSelectListState-DPkaL0la.js";
+import { $ as Ie, a as Be } from "./ListKeyboardDelegate-gCXy-Xnn.js";
+import { g as Ce } from "./SelectionManager-BfXUE1qg.js";
+import { $ as Fe } from "./VisuallyHidden-Dhr5caPC.js";
+import { $ as ke } from "./useLocalizedStringFormatter-BlCbn-hX.js";
+import { I as Ke } from "./TextField-CX4eOQf6.js";
+import { C as _e } from "./chevron-down-Cd1bkzXT.js";
+import './Select.css';const A = /* @__PURE__ */ new WeakMap();
+function Ee(e, a, d) {
+  let { keyboardDelegate: i, isDisabled: l, isRequired: o, name: r, validationBehavior: t = "aria" } = e, n = Ie({
+    usage: "search",
+    sensitivity: "base"
+  }), c = M(() => i || new Be(a.collection, a.disabledKeys, d, n), [
+    i,
+    a.collection,
+    a.disabledKeys,
+    n
+  ]), { menuTriggerProps: s, menuProps: f } = le({
+    isDisabled: l,
+    type: "listbox"
+  }, a, d), p = (u) => {
+    switch (u.key) {
+      case "ArrowLeft": {
+        var x, h;
+        u.preventDefault();
+        let R = a.selectedKey != null ? (x = c.getKeyAbove) === null || x === void 0 ? void 0 : x.call(c, a.selectedKey) : (h = c.getFirstKey) === null || h === void 0 ? void 0 : h.call(c);
+        R && a.setSelectedKey(R);
+        break;
+      }
+      case "ArrowRight": {
+        var K, _;
+        u.preventDefault();
+        let R = a.selectedKey != null ? (K = c.getKeyBelow) === null || K === void 0 ? void 0 : K.call(c, a.selectedKey) : (_ = c.getFirstKey) === null || _ === void 0 ? void 0 : _.call(c);
+        R && a.setSelectedKey(R);
+        break;
+      }
     }
-  ) : c.target === "_blank" ? /* @__PURE__ */ n(
-    h,
-    {
-      size: 20,
-      className: t.icon
+  }, { typeSelectProps: m } = Ce({
+    keyboardDelegate: c,
+    selectionManager: a.selectionManager,
+    onTypeSelect(u) {
+      a.setSelectedKey(u);
     }
-  ) : s === "left" ? /* @__PURE__ */ n(
-    _,
-    {
-      size: 20,
-      className: t.icon
+  }), { isInvalid: y, validationErrors: P, validationDetails: B } = a.displayValidation, { labelProps: C, fieldProps: D, descriptionProps: g, errorMessageProps: F } = Pe({
+    ...e,
+    labelElementType: "span",
+    isInvalid: y,
+    errorMessage: e.errorMessage || P
+  });
+  m.onKeyDown = m.onKeyDownCapture, delete m.onKeyDownCapture;
+  let k = V(e, {
+    labelable: !0
+  }), $ = N(m, s, D), I = re();
+  return A.set(a, {
+    isDisabled: l,
+    isRequired: o,
+    name: r,
+    validationBehavior: t
+  }), {
+    labelProps: {
+      ...C,
+      onClick: () => {
+        if (!e.isDisabled) {
+          var u;
+          (u = d.current) === null || u === void 0 || u.focus(), ce("keyboard");
+        }
+      }
+    },
+    triggerProps: N(k, {
+      ...$,
+      isDisabled: l,
+      onKeyDown: fe($.onKeyDown, p, 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": [
+        D["aria-labelledby"],
+        $["aria-label"] && !D["aria-labelledby"] ? $.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps: g,
+    errorMessageProps: F,
+    isInvalid: y,
+    validationErrors: P,
+    validationDetails: B
+  };
+}
+function we(e, a, d) {
+  let i = A.get(a) || {}, { autoComplete: l, name: o = i.name, isDisabled: r = i.isDisabled } = e, { validationBehavior: t, isRequired: n } = i, { visuallyHiddenProps: c } = Fe();
+  pe(e.selectRef, a.selectedKey, a.setSelectedKey), ve({
+    validationBehavior: t,
+    focus: () => {
+      var f;
+      return (f = d.current) === null || f === void 0 ? void 0 : f.focus();
     }
-  ) : /* @__PURE__ */ n(
-    g,
-    {
-      size: 20,
-      className: t.icon
+  }, a, e.selectRef);
+  var s;
+  return {
+    containerProps: {
+      ...c,
+      "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: t === "native" && n,
+      name: o,
+      value: (s = a.selectedKey) !== null && s !== void 0 ? s : "",
+      onChange: (f) => a.setSelectedKey(f.target.value)
     }
-  );
-  return /* @__PURE__ */ u(
-    d,
+  };
+}
+function Me(e) {
+  let { state: a, triggerRef: d, label: i, name: l, isDisabled: o } = e, r = E(null), { containerProps: t, selectProps: n } = we({
+    ...e,
+    selectRef: r
+  }, a, d);
+  var c;
+  return a.collection.size <= 300 ? /* @__PURE__ */ b.createElement("div", {
+    ...t,
+    "data-testid": "hidden-select-container"
+  }, /* @__PURE__ */ b.createElement("label", null, i, /* @__PURE__ */ b.createElement("select", {
+    ...n,
+    ref: r
+  }, /* @__PURE__ */ b.createElement("option", null), [
+    ...a.collection.getKeys()
+  ].map((s) => {
+    let f = a.collection.getItem(s);
+    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: n.autoComplete,
+    name: l,
+    disabled: o,
+    value: (c = a.selectedKey) !== null && c !== void 0 ? c : ""
+  }) : null;
+}
+function qe(e) {
+  let a = ne(e), [d, i] = w(null), l = Se({
+    ...e,
+    onSelectionChange: (n) => {
+      e.onSelectionChange != null && e.onSelectionChange(n), a.close(), o.commitValidation();
+    }
+  }), o = ye({
+    ...e,
+    value: l.selectedKey
+  }), [r, t] = w(!1);
+  return {
+    ...o,
+    ...l,
+    ...a,
+    focusStrategy: d,
+    open(n = null) {
+      l.collection.size !== 0 && (i(n), a.open());
+    },
+    toggle(n = null) {
+      l.collection.size !== 0 && (i(n), a.toggle());
+    },
+    isFocused: r,
+    setFocused: t
+  };
+}
+function Ve(e) {
+  return e && e.__esModule ? e.default : e;
+}
+const O = /* @__PURE__ */ q(null), L = /* @__PURE__ */ q(null), Oe = /* @__PURE__ */ z(function(a, d) {
+  [a, d] = W(a, d, O);
+  let { children: i, isDisabled: l = !1, isInvalid: o = !1, isRequired: r = !1 } = a, t = M(() => typeof i == "function" ? i({
+    isOpen: !1,
+    isDisabled: l,
+    isInvalid: o,
+    isRequired: r,
+    isFocused: !1,
+    isFocusVisible: !1,
+    defaultChildren: null
+  }) : i, [
+    i,
+    l,
+    o,
+    r
+  ]);
+  return /* @__PURE__ */ b.createElement(Re, {
+    content: t
+  }, (n) => /* @__PURE__ */ b.createElement(Te, {
+    props: a,
+    collection: n,
+    selectRef: d
+  }));
+});
+function Te({ props: e, selectRef: a, collection: d }) {
+  let { validationBehavior: i } = j(ge) || {};
+  var l, o;
+  let r = (o = (l = e.validationBehavior) !== null && l !== void 0 ? l : i) !== null && o !== void 0 ? o : "native", t = qe({
+    ...e,
+    collection: d,
+    children: void 0,
+    validationBehavior: r
+  }), { isFocusVisible: n, focusProps: c } = ue({
+    within: !0
+  }), s = E(null), [f, p] = be(), { labelProps: m, triggerProps: y, valueProps: P, menuProps: B, descriptionProps: C, errorMessageProps: D, ...g } = Ee({
+    ...$e(e),
+    label: p,
+    validationBehavior: r
+  }, t, s), [F, k] = w(null), $ = J(() => {
+    s.current && k(s.current.offsetWidth + "px");
+  }, [
+    s
+  ]);
+  ie({
+    ref: s,
+    onResize: $
+  });
+  let I = M(() => ({
+    isOpen: t.isOpen,
+    isFocused: t.isFocused,
+    isFocusVisible: n,
+    isDisabled: e.isDisabled || !1,
+    isInvalid: g.isInvalid || !1,
+    isRequired: e.isRequired || !1
+  }), [
+    t.isOpen,
+    t.isFocused,
+    n,
+    e.isDisabled,
+    g.isInvalid,
+    e.isRequired
+  ]), u = H({
+    ...e,
+    values: I,
+    defaultClassName: "react-aria-Select"
+  }), x = V(e);
+  delete x.id;
+  let h = E(null);
+  return /* @__PURE__ */ b.createElement(me, {
+    values: [
+      [
+        O,
+        e
+      ],
+      [
+        L,
+        t
+      ],
+      [
+        G,
+        P
+      ],
+      [
+        De,
+        {
+          ...m,
+          ref: f,
+          elementType: "span"
+        }
+      ],
+      [
+        X,
+        {
+          ...y,
+          ref: s,
+          isPressed: t.isOpen
+        }
+      ],
+      [
+        oe,
+        t
+      ],
+      [
+        de,
+        {
+          trigger: "Select",
+          triggerRef: s,
+          scrollRef: h,
+          placement: "bottom start",
+          style: {
+            "--trigger-width": F
+          }
+        }
+      ],
+      [
+        Z,
+        {
+          ...B,
+          ref: h
+        }
+      ],
+      [
+        ee,
+        t
+      ],
+      [
+        U,
+        {
+          slots: {
+            description: C,
+            errorMessage: D
+          }
+        }
+      ],
+      [
+        xe,
+        g
+      ]
+    ]
+  }, /* @__PURE__ */ b.createElement("div", {
+    ...x,
+    ...u,
+    ...c,
+    ref: a,
+    slot: e.slot || void 0,
+    "data-focused": t.isFocused || void 0,
+    "data-focus-visible": n || void 0,
+    "data-open": t.isOpen || void 0,
+    "data-disabled": e.isDisabled || void 0,
+    "data-invalid": g.isInvalid || void 0,
+    "data-required": e.isRequired || void 0
+  }), /* @__PURE__ */ b.createElement(Me, {
+    autoComplete: e.autoComplete,
+    state: t,
+    triggerRef: s,
+    label: p,
+    name: e.name,
+    isDisabled: e.isDisabled
+  }));
+}
+const G = /* @__PURE__ */ q(null), Ne = /* @__PURE__ */ z(function(a, d) {
+  var i, l;
+  [a, d] = W(a, d, G);
+  let o = Q(L), { placeholder: r } = j(O), t = o.selectedKey != null ? o.collection.getItem(o.selectedKey) : null, n = t == null ? void 0 : t.props.children;
+  typeof n == "function" && (n = n({
+    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 s, f, p;
+  let m = H({
+    ...a,
+    defaultChildren: (s = n ?? r) !== null && s !== void 0 ? s : c.format("selectPlaceholder"),
+    defaultClassName: "react-aria-SelectValue",
+    values: {
+      selectedItem: (f = (i = o.selectedItem) === null || i === void 0 ? void 0 : i.value) !== null && f !== void 0 ? f : null,
+      selectedText: (p = (l = o.selectedItem) === null || l === void 0 ? void 0 : l.textValue) !== null && p !== void 0 ? p : null,
+      isPlaceholder: !t
+    }
+  }), y = V(a);
+  return /* @__PURE__ */ b.createElement("span", {
+    ref: d,
+    ...y,
+    ...m,
+    "data-placeholder": !t || void 0
+  }, /* @__PURE__ */ b.createElement(U.Provider, {
+    value: void 0
+  }, m.children));
+}), ze = '"../theme/tokens.css"', We = '"Inter", sans-serif', je = "#000000", He = "#b31b1b", Ue = "(max-width: 767px)", Ae = "#bfbfbf", Le = "#e6e6e6", Ge = "0 0 0 2px #ffffff, 0 0 0 4px #000000", Je = "#f2f2f2", Qe = "_button_1n8ts_4", Xe = "_select_1n8ts_41", Ye = "_popover_1n8ts_57", Ze = "_listBoxItem_1n8ts_65", ea = "_icon_1n8ts_87", S = {
+  tokens: ze,
+  display: We,
+  black: je,
+  signalRed130: He,
+  smBreakpoint: Ue,
+  gray50: Ae,
+  gray20: Le,
+  focus: Ge,
+  backgroundSecondary: Je,
+  button: Qe,
+  select: Xe,
+  popover: Ye,
+  listBoxItem: Ze,
+  icon: ea
+};
+function ga({
+  label: e,
+  description: a,
+  errorMessage: d,
+  children: i,
+  items: l,
+  ...o
+}) {
+  const r = b.useRef(null);
+  return /* @__PURE__ */ T(
+    Oe,
     {
-      className: m(
-        t.linkButton,
-        e === "primary" && t.primary,
-        e === "secondary" && t.secondary,
-        e === "tertiary" && t.tertiary,
-        e === "danger" && t.danger,
-        e === "icon" && t.iconBtn,
-        r && t.fullwidth,
-        s === "left" && t.iconLeft,
-        i
-      ),
-      ...c,
+      className: S.select,
+      ref: r,
+      ...o,
       children: [
-        a,
-        /* @__PURE__ */ n(l, {})
+        /* @__PURE__ */ v(
+          Ke,
+          {
+            label: e,
+            description: a,
+            errorMessage: d,
+            children: /* @__PURE__ */ T(Y, { className: S.button, children: [
+              /* @__PURE__ */ v(Ne, {}),
+              /* @__PURE__ */ v(
+                "div",
+                {
+                  className: S.icon,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ v(
+                    _e,
+                    {
+                      size: 20,
+                      "aria-hidden": !0
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ v(
+          se,
+          {
+            className: S.popover,
+            offset: 0,
+            UNSTABLE_portalContainer: r.current || void 0,
+            children: /* @__PURE__ */ v(ae, { items: l, children: i })
+          }
+        )
       ]
     }
   );
-};
+}
+function xa(e) {
+  return /* @__PURE__ */ v(
+    te,
+    {
+      className: S.listBoxItem,
+      ...e
+    }
+  );
+}
 export {
-  T as LinkButton,
-  Z as RouterProvider
+  xa as Item,
+  ga as Select
 };