@digdir/designsystemet-react 0.59.0 → 0.59.1-alpha.1

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

@@ -17,94 +17,96 @@ function isComboboxCustom(child) {
 function isInteractiveComboboxCustom(child) {
     return isComboboxCustom(child) && child.props.interactive === true;
 }
-function useCombobox({ children, inputValue, multiple, filter, initialValue, }) {
-    const options = React.useMemo(() => {
-        const allOptions = [];
-        React.Children.forEach(children, (child) => {
+function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, initialValue, }) {
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = React.useMemo(() => {
+        const allChildren = React.Children.toArray(children);
+        const result = allChildren.reduce((acc, 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.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;
+                acc.optionsChildren.push(child);
+            }
+            else {
+                acc.restChildren.push(child);
+                if (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);
                 }
-                allOptions.push({
-                    value: props.value,
-                    label,
-                    displayValue: props.displayValue,
-                    description: props.description,
+            }
+            return acc;
+        }, {
+            optionsChildren: [],
+            customIds: [],
+            restChildren: [],
+            interactiveChildren: [],
+        });
+        return result;
+    }, [children]);
+    const options = React.useMemo(() => {
+        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;
             }
+            allOptions[props.value] = {
+                value: props.value,
+                label,
+                displayValue: props.displayValue,
+                description: props.description,
+            };
         });
         return allOptions;
-    }, [children]);
-    const preSelectedOptions = (initialValue || [])
-        .map((value) => options.find((option) => option.value === value))
-        .filter(isOption);
+    }, [optionsChildren]);
+    const preSelectedOptions = React.useMemo(() => (initialValue || []).reduce((acc, value) => {
+        const option = options[value];
+        if (isOption(option)) {
+            acc[value] = option;
+        }
+        return acc;
+    }, {}), [initialValue, options]);
     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.Children.toArray(children).filter((child) => isComboboxOption(child));
