@digdir/designsystemet-react 1.0.8 → 1.1.1

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

@@ -6,7 +6,6 @@ var react$1 = require('@floating-ui/react');
 var reactVirtual = require('@tanstack/react-virtual');
 var cl = require('clsx/lite');
 var react = require('react');
-var useFormField = require('./useFormField/useFormField.js');
 var ComboboxContext = require('./ComboboxContext.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 var Custom = require('./Custom.js');
@@ -17,6 +16,7 @@ var ComboboxNative = require('./internal/ComboboxNative.js');
 var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
+var useFormField = require('./useFormField/useFormField.js');
 var utilities = require('./utilities.js');
 var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var Spinner = require('../Spinner/Spinner.js');

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

@@ -21,7 +21,7 @@ const ComboboxIdReducer = (state, action) => {
 const ComboboxIdDispatch = react.createContext(() => {
     throw new Error('ComboboxIdDispatch must be used within a provider');
 });
-const ComboboxIdProvider = ({ children, }) => {
+const ComboboxIdProvider = ({ children }) => {
     const [state, dispatch] = react.useReducer(ComboboxIdReducer, {
         activeIndex: 0,
     });

package/dist/cjs/components/Field/Field.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var fieldObserver = require('./fieldObserver.js');
@@ -18,11 +19,12 @@ var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js')
  *   <ValidationMessage>Feilmelding</ValidationMessage>
  * </Field>
  */
-const Field = react.forwardRef(function Field({ className, position, ...rest }, ref) {
+const Field = react.forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
     const fieldRef = react.useRef(null);
     const mergedRefs = useMergeRefs.useMergeRefs([fieldRef, ref]);
     react.useEffect(() => fieldObserver.fieldObserver(fieldRef.current), []);
-    return (jsxRuntime.jsx("div", { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
+    return (jsxRuntime.jsx(Component, { className: cl('ds-field', className), "data-position": position, ref: mergedRefs, ...rest }));
 });
 
 exports.Field = Field;

package/dist/cjs/components/Suggestion/Suggestion.js

@@ -2,52 +2,83 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var uDatalist = require('@u-elements/u-datalist');
-var cl = require('clsx/lite');
 var react = require('react');
+require('@u-elements/u-combobox');
+var cl = require('clsx/lite');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
-const SuggestionContext = react.createContext({});
-/**
- * A component that provides a suggestion list for an input field.
- *
- * @example
- * <Suggestion>
- *   <Suggestion.Input />
- *   <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>
- */
-const Suggestion = react.forwardRef(function Suggestion({ className, filter = true, asChild, ...rest }, ref) {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    const [listId, setListId] = react.useState(react.useId());
-    const inputRef = react.useRef(null);
-    const handleFilter = react.useCallback((input) => {
-        const list = input?.list;
-        // Let <datalist> handle filtering if filter is true
-        if (filter === true || !list)
-            return;
-        // Handle custom filter
-        if (filter !== false) {
-            let index = 0;
-            for (const option of list.getElementsByTagName('u-option')) {
-                if (!option.hasAttribute('data-empty'))
-                    option.disabled = !filter({
-                        index: index++, // Increment index for each <option>
-                        input,
-                        optionElement: option,
-                        text: option.text,
-                        value: uDatalist.getDatalistValue(option),
-                    });
+const SuggestionContext = react.createContext({
+    handleFilter: () => undefined,
+});
+const text = (el) => el.textContent?.trim() || '';
+const sanitizeItems = (values = []) => typeof values === 'string'
+    ? [{ label: values, value: values }]
+    : values.map((value) => typeof value === 'string'
+        ? { label: value, value }
+        : {
+            label: value.label || value.value || '',
+            value: value.value || '',
+        });
+const nextItems = (data, prev, multiple) => {
+    const item = { label: text(data), value: data.value };
+    if (!multiple)
+        return data.isConnected ? [] : [item];
+    return data.isConnected
+        ? sanitizeItems(prev).filter(({ value }) => value !== item.value)
+        : [...sanitizeItems(prev), item];
+};
+const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
+const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
+    const uComboboxRef = react.useRef(null);
+    const isContolled = value !== undefined;
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
+    const [isEmpty, setIsEmpty] = react.useState(false);
+    const [selectedItems, setSelectedItems] = react.useState(sanitizeItems(defaultValue || value));
+    // Update if controlled values
+    const prevControlled = react.useRef(value);
+    if (value !== prevControlled.current) {
+        prevControlled.current = value;
+        setSelectedItems(sanitizeItems(prevControlled.current));
+    }
+    /**
+     * Listerners and handling of adding/removing
+     */
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeChange = (event) => {
+            event.preventDefault();
+            const multiple = combobox?.multiple;
+            const data = event.detail;
+            if (isContolled)
+                onValueChange?.(nextItems(data, prevControlled.current, multiple));
+            else
+                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+        };
+        combobox?.addEventListener('beforechange', beforeChange);
+        return () => combobox?.removeEventListener('beforechange', beforeChange);
+    }, [isContolled, setSelectedItems]);
+    const handleFilter = react.useCallback(() => {
+        const { control: input, options = [] } = uComboboxRef?.current || {};
+        const filterFn = filter === true ? defaultFilter : filter;
+        let disabled = 0;
+        let index = 0;
+        for (const option of options)
+            if (!option.hasAttribute('data-empty')) {
+                if (filterFn && input)
+                    option.disabled =
+                        !filterFn({
+                            index,
+                            input,
+                            label: option.label,
+                            optionElement: option,
+                            text: option.text,
+                            value: option.value,
+                        }) && Boolean(++disabled);
+                index++; // Increment index for each <option>
             }
-        }
-        uDatalist.syncDatalistState(input); // Sync the datalist state if filter is custom or false
+        setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { inputRef, listId, setListId, handleFilter }, children: jsxRuntime.jsx(Component, { className: cl('ds-suggestion', className), ref: ref, ...rest }) }));
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, handleFilter }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true })] }) }));
 });
 
 exports.Suggestion = Suggestion;

