@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/cjs/utilities/roving-focus/roving-focus-root.js

@@ -1,77 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-var index = require('../index.js');
-var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
-require('@digdir/designsystemet-web');
-
-const RovingFocusContext = react.createContext({
-    elements: { current: new Map() },
-    getOrderedItems: () => [],
-    setFocusableValue: () => {
-        /* intentionally empty */
-    },
-    onShiftTab: () => {
-        /* intentionally empty */
-    },
-    focusableValue: null,
-    orientation: 'horizontal',
-});
-/** @deprecated RovingFocusRoot is deprecated. */
-const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    const activeValueOrNull = activeValue ?? null;
-    const [focusableValue, setFocusableValue] = react.useState(activeValueOrNull);
-    const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
-    const elements = react.useRef(new Map());
-    const myRef = react.useRef(null);
-    const refs = useMergeRefs.useMergeRefs([ref, myRef]);
-    const getOrderedItems = () => {
-        if (!myRef.current)
-            return [];
-        const elementsFromDOM = Array.from(myRef.current.querySelectorAll('[data-roving-tabindex-item]'));
-        return Array.from(elements.current)
-            .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
-            .map(([value, element]) => ({ value, element }));
-    };
-    react.useEffect(() => {
-        setFocusableValue(activeValueOrNull);
-    }, [activeValueOrNull]);
-    index.warn('RovingFocusRoot is deprecated.');
-    return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
-            elements,
-            getOrderedItems,
-            focusableValue,
-            setFocusableValue,
-            onShiftTab: () => {
-                setIsShiftTabbing(true);
-            },
-            orientation,
-        }, children: jsxRuntime.jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
-                onBlur?.(e);
-                setIsShiftTabbing(false);
-                setFocusableValue(activeValue ?? null);
-            }, onFocus: (e) => {
-                onFocus?.(e);
-                if (e.target !== e.currentTarget)
-                    return;
-                const orderedItems = getOrderedItems();
-                if (orderedItems.length === 0)
-                    return;
-                if (focusableValue != null) {
-                    elements.current.get(focusableValue)?.focus();
-                }
-                else if (activeValue != null) {
-                    elements.current.get(activeValue)?.focus();
-                }
-                else {
-                    orderedItems.at(0)?.element.focus();
-                }
-            }, ref: refs }) }));
-});
-
-exports.RovingFocusContext = RovingFocusContext;
-exports.RovingFocusRoot = RovingFocusRoot;

package/dist/cjs/utilities/roving-focus/use-roving-focus.js

@@ -1,45 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var rovingFocusRoot = require('./roving-focus-root.js');
-
-// Logic from: https://www.joshuawootonn.com/react-roving-tabindex
-// Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
-/**
-@deprecated useRovingFocus is deprecated.
-Handles props for `RovingFocus` in context with `RovingFocusRoot` */
-const useRovingFocus = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = react.useContext(rovingFocusRoot.RovingFocusContext);
-    return {
-        getOrderedItems,
-        isFocusable: focusableValue === value,
-        orientation,
-        getRovingProps: (props) => ({
-            ...props,
-            ref: (element) => {
-                if (element) {
-                    elements.current.set(value, element);
-                }
-                else {
-                    elements.current.delete(value);
-                }
-            },
-            onKeyDown: (e) => {
-                props?.onKeyDown?.(e);
-                if (e.shiftKey && e.key === 'Tab') {
-                    onShiftTab();
-                    return;
-                }
-            },
-            onFocus: (e) => {
-                props?.onFocus?.(e);
-                setFocusableValue(value);
-            },
-            'data-roving-tabindex-item': true,
-            tabIndex: focusableValue === value ? 0 : -1,
-        }),
-    };
-};
-
-exports.useRovingFocus = useRovingFocus;

package/dist/types/colors.d.ts

@@ -1 +0,0 @@
-export type { Color, SeverityColors, } from '@digdir/designsystemet-types';

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

