@altinn/altinn-components 0.54.3 → 0.55.0

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

@@ -0,0 +1,129 @@
+import { MenuProps } from './Menu';
+import { MenuListSearchProps } from './MenuListSearch';
+import * as React from 'react';
+type SearchProps = Omit<MenuListSearchProps, 'name'> & {
+    name?: string;
+};
+interface UseMenuSearchProps extends Pick<SearchProps, 'placeholder' | 'name' | 'onChange' | 'onClear' | 'clearButtonAltText'> {
+    items?: MenuProps['items'];
+    groups?: MenuProps['groups'];
+}
+export declare const useMenuSearch: ({ placeholder, name, onChange, onClear, clearButtonAltText, items, groups, }: UseMenuSearchProps) => {
+    search: {
+        placeholder: string;
+        name: string;
+        value: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onClear: () => void;
+        clearButtonAltText: string | undefined;
+    };
+    results: {
+        searchWords: string[];
+        id?: string;
+        groupId?: string;
+        role?: import('./MenuItem').MenuItemRole;
+        as?: React.ElementType;
+        size?: import('./MenuItem').MenuItemSize;
+        variant?: import('./MenuItem').MenuItemVariant;
+        color?: import('./MenuItem').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;
+        highlightWords?: string[];
+        items?: import('./MenuItem').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;
+        checked?: boolean;
+        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;
+    }[];
+    resultCount: number;
+    hasQuery: boolean;
+    items: {
+        id?: string;
+    }[];
+    groups: {
+        search: {
+            hidden: boolean;
+            title: string;
+        };
+        selected: {
+            hidden: boolean;
+            title: string;
+        };
+        emptySearch: {
+            hidden: boolean;
+            title: string;
+        };
+    };
+};
+export {};

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

@@ -0,0 +1,35 @@
+export interface UseMenuVirtualizationProps<TItemProps = {
+    [key: string]: unknown;
+}> {
+    menu: Array<{
+        items: Array<{
+            props?: TItemProps & {
+                hidden?: boolean;
+            };
+            active?: boolean;
+        }>;
+        props?: {
+            title?: string;
+            [key: string]: unknown;
+        };
+    }>;
+    scrollRef: React.RefObject<HTMLUListElement>;
+    open?: boolean;
+}
+export declare const useMenuVirtualization: <TItemProps = {
+    [key: string]: unknown;
+}>({ menu, scrollRef, }: UseMenuVirtualizationProps<TItemProps>) => {
+    flatMenu: ({
+        type: "item";
+        itemProps: TItemProps;
+        active: boolean | undefined;
+    } | {
+        type: "divider";
+        title?: undefined;
+    } | {
+        type: "header";
+        title: string;
+    })[];
+    virtualizer: import('@tanstack/react-virtual').Virtualizer<HTMLUListElement, Element>;
+    scrollMaxHeight: number;
+};

package/dist/types/lib/components/Page/ContactButtons.d.ts

