@altinn/altinn-components 0.63.3 → 0.63.5

package/dist/types/lib/components/Forms/FieldBase.d.ts

@@ -2,7 +2,8 @@ import { ReactNode } from 'react';
 import { FieldProps } from '..';
 export type FieldBaseProps = {
     label?: ReactNode;
+    htmlFor?: string;
     helperText?: ReactNode;
     children?: ReactNode;
 } & FieldProps;
-export declare const FieldBase: ({ size, color, label, helperText, children, ...restProps }: FieldBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldBase: ({ size, color, label, htmlFor, helperText, children, ...restProps }: FieldBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,10 +9,11 @@ export interface SearchFieldProps extends InputProps {
     collapsible?: boolean;
     value?: InputProps['value'];
     label?: FieldBaseProps['label'];
+    hideLabel?: boolean;
     clearButtonAltText?: string;
     loading?: boolean;
     loadingLabel?: string;
     onClear?: () => void;
     menu?: SearchFieldMenuProps;
 }
-export declare const SearchField: ({ className, collapsible, loading, loadingLabel, size, color, label, value, onClear, clearButtonAltText, menu, minLength, ...rest }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchField: ({ className, collapsible, loading, loadingLabel, size, color, label, hideLabel, value, onClear, clearButtonAltText, menu, minLength, ...rest }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { SearchFieldProps } from './SearchField';
 declare const meta: {
     title: string;
-    component: ({ className, collapsible, loading, loadingLabel, size, color, label, value, onClear, clearButtonAltText, menu, minLength, ...rest }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, collapsible, loading, loadingLabel, size, color, label, hideLabel, value, onClear, clearButtonAltText, menu, minLength, ...rest }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -13,6 +13,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const HiddenLabel: Story;
 export declare const ClearButton: Story;
 export declare const DebouncedQuery: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Controlled: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,9 +11,11 @@ export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'con
     ownerLogoUrl?: string;
     /** Alternative text for the owner's logo (optional) */
     ownerLogoUrlAlt?: string;
+    /** Optional override for the secondary description line. Falls back to ownerName. */
+    description?: string;
     /** Badge properties for the resource item (optional) */
     badge?: BadgeProps;
     /** Title element for the resource item (optional) */
     titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
 }
-export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, titleAs, ...props }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ResourceListItem: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, description, titleAs, ...props }: ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/ResourceListItem/ResourceListItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, titleAs, ...props }: import('./ResourceListItem').ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ ownerName, resourceName, ownerLogoUrlAlt, ownerLogoUrl, description, titleAs, ...props }: import('./ResourceListItem').ResourceListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Toolbar/ToolbarSearch.d.ts

@@ -2,4 +2,4 @@ import { SearchFieldProps } from '../Forms';
 export interface ToolbarSearchProps extends SearchFieldProps {
     collapsible?: boolean;
 }
