@midas-ds/components 17.11.5 → 17.11.6

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 17.11.6 (2026-04-14)
+
+### 🩹 Fixes
+
+- **components, date-picker:** add forwardRef and generic type ([eba8d627dac](https://github.com/migrationsverket/midas/commit/eba8d627dac))
+
 ## 17.11.5 (2026-04-14)
 
 ### 🩹 Fixes

package/chunks/DateRangePicker-DWxApt5r.js

@@ -0,0 +1,202 @@
+'use client';
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import * as f from "react";
+import { Group as B, DatePickerStateContext as M, DateRangePickerStateContext as N, Popover as S, Dialog as R, DatePicker as w, DateRangePicker as G } from "react-aria-components";
+import { a as k } from "./clsx-AexbMWKp.js";
+import { C as L, R as I } from "./RangeCalendar-DxLInTav.js";
+import { D as P, a as v } from "./DateInput-NzWcnB4y.js";
+import { F as _ } from "./FieldError-krpMBtie.js";
+import { a as g, L as y } from "./Label-Cg0aAlnt.js";
+import { T as D } from "./Text-D0r_W4lH.js";
+import { C as O } from "./ClearButton-DkC8PIMi.js";
+import { FocusScope as V, useFocusManager as T } from "@react-aria/focus";
+import { B as $ } from "./Button-GCROAMSl.js";
+import { c as A } from "./createLucideIcon-CP-mMPfa.js";
+import { u as j } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import { D as E } from "./DateInputDivider-BHAwPkIR.js";
+import '../assets/DateRangePicker.css';const W = [
+  ["path", { d: "M8 2v4", key: "1cmpym" }],
+  ["path", { d: "M16 2v4", key: "4m81vk" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+  ["path", { d: "M3 10h18", key: "8toen8" }],
+  ["path", { d: "M8 14h.01", key: "6423bh" }],
+  ["path", { d: "M12 14h.01", key: "1etili" }],
+  ["path", { d: "M16 14h.01", key: "1gbofw" }],
+  ["path", { d: "M8 18h.01", key: "lrp35t" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }],
+  ["path", { d: "M16 18h.01", key: "kzsmim" }]
+], q = A("calendar-days", W), H = { clear: "Clear date", "open-calendar": "Open calendar" }, J = { clear: "Rensa datum", "open-calendar": "Öppna kalender" }, C = {
+  en: H,
+  sv: J
+}, K = "_datePicker_13jtn_1", Q = "_inputField_13jtn_8", U = "_medium_13jtn_24", X = "_readOnly_13jtn_47", Y = "_buttonGroup_13jtn_52", Z = "_iconButton_13jtn_58", z = "_popover_13jtn_81 _dropdownAnimation_1ljkv_4", ee = "_dialog_13jtn_85", a = {
+  datePicker: K,
+  inputField: Q,
+  medium: U,
+  readOnly: X,
+  buttonGroup: Y,
+  iconButton: Z,
+  popover: z,
+  dialog: ee
+}, te = (t) => !!t && !!t.value && Object.prototype.hasOwnProperty.call(t.value, "start"), ae = ({
+  isClearable: t,
+  isDisabled: c,
+  isReadOnly: i,
+  size: n
+}) => {
+  const r = f.useContext(M), s = f.useContext(N), l = j(C), d = T(), o = s ?? r, u = te(o) ? !!o.value.start && o.value.end : !!o?.value;
+  return t && u && !i ? /* @__PURE__ */ e(
+    O,
+    {
+      onPress: () => {
+        o?.setValue(null), d?.focusFirst();
+      },
+      size: n,
+      isDisabled: c,
+      "aria-label": l.format("clear"),
+      className: k(a.iconButton, {
+        [a.medium]: n === "medium"
+      })
+    }
+  ) : null;
+}, b = ({
+  children: t,
+  isDisabled: c,
+  isInvalid: i,
+  isReadOnly: n,
+  size: r = "large",
+  isClearable: s = !1
+}) => {
+  const l = j(C);
+  return /* @__PURE__ */ e(
+    B,
+    {
+      className: k(a.inputField, {
+        [a.medium]: r === "medium",
+        [a.readOnly]: n
+      }),
+      children: /* @__PURE__ */ h(V, { children: [
+        t,
+        /* @__PURE__ */ h("div", { className: a.buttonGroup, children: [
+          /* @__PURE__ */ e(
+            ae,
+            {
+              isClearable: s,
+              isDisabled: c,
+              isReadOnly: n,
+              size: r
+            }
+          ),
+          /* @__PURE__ */ e(
+            $,
+            {
+              variant: "icon",
+              "aria-label": l.format("open-calendar"),
+              className: k(a.iconButton, {
+                [a.medium]: r === "medium",
+                [a.readOnly]: n
+              }),
+              "data-invalid": i || void 0,
+              size: r,
+              children: /* @__PURE__ */ e(
+                q,
+                {
+                  "aria-hidden": !0,
+                  size: 20
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}, x = ({
+  children: t
+}) => /* @__PURE__ */ e(S, { className: a.popover, children: /* @__PURE__ */ e(R, { className: a.dialog, children: t }) }), fe = f.forwardRef(
+  ({
+    className: t,
+    description: c,
+    errorMessage: i,
+    errorPosition: n = "top",
+    label: r,
+    popover: s,
+    isClearable: l = !1,
+    isReadOnly: d,
+    isDisabled: o,
+    size: u,
+    ...m
+  }, p) => /* @__PURE__ */ h(
+    w,
+    {
+      className: k(a.datePicker, t),
+      isReadOnly: d,
+      isDisabled: o,
+      ref: p,
+      ...m,
+      children: [
+        /* @__PURE__ */ e(g, { popover: s, children: r && /* @__PURE__ */ e(y, { children: r }) }),
+        c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
+        n === "top" && /* @__PURE__ */ e(_, { children: i }),
+        /* @__PURE__ */ e(
+          b,
+          {
+            isClearable: l,
+            isReadOnly: d,
+            isDisabled: o,
+            size: u,
+            ...m,
+            children: /* @__PURE__ */ e(P, { children: (F) => /* @__PURE__ */ e(v, { segment: F }) })
+          }
+        ),
+        n === "bottom" && /* @__PURE__ */ e(_, { children: i }),
+        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(L, {}) })
+      ]
+    }
+  )
+), Pe = ({
+  className: t,
+  description: c,
+  errorMessage: i,
+  errorPosition: n = "top",
+  label: r,
+  popover: s,
+  isClearable: l = !1,
+  isReadOnly: d,
+  isDisabled: o,
+  size: u,
+  ...m
+}) => /* @__PURE__ */ h(
+  G,
+  {
+    className: k(a.datePicker, t),
+    isReadOnly: d,
+    isDisabled: o,
+    ...m,
+    children: [
+      /* @__PURE__ */ e(g, { popover: s, children: r && /* @__PURE__ */ e(y, { children: r }) }),
+      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
+      n === "top" && /* @__PURE__ */ e(_, { children: i }),
+      /* @__PURE__ */ h(
+        b,
+        {
+          isClearable: l,
+          isReadOnly: d,
+          isDisabled: o,
+          size: u,
+          ...m,
+          children: [
+            /* @__PURE__ */ e(P, { slot: "start", children: (p) => /* @__PURE__ */ e(v, { segment: p }) }),
+            /* @__PURE__ */ e(E, {}),
+            /* @__PURE__ */ e(P, { slot: "end", children: (p) => /* @__PURE__ */ e(v, { segment: p }) })
+          ]
+        }
+      ),
+      n === "bottom" && /* @__PURE__ */ e(_, { children: i }),
+      /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(I, {}) })
+    ]
+  }
+);
+export {
+  fe as D,
+  Pe as a
+};

package/date-picker/DatePicker.d.ts

@@ -2,7 +2,7 @@ import { DatePickerProps as AriaDatePickerProps, DateValue, ValidationResult } f
 import { InfoPopoverProps } from '../label';
 import { Size } from '../common/types';
 import * as React from 'react';
-export interface DatePickerProps extends AriaDatePickerProps<DateValue> {
+export interface DatePickerProps<T extends DateValue> extends AriaDatePickerProps<T> {
     description?: string;
     errorMessage?: string | ((validation: ValidationResult) => string);
     errorPosition?: 'top' | 'bottom';
@@ -18,4 +18,6 @@ export interface DatePickerProps extends AriaDatePickerProps<DateValue> {
      */
     isClearable?: boolean;
 }
-export declare const DatePicker: React.FC<DatePickerProps>;
+export declare const DatePicker: <T extends DateValue>(props: DatePickerProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement | null;

package/date-picker/DatePicker.stories.d.ts

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { CalendarDate } from '@internationalized/date';
 import { DatePicker } from './DatePicker';
-declare const meta: Meta<typeof DatePicker>;
+declare const meta: Meta<typeof DatePicker<CalendarDate>>;
 export default meta;
-type Story = StoryObj<typeof DatePicker>;
+type Story = StoryObj<typeof DatePicker<CalendarDate>>;
 export declare const Primary: Story;
 export declare const WithTime: Story;
 export declare const Disabled: Story;

package/date-picker/DatePickerInputField.d.ts

@@ -1,7 +1,8 @@
+import { DateValue } from 'react-aria-components';
 import { DatePickerProps } from './DatePicker';
 import * as React from 'react';
-interface DatePickerInputFieldProps extends Pick<DatePickerProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'size' | 'isClearable'> {
+interface DatePickerInputFieldProps extends Pick<DatePickerProps<DateValue>, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'size' | 'isClearable'> {
     children?: React.ReactNode;
 }
-export declare const DatePickerInputField: React.FC<DatePickerInputFieldProps>;
+export declare const DatePickerInputField: ({ children, isDisabled, isInvalid, isReadOnly, size, isClearable, }: DatePickerInputFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/date-picker/index.js

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

package/index.js

@@ -14,7 +14,7 @@ import { C as N } from "./chunks/ComboBox-DQOqOcic.js";
 import { D as z } from "./chunks/DateField-moMaM1xn.js";
 import { D as Q, a as V } from "./chunks/DateInput-NzWcnB4y.js";
 import { D as j } from "./chunks/DateInputDivider-BHAwPkIR.js";
-import { D as J, a as K } from "./chunks/DateRangePicker-BItgKNh8.js";
+import { D as J, a as K } from "./chunks/DateRangePicker-DWxApt5r.js";
 import { F as W } from "./chunks/FieldError-krpMBtie.js";
 import { F as Y, a as _ } from "./chunks/FileListItem-CKF9HPjw.js";
 import { D as oo, F as ao } from "./chunks/FileUpload-D6oyWcDA.js";
@@ -52,7 +52,7 @@ import { c as ja } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as Ja, MenuTrigger as Ka, RouterProvider as Ua } from "react-aria-components";
 import { u as Xa } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as _a } from "react-stately";
-const o = "17.11.5", a = {
+const o = "17.11.6", a = {
   version: o
 }, r = a.version;
 export {

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.11.5",
+  "version": "17.11.6",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/chunks/DateRangePicker-BItgKNh8.js

@@ -1,199 +0,0 @@
-'use client';
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { Group as F, DatePickerStateContext as B, DateRangePickerStateContext as M, Popover as N, Dialog as S, DatePicker as R, DateRangePicker as G } from "react-aria-components";
-import { a as k } from "./clsx-AexbMWKp.js";
-import { C as L, R as w } from "./RangeCalendar-DxLInTav.js";
-import { D as f, a as P } from "./DateInput-NzWcnB4y.js";
-import { F as _ } from "./FieldError-krpMBtie.js";
-import { a as g, L as y } from "./Label-Cg0aAlnt.js";
-import { T as D } from "./Text-D0r_W4lH.js";
-import * as v from "react";
-import { C as I } from "./ClearButton-DkC8PIMi.js";
-import { FocusScope as O, useFocusManager as V } from "@react-aria/focus";
-import { B as T } from "./Button-GCROAMSl.js";
-import { c as $ } from "./createLucideIcon-CP-mMPfa.js";
-import { u as j } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import { D as A } from "./DateInputDivider-BHAwPkIR.js";
-import '../assets/DateRangePicker.css';const E = [
-  ["path", { d: "M8 2v4", key: "1cmpym" }],
-  ["path", { d: "M16 2v4", key: "4m81vk" }],
-  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
-  ["path", { d: "M3 10h18", key: "8toen8" }],
-  ["path", { d: "M8 14h.01", key: "6423bh" }],
-  ["path", { d: "M12 14h.01", key: "1etili" }],
-  ["path", { d: "M16 14h.01", key: "1gbofw" }],
-  ["path", { d: "M8 18h.01", key: "lrp35t" }],
-  ["path", { d: "M12 18h.01", key: "mhygvu" }],
-  ["path", { d: "M16 18h.01", key: "kzsmim" }]
-], W = $("calendar-days", E), q = { clear: "Clear date", "open-calendar": "Open calendar" }, H = { clear: "Rensa datum", "open-calendar": "Öppna kalender" }, C = {
-  en: q,
-  sv: H
-}, J = "_datePicker_13jtn_1", K = "_inputField_13jtn_8", Q = "_medium_13jtn_24", U = "_readOnly_13jtn_47", X = "_buttonGroup_13jtn_52", Y = "_iconButton_13jtn_58", Z = "_popover_13jtn_81 _dropdownAnimation_1ljkv_4", z = "_dialog_13jtn_85", a = {
-  datePicker: J,
-  inputField: K,
-  medium: Q,
-  readOnly: U,
-  buttonGroup: X,
-  iconButton: Y,
-  popover: Z,
-  dialog: z
-}, ee = (t) => !!t && !!t.value && Object.prototype.hasOwnProperty.call(t.value, "start"), te = ({
-  isClearable: t,
-  isDisabled: c,
-  isReadOnly: i,
-  size: n
-}) => {
-  const o = v.useContext(B), s = v.useContext(M), l = j(C), d = V(), r = s ?? o, u = ee(r) ? !!r.value.start && r.value.end : !!r?.value;
-  return t && u && !i ? /* @__PURE__ */ e(
-    I,
-    {
-      onPress: () => {
-        r?.setValue(null), d?.focusFirst();
-      },
-      size: n,
-      isDisabled: c,
-      "aria-label": l.format("clear"),
-      className: k(a.iconButton, {
-        [a.medium]: n === "medium"
-      })
-    }
-  ) : null;
-}, b = ({
-  children: t,
-  isDisabled: c,
-  isInvalid: i,
-  isReadOnly: n,
-  size: o = "large",
-  isClearable: s = !1
-}) => {
-  const l = j(C);
-  return /* @__PURE__ */ e(
-    F,
-    {
-      className: k(a.inputField, {
-        [a.medium]: o === "medium",
-        [a.readOnly]: n
-      }),
-      children: /* @__PURE__ */ h(O, { children: [
-        t,
-        /* @__PURE__ */ h("div", { className: a.buttonGroup, children: [
-          /* @__PURE__ */ e(
-            te,
-            {
-              isClearable: s,
-              isDisabled: c,
-              isReadOnly: n,
-              size: o
-            }
-          ),
-          /* @__PURE__ */ e(
-            T,
-            {
-              variant: "icon",
-              "aria-label": l.format("open-calendar"),
-              className: k(a.iconButton, {
-                [a.medium]: o === "medium",
-                [a.readOnly]: n
-              }),
-              "data-invalid": i || void 0,
-              size: o,
-              children: /* @__PURE__ */ e(
-                W,
-                {
-                  "aria-hidden": !0,
-                  size: 20
-                }
-              )
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}, x = ({
-  children: t
-}) => /* @__PURE__ */ e(N, { className: a.popover, children: /* @__PURE__ */ e(S, { className: a.dialog, children: t }) }), _e = ({
-  className: t,
-  description: c,
-  errorMessage: i,
-  errorPosition: n = "top",
-  label: o,
-  popover: s,
-  isClearable: l = !1,
-  isReadOnly: d,
-  isDisabled: r,
-  size: u,
-  ...m
-}) => /* @__PURE__ */ h(
-  R,
-  {
-    className: k(a.datePicker, t),
-    isReadOnly: d,
-    isDisabled: r,
-    ...m,
-    children: [
-      /* @__PURE__ */ e(g, { popover: s, children: o && /* @__PURE__ */ e(y, { children: o }) }),
-      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
-      n === "top" && /* @__PURE__ */ e(_, { children: i }),
-      /* @__PURE__ */ e(
-        b,
-        {
-          isClearable: l,
-          isReadOnly: d,
-          isDisabled: r,
-          size: u,
-          ...m,
-          children: /* @__PURE__ */ e(f, { children: (p) => /* @__PURE__ */ e(P, { segment: p }) })
-        }
-      ),
-      n === "bottom" && /* @__PURE__ */ e(_, { children: i }),
-      /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(L, {}) })
-    ]
-  }
-), fe = ({
-  className: t,
-  description: c,
-  errorMessage: i,
-  errorPosition: n = "top",
-  label: o,
-  popover: s,
-  isClearable: l = !1,
-  isReadOnly: d,
-  isDisabled: r,
-  size: u,
-  ...m
-}) => /* @__PURE__ */ h(
-  G,
-  {
-    className: k(a.datePicker, t),
-    isReadOnly: d,
-    isDisabled: r,
-    ...m,
-    children: [
-      /* @__PURE__ */ e(g, { popover: s, children: o && /* @__PURE__ */ e(y, { children: o }) }),
-      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
-      n === "top" && /* @__PURE__ */ e(_, { children: i }),
-      /* @__PURE__ */ h(
-        b,
-        {
-          isClearable: l,
-          isReadOnly: d,
-          isDisabled: r,
-          size: u,
-          ...m,
-          children: [
-            /* @__PURE__ */ e(f, { slot: "start", children: (p) => /* @__PURE__ */ e(P, { segment: p }) }),
-            /* @__PURE__ */ e(A, {}),
-            /* @__PURE__ */ e(f, { slot: "end", children: (p) => /* @__PURE__ */ e(P, { segment: p }) })
-          ]
-        }
-      ),
-      n === "bottom" && /* @__PURE__ */ e(_, { children: i }),
-      /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(w, {}) })
-    ]
-  }
-);
-export {
-  _e as D,
-  fe as a
-};