@digdir/designsystemet-react 1.0.0-rc.8 → 1.0.0

package/dist/cjs/components/Combobox/internal/ComboboxNative.js

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utilities = require('../utilities.js');
+
+const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
+    const VALUE = Object.keys(selectedOptions).map((key) => utilities.removePrefix(key));
+    return (jsxRuntime.jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple ? VALUE : VALUE[0], onChange: () => { }, children: VALUE.map((value) => (jsxRuntime.jsx("option", { value: value }, value))) }));
+};
+ComboboxNative.displayName = 'ComboboxNative';
+
+module.exports = ComboboxNative;

package/dist/cjs/components/Combobox/useCombobox.js

@@ -0,0 +1,122 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var Option = require('./Option/Option.js');
+var utilities = require('./utilities.js');
+
+const isOption = (option) => !!option;
+function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, initialValue, }) {
+    const filterCallback = react.useCallback(filter, [filter]);
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = react.useMemo(() => {
+        const allChildren = react.Children.toArray(children);
+        const result = allChildren.reduce((acc, child) => {
+            if (Option.isComboboxOption(child)) {
+                acc.optionsChildren.push(child);
+            }
+            else {
+                acc.restChildren.push(child);
+                if (utilities.isInteractiveComboboxCustom(child)) {
+                    const childElement = child;
+                    acc.interactiveChildren.push(childElement);
+                    if (!childElement.props.id) {
+                        throw new Error('If ComboboxCustom is interactive, it must have an id');
+                    }
+                    acc.customIds.push(childElement.props.id);
+                }
+            }
+            return acc;
+        }, {
+            optionsChildren: [],
+            customIds: [],
+            restChildren: [],
+            interactiveChildren: [],
+        });
+        return result;
+    }, [children]);
+    const options = react.useMemo(() => {
+        const values = [];
+        const allOptions = {};
+        optionsChildren.map((child) => {
+            const props = child.props;
+            let label = props.displayValue || '';
+            if (!props.displayValue) {
+                let childrenLabel = '';
+                // go over children and find all strings
+                react.Children.forEach(props.children, (child) => {
+                    if (typeof child === 'string') {
+                        childrenLabel += child;
+                    }
+                    else {
+                        throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
+                    }
+                });
+                label = childrenLabel;
+            }
+            if (values.includes(props.value)) {
+                console.warn(`Combobox has multiple options with the same value: ${props.value}`);
+            }
+            values.push(props.value);
+            allOptions[utilities.prefix(String(props.value))] = {
+                value: String(props.value),
+                label,
+                displayValue: props.displayValue,
+                description: props.description,
+            };
+        });
+        return allOptions;
+    }, [optionsChildren]);
+    const preSelectedOptions = react.useMemo(() => (initialValue?.map((key) => {
+        return utilities.prefix(key);
+    }) || []).reduce((acc, value) => {
+        const option = options[value];
+        if (isOption(option)) {
+            acc[value] = option;
+        }
+        return acc;
+    }, {}), [initialValue, options]);
+    const [selectedOptions, setSelectedOptions] = react.useState(preSelectedOptions);
+    const { filteredOptions, filteredOptionsChildren } = react.useMemo(() => {
+        const filteredOptions = [];
+        const filteredOptionsChildren = Object.keys(options)
+            .map((option, index) => {
+            /* If we have a selected value in single mode and the input matches an option, return all children */
+            if (!multiple && Object.keys(selectedOptions).length === 1) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            if (multiple && selectedOptions[option]) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            if (filterCallback(inputValue, options[option])) {
+                filteredOptions.push(option);
+                return optionsChildren[index];
+            }
+            return;
+        })
+            .filter((child) => child);
+        return { filteredOptions, filteredOptionsChildren };
+    }, [
+        filterCallback,
+        inputValue,
+        multiple,
+        options,
+        optionsChildren,
+        selectedOptions,
+    ]);
+    return {
+        filteredOptionsChildren,
+        filteredOptions,
+        restChildren,
+        options,
+        customIds,
+        selectedOptions,
+        interactiveChildren,
+        setSelectedOptions,
+    };
+}
+
+exports.useCombobox = useCombobox;

package/dist/cjs/components/Combobox/useComboboxKeyboard.js