@@ -1,316 +0,0 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import type { Option } from './useCombobox';
-import type { FormFieldProps } from './useFormField/useFormField';
-export type ComboboxProps = {
-    /**
-     * Label for the combobox.
-     *
-     * Passed label will be encapsulated by a `label` element.
-     */
-    label?: ReactNode;
-    /**
-     * Visually hides `label` and `description` (still available for screen readers)
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * String array of selected options. Contains only one option during single selection mode.
-     */
-    value?: string[];
-    /**
-     * String array of initial selected options. Contains only one option during single selection mode.
-     */
-    initialValue?: string[];
-    /**
-     * Callback function that is called when the value changes
-     */
-    onValueChange?: (value: string[]) => void;
-    /**
-     * Multiple options can be selected
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Name of the value when used in a formPuse
-     */
-    name?: string;
-    /**
-     * Exposes the HTML `size` attribute.
-     * @default 0
-     */
-    htmlSize?: number;
-    /**
-     * Hides chips when multiple options are selected
-     * @default false
-     */
-    hideChips?: boolean;
-    /**
-     * Hides the clear button
-     * @default false
-     */
-    hideClearButton?: boolean;
-    /**
-     * Label for the clear button
-     * @default 'Fjern alt'
-     */
-    clearButtonLabel?: string;
-    /**
-     * Enables virtualizing of options list.
-     * @see https://tanstack.com/virtual
-     * @default false
-     */
-    virtual?: boolean;
-    /**
-     * Value of the input field
-     */
-    inputValue?: string;
-    /**
-     * Adds `aria-busy` and displays loading state for the Combobox
-     * All options will be hidden and replaced with a loading message.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Text to display when the combobox is loading
-     * @default 'Laster...'
-     */
-    loadingLabel?: string;
-    /**
-     * Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
-     * @param inputValue
-     * @param option
-     * @returns boolean
-     *
-     * @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
-     */
-    filter?: (inputValue: string, option: Option) => boolean;
-    /**
-     * Add a screen reader label to the chips
-     * @param option
-     * @returns string
-     *
-     * @default (option) => 'Slett ' + option.label,
-     */
-    chipSrLabel?: (option: Option) => string;
-    /**
-     * Portals the floating element outside of the app root and into the body.
-     * @see https://floating-ui.com/docs/floatingportal
-     * @default false
-     */
-    portal?: boolean;
-} & FormFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
-/**
- * @deprecated Use `Suggestion` instead
- */
-export declare const ComboboxComponent: import("react").ForwardRefExoticComponent<{
-    /**
-     * Label for the combobox.
-     *
-     * Passed label will be encapsulated by a `label` element.
-     */
-    label?: ReactNode;
-    /**
-     * Visually hides `label` and `description` (still available for screen readers)
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * String array of selected options. Contains only one option during single selection mode.
-     */
-    value?: string[];
-    /**
-     * String array of initial selected options. Contains only one option during single selection mode.
-     */
-    initialValue?: string[];
-    /**
-     * Callback function that is called when the value changes
-     */
-    onValueChange?: (value: string[]) => void;
-    /**
-     * Multiple options can be selected
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Name of the value when used in a formPuse
-     */
-    name?: string;
-    /**
-     * Exposes the HTML `size` attribute.
-     * @default 0
-     */
-    htmlSize?: number;
-    /**
-     * Hides chips when multiple options are selected
-     * @default false
-     */
-    hideChips?: boolean;
-    /**
-     * Hides the clear button
-     * @default false
-     */
-    hideClearButton?: boolean;
-    /**
-     * Label for the clear button
-     * @default 'Fjern alt'
-     */
-    clearButtonLabel?: string;
-    /**
-     * Enables virtualizing of options list.
-     * @see https://tanstack.com/virtual
-     * @default false
-     */
-    virtual?: boolean;
-    /**
-     * Value of the input field
-     */
-    inputValue?: string;
-    /**
-     * Adds `aria-busy` and displays loading state for the Combobox
-     * All options will be hidden and replaced with a loading message.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Text to display when the combobox is loading
-     * @default 'Laster...'
-     */
-    loadingLabel?: string;
-    /**
-     * Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
-     * @param inputValue
-     * @param option
-     * @returns boolean
-     *
-     * @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
-     */
-    filter?: (inputValue: string, option: Option) => boolean;
-    /**
-     * Add a screen reader label to the chips
-     * @param option
-     * @returns string
-     *
-     * @default (option) => 'Slett ' + option.label,
-     */
-    chipSrLabel?: (option: Option) => string;
-    /**
-     * Portals the floating element outside of the app root and into the body.
-     * @see https://floating-ui.com/docs/floatingportal
-     * @default false
-     */
-    portal?: boolean;
-} & {
-    error?: ReactNode;
-    errorId?: string;
-    disabled?: boolean;
-    description?: ReactNode;
-    id?: string;
-    readOnly?: boolean;
-    size?: import("@digdir/designsystemet-types").Size;
-} & Pick<import("react").HTMLAttributes<HTMLElement>, "aria-describedby"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
-export declare const Combobox: import("react").ForwardRefExoticComponent<{
-    /**
-     * Label for the combobox.
-     *
-     * Passed label will be encapsulated by a `label` element.
-     */
-    label?: ReactNode;
-    /**
-     * Visually hides `label` and `description` (still available for screen readers)
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * String array of selected options. Contains only one option during single selection mode.
-     */
-    value?: string[];
-    /**
-     * String array of initial selected options. Contains only one option during single selection mode.
-     */
-    initialValue?: string[];
-    /**
-     * Callback function that is called when the value changes
-     */
-    onValueChange?: (value: string[]) => void;
-    /**
-     * Multiple options can be selected
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * Name of the value when used in a formPuse
-     */
-    name?: string;
-    /**
-     * Exposes the HTML `size` attribute.
-     * @default 0
-     */
-    htmlSize?: number;
-    /**
-     * Hides chips when multiple options are selected
-     * @default false
-     */
-    hideChips?: boolean;
-    /**
-     * Hides the clear button
-     * @default false
-     */
-    hideClearButton?: boolean;
-    /**
-     * Label for the clear button
-     * @default 'Fjern alt'
-     */
-    clearButtonLabel?: string;
-    /**
-     * Enables virtualizing of options list.
-     * @see https://tanstack.com/virtual
-     * @default false
-     */
-    virtual?: boolean;
-    /**
-     * Value of the input field
-     */
-    inputValue?: string;
-    /**
-     * Adds `aria-busy` and displays loading state for the Combobox
-     * All options will be hidden and replaced with a loading message.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Text to display when the combobox is loading
-     * @default 'Laster...'
-     */
-    loadingLabel?: string;
-    /**
-     * Filter function for filtering the list of options. Return `true` to show option, `false` to hide option.
-     * @param inputValue
-     * @param option
-     * @returns boolean
-     *
-     * @default (inputValue, option) => option.value.toLowerCase().startsWith(inputValue.toLowerCase())
-     */
-    filter?: (inputValue: string, option: Option) => boolean;
-    /**
-     * Add a screen reader label to the chips
-     * @param option
-     * @returns string
-     *
-     * @default (option) => 'Slett ' + option.label,
-     */
-    chipSrLabel?: (option: Option) => string;
-    /**
-     * Portals the floating element outside of the app root and into the body.
-     * @see https://floating-ui.com/docs/floatingportal
-     * @default false
-     */
-    portal?: boolean;
-} & {
-    error?: ReactNode;
-    errorId?: string;
-    disabled?: boolean;
-    description?: ReactNode;
-    id?: string;
-    readOnly?: boolean;
-    size?: import("@digdir/designsystemet-types").Size;
-} & Pick<import("react").HTMLAttributes<HTMLElement>, "aria-describedby"> & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/Combobox/ComboboxContext.d.ts

