@digdir/designsystemet-react 0.53.1 → 0.55.0

package/dist/cjs/components/form/Combobox/internal/ComboboxInput.js

@@ -21,7 +21,7 @@ const ComboboxInput = ({ ...rest }) => {
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, hideClearButton, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
     const mergedRefs = floatingUi_react.useMergeRefs([forwareddRef, inputRef]);
     // we need to check if input is in focus, to add focus styles to the wrapper
     const [inputInFocus, setInputInFocus] = React.useState(false);
@@ -68,6 +68,7 @@ const ComboboxInput = ({ ...rest }) => {
             }, 0);
         }
     };
+    const showClearButton = multiple && !hideClearButton && selectedOptions.length > 0;
     return (jsxRuntime.jsxs(Box.Box
     /* Props from floating-ui */
     , { ...getReferenceProps({
@@ -99,7 +100,7 @@ const ComboboxInput = ({ ...rest }) => {
         }), "aria-disabled": disabled, className: clsx.clsx(Textfield_module.input, Combobox_module.inputWrapper, Combobox_module[size], inputInFocus && Combobox_module.inFocus, readOnly && Combobox_module.readonly, error && Combobox_module.error), children: [jsxRuntime.jsxs("div", { className: Combobox_module.chipAndInput, children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": activeDescendant, readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
                             onChange(e);
                             rest.onChange && rest.onChange(e);
-                        } })] }), multiple && selectedOptions.length > 0 && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: Combobox_module.arrow, children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+                        } })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: Combobox_module.arrow, children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 var ComboboxInput$1 = ComboboxInput;

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

