@altinn/altinn-components 0.22.6 → 0.22.7

package/dist/components/List/ListItem.js

@@ -1,7 +1,7 @@
-import { jsxs as d, jsx as k } from "react/jsx-runtime";
-import { ListItemBase as q } from "./ListItemBase.js";
-import { ListItemHeader as v } from "./ListItemHeader.js";
-const C = ({
+import { jsxs as k, jsx as q } from "react/jsx-runtime";
+import { ListItemBase as v } from "./ListItemBase.js";
+import { ListItemHeader as w } from "./ListItemHeader.js";
+const D = ({
   className: f,
   variant: e = "solid",
   color: r,
@@ -15,57 +15,59 @@ const C = ({
   avatar: L,
   avatarGroup: l,
   title: o,
-  description: I,
-  badge: a,
-  linkIcon: j = !1,
+  titleAs: I,
+  description: a,
+  badge: j,
+  linkIcon: x = !1,
   label: t,
-  select: x,
-  selected: h,
-  controls: y,
-  children: B,
-  ...H
+  select: h,
+  selected: y,
+  controls: B,
+  children: H,
+  ...b
 }) => {
-  const b = typeof t == "function" ? t() : t;
-  return /* @__PURE__ */ d(
-    q,
+  const d = typeof t == "function" ? t() : t;
+  return /* @__PURE__ */ k(
+    v,
     {
       variant: e,
       color: r,
       theme: i,
       shadow: c,
-      selected: h,
+      selected: y,
       expanded: s,
       title: o,
       loading: m,
       children: [
-        /* @__PURE__ */ k(
-          v,
+        /* @__PURE__ */ q(
+          w,
           {
             className: f,
             color: r,
             theme: i,
             loading: m,
-            linkIcon: j,
+            linkIcon: x,
             collapsible: n,
             expanded: s,
-            select: x,
+            select: h,
             size: p,
             title: o,
-            description: I,
+            description: a,
             icon: u,
             avatar: L,
             avatarGroup: l,
-            badge: a,
-            controls: y,
-            ...H,
-            children: b
+            badge: j,
+            controls: B,
+            titleAs: I,
+            ...b,
+            children: d
           }
         ),
-        s ? B : null
+        s ? H : null
       ]
     }
   );
 };
 export {
-  C as ListItem
+  D as ListItem
 };

package/dist/components/List/ListItemHeader.js

@@ -1,26 +1,26 @@
-import { jsx as e, jsxs as n, Fragment as F } from "react/jsx-runtime";
+import { jsx as e, jsxs as n, Fragment as H } from "react/jsx-runtime";
 import { c as f } from "../../index-L8X2o7IH.js";
-import { useId as H, isValidElement as M } from "react";
-import { Icon as R } from "../Icon/Icon.js";
-import { Badge as U } from "../Badge/Badge.js";
+import { useId as M, isValidElement as R } from "react";
+import { Icon as U } from "../Icon/Icon.js";
+import { Badge as V } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as V } from "./ListItemLink.js";
-import { ListItemLabel as q } from "./ListItemLabel.js";
-import { ListItemIcon as A } from "./ListItemIcon.js";
-import { ListItemControls as G } from "./ListItemControls.js";
-import { ListItemSelect as J } from "./ListItemSelect.js";
+import { ListItemLink as q } from "./ListItemLink.js";
+import { ListItemLabel as A } from "./ListItemLabel.js";
+import { ListItemIcon as G } from "./ListItemIcon.js";
+import { ListItemControls as J } from "./ListItemControls.js";
+import { ListItemSelect as K } from "./ListItemSelect.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as K } from "../../ChevronUp-H8Nuww4h.js";
-import { S as O } from "../../ChevronDown-CRAwzuD3.js";
-import { S as P } from "../../ChevronRight-DUaHaWi-.js";
-import '../../assets/ListItemHeader.css';const Q = "_wrapper_xtweu_1", W = "_link_xtweu_5", X = "_linkTitle_xtweu_10", Y = "_header_xtweu_16", Z = "_content_xtweu_54", t = {
-  wrapper: Q,
-  link: W,
-  linkTitle: X,
-  header: Y,
-  content: Z
-}, _e = ({
+import { S as O } from "../../ChevronUp-H8Nuww4h.js";
+import { S as P } from "../../ChevronDown-CRAwzuD3.js";
+import { S as Q } from "../../ChevronRight-DUaHaWi-.js";
+import '../../assets/ListItemHeader.css';const W = "_wrapper_xtweu_1", X = "_link_xtweu_5", Y = "_linkTitle_xtweu_10", Z = "_header_xtweu_16", $ = "_content_xtweu_54", t = {
+  wrapper: W,
+  link: X,
+  linkTitle: Y,
+  header: Z,
+  content: $
+}, ue = ({
   as: _,
   interactive: m = !0,
   color: u,
@@ -46,15 +46,16 @@ import '../../assets/ListItemHeader.css';const Q = "_wrapper_xtweu_1", W = "_lin
   controls: p,
   className: j,
   children: B,
-  ariaLabel: E
+  ariaLabel: E,
+  titleAs: g
 }) => {
-  const g = {
+  const D = {
     xs: "sm",
     sm: "md",
     md: "lg",
     lg: "lg",
     xl: "xl"
-  }, d = v ? k ? K : O : w ? P : void 0, o = g[s], D = () => i && !r && typeof i == "object" && "label" in i ? /* @__PURE__ */ e(U, { ...i }) : M(i) ? i : null, h = H();
+  }, d = v ? k ? O : P : w ? Q : void 0, o = D[s], F = () => i && !r && typeof i == "object" && "label" in i ? /* @__PURE__ */ e(V, { ...i }) : R(i) ? i : null, h = M();
   return /* @__PURE__ */ e("div", { className: t.wrapper, children: /* @__PURE__ */ n(
     "header",
     {
@@ -66,7 +67,7 @@ import '../../assets/ListItemHeader.css';const Q = "_wrapper_xtweu_1", W = "_lin
       "data-has-active-child": c,
       children: [
         /* @__PURE__ */ e(
-          V,
+          q,
           {
             interactive: m,
             className: f(t.link),
@@ -83,9 +84,9 @@ import '../../assets/ListItemHeader.css';const Q = "_wrapper_xtweu_1", W = "_lin
           }
         ),
         /* @__PURE__ */ n("div", { className: t.content, "data-size": s, children: [
-          l && /* @__PURE__ */ e(J, { ...l, className: t.select, size: o }),
+          l && /* @__PURE__ */ e(K, { ...l, className: t.select, size: o }),
           /* @__PURE__ */ e(
-            A,
+            G,
             {
               loading: r,
               size: o,
@@ -94,16 +95,27 @@ import '../../assets/ListItemHeader.css';const Q = "_wrapper_xtweu_1", W = "_lin
               avatarGroup: T
             }
           ),
-          /* @__PURE__ */ e(q, { size: s, loading: r, title: a, description: y, id: h, children: B })
+          /* @__PURE__ */ e(
+            A,
+            {
+              size: s,
+              loading: r,
+              title: a,
+              description: y,
+              id: h,
+              titleAs: g,
+              children: B
+            }
+          )
         ] }),
-        /* @__PURE__ */ e(G, { className: t.controls, children: p && !r ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: p }) : /* @__PURE__ */ n(F, { children: [
-          D(),
-          d && /* @__PURE__ */ e(R, { svgElement: d, size: o })
+        /* @__PURE__ */ e(J, { className: t.controls, children: p && !r ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: p }) : /* @__PURE__ */ n(H, { children: [
+          F(),
+          d && /* @__PURE__ */ e(U, { svgElement: d, size: o })
         ] }) })
       ]
     }
   ) });
 };
 export {
-  _e as ListItemHeader
+  ue as ListItemHeader
 };

package/dist/components/List/ListItemLabel.js

@@ -1,22 +1,26 @@
-import { jsx as e, jsxs as m, Fragment as d } from "react/jsx-runtime";
-import { Skeleton as c } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const _ = "_label_fiqmy_3", p = "_title_fiqmy_43", h = "_description_fiqmy_58", l = {
-  label: _,
-  title: p,
-  description: h
-}, y = ({
+import { jsx as t, jsxs as p, Fragment as _ } from "react/jsx-runtime";
+import { Skeleton as n } from "../Skeleton/Skeleton.js";
+import '../../assets/ListItemLabel.css';const h = "_label_fiqmy_3", b = "_title_fiqmy_43", f = "_description_fiqmy_58", l = {
+  label: h,
+  title: b,
+  description: f
+}, x = ({
   loading: s = !1,
-  size: t = "sm",
-  title: n,
+  size: e = "sm",
+  title: c,
+  titleAs: o = "h2",
   weight: r = "bold",
   description: i,
   children: a,
-  id: o
-}) => /* @__PURE__ */ e("span", { className: l.label, "data-size": t, id: o, children: a || /* @__PURE__ */ m(d, { children: [
-  /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e("h2", { className: l.title, "data-size": t, "data-weight": r, children: n }) }),
-  " ",
-  i && /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e("p", { className: l.description, "data-size": t, children: i }) })
-] }) });
+  id: m
+}) => {
+  const d = o;
+  return /* @__PURE__ */ t("span", { className: l.label, "data-size": e, id: m, children: a || /* @__PURE__ */ p(_, { children: [
+    /* @__PURE__ */ t(n, { loading: s, children: /* @__PURE__ */ t(d, { className: l.title, "data-size": e, "data-weight": r, children: c }) }),
+    " ",
+    i && /* @__PURE__ */ t(n, { loading: s, children: /* @__PURE__ */ t("p", { className: l.description, "data-size": e, children: i }) })
+  ] }) });
+};
 export {
-  y as ListItemLabel
+  x as ListItemLabel
 };

package/dist/types/lib/components/List/ListItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ElementType, ReactElement, ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
 import { IconProps, SvgElement } from '../Icon';
@@ -13,6 +13,8 @@ export interface ListItemProps extends ListItemBaseProps, ListItemHeaderProps {
     loading?: boolean;
     /** Title */
     title?: string;
+    /** Element type of the list-item header label. Defaults to h2 */
+    titleAs?: ElementType;
     /** Optional description */
     description?: string;
     /** List item icon */
@@ -33,4 +35,4 @@ export interface ListItemInputProps extends ListItemProps {
     /** Child items */
     items?: ListItemProps[];
 }
-export declare const ListItem: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, titleAs, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItem.stories.d.ts

@@ -2,12 +2,13 @@ import { StoryObj } from '@storybook/react';
 import { ListItemProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, titleAs, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     args: {
         id: string;
         as: "button";
         title: string;
+        titleAs: "h2";
         onClick: () => void;
     };
 };
@@ -28,3 +29,4 @@ export declare const OverridingIcon: (args: ListItemProps) => import("react/jsx-
 export declare const OverridingBadge: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const OverridingLabel: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CustomControls: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverrideTitleAs: (args: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItemHeader.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps, BadgeProps, IconProps, ListItemColor, ListItemLinkProps, ListItemSelectProps, ListItemSize, ListItemTheme, SvgElement } from '..';
 export interface ListItemHeaderProps extends ListItemLinkProps {
     /** The color of the list item. */
@@ -23,6 +23,8 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     linkIcon?: boolean;
     /** Title */
     title?: string;
+    /** Element type of the list-item header label. Defaults to h2*/
+    titleAs?: ElementType;
     /** Description */
     description?: string;
     /** List item icon */
@@ -42,4 +44,4 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Used as decerning text for the ListItem without title, defaults to title */
     ariaLabel?: string;
 }
-export declare const ListItemHeader: ({ as, interactive, color, theme, loading, disabled, collapsible, linkIcon, expanded, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, avatar, active, avatarGroup, badge, controls, className, children, ariaLabel, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemHeader: ({ as, interactive, color, theme, loading, disabled, collapsible, linkIcon, expanded, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, avatar, active, avatarGroup, badge, controls, className, children, ariaLabel, titleAs, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItemLabel.d.ts

@@ -1,12 +1,13 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { ListItemSize } from './ListItemBase';
 export interface ListItemLabelProps {
     id?: string;
     loading?: boolean;
     size?: ListItemSize;
     title?: string;
+    titleAs?: ElementType;
     weight?: 'bold' | 'normal';
     description?: string;
     children?: ReactNode;
 }
-export declare const ListItemLabel: ({ loading, size, title, weight, description, children, id, }: ListItemLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemLabel: ({ loading, size, title, titleAs, weight, description, children, id, }: ListItemLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/Specimens.stories.d.ts

@@ -1,7 +1,7 @@
 import { ListItemProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, variant, color, theme, shadow, loading, collapsible, expanded, size, icon, avatar, avatarGroup, title, titleAs, description, badge, linkIcon, label, select, selected, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     args: {
         id: string;

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

@@ -35,6 +35,7 @@ declare const meta: {
         avatarGroup?: import('..').AvatarGroupProps | undefined;
         href?: string | undefined;
         ariaLabel?: string | undefined;
+        titleAs?: import('react').ElementType | undefined;
         description?: string | undefined;
         linkIcon?: boolean | undefined;
         interactive?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.22.6",
+  "version": "0.22.7",
   "main": "dist/index.js",
   "files": [
     "dist/",