package/dist/cjs/components/Suggestion/SuggestionChips.js

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../Chip/index.js');
+var Suggestion = require('./Suggestion.js');
+
+const SuggestionChips = ({ render = ({ label }) => label, }) => {
+    const { selectedItems = [] } = react.useContext(Suggestion.SuggestionContext);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: render(item) }) }, item.value))) }));
+};
+SuggestionChips.displayName = 'SuggestionChips';
+
+exports.SuggestionChips = SuggestionChips;

package/dist/cjs/components/Suggestion/SuggestionClear.js

@@ -3,11 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Suggestion = require('./Suggestion.js');
 var Button = require('../Button/Button.js');
 
 /**
- * Component that provides a clear button for the suggestion input.
+ * Component that provides a clear button for the Suggestion input.
  *
  * Place as a descendant of `Suggestion`
  *
@@ -19,34 +18,7 @@ var Button = require('../Button/Button.js');
  * </Suggestion>
  */
 const SuggestionClear = react.forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
-    const { inputRef } = react.useContext(Suggestion.SuggestionContext); //, handleValueChange
-    const handleClear = (event) => {
-        if (!inputRef?.current)
-            throw new Error('Input is missing');
-        /* narrow type to make TS happy */
-        if (!(inputRef?.current instanceof HTMLInputElement))
-            throw new Error('Input is not an input element');
-        event.preventDefault();
-        setReactInputValue(inputRef.current, '');
-        inputRef.current.focus();
-        onClick?.(event);
-    };
-    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+    return (jsxRuntime.jsx(Button.Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsxRuntime.jsx("del", {}) }));
 });
-// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
-const setReactInputValue = (input, value) => {
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-    if (nativeInputValueSetter) {
-        nativeInputValueSetter.call(input, value);
-    }
-    else {
-        throw new Error('Unable to find the native input value setter');
-    }
-    const inputEvent = new Event('input', { bubbles: true });
-    const changeEvent = new Event('change', { bubbles: true });
-    input.dispatchEvent(inputEvent);
-    input.dispatchEvent(changeEvent);
-};
 
 exports.SuggestionClear = SuggestionClear;