@@ -1,41 +0,0 @@
-import type { UseFloatingReturn, UseListNavigationProps, useInteractions } from '@floating-ui/react';
-import type { Dispatch, Ref, RefObject, SetStateAction } from 'react';
-import type { ComboboxProps } from './Combobox';
-import type { Option, useCombobox } from './useCombobox';
-import type { useFormField } from './useFormField/useFormField';
-export type ComboboxContextType = {
-    multiple: NonNullable<ComboboxProps['multiple']>;
-    disabled: NonNullable<ComboboxProps['disabled']>;
-    readOnly: NonNullable<ComboboxProps['readOnly']>;
-    htmlSize: ComboboxProps['htmlSize'];
-    clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
-    filteredOptions: ReturnType<typeof useCombobox>['filteredOptions'];
-    options: {
-        [key: string]: Option;
-    };
-    selectedOptions: {
-        [key: string]: Option;
-    };
-    size: NonNullable<ComboboxProps['size']>;
-    formFieldProps: ReturnType<typeof useFormField>;
-    refs: UseFloatingReturn['refs'];
-    inputRef: RefObject<HTMLInputElement | null>;
-    open: boolean;
-    inputValue: string;
-    customIds: string[];
-    setInputValue: Dispatch<SetStateAction<string>>;
-    setOpen: (open: boolean) => void;
-    getReferenceProps: (props?: Record<string, unknown>) => Record<string, unknown>;
-    getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
-    onOptionClick: (value: string) => void;
-    chipSrLabel: NonNullable<ComboboxProps['chipSrLabel']>;
-    handleSelectOption: (args: {
-        option: Option | null;
-        remove?: boolean;
-        clear?: boolean;
-    }) => void;
-    listRef: UseListNavigationProps['listRef'];
-    forwareddRef: Ref<HTMLInputElement>;
-    setListRef: (index: number, ref: HTMLElement | null) => void;
-};
-export declare const ComboboxContext: import("react").Context<ComboboxContextType | undefined>;

