@altinn/altinn-components 0.41.4 → 0.41.6

package/dist/hooks/useMenu.js

@@ -1,39 +1,39 @@
 "use client";
-import { useState as w, useMemo as x, useCallback as k, useEffect as m } from "react";
-import { useEnterKey as A } from "./useEnterKey.js";
-const L = ({
-  items: u,
+import { useState as w, useMemo as x, useCallback as k, useEffect as A } from "react";
+import { useEnterKey as D } from "./useEnterKey.js";
+const M = ({
+  items: s,
   groups: p,
-  groupByKey: a,
-  keyboardEvents: i = !1,
+  groupByKey: i,
+  keyboardEvents: a = !1,
   sortGroupBy: v,
-  onSelect: c,
-  ref: l
+  onSelect: l,
+  ref: c
 }) => {
-  const [f, s] = w(-1);
-  A((n) => {
-    if (i) {
-      const t = l && "current" in l ? l.current : null, e = t == null ? void 0 : t.querySelector('[data-active="true"]');
-      n.stopPropagation(), n.preventDefault(), e && (e.tagName === "A" && e.hasAttribute("href") ? e.click() : e.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), c == null || c();
+  const [d, u] = w(-1);
+  D((t) => {
+    if (a) {
+      const n = c && "current" in c ? c.current : null, e = n == null ? void 0 : n.querySelector('[data-active="true"]');
+      t.stopPropagation(), t.preventDefault(), e && (e.tagName === "A" && e.hasAttribute("href") ? e.click() : e.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), l == null || l();
     }
   });
   const h = x(() => {
-    const n = u.reduce(
+    const t = s.reduce(
       (e, o) => {
-        const r = a && o[a] ? o[a] : "ungrouped";
+        const r = i && o[i] ? o[i] : "ungrouped";
         return e[r] = e[r] || [], e[r].push(o), e;
       },
       {}
-    ), t = Object.values(n).flat();
-    return Object.entries(n).sort(v || (() => 0)).map(([e, o]) => ({
+    ), n = Object.values(t).flat().filter((e) => !(e != null && e.disabled));
+    return Object.entries(t).sort(v || (() => 0)).map(([e, o]) => ({
       items: o.map((r) => ({
-        menuIndex: t.indexOf(r),
-        active: f === t.indexOf(r),
-        onMouseEnter: i ? () => {
-          s(t.indexOf(r));
+        menuIndex: n.indexOf(r),
+        active: d === n.indexOf(r),
+        onMouseEnter: a ? () => {
+          u(n.indexOf(r));
         } : void 0,
-        onMouseLeave: i ? () => {
-          s(-1);
+        onMouseLeave: a ? () => {
+          u(-1);
         } : void 0,
         props: r
       })),
@@ -41,16 +41,16 @@ const L = ({
         ...p[e] || {}
       }
     }));
-  }, [u, a, f, p]), d = k(
-    (n) => {
-      n.key === "ArrowDown" ? (n.preventDefault(), s((t) => (t + 1) % u.length)) : n.key === "ArrowUp" && (n.preventDefault(), s((t) => (t - 1 + u.length) % u.length));
+  }, [s, i, d, p]), f = k(
+    (t) => {
+      t.key === "ArrowDown" ? (t.preventDefault(), u((n) => (n + 1) % s.length)) : t.key === "ArrowUp" && (t.preventDefault(), u((n) => (n - 1 + s.length) % s.length));
     },
-    [u.length]
+    [s.length]
   );
-  return m(() => (i && (s(0), document.addEventListener("keydown", d)), () => {
-    document.removeEventListener("keydown", d);
-  }), [d, i]), { menu: h, activeIndex: f, setActiveIndex: s };
+  return A(() => (a && (u(0), document.addEventListener("keydown", f)), () => {
+    document.removeEventListener("keydown", f);
+  }), [f, a]), { menu: h, activeIndex: d, setActiveIndex: u };
 };
 export {
-  L as useMenu
+  M as useMenu
 };

package/dist/types/lib/components/Account/AccountList.d.ts

@@ -10,4 +10,4 @@ export interface AccountListProps {
     emptyTitle?: string;
     emptyDescription?: string;
 }
-export declare const AccountList: ({ items, groups, sortGroupBy, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountList: ({ items, groups, sortGroupBy }: AccountListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Account/AccountList.stories.d.ts

@@ -3,7 +3,7 @@ import { AccountListItemProps, AccountListProps } from '..';
 import { UseAccountsProps } from '../../../examples';
 declare const meta: {
     title: string;
-    component: ({ items, groups, sortGroupBy, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: AccountListProps;

package/dist/types/lib/components/Account/AccountListItem.stories.d.ts

@@ -35,6 +35,7 @@ declare const meta: {
         icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         badge?: React.ReactNode | import('..').BadgeProps;
         linkIcon?: boolean | undefined;
+        ref?: React.Ref<HTMLElement> | undefined;
         interactive?: boolean | undefined;
         as?: React.ElementType | undefined;
         tabIndex?: number | undefined;

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

@@ -4,6 +4,7 @@ export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemBorder = 'none' | 'solid' | 'dotted';
 export type ListItemColor = Color;
 export interface ListItemBaseProps {
+    ref?: React.Ref<HTMLElement>;
     /** If true, the list item is interactive and has a hover state. */
     interactive?: boolean;
     /** The element type to render as. */
@@ -41,4 +42,4 @@ export interface ListItemBaseProps {
     /** Id of list item. */
     id?: string;
 }
-export declare const ListItemBase: ({ as, interactive, size, color, variant, shadow, border, hidden, selected, className, onMouseEnter, id, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ ref, as, interactive, size, color, variant, shadow, border, hidden, selected, className, onMouseEnter, id, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuBase.d.ts

@@ -31,6 +31,7 @@ export interface MenuListItemProps {
     children?: ReactNode;
     style?: React.CSSProperties;
     dataIndex?: number;
+    disabled?: boolean;
     onMouseEnter?: MouseEventHandler;
     onMouseLeave?: MouseEventHandler;
     ref?: HTMLUListElement;
@@ -38,4 +39,4 @@ export interface MenuListItemProps {
 }
 export declare const MenuBase: ({ as, color, variant, className, children, ref }: MenuBaseProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MenuList: ({ as, role, className, children, ref, onMouseEnter, onMouseLeave, onBlurCapture, }: MenuListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MenuListItem: ({ as, role, className, children, style, dataIndex, onMouseEnter, onMouseLeave, "aria-checked": ariaChecked, }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuListItem: ({ as, role, className, children, style, dataIndex, disabled, onMouseEnter, onMouseLeave, "aria-checked": ariaChecked, }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuItem.d.ts

@@ -15,7 +15,7 @@ export interface MenuItemProps extends MenuItemBaseProps {
     icon?: MenuItemIconProps['icon'];
     iconTheme?: MenuItemIconProps['theme'];
     iconBadge?: MenuItemIconProps['badge'];
-    badge?: BadgeProps | undefined;
+    badge?: BadgeProps | ReactNode | undefined;
     /** Custom controls */
     controls?: ReactNode;
     linkIcon?: boolean;

package/dist/types/lib/components/Menu/MenuItemLabel.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BadgeProps, HeadingProps } from '..';
+import { HeadingProps } from '..';
 import { MenuItemSize } from './MenuItemBase';
 export interface MenuItemLabelProps {
     className?: string;
@@ -9,8 +9,7 @@ export interface MenuItemLabelProps {
     highlightWords?: string[];
     title?: HeadingProps | ReactNode | string;
     description?: HeadingProps | ReactNode | string;
-    badge?: BadgeProps;
     children?: ReactNode;
 }
 export declare function getAriaLabelFromTitle(title: HeadingProps | ReactNode | string): string | undefined;
-export declare const MenuItemLabel: ({ className, size, title, badge, description, highlightWords, loading, children, }: MenuItemLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItemLabel: ({ className, size, title, description, highlightWords, loading, children, }: MenuItemLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuOption.d.ts

@@ -1,4 +1,4 @@
-import { BadgeProps, MenuItemProps } from '..';
+import { MenuItemProps } from '..';
 import { MenuItemBaseProps, MenuItemSize } from './MenuItemBase';
 export type MenuOptionType = 'checkbox' | 'radio';
 export interface MenuOptionProps extends MenuItemBaseProps {
@@ -10,11 +10,11 @@ export interface MenuOptionProps extends MenuItemBaseProps {
     groupId?: string;
     size?: MenuItemSize;
     name?: string;
-    badge?: BadgeProps | undefined;
+    count?: number;
     checked?: boolean;
     disabled?: boolean;
     type?: MenuOptionType;
     hidden?: boolean;
     role?: string;
 }
-export declare const MenuOption: ({ size, type, name, active, value, label, title, description, icon, badge, checked, disabled, onMouseEnter, onClick, role, ...rest }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuOption: ({ size, type, name, active, value, label, title, description, icon, count, checked, disabled, onMouseEnter, onClick, role, ...rest }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsItem.d.ts

@@ -1,6 +1,12 @@
-import { InputProps, SettingsItemBaseProps } from '..';
+import { InputProps, SettingsItemBaseProps, SettingsModalProps } from '..';
 import { ReactNode } from 'react';
 export type SettingsItemVariant = 'default' | 'modal' | 'switch';
+export interface SettingsItemModalProps {
+    icon?: SettingsModalProps['icon'];
+    title?: SettingsModalProps['title'];
+    description?: SettingsModalProps['description'];
+    buttons?: SettingsModalProps['buttons'];
+}
 export interface SettingsItemProps extends SettingsItemBaseProps {
     variant?: SettingsItemVariant;
     id: string;
@@ -10,6 +16,7 @@ export interface SettingsItemProps extends SettingsItemBaseProps {
     name?: InputProps['name'];
     checked?: InputProps['checked'];
     onChange?: InputProps['onChange'];
+    modalProps?: SettingsItemModalProps;
     children?: ReactNode;
 }
-export declare const SettingsItem: ({ loading, variant, id, name, checked, onChange, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItem: ({ loading, variant, id, name, checked, onChange, modalProps, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsItem.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, variant, id, name, checked, onChange, children, ...props }: import('./SettingsItem').SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, variant, id, name, checked, onChange, modalProps, children, ...props }: import('./SettingsItem').SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -19,12 +19,14 @@ declare const meta: {
         name?: string | undefined;
         checked?: boolean | undefined;
         onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+        modalProps?: import('./SettingsItem').SettingsItemModalProps | undefined;
         children?: React.ReactNode;
         groupId?: string | undefined;
         collapsible?: boolean | undefined;
         expanded?: boolean | undefined;
         icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         label?: React.ReactNode;
+        ref?: React.Ref<HTMLElement> | undefined;
         interactive?: boolean | undefined;
         as?: React.ElementType | undefined;
         tabIndex?: number | undefined;
@@ -57,6 +59,7 @@ export declare const Value: Story;
 export declare const Loading: Story;
 export declare const Switch: Story;
 export declare const Modal: Story;
+export declare const ModalProps: Story;
 export declare const Company: Story;
 export declare const Person: Story;
 export declare const Bookmark: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsItemBase.d.ts

@@ -10,4 +10,4 @@ export interface SettingsItemBaseProps extends ListItemBaseProps, ListItemHeader
     value?: ListItemLabelProps['value'];
     description?: ListItemLabelProps['description'];
 }
-export declare const SettingsItemBase: ({ loading, color, size, expanded, icon, label, title, value, description, children, highlightWords, ...props }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItemBase: ({ ref, loading, color, size, expanded, icon, label, title, value, description, children, highlightWords, ...props }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsModal.d.ts

@@ -1,7 +1,11 @@
-import { ModalBaseProps, ModalHeaderProps } from '..';
+import { ButtonProps, ModalBaseProps, ModalHeaderProps } from '..';
+export interface SettingsModalButtonProps extends ButtonProps {
+    close?: boolean;
+}
 export interface SettingsModalProps extends ModalBaseProps {
     icon?: ModalHeaderProps['icon'];
     title?: ModalHeaderProps['title'];
     description?: ModalHeaderProps['description'];
+    buttons?: SettingsModalButtonProps[];
 }
-export declare const SettingsModal: ({ icon, title, description, open, onClose, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsModal: ({ icon, title, description, open, onClose, buttons, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsModal.stories.d.ts

@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react';
 import { AccountListItemProps, SettingsModalProps, UsedByLogProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ icon, title, description, open, onClose, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ icon, title, description, open, onClose, buttons, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -28,9 +28,17 @@ export interface AccountAlertsModalProps extends SettingsModalProps {
     emailLabel?: string;
     smsAlerts?: boolean;
     emailAlerts?: boolean;
+    readOnly?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const AccountAlertsModal: ({ open, onClose, icon, title, description, phone, phoneLabel, email, emailLabel, smsAlerts, emailAlerts, onChange, }: AccountAlertsModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountAlertsModal: ({ open, onClose, icon, title, description, phone, phoneLabel, email, emailLabel, smsAlerts, emailAlerts, readOnly, onChange, }: AccountAlertsModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UserAccountAlertsModal: ({ open, onClose, phone, email, ...props }: {
+    [x: string]: any;
+    open?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    phone?: string | undefined;
+    email?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 interface AccountGroupsModalProps extends SettingsModalProps {
     items?: AccountListItemProps[];
 }

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

@@ -9,9 +9,7 @@ declare const meta: {
         options: {
             label: string;
             value: string;
-            badge: {
-                label: string;
-            };
+            count: number;
         }[];
     };
 };

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

@@ -24,6 +24,7 @@ declare const meta: {
         size?: import('..').ListItemSize | undefined;
         color?: import('..').ListItemColor | undefined;
         className?: string | undefined;
+        ref?: React.Ref<HTMLElement> | undefined;
         icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         as?: React.ElementType | undefined;
         label?: React.ReactNode | (() => React.ReactElement);

package/dist/types/lib/components/Typography/Heading.d.ts

@@ -3,8 +3,9 @@ import { TypographyProps } from '..';
 export type HeadingSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inherit';
 export type HeadingWeight = 'normal' | 'medium' | 'bold';
 export type HeadingLeading = 'none' | 'tight' | 'normal';
-export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'label';
 export interface HeadingProps {
+    id?: string;
     loading?: boolean;
     highlightWords?: string[];
     as?: HeadingComponent;
@@ -18,4 +19,4 @@ export interface HeadingProps {
     style?: CSSProperties;
     children?: ReactNode;
 }
-export declare const Heading: ({ loading, highlightWords, as, size, leading, weight, color, variant, maxRows, className, style, children, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ id, loading, highlightWords, as, size, leading, weight, color, variant, maxRows, className, style, children, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Typography/Heading.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, highlightWords, as, size, leading, weight, color, variant, maxRows, className, style, children, }: import('./Heading').HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, loading, highlightWords, as, size, leading, weight, color, variant, maxRows, className, style, children, }: import('./Heading').HeadingProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/package.json

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