@digdir/designsystemet-react 1.20.0 → 1.21.0

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

@@ -1,115 +0,0 @@
-import { Suggestion as SuggestionRoot } from './suggestion';
-import { SuggestionClear } from './suggestion-clear';
-import { SuggestionEmpty } from './suggestion-empty';
-import { SuggestionInput } from './suggestion-input';
-import { SuggestionList } from './suggestion-list';
-import { SuggestionOption } from './suggestion-option';
-import { SuggestionToggle } from './suggestion-toggle';
-type Suggestion = typeof SuggestionRoot & {
-    /**
-     * Component that provides a Suggestion list.
-     *
-     * Place as a descendant of `Suggestion`
-     *
-     * @example
-     * <Suggestion>
-     *   <Suggestion.Input />
-     *   <Suggestion.Toggle />
-     *   <Suggestion.Clear />
-     *   <Suggestion.List />
-     * </Suggestion>
-     */
-    List: typeof SuggestionList;
-    /**
-     * Component that provides an input field for the Suggestion list.
-     *
-     * Place as a descendant of `Suggestion`
-     *
-     * @example
-     * <Suggestion>
-     *   <Suggestion.Input />
-     *   <Suggestion.Toggle />
-     *   <Suggestion.Clear />
-     *   <Suggestion.List />
-     * </Suggestion>
-     */
-    Input: typeof SuggestionInput;
-    /**
-     * Component that provides an empty Suggestion list.
-     *
-     * Place as a descendant of `Suggestion.List`
-     *
-     * @example
-     * <Suggestion.List>
-     *   <Suggestion.Empty>Tomt</Suggestion.Empty>
-     * </Suggestion.List>
-     */
-    Empty: typeof SuggestionEmpty;
-    /**
-     * A component for rendering individual options in the Suggestion list.
-     *
-     * @example
-     * <Suggestion>
-     *   <Suggestion.Input />
-     *   <Suggestion.Toggle />
-     *   <Suggestion.Clear />
-     *   <Suggestion.List>
-     *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
-     *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
-     *   </Suggestion.List>
-     * </Suggestion>
-     */
-    Option: typeof SuggestionOption;
-    /**
-     * Component that provides a clear button for the Suggestion input.
-     *
-     * Place as a descendant of `Suggestion`
-     *
-     * @example
-     * <Suggestion>
-     *   <Suggestion.Input />
-     *   <Suggestion.Toggle />
-     *   <Suggestion.Clear />
-     *   <Suggestion.List />
-     * </Suggestion>
-     */
-    Clear: typeof SuggestionClear;
-    /**
-     * Component that provides a toggle button for the Suggestion list.
-     *
-     * Place as a descendant of `Suggestion`
-     *
-     * @example
-     * <Suggestion>
-     *   <Suggestion.Input />
-     *   <Suggestion.Toggle />
-     *   <Suggestion.Clear />
-     *   <Suggestion.List />
-     * </Suggestion>
-     */
-    Toggle: typeof SuggestionToggle;
-};
-/**
- * A component that provides a suggestion list for an input field.
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Toggle />
- *   <Suggestion.Clear />
- *   <Suggestion.List>
- *     <Suggestion.Empty>Tomt</Suggestion.Empty>
- *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
- *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
- *   </Suggestion.List>
- * </Suggestion>
- */
-declare const EXPERIMENTAL_Suggestion: Suggestion;
-export type { SuggestionItem, SuggestionMultipleProps, SuggestionProps, SuggestionSingleProps, } from './suggestion';
-export type { SuggestionClearProps } from './suggestion-clear';
-export type { SuggestionEmptyProps } from './suggestion-empty';
-export type { SuggestionInputProps } from './suggestion-input';
-export type { SuggestionListProps } from './suggestion-list';
-export type { SuggestionOptionProps } from './suggestion-option';
-export type { SuggestionToggleProps } from './suggestion-toggle';
-export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionToggle as EXPERIMENTAL_SuggestionToggle, };

package/dist/types/components/suggestion/suggestion-clear.d.ts

