rk-designsystem 1.3.5 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +8 -2
  2. package/dist/components/DateInput/index.js +72 -74
  3. package/dist/index.d.ts +4 -4
  4. package/package.json +10 -10
package/README.md CHANGED
@@ -67,7 +67,7 @@ npm install rk-designsystem
67
67
  ```
68
68
 
69
69
  > Since 1.4.0 the library declares `@digdir/designsystemet-react` and
70
- > `@digdir/designsystemet-css` as peer dependencies (`~1.13.3`) and requires
70
+ > `@digdir/designsystemet-css` as peer dependencies (`^1.21.0`) and requires
71
71
  > React `^18.3.1`. npm 7+ installs peers automatically; with older
72
72
  > setups install them alongside the package.
73
73
 
@@ -229,7 +229,13 @@ until it has real production consumers. The breaking changes below landed in
229
229
  Button prop removals, mislabeled as a patch — 1.2.5 is deprecated.)
230
230
 
231
231
  - **Peer dependencies (1.4.0):** `@digdir/designsystemet-react` and
232
- `@digdir/designsystemet-css` (`~1.13.3`) are peers; React `^18.3.1 || ^19`.
232
+ `@digdir/designsystemet-css` (`^1.21.0`) are peers; React `^18.3.1 || ^19`.
233
+ The Digdir floor moved from `~1.13.3` to `^1.21.0`, and the library now
234
+ tracks the newest Digdir 1.x: consumers on 1.13 must upgrade
235
+ (`npm install @digdir/designsystemet-react@^1.21 @digdir/designsystemet-css@^1.21`)
236
+ or npm refuses to resolve the peers. Tooltip triggers keep their own
237
+ accessible name in 1.21 (the tooltip becomes `aria-description`), and
238
+ `ToggleGroup`'s `data-toggle-group` is deprecated in favour of `aria-label`.
233
239
  - **ESM-only (1.4.0):** the CommonJS/UMD entry is removed, so
234
240
  `require('rk-designsystem')` now fails explicitly. It never actually worked:
235
241
  the UMD file was parsed as ESM (the package is `"type": "module"`), and the
package/dist/components/DateInput/index.js CHANGED
@@ -1,101 +1,99 @@
1
1
  "use client";
2
- import { jsxs as L, jsx as g } from "react/jsx-runtime";
3
- import pe, { forwardRef as be, useEffect as M, useRef as S, useCallback as k, useState as me, useId as ve } from "react";
4
- import { parse as ge, isValid as xe } from "date-fns";
2
+ import { jsxs as L, jsx as v } from "react/jsx-runtime";
3
+ import be, { forwardRef as me, useEffect as M, useRef as S, useCallback as B, useState as ve, useId as ge } from "react";
4
+ import { parse as xe, isValid as he } from "date-fns";
5
5
  import o from "./styles.module.css.js";
6
- import { useLanguageOptional as he } from "../../context/LanguageContext.js";
7
- const x = (e) => {
8
- const a = e.slice(0, 2), h = e.slice(2, 4), s = e.slice(4, 8);
9
- return e.length > 4 ? `${a}.${h}.${s}` : e.length > 2 ? `${a}.${h}` : e.length > 0 ? a : "";
10
- }, N = (e) => (e || "").replace(/\D/g, "").slice(0, 8), O = (e) => {
6
+ import { useLanguageOptional as ye } from "../../context/LanguageContext.js";
7
+ const g = (e) => {
8
+ const a = e.slice(0, 2), x = e.slice(2, 4), s = e.slice(4, 8);
9
+ return e.length > 4 ? `${a}.${x}.${s}` : e.length > 2 ? `${a}.${x}` : e.length > 0 ? a : "";
10
+ }, D = (e) => (e || "").replace(/\D/g, "").slice(0, 8), P = (e) => {
11
11
  if (e.length < 8) return null;
12
- const a = ge(x(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
13
- return xe(a);
14
- }, ye = be(
12
+ const a = xe(g(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
13
+ return he(a);
14
+ }, Ie = me(
15
15
  (e, a) => {
16
- const { t: h } = he();
16
+ const { t: x } = ye();
17
17
  M(() => {
18
18
  const r = "rk-dateinput-inline-styles";
19
19
  if (typeof document > "u" || document.getElementById(r)) return;
20
- const t = Ie(o), m = document.createElement("style");
21
- m.id = r, m.textContent = t, document.head.prepend(m);
20
+ const t = $e(o), b = document.createElement("style");
21
+ b.id = r, b.textContent = t, document.head.prepend(b);
22
22
  }, []);
23
23
  const {
24
24
  label: s,
25
- suffixIcon: V,
26
- onSuffixClick: u,
27
- className: P,
25
+ suffixIcon: N,
26
+ onSuffixClick: d,
27
+ className: O,
28
28
  inputWrapperClassName: q,
29
29
  inputClassName: H,
30
- value: y,
30
+ value: h,
31
31
  defaultValue: A,
32
- onChange: I,
33
- onValidationChange: $,
32
+ onChange: y,
33
+ onValidationChange: I,
34
34
  readOnly: G,
35
35
  placeholder: J = "dd.mm.åååå",
36
36
  id: K,
37
37
  name: Q,
38
38
  required: T,
39
- disabled: w,
39
+ disabled: $,
40
40
  onClick: U,
41
41
  onFocus: X,
42
- onBlur: z,
42
+ onBlur: w,
43
43
  autoComplete: Y = "off",
44
44
  "aria-label": Z,
45
45
  "aria-labelledby": _,
46
46
  description: C,
47
- error: c,
47
+ error: u,
48
48
  "data-color": ee,
49
49
  "data-size": re,
50
50
  ...te
51
- } = e, B = y !== void 0, f = S(null);
52
- pe.useImperativeHandle(
51
+ } = e, z = h !== void 0, c = S(null);
52
+ be.useImperativeHandle(
53
53
  a,
54
- () => f.current
54
+ () => c.current
55
55
  );
56
- const j = S(null), l = k(
56
+ const V = S(null), n = B(
57
57
  (r, t) => {
58
- r !== j.current && (j.current = r, $ == null || $(r, t));
58
+ r !== V.current && (V.current = r, I == null || I(r, t));
59
59
  },
60
- [$]
61
- ), D = k(
62
- (r) => x(N(r)),
60
+ [I]
61
+ ), k = B(
62
+ (r) => g(D(r)),
63
63
  []
64
- ), [p, W] = me(
65
- () => D(y ?? A)
64
+ ), [f, j] = ve(
65
+ () => k(h ?? A)
66
66
  );
67
67
  M(() => {
68
- if (B) {
69
- const r = D(y);
70
- r !== p && (W(r), f.current && f.current.value !== r && (f.current.value = r));
68
+ if (z) {
69
+ const r = k(h);
70
+ r !== f && (j(r), c.current && c.current.value !== r && (c.current.value = r));
71
71
  }
72
- }, [y, B, p, D]);
73
- const oe = k(
72
+ }, [h, z, f, k]);
73
+ const oe = B(
74
74
  (r) => {
75
- const t = r.target, m = p, i = N(t.value), d = x(i);
76
- let n = 0;
77
- const v = i.length;
78
- 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));
79
- const fe = O(i);
80
- (i.length === 0 || i.length === 8) && l(i.length === 0 ? null : fe, d);
75
+ 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);
76
+ j(i), t.value = i, t.setSelectionRange(F, F), (i !== b || z) && (y == null || y(r, i));
77
+ const pe = P(l);
78
+ (l.length === 0 || l.length === 8) && n(l.length === 0 ? null : pe, i);
81
79
  },
82
- [p, B, I, l]
83
- ), ae = k(
80
+ [f, z, y, n]
81
+ ), ae = B(
84
82
  (r) => {
85
- const t = N(r.target.value);
86
- t.length === 0 ? l(null, "") : t.length < 8 ? l(!1, x(t)) : l(O(t), x(t)), z == null || z(r);
83
+ const t = D(r.target.value);
84
+ t.length === 0 ? n(null, "") : t.length < 8 ? n(!1, g(t)) : n(P(t), g(t)), w == null || w(r);
87
85
  },
88
- [z, l]
89
- ), ne = [o.fieldset, P].filter(Boolean).join(" "), le = [
86
+ [w, n]
87
+ ), ne = [o.fieldset, O].filter(Boolean).join(" "), le = [
90
88
  o.inputWrapper,
91
89
  q,
92
- c ? o.inputWrapperError : ""
90
+ u ? o.inputWrapperError : ""
93
91
  ].filter(Boolean).join(" "), ie = [
94
92
  H
95
- ].filter(Boolean).join(" "), de = [
93
+ ].filter(Boolean).join(" "), se = [
96
94
  o.suffixButton,
97
- u ? o.suffixButtonInteractive : ""
98
- ].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;
95
+ d ? o.suffixButtonInteractive : ""
96
+ ].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;
99
97
  return (
100
98
  // --- Bruk data-color og data-size på den ytre wrapperen ---
101
99
  /* @__PURE__ */ L(
@@ -105,24 +103,24 @@ const x = (e) => {
105
103
  "data-color": ee,
106
104
  "data-size": re,
107
105
  children: [
108
- s ? /* @__PURE__ */ g("label", { id: R, htmlFor: b, children: s }) : null,
109
- C && /* @__PURE__ */ g("p", { id: E, className: o.description, children: C }),
106
+ s ? /* @__PURE__ */ v("label", { id: W, htmlFor: p, children: s }) : null,
107
+ C && /* @__PURE__ */ v("p", { id: R, className: o.description, children: C }),
110
108
  /* @__PURE__ */ L("div", { className: le, children: [
111
- /* @__PURE__ */ g(
109
+ /* @__PURE__ */ v(
112
110
  "input",
113
111
  {
114
- ref: f,
112
+ ref: c,
115
113
  type: "text",
116
114
  inputMode: "numeric",
117
115
  pattern: "\\d{2}\\.\\d{2}\\.\\d{4}",
118
116
  maxLength: 10,
119
- value: p,
117
+ value: f,
120
118
  readOnly: G,
121
119
  placeholder: J,
122
- id: b,
120
+ id: p,
123
121
  name: Q,
124
122
  required: T,
125
- disabled: w,
123
+ disabled: $,
126
124
  onClick: U,
127
125
  onChange: oe,
128
126
  onFocus: X,
@@ -131,34 +129,34 @@ const x = (e) => {
131
129
  "aria-label": Z,
132
130
  "aria-labelledby": ce,
133
131
  "aria-describedby": ue,
134
- "aria-invalid": !!c,
132
+ "aria-invalid": !!u,
135
133
  className: ie,
136
134
  ...te
137
135
  }
138
136
  ),
139
- V && /* @__PURE__ */ g(
137
+ N && /* @__PURE__ */ v(
140
138
  "button",
141
139
  {
142
140
  type: "button",
143
- className: de,
144
- onClick: w ? void 0 : u,
145
- tabIndex: u && !w ? 0 : -1,
146
- "aria-hidden": !u,
147
- disabled: w,
148
- "aria-label": u ? h("dateInput.openDatePicker") : void 0,
149
- children: V
141
+ className: se,
142
+ onClick: $ ? void 0 : d,
143
+ tabIndex: d && !$ ? 0 : -1,
144
+ "aria-hidden": !d,
145
+ disabled: $,
146
+ "aria-label": d ? x("dateInput.openDatePicker") : void 0,
147
+ children: N
150
148
  }
151
149
  )
152
150
  ] }),
153
- c && /* @__PURE__ */ g("p", { id: F, className: o.error, role: "alert", children: c })
151
+ u && /* @__PURE__ */ v("p", { id: E, className: o.error, role: "alert", children: u })
154
152
  ]
155
153
  }
156
154
  )
157
155
  );
158
156
  }
159
157
  );
160
- ye.displayName = "DateInput";
161
- function Ie(e) {
158
+ Ie.displayName = "DateInput";
159
+ function $e(e) {
162
160
  return `