@@ -1,5 +1,9 @@
-import { ButtonProps } from '..';
-export interface ContactButtonProps extends ButtonProps {
+import { ButtonIconProps, ButtonProps } from '..';
+export interface ContactButtonProps {
+    as?: ButtonProps['as'];
+    href?: ButtonProps['href'];
+    onClick?: ButtonProps['onClick'];
+    icon?: ButtonIconProps['icon'];
     label: string;
 }
 export interface ContactButtonsProps {

package/dist/types/lib/components/Page/PageTabs.d.ts

@@ -1,10 +1,3 @@
-import { MenuItemColor, MenuItemProps, MenuVariant } from '..';
-export type PageTabsPadding = 0 | 2;
-export interface PageTabsProps {
-    id?: string;
-    variant?: MenuVariant;
-    color?: MenuItemColor;
-    padding?: PageTabsPadding;
-    items?: MenuItemProps[];
-}
-export declare const PageTabs: ({ variant, color, items, padding }: PageTabsProps) => import("react/jsx-runtime").JSX.Element;
+import { TabMenuProps } from '../Menu/TabMenu';
+/** PageTabs is deprecated. Use TabMenu instead. */
+export declare const PageTabs: (props: TabMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/PageTabs.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ variant, color, items, padding }: import('./PageTabs').PageTabsProps) => import("react/jsx-runtime").JSX.Element;
+    component: (props: import('../Menu').TabMenuProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Searchbar/AutocompleteItem.d.ts

@@ -1,10 +1,10 @@
 import { BadgeProps, MenuItemProps, QueryItemProps } from '..';
-export type AutocompleteItemType = 'scope' | 'suggest' | 'dialog' | 'bookmark' | 'information';
+export type AutocompleteItemType = 'scope' | 'suggest' | 'dialog' | 'bookmark' | 'information' | 'menuitem';
 export interface AutocompleteItemProps extends MenuItemProps {
-    type?: AutocompleteItemType;
+    role?: AutocompleteItemType;
     /** Badge */
     badge?: BadgeProps;
     /** Query params */
     params?: QueryItemProps[];
 }
-export declare const AutocompleteItem: ({ interactive, role, params, badge, label, size, ...props }: AutocompleteItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteItem: ({ role, params, badge, label, size, ...props }: AutocompleteItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -20,7 +20,7 @@ export declare const InboxScopesExpanded: () => import("react/jsx-runtime").JSX.
 export declare const Expanded: Story;
 export declare const ControlledState: {
     (args: SearchbarProps): import("react/jsx-runtime").JSX.Element;
-    play({ canvasElement, }: {
+    play({ canvasElement }: {
         canvasElement: HTMLElement;
     }): Promise<void>;
 };

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

@@ -0,0 +1,15 @@
+export interface DatepickerValue {
+    fromDate?: string;
+    toDate?: string;
+}
+export interface DatepickerFilterProps {
+    backLabel?: string;
+    fromLabel?: string;
+    toLabel?: string;
+    selectFromDateLabel?: string;
+    selectToDateLabel?: string;
+    formData: DatepickerValue;
+    onChange?: (value: DatepickerValue) => void;
+    onSubmit?: (value: DatepickerValue) => void;
+}
+export declare const DatepickerFilter: ({ backLabel, fromLabel, selectFromDateLabel, toLabel, selectToDateLabel, formData, onChange, onSubmit, }: DatepickerFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { MenuProps } from '../Menu';
+import { FilterState } from './useFilter';
+export interface SelectDateFilterProps extends MenuProps {
+    name: string;
+    filterState?: FilterState;
+    onFilterStateChange?: (state: FilterState) => void;
+}
+export declare const SelectDateFilter: ({ name, size, searchable, keyboardEvents, items, groups, filterState, onFilterStateChange, }: SelectDateFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+declare const meta: {
+    title: string;
+    component: ({ name, size, searchable, keyboardEvents, items, groups, filterState, onFilterStateChange, }: import('./SelectDateFilter').SelectDateFilterProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    args: {};
+};
+export default meta;
+export declare const Datepicker: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomName: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,25 +1,12 @@
 import { ReactNode } from 'react';
-import { MenuOptionType } from '../Menu';
-import { ToolbarAccountMenuProps } from './ToolbarAccountMenu.tsx';
 import { ToolbarFilterProps } from './ToolbarFilter.tsx';
-import { ToolbarSearchProps } from './ToolbarSearch.tsx';
-export type FilterState = Record<string, (string | number)[] | undefined>;
-export type FilterValue = string | number;
+import { ToolbarMenuProps } from './ToolbarMenu';
+import { ToolbarSearchProps } from './ToolbarSearch';
 export interface ToolbarProps {
-    accountMenu?: ToolbarAccountMenuProps;
-    filters?: ToolbarFilterProps[];
+    accountMenu?: ToolbarMenuProps;
+    menus?: ToolbarMenuProps[];
     search?: ToolbarSearchProps;
-    filterState?: FilterState;
-    getFilterLabel?: (name: string, value: FilterValue[] | undefined) => string;
-    onFilterStateChange?: (state: FilterState) => void;
-    showResultsLabel?: string;
-    addFilterButtonLabel?: string;
-    removeButtonAltText?: string;
+    filter?: ToolbarFilterProps;
     children?: ReactNode;
 }
-export interface FilterChangePayload {
-    name: string;
-    value: FilterValue;
-    type: MenuOptionType;
-}
-export declare const Toolbar: ({ filters, filterState, onFilterStateChange, search, accountMenu, getFilterLabel, children, showResultsLabel, removeButtonAltText, addFilterButtonLabel, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toolbar: ({ accountMenu, menus, search, filter, children }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,24 +1,26 @@
-import { StoryObj } from '@storybook/react-vite';
+import { ToolbarFilterProps } from './';
 declare const meta: {
     title: string;
-    component: ({ filters, filterState, onFilterStateChange, search, accountMenu, getFilterLabel, children, showResultsLabel, removeButtonAltText, addFilterButtonLabel, }: import('./Toolbar').ToolbarProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
+    component: ({ accountMenu, menus, search, filter, children }: import('./Toolbar').ToolbarProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
-    args: {
-        showResultsLabel: string;
-    };
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
+        accountMenu?: import('./ToolbarMenu').ToolbarMenuProps | undefined;
+        menus?: import('./ToolbarMenu').ToolbarMenuProps[] | undefined;
+        search?: import('./ToolbarSearch').ToolbarSearchProps | undefined;
+        filter?: ToolbarFilterProps | undefined;
+        children?: React.ReactNode;
+    }>, _: import('storybook/internal/csf').StoryContext<import('@storybook/react-vite').ReactRenderer, {
+        accountMenu?: import('./ToolbarMenu').ToolbarMenuProps | undefined;
+        menus?: import('./ToolbarMenu').ToolbarMenuProps[] | undefined;
+        search?: import('./ToolbarSearch').ToolbarSearchProps | undefined;
+        filter?: ToolbarFilterProps | undefined;
+        children?: React.ReactNode;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    args: {};
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const CustomFilterLabel: Story;
-export declare const NoFilters: Story;
-export declare const StaticFilters: Story;
-export declare const HiddenFilters: Story;
-export declare const WithAccountMenu: Story;
-export declare const WithSearch: Story;
-export declare const LongListAccounts: Story;
-export declare const ControlledStateFilters: Story;
-export declare const ControlledStateAccount: () => import("react/jsx-runtime").JSX.Element;
-export declare const CombinedRadioCheckboxFilter: () => import("react/jsx-runtime").JSX.Element;
-export declare const SelectSubaccount: () => import("react/jsx-runtime").JSX.Element;
+export declare const Composition: () => import("react/jsx-runtime").JSX.Element;
+export declare const SearchAndFilter: () => import("react/jsx-runtime").JSX.Element;
+export declare const SearchAndSwitch: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountMenuAndFilters: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountMenuAndSearch: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,14 @@
-import { MouseEventHandler } from 'react';
-import { FilterChangePayload, FilterState, ToolbarSearchProps } from '../';
-import { MenuOptionProps } from '../Menu';
-import { OptionGroup } from './ToolbarOptions';
-type ToolbarFilterValue = (string | number)[];
+import { FilterProps, FilterState } from './useFilter';
 export interface ToolbarFilterProps {
-    name: string;
-    options: MenuOptionProps[];
-    optionGroups?: {
-        [key: string]: OptionGroup;
-    };
-    label: string;
-    id?: string;
+    filters: FilterProps[];
+    addLabel?: string;
+    addNextLabel?: string;
+    resetLabel?: string;
+    removeLabel?: string;
+    submitLabel?: string;
+    getFilterLabel?: (name: string, filterValues: (string | number)[] | undefined) => string | undefined;
     filterState?: FilterState;
-    optionType: 'checkbox' | 'radio';
-    removable?: boolean;
-    getSelectedLabel?: (name: string, value?: ToolbarFilterValue) => string;
-    buttonAltText?: string;
-    className?: string;
-    onChange?: (payload: FilterChangePayload) => void;
-    onRemove?: MouseEventHandler;
-    showResultsLabel?: string;
-    search?: ToolbarSearchProps;
+    onFilterStateChange?: (state: FilterState) => void;
+    virtualized?: boolean;
 }
-export declare const ToolbarFilter: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, search, optionType, id, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const ToolbarFilter: ({ filters, filterState, onFilterStateChange, addLabel, addNextLabel, resetLabel, removeLabel, submitLabel, getFilterLabel, virtualized, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,13 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, search, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
+    component: ({ filters, filterState, onFilterStateChange, addLabel, addNextLabel, resetLabel, removeLabel, submitLabel, getFilterLabel, virtualized, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
-    args: {
-        label: string;
-        options: {
-            label: string;
-            value: string;
-            count: number;
-        }[];
-    };
+    args: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Single: Story;
-export declare const Multiple: Story;
-export declare const MultipleWithSearch: Story;
+export declare const Uncontrolled: Story;
+export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
+export declare const Removable: () => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { FilterProps } from './useFilter.tsx';
+export interface ToolbarFilterAddMenuProps extends FilterProps {
+    open: boolean;
+    onToggle: () => void;
+    onClose: () => void;
+    onAdd?: (name: string) => void;
+}
+export declare const ToolbarFilterAddMenu: ({ label, items, groups, onAdd, onToggle, onClose, open, }: ToolbarFilterAddMenuProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+interface ToolbarFilterButtonProps {
+    name?: string;
+    value?: (string | number)[] | undefined;
+    onClick?: () => void;
+    onRemove?: () => void;
+    removable?: boolean;
+    removeLabel?: string;
+    children?: ReactNode;
+    open?: boolean;
+    menuId?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export declare function ToolbarFilterButton({ name, value, onClick, removable, removeLabel, onRemove, children, open, ref, }: ToolbarFilterButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { ElementType } from 'react';
+import { FilterProps, FilterState } from './useFilter.tsx';
+export interface ToolbarFilterMenuProps extends FilterProps {
+    as?: ElementType;
+    open: boolean;
+    onToggle: () => void;
+    onClose: () => void;
+    onRemove?: () => void;
+    filterState?: FilterState;
+    onFilterStateChange?: (state: FilterState) => void;
+    onFilterChange?: (type: string, name: string, value: string) => void;
+    removeLabel?: string;
+    submitLabel?: string;
+}
+export declare const ToolbarFilterMenu: ({ as, size, name, label, searchable, groups, items, removable, removeLabel, filterState, onFilterStateChange, onFilterChange, onRemove, open, onToggle, onClose, submitLabel, search, virtualized, }: ToolbarFilterMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,7 @@
-import { MenuItemGroups, MenuItemProps, MenuSearchProps } from '../Menu';
-export interface ToolbarMenuProps {
-    label: string;
-    value: string | number;
+import { MenuProps } from '../Menu/';
+export interface ToolbarMenuProps extends MenuProps {
     title?: string;
-    items: MenuItemProps[];
-    groups?: MenuItemGroups;
-    search?: MenuSearchProps;
-    id?: string;
-    className?: string;
+    label?: string;
+    onSelectId?: (id: string) => void;
 }
-export declare const ToolbarMenu: ({ label, value, groups, search, items, id, title, }: ToolbarMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarMenu: ({ title, label, items, onSelectId, ...props }: ToolbarMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,5 @@
-import { SearchFieldProps } from '../';
+import { SearchFieldProps } from '../Forms';
 export interface ToolbarSearchProps extends SearchFieldProps {
-    placeholder?: string;
-    name: string;
-    value?: string;
+    collapsible?: boolean;
 }
-export declare const ToolbarSearch: ({ value, name, placeholder, clearButtonAltText, onChange, onClear, }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarSearch: ({ value, name, placeholder, collapsible, clearButtonAltText, onChange, onClear, }: ToolbarSearchProps) => import("react/jsx-runtime").JSX.Element;