@digdir/designsystemet-react 1.0.0-next.15 → 1.0.0-next.16

package/dist/esm/components/form/Combobox/Option/Description.js

@@ -7,6 +7,5 @@ const ComboboxOptionDescription = forwardRef(({ children, className, ...rest },
     return (jsx("span", { className: clsx('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
-var ComboboxOptionDescription$1 = ComboboxOptionDescription;
 
-export { ComboboxOptionDescription$1 as default };
+export { ComboboxOptionDescription as default };

package/dist/esm/components/form/Combobox/internal/ComboboxChips.js

@@ -39,6 +39,5 @@ const ComboboxChips = () => {
         }) }));
 };
 ComboboxChips.displayName = 'ComboboxChips';
-var ComboboxChips$1 = ComboboxChips;
 
-export { ComboboxChips$1 as default };
+export { ComboboxChips as default };

package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js

@@ -29,6 +29,5 @@ const ComboboxClearButton = forwardRef((props, ref) => {
         }, type: 'button', "aria-label": clearButtonLabel, children: jsx(XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
 });
 ComboboxClearButton.displayName = 'ComboboxClearButton';
-var ComboboxClearButton$1 = ComboboxClearButton;
 
-export { ComboboxClearButton$1 as default };
+export { ComboboxClearButton as default };

package/dist/esm/components/form/Combobox/internal/ComboboxError.js

@@ -6,6 +6,5 @@ const ComboboxError = ({ size, error, formFieldProps }) => {
     return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ErrorMessage, { size: size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
-var ComboboxError$1 = ComboboxError;
 
-export { ComboboxError$1 as default };
+export { ComboboxError as default };

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

@@ -31,14 +31,14 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
         setInputValue(value);
         setActiveIndex(0);
         // check if input value is the same as a label, if so, select it
-        Object.values(options).forEach((option) => {
+        for (const option of Object.values(options)) {
             if (option.label.toLowerCase() === value.toLowerCase()) {
                 /* if option is already selected, discard selecting it, since it would de-select */
                 if (selectedOptions[prefix(option.value)])
-                    return;
-                handleSelectOption({ option: option });
+                    continue;
+                handleSelectOption({ option });
             }
-        });
+        }
     };
     const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
     /* Props from floating-ui */
@@ -76,6 +76,5 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
                                 } }) })] }), showClearButton && jsx(ComboboxClearButton, { ref: clearButtonRef }), jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }) }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
-var ComboboxInput$1 = ComboboxInput;
 
-export { ComboboxInput$1 as default };
+export { ComboboxInput as default };

package/dist/esm/components/form/Combobox/internal/ComboboxLabel.js

@@ -9,6 +9,5 @@ const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFiel
     return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
-var ComboboxLabel$1 = ComboboxLabel;
 
-export { ComboboxLabel$1 as default };
+export { ComboboxLabel as default };

package/dist/esm/components/form/Combobox/internal/ComboboxNative.js

@@ -7,6 +7,5 @@ const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
     return (jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple ? VALUE : VALUE[0], onChange: () => { }, children: VALUE.map((value) => (jsx("option", { value: value }, value))) }));
 };
 ComboboxNative.displayName = 'ComboboxNative';
-var ComboboxNative$1 = ComboboxNative;
 
-export { ComboboxNative$1 as default };
+export { ComboboxNative as default };

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

