@altinn/altinn-components 0.51.3 → 0.51.5

package/dist/assets/TimelineBase.css

@@ -1 +1 @@
-._section_1030v_1{width:100%;display:flex;column-gap:.5rem;min-height:1.5rem}._sidebar_1030v_8{flex-shrink:0;flex-grow:0;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:.375rem;width:1.5rem}._sidebar_1030v_8[data-level="2"]{width:1.5rem}@media (min-width: 1024px){._sidebar_1030v_8{width:2.25rem}._sidebar_1030v_8[data-level="2"]{width:1.5rem}}._content_1030v_33{flex-grow:1;display:flex;flex-direction:column}._border_1030v_39{border-left:.25rem solid;border-color:var(--ds-color-surface-tinted);flex-grow:1}._border_1030v_39{border-color:var(--ds-color-surface-active);border-width:.125rem;flex-grow:1;transition:border-color .5s ease-out}._border_1030v_39[data-variant=hidden]{display:none}._border_1030v_39[data-variant=strong]{border-width:2px;border-style:solid}._border_1030v_39[data-variant=solid]{border-width:1px;border-style:solid}._border_1030v_39[data-variant=dashed]{border-width:1px;border-style:dashed}._border_1030v_39[data-loading=true]{border-width:1px;border-style:dashed;border-color:var(--ds-color-border-subtle)}
+._section_4e55r_1{width:100%;display:flex;column-gap:.5rem;min-height:1.5rem}._sidebar_4e55r_8{flex-shrink:0;flex-grow:0;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:.375rem;width:1.5rem}._sidebar_4e55r_8[data-level="2"]{width:1.5rem}@media (min-width: 1024px){._sidebar_4e55r_8{width:2.25rem}._sidebar_4e55r_8[data-level="2"]{width:1.5rem}}._content_4e55r_33{flex-grow:1;min-width:0;display:flex;flex-direction:column}._border_4e55r_40{border-left:.25rem solid;border-color:var(--ds-color-surface-tinted);flex-grow:1}._border_4e55r_40{border-color:var(--ds-color-surface-active);border-width:.125rem;flex-grow:1;transition:border-color .5s ease-out}._border_4e55r_40[data-variant=hidden]{display:none}._border_4e55r_40[data-variant=strong]{border-width:2px;border-style:solid}._border_4e55r_40[data-variant=solid]{border-width:1px;border-style:solid}._border_4e55r_40[data-variant=dashed]{border-width:1px;border-style:dashed}._border_4e55r_40[data-loading=true]{border-width:1px;border-style:dashed;border-color:var(--ds-color-border-subtle)}

package/dist/components/Dialog/DialogLayout.js

@@ -1,28 +1,28 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import { ContextMenu as p } from "../ContextMenu/ContextMenu.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { PageBase as p } from "../Page/PageBase.js";
-import { PageNav as l } from "../Page/PageNav.js";
-import { PageMenu as d } from "../Page/PageMenu.js";
+import { PageBase as l } from "../Page/PageBase.js";
+import { PageNav as d } from "../Page/PageNav.js";
+import { PageMenu as c } from "../Page/PageMenu.js";
 import { Section as m } from "../Page/Section.js";
