@midas-ds/components 17.2.6 → 17.3.0

package/chunks/SearchField-1DYv0w4b.js

@@ -0,0 +1,128 @@
+'use client';
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { s as y } from "./TextField.module-BDIbEV87.js";
+import { B as C } from "./Button-BhIvfqOc.js";
+import { C as F } from "./ClearButton-DBr9Zfwq.js";
+import { c as l } from "./clsx-AexbMWKp.js";
+import * as N from "react";
+import { useSearchFieldState as x } from "react-stately";
+import { useSearchField as j } from "react-aria";
+import { F as f } from "./FieldError-krpMBtie.js";
+import { c as p } from "./createLucideIcon-CP-mMPfa.js";
+import { u as B } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/SearchField.css';const D = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], E = p("search", D), k = "_container_19q7q_1", P = "_inner_19q7q_10", T = "_inputContainer_19q7q_15", w = "_medium_19q7q_21", I = "_icon_19q7q_26", K = "_clear_19q7q_39", L = "_input_19q7q_15", n = {
+  container: k,
+  inner: P,
+  inputContainer: T,
+  medium: w,
+  icon: I,
+  clear: K,
+  input: L
+}, M = { search: "Search" }, R = { search: "Sök" }, V = {
+  en: M,
+  sv: R
+};
+function O(r) {
+  return !!r?.length;
+}
+const Z = ({
+  errorPosition: r = "top",
+  size: i = "large",
+  ...e
+}) => {
+  const { value: t, setValue: m } = x(e), b = B(V), d = N.useRef(null), { inputProps: o, isInvalid: c, validationErrors: h, clearButtonProps: q } = j(
+    {
+      ...e,
+      label: e.placeholder,
+      validationBehavior: "native"
+    },
+    { value: t, setValue: m },
+    d
+  ), v = ({ target: s }) => m(s.value), S = () => m(""), _ = () => {
+    if (e.validate && O(e.validate(t)) || c || !t) {
+      d.current?.focus();
+      return;
+    }
+    e.onSubmit && e.onSubmit(t);
+  }, g = ({ key: s }) => {
+    s === "Enter" && _();
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: l(n.container, e.className),
+      "data-disabled": o.disabled,
+      children: [
+        r === "top" && /* @__PURE__ */ a(f, { isInvalid: c, children: e.errorMessage ?? h.join(" ") }),
+        /* @__PURE__ */ u("div", { className: n.inner, children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: l(n.inputContainer, {
+                [n.medium]: i === "medium"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  E,
+                  {
+                    size: 20,
+                    className: n.icon
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    ...o,
+                    ...o.disabled && { "data-disabled": !0 },
+                    className: l(
+                      y.input,
+                      n.input,
+                      o.className,
+                      { [n.medium]: i === "medium" }
+                    ),
+                    ref: d,
+                    onChange: v,
+                    value: t,
+                    "aria-invalid": c,
+                    onKeyDown: g,
+                    "aria-label": e.placeholder,
+                    "aria-labelledby": ""
+                  }
+                ),
+                t.length > 0 && /* @__PURE__ */ a(
+                  F,
+                  {
+                    ...q,
+                    onPress: S,
+                    size: i,
+                    className: l(n.clear, {
+                      [n.medium]: i === "medium"
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            C,
+            {
+              size: i,
+              isDisabled: e.isDisabled,
+              excludeFromTabOrder: !0,
+              onPress: _,
+              type: "button",
+              children: e.buttonText ? e.buttonText : b.format("search")
+            }
+          )
+        ] }),
+        r === "bottom" && /* @__PURE__ */ a(f, { isInvalid: c, children: e.errorMessage ?? h.join(" ") })
+      ]
+    }
+  );
+};
+export {
+  Z as S
+};

package/chunks/Select-CV0H13h-.js

@@ -0,0 +1,222 @@
+import { jsx as e, Fragment as V, jsxs as i } from "react/jsx-runtime";
+import { SelectStateContext as d, SelectValue as g, Button as _, TagList as A, Select as C } from "react-aria-components";
+import { FocusScope as N } from "@react-aria/focus";
+import { a as x, L as b } from "./Label-s4J9sYdy.js";
+import { a as T, c as y } from "./clsx-AexbMWKp.js";
+import { T as B } from "./Text-D0r_W4lH.js";
+import { F as h } from "./FieldError-krpMBtie.js";
+import p, { useContext as f } from "react";
+import { C as M } from "./Checkbox-sAkQe7Q9.js";
+import { u as m } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import { useFocusManager as F } from "react-aria";
+import { X as L } from "./x-B9bYxG31.js";
+import { L as I } from "./ListBox-CDlOUvzJ.js";
+import { P as G } from "./Popover-CaP4LFhg.js";
+import { a as j, T as k } from "./TagGroup-BscTXQ_E.js";
+import { C as R } from "./chevron-down-BBFYYzZq.js";
+import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Select all", selectedItems: "Selected items", selected: "selected" }, w = { clearAll: "Rensa alla", selectAll: "Välj alla", selectedItems: "Valda objekt", selected: "valda" }, u = {
+  en: $,
+  sv: w
+}, P = "_select_1h0s2_1", z = "_triggerContainer_1h0s2_7", D = "_trigger_1h0s2_7", E = "_medium_1h0s2_29", K = "_icon_1h0s2_66", W = "_selectValue_1h0s2_72", X = "_placeholder_1h0s2_78", q = "_multiSelectValue_1h0s2_88", H = "_selectValueTag_1h0s2_112", J = "_clearButton_1h0s2_126", O = "_truncate_1h0s2_138", Q = "_popover_1h0s2_175", U = "_selectAll_1h0s2_201", Y = "_tagGroup_1h0s2_269", s = {
+  select: P,
+  triggerContainer: z,
+  trigger: D,
+  medium: E,
+  icon: K,
+  selectValue: W,
+  placeholder: X,
+  multiSelectValue: q,
+  selectValueTag: H,
+  clearButton: J,
+  truncate: O,
+  popover: Q,
+  selectAll: U,
+  tagGroup: Y
+}, Z = () => {
+  const t = p.useContext(d), c = m(u), r = () => t?.setValue(
+    t?.selectionManager.isSelectAll ? null : Array.from(t.collection.getKeys())
+  );
+  return /* @__PURE__ */ e(
+    M,
+    {
+      className: s.selectAll,
+      isIndeterminate: !t?.selectionManager.isSelectAll && !t?.selectionManager.isEmpty,
+      isSelected: t?.selectionManager.isSelectAll,
+      onChange: r,
+      children: c.format("selectAll")
+    }
+  );
+}, ee = ({
+  isDisabled: t
+}) => {
+  const c = m(u), r = (l, o) => l.length === 1 ? o : `${l.length} ${c.format("selected")}`;
+  return /* @__PURE__ */ e(
+    g,
+    {
+      className: s.multiSelectValue,
+      "data-disabled": t || void 0,
+      children: ({ isPlaceholder: l, selectedItems: o, selectedText: a }) => l ? /* @__PURE__ */ e(V, {}) : /* @__PURE__ */ i(
+        "div",
+        {
+          className: s.selectValueTag,
+          "data-disabled": t || void 0,
+          children: [
+            /* @__PURE__ */ e("span", { className: s.truncate, children: r(o, a) }),
+            /* @__PURE__ */ e(te, { isDisabled: t })
+          ]
+        }
+      )
+    }
+  );
+}, te = ({
+  isDisabled: t
+}) => {
+  const c = p.useContext(d), r = m(u), l = F(), o = () => {
+    l?.focusFirst(), c?.setValue(null);
+  };
+  return /* @__PURE__ */ e(
+    _,
+    {
+      "aria-label": r.format("clearAll"),
+      className: s.clearButton,
+      onPress: o,
+      slot: null,
+      isDisabled: t,
+      children: /* @__PURE__ */ e(
+        L,
+        {
+          width: 20,
+          height: 20
+        }
+      )
+    }
+  );
+}, le = ({
+  showTags: t,
+  isDisabled: c
+}) => {
+  const r = m(u), l = f(d), o = (a) => {
+    l?.selectionManager.toggleSelection(Array.from(a)[0]);
+  };
+  return !l?.selectedItems.length || !t ? null : /* @__PURE__ */ e(
+    j,
+    {
+      "aria-label": r.format("selectedItems"),
+      className: s.tagGroup,
+      onRemove: o,
+      selectionBehavior: "toggle",
+      children: /* @__PURE__ */ e(A, { items: l.selectedItems, children: (a) => /* @__PURE__ */ e(
+        k,
+        {
+          isDismissable: !0,
+          id: a.key,
+          isDisabled: c,
+          textValue: a.textValue,
+          children: a.textValue
+        },
+        a.key
+      ) })
+    }
+  );
+}, se = ({
+  isDisabled: t,
+  selectionMode: c,
+  size: r
+}) => {
+  const l = f(d);
+  return /* @__PURE__ */ i(
+    _,
+    {
+      className: T(
+        {
+          [s.medium]: r === "medium"
+        },
+        s.trigger
+      ),
+      "data-invalid": !!l?.displayValidation.isInvalid || void 0,
+      children: [
+        /* @__PURE__ */ e(
+          g,
+          {
+            className: s.selectValue,
+            "data-disabled": t || void 0,
+            children: ({ selectedText: o, defaultChildren: a }) => /* @__PURE__ */ e("div", { className: s.placeholder, children: /* @__PURE__ */ e("span", { className: s.truncate, children: c === "multiple" && o ? null : o || a }) })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: s.icon,
+            children: /* @__PURE__ */ e(R, { size: 20 })
+          }
+        )
+      ]
+    }
+  );
+};
+function Ve({
+  children: t,
+  description: c,
+  errorMessage: r,
+  errorPosition: l = "top",
+  items: o,
+  label: a,
+  popover: S,
+  size: v = "large",
+  ...n
+}) {
+  return /* @__PURE__ */ e(N, { children: /* @__PURE__ */ i(
+    C,
+    {
+      ...n,
+      className: y(n.className, s.select),
+      children: [
+        /* @__PURE__ */ e(x, { popover: S, children: a && /* @__PURE__ */ e(b, { "data-disabled": n.isDisabled || void 0, children: a }) }),
+        c && /* @__PURE__ */ e(B, { slot: "description", children: c }),
+        l === "top" && /* @__PURE__ */ e(h, { children: r }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: s.triggerContainer,
+            "data-disabled": n.isDisabled || void 0,
+            children: [
+              /* @__PURE__ */ e(
+                se,
+                {
+                  size: v,
+                  ...n
+                }
+              ),
+              n.selectionMode === "multiple" ? /* @__PURE__ */ e(ee, { ...n }) : null
+            ]
+          }
+        ),
+        l === "bottom" && /* @__PURE__ */ e(h, { children: r }),
+        /* @__PURE__ */ i(
+          G,
+          {
+            className: s.popover,
+            offset: 0,
+            hideArrow: !0,
+            children: [
+              n.isSelectableAll && /* @__PURE__ */ e(Z, {}),
+              /* @__PURE__ */ e(
+                I,
+                {
+                  escapeKeyBehavior: "none",
+                  items: o,
+                  children: t
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(le, { ...n })
+      ]
+    }
+  ) });
+}
+export {
+  Ve as S
+};

package/chunks/Separator-CkVOLF6I.js

@@ -0,0 +1,76 @@
+import { jsx as n, jsxs as r, Fragment as u } from "react/jsx-runtime";
+import { Menu as _, MenuItem as l, Popover as d, MenuSection as M, Separator as h } from "react-aria-components";
+import { c as a } from "./clsx-AexbMWKp.js";
+import { C as S } from "./check-Bt2UikoU.js";
+import { C as f } from "./chevron-right-DvXGOiS_.js";
+import '../assets/Separator.css';const p = "_menu_1oois_1", v = "_menuSection_1oois_17", k = "_medium_1oois_29", C = "_menuItem_1oois_36", N = "_mainContent_1oois_106", I = "_checkMark_1oois_117", x = "_separator_1oois_127", P = "_menuPopover_1oois_150", t = {
+  menu: p,
+  menuSection: v,
+  medium: k,
+  menuItem: C,
+  mainContent: N,
+  checkMark: I,
+  separator: x,
+  menuPopover: P
+}, z = ({
+  className: e,
+  size: o = "large",
+  ...s
+}) => /* @__PURE__ */ n(
+  _,
+  {
+    className: a(e, t.menu, o === "medium" && t.medium),
+    ...s
+  }
+), V = (e) => /* @__PURE__ */ n(
+  l,
+  {
+    ...e,
+    textValue: e.textValue || (typeof e.children == "string" ? e.children : void 0),
+    className: a(t.menuItem, e.className),
+    children: (o) => {
+      const { children: s } = e, { selectionMode: m, isSelected: c, hasSubmenu: i } = o;
+      return /* @__PURE__ */ r(u, { children: [
+        m !== "none" && /* @__PURE__ */ n(
+          S,
+          {
+            size: 16,
+            className: t.checkMark,
+            "data-selected": c || void 0
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: t.mainContent, children: typeof s == "function" ? s(o) : s }),
+        i && /* @__PURE__ */ n(f, { size: 20 })
+      ] });
+    }
+  }
+), F = ({ className: e, ...o }) => /* @__PURE__ */ n(
+  d,
+  {
+    className: a(e, t.menuPopover),
+    offset: 4,
+    ...o
+  }
+), R = ({
+  className: e,
+  ...o
+}) => /* @__PURE__ */ n(
+  M,
+  {
+    className: a(e, t.menuSection),
+    ...o
+  }
+), q = ({ className: e, ...o }) => /* @__PURE__ */ n(
+  h,
+  {
+    className: a(e, t.separator),
+    ...o
+  }
+);
+export {
+  z as M,
+  q as S,
+  V as a,
+  F as b,
+  R as c
+};

package/chunks/{Skeleton-DqIHQLQl.js → Skeleton-D6mxKxuu.js}

@@ -1,38 +1,38 @@
 import { jsxs as f, jsx as c } from "react/jsx-runtime";
 import { c as r } from "./clsx-AexbMWKp.js";
-import '../assets/Skeleton.css';const w = "_skeleton_wia11_11", p = "_circle_wia11_25", u = "_wave_wia11_30", v = "_onLayer01_wia11_54", d = "_form_wia11_58", k = "_formLabel_wia11_64", L = "_formDescription_wia11_70", y = "_formInput_wia11_76", b = "_medium_wia11_81", o = {
-  skeleton: w,
+import '../assets/Skeleton.css';const k = "_skeleton_i5zk6_11", p = "_circle_i5zk6_25", u = "_wave_i5zk6_30", v = "_onLayer01_i5zk6_54", w = "_form_i5zk6_58", z = "_formLabel_i5zk6_64", d = "_formDescription_i5zk6_70", L = "_formInput_i5zk6_76", y = "_medium_i5zk6_81", o = {
+  skeleton: k,
   circle: p,
   wave: u,
   onLayer01: v,
-  form: d,
-  formLabel: k,
-  formDescription: L,
-  formInput: y,
-  medium: b
-}, I = ({
+  form: w,
+  formLabel: z,
+  formDescription: d,
+  formInput: L,
+  medium: y
+}, D = ({
   variant: s = "rectangle",
   width: t,
-  height: a,
-  size: _ = "large",
+  height: l,
+  size: a = "large",
   isAnimated: n = !0,
-  className: l,
-  style: i,
+  className: i,
+  style: m,
   isOnLayer01: e,
-  ...m
-}) => (s === "circle" && a !== void 0 && console.warn(
+  ..._
+}) => (s === "circle" && l !== void 0 && console.warn(
   "Height is not allowed when using circle, control size with width"
 ), s === "form" ? /* @__PURE__ */ f(
   "div",
   {
     className: r(
       o.form,
-      o[_],
+      o[a],
       e && o.onLayer01,
-      l
+      i
     ),
-    style: { width: t, ...i },
-    ...m,
+    style: { width: t, ...m },
+    ..._,
     children: [
       /* @__PURE__ */ c(
         "div",
@@ -77,12 +77,12 @@ import '../assets/Skeleton.css';const w = "_skeleton_wia11_11", p = "_circle_wia
       o[s],
       n && o.wave,
       e && o.onLayer01,
-      l
+      i
     ),
-    style: { width: t, height: a, ...i },
-    ...m
+    style: { width: t, height: l, ...m },
+    ..._
   }
 ));
 export {
-  I as S
+  D as S
 };

package/chunks/{TabList-BaR443mu.js → TabList-BHX-cuhB.js}

@@ -1,19 +1,19 @@
 'use client';
 import { jsx as e, jsxs as b, Fragment as l } from "react/jsx-runtime";
-import { Tabs as d, Tab as _, composeRenderProps as m, SelectionIndicator as T, TabPanel as f, TabList as u } from "react-aria-components";
+import { Tabs as d, Tab as _, composeRenderProps as m, SelectionIndicator as T, TabPanel as u, TabList as P } from "react-aria-components";
 import { c as o } from "./clsx-AexbMWKp.js";
 import * as i from "react";
-import { createContext as P } from "react";
-import '../assets/TabList.css';const c = P({
+import { createContext as x } from "react";
+import '../assets/TabList.css';const c = x({
   variant: "uncontained"
-}), x = "_tabs_3k5fn_1", L = "_tabList_3k5fn_12", k = "_tab_3k5fn_1", p = "_contained_3k5fn_55", v = "_selectionIndicator_3k5fn_94", I = "_tabPanel_3k5fn_129", t = {
-  tabs: x,
-  tabList: L,
-  tab: k,
-  contained: p,
-  selectionIndicator: v,
-  tabPanel: I
-}, j = ({
+}), L = "_tabs_1nli1_1", p = "_tabList_1nli1_12", f = "_tab_1nli1_1", v = "_contained_1nli1_55", I = "_selectionIndicator_1nli1_94", N = "_tabPanel_1nli1_129", t = {
+  tabs: L,
+  tabList: p,
+  tab: f,
+  contained: v,
+  selectionIndicator: I,
+  tabPanel: N
+}, R = ({
   className: n,
   variant: a = "uncontained",
   ...s
@@ -23,7 +23,7 @@ import '../assets/TabList.css';const c = P({
     className: o(t.tabs, n),
     ...s
   }
-) }), R = ({ className: n, ...a }) => {
+) }), g = ({ className: n, ...a }) => {
   const { variant: s } = i.useContext(c);
   return /* @__PURE__ */ e(
     _,
@@ -49,10 +49,10 @@ import '../assets/TabList.css';const c = P({
       ] }))
     }
   );
-}, g = ({ className: n, ...a }) => {
+}, y = ({ className: n, ...a }) => {
   const { variant: s } = i.useContext(c);
   return /* @__PURE__ */ e(
-    f,
+    u,
     {
       className: o(
         t.tabPanel,
@@ -64,19 +64,19 @@ import '../assets/TabList.css';const c = P({
       ...a
     }
   );
-}, y = ({
+}, F = ({
   className: n,
   ...a
 }) => /* @__PURE__ */ e(
-  u,
+  P,
   {
     className: o(t.tabList, n),
     ...a
   }
 );
 export {
-  R as T,
-  y as a,
-  g as b,
-  j as c
+  g as T,
+  F as a,
+  y as b,
+  R as c
 };