rk-designsystem 1.4.0 → 1.4.1

package/dist/components/DateInput/index.js

@@ -1,101 +1,99 @@
 "use client";
-import { jsxs as L, jsx as g } from "react/jsx-runtime";
-import pe, { forwardRef as be, useEffect as M, useRef as S, useCallback as k, useState as me, useId as ve } from "react";
-import { parse as ge, isValid as xe } from "date-fns";
+import { jsxs as L, jsx as v } from "react/jsx-runtime";
+import be, { forwardRef as me, useEffect as M, useRef as S, useCallback as B, useState as ve, useId as ge } from "react";
+import { parse as xe, isValid as he } from "date-fns";
 import o from "./styles.module.css.js";
-import { useLanguageOptional as he } from "../../context/LanguageContext.js";
-const x = (e) => {
-  const a = e.slice(0, 2), h = e.slice(2, 4), s = e.slice(4, 8);
-  return e.length > 4 ? `${a}.${h}.${s}` : e.length > 2 ? `${a}.${h}` : e.length > 0 ? a : "";
-}, N = (e) => (e || "").replace(/\D/g, "").slice(0, 8), O = (e) => {
+import { useLanguageOptional as ye } from "../../context/LanguageContext.js";
+const g = (e) => {
+  const a = e.slice(0, 2), x = e.slice(2, 4), s = e.slice(4, 8);
+  return e.length > 4 ? `${a}.${x}.${s}` : e.length > 2 ? `${a}.${x}` : e.length > 0 ? a : "";
+}, D = (e) => (e || "").replace(/\D/g, "").slice(0, 8), P = (e) => {
   if (e.length < 8) return null;
-  const a = ge(x(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
-  return xe(a);
-}, ye = be(
+  const a = xe(g(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
+  return he(a);
+}, Ie = me(
   (e, a) => {
-    const { t: h } = he();
+    const { t: x } = ye();
     M(() => {
       const r = "rk-dateinput-inline-styles";
       if (typeof document > "u" || document.getElementById(r)) return;
-      const t = Ie(o), m = document.createElement("style");
-      m.id = r, m.textContent = t, document.head.prepend(m);
+      const t = $e(o), b = document.createElement("style");
+      b.id = r, b.textContent = t, document.head.prepend(b);
     }, []);
     const {
       label: s,
-      suffixIcon: V,
-      onSuffixClick: u,
-      className: P,
+      suffixIcon: N,
+      onSuffixClick: d,
+      className: O,
       inputWrapperClassName: q,
       inputClassName: H,
-      value: y,
+      value: h,
       defaultValue: A,
-      onChange: I,
-      onValidationChange: $,
+      onChange: y,
+      onValidationChange: I,
       readOnly: G,
       placeholder: J = "dd.mm.åååå",
       id: K,
       name: Q,
       required: T,
-      disabled: w,
+      disabled: $,
       onClick: U,
       onFocus: X,
-      onBlur: z,
+      onBlur: w,
       autoComplete: Y = "off",
       "aria-label": Z,
       "aria-labelledby": _,
       description: C,
-      error: c,
+      error: u,
       "data-color": ee,
       "data-size": re,
       ...te
-    } = e, B = y !== void 0, f = S(null);
-    pe.useImperativeHandle(
+    } = e, z = h !== void 0, c = S(null);
+    be.useImperativeHandle(
       a,
-      () => f.current
+      () => c.current
     );
-    const j = S(null), l = k(
+    const V = S(null), n = B(
       (r, t) => {
-        r !== j.current && (j.current = r, $ == null || $(r, t));
+        r !== V.current && (V.current = r, I == null || I(r, t));
       },
-      [$]
-    ), D = k(
-      (r) => x(N(r)),
+      [I]
+    ), k = B(
+      (r) => g(D(r)),
       []
-    ), [p, W] = me(
-      () => D(y ?? A)
+    ), [f, j] = ve(
+      () => k(h ?? A)
     );
     M(() => {
-      if (B) {
-        const r = D(y);
-        r !== p && (W(r), f.current && f.current.value !== r && (f.current.value = r));
+      if (z) {
+        const r = k(h);
+        r !== f && (j(r), c.current && c.current.value !== r && (c.current.value = r));
       }
-    }, [y, B, p, D]);
-    const oe = k(
+    }, [h, z, f, k]);
+    const oe = B(
       (r) => {
-        const t = r.target, m = p, i = N(t.value), d = x(i);
-        let n = 0;
-        const v = i.length;
-        v <= 2 ? n = v : v <= 4 ? n = v + 1 : n = v + 2, n = Math.min(n, d.length), W(d), t.value = d, t.setSelectionRange(n, n), (d !== m || B) && (I == null || I(r, d));
-        const fe = O(i);
-        (i.length === 0 || i.length === 8) && l(i.length === 0 ? null : fe, d);
+        const t = r.target, b = f, l = D(t.value), i = g(l), m = l.length, fe = m <= 2 ? m : m <= 4 ? m + 1 : m + 2, F = Math.min(fe, i.length);
+        j(i), t.value = i, t.setSelectionRange(F, F), (i !== b || z) && (y == null || y(r, i));
+        const pe = P(l);
+        (l.length === 0 || l.length === 8) && n(l.length === 0 ? null : pe, i);
       },
-      [p, B, I, l]
-    ), ae = k(
+      [f, z, y, n]
+    ), ae = B(
       (r) => {
-        const t = N(r.target.value);
-        t.length === 0 ? l(null, "") : t.length < 8 ? l(!1, x(t)) : l(O(t), x(t)), z == null || z(r);
+        const t = D(r.target.value);
+        t.length === 0 ? n(null, "") : t.length < 8 ? n(!1, g(t)) : n(P(t), g(t)), w == null || w(r);
       },
-      [z, l]
-    ), ne = [o.fieldset, P].filter(Boolean).join(" "), le = [
+      [w, n]
+    ), ne = [o.fieldset, O].filter(Boolean).join(" "), le = [
       o.inputWrapper,
       q,
-      c ? o.inputWrapperError : ""
+      u ? o.inputWrapperError : ""
     ].filter(Boolean).join(" "), ie = [
       H
-    ].filter(Boolean).join(" "), de = [
+    ].filter(Boolean).join(" "), se = [
       o.suffixButton,
-      u ? o.suffixButtonInteractive : ""
-    ].filter(Boolean).join(" "), se = ve(), b = K ?? `dateinput${se}`, R = s ? `${b}-label` : void 0, E = C ? `${b}-desc` : void 0, F = c ? `${b}-err` : void 0, ue = [E, F].filter(Boolean).join(" ") || void 0, ce = _ ?? R;
+      d ? o.suffixButtonInteractive : ""
+    ].filter(Boolean).join(" "), de = ge(), p = K ?? `dateinput${de}`, W = s ? `${p}-label` : void 0, R = C ? `${p}-desc` : void 0, E = u ? `${p}-err` : void 0, ue = [R, E].filter(Boolean).join(" ") || void 0, ce = _ ?? W;
     return (
       // --- Bruk data-color og data-size på den ytre wrapperen ---
       /* @__PURE__ */ L(
@@ -105,24 +103,24 @@ const x = (e) => {
           "data-color": ee,
           "data-size": re,
           children: [
-            s ? /* @__PURE__ */ g("label", { id: R, htmlFor: b, children: s }) : null,
-            C && /* @__PURE__ */ g("p", { id: E, className: o.description, children: C }),
+            s ? /* @__PURE__ */ v("label", { id: W, htmlFor: p, children: s }) : null,
+            C && /* @__PURE__ */ v("p", { id: R, className: o.description, children: C }),
             /* @__PURE__ */ L("div", { className: le, children: [
-              /* @__PURE__ */ g(
+              /* @__PURE__ */ v(
                 "input",
                 {
-                  ref: f,
+                  ref: c,
                   type: "text",
                   inputMode: "numeric",
                   pattern: "\\d{2}\\.\\d{2}\\.\\d{4}",
                   maxLength: 10,
-                  value: p,
+                  value: f,
                   readOnly: G,
                   placeholder: J,
-                  id: b,
+                  id: p,
                   name: Q,
                   required: T,
-                  disabled: w,
+                  disabled: $,
                   onClick: U,
                   onChange: oe,
                   onFocus: X,
@@ -131,34 +129,34 @@ const x = (e) => {
                   "aria-label": Z,
                   "aria-labelledby": ce,
                   "aria-describedby": ue,
-                  "aria-invalid": !!c,
+                  "aria-invalid": !!u,
                   className: ie,
                   ...te
                 }
               ),
-              V && /* @__PURE__ */ g(
+              N && /* @__PURE__ */ v(
                 "button",
                 {
                   type: "button",
-                  className: de,
-                  onClick: w ? void 0 : u,
-                  tabIndex: u && !w ? 0 : -1,
-                  "aria-hidden": !u,
-                  disabled: w,
-                  "aria-label": u ? h("dateInput.openDatePicker") : void 0,
-                  children: V
+                  className: se,
+                  onClick: $ ? void 0 : d,
+                  tabIndex: d && !$ ? 0 : -1,
+                  "aria-hidden": !d,
+                  disabled: $,
+                  "aria-label": d ? x("dateInput.openDatePicker") : void 0,
+                  children: N
                 }
               )
             ] }),
-            c && /* @__PURE__ */ g("p", { id: F, className: o.error, role: "alert", children: c })
+            u && /* @__PURE__ */ v("p", { id: E, className: o.error, role: "alert", children: u })
           ]
         }
       )
     );
   }
 );
-ye.displayName = "DateInput";
-function Ie(e) {
+Ie.displayName = "DateInput";
+function $e(e) {
   return `
 .${e.fieldset} {
   margin-bottom: var(--ds-size-4, 16px);
@@ -252,5 +250,5 @@ function Ie(e) {
 `;
 }
 export {
-  ye as DateInput
+  Ie as DateInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rk-designsystem",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A React component library built on top of Digdir Design System",
   "author": "daniel@tunetek.no",
   "license": "MIT",