-export declare const ToolbarSearch: import('react').MemoExoticComponent<({ value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ToolbarSearch: import('react').MemoExoticComponent<({ label, hideLabel, value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/types/lib/components/Toolbar/ToolbarSearch.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: import('react').MemoExoticComponent<({ value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, }: import('./ToolbarSearch').ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;
+    component: import('react').MemoExoticComponent<({ label, hideLabel, value, name, placeholder, loading, collapsible, clearButtonAltText, onChange, onClear, onKeyDown, menu, minLength, disabled, }: import('./ToolbarSearch').ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element>;
     tags: string[];
     parameters: {};
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
@@ -9,6 +9,7 @@ declare const meta: {
         className?: string | undefined;
         value?: string | number | readonly string[] | undefined;
         label?: import('react').ReactNode;
+        hideLabel?: boolean | undefined;
         clearButtonAltText?: string | undefined;
         loading?: boolean | undefined;
         loadingLabel?: string | undefined;
@@ -324,11 +325,13 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined | undefined;
+        'data-indeterminate'?: boolean | undefined;
     }>, _: import('storybook/internal/csf').StoryContext<import('@storybook/react-vite').ReactRenderer, {
         collapsible?: boolean | undefined;
         className?: string | undefined;
         value?: string | number | readonly string[] | undefined;
         label?: import('react').ReactNode;
+        hideLabel?: boolean | undefined;
         clearButtonAltText?: string | undefined;
         loading?: boolean | undefined;
         loadingLabel?: string | undefined;
@@ -644,9 +647,11 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined | undefined;
+        'data-indeterminate'?: boolean | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     args: {
         name: string;
+        label: string;
     };
 };
 export default meta;

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

@@ -1,5 +1,5 @@
 import { ListItemProps } from '../List';
-export interface UserListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'onClick' | 'loading' | 'shadow' | 'border' | 'color' | 'linkIcon' | 'expanded' | 'collapsible' | 'children' | 'as' | 'interactive' | 'id' | 'className'> {
+export interface UserListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'onClick' | 'loading' | 'shadow' | 'border' | 'color' | 'linkIcon' | 'expanded' | 'collapsible' | 'children' | 'as' | 'interactive' | 'id' | 'className' | 'containerAs'> {
     /** Unique identifier for the user item */
     id: string;
     /** Name of the user */

package/dist/types/lib/components/UserListItem/UserListItem.stories.d.ts

@@ -16,6 +16,7 @@ declare const meta: {
         linkIcon: false;
         collapsible: false;
         as: "div";
+        containerAs: "li";
         interactive: true;
         subUnit: false;
         deleted: false;
@@ -50,6 +51,12 @@ declare const meta: {
                 type: "select";
             };
         };
+        containerAs: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
         titleAs: {
             options: string[];
             control: {

package/dist/use-pagination-mAaJfKMF.js

@@ -0,0 +1,52 @@
+"use client";
+import { u as p } from "./tooltip-B5zQ3zF0.js";
+import { useMemo as P } from "react";
+const h = ({ currentPage: s = 1, setCurrentPage: u, onChange: l, totalPages: t = 1, showPages: o = 7 }) => P(() => {
+  const { next: i, prev: n, pages: c } = p({ current: s, total: t, show: o }), a = (e) => (r) => {
+    if (e < 1 || e > t)
+      return r.preventDefault();
+    l?.(r, e), r.defaultPrevented || u?.(e);
+  };
+  return {
+    /** Number of steps */
+    pages: c.map(({ page: e, current: r }, d) => ({
+      /**
+       * Page number or "ellipsis" for the ellipsis item
+       */
+      page: e || "ellipsis",
+      /**
+       * Unique key for the item
+       */
+      itemKey: e ? `page-${e}` : `ellipsis-${d}`,
+      // React key utility
+      /**
+       * Properties to spread on Pagination.Button
+       */
+      buttonProps: e ? {
+        "aria-current": r ? "true" : void 0,
+        onClick: a(e)
+      } : null
+    })),
+    /** Properties to spread on Pagination.Button used for previous naviagation */
+    prevButtonProps: {
+      "aria-hidden": !n,
+      // Using aria-hidden to support all HTML elements because of potential asChild
+      onClick: a(n),
+      variant: "tertiary"
+    },
+    /** Properties to spread on Pagination.Button used for next naviagation */
+    nextButtonProps: {
+      "aria-hidden": !i,
+      // Using aria-hidden to support all HTML elements because of potential asChild
+      onClick: a(i),
+      variant: "tertiary"
+    },
+    /** Indication if previous page action should be shown or not */
+    hasPrev: !!n,
+    /** Indication if next page action should be shown or not */
+    hasNext: !!i
+  };
+}, [s, t, o]);
+export {
+  h as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.63.3",
+  "version": "0.63.5",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -20,9 +20,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@digdir/designsystemet-css": "^1.9.0",
-    "@digdir/designsystemet-react": "^1.9.0",
-    "@digdir/designsystemet-theme": "^1.9.0",
+    "@digdir/designsystemet-css": "^1.14.0",
+    "@digdir/designsystemet-react": "^1.14.0",
+    "@digdir/designsystemet-theme": "^1.11.0",
     "@navikt/aksel-icons": "^8.9.0",
     "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",

package/dist/alert-BzifOfXl.js

@@ -1,10 +0,0 @@
-"use client";
-import { jsx as e } from "react/jsx-runtime";
-import { c as s } from "./lite-1fxw3LjI.js";
-import { forwardRef as c } from "react";
-const n = c(function({ "data-color": r = "info", className: o, ...t }, a) {
-  return e("div", { className: s("ds-alert", o), "data-color": r, ref: a, ...t });
-});
-export {
-  n as A
-};

package/dist/button-BB5sYVKY.js

@@ -1,38 +0,0 @@
-"use client";
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { S as p, a as y } from "./index-D7FJjvrv.js";
-import { c as o } from "./lite-1fxw3LjI.js";
-import { useRef as b, useLayoutEffect as T, useEffect as h, forwardRef as d } from "react";
-import { u as x } from "./use-merge-refs-Cj4kTYVj.js";
-const S = typeof window < "u" ? T : h;
-function u(s) {
-  const r = b(null);
-  return S(() => {
-    const i = document.getAnimations().filter((e) => "animationName" in e && e.animationName === s), t = i.find((e) => "animationName" in e && e.animationName === s), n = i.find((e) => e.effect?.target === r.current);
-    return n && n === t && (n.currentTime = 0), n && t?.currentTime && n !== t && (n.currentTime = t.currentTime), () => {
-      n && t?.currentTime && (n.currentTime = t.currentTime);
-    };
-  }, [s]), r;
-}
-const B = d(function({ "aria-label": r, className: i, ...t }, n) {
-  const e = u("ds-spinner-rotate-animation"), c = u("ds-spinner-stroke-animation"), f = x([e, n]);
-  return m("svg", { "aria-label": r, className: o("ds-spinner", i), ref: f, role: "img", viewBox: "0 0 50 50", ...t, children: [a("circle", { className: o("ds-spinner__background"), cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }), a("circle", { className: o("ds-spinner__circle"), cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5", ref: c })] });
-}), _ = d(function({ asChild: r, className: i, children: t, icon: n = !1, loading: e = !1, variant: c = "primary", ...f }, l) {
-  return m(r ? p : "button", {
-    "aria-busy": !!e || void 0,
-    "aria-disabled": !!e || void 0,
-    className: o("ds-button", i),
-    "data-icon": n || void 0,
-    "data-variant": c,
-    ref: l,
-    /* don't set type when we use `asChild` */
-    type: r ? void 0 : "button",
-    ...f,
-    children: [e === !0 ? a(B, { "aria-hidden": "true" }) : e, a(y, { children: n && e ? null : t })]
-  });
-});
-export {
-  _ as B,
-  B as S,
-  u
-};

package/dist/fieldset-legend-B6lDmp0N.js

@@ -1,10 +0,0 @@
-"use client";
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { L as i } from "./label-xTmTyPhk.js";
-const l = o(function(r, t) {
-  return e(i, { asChild: !0, children: e("legend", { ref: t, ...r }) });
-});
-export {
-  l as F
-};