rk-designsystem 1.3.1 → 1.3.4

package/dist/components/DatePicker/index.js

@@ -1,191 +1,191 @@
 "use client";
 import { jsxs as y, jsx as i } from "react/jsx-runtime";
-import { useEffect as N, useState as B, useRef as R, useMemo as D, useCallback as g, useId as ee } from "react";
-import { Button as A } from "@digdir/designsystemet-react";
-import { startOfMonth as u, isValid as w, isSameMonth as C, format as f, startOfWeek as I, addDays as h, subMonths as S, addMonths as W, endOfWeek as te, isSameDay as F, isToday as re, eachDayOfInterval as oe, getDaysInMonth as ae, setDate as ne } from "date-fns";
-import { nb as c } from "date-fns/locale";
-import { ChevronLeftIcon as ie } from "../../assets/images/ChevronLeftIcon.js";
-import { ChevronRightIcon as se } from "../../assets/images/ChevronRightIcon.js";
+import { useEffect as N, useState as j, useRef as B, useMemo as D, useCallback as b, useId as te } from "react";
+import { Button as R } from "@digdir/designsystemet-react";
+import { startOfMonth as f, isValid as w, isSameMonth as C, format as u, startOfWeek as I, addDays as g, subMonths as A, addMonths as S, endOfWeek as L, isSameDay as W, isToday as re, endOfMonth as oe, eachDayOfInterval as ae, getDaysInMonth as ne, setDate as ie } from "date-fns";
+import { nb as d } from "date-fns/locale";
+import { ChevronLeftIcon as se } from "../../assets/images/ChevronLeftIcon.js";
+import { ChevronRightIcon as de } from "../../assets/images/ChevronRightIcon.js";
 import n from "./styles.module.css.js";