-        const activeValue = valuesArray.find((item) => item.label === inputValue);
-        if (activeValue && !multiple)
-            return children_;
-        if (inputValue === '' && !multiple)
-            return children_;
-        return children_.filter((child) => {
-            const { value } = child.props;
-            const option = valuesArray.find((item) => item.value === value);
-            if (!option)
-                return false;
-            const isSelected = selectedOptions.some((selectedOption) => selectedOption.value === value);
-            // show what we search for, and all selected options
-            return filter(inputValue, { ...option }) || isSelected;
-        });
-    }, [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.Children.toArray(children).filter((child) => {
-            return isInteractiveComboboxCustom(child);
-        });
-        // return all ids
-        return children_.map((child) => {
-            if (!child.props.id)
-                throw new Error('If ComboboxCustom is interactive, it must have an id');
-            return child.props.id;
-        });
-    }, [children]);
-    const optionValues = React.useMemo(() => {
-        // create an index map of values from optionsChildren
-        const options = optionsChildren.map((child) => {
-            const { value } = child.props;
-            return value;
-        });
-        return [...customIds, ...options];
-    }, [customIds, optionsChildren]);
-    const restChildren = React.useMemo(() => {
-        return React.Children.toArray(children).filter((child) => {
-            return !isComboboxOption(child);
-        });
-    }, [children]);
+    const { filteredOptions, filteredOptionsChildren } = React.useMemo(() => {
+        const filteredOptions = [];
+        const filteredOptionsChildren = Object.keys(options)
+            .map((option, index) => {
+            if (multiple && selectedOptions[option]) {
+                filteredOptions.push(options[option].value);
+                return optionsChildren[index];
+            }
+            if (filter(inputValue, options[option])) {
+                filteredOptions.push(options[option].value);
+                return optionsChildren[index];
+            }
+        })
+            .filter((child) => child);
+        return { filteredOptions, filteredOptionsChildren };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
     return {
-        optionsChildren,
-        optionValues,
+        filteredOptionsChildren,
+        filteredOptions,
         restChildren,
         options,
         customIds,
         selectedOptions,
+        interactiveChildren,
         setSelectedOptions,
-        prevSelectedHash,
-        setPrevSelectedHash,
     };
 }
 

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

@@ -0,0 +1,76 @@
+'use client';
+'use strict';
+
+var useDebounce = require('../../../utilities/useDebounce.js');
+var ComboboxIdContext = require('./ComboboxIdContext.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
+                // eslint-disable-next-line no-case-declarations
+                const valueIndex = activeIndex - interactiveChildren.length;
+                // eslint-disable-next-line no-case-declarations
+                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 = useDebounce(handleKeyDownFunc, 20);
+    return handleKeyDown;
+};
+
+exports.useComboboxKeyboard = useComboboxKeyboard;

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

@@ -0,0 +1,78 @@
+'use client';
+'use strict';
+
+var floatingUi_react = require('../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+var floatingUi_dom = require('../../../packages/react/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_core = require('../../../packages/react/node_modules/@floating-ui/core/dist/floating-ui.core.js');
+
+const useFloatingCombobox = ({ listRef }) => {
+    const [open, setOpen] = React.useState(false);
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    const dispatch = ComboboxIdContext.useComboboxIdDispatch();
+    // floating UI
+    const { refs, floatingStyles, context } = floatingUi_react.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) => {
+            floatingUi_dom.autoUpdate(reference, floating, update);
+            return () => {
+                floating.scrollTop = 0;
+            };
+        },
+        middleware: [
+            floatingUi_dom.flip({ padding: 10 }),
+            floatingUi_dom.size({
+                apply({ rects, elements }) {
+                    requestAnimationFrame(() => {
+                        Object.assign(elements.floating.style, {
+                            width: `calc(${rects.reference.width}px - calc(var(--fds-spacing-2) * 2))`,
+                            maxHeight: `200px`,
+                        });
+                    });
+                },
+            }),
+            floatingUi_core.offset(10),
+        ],
+    });
+    const role = floatingUi_react.useRole(context, { role: 'listbox' });
+    const dismiss = floatingUi_react.useDismiss(context);
+    const listNav = floatingUi_react.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 } = floatingUi_react.useInteractions([role, dismiss, listNav]);
+    return {
+        open,
+        setOpen,
+        activeIndex,
+        refs,
+        floatingStyles,
+        context,
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+    };
+};
+
+exports.useFloatingCombobox = useFloatingCombobox;

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

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
-var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var floatingUi_react = require('../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var useSearch = require('./useSearch.js');
 var Search_module = require('./Search.module.css.js');
 var Button = require('../../Button/Button.js');

package/dist/cjs/node_modules/@floating-ui/utils/{dom/dist → dist}/floating-ui.utils.dom.js

@@ -12,7 +12,7 @@ function getNodeName(node) {
 }
 function getWindow(node) {
   var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
 function getDocumentElement(node) {
   var _ref;
@@ -111,18 +111,21 @@ function getNearestOverflowAncestor(node) {
   }
   return getNearestOverflowAncestor(parentNode);
 }
-function getOverflowAncestors(node, list) {
+function getOverflowAncestors(node, list, traverseIframes) {
   var _node$ownerDocument2;
   if (list === void 0) {
     list = [];
   }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
   const scrollableAncestor = getNearestOverflowAncestor(node);
   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
   const win = getWindow(scrollableAncestor);
   if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
   }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 
 exports.getComputedStyle = getComputedStyle;

package/dist/cjs/node_modules/@floating-ui/utils/dist/floating-ui.utils.js

@@ -1,6 +1,11 @@
 'use client';
 'use strict';
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;

package/dist/cjs/node_modules/clsx/dist/clsx.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 exports.clsx = clsx;
 exports.default = clsx;

package/dist/cjs/node_modules/clsx/dist/lite.js

@@ -0,0 +1,9 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function clsx(){for(var t,r=0,e="",n=arguments.length;r<n;r++)(t=arguments[r])&&"string"==typeof t&&(e+=(e&&" ")+t);return e}
+
+exports.clsx = clsx;
+exports.default = clsx;

package/dist/cjs/{node_modules → packages/react/node_modules}/@floating-ui/core/dist/floating-ui.core.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var floatingUi_utils = require('../../utils/dist/floating-ui.utils.js');
+var floatingUi_utils = require('../../../../../../node_modules/@floating-ui/utils/dist/floating-ui.utils.js');
 
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
@@ -61,7 +61,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
 
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain positioning strategy.
+ * next to a given reference element.
  *
  * This export does not have any `platform` interface logic. You will need to
  * write one for the platform you are using Floating UI with.
@@ -139,7 +139,6 @@ const computePosition = async (reference, floating, config) => {
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
       i = -1;
-      continue;
     }
   }
   return {
@@ -202,6 +201,7 @@ async function detectOverflow(state, options) {
     y: 1
   };
   const elementClientRect = floatingUi_utils.rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
     rect,
     offsetParent,
     strategy
@@ -229,7 +229,8 @@ const arrow = options => ({
       placement,
       rects,
       platform,
-      elements
+      elements,
+      middlewareData
     } = state;
     // Since `element` is required, we don't Partial<> the type.
     const {
@@ -277,16 +278,20 @@ const arrow = options => ({
 
     // If the reference is small enough that the arrow's padding causes it to
     // to point to nothing for an aligned placement, adjust the offset of the
-    // floating element itself. This stops `shift()` from taking action, but can
-    // be worked around by calling it again after the `arrow()` if desired.
-    const shouldAddOffset = floatingUi_utils.getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
-    const alignmentOffset = shouldAddOffset ? center < min$1 ? min$1 - center : max - center : 0;
+    // floating element itself. To ensure `shift()` continues to take action,
+    // a single reset is performed when this is true.
+    const shouldAddOffset = !middlewareData.arrow && floatingUi_utils.getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
     return {
-      [axis]: coords[axis] - alignmentOffset,
+      [axis]: coords[axis] + alignmentOffset,
       data: {
         [axis]: offset,
-        centerOffset: center - offset + alignmentOffset
-      }
+        centerOffset: center - offset - alignmentOffset,
+        ...(shouldAddOffset && {
+          alignmentOffset
+        })
+      },
+      reset: shouldAddOffset
     };
   }
 });
@@ -305,7 +310,7 @@ const flip = function (options) {
     name: 'flip',
     options,
     async fn(state) {
-      var _middlewareData$flip;
+      var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
         middlewareData,
@@ -323,6 +328,14 @@ const flip = function (options) {
         flipAlignment = true,
         ...detectOverflowOptions
       } = floatingUi_utils.evaluate(options, state);
+
+      // If a reset by the arrow was caused due to an alignment offset being
+      // added, we should skip any logic now since `flip()` has already done its
+      // work.
+      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
       const side = floatingUi_utils.getSide(placement);
       const isBasePlacement = floatingUi_utils.getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
@@ -400,6 +413,7 @@ const flip = function (options) {
 
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
+
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -413,8 +427,6 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = floatingUi_utils.evaluate(options, state);
-
-  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -456,15 +468,27 @@ const offset = function (options) {
     name: 'offset',
     options,
     async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
-        y
+        y,
+        placement,
+        middlewareData
       } = state;
       const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
-        data: diffCoords
+        data: {
+          ...diffCoords,
+          placement
+        }
       };
     }
   };