@altinn/altinn-components 0.54.2 → 0.55.0

package/dist/types/lib/components/Toolbar/example.hooks.d.ts

@@ -0,0 +1,41 @@
+import { ToolbarFilterProps, ToolbarProps } from './';
+export declare const useInboxFilter: ({ filters, defaultFilterState }: {
+    filters?: import('./useFilter').FilterProps[] | undefined;
+    defaultFilterState?: {} | undefined;
+}) => {
+    addLabel: string;
+    submitLabel: string;
+    addNextLabel: string;
+    filters: import('./useFilter').FilterProps[];
+    filterState: import('./useFilter').FilterState | undefined;
+    onFilterStateChange: React.Dispatch<React.SetStateAction<import('./useFilter').FilterState | undefined>>;
+    getFilterLabel: ToolbarFilterProps["getFilterLabel"];
+};
+export declare const useAccountMenu: () => {
+    label: string;
+    onSelectId: (id: string) => void;
+    items: {
+        selected: boolean;
+        id: string;
+        groupId: string;
+        searchWords: (string | undefined)[];
+        title: string;
+        description: string;
+        icon: import('..').AvatarProps;
+    }[];
+    virtualized: boolean;
+    searchable: boolean;
+    groups: {
+        favourites: {
+            title: string;
+        };
+        aa: {
+            title: string;
+        };
+        search: {
+            title: string;
+        };
+    };
+    size: string;
+};
+export declare const useInboxToolbar: () => ToolbarProps;

package/dist/types/lib/components/Toolbar/formatDateRange.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Formats a date range into a human-readable string.
+ * Examples (nb-NO locale):
+ * - "1. mai–3. juni 2024"
+ * - "1.–15. juni 2024"
+ * * @param fromDate - ISO string "YYYY-MM-DD"
+ * @param toDate - ISO string "YYYY-MM-DD"
+ * @param locale - BCP 47 language tag (defaults to Norwegian Bokmål)
+ */
+export declare function formatDateRange(fromDate?: string, toDate?: string, locale?: string): string;

package/dist/types/lib/components/Toolbar/index.d.ts

@@ -1,7 +1,6 @@
-export * from './ToolbarBase';
-export * from './ToolbarButton';
 export * from './Toolbar';
-export * from './ToolbarSearch';
-export * from './ToolbarFilterBase';
 export * from './ToolbarFilter';
-export * from './ToolbarDaterange';
+export * from './ToolbarSearch';
+export * from './ToolbarMenu';
+export * from './useFilter';
+export * from './SelectDateFilter';

package/dist/types/lib/components/Toolbar/useFilter.d.ts