-const v = ({ backButton: e, contextMenu: t, pageMenu: r, children: s }) => /* @__PURE__ */ i(p, { theme: "subtle", spacing: 0, bleed: !0, children: [
+const w = ({ backButton: e, contextMenu: t, pageMenu: r, children: s, color: a }) => /* @__PURE__ */ i(l, { theme: "subtle", spacing: 0, color: a, bleed: !0, children: [
   /* @__PURE__ */ i(m, { theme: "default", shadow: "xs", children: [
     /* @__PURE__ */ o(
-      l,
+      d,
       {
         color: "neutral",
         padding: 2,
         backButton: e,
-        controls: t && /* @__PURE__ */ o(a, { ...t })
+        controls: t && /* @__PURE__ */ o(p, { ...t })
       }
     ),
     /* @__PURE__ */ o(m, { as: "article", padding: "page", spacing: 6, children: s })
   ] }),
-  /* @__PURE__ */ o(d, { items: r == null ? void 0 : r.items })
+  /* @__PURE__ */ o(c, { items: r == null ? void 0 : r.items })
 ] });
 export {
-  v as DialogLayout
+  w as DialogLayout
 };

package/dist/components/Dialog/DialogListItem.js

@@ -2,12 +2,12 @@ import { jsx as a, jsxs as c } from "react/jsx-runtime";
 import { Badge as K } from "../Badge/Badge.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Heading as j } from "../Typography/Heading.js";
+import { Heading as u } from "../Typography/Heading.js";
 import "../RootProvider/RootProvider.js";
 import { DialogMetadata as O } from "./DialogMetadata.js";
 import { DialogByline as P } from "./DialogByline.js";
 import { MetaItem as Q } from "../Metadata/MetaItem.js";
-import { ListItem as u } from "../List/ListItem.js";
+import { ListItem as b } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_title_jg0tu_27", U = "_controls_jg0tu_58", X = "_header_jg0tu_65", Y = "_summary_jg0tu_82", Z = "_footer_jg0tu_96", $ = "_seenBy_jg0tu_101", z = "_heading_jg0tu_108", t = {
   border: S,
@@ -19,16 +19,16 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
   seenBy: $,
   heading: z
 }, _a = ({
-  size: e = "xl",
+  size: r = "xl",
   state: W = "normal",
-  loading: r,
+  loading: e,
   controls: x,
   select: aa,
   selected: o,
   status: s,
-  extendedStatusLabel: N,
+  extendedStatusLabel: g,
   sender: l,
-  recipient: b,
+  recipient: N,
   recipientLabel: v = "to",
   grouped: y = !1,
   updatedAt: B,
@@ -49,63 +49,65 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
   receivedCount: C,
   attachmentsCount: E,
   attachmentsLabel: F,
-  title: n,
+  title: m,
   description: G,
-  summary: m,
-  highlightWords: i,
+  summary: i,
+  highlightWords: n,
   variant: J = "default",
   id: h,
   ...f
 }) => {
-  const g = o ? "tinted" : J;
-  return e === "xs" || e === "sm" ? /* @__PURE__ */ a(
-    u,
+  const j = o ? "tinted" : J;
+  return r === "xs" || r === "sm" ? /* @__PURE__ */ a(
+    b,
     {
       ...f,
       id: h,
-      size: e,
+      size: r,
       selected: o,
-      variant: g,
-      ariaLabel: n,
+      variant: j,
+      ariaLabel: m,
+      disabled: e,
       icon: l,
-      title: n,
-      description: m || G,
-      highlightWords: i
+      title: m,
+      description: i || G,
+      highlightWords: n
     }
   ) : /* @__PURE__ */ a(
-    u,
+    b,
     {
       ...f,
       id: h,
-      size: e,
+      size: r,
       selected: o,
-      variant: g,
+      variant: j,
       controls: /* @__PURE__ */ a("div", { className: t.controls, children: x }),
-      title: n,
+      title: m,
+      disabled: e,
       label: /* @__PURE__ */ c(
         "div",
         {
           className: t.border,
           "data-selected": o,
           "data-status": s == null ? void 0 : s.value,
-          "data-size": e,
+          "data-size": r,
           "data-unread": _,
           "data-archived": D,
           "data-trashed": M,
-          "data-loading": r,
+          "data-loading": e,
           children: [
-            /* @__PURE__ */ c("header", { className: t.header, "data-size": e, children: [
+            /* @__PURE__ */ c("header", { className: t.header, "data-size": r, children: [
               /* @__PURE__ */ c("span", { className: t.heading, children: [
                 /* @__PURE__ */ a(
-                  j,
+                  u,
                   {
                     as: "h2",
-                    highlightWords: i,
+                    highlightWords: n,
                     weight: _ ? "bold" : "normal",
-                    loading: r,
+                    loading: e,
                     maxRows: 2,
                     className: t.title,
-                    children: n
+                    children: m
                   }
                 ),
                 d && /* @__PURE__ */ a(K, { variant: "tinted", size: "xs", ...d })
@@ -114,23 +116,23 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
                 P,
                 {
                   size: "xs",
-                  loading: r,
+                  loading: e,
                   sender: l,
-                  recipient: b,
+                  recipient: N,
                   recipientLabel: v,
                   grouped: y
                 }
               ),
-              m && /* @__PURE__ */ a(
-                j,
+              i && /* @__PURE__ */ a(
+                u,
                 {
                   as: "h3",
-                  highlightWords: i,
+                  highlightWords: n,
                   weight: "normal",
                   className: t.summary,
-                  loading: r,
+                  loading: e,
                   maxRows: 2,
-                  children: m
+                  children: i
                 }
               )
             ] }),
@@ -138,9 +140,9 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
               O,
               {
                 className: t.footer,
-                loading: r,
+                loading: e,
                 status: s,
-                extendedStatusLabel: N,
+                extendedStatusLabel: g,
                 draftsLabel: q,
                 sentCount: A,
                 receivedCount: C,

package/dist/components/Modal/ModalHeader.js

@@ -1,41 +1,50 @@
 import { jsx as r, jsxs as e } from "react/jsx-runtime";
 import { c as p } from "../../index-L8X2o7IH.js";
 import "react";
-import { Heading as s } from "../Typography/Heading.js";
-import { IconButton as h } from "../Button/IconButton.js";
+import { Heading as m } from "../Typography/Heading.js";
+import { IconButton as l } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as o } from "../Page/Flex.js";
-import { Section as f } from "../Page/Section.js";
-import { ModalIcon as g } from "./ModalIcon.js";
+import { Section as g } from "../Page/Section.js";
+import { ModalIcon as f } from "./ModalIcon.js";
 import { S as y } from "../../XMark-tKk6aExO.js";
-import '../../assets/ModalHeader.css';const x = "_header_7ty99_1", k = "_sticky_7ty99_6", a = {
-  header: x,
-  sticky: k
+import '../../assets/ModalHeader.css';const u = "_header_7ty99_1", x = "_sticky_7ty99_6", s = {
+  header: u,
+  sticky: x
 }, A = ({
-  title: t,
-  description: i,
-  icon: n,
-  onClose: c,
-  closeTitle: m,
+  title: c,
+  description: t,
+  icon: a,
+  onClose: i,
+  closeTitle: n,
   children: d,
-  sticky: l = !0
-}) => /* @__PURE__ */ r(f, { as: "header", spacing: 2, padding: 4, className: p(a.header, l && a.sticky), children: /* @__PURE__ */ e(o, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
+  sticky: h = !0
+}) => /* @__PURE__ */ r(g, { as: "header", spacing: 2, padding: 4, className: p(s.header, h && s.sticky), children: /* @__PURE__ */ e(o, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
   d || /* @__PURE__ */ e(o, { direction: "row", align: "center", spacing: 3, children: [
-    n && /* @__PURE__ */ r(g, { icon: n }),
+    a && /* @__PURE__ */ r(f, { icon: a }),
     /* @__PURE__ */ e(o, { direction: "col", spacing: 0, children: [
-      t && /* @__PURE__ */ r(s, { as: "h2", size: i ? "md" : "lg", children: t }),
-      i && /* @__PURE__ */ r(s, { as: "h3", size: "xs", weight: "normal", children: i })
+      c && /* @__PURE__ */ r(m, { as: "h2", size: t ? "md" : "lg", children: c }),
+      t && /* @__PURE__ */ r(m, { as: "h3", size: "xs", weight: "normal", children: t })
     ] })
   ] }),
-  typeof c == "function" && /* @__PURE__ */ r(
-    h,
+  (i || n) && /* @__PURE__ */ r(
+    "form",
     {
-      icon: y,
-      variant: "outline",
-      onClick: c,
-      iconAltText: m ?? "Close",
-      size: "sm"
+      method: "dialog",
+      onSubmit: () => {
+        i == null || i();
+      },
+      children: /* @__PURE__ */ r(
+        l,
+        {
+          type: "submit",
+          icon: y,
+          variant: "outline",
+          iconAltText: n ?? "Close",
+          size: "sm"
+        }
+      )
     }
   )
 ] }) });

package/dist/components/Timeline/TimelineBase.js

@@ -5,7 +5,7 @@ import "../RootProvider/RootProvider.js";
 import { TimelineIcon as v } from "./TimelineIcon.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as x } from "../Page/Flex.js";
-import '../../assets/TimelineBase.css';const N = "_section_1030v_1", f = "_sidebar_1030v_8", h = "_content_1030v_33", j = "_border_1030v_39", e = {
+import '../../assets/TimelineBase.css';const N = "_section_4e55r_1", f = "_sidebar_4e55r_8", h = "_content_4e55r_33", j = "_border_4e55r_40", e = {
   section: N,
   sidebar: f,
   content: h,
@@ -16,17 +16,17 @@ import '../../assets/TimelineBase.css';const N = "_section_1030v_1", f = "_sideb
   border: a = "solid",
   borderColor: c,
   level: d = 1,
-  color: s,
-  icon: r,
+  color: r,
+  icon: s,
   iconColor: m,
   iconTheme: l,
   children: _,
   id: b,
   ...p
-}) => /* @__PURE__ */ i(x, { as: n, className: e.section, color: s, ...p, id: b, children: [
+}) => /* @__PURE__ */ i(x, { as: n, className: e.section, color: r, ...p, id: b, children: [
   /* @__PURE__ */ i("aside", { className: e.sidebar, "data-level": d, children: [
-    r && /* @__PURE__ */ t(v, { loading: o, icon: r, theme: l, color: m, size: "sm" }),
-    /* @__PURE__ */ t("div", { className: e.border, "data-loading": o, "data-variant": a, "data-color": c || s })
+    s && /* @__PURE__ */ t(v, { loading: o, icon: s, theme: l, color: m, size: "sm" }),
+    /* @__PURE__ */ t("div", { className: e.border, "data-loading": o, "data-variant": a, "data-color": c || r })
   ] }),
   /* @__PURE__ */ t("div", { className: e.content, children: _ })
 ] });

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

@@ -13,5 +13,6 @@ export interface IconButtonProps {
     onClick?: MouseEventHandler;
     dataTestId?: string;
     onBlurCapture?: React.FocusEventHandler<HTMLButtonElement>;
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
 }
 export declare const IconButton: ({ variant, rounded, size, icon, iconSize, iconAltText, color, className, selected, onClick, dataTestId, onBlurCapture, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogDetails.stories.d.ts

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DialogDetails: Story;

package/dist/types/lib/components/Dialog/DialogLayout.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BackButtonProps, ContextMenuProps, PageMenuProps } from '..';
+import { BackButtonProps, Color, ContextMenuProps, PageMenuProps } from '..';
 export interface DialogLayoutProps {
     /** Back button */
     backButton?: BackButtonProps;
@@ -9,8 +9,10 @@ export interface DialogLayoutProps {
     pageMenu?: PageMenuProps;
     /** Children */
     children?: ReactNode;
+    /** Color for override **/
+    color?: Color | undefined;
 }
 /**
  * Dialog layout with navigation,
  */
-export declare const DialogLayout: ({ backButton, contextMenu, pageMenu, children }: DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogLayout: ({ backButton, contextMenu, pageMenu, children, color }: DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogLayout.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ backButton, contextMenu, pageMenu, children }: import('./DialogLayout').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ backButton, contextMenu, pageMenu, children, color }: import('./DialogLayout').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
 };

package/dist/types/lib/components/Dialog/DialogList.stories.d.ts

@@ -18,3 +18,4 @@ export declare const SearchResults: Story;
 export declare const SingleGroup: Story;
 export declare const Ungrouped: Story;
 export declare const WithExtendedStatus: Story;
+export declare const Loading: Story;

package/dist/types/lib/components/Modal/ModalHeader.d.ts

@@ -5,6 +5,7 @@ export interface ModalHeaderProps {
     description?: string;
     icon?: ModalIconProps['icon'];
     closeTitle?: string;
+    /** Optional: still useful for side effects; dialog close itself is handled by form submit */
     onClose?: () => void;
     children?: ReactNode;
     sticky?: boolean;

package/dist/types/lib/stories/Dialog/Dialog.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ backButton, contextMenu, pageMenu, children }: import('../../components').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ backButton, contextMenu, pageMenu, children, color }: import('../../components').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -8,6 +8,7 @@ declare const meta: {
         contextMenu?: import('../../components').ContextMenuProps;
         pageMenu?: import('../../components').PageMenuProps;
         children?: React.ReactNode;
+        color?: import('../../types').Color | undefined;
     };
 };
 export default meta;

package/package.json

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