-import { useLanguageOptional as de } from "../../context/LanguageContext.js";
-const le = (r) => {
-  const o = u(r), s = I(o, { locale: c }), z = h(s, 41);
-  return oe({ start: s, end: z });
-}, H = (r) => r && r.charAt(0).toUpperCase() + r.slice(1), v = (r, o) => {
-  const s = Math.min(r.getDate(), ae(o));
-  return ne(u(o), s);
-}, ce = ({
-  initialDate: r = /* @__PURE__ */ new Date(),
+import { useLanguageOptional as le } from "../../context/LanguageContext.js";
+const ce = (t) => {
+  const o = f(t), l = I(o, { locale: d }), z = L(oe(t), { locale: d });
+  return ae({ start: l, end: z });
+}, H = (t) => t && t.charAt(0).toUpperCase() + t.slice(1), v = (t, o) => {
+  const l = Math.min(t.getDate(), ne(o));
+  return ie(f(o), l);
+}, ue = ({
+  initialDate: t = /* @__PURE__ */ new Date(),
   selectedDate: o = null,
-  onDateSelect: s,
+  onDateSelect: l,
   "data-color": z,
-  "data-size": L
+  "data-size": V
 }) => {
-  const { t: E } = de();
+  const { t: E } = le();
   N(() => {
-    const t = "rk-datepicker-inline-styles";
-    if (typeof document > "u" || document.getElementById(t)) return;
+    const r = "rk-datepicker-inline-styles";
+    if (typeof document > "u" || document.getElementById(r)) return;
     const e = fe(n), a = document.createElement("style");
-    a.id = t, a.textContent = e, document.head.appendChild(a);
+    a.id = r, a.textContent = e, document.head.prepend(a);
   }, []);
-  const [l, x] = B(
-    u(o && w(o) ? o : r)
-  ), [p, m] = B(
-    () => o && w(o) ? o : r
-  ), P = R(null), $ = R(!1);
+  const [c, x] = j(
+    f(o && w(o) ? o : t)
+  ), [h, p] = j(
+    () => o && w(o) ? o : t
+  ), P = B(null), $ = B(!1);
   N(() => {
     if (o && w(o)) {
-      m(o);
-      const t = u(o);
+      p(o);
+      const r = f(o);
       x(
-        (e) => C(t, e) ? e : t
+        (e) => C(r, e) ? e : r
       );
     }
   }, [o]), N(() => {
     var e;
     if (!$.current) return;
     $.current = !1;
-    const t = (e = P.current) == null ? void 0 : e.querySelector(
-      `[data-date="${f(p, "yyyy-MM-dd")}"]`
+    const r = (e = P.current) == null ? void 0 : e.querySelector(
+      `[data-date="${u(h, "yyyy-MM-dd")}"]`
     );
-    t == null || t.focus();
-  }, [p, l]);
+    r == null || r.focus();
+  }, [h, c]);
   const M = D(
-    () => le(l),
-    [l]
+    () => ce(c),
+    [c]
   ), Y = D(() => {
-    const t = [];
+    const r = [];
     for (let e = 0; e < M.length; e += 7)
-      t.push(M.slice(e, e + 7));
-    return t;
+      r.push(M.slice(e, e + 7));
+    return r;
   }, [M]), U = D(() => {
-    const t = I(/* @__PURE__ */ new Date(), { locale: c });
+    const r = I(/* @__PURE__ */ new Date(), { locale: d });
     return Array.from({ length: 7 }).map((e, a) => {
-      const b = f(h(t, a), "EEEEEE", { locale: c });
-      return H(b);
+      const m = u(g(r, a), "EEEEEE", { locale: d });
+      return H(m);
     });
-  }, []), K = g(() => {
-    x((t) => {
-      const e = u(S(t, 1));
-      return m((a) => v(a, e)), e;
+  }, []), K = b(() => {
+    x((r) => {
+      const e = f(A(r, 1));
+      return p((a) => v(a, e)), e;
     });
-  }, []), T = g(() => {
-    x((t) => {
-      const e = u(W(t, 1));
-      return m((a) => v(a, e)), e;
+  }, []), T = b(() => {
+    x((r) => {
+      const e = f(S(r, 1));
+      return p((a) => v(a, e)), e;
     });
-  }, []), k = g(
-    (t) => {
-      m(t), s == null || s(t);
+  }, []), k = b(
+    (r) => {
+      p(r), l == null || l(r);
     },
-    [s]
-  ), d = g((t) => {
-    $.current = !0, m(t), x(
-      (e) => C(t, e) ? e : u(t)
+    [l]
+  ), s = b((r) => {
+    $.current = !0, p(r), x(
+      (e) => C(r, e) ? e : f(r)
     );
-  }, []), q = g(
-    (t, e) => {
-      switch (t.key) {
+  }, []), q = b(
+    (r, e) => {
+      switch (r.key) {
         case "Enter":
         case " ":
-          t.preventDefault(), k(e);
+          r.preventDefault(), k(e);
           return;
         case "ArrowLeft":
-          t.preventDefault(), d(h(e, -1));
+          r.preventDefault(), s(g(e, -1));
           return;
         case "ArrowRight":
-          t.preventDefault(), d(h(e, 1));
+          r.preventDefault(), s(g(e, 1));
           return;
         case "ArrowUp":
-          t.preventDefault(), d(h(e, -7));
+          r.preventDefault(), s(g(e, -7));
           return;
         case "ArrowDown":
-          t.preventDefault(), d(h(e, 7));
+          r.preventDefault(), s(g(e, 7));
           return;
         case "Home":
-          t.preventDefault(), d(I(e, { locale: c }));
+          r.preventDefault(), s(I(e, { locale: d }));
           return;
         case "End":
-          t.preventDefault(), d(te(e, { locale: c }));
+          r.preventDefault(), s(L(e, { locale: d }));
           return;
         case "PageUp":
-          t.preventDefault(), d(v(e, S(e, 1)));
+          r.preventDefault(), s(v(e, A(e, 1)));
           return;
         case "PageDown":
-          t.preventDefault(), d(v(e, W(e, 1)));
+          r.preventDefault(), s(v(e, S(e, 1)));
           return;
       }
     },
-    [k, d]
-  ), V = f(l, "MMMM", { locale: c }), _ = f(l, "yyyy", { locale: c }), G = `${H(V)} ${_}`, O = ee(), J = C(p, l) ? p : v(p, l);
+    [k, s]
+  ), _ = u(c, "MMMM", { locale: d }), G = u(c, "yyyy", { locale: d }), J = `${H(_)} ${G}`, O = te(), Q = C(h, c) ? h : v(h, c);
   return /* @__PURE__ */ y(
     "div",
     {
       className: n.calendarContainer,
       "data-color": z,
-      "data-size": L,
+      "data-size": V,
       children: [
         /* @__PURE__ */ y("div", { className: n.calendarHeader, children: [
-          /* @__PURE__ */ i("span", { className: n.monthYear, id: O, "aria-live": "polite", children: G }),
+          /* @__PURE__ */ i("span", { className: n.monthYear, id: O, "aria-live": "polite", children: J }),
           /* @__PURE__ */ y("div", { className: n.navigationButtons, children: [
             /* @__PURE__ */ i(
-              A,
+              R,
               {
                 variant: "tertiary",
                 icon: !0,
                 onClick: K,
                 "aria-label": E("datePicker.previousMonth"),
-                children: /* @__PURE__ */ i(ie, {})
+                children: /* @__PURE__ */ i(se, {})
               }
             ),
             /* @__PURE__ */ i(
-              A,
+              R,
               {
                 variant: "tertiary",
                 icon: !0,
                 onClick: T,
                 "aria-label": E("datePicker.nextMonth"),
-                children: /* @__PURE__ */ i(se, {})
+                children: /* @__PURE__ */ i(de, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ y("div", { role: "grid", "aria-labelledby": O, className: n.gridWrapper, ref: P, children: [
-          /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: U.map((t) => /* @__PURE__ */ i("div", { role: "columnheader", className: n.dayNameCell, children: t }, t)) }),
-          Y.map((t) => /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: t.map((e) => {
-            const a = C(e, l), b = o && w(o) && F(e, o), j = re(e), Q = a && F(e, J), X = [
+          /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: U.map((r) => /* @__PURE__ */ i("div", { role: "columnheader", className: n.dayNameCell, children: r }, r)) }),
+          Y.map((r) => /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: r.map((e) => {
+            const a = C(e, c), m = o && w(o) && W(e, o), F = re(e), X = a && W(e, Q), Z = [
               n.dateCell,
               a ? "" : n.otherMonth,
-              b ? n.selectedDate : "",
-              j && !b ? n.todayDate : ""
+              m ? n.selectedDate : "",
+              F && !m ? n.todayDate : ""
             ].filter(Boolean).join(" ");
             return /* @__PURE__ */ i(
               "div",
               {
                 role: "gridcell",
-                className: X,
-                "data-date": f(e, "yyyy-MM-dd"),
+                className: Z,
+                "data-date": u(e, "yyyy-MM-dd"),
                 onClick: a ? () => k(e) : void 0,
-                onKeyDown: a ? (Z) => q(Z, e) : void 0,
-                tabIndex: a ? Q ? 0 : -1 : void 0,
-                "aria-selected": a ? !!b : void 0,
+                onKeyDown: a ? (ee) => q(ee, e) : void 0,
+                tabIndex: a ? X ? 0 : -1 : void 0,
+                "aria-selected": a ? !!m : void 0,
                 "aria-disabled": !a || void 0,
-                "aria-current": j ? "date" : void 0,
-                "aria-label": f(e, "PPP", { locale: c }),
-                children: /* @__PURE__ */ i("span", { className: n.dateNumberContainer, children: f(e, "d") })
+                "aria-current": F ? "date" : void 0,
+                "aria-label": u(e, "PPP", { locale: d }),
+                children: /* @__PURE__ */ i("span", { className: n.dateNumberContainer, children: u(e, "d") })
               },
               e.toISOString()
             );
-          }) }, t[0].toISOString()))
+          }) }, r[0].toISOString()))
         ] })
       ]
     }
   );
 };
-ce.displayName = "DatePicker";
-function fe(r) {
+ue.displayName = "DatePicker";
+function fe(t) {
   return `
-.${r.calendarContainer} {
+.${t.calendarContainer} {
   display: inline-flex;
   padding: var(--ds-size-8, 32px);
   flex-direction: column;
@@ -199,38 +199,38 @@ function fe(r) {
   max-width: 100%;
   box-sizing: border-box;
 }
-.${r.calendarHeader} {
+.${t.calendarHeader} {
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
 }
-.${r.monthYear} {
+.${t.monthYear} {
   color: var(--ds-color-text-default, #2b2b2b);
-  font-family: var(--ds-font-family, sans-serif);
+  font-family: var(--ds-font-family, 'Myriad VF', sans-serif);
   font-size: var(--ds-heading-sm-font-size, 1.5rem);
   font-weight: var(--ds-heading-sm-font-weight, 500);
   line-height: var(--ds-heading-sm-line-height, 1.3);
   margin: 0;
 }
-.${r.navigationButtons} {
+.${t.navigationButtons} {
   display: flex;
   gap: var(--ds-size-1, 4px);
 }
-.${r.navigationButtons} > button:disabled svg {
+.${t.navigationButtons} > button:disabled svg {
   opacity: var(--ds-opacity-disabled, 0.3);
 }
-.${r.gridWrapper} {
+.${t.gridWrapper} {
   width: 100%;
   overflow: hidden;
 }
-.${r.gridRow} {
+.${t.gridRow} {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   width: 100%;
   text-align: center;
 }
-.${r.dayNameCell} {
+.${t.dayNameCell} {
   display: flex;
   padding: var(--ds-size-2, 8px);
   flex-direction: column;
@@ -238,14 +238,14 @@ function fe(r) {
   align-items: center;
   color: var(--ds-color-text-default, #2b2b2b);
   text-align: center;
-  font-family: var(--ds-font-family, sans-serif);
+  font-family: var(--ds-font-family, 'Myriad VF', sans-serif);
   font-size: var(--ds-body-xs-font-size, 14px);
   font-weight: var(--ds-font-weight-semibold, 600);
   line-height: var(--ds-body-short-xs-line-height, 1.3);
   box-sizing: border-box;
   min-width: 0;
 }
-.${r.dateCell} {
+.${t.dateCell} {
   display: flex;
   padding: var(--ds-size-5, 22px);
   flex-direction: column;
@@ -254,7 +254,7 @@ function fe(r) {
   border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #bcbcbc);
   box-sizing: border-box;
   margin: -0.5px;
-  font-family: var(--ds-font-family, sans-serif);
+  font-family: var(--ds-font-family, 'Myriad VF', sans-serif);
   color: var(--ds-color-text-default, #2b2b2b);
   text-align: center;
   font-size: var(--ds-body-xs-font-size, 14px);
@@ -265,13 +265,13 @@ function fe(r) {
   user-select: none;
   min-width: 0;
 }
-.${r.dateCell}:focus-visible {
+.${t.dateCell}:focus-visible {
   outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer, #2b2b2b);
   outline-offset: calc(-1 * var(--ds-border-width-focus, 3px));
   position: relative;
   z-index: 2;
 }
-.${r.dateNumberContainer} {
+.${t.dateNumberContainer} {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -283,69 +283,72 @@ function fe(r) {
   box-sizing: border-box;
   background-color: transparent;
 }
-.${r.dateCell}:hover:not(.${r.otherMonth}):not(.${r.disabled}) {
+.${t.dateCell}:hover:not(.${t.otherMonth}):not(.${t.disabled}) {
   background-color: var(--ds-color-surface-hover, #eee);
   position: relative;
   z-index: 1;
 }
-.${r.otherMonth} {
-  color: var(--ds-color-text-subtle, #aaa);
+.${t.otherMonth} {
+  /* Neutral-scoped tokens on purpose: under the red color scope the
+     scope-relative tints turn pink, which emphasized the outside days
+     instead of muting them. */
+  color: var(--ds-color-neutral-text-subtle, #aaa);
   cursor: default;
   pointer-events: none;
-  background-color: var(--ds-color-surface-tinted, #e8e8e8);
-  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #bcbcbc);
+  background-color: var(--ds-color-neutral-surface-tinted, #e8e8e8);
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #bcbcbc);
   margin: -0.5px;
 }
-.${r.selectedDate} {
+.${t.selectedDate} {
   background-color: var(--ds-color-base-default, #C30000);
   border-color: var(--ds-color-base-default, #C30000);
   color: var(--ds-color-base-contrast-default, #fff);
   position: relative;
   z-index: 1;
 }
-.${r.selectedDate} .${r.dateNumberContainer} {
+.${t.selectedDate} .${t.dateNumberContainer} {
   color: var(--ds-color-base-contrast-default, #fff);
   font-weight: var(--ds-font-weight-semibold, 600);
   background-color: transparent;
 }
-.${r.todayDate} .${r.dateNumberContainer} {
+.${t.todayDate} .${t.dateNumberContainer} {
   font-weight: var(--ds-font-weight-semibold, 600);
 }
 @media (max-width: 480px) {
-  .${r.calendarContainer} {
+  .${t.calendarContainer} {
     padding: var(--ds-size-4, 16px);
     gap: var(--ds-size-2, 8px);
     width: 100%;
   }
-  .${r.monthYear} {
+  .${t.monthYear} {
     font-size: var(--ds-heading-xs-font-size, 1.125rem);
   }
-  .${r.dayNameCell} {
+  .${t.dayNameCell} {
     padding: var(--ds-size-1, 4px);
     font-size: var(--ds-font-size-1, 12px);
   }
-  .${r.dateCell} {
+  .${t.dateCell} {
     padding: var(--ds-size-2, 8px);
     font-size: var(--ds-font-size-1, 12px);
   }
-  .${r.dateNumberContainer} {
+  .${t.dateNumberContainer} {
     width: 20px;
     height: 20px;
   }
 }
 @media (max-width: 360px) {
-  .${r.calendarContainer} {
+  .${t.calendarContainer} {
     padding: var(--ds-size-2, 8px);
   }
-  .${r.dayNameCell} {
+  .${t.dayNameCell} {
     padding: 2px;
     font-size: 10px;
   }
-  .${r.dateCell} {
+  .${t.dateCell} {
     padding: var(--ds-size-1, 4px);
     font-size: 11px;
   }
-  .${r.dateNumberContainer} {
+  .${t.dateNumberContainer} {
     width: 16px;
     height: 16px;
   }
@@ -353,5 +356,5 @@ function fe(r) {
 `;
 }
 export {
-  ce as DatePicker
+  ue as DatePicker
 };

package/dist/components/DatePicker/styles.module.css.js

@@ -1,30 +1,32 @@
 "use client";
-const e = "_calendarContainer_1ukqo_1", a = "_calendarHeader_1ukqo_16", t = "_monthYear_1ukqo_23", o = "_navigationButtons_1ukqo_34", n = "_gridWrapper_1ukqo_43", r = "_gridRow_1ukqo_48", _ = "_dayNameCell_1ukqo_55", d = "_dateCell_1ukqo_73", l = "_dateNumberContainer_1ukqo_106", s = "_otherMonth_1ukqo_119", c = "_disabled_1ukqo_119", i = "_selectedDate_1ukqo_145", u = {
-  calendarContainer: e,
-  calendarHeader: a,
-  monthYear: t,
-  navigationButtons: o,
-  gridWrapper: n,
-  gridRow: r,
-  dayNameCell: _,
-  dateCell: d,
+const t = "_calendarContainer_tp4n0_1", e = "_calendarHeader_tp4n0_16", n = "_monthYear_tp4n0_23", a = "_navigationButtons_tp4n0_34", o = "_gridWrapper_tp4n0_43", _ = "_gridRow_tp4n0_48", d = "_dayNameCell_tp4n0_55", r = "_dateCell_tp4n0_73", l = "_dateNumberContainer_tp4n0_106", s = "_otherMonth_tp4n0_119", c = "_disabled_tp4n0_119", i = "_selectedDate_tp4n0_148", p = "_todayDate_tp4n0_214", C = {
+  calendarContainer: t,
+  calendarHeader: e,
+  monthYear: n,
+  navigationButtons: a,
+  gridWrapper: o,
+  gridRow: _,
+  dayNameCell: d,
+  dateCell: r,
   dateNumberContainer: l,
   otherMonth: s,
   disabled: c,
-  selectedDate: i
+  selectedDate: i,
+  todayDate: p
 };
 export {
-  e as calendarContainer,
-  a as calendarHeader,
-  d as dateCell,
+  t as calendarContainer,
+  e as calendarHeader,
+  r as dateCell,
   l as dateNumberContainer,
-  _ as dayNameCell,
-  u as default,
+  d as dayNameCell,
+  C as default,
   c as disabled,
-  r as gridRow,
-  n as gridWrapper,
-  t as monthYear,
-  o as navigationButtons,
+  _ as gridRow,
+  o as gridWrapper,
+  n as monthYear,
+  a as navigationButtons,
   s as otherMonth,
-  i as selectedDate
+  i as selectedDate,
+  p as todayDate
 };