@@ -0,0 +1,75 @@
+'use client';
+'use strict';
+
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    // handle keyboard navigation in the list
+    const handleKeyDownFunc = (event) => {
+        if (readOnly || disabled)
+            return;
+        if (!event)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (open)
+                    break;
+                setOpen(true);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                /* If we are on the first item, close */
+                if (activeIndex !== 0)
+                    break;
+                setOpen(false);
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                // ignore if it is closed
+                if (!open)
+                    break;
+                // check if we are in the custom components
+                if (activeIndex <= interactiveChildren.length - 1) {
+                    const selectedComponent = interactiveChildren[activeIndex];
+                    if (selectedComponent.props.onSelect) {
+                        selectedComponent?.props.onSelect();
+                        return;
+                    }
+                }
+                // if we are in the options, find the actual index
+                const valueIndex = activeIndex - interactiveChildren.length;
+                const option = filteredOptions[valueIndex];
+                handleSelectOption({ option: options[option] });
+                break;
+            }
+            case 'Backspace':
+                // if we are in single mode, we need to set selectedOptions to empty
+                if (!multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                    break;
+                }
+                if (inputValue === '' && multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    /* Remove last option, and use handleSelectOption */
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                }
+                break;
+        }
+    };
+    const handleKeyDown = useDebounceCallback.useDebounceCallback(handleKeyDownFunc, 20);
+    return handleKeyDown;
+};
+
+exports.useComboboxKeyboard = useComboboxKeyboard;

package/dist/cjs/components/Combobox/useFloatingCombobox.js