-exports.setReactInputValue = setReactInputValue;

package/dist/cjs/components/Suggestion/SuggestionEmpty.js

@@ -3,9 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var Suggestion = require('./Suggestion.js');
 
 /**
- * Component that provides an empty suggestion list.
+ * Component that provides an empty Suggestion list.
  *
  * Place as a descendant of `Suggestion.List`
  *
@@ -15,9 +16,8 @@ var react = require('react');
  * </Suggestion.List>
  */
 const SuggestionEmpty = react.forwardRef(function SuggestionEmpty(rest, ref) {
-    return (
-    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
-    jsxRuntime.jsx("u-option", { "data-empty": true, role: 'none', ref: ref, ...rest }));
+    const { isEmpty } = react.useContext(Suggestion.SuggestionContext);
+    return isEmpty ? jsxRuntime.jsx("u-option", { "data-empty": true, value: '', ref: ref, ...rest }) : null;
 });
 
 exports.SuggestionEmpty = SuggestionEmpty;

package/dist/cjs/components/Suggestion/SuggestionInput.js

@@ -2,14 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var uDatalist = require('@u-elements/u-datalist');
 var react = require('react');
 var Suggestion = require('./Suggestion.js');
-var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 var Input = require('../Input/Input.js');
 
 /**
- * Component that provides an input field for the suggestion list.
+ * Component that provides an input field for the Suggestion list.
  *
  * Place as a descendant of `Suggestion`
  *
@@ -19,27 +17,18 @@ var Input = require('../Input/Input.js');
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInput, ...rest }, ref) {
-    const { listId, inputRef, handleFilter } = react.useContext(Suggestion.SuggestionContext);
-    const mergedRefs = useMergeRefs.useMergeRefs([inputRef, ref]);
-    const updateSelected = react.useCallback(() => {
-        const { list, value } = inputRef?.current || {};
-        for (const option of list?.options || []) {
-            option.selected = uDatalist.getDatalistValue(option) === value;
-        }
-    }, []);
-    // Update also if controlled value
-    react.useEffect(() => {
-        updateSelected();
-        handleFilter?.(inputRef?.current);
-    }, [value]);
-    return (jsxRuntime.jsx(Input.Input, { ref: mergedRefs, list: listId, value: value, onInput: (event) => {
+const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
+    const { handleFilter } = react.useContext(Suggestion.SuggestionContext);
+    react.useEffect(handleFilter, [value]); // Filter if controlled value
+    if (onChange)
+        console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
+    if (value)
+        console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
+    return (jsxRuntime.jsx(Input.Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
+        , ref: ref, onInput: (event) => {
             onInput?.(event); // Should run first
-            updateSelected();
-            if (!uDatalist.isDatalistClick(event.nativeEvent))
-                handleFilter?.(inputRef?.current);
-        }, placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
-        , ...rest }));
+            handleFilter?.(); // Filter if uncontrolled value
+        }, ...rest }));
 });
 
 exports.SuggestionInput = SuggestionInput;

package/dist/cjs/components/Suggestion/SuggestionList.js

@@ -7,7 +7,7 @@ require('@u-elements/u-datalist');
 var Suggestion = require('./Suggestion.js');
 
 /**
- * Component that provides a suggestion list.
+ * Component that provides a Suggestion list.
  *
  * Place as a descendant of `Suggestion`
  *
@@ -18,13 +18,9 @@ var Suggestion = require('./Suggestion.js');
  * </Suggestion>
  */
 const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { inputRef, listId, setListId, handleFilter } = react.useContext(Suggestion.SuggestionContext);
-    react.useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
-    react.useEffect(() => {
-        if (id && listId !== id)
-            setListId?.(id);
-    }, [listId, id, setListId]);
-    return (jsxRuntime.jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
+    const { handleFilter } = react.useContext(Suggestion.SuggestionContext);
+    react.useEffect(handleFilter); // Must run on every render
+    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, ...rest }));
 });
 
 exports.SuggestionList = SuggestionList;

