@midas-ds/components 17.6.6 → 17.7.1

package/chunks/{Select-DZepyl5C.js → Select-BkLLrCh-.js}

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

package/chunks/TagGroup-CkjoxLIy.js

@@ -0,0 +1,97 @@
+import { jsx as i, jsxs as u, Fragment as T } from "react/jsx-runtime";
+import { Tag as f, composeRenderProps as p, useContextProps as d, TagListContext as b, TagList as x, TagGroupContext as h, TagGroup as L } from "react-aria-components";
+import { B as j } from "./Button-BhIvfqOc.js";
+import { c } from "./clsx-AexbMWKp.js";
+import { X as v } from "./x-B9bYxG31.js";
+import { forwardRef as _, Children as y, isValidElement as N } from "react";
+import '../assets/TagGroup.css';const w = "_button_13asj_1", G = "_green_13asj_14", C = "_red_13asj_15", R = "_blue_13asj_16", V = "_yellow_13asj_17", $ = "_tag_13asj_29", z = "_tagText_13asj_83", E = "_dismissable_13asj_96", a = {
+  button: w,
+  green: G,
+  red: C,
+  blue: R,
+  yellow: V,
+  tag: $,
+  tagText: z,
+  dismissable: E
+}, q = ({
+  className: r,
+  color: e,
+  dismissable: o = !1,
+  isDismissable: s,
+  type: t,
+  ...n
+}) => {
+  const g = s || typeof s > "u" && o;
+  return /* @__PURE__ */ i(
+    f,
+    {
+      className: c(
+        a.tag,
+        g && a.dismissable,
+        {
+          [a.green]: e ? e === "green" : t === "success",
+          [a.blue]: e ? e === "blue" : t === "info",
+          [a.yellow]: e ? e === "yellow" : t === "important",
+          [a.red]: e ? e === "red" : t === "warning"
+        },
+        r
+      ),
+      ...n,
+      textValue: n.textValue || (typeof n.children == "string" ? n.children : void 0),
+      children: p(n.children, (l) => /* @__PURE__ */ u(T, { children: [
+        /* @__PURE__ */ i("div", { className: a.tagText, children: l }),
+        g && /* @__PURE__ */ i(
+          j,
+          {
+            variant: "icon",
+            size: "medium",
+            className: a.button,
+            slot: "remove",
+            children: /* @__PURE__ */ i(v, { size: 20 })
+          }
+        )
+      ] }))
+    }
+  );
+}, B = "_tagList_17pz2_1", P = {
+  tagList: B
+}, k = (r, e) => {
+  const [{ className: o, ...s }, t] = d(
+    r,
+    e,
+    b
+  );
+  return /* @__PURE__ */ i(
+    x,
+    {
+      className: c(o, P.tagList),
+      ref: t,
+      ...s
+    }
+  );
+}, m = _(k), A = _(
+  (r, e) => {
+    const [{ className: o, children: s, ...t }, n] = d(
+      r,
+      e,
+      h
+    ), g = y.toArray(s).filter(N).find((l) => l.type === m);
+    return !g && process.env.NODE_ENV === "development" && console.warn(
+      "Using a TagGroup without providing a TagList component is deprecated since v17.0.0, see: https://designsystem.migrationsverket.se/components/tag/"
+    ), /* @__PURE__ */ i(
+      L,
+      {
+        className: c(o),
+        ref: n,
+        ...t,
+        children: g ? s : /* @__PURE__ */ i(m, { children: s })
+      }
+    );
+  }
+);
+A.displayName = "TagGroup";
+export {
+  q as T,
+  A as a,
+  m as b
+};

package/chunks/{TextArea-CBRE_gsN.js → TextArea-BL0NbUHd.js}

@@ -9,7 +9,7 @@ import { u as B } from "./useLocalizedStringFormatter-BHvsRxDk.js";
 import { T as L } from "./Text-D0r_W4lH.js";
 import { F as f } from "./FieldError-krpMBtie.js";
 import { C as S } from "./CharacterCounter-Dgnv-orm.js";
-import { a as v, L as E } from "./Label-s4J9sYdy.js";
+import { a as v, L as E } from "./Label-Bhnpbs10.js";
 const x = c(
   (e, o) => {
     [e] = u(e, o, y);

package/color-scheme-switch/ColorSchemeSwitch.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface ColorSchemeSwitchProps {
     /** Choose what element that should be affected by the scheme switch.
-     * @default body
+     * @default :root
      */
     selector?: string;
     /** Set the default value for the color scheme. Default is "light dark" meaning follow system settings

package/color-scheme-switch/index.js

@@ -1,4 +1,4 @@
-import { C as r } from "../chunks/ColorSchemeSwitch-DkY8VTVR.js";
+import { C as r } from "../chunks/ColorSchemeSwitch-D52V0sr3.js";
 export {
   r as ColorSchemeSwitch
 };

package/combobox/index.js

@@ -1,4 +1,4 @@
-import { C as r } from "../chunks/ComboBox-Dx4GD2oe.js";
+import { C as r } from "../chunks/ComboBox-I4tZIYpb.js";
 export {
   r as ComboBox
 };

package/date-field/index.js

@@ -1,4 +1,4 @@
-import { D as t } from "../chunks/DateField-h3l0qG7u.js";
+import { D as t } from "../chunks/DateField-cAJ_r2cj.js";
 import { D as r, a as o, b as p } from "../chunks/DateInputDivider-DwopMIb9.js";
 export {
   t as DateField,

package/date-picker/index.js

@@ -1,4 +1,4 @@
-import { D as r, a as t } from "../chunks/DateRangePicker-X6gmcMdv.js";
+import { D as r, a as t } from "../chunks/DateRangePicker-BGoKQCZf.js";
 export {
   r as DatePicker,
   t as DateRangePicker