@@ -34,6 +34,7 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         return result;
     }, [children]);
     const options = useMemo(() => {
+        const values = [];
         const allOptions = {};
         optionsChildren.map((child) => {
             const props = child.props;
@@ -51,6 +52,10 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
                 });
                 label = childrenLabel;
             }
+            if (values.includes(props.value)) {
+                console.warn(`Combobox has multiple options with the same value: ${props.value}`);
+            }
+            values.push(props.value);
             allOptions[prefix(String(props.value))] = {
                 value: String(props.value),
                 label,

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

@@ -3,8 +3,8 @@ import { useFloating, useRole, useDismiss, useListNavigation, useInteractions }
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';
-import { autoUpdate, flip, size } from '../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset } from '../../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { autoUpdate } from '../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { flip, size, offset } from '../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 
 const useFloatingCombobox = ({ listRef }) => {
     const [open, setOpen] = useState(false);

package/dist/esm/components/form/NativeSelect/NativeSelect.js

@@ -11,8 +11,8 @@ import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const NativeSelect = forwardRef((props, ref) => {
     const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
-    const { selectProps, descriptionId, errorId, readOnly = false, size = 'md', } = useNativeSelect(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-native-select__wrapper', children: jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
+    const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useNativeSelect(props);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-native-select--container', readOnly && 'ds-native-select--readonly', error && 'ds-native-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx('ds-native-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-native-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(`ds-native-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-native-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: clsx('ds-native-select', `ds-native-select--${size}`, `ds-focus`, props.multiple && 'ds-native-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-native-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
 });
 NativeSelect.displayName = 'NativeSelect';
 

package/dist/esm/components/form/NativeSelect/useNativeSelect.js

@@ -6,7 +6,7 @@ import { useFormField } from '../useFormField.js';
 /** Handles props for `NativeSelect` in context with `Fieldset` */
 const useNativeSelect = (props) => {
     const fieldset = useContext(FieldsetContext);
-    const { inputProps: selectProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'select');
+    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField(props, 'select');
     return {
         ...rest,
         readOnly,
@@ -21,6 +21,24 @@ const useNativeSelect = (props) => {
                 }
                 props?.onClick?.(e);
             },
+            onKeyDown: (e) => {
+                if (readOnly) {
+                    if (e.key === 'Tab')
+                        return;
+                    e.preventDefault();
+                    return;
+                }
+                props?.onKeyDown?.(e);
+            },
+            onMouseDown: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    if (e.target instanceof HTMLElement)
+                        e.target.focus();
+                    return;
+                }
+                props?.onMouseDown?.(e);
+            },
             onChange: (e) => {
                 if (readOnly) {
                     e.preventDefault();

package/dist/esm/components/form/Radio/{Group/Group.js → RadioGroup.js}

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { createContext, forwardRef, useId } from 'react';
-import { Fieldset } from '../../Fieldset/Fieldset.js';
+import { Fieldset } from '../Fieldset/Fieldset.js';
 
 const RadioGroupContext = createContext(null);
 const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, name, size = 'md', required, inline, className, ...rest }, ref) => {
@@ -13,7 +13,7 @@ const RadioGroup = forwardRef(({ onChange, children, value, readOnly, defaultVal
                 name: name ?? `radiogroup-name-${nameId}`,
                 onChange,
                 required,
-            }, children: jsx("div", { className: clsx('ds-radio-group', inline && 'ds-radio-group--horizontal'), children: children }) }) }));
+            }, children: jsx("div", { className: clsx('ds-radio__group', `ds-radio__group--${size}`, inline && 'ds-radio__group--horizontal'), children: children }) }) }));
 });
 RadioGroup.displayName = 'RadioGroup';
 

package/dist/esm/components/form/Radio/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { Radio as Radio$1 } from './Radio.js';
-import { RadioGroup } from './Group/Group.js';
+import { RadioGroup } from './RadioGroup.js';
 
 /** `<input> element with `type="radio"` used for selecting one option */
 const Radio = Radio$1;

package/dist/esm/components/form/Radio/useRadio.js

@@ -1,7 +1,7 @@
 'use client';
 import { useContext } from 'react';
 import { useFormField } from '../useFormField.js';