@@ -7,36 +7,27 @@ var React = require('react');
 var Option = require('./Option/Option.js');
 var Custom = require('./Custom/Custom.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
+const isOption = (option) => !!option;
+function isComboboxOption(child) {
+    return React.isValidElement(child) && child.type === Option.ComboboxOption;
 }
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-function useCombobox({ children, inputValue, multiple, selectedOptions, filter, }) {
+function isComboboxCustom(child) {
+    return React.isValidElement(child) && child.type === Custom.default;
+}
+function isInteractiveComboboxCustom(child) {
+    return isComboboxCustom(child) && child.props.interactive === true;
+}
+function useCombobox({ children, inputValue, multiple, filter, initialValue, }) {
     const options = React.useMemo(() => {
         const allOptions = [];
-        React__namespace.Children.forEach(children, (child) => {
+        React.Children.forEach(children, (child) => {
             if (isComboboxOption(child)) {
                 const props = child.props;
                 let label = props.displayValue || '';
                 if (!props.displayValue) {
                     let childrenLabel = '';
                     // go over children and find all strings
-                    React__namespace.Children.forEach(props.children, (child) => {
+                    React.Children.forEach(props.children, (child) => {
                         if (typeof child === 'string') {
                             childrenLabel += child;
                         }
@@ -56,9 +47,14 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
         });
         return allOptions;
     }, [children]);
+    const preSelectedOptions = (initialValue || [])
+        .map((value) => options.find((option) => option.value === value))
+        .filter(isOption);
+    const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
+    const [prevSelectedHash, setPrevSelectedHash] = React.useState(JSON.stringify(selectedOptions));
     const optionsChildren = React.useMemo(() => {
         const valuesArray = Array.from(options);
-        const children_ = React__namespace.Children.toArray(children).filter((child) => isComboboxOption(child));
+        const children_ = React.Children.toArray(children).filter((child) => isComboboxOption(child));
         const activeValue = valuesArray.find((item) => item.label === inputValue);
         if (activeValue && !multiple)
             return children_;
@@ -76,7 +72,7 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
     }, [options, children, multiple, inputValue, selectedOptions, filter]);
     const customIds = React.useMemo(() => {
         // find all custom components with `interactive=true` and generate random values for them
-        const children_ = React__namespace.Children.toArray(children).filter((child) => {
+        const children_ = React.Children.toArray(children).filter((child) => {
             return isInteractiveComboboxCustom(child);
         });
         // return all ids
@@ -95,7 +91,7 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
         return [...customIds, ...options];
     }, [customIds, optionsChildren]);
     const restChildren = React.useMemo(() => {
-        return React__namespace.Children.toArray(children).filter((child) => {
+        return React.Children.toArray(children).filter((child) => {
             return !isComboboxOption(child);
         });
     }, [children]);
@@ -105,17 +101,12 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
         restChildren,
         options,
         customIds,
+        selectedOptions,
+        setSelectedOptions,
+        prevSelectedHash,
+        setPrevSelectedHash,
     };
 }
-function isComboboxOption(child) {
-    return React__namespace.isValidElement(child) && child.type === Option.ComboboxOption;
-}
-function isComboboxCustom(child) {
-    return React__namespace.isValidElement(child) && child.type === Custom.default;
-}
-function isInteractiveComboboxCustom(child) {
-    return isComboboxCustom(child) && child.props.interactive === true;
-}
 
 exports.default = useCombobox;
 exports.isComboboxCustom = isComboboxCustom;

package/dist/cjs/components/form/Fieldset/Fieldset.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"fieldset":"fds-fieldset-fieldset-4ef8e1c","withSpacing":"fds-fieldset-withSpacing-4ef8e1c","description":"fds-fieldset-description-4ef8e1c","legend":"fds-fieldset-legend-4ef8e1c","readonly":"fds-fieldset-readonly-4ef8e1c","legendContent":"fds-fieldset-legendContent-4ef8e1c","padlock":"fds-fieldset-padlock-4ef8e1c","disabled":"fds-fieldset-disabled-4ef8e1c","errorWrapper":"fds-fieldset-errorWrapper-4ef8e1c"};
+var classes = {"fieldset":"fds-fieldset-fieldset-2b3c05fc","withSpacing":"fds-fieldset-withSpacing-2b3c05fc","description":"fds-fieldset-description-2b3c05fc","legend":"fds-fieldset-legend-2b3c05fc","readonly":"fds-fieldset-readonly-2b3c05fc","legendContent":"fds-fieldset-legendContent-2b3c05fc","padlock":"fds-fieldset-padlock-2b3c05fc","disabled":"fds-fieldset-disabled-2b3c05fc","errorWrapper":"fds-fieldset-errorWrapper-2b3c05fc"};
 
 module.exports = classes;

package/dist/cjs/components/form/NativeSelect/NativeSelect.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"select":"fds-nativeselect-select-88cf3fbc","multiple":"fds-nativeselect-multiple-88cf3fbc","small":"fds-nativeselect-small-88cf3fbc","medium":"fds-nativeselect-medium-88cf3fbc","large":"fds-nativeselect-large-88cf3fbc","formField":"fds-nativeselect-formField-88cf3fbc","disabled":"fds-nativeselect-disabled-88cf3fbc","readOnly":"fds-nativeselect-readOnly-88cf3fbc","error":"fds-nativeselect-error-88cf3fbc","padlock":"fds-nativeselect-padlock-88cf3fbc","errorMessage":"fds-nativeselect-errorMessage-88cf3fbc","label":"fds-nativeselect-label-88cf3fbc"};
+var classes = {"select":"fds-nativeselect-select-2e95d79c","multiple":"fds-nativeselect-multiple-2e95d79c","small":"fds-nativeselect-small-2e95d79c","medium":"fds-nativeselect-medium-2e95d79c","large":"fds-nativeselect-large-2e95d79c","formField":"fds-nativeselect-formField-2e95d79c","disabled":"fds-nativeselect-disabled-2e95d79c","readOnly":"fds-nativeselect-readOnly-2e95d79c","error":"fds-nativeselect-error-2e95d79c","padlock":"fds-nativeselect-padlock-2e95d79c","errorMessage":"fds-nativeselect-errorMessage-2e95d79c","label":"fds-nativeselect-label-2e95d79c"};
 
 module.exports = classes;

package/dist/cjs/components/form/Radio/Group/Group.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"inline":"fds-group-inline-d0931a50"};
+var classes = {"inline":"fds-group-inline-f6df9230"};
 
 module.exports = classes;

package/dist/cjs/components/form/Radio/Radio.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"container":"fds-radio-container-631ff5a4","label":"fds-radio-label-631ff5a4","description":"fds-radio-description-631ff5a4","input":"fds-radio-input-631ff5a4","disabled":"fds-radio-disabled-631ff5a4","readonly":"fds-radio-readonly-631ff5a4","error":"fds-radio-error-631ff5a4","small":"fds-radio-small-631ff5a4","medium":"fds-radio-medium-631ff5a4","large":"fds-radio-large-631ff5a4"};
+var classes = {"container":"fds-radio-container-7a9bd584","label":"fds-radio-label-7a9bd584","description":"fds-radio-description-7a9bd584","input":"fds-radio-input-7a9bd584","disabled":"fds-radio-disabled-7a9bd584","readonly":"fds-radio-readonly-7a9bd584","error":"fds-radio-error-7a9bd584","small":"fds-radio-small-7a9bd584","medium":"fds-radio-medium-7a9bd584","large":"fds-radio-large-7a9bd584"};
 
 module.exports = classes;

package/dist/cjs/components/form/Search/Search.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"formField":"fds-search-formField-7eb2965c","small":"fds-search-small-7eb2965c","medium":"fds-search-medium-7eb2965c","large":"fds-search-large-7eb2965c","errorMessage":"fds-search-errorMessage-7eb2965c","label":"fds-search-label-7eb2965c","field":"fds-search-field-7eb2965c","icon":"fds-search-icon-7eb2965c","input":"fds-search-input-7eb2965c","withSearchButton":"fds-search-withSearchButton-7eb2965c","disabled":"fds-search-disabled-7eb2965c","searchButton":"fds-search-searchButton-7eb2965c","clearButton":"fds-search-clearButton-7eb2965c","simple":"fds-search-simple-7eb2965c","error":"fds-search-error-7eb2965c"};
+var classes = {"formField":"fds-search-formField-a6b5fe3c","small":"fds-search-small-a6b5fe3c","medium":"fds-search-medium-a6b5fe3c","large":"fds-search-large-a6b5fe3c","errorMessage":"fds-search-errorMessage-a6b5fe3c","label":"fds-search-label-a6b5fe3c","field":"fds-search-field-a6b5fe3c","icon":"fds-search-icon-a6b5fe3c","input":"fds-search-input-a6b5fe3c","withSearchButton":"fds-search-withSearchButton-a6b5fe3c","disabled":"fds-search-disabled-a6b5fe3c","searchButton":"fds-search-searchButton-a6b5fe3c","clearButton":"fds-search-clearButton-a6b5fe3c","simple":"fds-search-simple-a6b5fe3c","error":"fds-search-error-a6b5fe3c"};
 
 module.exports = classes;

package/dist/cjs/components/form/Switch/Switch.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"switch":"fds-switch-switch-72679bdc","label":"fds-switch-label-72679bdc","track":"fds-switch-track-72679bdc","description":"fds-switch-description-72679bdc","padlock":"fds-switch-padlock-72679bdc","right":"fds-switch-right-72679bdc","input":"fds-switch-input-72679bdc","readonly":"fds-switch-readonly-72679bdc","disabled":"fds-switch-disabled-72679bdc","small":"fds-switch-small-72679bdc","medium":"fds-switch-medium-72679bdc","large":"fds-switch-large-72679bdc","thumb":"fds-switch-thumb-72679bdc"};
+var classes = {"switch":"fds-switch-switch-9a6b03bc","label":"fds-switch-label-9a6b03bc","track":"fds-switch-track-9a6b03bc","description":"fds-switch-description-9a6b03bc","padlock":"fds-switch-padlock-9a6b03bc","right":"fds-switch-right-9a6b03bc","input":"fds-switch-input-9a6b03bc","readonly":"fds-switch-readonly-9a6b03bc","disabled":"fds-switch-disabled-9a6b03bc","small":"fds-switch-small-9a6b03bc","medium":"fds-switch-medium-9a6b03bc","large":"fds-switch-large-9a6b03bc","thumb":"fds-switch-thumb-9a6b03bc"};
 
 module.exports = classes;

package/dist/cjs/components/form/Textarea/Textarea.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"formField":"fds-textarea-formField-16c1b1dc","padlock":"fds-textarea-padlock-16c1b1dc","errorMessage":"fds-textarea-errorMessage-16c1b1dc","label":"fds-textarea-label-16c1b1dc","description":"fds-textarea-description-16c1b1dc","textarea":"fds-textarea-textarea-16c1b1dc","small":"fds-textarea-small-16c1b1dc","medium":"fds-textarea-medium-16c1b1dc","large":"fds-textarea-large-16c1b1dc","disabled":"fds-textarea-disabled-16c1b1dc","readonly":"fds-textarea-readonly-16c1b1dc","error":"fds-textarea-error-16c1b1dc"};
+var classes = {"formField":"fds-textarea-formField-3d0e29bc","padlock":"fds-textarea-padlock-3d0e29bc","errorMessage":"fds-textarea-errorMessage-3d0e29bc","label":"fds-textarea-label-3d0e29bc","description":"fds-textarea-description-3d0e29bc","textarea":"fds-textarea-textarea-3d0e29bc","small":"fds-textarea-small-3d0e29bc","medium":"fds-textarea-medium-3d0e29bc","large":"fds-textarea-large-3d0e29bc","disabled":"fds-textarea-disabled-3d0e29bc","readonly":"fds-textarea-readonly-3d0e29bc","error":"fds-textarea-error-3d0e29bc"};
 
 module.exports = classes;

package/dist/cjs/components/form/Textfield/Textfield.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var textFieldClasses = {"formField":"fds-textfield-formField-147467c0","adornment":"fds-textfield-adornment-147467c0","input":"fds-textfield-input-147467c0","disabled":"fds-textfield-disabled-147467c0","readonly":"fds-textfield-readonly-147467c0","field":"fds-textfield-field-147467c0","small":"fds-textfield-small-147467c0","medium":"fds-textfield-medium-147467c0","large":"fds-textfield-large-147467c0","label":"fds-textfield-label-147467c0","description":"fds-textfield-description-147467c0","error":"fds-textfield-error-147467c0","inputPrefix":"fds-textfield-inputPrefix-147467c0","inputSuffix":"fds-textfield-inputSuffix-147467c0","prefix":"fds-textfield-prefix-147467c0","suffix":"fds-textfield-suffix-147467c0","padlock":"fds-textfield-padlock-147467c0","errorMessage":"fds-textfield-errorMessage-147467c0"};
+var textFieldClasses = {"formField":"fds-textfield-formField-d98267a0","adornment":"fds-textfield-adornment-d98267a0","input":"fds-textfield-input-d98267a0","disabled":"fds-textfield-disabled-d98267a0","readonly":"fds-textfield-readonly-d98267a0","field":"fds-textfield-field-d98267a0","small":"fds-textfield-small-d98267a0","medium":"fds-textfield-medium-d98267a0","large":"fds-textfield-large-d98267a0","label":"fds-textfield-label-d98267a0","description":"fds-textfield-description-d98267a0","error":"fds-textfield-error-d98267a0","inputPrefix":"fds-textfield-inputPrefix-d98267a0","inputSuffix":"fds-textfield-inputSuffix-d98267a0","prefix":"fds-textfield-prefix-d98267a0","suffix":"fds-textfield-suffix-d98267a0","padlock":"fds-textfield-padlock-d98267a0","errorMessage":"fds-textfield-errorMessage-d98267a0"};
 
 module.exports = textFieldClasses;