@altinn/altinn-components 0.7.2 → 0.7.3

package/dist/components/Dialog/{DialogSummary.d.ts → DialogDescription.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { DialogListItemSize } from './DialogListItem';
-export interface DialogSummaryProps {
+export interface DialogDescriptionProps {
     size: DialogListItemSize;
     className?: string;
     loading?: boolean;
@@ -9,4 +9,4 @@ export interface DialogSummaryProps {
 /**
  * Dialog summary
  */
-export declare const DialogSummary: ({ size, loading, children }: DialogSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogDescription: ({ size, loading, children }: DialogDescriptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogDescription.js

@@ -0,0 +1,8 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Skeleton as t } from "../Skeleton/Skeleton.js";
+import '../../assets/DialogDescription.css';const a = "_summary_1sruo_1", e = {
+  summary: a
+}, c = ({ size: r = "lg", loading: m, children: o }) => /* @__PURE__ */ s("p", { "data-size": r, className: e.summary, children: /* @__PURE__ */ s(t, { loading: m, children: o }) });
+export {
+  c as DialogDescription
+};

package/dist/components/Dialog/DialogListItem.d.ts

@@ -10,6 +10,8 @@ export type DialogListItemVariant = 'neutral' | 'draft' | 'trashed' | 'archived'
 export interface DialogListItemProps extends ListItemBaseProps {
     /** Dialog title */
     title: string;
+    /** Dialog description */
+    description?: string;
     /** Dialog is loading */
     loading?: boolean;
     /** Render as */
@@ -32,8 +34,6 @@ export interface DialogListItemProps extends ListItemBaseProps {
     recipient?: DialogRecipientProps;
     /** Group view, show avatar for recipient */
     grouped?: boolean;
-    /** Dialog summary */
-    summary?: string;
     /** Updated datetime */
     updatedAt?: string;
     /** Updated at label */
@@ -70,4 +70,4 @@ export interface DialogListItemProps extends ListItemBaseProps {
  * summary, sender, and receiver.
  * to mark the item as checked/unchecked and can visually indicate if it is unread.
  */
-export declare const DialogListItem: ({ size, variant, loading, select, status, sender, recipient, grouped, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, summary, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogListItem: ({ size, variant, loading, select, status, sender, recipient, grouped, updatedAt, updatedAtLabel, archivedAt, archivedAtLabel, trashedAt, trashedAtLabel, label, dueAt, dueAtLabel, seen, seenBy, touchedBy, attachmentsCount, title, description, ...rest }: DialogListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/DialogListItem.js

@@ -1,18 +1,18 @@
 import { jsx as t, jsxs as e } from "react/jsx-runtime";
-import { ListItemBase as h } from "../List/ListItemBase.js";
+import { ListItemBase as n } from "../List/ListItemBase.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../Icon/SvgIcon.js";
-import { ListItemLabel as M } from "../List/ListItemLabel.js";
-import { DialogBorder as d } from "./DialogBorder.js";
-import { DialogMetadata as D } from "./DialogMetadata.js";
+import { ListItemLabel as S } from "../List/ListItemLabel.js";
+import { DialogBorder as D } from "./DialogBorder.js";
+import { DialogMetadata as u } from "./DialogMetadata.js";
 import { DialogHeaderBase as V } from "./DialogHeaderBase.js";
 import { DialogHeadings as k } from "./DialogHeadings.js";
 import { DialogTitle as q } from "./DialogTitle.js";
 import { DialogTouchedBy as w } from "./DialogTouchedBy.js";
 import { DialogSelect as C } from "./DialogSelect.js";
 import "../RootProvider/RootProvider.js";
-import { DialogSummary as E } from "./DialogSummary.js";
+import { DialogDescription as E } from "./DialogDescription.js";
 import '../../assets/DialogListItem.css';const F = "_item_v64fv_1", G = "_select_v64fv_16", J = "_summary_v64fv_23", K = "_footer_v64fv_44", O = "_touchedBy_v64fv_52", P = "_border_v64fv_61", m = {
   item: F,
   select: G,
@@ -22,10 +22,10 @@ import '../../assets/DialogListItem.css';const F = "_item_v64fv_1", G = "_select
   border: P
 }, cr = ({
   size: r = "lg",
-  variant: u = "neutral",
+  variant: y = "neutral",
   loading: o,
   select: s,
-  status: y,
+  status: d,
   sender: B,
   recipient: N,
   grouped: b,
@@ -39,37 +39,37 @@ import '../../assets/DialogListItem.css';const F = "_item_v64fv_1", G = "_select
   dueAt: j,
   dueAtLabel: H,
   seen: c = !1,
-  seenBy: S,
+  seenBy: T,
   touchedBy: _,
-  attachmentsCount: T,
+  attachmentsCount: g,
   title: p,
-  summary: n,
-  ...v
+  description: v,
+  ...h
 }) => {
-  const g = f ? "trashed" : l ? "archived" : u;
-  return r === "xs" || r === "sm" ? /* @__PURE__ */ t(h, { ...v, loading: o, size: r, className: m.item, children: /* @__PURE__ */ e(d, { className: m.border, size: r, seen: c, loading: o, children: [
-    /* @__PURE__ */ t(M, { loading: o, size: r, title: p, description: n }),
-    /* @__PURE__ */ t(D, { loading: o, updatedAt: a, updatedAtLabel: i })
+  const M = f ? "trashed" : l ? "archived" : y;
+  return r === "xs" || r === "sm" ? /* @__PURE__ */ t(n, { ...h, loading: o, size: r, className: m.item, children: /* @__PURE__ */ e(D, { className: m.border, size: r, seen: c, loading: o, children: [
+    /* @__PURE__ */ t(S, { loading: o, size: r, title: p, description: v }),
+    /* @__PURE__ */ t(u, { loading: o, updatedAt: a, updatedAtLabel: i })
   ] }) }) : /* @__PURE__ */ t(
-    h,
+    n,
     {
-      ...v,
+      ...h,
       loading: o,
       size: r,
       className: m.item,
       controls: s && /* @__PURE__ */ t(C, { className: m.select, ...s }),
-      children: /* @__PURE__ */ e(d, { className: m.border, size: r, seen: c, loading: o, children: [
+      children: /* @__PURE__ */ e(D, { className: m.border, size: r, seen: c, loading: o, children: [
         /* @__PURE__ */ e(V, { size: r, children: [
-          /* @__PURE__ */ t(q, { loading: o, size: r, variant: g, label: L, seen: c, children: p }),
+          /* @__PURE__ */ t(q, { loading: o, size: r, variant: M, label: L, seen: c, children: p }),
           /* @__PURE__ */ t(k, { loading: o, size: r, grouped: b, sender: B, recipient: N })
         ] }),
-        /* @__PURE__ */ t(E, { loading: o, size: r, children: n }),
+        /* @__PURE__ */ t(E, { loading: o, size: r, children: v }),
         /* @__PURE__ */ e("footer", { "data-size": r, className: m.footer, children: [
           /* @__PURE__ */ t(
-            D,
+            u,
             {
               loading: o,
-              status: y,
+              status: d,
               updatedAt: a,
               updatedAtLabel: i,
               archivedAt: l,
@@ -78,8 +78,8 @@ import '../../assets/DialogListItem.css';const F = "_item_v64fv_1", G = "_select
               trashedAtLabel: I,
               dueAt: j,
               dueAtLabel: H,
-              seenBy: S,
-              attachmentsCount: T
+              seenBy: T,
+              attachmentsCount: g
             }
           ),
           _ && /* @__PURE__ */ t(w, { loading: o, size: "xs", touchedBy: _, className: m.touchedBy })

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

@@ -32,4 +32,4 @@ export interface ListItemProps extends ListItemBaseProps {
     /** Child items */
     items?: ListItemProps[];
 }
-export declare const ListItem: ({ as, color, loading, size, icon, avatar, avatarGroup, title, description, children, collapsible, expanded, badge, linkText, linkIcon, menu, select, controls, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ as, color, loading, size, icon, avatar, avatarGroup, title, description, collapsible, expanded, badge, linkText, linkIcon, menu, select, controls, children, ...rest }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/ListItem.js

@@ -13,15 +13,15 @@ const D = ({
   avatarGroup: p,
   title: s,
   description: I,
-  children: L,
   collapsible: m,
-  expanded: a,
-  badge: f,
-  linkText: l,
-  linkIcon: h,
-  menu: k,
-  select: b,
-  controls: d,
+  expanded: L,
+  badge: a,
+  linkText: f,
+  linkIcon: l,
+  menu: h,
+  select: k,
+  controls: b,
+  children: d,
   ...u
 }) => /* @__PURE__ */ t(
   v,
@@ -30,10 +30,10 @@ const D = ({
     size: r,
     color: n,
     loading: o,
-    select: b,
-    controls: d || /* @__PURE__ */ t(x, { linkIcon: m && a ? "chevron-up" : m ? "chevron-down" : h, linkText: l, menu: k, badge: f }),
+    select: k,
+    controls: b || /* @__PURE__ */ t(x, { linkIcon: m && L ? "chevron-up" : m ? "chevron-down" : l, linkText: f, menu: h, badge: a }),
     ...u,
-    children: /* @__PURE__ */ t(j, { loading: o, size: r, icon: i, avatar: c, avatarGroup: p, children: /* @__PURE__ */ t(w, { loading: o, title: s, description: I, size: r, children: L }) })
+    children: /* @__PURE__ */ t(j, { loading: o, size: r, icon: i, avatar: c, avatarGroup: p, children: /* @__PURE__ */ t(w, { loading: o, title: s, description: I, size: r, children: d }) })
   }
 );
 export {

package/dist/components/Searchbar/Autocomplete.d.ts

@@ -5,5 +5,6 @@ export interface AutocompleteProps {
     groups?: Record<string, AutocompleteGroupProps>;
     expanded?: boolean;
     className?: string;
+    onSelect?: () => void;
 }
 export declare const Autocomplete: ({ className, items, groups, expanded }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Searchbar/Autocomplete.stories.js

@@ -31,7 +31,10 @@ const o = {
         id: "1a",
         type: "scope",
         href: "#",
-        label: "Skriv minst 3 tegn for søke i innboks"
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "sk" }),
+          " i innboks"
+        ] })
       },
       {
         id: "1b",
@@ -44,11 +47,11 @@ const o = {
       }
     ]
   }
-}, a = {
+}, r = {
   args: {
     groups: {
       3: {
-        title: "Mest relevante treff"
+        title: "Anbefalte treff"
       }
     },
     items: [
@@ -58,7 +61,7 @@ const o = {
         type: "scope",
         href: "#",
         badge: {
-          label: "2 treff"
+          label: "24 treff"
         },
         label: () => /* @__PURE__ */ e("span", { children: [
           /* @__PURE__ */ t("mark", { children: "skatt" }),
@@ -81,7 +84,7 @@ const o = {
         type: "dialog",
         href: "#",
         title: "Skattemeldingen 2023",
-        summary: "Skattemeldingen er klar for innsending."
+        description: "Skattemeldingen er klar for innsending."
       },
       {
         id: "2b",
@@ -89,15 +92,82 @@ const o = {
         type: "dialog",
         href: "#",
         title: "Skatteoppgjør 2022",
-        summary: "Skatteoppgjøret ditt er klart."
+        description: "Skatteoppgjøret ditt er klart."
+      },
+      {
+        id: "2c",
+        groupId: "3",
+        type: "dialog",
+        href: "#",
+        title: "Skatteoppgjør 2020",
+        description: "Skatteoppgjøret ditt er ferdigstilt."
       }
     ]
   }
-}, r = {
+}, g = {
   args: {
-    ...a.args,
+    groups: {
+      3: {
+        title: "Søker etter «skatt» ..."
+      }
+    },
+    items: r.args.items.map((a) => a.groupId === "3" ? {
+      ...a,
+      type: null,
+      icon: "inbox",
+      loading: !0
+    } : a)
+  }
+}, k = {
+  args: {
+    ...r.args,
+    groups: {
+      noHits: {
+        title: "Ingen treff"
+      }
+    },
     items: [
-      ...a.args.items,
+      {
+        id: "1a",
+        groupId: "1",
+        type: "scope",
+        href: "#",
+        disabled: !0,
+        badge: {
+          label: "Ingen treff"
+        },
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i innboks"
+        ] })
+      },
+      {
+        id: "1b",
+        groupId: "1",
+        type: "scope",
+        href: "#",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " i hele Altinn"
+        ] })
+      },
+      {
+        groupId: "noHits",
+        id: "2a",
+        type: "information",
+        label: () => /* @__PURE__ */ e("span", { children: [
+          "Søk etter ",
+          /* @__PURE__ */ t("mark", { children: "skatt" }),
+          " ga ingen treff."
+        ] })
+      }
+    ]
+  }
+}, i = {
+  args: {
+    ...r.args,
+    items: [
+      ...r.args.items,
       {
         id: "2c",
         groupId: "4",
@@ -116,7 +186,7 @@ const o = {
       }
     ]
   }
-}, i = {
+}, c = {
   args: {
     groups: {
       2: {
@@ -188,9 +258,9 @@ const o = {
       }
     ]
   }
-}, g = {
+}, f = {
   args: {
-    ...r.args,
+    ...i.args,
     groups: {
       2: {
         title: "Søkeforslag"
@@ -200,7 +270,7 @@ const o = {
       }
     },
     items: [
-      ...r.args.items,
+      ...i.args.items,
       {
         id: "2a",
         groupId: "2",
@@ -242,59 +312,15 @@ const o = {
       }
     ]
   }
-}, k = {
-  args: {
-    ...i.args,
-    groups: {
-      noHits: {
-        title: "Ingen treff"
-      }
-    },
-    items: [
-      {
-        id: "1a",
-        groupId: "1",
-        type: "scope",
-        href: "#",
-        disabled: !0,
-        badge: {
-          label: "Ingen treff"
-        },
-        label: () => /* @__PURE__ */ e("span", { children: [
-          /* @__PURE__ */ t("mark", { children: "skatt" }),
-          " i innboks"
-        ] })
-      },
-      {
-        id: "1b",
-        groupId: "1",
-        type: "scope",
-        href: "#",
-        label: () => /* @__PURE__ */ e("span", { children: [
-          /* @__PURE__ */ t("mark", { children: "skatt" }),
-          " i hele Altinn"
-        ] })
-      },
-      {
-        groupId: "noHits",
-        id: "2a",
-        type: "information",
-        label: () => /* @__PURE__ */ e("span", { children: [
-          "Søk etter ",
-          /* @__PURE__ */ t("mark", { children: "skatt" }),
-          " ga ingen treff."
-        ] })
-      }
-    ]
-  }
 };
 export {
+  g as LoadingResults,
   k as NoHits,
   p as Scopes,
-  r as ScopesAndMixedResults,
-  a as ScopesAndResults,
-  i as ScopesAndSuggestions,
-  g as ScopesResultsAndSuggestions,
+  i as ScopesAndMixedResults,
+  r as ScopesAndResults,
+  c as ScopesAndSuggestions,
+  f as ScopesResultsAndSuggestions,
   d as TooFewWords,
   o as default
 };

package/dist/components/Searchbar/AutocompleteItem.js

@@ -1,24 +1,24 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import { DialogListItem as r } from "../Dialog/DialogListItem.js";
-import { ListItem as n } from "../List/ListItem.js";
-import { BookmarksListItem as i } from "../Bookmarks/BookmarksListItem.js";
-import { ScopeListItem as e } from "./ScopeListItem.js";
+import { ListItem as o } from "../List/ListItem.js";
+import { BookmarksListItem as n } from "../Bookmarks/BookmarksListItem.js";
+import { ScopeListItem as i } from "./ScopeListItem.js";
 const h = ({ type: m, ...t }) => {
   switch (m) {
     case "scope":
-      return /* @__PURE__ */ o(e, { ...t, shadow: "none", tabIndex: -1 });
-    case "information":
-      return /* @__PURE__ */ o(e, { ...t, shadow: "none", tabIndex: -1 });
+      return /* @__PURE__ */ e(i, { ...t, shadow: "none", tabIndex: -1 });
     case "bookmark":
-      return /* @__PURE__ */ o(i, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
+      return /* @__PURE__ */ e(n, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
     case "dialog":
-      return /* @__PURE__ */ o(r, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
+      return /* @__PURE__ */ e(r, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
+    case "information":
+      return /* @__PURE__ */ e(o, { ...t, shadow: "none", tabIndex: -1, disabled: !0 });
     default:
-      return /* @__PURE__ */ o(n, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
+      return /* @__PURE__ */ e(o, { ...t, shadow: "none", size: "sm", tabIndex: -1 });
   }
 };
 export {

package/dist/components/Searchbar/Searchbar.d.ts

@@ -6,4 +6,4 @@ export interface SearchbarProps extends SearchFieldProps {
     expanded: boolean;
     tabIndex?: number;
 }
-export declare const Searchbar: ({ className, autocomplete, expanded, onClose, tabIndex, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Searchbar: ({ className, autocomplete, expanded, onClose, onEnter, tabIndex, ...search }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Searchbar/Searchbar.js

@@ -1,18 +1,19 @@
-import { jsxs as e, jsx as m } from "react/jsx-runtime";
-import { Autocomplete as f } from "./Autocomplete.js";
-import { SearchField as a } from "./SearchField.js";
-import { SearchbarBase as h } from "./SearchbarBase.js";
-const j = ({
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import { Autocomplete as a } from "./Autocomplete.js";
+import { SearchField as h } from "./SearchField.js";
+import { SearchbarBase as l } from "./SearchbarBase.js";
+const n = ({
   className: t,
   autocomplete: r,
   expanded: o = !1,
   onClose: i,
-  tabIndex: s,
-  ...c
-}) => /* @__PURE__ */ e(h, { className: t, expanded: o, autocomplete: !!r, children: [
-  /* @__PURE__ */ m(a, { ...c, expanded: o, onClose: i, tabIndex: s }),
-  r && /* @__PURE__ */ m(f, { ...r, expanded: o })
+  onEnter: s,
+  tabIndex: c,
+  ...e
+}) => /* @__PURE__ */ f(l, { className: t, expanded: o, autocomplete: !!r, children: [
+  /* @__PURE__ */ m(h, { ...e, expanded: o, onClose: i, onEnter: s, tabIndex: c }),
+  r && /* @__PURE__ */ m(a, { ...r, expanded: o })
 ] });
 export {
-  j as Searchbar
+  n as Searchbar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

package/dist/components/Dialog/DialogSummary.js

@@ -1,8 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Skeleton as a } from "../Skeleton/Skeleton.js";
-import '../../assets/DialogSummary.css';const t = "_summary_1sruo_1", e = {
-  summary: t
-}, n = ({ size: r = "lg", loading: s, children: o }) => /* @__PURE__ */ m("p", { "data-size": r, className: e.summary, children: /* @__PURE__ */ m(a, { loading: s, children: o }) });
-export {
-  n as DialogSummary
-};