package/dist/types/components/Combobox/ComboboxIdContext.d.ts

@@ -1,18 +0,0 @@
-import type { Dispatch, ReactNode } from 'react';
-type ComboboxIdContextType = {
-    activeIndex: number;
-};
-export declare const ComboboxIdContext: import("react").Context<ComboboxIdContextType>;
-type SetActiveIndexAction = {
-    type: 'SET_ACTIVE_INDEX';
-    payload: number;
-};
-type ComboboxIdReducerAction = SetActiveIndexAction;
-export declare const ComboboxIdReducer: (state: ComboboxIdContextType, action: ComboboxIdReducerAction) => ComboboxIdContextType;
-export declare const ComboboxIdDispatch: import("react").Context<Dispatch<SetActiveIndexAction>>;
-export declare const ComboboxIdProvider: ({ children }: {
-    children: ReactNode;
-}) => import("react").JSX.Element;
-export declare function useComboboxIdDispatch(): Dispatch<SetActiveIndexAction>;
-export declare function useComboboxId(): ComboboxIdContextType;
-export {};

package/dist/types/components/Combobox/Custom.d.ts

@@ -1,32 +0,0 @@
-import type { HTMLAttributes } from 'react';
-type InteractiveProps = {
-    interactive: true;
-    id: string;
-};
-type NonInteractiveProps = {
-    interactive?: false;
-    id?: string;
-};
-export type ComboboxCustomProps = {
-    /**
-     * Adds the item to the navigation flow at the start of the list.
-     * @default false
-     */
-    interactive?: boolean;
-    /**
-     * Required if the element is interactive.
-     */
-    id?: string;
-    /**
-     * Event handler for select event.
-     * Only called if the element is interactive.
-     */
-    onSelect?: () => void;
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     * @default false
-     */
-    asChild?: boolean;
-} & HTMLAttributes<HTMLDivElement> & (InteractiveProps | NonInteractiveProps);
-declare const ComboboxCustom: import("react").ForwardRefExoticComponent<ComboboxCustomProps & import("react").RefAttributes<HTMLDivElement>>;
-export { ComboboxCustom };

package/dist/types/components/Combobox/Empty.d.ts

@@ -1,4 +0,0 @@
-import type { HTMLAttributes } from 'react';
-export type ComboboxEmptyProps = HTMLAttributes<HTMLDivElement>;
-declare const ComboboxEmpty: import("react").ForwardRefExoticComponent<ComboboxEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
-export { ComboboxEmpty };

package/dist/types/components/Combobox/Option/Description.d.ts

@@ -1,4 +0,0 @@
-import type { HTMLAttributes } from 'react';
-type ComboboxOptionDescriptionProps = HTMLAttributes<HTMLSpanElement>;
-declare const ComboboxOptionDescription: import("react").ForwardRefExoticComponent<ComboboxOptionDescriptionProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default ComboboxOptionDescription;

package/dist/types/components/Combobox/Option/Option.d.ts