@@ -0,0 +1,76 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+var reactDom = require('react-dom');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+
+const useFloatingCombobox = ({ listRef }) => {
+    const [open, setOpen] = react.useState(false);
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    const dispatch = ComboboxIdContext.useComboboxIdDispatch();
+    // floating UI
+    const { refs, floatingStyles, context } = react$1.useFloating({
+        open,
+        onOpenChange: (newOpen) => {
+            if (!newOpen)
+                dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
+            reactDom.flushSync(() => {
+                if (refs.floating.current && !newOpen) {
+                    refs.floating.current.scrollTop = 0;
+                }
+                setTimeout(() => {
+                    setOpen(newOpen);
+                }, 1);
+            });
+        },
+        whileElementsMounted: (reference, floating, update) => {
+            react$1.autoUpdate(reference, floating, update);
+            return () => {
+                floating.scrollTop = 0;
+            };
+        },
+        middleware: [
+            react$1.flip({ padding: 10 }),
+            react$1.size({
+                apply({ rects, elements }) {
+                    requestAnimationFrame(() => {
+                        Object.assign(elements.floating.style, {
+                            width: `${rects.reference.width}px`,
+                            maxHeight: `200px`,
+                        });
+                    });
+                },
+            }),
+            react$1.offset(10),
+        ],
+    });
+    const role = react$1.useRole(context, { role: 'listbox' });
+    const dismiss = react$1.useDismiss(context);
+    const listNav = react$1.useListNavigation(context, {
+        listRef,
+        activeIndex,
+        virtual: true,
+        scrollItemIntoView: true,
+        enabled: open,
+        focusItemOnHover: true,
+        onNavigate: (index) => {
+            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
+        },
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([role, dismiss, listNav]);
+    return {
+        open,
+        setOpen,
+        activeIndex,
+        refs,
+        floatingStyles,
+        context,
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+    };
+};
+
+exports.useFloatingCombobox = useFloatingCombobox;

package/dist/cjs/components/Combobox/useFormField/FieldsetContext.js

@@ -0,0 +1,8 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const FieldsetContext = react.createContext(null);
+
+exports.FieldsetContext = FieldsetContext;

package/dist/cjs/components/Combobox/useFormField/useFormField.js

@@ -0,0 +1,36 @@
+'use client';
+'use strict';
+
+var cl = require('clsx/lite');
+var react = require('react');
+var FieldsetContext = require('./FieldsetContext.js');
+
+/**
+ * Handles props and their state for various form-fields in context with Fieldset
+ */
+const useFormField = (props, prefix) => {
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
+    const randomId = react.useId();
+    const id = props.id ?? `${prefix}-${randomId}`;
+    const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
+    const descriptionId = `${prefix}-description-${randomId}`;
+    const size = props.size ?? fieldset?.size ?? 'md';
+    const disabled = fieldset?.disabled || props?.disabled;
+    const hasError = !disabled && !!(props.error || fieldset?.error);
+    return {
+        hasError,
+        errorId,
+        descriptionId,
+        size,
+        inputProps: {
+            id,
+            disabled,
+            'aria-invalid': hasError ? true : undefined,
+            'aria-describedby': cl(props['aria-describedby'], !!props?.description &&
+                typeof props?.description === 'string' &&
+                descriptionId, hasError && !fieldset?.error && errorId, hasError && !!fieldset?.error && fieldset?.errorId) || undefined,
+        },
+    };
+};
+
+exports.useFormField = useFormField;

package/dist/cjs/components/Combobox/utilities.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var Custom = require('./Custom.js');
+
+function isComboboxCustom(child) {
+    return react.isValidElement(child) && child.type === Custom.ComboboxCustom;
+}
+function isInteractiveComboboxCustom(child) {
+    return isComboboxCustom(child) && child.props.interactive === true;
+}
+const INTERNAL_OPTION_PREFIX = 'internal-option-';
+/**
+ * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
+ * @param value
+ * @returns
+ */
+const prefix = (value) => {
+    return INTERNAL_OPTION_PREFIX + value;
+};
+const removePrefix = (value) => {
+    return value.slice(INTERNAL_OPTION_PREFIX.length);
+};
+const setReactInputValue = (input, value) => {
+    const previousValue = input.value;
+    input.value = value;
+    const tracker = input._valueTracker;
+    if (typeof tracker !== 'undefined') {
+        tracker.setValue(previousValue);
+    }
+    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+};
+
+exports.isComboboxCustom = isComboboxCustom;
+exports.isInteractiveComboboxCustom = isInteractiveComboboxCustom;
+exports.prefix = prefix;
+exports.removePrefix = removePrefix;
+exports.setReactInputValue = setReactInputValue;

package/dist/cjs/components/Details/Details.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var cl = require('clsx/lite');
+var react = require('react');
+require('@u-elements/u-details');
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, variant = 'default', onToggle, ...rest }, ref) {
+    const detailsRef = react.useRef(null);
+    const initialOpen = react.useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
+    const mergedRefs = react$1.useMergeRefs([detailsRef, ref]);
+    const onToggleRef = react.useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
+    const openRef = react.useRef(open);
+    onToggleRef.current = onToggle;
+    openRef.current = open;
+    // Provide onToggle event and controlled state
+    react.useEffect(() => {
+        const details = detailsRef.current;
+        const handleToggle = (event) => {
+            if (!details || details?.open === openRef.current)
+                return;
+            onToggleRef.current?.(event);
+            if (openRef.current !== undefined)
+                details.open = openRef.current; // Don't update DOM unless controlled state changes
+        };
+        details?.addEventListener('toggle', handleToggle, true);
+        return () => details?.removeEventListener('toggle', handleToggle, true);
+    }, []);
+    return (jsxRuntime.jsx("u-details", { class: cl('ds-details', className), open: (open ?? initialOpen.current) || undefined, "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+exports.Details = Details;

package/dist/cjs/components/Details/DetailsContent.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Details content component, contains the content of the details item.
+ *
+ * @example
+ * <DetailsContent>Content</DetailsContent>
+ */
+const DetailsContent = react.forwardRef(function DetailsContent(rest, ref) {
+    return jsxRuntime.jsx("div", { ref: ref, ...rest });
+});
+
+exports.DetailsContent = DetailsContent;

package/dist/cjs/components/Details/DetailsSummary.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Details summary component, contains a the heading to toggle the content.
+ *
+ * @example
+ * <Details.Summary>Heading</Details.Summary>
+ */
+const DetailsSummary = react.forwardRef(function DetailsSummary({ className, ...rest }, ref) {
+    /* Set `className` as `class` so react is happy */
+    return jsxRuntime.jsx("u-summary", { ref: ref, class: className, ...rest });
+});
+
+exports.DetailsSummary = DetailsSummary;

package/dist/cjs/components/Details/index.js

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var Details$1 = require('./Details.js');
+var DetailsContent = require('./DetailsContent.js');
+var DetailsSummary = require('./DetailsSummary.js');
+
+/**
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
+ * @example
+ * <Details>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
+ * </Details>
+ */
+const Details = Object.assign(Details$1.Details, {
+    Summary: DetailsSummary.DetailsSummary,
+    Content: DetailsContent.DetailsContent,
+});
+Details.Summary.displayName = 'Details.Summary';
+Details.Content.displayName = 'Details.Content';
+
+exports.DetailsContent = DetailsContent.DetailsContent;
+exports.DetailsSummary = DetailsSummary.DetailsSummary;
+exports.Details = Details;

package/dist/cjs/components/Dialog/Dialog.js

@@ -0,0 +1,82 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var DialogTriggerContext = require('./DialogTriggerContext.js');
+var Button = require('../Button/Button.js');
+
+/**
+ * Dialog component, used to display a dialog dialog.
+ *
+ * @example with TriggerContext
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     <Dialog.Block>
+ *       Content
+ *     </Dialog.Block>
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ *
+ * @example without TriggerContext
+ * const dialogRef = useRef<HTMLDialogElement>(null);
+ *
+ * ...
+ *
+ * <Button onClick={() => dialogRef.current?.showModal()}>Open Dialog</Button>
+ * <Dialog ref={dialogRef}>
+ *   Content
+ * </Dialog>
+ */
+const Dialog = react.forwardRef(function Dialog({ asChild, children, className, closeButton = 'Lukk dialogvindu', closedby = 'closerequest', modal = true, onClose, open, ...rest }, ref) {
+    const contextRef = react.useContext(DialogTriggerContext.Context);
+    const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
+    const Component = asChild ? reactSlot.Slot : 'dialog';
+    const mergedRefs = react$1.useMergeRefs([contextRef, ref, dialogRef]);
+    const showProp = modal ? 'showModal' : 'show';
+    react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
+    react.useEffect(() => {
+        const dialog = dialogRef.current;
+        const handleClosedby = (event) => {
+            const { clientY: y, clientX: x, target } = event;
+            if (event instanceof KeyboardEvent)
+                return (closedby === 'none' &&
+                    event.key === 'Escape' &&
+                    event.preventDefault()); // Skip ESC-key if closedby="none"
+            if (window.getSelection()?.toString())
+                return; // Fix bug where if you select text spanning two divs it thinks you clicked outside
+            if (dialog && target === dialog && closedby === 'any') {
+                const { top, left, right, bottom } = dialog.getBoundingClientRect();
+                const isInDialog = top <= y && y <= bottom && left <= x && x <= right;
+                if (!isInDialog)
+                    dialog?.close(); // Both <dialog> and ::backdrop is considered same event.target
+            }
+        };
+        const handleAutoFocus = () => {
+            const autofocus = dialog?.querySelector('[autofocus]');
+            if (document.activeElement !== autofocus)
+                autofocus?.focus();
+        };
+        dialog?.addEventListener('animationend', handleAutoFocus);
+        dialog?.addEventListener('click', handleClosedby);
+        dialog?.addEventListener('keydown', handleClosedby);
+        return () => {
+            dialog?.removeEventListener('animationend', handleAutoFocus);
+            dialog?.removeEventListener('click', handleClosedby);
+            dialog?.removeEventListener('keydown', handleClosedby);
+        };
+    }, [closedby]);
+    /* handle closing */
+    react.useEffect(() => {
+        const handleClose = (event) => onClose?.(event);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
+    }, [onClose]);
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(Button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
+});
+
+exports.Dialog = Dialog;

package/dist/cjs/components/Dialog/DialogBlock.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * DialogBlock component, used to separate content in a Dialog.
+ *
+ * @example
+ * <Dialog>
+ *   <Dialog.Block>
+ *     Header
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Content
+ *   </Dialog.Block>
+ *   <Dialog.Block>
+ *     Footer
+ *   </Dialog.Block>
+ * </Dialog>
+ */
+const DialogBlock = react.forwardRef(function DialogBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-dialog__block', className), ref: ref, ...rest }));
+});
+
+exports.DialogBlock = DialogBlock;

package/dist/cjs/components/Dialog/DialogTrigger.js

@@ -0,0 +1,33 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var Button = require('../Button/Button.js');
+var DialogTriggerContext = require('./DialogTriggerContext.js');
+
+/**
+ * DialogTrigger component, used within a Dialog.TriggerContext to open a dialog.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTrigger = react.forwardRef(function DialogTrigger({ asChild, ...rest }, ref) {
+    const contextRef = react.useContext(DialogTriggerContext.Context);
+    const Component = asChild ? reactSlot.Slot : Button.Button;
+    const openDialog = () => {
+        /* check if element has `data-modal`, it it has, use `showModal` */
+        contextRef.current?.getAttribute('data-modal') === 'true'
+            ? contextRef.current?.showModal()
+            : contextRef.current?.show();
+    };
+    return (jsxRuntime.jsx(Component, { "aria-haspopup": 'dialog', onClick: openDialog, ref: ref, ...rest }));
+});
+
+exports.DialogTrigger = DialogTrigger;

package/dist/cjs/components/Dialog/DialogTriggerContext.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Context = react.createContext({
+    current: null,
+});
+/**
+ * DialogTriggerContext component, used to provide a context for a dialog trigger.
+ *
+ * @example
+ * <Dialog.TriggerContext>
+ *   <Dialog.Trigger>Open Dialog</Dialog.Trigger>
+ *   <Dialog>
+ *     Content
+ *   </Dialog>
+ * </Dialog.TriggerContext>
+ */
+const DialogTriggerContext = ({ children, }) => {
+    const contextRef = react.useRef(null);
+    return jsxRuntime.jsx(Context.Provider, { value: contextRef, children: children });
+};
+DialogTriggerContext.displayName = 'DialogTriggerContext';
+
+exports.Context = Context;
+exports.DialogTriggerContext = DialogTriggerContext;