163
161
  .${e.fieldset} {
164
162
  margin-bottom: var(--ds-size-4, 16px);
@@ -252,5 +250,5 @@ function Ie(e) {
252
250
  `;
253
251
  }
254
252
  export {
255
- ye as DateInput
253
+ Ie as DateInput
256
254
  };
package/dist/index.d.ts CHANGED
@@ -57,7 +57,7 @@ import { HTMLAttributes } from 'react';
57
57
  import { Input as Input_2 } from '@digdir/designsystemet-react';
58
58
  import { InputHTMLAttributes } from 'react';
59
59
  import { InputProps as InputProps_2 } from '@digdir/designsystemet-react';
60
- import { JSX } from 'react/jsx-runtime';
60
+ import { JSX } from 'react';
61
61
  import { LabelProps as LabelProps_2 } from '@digdir/designsystemet-react';
62
62
  import { Link as Link_2 } from '@digdir/designsystemet-react';
63
63
  import { LinkProps as LinkProps_2 } from '@digdir/designsystemet-react';
@@ -359,7 +359,7 @@ export declare const Divider: ForwardRefExoticComponent<DividerProps_2 & RefAttr
359
359
  */
360
360
  export declare type DividerProps = DividerProps_2;
361
361
 
362
- export declare const Donor: ({ "data-color": dataColor, amounts, defaultAmount, oneTimeLabel, monthlyLabel, customAmountPlaceholder, amountLabel, impactMessage, vippsButtonLabel, avtalegiroLabel, avtalegiroHref, currencySuffix, onVippsClick, onAvtalegiroClick, onAmountChange, showVippsButton, showAvtalegiroLink, showImpactMessage, heartVariant, }: DonorProps) => JSX.Element;
362
+ export declare const Donor: ({ "data-color": dataColor, amounts, defaultAmount, oneTimeLabel, monthlyLabel, customAmountPlaceholder, amountLabel, impactMessage, vippsButtonLabel, avtalegiroLabel, avtalegiroHref, currencySuffix, onVippsClick, onAvtalegiroClick, onAmountChange, showVippsButton, showAvtalegiroLink, showImpactMessage, heartVariant, }: DonorProps) => default_2.JSX.Element;
363
363
 
364
364
  export declare interface DonorAmount {
365
365
  value: number;
@@ -477,7 +477,7 @@ export declare const Fieldset: typeof Fieldset_2;
477
477
  */
478
478
  export declare type FieldsetProps = FieldsetProps_2;
479
479
 
480
- export declare const Footer: ({ "data-color": dataColor, variant, colorScheme, columns, showGraphicElements, newsletterDescription, newsletterPlaceholder, newsletterInputLabel, newsletterButtonText, newsletterConsentText, onNewsletterSubmit, hideNewsletter, shortcutsLinks, linksLinks, shortcutsTitle, linksTitle, visitingAddress, organizationNumber, email, showPrimaryLogo, primaryLogoSrc, primaryLogoAlt, whiteSectionSlot, socialLinks, contactPersons, legalLinks, socialLinksTitle, contactPersonsTitle, }?: FooterProps) => JSX.Element;
480
+ export declare const Footer: ({ "data-color": dataColor, variant, colorScheme, columns, showGraphicElements, newsletterDescription, newsletterPlaceholder, newsletterInputLabel, newsletterButtonText, newsletterConsentText, onNewsletterSubmit, hideNewsletter, shortcutsLinks, linksLinks, shortcutsTitle, linksTitle, visitingAddress, organizationNumber, email, showPrimaryLogo, primaryLogoSrc, primaryLogoAlt, whiteSectionSlot, socialLinks, contactPersons, legalLinks, socialLinksTitle, contactPersonsTitle, }?: FooterProps) => default_2.JSX.Element;
481
481
 
482
482
  /**
483
483
  * @deprecated `'primary'` and `'additional'` were bespoke values; they now map
@@ -687,7 +687,7 @@ export declare type GraphicElementSize = 'sm' | 'md' | 'lg';
687
687
  */
688
688
  export declare type GraphicElementVariant = 'solid' | 'outline' | 'isometric';
689
689
 
690
- export declare const Header: ({ variant, "data-color": dataColor, activePage, setPage, children, showUser, showSearch, showLogin, loginHref, onLoginClick, searchItems, showCta, ctaLabel, ctaIcon, onCtaClick, showThemeToggle, secondaryLogo, secondaryLogoSrc, secondaryLogoSrcDark, secondaryLogoAlt, navItems, showNavItems, showMenuButton, showHeaderExtension, showModeToggle, showLanguageSwitch, extensionColor, userName, userInitials, userAvatarSrc, onUserClick, }: HeaderProps) => JSX.Element;
690
+ export declare const Header: ({ variant, "data-color": dataColor, activePage, setPage, children, showUser, showSearch, showLogin, loginHref, onLoginClick, searchItems, showCta, ctaLabel, ctaIcon, onCtaClick, showThemeToggle, secondaryLogo, secondaryLogoSrc, secondaryLogoSrcDark, secondaryLogoAlt, navItems, showNavItems, showMenuButton, showHeaderExtension, showModeToggle, showLanguageSwitch, extensionColor, userName, userInitials, userAvatarSrc, onUserClick, }: HeaderProps) => default_2.JSX.Element;
691
691
 
692
692
  /**
693
693
  * @deprecated `'primary'` was a bespoke value; it now maps to
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rk-designsystem",
3
- "version": "1.3.5",
3
+ "version": "1.4.1",
4
4
  "description": "A React component library built on top of Digdir Design System",
5
5
  "author": "daniel@tunetek.no",
6
6
  "license": "MIT",
@@ -47,8 +47,8 @@
47
47
  "LICENSE"
48
48
  ],
49
49
  "peerDependencies": {
50
- "@digdir/designsystemet-css": "~1.13.3",
51
- "@digdir/designsystemet-react": "~1.13.3",
50
+ "@digdir/designsystemet-css": "^1.21.0",
51
+ "@digdir/designsystemet-react": "^1.21.0",
52
52
  "react": "^18.3.1 || ^19.0.0",
53
53
  "react-dom": "^18.3.1 || ^19.0.0"
54
54
  },
@@ -77,9 +77,9 @@
77
77
  "test:visual:update": "playwright test -c playwright.visual.config.ts --update-snapshots"
78
78
  },
79
79
  "devDependencies": {
80
- "@digdir/designsystemet": "~1.13.3",
81
- "@digdir/designsystemet-css": "~1.13.3",
82
- "@digdir/designsystemet-react": "~1.13.3",
80
+ "@digdir/designsystemet": "^1.21.0",
81
+ "@digdir/designsystemet-css": "^1.21.0",
82
+ "@digdir/designsystemet-react": "^1.21.0",
83
83
  "@eslint/js": "^9.21.0",
84
84
  "@playwright/test": "^1.56.1",
85
85
  "@storybook/addon-a11y": "^10.2.12",
@@ -92,9 +92,9 @@
92
92
  "@vitest/browser": "^3.1.2",
93
93
  "eslint": "^9.21.0",
94
94
  "eslint-plugin-react-hooks": "^5.1.0",
95
- "eslint-plugin-react-refresh": "^0.4.19",
95
+ "eslint-plugin-react-refresh": "^0.5.5",
96
96
  "gh-pages": "^6.3.0",
97
- "glob": "^11.0.3",
97
+ "glob": "^13.0.6",
98
98
  "globals": "^17.11.0",
99
99
  "playwright": "^1.52.0",
100
100
  "prettier": "^3.6.2",
@@ -103,14 +103,14 @@
103
103
  "react-dom": "^19.0.0",
104
104
  "rimraf": "^6.0.1",
105
105
  "storybook": "^10.2.12",
106
- "typescript": "~5.7.2",
106
+ "typescript": "~5.9.3",
107
107
  "typescript-eslint": "^8.24.1",
108
108
  "vite": "^6.2.0",
109
109
  "vite-plugin-dts": "^4.5.4",
110
110
  "vitest": "^3.1.2"
111
111
  },
112
112
  "dependencies": {
113
- "@digdir/designsystemet-types": "1.13.3",
113
+ "@digdir/designsystemet-types": "^1.21.0",
114
114
  "@navikt/aksel-icons": "^8.16.1",
115
115
  "date-fns": "^4.1.0",
116
116
  "embla-carousel-react": "^8.6.0",