@digdir/designsystemet-react 1.0.0-next.17 → 1.0.0-next.33

package/dist/esm/node_modules/@floating-ui/react/dist/floating-ui.react.js

@@ -403,7 +403,8 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(props
         floating
       },
       middlewareData: {
-        arrow
+        arrow,
+        shift
       }
     },
     width = 14,
@@ -438,6 +439,12 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(props
   if (!floating) {
     return null;
   }
+  const [side, alignment] = placement.split('-');
+  const isVerticalSide = side === 'top' || side === 'bottom';
+  let computedStaticOffset = staticOffset;
+  if (isVerticalSide && shift != null && shift.x || !isVerticalSide && shift != null && shift.y) {
+    computedStaticOffset = null;
+  }
 
   // Strokes must be double the border width, this ensures the stroke's width
   // works as you'd expect.
@@ -445,16 +452,14 @@ const FloatingArrow = /*#__PURE__*/React.forwardRef(function FloatingArrow(props
   const halfStrokeWidth = computedStrokeWidth / 2;
   const svgX = width / 2 * (tipRadius / -8 + 1);
   const svgY = height / 2 * tipRadius / 4;
-  const [side, alignment] = placement.split('-');
   const isCustomShape = !!d;
-  const isVerticalSide = side === 'top' || side === 'bottom';
-  const yOffsetProp = staticOffset && alignment === 'end' ? 'bottom' : 'top';
-  let xOffsetProp = staticOffset && alignment === 'end' ? 'right' : 'left';
-  if (staticOffset && isRTL) {
+  const yOffsetProp = computedStaticOffset && alignment === 'end' ? 'bottom' : 'top';
+  let xOffsetProp = computedStaticOffset && alignment === 'end' ? 'right' : 'left';
+  if (computedStaticOffset && isRTL) {
     xOffsetProp = alignment === 'end' ? 'left' : 'right';
   }
-  const arrowX = (arrow == null ? void 0 : arrow.x) != null ? staticOffset || arrow.x : '';
-  const arrowY = (arrow == null ? void 0 : arrow.y) != null ? staticOffset || arrow.y : '';
+  const arrowX = (arrow == null ? void 0 : arrow.x) != null ? computedStaticOffset || arrow.x : '';
+  const arrowY = (arrow == null ? void 0 : arrow.y) != null ? computedStaticOffset || arrow.y : '';
   const dValue = d || 'M0,0' + (" H" + width) + (" L" + (width - svgX) + "," + (height - svgY)) + (" Q" + width / 2 + "," + height + " " + svgX + "," + (height - svgY)) + ' Z';
   const rotation = {
     top: isCustomShape ? 'rotate(180deg)' : '',
@@ -769,21 +774,22 @@ function useHover(context, props) {
     var _handleCloseRef$curre;
     if (!enabled) return;
     if (open && (_handleCloseRef$curre = handleCloseRef.current) != null && _handleCloseRef$curre.__options.blockPointerEvents && isHoverOpen()) {
-      const body = getDocument(elements.floating).body;
-      body.setAttribute(safePolygonIdentifier, '');
-      body.style.pointerEvents = 'none';
       performedPointerEventsMutationRef.current = true;
       const floatingEl = elements.floating;
       if (isElement(elements.domReference) && floatingEl) {
         var _tree$nodesRef$curren;
+        const body = getDocument(elements.floating).body;
+        body.setAttribute(safePolygonIdentifier, '');
         const ref = elements.domReference;
         const parentFloating = tree == null || (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren.elements.floating;
         if (parentFloating) {
           parentFloating.style.pointerEvents = '';
         }
+        body.style.pointerEvents = 'none';
         ref.style.pointerEvents = 'auto';
         floatingEl.style.pointerEvents = 'auto';
         return () => {
+          body.style.pointerEvents = '';
           ref.style.pointerEvents = '';
           floatingEl.style.pointerEvents = '';
         };
@@ -1217,6 +1223,8 @@ function FloatingPortal(props) {
   const afterOutsideRef = React.useRef(null);
   const beforeInsideRef = React.useRef(null);
   const afterInsideRef = React.useRef(null);
+  const modal = focusManagerState == null ? void 0 : focusManagerState.modal;
+  const open = focusManagerState == null ? void 0 : focusManagerState.open;
   const shouldRenderGuards =
   // The FocusManager and therefore floating element are currently open/
   // rendered.
@@ -1228,7 +1236,7 @@ function FloatingPortal(props) {
 
   // https://codesandbox.io/s/tabbable-portal-f4tng?file=/src/TabbablePortal.tsx
   React.useEffect(() => {
-    if (!portalNode || !preserveTabOrder || focusManagerState != null && focusManagerState.modal) {
+    if (!portalNode || !preserveTabOrder || modal) {
       return;
     }
 
@@ -1250,7 +1258,12 @@ function FloatingPortal(props) {
       portalNode.removeEventListener('focusin', onFocus, true);
       portalNode.removeEventListener('focusout', onFocus, true);
     };
-  }, [portalNode, preserveTabOrder, focusManagerState == null ? void 0 : focusManagerState.modal]);
+  }, [portalNode, preserveTabOrder, modal]);
+  React.useEffect(() => {
+    if (!portalNode) return;
+    if (open) return;
+    enableFocusInside(portalNode);
+  }, [open, portalNode]);
   return /*#__PURE__*/React.createElement(PortalContext.Provider, {
     value: React.useMemo(() => ({
       preserveTabOrder,
@@ -1286,13 +1299,25 @@ function FloatingPortal(props) {
       } else {
         const nextTabbable = getNextTabbable() || (focusManagerState == null ? void 0 : focusManagerState.refs.domReference.current);
         nextTabbable == null || nextTabbable.focus();
-        (focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent));
+        (focusManagerState == null ? void 0 : focusManagerState.closeOnFocusOut) && (focusManagerState == null ? void 0 : focusManagerState.onOpenChange(false, event.nativeEvent, 'focus-out'));
       }
     }
   }));
 }
 const usePortalContext = () => React.useContext(PortalContext);
 
+const FOCUSABLE_ATTRIBUTE = 'data-floating-ui-focusable';
+function getFloatingFocusElement(floatingElement) {
+  if (!floatingElement) {
+    return null;
+  }
+  // Try to find the element that has `{...getFloatingProps()}` spread on it.
+  // This indicates the floating element is acting as a positioning wrapper, and
+  // so focus should be managed on the child element with the event handlers and
+  // aria props.
+  return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE) ? floatingElement : floatingElement.querySelector("[" + FOCUSABLE_ATTRIBUTE + "]") || floatingElement;
+}
+
 const LIST_LIMIT = 20;
 let previouslyFocusedElements = [];
 function addPreviouslyFocusedElement(element) {
@@ -1373,13 +1398,10 @@ function FloatingFocusManager(props) {
   const isPointerDownRef = React.useRef(false);
   const tabbableIndexRef = React.useRef(-1);
   const isInsidePortal = portalContext != null;
-  const firstElementChild = floating == null ? void 0 : floating.firstElementChild;
-  // If the floating element is acting as a positioning wrapper rather than the
-  // element that receives aria props, use it as the focus root instead.
-  const floatingFocusNode = (firstElementChild == null ? void 0 : firstElementChild.id) === floatingId ? firstElementChild : floating;
+  const floatingFocusElement = getFloatingFocusElement(floating);
   const getTabbableContent = useEffectEvent(function (container) {
     if (container === void 0) {
-      container = floatingFocusNode;
+      container = floatingFocusElement;
     }
     return container ? tabbable(container, getTabbableOptions()) : [];
   });
@@ -1389,19 +1411,22 @@ function FloatingFocusManager(props) {
       if (domReference && type === 'reference') {
         return domReference;
       }
-      if (floatingFocusNode && type === 'floating') {
-        return floatingFocusNode;
+      if (floatingFocusElement && type === 'floating') {
+        return floatingFocusElement;
       }
       return content;
     }).filter(Boolean).flat();
   });
+  React.useEffect(() => {
+    preventReturnFocusRef.current = false;
+  }, [disabled]);
   React.useEffect(() => {
     if (disabled) return;
     if (!modal) return;
     function onKeyDown(event) {
       if (event.key === 'Tab') {
         // The focus guards have nothing to focus, so we need to stop the event.
-        if (contains(floatingFocusNode, activeElement(getDocument(floatingFocusNode))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
+        if (contains(floatingFocusElement, activeElement(getDocument(floatingFocusElement))) && getTabbableContent().length === 0 && !isUntrappedTypeableCombobox) {
           stopEvent(event);
         }
         const els = getTabbableElements();
@@ -1414,18 +1439,18 @@ function FloatingFocusManager(props) {
             enqueueFocus(els[1]);
           }
         }
-        if (orderRef.current[1] === 'floating' && target === floatingFocusNode && event.shiftKey) {
+        if (orderRef.current[1] === 'floating' && target === floatingFocusElement && event.shiftKey) {
           stopEvent(event);
           enqueueFocus(els[0]);
         }
       }
     }
-    const doc = getDocument(floatingFocusNode);
+    const doc = getDocument(floatingFocusElement);
     doc.addEventListener('keydown', onKeyDown);
     return () => {
       doc.removeEventListener('keydown', onKeyDown);
     };
-  }, [disabled, domReference, floatingFocusNode, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
   React.useEffect(() => {
     if (disabled) return;
     if (!floating) return;
@@ -1466,15 +1491,15 @@ function FloatingFocusManager(props) {
 
         // Restore focus to the previous tabbable element index to prevent
         // focus from being lost outside the floating tree.
-        if (restoreFocus && movedToUnrelatedNode && activeElement(getDocument(floatingFocusNode)) === getDocument(floatingFocusNode).body) {
+        if (restoreFocus && movedToUnrelatedNode && activeElement(getDocument(floatingFocusElement)) === getDocument(floatingFocusElement).body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
           // floating tree.
-          if (isHTMLElement(floatingFocusNode)) {
-            floatingFocusNode == null || floatingFocusNode.focus();
+          if (isHTMLElement(floatingFocusElement)) {
+            floatingFocusElement.focus();
           }
           const prevTabbableIndex = tabbableIndexRef.current;
           const tabbableContent = getTabbableContent();
-          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusNode;
+          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
           if (isHTMLElement(nodeToFocus)) {
             nodeToFocus.focus();
           }
@@ -1486,7 +1511,7 @@ function FloatingFocusManager(props) {
         // Fix React 18 Strict Mode returnFocus due to double rendering.
         relatedTarget !== getPreviouslyFocusedElement()) {
           preventReturnFocusRef.current = true;
-          onOpenChange(false, event);
+          onOpenChange(false, event, 'focus-out');
         }
       });
     }
@@ -1500,7 +1525,7 @@ function FloatingFocusManager(props) {
         floating.removeEventListener('focusout', handleFocusOutside);
       };
     }
-  }, [disabled, domReference, floating, floatingFocusNode, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox]);
+  }, [disabled, domReference, floating, floatingFocusElement, modal, nodeId, tree, portalContext, onOpenChange, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox]);
   React.useEffect(() => {
     var _portalContext$portal;
     if (disabled) return;
@@ -1516,27 +1541,27 @@ function FloatingFocusManager(props) {
     }
   }, [disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, guards]);
   index(() => {
-    if (disabled || !isHTMLElement(floatingFocusNode)) return;
-    const doc = getDocument(floatingFocusNode);
+    if (disabled || !isHTMLElement(floatingFocusElement)) return;
+    const doc = getDocument(floatingFocusElement);
     const previouslyFocusedElement = activeElement(doc);
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
     queueMicrotask(() => {
-      const focusableElements = getTabbableElements(floatingFocusNode);
+      const focusableElements = getTabbableElements(floatingFocusElement);
       const initialFocusValue = initialFocusRef.current;
-      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusNode;
-      const focusAlreadyInsideFloatingEl = contains(floatingFocusNode, previouslyFocusedElement);
+      const elToFocus = (typeof initialFocusValue === 'number' ? focusableElements[initialFocusValue] : initialFocusValue.current) || floatingFocusElement;
+      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
       if (!ignoreInitialFocus && !focusAlreadyInsideFloatingEl && open) {
         enqueueFocus(elToFocus, {
-          preventScroll: elToFocus === floatingFocusNode
+          preventScroll: elToFocus === floatingFocusElement
         });
       }
     });
-  }, [disabled, open, floatingFocusNode, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
+  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef]);
   index(() => {
-    if (disabled || !floatingFocusNode) return;
+    if (disabled || !floatingFocusElement) return;
     let preventReturnFocusScroll = false;
-    const doc = getDocument(floatingFocusNode);
+    const doc = getDocument(floatingFocusElement);
     const previouslyFocusedElement = activeElement(doc);
     const contextData = dataRef.current;
     let openEvent = contextData.openEvent;
@@ -1604,7 +1629,7 @@ function FloatingFocusManager(props) {
         }
       });
     };
-  }, [disabled, floating, floatingFocusNode, returnFocusRef, dataRef, refs, events, tree, nodeId]);
+  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, refs, events, tree, nodeId]);
 
   // Synchronize the `context` & `modal` value to the FloatingPortal context.
   // It will decide whether or not it needs to render its own guards.
@@ -1624,11 +1649,11 @@ function FloatingFocusManager(props) {
   }, [disabled, portalContext, modal, open, onOpenChange, refs, closeOnFocusOut]);
   index(() => {
     if (disabled) return;
-    if (!floatingFocusNode) return;
+    if (!floatingFocusElement) return;
     if (typeof MutationObserver !== 'function') return;
     if (ignoreInitialFocus) return;
     const handleMutation = () => {
-      const tabIndex = floatingFocusNode.getAttribute('tabindex');
+      const tabIndex = floatingFocusElement.getAttribute('tabindex');
       const tabbableContent = getTabbableContent();
       const activeEl = activeElement(getDocument(floating));
       const tabbableIndex = tabbableContent.indexOf(activeEl);
@@ -1637,15 +1662,15 @@ function FloatingFocusManager(props) {
       }
       if (orderRef.current.includes('floating') || activeEl !== refs.domReference.current && tabbableContent.length === 0) {
         if (tabIndex !== '0') {
-          floatingFocusNode.setAttribute('tabindex', '0');
+          floatingFocusElement.setAttribute('tabindex', '0');
         }
       } else if (tabIndex !== '-1') {
-        floatingFocusNode.setAttribute('tabindex', '-1');
+        floatingFocusElement.setAttribute('tabindex', '-1');
       }
     };
     handleMutation();
     const observer = new MutationObserver(handleMutation);
-    observer.observe(floatingFocusNode, {
+    observer.observe(floatingFocusElement, {
       childList: true,
       subtree: true,
       attributes: true
@@ -1653,7 +1678,7 @@ function FloatingFocusManager(props) {
     return () => {
       observer.disconnect();
     };
-  }, [disabled, floating, floatingFocusNode, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
+  }, [disabled, floating, floatingFocusElement, refs, orderRef, getTabbableContent, ignoreInitialFocus]);
   function renderDismissButton(location) {
     if (disabled || !visuallyHiddenDismiss || !modal) {
       return null;
@@ -2356,7 +2381,8 @@ function mergeProps(userProps, propsList, elementKey) {
   }
   return {
     ...(elementKey === 'floating' && {
-      tabIndex: -1
+      tabIndex: -1,
+      [FOCUSABLE_ATTRIBUTE]: ''
     }),
     ...domUserProps,
     ...propsList.map(value => {
@@ -2503,6 +2529,8 @@ function useListNavigation(context, props) {
       warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
+  const floatingFocusElement = getFloatingFocusElement(elements.floating);
+  const floatingFocusElementRef = useLatestRef(floatingFocusElement);
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree();
   const onNavigate = useEffectEvent(unstable_onNavigate);
@@ -2518,7 +2546,6 @@ function useListNavigation(context, props) {
   const disabledIndicesRef = useLatestRef(disabledIndices);
   const latestOpenRef = useLatestRef(open);
   const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
-  const floatingRef = useLatestRef(elements.floating);
   const selectedIndexRef = useLatestRef(selectedIndex);
   const [activeId, setActiveId] = React.useState();
   const [virtualId, setVirtualId] = React.useState();
@@ -2734,7 +2761,7 @@ function useListNavigation(context, props) {
           focusItem(listRef, indexRef);
           onNavigate(null);
           if (!virtual) {
-            enqueueFocus(floatingRef.current, {
+            enqueueFocus(floatingFocusElementRef.current, {
               preventScroll: true
             });
           }
@@ -2742,7 +2769,7 @@ function useListNavigation(context, props) {
       })
     };
     return props;
-  }, [open, floatingRef, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
+  }, [open, floatingFocusElementRef, focusItem, focusItemOnHover, listRef, onNavigate, virtual]);
   const commonOnKeyDown = useEffectEvent(event => {
     isPointerModalityRef.current = false;
     forceSyncFocus.current = true;
@@ -2750,7 +2777,7 @@ function useListNavigation(context, props) {
     // If the floating element is animating out, ignore navigation. Otherwise,
     // the `activeIndex` gets set to 0 despite not being open so the next time
     // the user ArrowDowns, the first item won't be focused.
-    if (!latestOpenRef.current && event.currentTarget === floatingRef.current) {
+    if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) {
       return;
     }
     if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
@@ -2789,7 +2816,7 @@ function useListNavigation(context, props) {
       const minGridIndex = cellMap.findIndex(index => index != null && !isDisabled(listRef.current, index, disabledIndices));
       // last enabled index
       const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isDisabled(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      indexRef.current = cellMap[getGridNavigatedIndex({
+      const index = cellMap[getGridNavigatedIndex({
         current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
       }, {
         event,
@@ -2807,9 +2834,11 @@ function useListNavigation(context, props) {
         // top/left over bottom/right.
         event.key === ARROW_DOWN ? 'bl' : event.key === ARROW_RIGHT ? 'tr' : 'tl'),
         stopEvent: true
-      })]; // navigated cell will never be nullish
-
-      onNavigate(indexRef.current);
+      })];
+      if (index != null) {
+        indexRef.current = index;
+        onNavigate(indexRef.current);
+      }
       if (orientation === 'both') {
         return;
       }

package/dist/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js

@@ -1,6 +1,6 @@
 'use client';
-import { offset as offset$1, shift as shift$1, flip as flip$1, computePosition, arrow as arrow$2, size as size$1 } from '../../dom/dist/floating-ui.dom.js';
-export { autoUpdate, platform } from '../../dom/dist/floating-ui.dom.js';
+import { offset as offset$1, shift as shift$1, computePosition, flip as flip$1, arrow as arrow$2, size as size$1 } from '../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+export { autoUpdate, platform } from '../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import * as React from 'react';
 import { useLayoutEffect, useEffect } from 'react';
 import * as ReactDOM from 'react-dom';