package/dist/cjs/components/Suggestion/SuggestionOption.js

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-require('@u-elements/u-datalist');
 
 const SuggestionOption = react.forwardRef(function SuggestionOption({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));

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

@@ -2,6 +2,7 @@
 'use strict';
 
 var Suggestion = require('./Suggestion.js');
+var SuggestionChips = require('./SuggestionChips.js');
 var SuggestionClear = require('./SuggestionClear.js');
 var SuggestionEmpty = require('./SuggestionEmpty.js');
 var SuggestionInput = require('./SuggestionInput.js');
@@ -23,6 +24,7 @@ var SuggestionOption = require('./SuggestionOption.js');
  * </Suggestion>
  */
 const EXPERIMENTAL_Suggestion = Object.assign(Suggestion.Suggestion, {
+    Chips: SuggestionChips.SuggestionChips,
     List: SuggestionList.SuggestionList,
     Input: SuggestionInput.SuggestionInput,
     Empty: SuggestionEmpty.SuggestionEmpty,
@@ -30,12 +32,14 @@ const EXPERIMENTAL_Suggestion = Object.assign(Suggestion.Suggestion, {
     Clear: SuggestionClear.SuggestionClear,
 });
 EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
+EXPERIMENTAL_Suggestion.Chips.displayName = 'EXPERIMENTAL_Suggestion.Chips';
 EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
 EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
 EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
 EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
 EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
 
+exports.EXPERIMENTAL_SuggestionChips = SuggestionChips.SuggestionChips;
 exports.EXPERIMENTAL_SuggestionClear = SuggestionClear.SuggestionClear;
 exports.EXPERIMENTAL_SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
 exports.EXPERIMENTAL_SuggestionInput = SuggestionInput.SuggestionInput;

package/dist/cjs/components/Tabs/TabsTab.js

@@ -14,7 +14,8 @@ var Tabs = require('./Tabs.js');
  */
 const TabsTab = react.forwardRef(function TabsTab({ value, id, ...rest }, ref) {
     const tabs = react.useContext(Tabs.Context);
-    const buttonId = id ?? `tab-${react.useId()}`;
+    const generatedId = react.useId();
+    const buttonId = id ?? `tab-${generatedId}`;
     return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { value: value, ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...rest, "aria-selected": tabs.value === value, id: buttonId, onClick: () => tabs.onChange?.(value), ref: ref, role: 'tab', type: 'button' }) }));
 });
 

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -57,6 +57,7 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
                             : []),
                         dom.shift(),
                         arrowPseudoElement,
+                        safeAreaElement,
                     ],
                 }).then(({ x, y }) => {
                     tooltip.style.translate = `${x}px ${y}px`;
@@ -89,7 +90,7 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
             ? 'popoverTargetAction'
             : 'popovertargetaction']: 'show',
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("span", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',
@@ -116,5 +117,36 @@ const arrowPseudoElement = {
         return data;
     },
 };
+const safeAreaElement = {
+    name: 'SafeAreaElement',
+    fn(data) {
+        const { elements, placement } = data;
+        let width = '100%';
+        let height = 'var(--dsc-tooltip-arrow-size)';
+        let translate = '0px';
+        switch (placement) {
+            case 'top':
+                translate = `-50% 0%`;
+                break;
+            case 'right':
+                height = '100%';
+                width = 'var(--dsc-tooltip-arrow-size)';
+                translate = '-100% -50%';
+                break;
+            case 'bottom':
+                translate = '-50% -100%';
+                break;
+            case 'left':
+                height = '100%';
+                width = 'var(--dsc-tooltip-arrow-size)';
+                translate = '0 -50%';
+                break;
+        }
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-height', height);
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-width', width);
+        elements.floating.style.setProperty('--_dsc-tooltip-safearea-translate', translate);
+        return data;
+    },
+};
 
 exports.Tooltip = Tooltip;