@@ -1,33 +0,0 @@
-import type { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
-export type ComboboxOptionProps = {
-    /**
-     * The value returned when the option is selected
-     */
-    value: string;
-    /**
-     * The index of the option in the list, will be overwritten by Combobox.
-     */
-    description?: string;
-    /**
-     * The text displayed in the input or in the chips when the option is selected.
-     * Required if children is not composed of strings only.
-     */
-    displayValue?: string;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
-declare const ComboboxOption: import("react").NamedExoticComponent<{
-    /**
-     * The value returned when the option is selected
-     */
-    value: string;
-    /**
-     * The index of the option in the list, will be overwritten by Combobox.
-     */
-    description?: string;
-    /**
-     * The text displayed in the input or in the chips when the option is selected.
-     * Required if children is not composed of strings only.
-     */
-    displayValue?: string;
-} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
-export { ComboboxOption };
-export declare function isComboboxOption(child: ReactNode): child is ReactElement<ComboboxOptionProps>;

package/dist/types/components/Combobox/Option/SelectedIcon.d.ts

@@ -1,9 +0,0 @@
-type SelectedIconProps = {
-    multiple: boolean;
-    selected: boolean;
-};
-declare const SelectedIcon: {
-    ({ multiple, selected }: SelectedIconProps): import("react").JSX.Element;
-    displayName: string;
-};
-export { SelectedIcon };

package/dist/types/components/Combobox/Option/useComboboxOption.d.ts

@@ -1,16 +0,0 @@
-import type { Ref } from 'react';
-import type { Option } from '../useCombobox';
-type UseComboboxOptionProps = {
-    id?: string;
-    ref: Ref<HTMLButtonElement>;
-    value: string;
-};
-type UseComboboxOptionReturn = {
-    id: string;
-    ref: Ref<HTMLButtonElement>;
-    selected: Option;
-    active: boolean;
-    onOptionClick: () => void;
-};
-export declare const useComboboxOption: ({ id, ref, value, }: UseComboboxOptionProps) => UseComboboxOptionReturn;
-export {};

package/dist/types/components/Combobox/data/data.d.ts

@@ -1,6 +0,0 @@
-export declare const data: {
-    sourceCode: string;
-    sourceName: string;
-    targetCode: string;
-    targetName: string;
-}[];

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

@@ -1,15 +0,0 @@
-import { Combobox as ComboboxRoot } from './Combobox';
-import { ComboboxEmpty } from './Empty';
-import { ComboboxOption } from './Option/Option';
-type ComboboxComponent = typeof ComboboxRoot & {
-    Option: typeof ComboboxOption;
-    Empty: typeof ComboboxEmpty;
-};
-/**
- * @deprecated Use `Suggestion` instead
- */
-declare const Combobox: ComboboxComponent;
-export type { ComboboxProps } from './Combobox';
-export type { ComboboxEmptyProps } from './Empty';
-export type { ComboboxOptionProps } from './Option/Option';
-export { Combobox, ComboboxEmpty, ComboboxOption };

package/dist/types/components/Combobox/internal/ComboboxChips.d.ts

@@ -1,5 +0,0 @@
-declare const ComboboxChips: {
-    (): import("react").JSX.Element;
-    displayName: string;
-};
-export default ComboboxChips;

package/dist/types/components/Combobox/internal/ComboboxClearButton.d.ts

@@ -1,3 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-declare const ComboboxClearButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
-export default ComboboxClearButton;

package/dist/types/components/Combobox/internal/ComboboxError.d.ts

@@ -1,12 +0,0 @@
-import type { ComboboxProps } from '../Combobox';
-import type { useFormField } from '../useFormField/useFormField';
-type ComboboxErrorProps = {
-    size: ComboboxProps['size'];
-    error?: ComboboxProps['error'];
-    formFieldProps: ReturnType<typeof useFormField>;
-};
-declare const ComboboxError: {
-    ({ size, error, formFieldProps }: ComboboxErrorProps): import("react").JSX.Element;
-    displayName: string;
-};
-export default ComboboxError;

package/dist/types/components/Combobox/internal/ComboboxInput.d.ts

@@ -1,14 +0,0 @@
-import type { InputHTMLAttributes, KeyboardEvent } from 'react';
-import type { ComboboxProps } from '../Combobox';
-type ComboboxInputProps = {
-    hideClearButton: ComboboxProps['hideClearButton'];
-    listId: string;
-    error: ComboboxProps['error'];
-    hideChips: NonNullable<ComboboxProps['hideChips']>;
-    handleKeyDown: (event: KeyboardEvent) => void;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
-declare const ComboboxInput: {
-    ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }: ComboboxInputProps): import("react").JSX.Element;
-    displayName: string;
-};
-export default ComboboxInput;