@@ -0,0 +1,173 @@
+import { MenuGroupProps, MenuItemProps, MenuProps } from '../Menu/';
+export type FilterState = Record<string, (string | number)[] | undefined>;
+export interface FilterGroupProps extends MenuGroupProps {
+    name?: string;
+}
+export type FilterGroups = Record<string, FilterGroupProps>;
+export interface FilterProps extends MenuProps {
+    id?: string;
+    groupId?: string;
+    name: string;
+    icon?: MenuItemProps['icon'];
+    label: string;
+    removable?: boolean;
+    groups?: FilterGroups;
+    items: MenuItemProps[];
+}
+interface UseFilterProps {
+    filters: FilterProps[];
+    filterState?: FilterState;
+    onFilterStateChange?: (state: FilterState) => void;
+}
+export declare const useFilter: ({ filters, filterState, onFilterStateChange }: UseFilterProps) => {
+    visibleFilters: {
+        items: {
+            checked: boolean | undefined;
+            id?: string;
+            groupId?: string;
+            role?: import('..').MenuItemRole;
+            as?: React.ElementType;
+            size?: import('..').MenuItemSize;
+            variant?: import('..').MenuItemVariant;
+            color?: import('..').MenuItemColor;
+            icon?: import('..').IconProps | import('..').SvgElement | import('..').AvatarProps | import('..').AvatarGroupProps;
+            title?: string;
+            description?: string;
+            label?: React.ReactNode | (() => React.ReactElement);
+            badge?: import('..').BadgeProps;
+            controls?: React.ReactNode;
+            count?: number;
+            searchWords?: string[];
+            highlightWords?: string[];
+            items?: MenuItemProps[];
+            tabIndex?: number;
+            expanded?: boolean;
+            hidden?: boolean;
+            disabled?: boolean;
+            selected?: boolean;
+            active?: boolean;
+            className?: string;
+            linkIcon?: boolean;
+            href?: string;
+            onClick?: () => void;
+            onKeyPress?: React.KeyboardEventHandler;
+            onMouseEnter?: React.MouseEventHandler;
+            name?: string;
+            value?: string | number;
+            onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+            'data-testid'?: string;
+            "aria-activedescendant"?: string | undefined;
+            "aria-atomic"?: (boolean | "true" | "false") | undefined;
+            "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+            "aria-braillelabel"?: string | undefined;
+            "aria-brailleroledescription"?: string | undefined;
+            "aria-busy"?: (boolean | "true" | "false") | undefined;
+            "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+            "aria-colcount"?: number | undefined;
+            "aria-colindex"?: number | undefined;
+            "aria-colindextext"?: string | undefined;
+            "aria-colspan"?: number | undefined;
+            "aria-controls"?: string | undefined;
+            "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+            "aria-describedby"?: string | undefined;
+            "aria-description"?: string | undefined;
+            "aria-details"?: string | undefined;
+            "aria-disabled"?: (boolean | "true" | "false") | undefined;
+            "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+            "aria-errormessage"?: string | undefined;
+            "aria-expanded"?: (boolean | "true" | "false") | undefined;
+            "aria-flowto"?: string | undefined;
+            "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+            "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            "aria-hidden"?: (boolean | "true" | "false") | undefined;
+            "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+            "aria-keyshortcuts"?: string | undefined;
+            "aria-label"?: string | undefined;
+            "aria-labelledby"?: string | undefined;
+            "aria-level"?: number | undefined;
+            "aria-live"?: "off" | "assertive" | "polite" | undefined;
+            "aria-modal"?: (boolean | "true" | "false") | undefined;
+            "aria-multiline"?: (boolean | "true" | "false") | undefined;
+            "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+            "aria-orientation"?: "horizontal" | "vertical" | undefined;
+            "aria-owns"?: string | undefined;
+            "aria-placeholder"?: string | undefined;
+            "aria-posinset"?: number | undefined;
+            "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+            "aria-readonly"?: (boolean | "true" | "false") | undefined;
+            "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+            "aria-required"?: (boolean | "true" | "false") | undefined;
+            "aria-roledescription"?: string | undefined;
+            "aria-rowcount"?: number | undefined;
+            "aria-rowindex"?: number | undefined;
+            "aria-rowindextext"?: string | undefined;
+            "aria-rowspan"?: number | undefined;
+            "aria-selected"?: (boolean | "true" | "false") | undefined;
+            "aria-setsize"?: number | undefined;
+            "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+            "aria-valuemax"?: number | undefined;
+            "aria-valuemin"?: number | undefined;
+            "aria-valuenow"?: number | undefined;
+            "aria-valuetext"?: string | undefined;
+        }[];
+        id: string;
+        groupId?: string;
+        name: string;
+        icon?: MenuItemProps["icon"];
+        label: string;
+        removable?: boolean;
+        groups?: FilterGroups;
+        searchable?: boolean;
+        virtualized?: boolean;
+        level?: number;
+        maxLevels?: number;
+        expanded?: boolean;
+        a11yMode?: "menu" | "combobox";
+        open?: boolean;
+        scrollToTopOnOpen?: boolean;
+        autoActivateFirstItem?: boolean;
+        announceNoResults?: boolean;
+        search?: import('..').MenuListSearchProps;
+        size?: MenuItemProps["size"];
+        variant?: MenuItemProps["variant"];
+        color?: MenuItemProps["color"];
+        as?: React.ElementType;
+        keyboardEvents?: boolean;
+        onSelect?: () => void;
+        scrollRefStyles?: React.CSSProperties;
+        onActiveItemIdChange?: (id: string | undefined) => void;
+    }[];
+    hiddenFilters: {
+        id: string;
+        groupId?: string;
+        name: string;
+        icon?: MenuItemProps["icon"];
+        label: string;
+        removable?: boolean;
+        groups?: FilterGroups;
+        items: MenuItemProps[];
+        searchable?: boolean;
+        virtualized?: boolean;
+        level?: number;
+        maxLevels?: number;
+        expanded?: boolean;
+        a11yMode?: "menu" | "combobox";
+        open?: boolean;
+        scrollToTopOnOpen?: boolean;
+        autoActivateFirstItem?: boolean;
+        announceNoResults?: boolean;
+        search?: import('..').MenuListSearchProps;
+        size?: MenuItemProps["size"];
+        variant?: MenuItemProps["variant"];
+        color?: MenuItemProps["color"];
+        as?: React.ElementType;
+        keyboardEvents?: boolean;
+        onSelect?: () => void;
+        scrollRefStyles?: React.CSSProperties;
+        onActiveItemIdChange?: (id: string | undefined) => void;
+    }[];
+    onFilterChange: (type: string, name: string, value: string) => void;
+    onFilterRemove: (name: string) => void;
+    onFilterAdd: (name: string) => void;
+};
+export {};

