@altinn/altinn-components 0.52.3 → 0.52.4

package/dist/types/lib/components/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 export declare enum BannerColorEnum {
-    accent = "accent",
+    company = "company",
     success = "success",
     warning = "warning",
     danger = "danger",

package/dist/types/lib/components/Button/ButtonGroup.d.ts

@@ -1,6 +1,10 @@
-import { ReactNode } from 'react';
-import { FlexProps } from '..';
-export interface ButtonGroupProps extends FlexProps {
-    children: ReactNode;
+import { ButtonBaseProps } from './ButtonBase';
+export interface ButtonGroupProps extends ButtonBaseProps {
+    children?: React.ReactNode;
+    variant?: ButtonBaseProps['variant'];
+    color?: ButtonBaseProps['color'];
+    size?: ButtonBaseProps['size'];
+    disabled?: boolean;
+    connected?: boolean;
 }
-export declare const ButtonGroup: ({ color, size, children, ...rest }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroup: ({ children, variant, color, size, disabled, connected }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/ButtonGroup.stories.d.ts

@@ -0,0 +1,12 @@
+declare const meta: {
+    title: string;
+    component: ({ children, variant, color, size, disabled, connected }: import('./ButtonGroup').ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    args: {
+        children: string;
+    };
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const Connected: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDivider: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/ButtonGroupDivider.d.ts

@@ -0,0 +1 @@
+export declare const ButtonGroupDivider: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Forms/SearchField.stories.d.ts

@@ -13,4 +13,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const ClearButton: Story;
 export declare const Controlled: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/LayoutAction/LayoutAction.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { PageMenuProps } from '../';
-export type LayoutActionColor = 'accent';
+export type LayoutActionColor = 'company';
 export type LayoutActionTheme = 'base';
 export interface LayoutActionProps {
     color?: LayoutActionColor;

package/dist/types/lib/components/Snackbar/SnackbarItem.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, ReactNode } from 'react';
 import { SvgElement } from '..';
 export declare enum SnackbarColorEnum {
-    accent = "accent",
+    company = "company",
     success = "success",
     warning = "warning",
     danger = "danger",

package/dist/types/lib/components/index.d.ts

@@ -5,7 +5,6 @@ export * from './Account';
 export * from './Alert';
 export * from './Badge';
 export * from './Banner';
-export * from './Bookmarks';
 export * from './Button';
 export * from './Byline';
 export * from './ContextMenu';

package/dist/types/lib/types/color.d.ts

@@ -1,2 +1,2 @@
-export type Color = 'inherit' | 'accent' | 'company' | 'person' | 'neutral' | 'article' | 'success' | 'warning' | 'error' | 'danger' | 'info' | 'alert';
+export type Color = 'inherit' | 'company' | 'person' | 'neutral' | 'success' | 'warning' | 'error' | 'danger' | 'info' | 'alert';
 export type Theme = 'transparent' | 'default' | 'tinted' | 'subtle' | 'surface' | 'surface-default' | 'surface-hover' | 'surface-active' | 'border' | 'border-subtle' | 'border-default' | 'border-strong' | 'base' | 'base-default' | 'base-hover' | 'base-active';

package/dist/types/lib/types/fields.d.ts

@@ -1,2 +1,2 @@
 export type FieldSize = 'xs' | 'sm' | 'md' | 'lg';
-export type FieldColor = 'inherit' | 'accent' | 'company' | 'person' | 'neutral' | 'success' | 'warning' | 'error' | 'danger' | 'info' | 'alert';
+export type FieldColor = 'inherit' | 'company' | 'person' | 'neutral' | 'success' | 'warning' | 'error' | 'danger' | 'info' | 'alert';

package/dist/use-merge-refs-Cj4kTYVj.js

@@ -0,0 +1,29 @@
+"use client";
+import { useRef as o, useCallback as i, useMemo as s } from "react";
+function a(u) {
+  const r = o(void 0), c = i((n) => {
+    const f = u.map((e) => {
+      if (e == null)
+        return null;
+      if (typeof e == "function") {
+        const t = e, l = t(n);
+        return typeof l == "function" ? l : () => {
+          t(null);
+        };
+      }
+      return e.current = n, () => {
+        e.current = null;
+      };
+    });
+    return () => {
+      for (const e of f)
+        e?.();
+    };
+  }, u);
+  return s(() => u.every((n) => n == null) ? null : (n) => {
+    r.current && (r.current(), r.current = void 0), n != null && (r.current = c(n));
+  }, u);
+}
+export {
+  a as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.52.3",
+  "version": "0.52.4",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -20,9 +20,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@digdir/designsystemet-css": "^1.0.6",
-    "@digdir/designsystemet-react": "^1.0.6",
-    "@digdir/designsystemet-theme": "^1.0.6",
+    "@digdir/designsystemet-css": "^1.9.0",
+    "@digdir/designsystemet-react": "^1.9.0",
+    "@digdir/designsystemet-theme": "^1.9.0",
     "@navikt/aksel-icons": "^7.37.0",
     "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
@@ -31,33 +31,34 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@chromatic-com/storybook": "^4.0.0",
-    "@storybook/addon-a11y": "^9.0.4",
-    "@storybook/addon-docs": "^9.0.4",
-    "@storybook/addon-links": "^9.0.4",
-    "@storybook/addon-mdx-gfm": "^9.0.0-alpha.13",
-    "@storybook/addon-themes": "^9.0.4",
-    "@storybook/react-vite": "^9.0.4",
-    "@storybook/test-runner": "^0.22.1",
+    "@chromatic-com/storybook": "4.1.3",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-themes": "10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react-vite": "10.1.11",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.5",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.5",
     "@vitejs/plugin-react-swc": "^3.9.0",
+    "@vitest/browser": "4.0.16",
+    "@vitest/browser-playwright": "4.0.16",
+    "@vitest/coverage-v8": "^3.2.4",
     "axe-core": "^4.10.3",
     "axe-playwright": "^2.1.0",
-    "glob": "^11.0.2",
+    "glob": "^13.0.0",
     "lint-staged": "^15.5.2",
-    "playwright": "^1.52.0",
+    "playwright": "^1.57.0",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^9.0.4",
-    "storybook-addon-tag-badges": "^2.0.0",
+    "storybook": "^10.1.11",
+    "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-theme-provider": "^0.2.10",
     "typescript": "^5.8.3",
-    "vite": "^5.4.20",
+    "vite": "7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-static-copy": "^2.3.2",
-    "vitest": "^3.2.4"
+    "vitest": "4.0.16"
   },
   "peerDependencies": {
     "react": ">=18.3.1 || ^19.0.0",
@@ -80,7 +81,10 @@
     "lint:fix": "biome check ./ --write",
     "dev": "vite",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook",
+    "ci:build-storybook": "storybook build --quiet",
+    "test-storybook": "vitest --run --project=storybook",
+    "test-storybook-watch": "vitest --project=storybook",
+    "ci:test-storybook": "pnpm dlx concurrently -k -s first \"pnpm storybook\" \"pnpm dlx wait-on http://localhost:6006 && pnpm test-storybook\"",
     "install:browsers": "pnpm exec playwright install"
   }
 }

package/dist/Button-B0t0vz2h.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { S as d, a as m } from "./index-D8Pn8SCu.js";
-import { c as p } from "./lite-1fxw3LjI.js";
-import { forwardRef as c } from "react";
-import { S as l } from "./Spinner-BDXfwXIh.js";
-const v = c(function({ asChild: e, className: o, children: r, icon: a = !1, loading: t = !1, variant: i = "primary", ...s }, f) {
-  return u(e ? d : "button", {
-    "aria-busy": !!t || void 0,
-    "aria-disabled": !!t || void 0,
-    className: p("ds-button", o),
-    "data-icon": a || void 0,
-    "data-variant": i,
-    ref: f,
-    /* don't set type when we use `asChild` */
-    type: e ? void 0 : "button",
-    ...s,
-    children: [t === !0 ? n(l, { "aria-hidden": "true" }) : t, n(m, { children: r })]
-  });
-});
-export {
-  v as B
-};

package/dist/Input-B_w6SBmg.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as s } from "react/jsx-runtime";
-import { c as a } from "./lite-1fxw3LjI.js";
-import { forwardRef as i } from "react";
-const l = i(function({ type: u = "text", className: e, onChange: r, onClick: p, ...f }, m) {
-  return s("input", { className: a("ds-input", e), ref: m, type: u, onChange: (t) => f.readOnly || (r == null ? void 0 : r(t)), onClick: (t) => {
-    f.readOnly && t.preventDefault(), p == null || p(t);
-  }, ...f });
-});
-export {
-  l as I
-};

package/dist/Spinner-BDXfwXIh.js

@@ -1,26 +0,0 @@
-"use client";
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import { c } from "./lite-1fxw3LjI.js";
-import { useLayoutEffect as l, useEffect as d, useRef as p, forwardRef as g } from "react";
-import { u as x } from "./useMergeRefs-DOnoWyUH.js";
-const R = typeof window < "u" ? l : d;
-function m(i) {
-  const t = p(null);
-  return R(() => {
-    const s = document.getAnimations().filter((r) => "animationName" in r && r.animationName === i), e = s.find((r) => "animationName" in r && r.animationName === i), n = s.find((r) => {
-      var o;
-      return ((o = r.effect) == null ? void 0 : o.target) === t.current;
-    });
-    return n && n === e && (n.currentTime = 0), n && (e != null && e.currentTime) && n !== e && (n.currentTime = e.currentTime), () => {
-      n && (e != null && e.currentTime) && (n.currentTime = e.currentTime);
-    };
-  }, [i]), t;
-}
-const y = g(function({ "aria-label": t, className: s, ...e }, n) {
-  const r = m("ds-spinner-rotate-animation"), o = m("ds-spinner-stroke-animation"), f = x([r, n]);
-  return u("svg", { "aria-label": t, className: c("ds-spinner", s), ref: f, role: "img", viewBox: "0 0 50 50", ...e, children: [a("circle", { className: c("ds-spinner__background"), cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }), a("circle", { className: c("ds-spinner__circle"), cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5", ref: o })] });
-});
-export {
-  y as S,
-  m as u
-};

package/dist/altinn-ds-overrides.css

@@ -1,53 +0,0 @@
-:root {
-  /* COMPANY */
-
-  --ds-color-company-background-tinted: #e9f5ff;
-  --ds-color-company-surface-tinted: #d3eafd;
-  --ds-color-company-surface-hover: #a5d6fb;
-  --ds-color-company-surface-active: #78c1f9;
-
-  /* PERSON */
-
-  --ds-color-person-background-tinted: #eaf7ef;
-  --ds-color-person-surface-tinted: #a8f3d0;
-  --ds-color-person-surface-hover: #6ee7b7;
-  --ds-color-person-surface-active: #34d399;
-
-  /* ARTICLE */
-
-  --ds-color-article-background-default: var(--ds-color-company-background-default);
-  --ds-color-article-background-tinted: var(--ds-color-company-background-tinted);
-  --ds-color-article-surface-default: var(--ds-color-company-surface-default);
-  --ds-color-article-surface-tinted: var(--ds-color-company-surface-tinted);
-  --ds-color-article-surface-hover: var(--ds-color-company-surface-hover);
-  --ds-color-article-surface-active: var(--ds-color-company-surface-active);
-  --ds-color-article-border-default: var(--ds-color-company-border-default);
-  --ds-color-article-border-subtle: var(--ds-color-company-border-subtle);
-  --ds-color-article-border-strong: var(--ds-color-company-border-strong);
-
-  --ds-color-article-text-subtle: var(--ds-color-company-text-subtle);
-  --ds-color-article-text-default: var(--ds-color-company-text-default);
-
-  /* ACCENT = COMPANY */
-
-  --ds-color-accent-background-default: var(--ds-color-company-background-default);
-  --ds-color-accent-background-tinted: var(--ds-color-company-background-tinted);
-  --ds-color-accent-surface-default: var(--ds-color-company-surface-default);
-  --ds-color-accent-surface-tinted: var(--ds-color-company-surface-tinted);
-  --ds-color-accent-surface-hover: var(--ds-color-company-surface-hover);
-  --ds-color-accent-surface-active: var(--ds-color-company-surface-active);
-  --ds-color-accent-border-default: var(--ds-color-company-border-default);
-  --ds-color-accent-border-subtle: var(--ds-color-company-border-subtle);
-  --ds-color-accent-border-strong: var(--ds-color-company-border-strong);
-  --ds-color-accent-base-default: var(--ds-color-company-base-default);
-  --ds-color-accent-base-hover: var(--ds-color-company-base-hover);
-  --ds-color-accent-base-active: var(--ds-color-company-base-active);
-  --ds-color-accent-text-subtle: var(--ds-color-company-text-subtle);
-  --ds-color-accent-text-default: var(--ds-color-company-text-default);
-  --ds-color-accent-base-contrast-default: var(--ds-color-company-base-contrast-default);
-  --ds-color-accent-base-contrast-subtle: var(--ds-color-company-base-contrast-subtle);
-
-  /* Override tokens from designSystem & altinn-components */
-  /*  --ds-body-md-font-size: 1rem;
-  --ds-color-text-subtle: #10204a; */
-}