-import { RadioGroupContext } from './Group/Group.js';
+import { RadioGroupContext } from './RadioGroup.js';
 
 /** Handles props for `Radio` in context with `Radio.Group` (and `Fieldset`) */
 const useRadio = (props) => {

package/dist/esm/components/form/Switch/useSwitch.js

@@ -1,7 +1,7 @@
 'use client';
 import { useContext } from 'react';
+import { CheckboxGroupContext } from '../Checkbox/CheckboxGroup.js';
 import { useFormField } from '../useFormField.js';
-import { CheckboxGroupContext } from '../Checkbox/Group/Group.js';
 
 /** Handles props for `Switch` in context with `Checkbox.Group` (and `Fieldset`) */
 const useSwitch = (props) => {

package/dist/esm/index.js

@@ -7,6 +7,12 @@ export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
 export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';
 export { omit } from './utilities/omit/omit.js';
 export { Button } from './components/Button/Button.js';
+export { Breadcrumbs } from './components/Breadcrumbs/index.js';
+export { BreadcrumbsRoot } from './components/Breadcrumbs/BreadcrumbsRoot.js';
+export { BreadcrumbsNav } from './components/Breadcrumbs/BreadcrumbsNav.js';
+export { BreadcrumbsList } from './components/Breadcrumbs/BreadcrumbsList.js';
+export { BreadcrumbsItem } from './components/Breadcrumbs/BreadcrumbsItem.js';
+export { BreadcrumbsLink } from './components/Breadcrumbs/BreadcrumbsLink.js';
 export { HelpText } from './components/HelpText/HelpText.js';
 export { Spinner } from './components/Spinner/Spinner.js';
 export { Link } from './components/Link/Link.js';
@@ -43,9 +49,9 @@ export { PaginationNext, PaginationPrevious } from './components/Pagination/Pagi
 export { SkipLink } from './components/SkipLink/SkipLink.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 export { Checkbox } from './components/form/Checkbox/index.js';
-export { CheckboxGroup } from './components/form/Checkbox/Group/Group.js';
+export { CheckboxGroup } from './components/form/Checkbox/CheckboxGroup.js';
 export { Radio } from './components/form/Radio/index.js';
-export { RadioGroup } from './components/form/Radio/Group/Group.js';
+export { RadioGroup } from './components/form/Radio/RadioGroup.js';
 export { Fieldset } from './components/form/Fieldset/Fieldset.js';
 export { Switch } from './components/form/Switch/Switch.js';
 export { Textfield } from './components/form/Textfield/Textfield.js';
@@ -64,6 +70,7 @@ export { PopoverContent } from './components/Popover/PopoverContent.js';
 export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Modal } from './components/Modal/index.js';
+export { ModalRoot } from './components/Modal/ModalRoot.js';
 export { ModalContent } from './components/Modal/ModaContent.js';
 export { ModalFooter } from './components/Modal/ModalFooter.js';
 export { ModalHeader } from './components/Modal/ModalHeader.js';

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

@@ -1,5 +1,5 @@
 'use client';
-import { evaluate, getSide, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, getAlignment, getSideAxis, clamp, getPaddingObject, rectToClientRect, getAlignmentAxis, getOppositeAxis, getAxisLength, min, max } from '../../utils/dist/floating-ui.utils.js';
+import { evaluate, getSide, getSideAxis, getOppositePlacement, getExpandedPlacements, getOppositeAxisPlacements, getAlignmentSides, clamp, getPaddingObject, rectToClientRect, getAlignmentAxis, getAlignment, getOppositeAxis, getAxisLength, min, max } from '../../utils/dist/floating-ui.utils.js';
 
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
@@ -186,9 +186,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -335,10 +336,12 @@ const flip = function (options) {
         return {};
       }
       const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
       const isBasePlacement = getSide(initialPlacement) === initialPlacement;
       const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
@@ -384,8 +387,17 @@ const flip = function (options) {
           switch (fallbackStrategy) {
             case 'bestFit':
               {
-                var _overflowsData$map$so;
-                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                var _overflowsData$filter2;
+                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis ||
+                    // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === 'y';
+                  }
+                  return true;
+                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
                 if (placement) {
                   resetPlacement = placement;
                 }
@@ -425,6 +437,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -607,16 +621,16 @@ const size = function (options) {
         widthSide = side;
         heightSide = alignment === 'end' ? 'top' : 'bottom';
       }
-      const overflowAvailableHeight = height - overflow[heightSide];
-      const overflowAvailableWidth = width - overflow[widthSide];
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
       const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
       if (isYAxis) {
-        const maximumClippingWidth = width - overflow.left - overflow.right;
         availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
-        const maximumClippingHeight = height - overflow.top - overflow.bottom;
         availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
       }
       if (noShift && !alignment) {

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

@@ -1,8 +1,7 @@
 'use client';
-import { shift as shift$1, flip as flip$1, arrow as arrow$1, size as size$1, computePosition as computePosition$1 } from '../../core/dist/floating-ui.core.js';
-export { detectOverflow, offset } from '../../core/dist/floating-ui.core.js';
-import { createCoords, rectToClientRect, round, max, min, floor } from '../../utils/dist/floating-ui.utils.js';
-import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../utils/dist/floating-ui.utils.dom.js';
+import { offset as offset$1, shift as shift$1, flip as flip$1, arrow as arrow$1, computePosition as computePosition$1, size as size$1 } from '../../core/dist/floating-ui.core.js';
+import { createCoords, rectToClientRect, round, floor, max, min } from '../../utils/dist/floating-ui.utils.js';
+import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, isTopLayer, getNodeName, isOverflowElement, getNodeScroll, getParentNode, isLastTraversableNode, isTableElement, isContainingBlock, getContainingBlock } from '../../utils/dist/floating-ui.utils.dom.js';
 
 function getCssDimensions(element) {
   const css = getComputedStyle(element);
@@ -131,17 +130,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
-const topLayerSelectors = [':popover-open', ':modal'];
-function isTopLayer(floating) {
-  return topLayerSelectors.some(selector => {
-    try {
-      return floating.matches(selector);
-    } catch (e) {
-      return false;
-    }
-  });
-}
-
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
     elements,
@@ -323,7 +311,7 @@ function getClippingRect(_ref) {
     rootBoundary,
     strategy
   } = _ref;
-  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
   const firstClippingAncestor = clippingAncestors[0];
   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
@@ -385,6 +373,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   };
 }
 
+function isStaticPositioned(element) {
+  return getComputedStyle(element).position === 'static';
+}
+
 function getTrueOffsetParent(element, polyfill) {
   if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
     return null;
@@ -398,29 +390,41 @@ function getTrueOffsetParent(element, polyfill) {
 // Gets the closest ancestor positioned element. Handles some edge cases,
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
-  const window = getWindow(element);
-  if (!isHTMLElement(element) || isTopLayer(element)) {
-    return window;
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
   }
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
-    return window;
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
   }
-  return offsetParent || getContainingBlock(element) || window;
+  return offsetParent || getContainingBlock(element) || win;
 }
 
 const getElementRects = async function (data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
   return {
     reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
     floating: {
       x: 0,
       y: 0,
-      ...(await getDimensionsFn(data.floating))
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
     }
   };
 };
@@ -490,9 +494,11 @@ function observeMove(element, onMove) {
           return refresh();
         }
         if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
           timeoutId = setTimeout(() => {
             refresh(false, 1e-7);
-          }, 100);
+          }, 1000);
         } else {
           refresh(false, ratio);
         }
@@ -596,6 +602,15 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -649,4 +664,4 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-export { arrow, autoUpdate, computePosition, flip, getOverflowAncestors, platform, shift, size };
+export { arrow, autoUpdate, computePosition, flip, getOverflowAncestors, offset, platform, shift, size };