package/dist/types/lib/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { TooltipProps as DsTooltipProps, Size } from '@digdir/designsystemet-react';
+export type TooltipProps = {
+    children: React.ReactNode;
+    content: string;
+    hidden?: boolean;
+    size?: Size;
+} & Omit<DsTooltipProps, 'content | children'>;
+export declare const Tooltip: ({ size, placement, children, content, hidden }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+declare const meta: {
+    title: string;
+    component: ({ size, placement, children, content, hidden }: import('./Tooltip').TooltipProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+export declare const ButtonTooltip: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

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

@@ -42,12 +42,12 @@ declare const meta: {
         controls?: React.ReactNode;
         selected?: boolean | undefined;
         description?: React.ReactNode | import('..').HeadingProps;
-        highlightWords?: string[] | undefined;
-        ariaLabel?: string | undefined;
         interactive?: boolean | undefined;
+        ariaLabel?: string | undefined;
         linkIcon?: boolean | undefined;
         containerAs?: React.ElementType | undefined;
         shadow?: import('..').Shadow | undefined;
+        highlightWords?: string[] | undefined;
         collapsible?: boolean | undefined;
         ariaControlsId?: string | undefined;
     };

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

@@ -1,8 +1,8 @@
 import { CSSProperties, ReactNode } from 'react';
 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 HeadingWeight = 'inherit' | 'normal' | 'medium' | 'bold';
+export type HeadingLeading = 'inherit' | 'none' | 'tight' | 'normal';
 export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'label';
 export interface HeadingProps {
     id?: string;

package/dist/types/lib/components/UserListItem/UserListItem.d.ts

@@ -14,5 +14,7 @@ export interface UserListItemProps extends Pick<ListItemProps, 'size' | 'control
     titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
     /** Display as subUnit */
     subUnit?: boolean;
+    /** Display as deleted unit */
+    deleted?: boolean;
 }
-export declare const UserListItem: ({ name, type, description, roleNames, titleAs, subUnit, loading, ...props }: UserListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UserListItem: ({ name, type, description, roleNames, titleAs, subUnit, loading, deleted, ...props }: UserListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { UserListItemProps } from './UserListItem';
 declare const meta: {
     title: string;
-    component: ({ name, type, description, roleNames, titleAs, subUnit, loading, ...props }: UserListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ name, type, description, roleNames, titleAs, subUnit, loading, deleted, ...props }: UserListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -18,6 +18,7 @@ declare const meta: {
         as: "div";
         interactive: true;
         subUnit: false;
+        deleted: false;
         titleAs: "h3";
         border: "none";
         color: "company";
@@ -97,6 +98,11 @@ declare const meta: {
                 type: "boolean";
             };
         };
+        deleted: {
+            control: {
+                type: "boolean";
+            };
+        };
         children: {
             control: false;
         };

package/dist/types/lib/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './GlobalMenu_old';
 export * from './Header';
 export type { GlobalHeaderProps } from './GlobalHeader';
 export * from './Icon';
+export * from './Item';
 export * from './Layout';
 export * from './LayoutAction';
 export * from './List';
@@ -42,4 +43,5 @@ export * from './Dashboard';
 export * from './ActivityLog';
 export * from './Article';
 export * from './Modal';
+export * from './Tooltip';
 export * from './DsComponents';

package/dist/types/lib/hooks/useAccountSelector.d.ts

@@ -41,7 +41,7 @@ export interface useAccountSelectorProps {
     /** Whether account data is currently being loaded */
     isLoading?: boolean;
     /** Whether to use virtualization for large account lists */
-    isVirtualized?: boolean;
+    virtualized?: boolean;
     /** Callback triggered when a user selects an account */
     onSelectAccount?: (accountId: string) => void;
     /** Callback triggered when a user toggles an account's favorite status */
@@ -63,4 +63,4 @@ export interface useAccountSelectorProps {
  * @param props - Configuration object for the hook
  * @returns AccountSelectorProps object with organized account data and handlers.
  */
-export declare const useAccountSelector: ({ partyListDTO, favoriteAccountUuids, currentAccountUuid, selfAccountUuid, isLoading, onSelectAccount, isVirtualized, onToggleFavorite, languageCode, showDeletedUnits, onShowDeletedUnitsChange, }: useAccountSelectorProps) => AccountSelectorProps;
+export declare const useAccountSelector: ({ partyListDTO, favoriteAccountUuids, currentAccountUuid, selfAccountUuid, isLoading, onSelectAccount, virtualized, onToggleFavorite, languageCode, showDeletedUnits, onShowDeletedUnitsChange, }: useAccountSelectorProps) => AccountSelectorProps;

package/dist/types/lib/hooks/useMenu.d.ts

@@ -14,6 +14,7 @@ export interface UseMenuOutput<T, V> {
     menu: UseMenuGroup<T, V>[];
     activeIndex: number;
     setActiveIndex: (activeIndex: number) => void;
+    activeItem: T | undefined;
 }
 export interface UseMenuInput<T, V> {
     items: T[];
@@ -21,8 +22,9 @@ export interface UseMenuInput<T, V> {
     ref?: React.Ref<HTMLElement>;
     groupByKey?: keyof T;
     keyboardEvents?: boolean;
+    autoActivateFirstItem?: boolean;
     sortGroupBy?: (a: [string, T[]], b: [string, T[]]) => number;
     onSelect?: () => void;
     autoFocus?: boolean;
 }
-export declare const useMenu: <T, V>({ items, groups, groupByKey, keyboardEvents, sortGroupBy, onSelect, ref, }: UseMenuInput<T, V>) => UseMenuOutput<T, V>;
+export declare const useMenu: <T, V>({ items, groups, groupByKey, keyboardEvents, autoActivateFirstItem, sortGroupBy, onSelect, ref, }: UseMenuInput<T, V>) => UseMenuOutput<T, V>;