@altinn/altinn-components 0.45.0 → 0.45.1

package/dist/components/Bookmarks/BookmarksListItem.js

@@ -1,22 +1,20 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { QueryLabel as i } from "../Searchbar/QueryLabel.js";
+import { QueryLabel as e } from "../Searchbar/QueryLabel.js";
 import { ListItem as s } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-const j = ({ loading: r, title: m, ariaLabel: e, params: o, icon: p, ...f }) => /* @__PURE__ */ t(
+const I = ({ loading: r, title: m, ariaLabel: t, params: p, ...i }) => /* @__PURE__ */ o(
   s,
   {
-    ...f,
+    ...i,
     loading: r,
-    icon: p,
     title: m,
-    ariaLabel: e,
-    description: !r && o && /* @__PURE__ */ t(i, { params: o }),
-    label: !m && !r && !o && /* @__PURE__ */ t(i, { params: o })
+    ariaLabel: t,
+    label: !m && !r && /* @__PURE__ */ o(e, { params: p })
   }
 );
 export {
-  j as BookmarksListItem
+  I as BookmarksListItem
 };

package/dist/components/Bookmarks/BookmarksSection.js

@@ -1,36 +1,40 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { createElement as a } from "react";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { createElement as f } from "react";
 import "../../index-L8X2o7IH.js";
-import { Typography as c } from "../Typography/Typography.js";
+import { Typography as h } from "../Typography/Typography.js";
 import { Heading as k } from "../Typography/Heading.js";
 import { BookmarksListItem as l } from "./BookmarksListItem.js";
-import { EditableBookmark as f } from "./EditableBookmark.js";
+import { EditableBookmark as x } from "./EditableBookmark.js";
 import "../RootProvider/RootProvider.js";
-import { List as t } from "../List/List.js";
+import { List as p } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as h } from "../Page/Section.js";
-const H = ({
+import { Section as z } from "../Page/Section.js";
+const U = ({
   loading: o,
-  title: m,
-  description: p,
-  items: e,
-  untitled: s = "Untitled bookmark",
-  titleField: n
-}) => /* @__PURE__ */ d(h, { padding: 6, spacing: 4, bleed: !0, children: [
-  /* @__PURE__ */ r(k, { size: "md", children: m }),
-  o ? /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(l, { title: m, loading: o, size: "sm" }) }) : e.length > 0 && /* @__PURE__ */ r(t, { spacing: "xs", children: e.map((i) => /* @__PURE__ */ a(
-    f,
+  title: e,
+  description: s,
+  items: t,
+  untitled: d = "Untitled bookmark",
+  titleField: a,
+  expandedId: n,
+  onToggle: m
+}) => /* @__PURE__ */ c(z, { padding: 6, theme: "surface-hover", spacing: 4, bleed: !0, children: [
+  /* @__PURE__ */ i(k, { size: "md", children: e }),
+  o ? /* @__PURE__ */ i(p, { children: /* @__PURE__ */ i(l, { title: e, loading: o, size: "sm" }) }) : t.length > 0 && /* @__PURE__ */ i(p, { spacing: "xs", children: t.map((r) => /* @__PURE__ */ f(
+    x,
     {
-      ...i,
-      key: i.id,
-      loading: o || i.loading,
-      untitled: s,
-      titleField: n,
+      ...r,
+      key: r.id,
+      loading: o || r.loading,
+      onToggle: () => m == null ? void 0 : m(r.id),
+      expanded: n === r.id,
+      untitled: d,
+      titleField: a,
       size: "sm"
     }
   )) }),
-  /* @__PURE__ */ r(c, { size: "xs", children: p })
+  /* @__PURE__ */ i(h, { size: "xs", children: s })
 ] });
 export {
-  H as BookmarksSection
+  U as BookmarksSection
 };

package/dist/components/Bookmarks/EditableBookmark.js

@@ -1,89 +1,74 @@
-import { jsxs as s, Fragment as b, jsx as o } from "react/jsx-runtime";
-import { useState as g } from "react";
-import { Icon as d } from "../Icon/Icon.js";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { useState as b } from "react";
 import "../../index-L8X2o7IH.js";
-import { Button as u } from "../Button/Button.js";
-import { IconButton as C } from "../Button/IconButton.js";
-import { BookmarksListItem as L } from "./BookmarksListItem.js";
+import { Button as p } from "../Button/Button.js";
+import { IconButton as h } from "../Button/IconButton.js";
+import { BookmarksListItem as y } from "./BookmarksListItem.js";
 import "../RootProvider/RootProvider.js";
-import { QueryLabel as j } from "../Searchbar/QueryLabel.js";
-import { TextField as F } from "../Forms/TextField.js";
+import { QueryLabel as I } from "../Searchbar/QueryLabel.js";
+import { TextField as L } from "../Forms/TextField.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as x } from "../Page/Flex.js";
-import { SettingsModal as M } from "../Settings/SettingsModal.js";
-import { S as O } from "../../Pencil-BVHLEoQy.js";
-import { S as h } from "../../MagnifyingGlass-bwVhw07z.js";
-const U = ({
-  id: k,
-  title: t,
+import { Flex as d } from "../Page/Flex.js";
+import { Section as j } from "../Page/Section.js";
+import { S as v } from "../../XMark-tKk6aExO.js";
+import { S as T } from "../../Pencil-BVHLEoQy.js";
+const H = ({
+  id: g,
+  title: r,
   untitled: e,
-  params: m,
-  titleField: a,
-  saveButton: i,
-  removeButton: n,
-  inputValue: l,
-  onChange: c,
-  editIconAltText: S = "Edit",
-  ...v
+  params: n,
+  expanded: i,
+  onToggle: k,
+  titleField: s,
+  saveButton: t,
+  removeButton: m,
+  inputValue: a,
+  onChange: l,
+  expandIconAltText: S,
+  ...u
 }) => {
-  const [I, y] = g(""), [p, f] = g(!1), z = (r) => {
-    r.preventDefault(), r.stopPropagation(), f(!0);
-  }, E = () => {
-    f(!1);
-  };
-  return /* @__PURE__ */ s(b, { children: [
-    /* @__PURE__ */ o(
-      L,
-      {
-        ...v,
-        id: k,
-        title: t || e,
-        ariaLabel: t || e,
-        params: m,
-        icon: /* @__PURE__ */ o(d, { svgElement: h }),
-        linkIcon: !0,
-        controls: /* @__PURE__ */ o(
-          C,
+  const [x, z] = b("");
+  return /* @__PURE__ */ o(
+    y,
+    {
+      ...u,
+      expanded: i,
+      id: g,
+      title: i ? r || e : r,
+      ariaLabel: r || e,
+      params: n,
+      controls: /* @__PURE__ */ o(
+        h,
+        {
+          variant: "outline",
+          size: "xs",
+          icon: i ? v : T,
+          onClick: k,
+          iconAltText: S
+        }
+      ),
+      children: /* @__PURE__ */ f(j, { padding: 4, spacing: 4, children: [
+        /* @__PURE__ */ o(I, { params: n }),
+        s && /* @__PURE__ */ o(
+          L,
           {
-            variant: "outline",
-            size: "xs",
-            icon: O,
-            onClick: z,
-            iconAltText: S
-          }
-        )
-      }
-    ),
-    p && /* @__PURE__ */ o(
-      M,
-      {
-        icon: /* @__PURE__ */ o(d, { svgElement: h }),
-        title: t || e,
-        open: p,
-        onClose: E,
-        children: /* @__PURE__ */ s(x, { direction: "col", spacing: 4, children: [
-          /* @__PURE__ */ o(j, { params: m }),
-          a && /* @__PURE__ */ o(
-            F,
-            {
-              ...a,
-              size: "sm",
-              name: "title",
-              value: typeof l == "string" ? l : I,
-              onChange: (r) => {
-                typeof c == "function" ? c(r) : y(r.target.value);
-              }
+            ...s,
+            size: "sm",
+            name: "title",
+            value: typeof a == "string" ? a : x,
+            onChange: (c) => {
+              typeof l == "function" ? l(c) : z(c.target.value);
             }
-          ),
-          (i || n) && /* @__PURE__ */ s(x, { as: "footer", direction: "row", spacing: 2, children: [
-            i && /* @__PURE__ */ o(u, { ...i, size: "sm" }),
-            n && /* @__PURE__ */ o(u, { ...n, variant: "outline", size: "sm" })
-          ] })
+          }
+        ),
+        (t || m) && /* @__PURE__ */ f(d, { as: "footer", direction: "row", spacing: 2, children: [
+          t && /* @__PURE__ */ o(p, { ...t, size: "sm" }),
+          m && /* @__PURE__ */ o(p, { ...m, variant: "outline", size: "sm" })
         ] })
-      }
-    )
-  ] });
+      ] })
+    }
+  );
 };
 export {
-  U as EditableBookmark
+  H as EditableBookmark
 };

package/dist/types/lib/components/Bookmarks/BookmarksListItem.d.ts

@@ -3,6 +3,5 @@ export interface BookmarksListItemProps extends ListItemProps {
     /** Query params */
     params?: QueryItemProps[];
     ariaLabel?: string;
-    icon?: ListItemProps['icon'];
 }
-export declare const BookmarksListItem: ({ loading, title, ariaLabel, params, icon, ...rest }: BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BookmarksListItem: ({ loading, title, ariaLabel, params, ...rest }: BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bookmarks/BookmarksListItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, title, ariaLabel, params, icon, ...rest }: import('./BookmarksListItem').BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, title, ariaLabel, params, ...rest }: import('./BookmarksListItem').BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Bookmarks/BookmarksSection.d.ts

@@ -5,6 +5,8 @@ export interface BookmarksSectionProps {
     items: EditableBookmarkProps[];
     untitled?: string;
     titleField?: TextFieldProps;
+    expandedId?: string;
+    onToggle?: (id: string) => void;
     loading?: boolean;
 }
-export declare const BookmarksSection: ({ loading, title, description, items, untitled, titleField, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BookmarksSection: ({ loading, title, description, items, untitled, titleField, expandedId, onToggle, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bookmarks/BookmarksSection.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { BookmarksSectionProps } from './BookmarksSection';
 declare const meta: {
     title: string;
-    component: ({ loading, title, description, items, untitled, titleField, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, title, description, items, untitled, titleField, expandedId, onToggle, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -30,6 +30,7 @@ declare const meta: {
                 type: "filter";
                 label: string;
             })[];
+            expandIconAltText: string;
         } | {
             id: string;
             params: ({
@@ -46,6 +47,22 @@ declare const meta: {
                 label: string;
                 onClick: () => void;
             };
+            expandIconAltText: string;
+            title?: undefined;
+        } | {
+            id: string;
+            params: {
+                type: "filter";
+                label: string;
+            }[];
+            saveButton: {
+                label: string;
+            };
+            removeButton: {
+                label: string;
+                onClick?: undefined;
+            };
+            expandIconAltText: string;
             title?: undefined;
         })[];
     };
@@ -53,6 +70,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const ExpandedItem: Story;
 export declare const ControlledState: (args: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const LoadingState: Story;
 export declare const EmptyState: Story;

package/dist/types/lib/components/Bookmarks/EditableBookmark.d.ts

@@ -2,20 +2,24 @@ import { ButtonProps, TextFieldProps, BookmarksListItemProps, QueryItemProps } f
 export interface EditableBookmarkProps extends BookmarksListItemProps {
     /** Bookmark id */
     id: string;
-    /** Accessible label for the edit button icon */
-    editIconAltText?: string;
+    /** discernible text for expand icon */
+    expandIconAltText: string;
     /** Input value */
     inputValue?: string;
     /** On change */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /** Loading */
     loading?: boolean;
+    /** Expanded */
+    expanded?: boolean;
     /** Optional title */
     title?: string;
     /** Untitled */
     untitled?: string;
     /** Query params */
     params?: QueryItemProps[];
+    /** Toggle function */
+    onToggle?: () => void;
     /** Title field */
     titleField?: TextFieldProps;
     /** Save button */
@@ -25,4 +29,4 @@ export interface EditableBookmarkProps extends BookmarksListItemProps {
     /** Render as **/
     as?: React.ElementType;
 }
-export declare const EditableBookmark: ({ id, title, untitled, params, titleField, saveButton, removeButton, inputValue, onChange, editIconAltText, ...rest }: EditableBookmarkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditableBookmark: ({ id, title, untitled, params, expanded, onToggle, titleField, saveButton, removeButton, inputValue, onChange, expandIconAltText, ...rest }: EditableBookmarkProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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