@@ -1,30 +0,0 @@
-import { type ButtonHTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-import type { MergeRight } from '../../utilities';
-export type SuggestionClearProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
-    /**
-     * Aria label for the clear button
-     * @default 'Tøm'
-     */
-    'aria-label'?: string;
-}>;
-/**
- * Component that provides a clear button for the Suggestion input.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Toggle />
- *   <Suggestion.Clear />
- *   <Suggestion.List />
- * </Suggestion>
- */
-export declare const SuggestionClear: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
-    /**
-     * Aria label for the clear button
-     * @default 'Tøm'
-     */
-    'aria-label'?: string;
-} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/suggestion/suggestion-empty.d.ts

@@ -1,27 +0,0 @@
-import type { OptionHTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-import '@digdir/designsystemet-web';
-export type SuggestionEmptyProps = DefaultProps & OptionHTMLAttributes<HTMLOptionElement> & {
-    /**
-     * Optionally the text to display when the suggestion list is empty.
-     * If <Suggestion> has `data-creatable`, use `{value}` to replace with the current input value.
-     **/
-    'data-empty'?: string;
-};
-/**
- * Component that provides an empty Suggestion list.
- *
- * Place as a descendant of `Suggestion.List`
- *
- * @example
- * <Suggestion.List>
- *   <Suggestion.Empty>Tomt</Suggestion.Empty>
- * </Suggestion.List>
- */
-export declare const SuggestionEmpty: import("react").ForwardRefExoticComponent<DefaultProps & OptionHTMLAttributes<HTMLOptionElement> & {
-    /**
-     * Optionally the text to display when the suggestion list is empty.
-     * If <Suggestion> has `data-creatable`, use `{value}` to replace with the current input value.
-     **/
-    'data-empty'?: string;
-} & import("react").RefAttributes<HTMLOptionElement>>;

package/dist/types/components/suggestion/suggestion-input.d.ts

@@ -1,26 +0,0 @@
-import { type InputProps } from '../input/input';
-export type SuggestionInputProps = Omit<InputProps, 'role' | 'data-indeterminate'>;
-declare global {
-    namespace React.JSX {
-        interface IntrinsicAttributes {
-            popovertarget?: string;
-        }
-    }
-    namespace React {
-        interface HTMLAttributes<T> {
-            popovertarget?: string;
-        }
-    }
-}
-/**
- * Component that provides an input field for the Suggestion list.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.List />
- * </Suggestion>
- */
-export declare const SuggestionInput: import("react").ForwardRefExoticComponent<SuggestionInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/suggestion/suggestion-list.d.ts

@@ -1,49 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import '@digdir/designsystemet-web';
-import type { DefaultProps } from '../../types';
-import type { MergeRight } from '../../utilities';
-export type SuggestionListProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDataListElement>, {
-    /**
-     * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
-     * @default '%d forslag'
-     */
-    singular?: string;
-    /**
-     * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
-     * @default '%d forslag'
-     */
-    plural?: string;
-    /**
-     * Whether to enable auto placement.
-     * @default true
-     */
-    autoPlacement?: boolean;
-}>;
-/**
- * Component that provides a Suggestion list.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.List />
- * </Suggestion>
- */
-export declare const SuggestionList: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDataListElement>, "autoPlacement" | "singular" | "plural"> & {
-    /**
-     * The screen reader announcement for singular Suggestion, where %d is the number of Suggestions
-     * @default '%d forslag'
-     */
-    singular?: string;
-    /**
-     * The screen reader announcement for plural Suggestions, where %d is the number of Suggestions
-     * @default '%d forslag'
-     */
-    plural?: string;
-    /**
-     * Whether to enable auto placement.
-     * @default true
-     */
-    autoPlacement?: boolean;
-} & import("react").RefAttributes<HTMLDataListElement>>;

package/dist/types/components/suggestion/suggestion-option.d.ts

@@ -1,17 +0,0 @@
-import type { OptionHTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-import '@digdir/designsystemet-web';
-export type SuggestionOptionProps = OptionHTMLAttributes<HTMLOptionElement> & DefaultProps;
-/**
- * A component for rendering individual options in the Suggestion list.
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.List>
- *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
- *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
- *   </Suggestion.List>
- * </Suggestion>
- */
-export declare const SuggestionOption: import("react").ForwardRefExoticComponent<OptionHTMLAttributes<HTMLOptionElement> & DefaultProps & import("react").RefAttributes<HTMLOptionElement>>;

package/dist/types/components/suggestion/suggestion-toggle.d.ts

@@ -1,30 +0,0 @@
-import { type ButtonHTMLAttributes } from 'react';
-import type { DefaultProps } from '../../types';
-import type { MergeRight } from '../../utilities';
-export type SuggestionToggleProps = MergeRight<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, {
-    /**
-     * Aria label for the toggle button
-     * @default 'Valg'
-     */
-    'aria-label'?: string;
-}>;
-/**
- * Component that provides a toggle button for the Suggestion list.
- *
- * Place as a descendant of `Suggestion`
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <Suggestion.Toggle />
- *   <Suggestion.Clear />
- *   <Suggestion.List />
- * </Suggestion>
- */
-export declare const SuggestionToggle: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & {
-    /**
-     * Aria label for the toggle button
-     * @default 'Valg'
-     */
-    'aria-label'?: string;
-} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/suggestion/suggestion.d.ts

@@ -1,115 +0,0 @@
-import type { DSSuggestionElement } from '@digdir/designsystemet-web';
-import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
-export type SuggestionItem = {
-    label: string;
-    value: string;
-};
-type EventBeforeMatch = Omit<CustomEvent<HTMLOptionElement | undefined>, 'currentTarget'> & {
-    currentTarget: DSSuggestionElement;
-};
-type Filter = (args: {
-    /**
-     * Index of the `option`
-     */
-    index: number;
-    /**
-     * Label content of the `option`
-     */
-    label: string;
-    /**
-     * Text content of the `option`
-     */
-    text: string;
-    /**
-     * Value of the `option`
-     */
-    value: string;
-    /**
-     * The DOM element of the `option`
-     */
-    optionElement: HTMLOptionElement;
-    /**
-     * The DOM element of the `input`
-     */
-    input: HTMLInputElement;
-}) => boolean;
-type SuggestionContextType = {
-    handleFilter: (input?: HTMLInputElement | null) => void;
-    dsSuggestionRef?: RefObject<DSSuggestionElement | null>;
-};
-type SuggestionValue<T extends {
-    multiple: boolean;
-}> = T['multiple'] extends true ? Array<string | SuggestionItem> : string | SuggestionItem;
-type SuggestionBaseProps = {
-    /**
-     * Filter options; boolean or a custom callback.
-     *
-     * See {@link Filter} for the callback signature.
-     *
-     * @default true
-     */
-    filter?: boolean | Filter;
-    /**
-     * Allows the user to create new items
-     *
-     * @default false
-     */
-    creatable?: boolean;
-    /**
-     * Callback when matching input value against options
-     */
-    onBeforeMatch?: (event: EventBeforeMatch) => void;
-    /**
-     * The name of the associated form control
-     *
-     * @default undefined
-     */
-    name?: string;
-    /**
-     * Change how the selected options are rendered inside the `Chip`.
-     *
-     * @default ({ label }) => label
-     */
-    renderSelected?: (args: {
-        label: string;
-        value: string;
-    }) => ReactNode;
-} & Omit<HTMLAttributes<DSSuggestionElement>, 'defaultValue'>;
-type SuggestionValueProps<T extends {
-    multiple: boolean;
-}> = {
-    /**
-     * Allows the user to select multiple items
-     *
-     * @default false
-     */
-    multiple?: T['multiple'];
-    /**
-     * The selected item of the Suggestion.
-     *
-     * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `SuggestionItem`.
-     *
-     * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.
-     */
-    selected?: SuggestionValue<T> | null;
-    /**
-     * Default selected item when uncontrolled
-     */
-    defaultSelected?: SuggestionValue<T>;
-    /**
-     * Callback when selected items changes
-     */
-    onSelectedChange?: (value: T['multiple'] extends true ? SuggestionItem[] : SuggestionItem | null) => void;
-};
-export type SuggestionSingleProps = SuggestionBaseProps & SuggestionValueProps<{
-    multiple: false;
-}>;
-export type SuggestionMultipleProps = SuggestionBaseProps & SuggestionValueProps<{
-    multiple: true;
-}> & {
-    multiple: true;
-};
-export type SuggestionProps = SuggestionSingleProps | SuggestionMultipleProps;
-export declare const Suggestion: import("react").ForwardRefExoticComponent<SuggestionProps & import("react").RefAttributes<DSSuggestionElement>>;
-export declare const SuggestionContext: import("react").Context<SuggestionContextType>;
-export {};

package/dist/types/components/switch/switch.d.ts

@@ -1,39 +0,0 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import type { DefaultProps, LabelRequired } from '../../types';
-import type { MergeRight } from '../../utilities';
-import { type FieldProps } from '../field';
-import { type InputProps } from '../input/input';
-export type SwitchProps = MergeRight<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, {
-    /**
-     * Optional aria-label
-     */
-    'aria-label'?: string;
-    /**
-     * Switch label
-     */
-    label?: ReactNode;
-    /**
-     * Description for field
-     */
-    description?: ReactNode;
-    /**
-     * Value of the `input` element
-     */
-    value?: InputProps['value'];
-    /**
-     * Position of switch
-     * @default start
-     */
-    position?: FieldProps['position'];
-    /**
-     * If outline, the switch will have a border.
-     */
-    variant?: 'outline';
-} & LabelRequired>;
-/**
- * Switch used to toggle options.
- *
- * @example
- * <Switch label="I agree" value="agree" />
- */
-export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,104 +0,0 @@
-import type { TableProps } from './table';
-import { Table as TableRoot } from './table';
-import type { TableBodyProps } from './table-body';
-import { TableBody } from './table-body';
-import type { TableCellProps } from './table-cell';
-import { TableCell } from './table-cell';
-import type { TableFootProps } from './table-foot';
-import { TableFoot } from './table-foot';
-import type { TableHeadProps } from './table-head';
-import { TableHead } from './table-head';
-import type { TableHeaderCellProps } from './table-header-cell';
-import { TableHeaderCell } from './table-header-cell';
-import type { TableRowProps } from './table-row';
-import { TableRow } from './table-row';
-type Table = typeof TableRoot & {
-    /**
-     * TableHead component, used to display the header of a table. Renders a native HTML thead element.
-     *
-     * @example
-     * <Table.Head>
-     *   <Table.Row>
-     *     <Table.HeaderCell>Name</Table.HeaderCell>
-     *     <Table.HeaderCell>Age</Table.HeaderCell>
-     *   </Table.Row>
-     * </Table.Head>
-     */
-    Head: typeof TableHead;
-    /**
-     * Table.Body component, used to display the body of a table. Renders a native HTML tbody element.
-     *
-     * @example
-     * <Table.Body>
-     *   <Table.Row>
-     *     <Table.Cell>John</Table.Cell>
-     *     <Table.Cell>25</Table.Cell>
-     *   </Table.Row>
-     * </Table.Body>
-     */
-    Body: typeof TableBody;
-    /**
-     * Table.Row component, used to display the rows of a table. Renders a native HTML tr element.
-     *
-     * @example
-     * <Table.Row>
-     *   <Table.Cell>John</Table.Cell>
-     *   <Table.Cell>25</Table.Cell>
-     * </Table.Row>
-     */
-    Row: typeof TableRow;
-    /**
-     * Table.Cell component, used to display the cells of a table. Renders a native HTML td element.
-     *
-     * @example
-     * <Table.Cell>John</Table.Cell>
-     */
-    Cell: typeof TableCell;
-    /**
-     * Table.HeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
-     *
-     * @example
-     * <Table.HeaderCell>Name</Table.HeaderCell>
-     */
-    HeaderCell: typeof TableHeaderCell;
-    /**
-     * Table.Foot component, used to display the footer of a table. Renders a native HTML tfoot element.
-     *
-     * @example
-     * <Table.Foot>
-     *   <Table.Row>
-     *     <Table.Cell>Total</Table.Cell>
-     *     <Table.Cell>2</Table.Cell>
-     *   </Table.Row>
-     * </Table.Foot>
-     */
-    Foot: typeof TableFoot;
-};
-/**
- * Table component, used to display tabular data. Renders a native HTML table element.
- *
- * @example
- * <Table>
- *   <Table.Head>
- *     <Table.Row>
- *       <Table.HeaderCell>Name</Table.HeaderCell>
- *       <Table.HeaderCell>Age</Table.HeaderCell>
- *     </Table.Row>
- *   </Table.Head>
- *   <Table.Body>
- *     <Table.Row>
- *       <Table.Cell>John</Table.Cell>
- *       <Table.Cell>25</Table.Cell>
- *     </Table.Row>
- *   </Table.Body>
- *   <Table.Foot>
- *     <Table.Row>
- *       <Table.Cell>Total</Table.Cell>
- *       <Table.Cell>2</Table.Cell>
- *     </Table.Row>
- *   </Table.Foot>
- * </Table>
- */
-declare const TableComponent: Table;
-export type { TableBodyProps, TableCellProps, TableFootProps, TableHeaderCellProps, TableHeadProps, TableProps, TableRowProps, };
-export { TableBody, TableCell, TableComponent as Table, TableFoot, TableHead, TableHeaderCell, TableRow, };

package/dist/types/components/table/table-body.d.ts

@@ -1,14 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
-/**
- * TableBody component, used to display the body of a table. Renders a native HTML tbody element.
- *
- * @example
- * <TableBody>
- *   <TableRow>
- *     <TableCell>John</TableCell>
- *     <TableCell>25</TableCell>
- *   </TableRow>
- * </TableBody>
- */
-export declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/table/table-cell.d.ts

@@ -1,9 +0,0 @@
-import { type TdHTMLAttributes } from 'react';
-export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
-/**
- * TableCell component, used to display the cells of a table. Renders a native HTML td element.
- *
- * @example
- * <TableCell>John</TableCell>
- */
-export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/types/components/table/table-foot.d.ts

@@ -1,14 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export type TableFootProps = HTMLAttributes<HTMLTableSectionElement>;
-/**
- * TableFoot component, used to display the footer of a table. Renders a native HTML tfoot element.
- *
- * @example
- * <TableFoot>
- *   <TableRow>
- *     <TableCell>Total</TableCell>
- *     <TableCell>2</TableCell>
- *   </TableRow>
- * </TableFoot>
- */
-export declare const TableFoot: import("react").ForwardRefExoticComponent<TableFootProps & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/table/table-head.d.ts

@@ -1,14 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export type TableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
-/**
- * TableHead component, used to display the header of a table. Renders a native HTML thead element.
- *
- * @example
- * <TableHead>
- *   <TableRow>
- *     <TableHeaderCell>Name</TableHeaderCell>
- *     <TableHeaderCell>Age</TableHeaderCell>
- *   </TableRow>
- * </TableHead>
- */
-export declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/table/table-header-cell.d.ts

@@ -1,22 +0,0 @@
-import type { AriaAttributes } from 'react';
-import { type ThHTMLAttributes } from 'react';
-export type TableHeaderCellProps = {
-    /**
-     * If 'none' | 'ascending' | 'descending' | 'other' will add a button to the header cell and change aria-sort and icon
-     * @default undefined
-     */
-    sort?: AriaAttributes['aria-sort'];
-} & ThHTMLAttributes<HTMLTableCellElement>;
-/**
- * TableHeaderCell component, used to display the header cells of a table. Renders a native HTML th element.
- *
- * @example
- * <TableHeaderCell>Name</TableHeaderCell>
- */
-export declare const TableHeaderCell: import("react").ForwardRefExoticComponent<{
-    /**
-     * If 'none' | 'ascending' | 'descending' | 'other' will add a button to the header cell and change aria-sort and icon
-     * @default undefined
-     */
-    sort?: AriaAttributes["aria-sort"];
-} & ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/types/components/table/table-row.d.ts

@@ -1,12 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
-/**
- * TableRow component, used to display the rows of a table. Renders a native HTML tr element.
- *
- * @example
- * <TableRow>
- *   <TableCell>John</TableCell>
- *   <TableCell>25</TableCell>
- * </TableRow>
- */
-export declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;