@digdir/designsystemet-react 1.0.2 → 1.0.4

package/dist/cjs/components/Breadcrumbs/BreadcrumbsList.js

@@ -2,12 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 const BreadcrumbsList = react.forwardRef(function BreadcrumbsList(rest, ref) {
     const innerRef = react.useRef(null);
-    const mergedRefs = react$1.useMergeRefs([innerRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([innerRef, ref]);
     // Set aria-current on last link
     react.useEffect(() => {
         const links = innerRef.current?.querySelectorAll(':scope > * > *') || [];

package/dist/cjs/components/Card/Card.js

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * Card component to present content in a structured way.
@@ -20,7 +20,7 @@ var react = require('react');
 const Card = react.forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const cardRef = react.useRef(null);
-    const mergedRefs = react$1.useMergeRefs([cardRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([cardRef, ref]);
     // Forward click on card to heading links for better accessibility
     // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
     react.useEffect(() => {

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

@@ -18,8 +18,8 @@ var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var utilities = require('./utilities.js');
-var Spinner = require('../Spinner/Spinner.js');
 var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var Spinner = require('../Spinner/Spinner.js');
 var omit = require('../../utilities/omit/omit.js');
 
 /**

package/dist/cjs/components/Details/Details.js

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var cl = require('clsx/lite');
 var react = require('react');
 require('@u-elements/u-details');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
@@ -19,7 +19,7 @@ require('@u-elements/u-details');
 const Details = react.forwardRef(function Details({ className, open, defaultOpen = false, variant = 'default', onToggle, ...rest }, ref) {
     const detailsRef = react.useRef(null);
     const initialOpen = react.useRef(defaultOpen); // Allow rendering defaultOpen on server, but only render once on client
-    const mergedRefs = react$1.useMergeRefs([detailsRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([detailsRef, ref]);
     const onToggleRef = react.useRef(onToggle); // Using ref to enable access inside useEffect without re-binding event listeners
     const openRef = react.useRef(open);
     onToggleRef.current = onToggle;

package/dist/cjs/components/Dialog/Dialog.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var DialogTriggerContext = require('./DialogTriggerContext.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 var Button = require('../Button/Button.js');
 
 /**
@@ -36,7 +36,7 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
     const contextRef = react.useContext(DialogTriggerContext.Context);
     const dialogRef = react.useRef(null); // This local ref is used to make sure the dialog works without a DialogTriggerContext
     const Component = asChild ? reactSlot.Slot : 'dialog';
-    const mergedRefs = react$1.useMergeRefs([contextRef, ref, dialogRef]);
+    const mergedRefs = useMergeRefs.useMergeRefs([contextRef, ref, dialogRef]);
     const showProp = modal ? 'showModal' : 'show';
     react.useEffect(() => dialogRef.current?.[open ? showProp : 'close'](), [open]); // Toggle open based on prop
     react.useEffect(() => {

package/dist/cjs/components/Dropdown/DropdownButton.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Button = require('../Button/Button.js');
 
-const DropdownButton = react.forwardRef(function DropdownButton({ className, ...rest }, ref) {
+const DropdownButton = react.forwardRef(function DropdownButton({ ...rest }, ref) {
     return jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', ...rest });
 });
 

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

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var cl = require('clsx/lite');
 var react = require('react');
 var fieldObserver = require('./fieldObserver.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * Field component, used to wrap a form field.
@@ -20,7 +20,7 @@ var fieldObserver = require('./fieldObserver.js');
  */
 const Field = react.forwardRef(function Field({ className, position, ...rest }, ref) {
     const fieldRef = react.useRef(null);
-    const mergedRefs = react$1.useMergeRefs([fieldRef, ref]);
+    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 }));
 });

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

@@ -38,7 +38,6 @@ function fieldObserver(fieldElement) {
             if (input === el)
                 input = null;
             if (elements.has(el)) {
-                setAttr(el, 'aria-disabled', null); // Reset disabled state
                 setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
                 elements.delete(el);
             }
@@ -46,12 +45,9 @@ function fieldObserver(fieldElement) {
         // Connect elements
         const describedbyIds = [describedby]; // Keep original aria-describedby
         const inputId = input?.id || uuid;
-        const isDisabled = input?.hasAttribute('disabled') ||
-            input?.getAttribute('aria-disabled') === 'true';
         for (const [el, value] of elements) {
             const descriptionType = el.getAttribute('data-field');
             const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
-            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
             if (descriptionType === 'validation')

package/dist/cjs/components/MultiSuggestion/MultiSuggestion.js

@@ -4,9 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('@u-elements/u-tags');
-var react$1 = require('@floating-ui/react');
 var uDatalist = require('@u-elements/u-datalist');
 var cl = require('clsx/lite');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 const MultiSuggestionContext = react.createContext({});
 const MultiSuggestion = react.forwardRef(function MultiSuggestion({ value, defaultValue, onValueChange, name, filter = true, allowCreate = false, className, ...rest }, ref) {
@@ -14,7 +14,7 @@ const MultiSuggestion = react.forwardRef(function MultiSuggestion({ value, defau
     const [selectedItems, setSelectedItems] = react.useState({});
     const inputRef = react.useRef(null);
     const uTagsRef = react.useRef(null);
-    const mergedRefs = react$1.useMergeRefs([ref, uTagsRef]);
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, uTagsRef]);
     const isControlled = Boolean(value);
     const [controlledDirty, setControlledDirty] = react.useState(false);
     /**

package/dist/cjs/components/MultiSuggestion/MultiSuggestionInput.js

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var uDatalist = require('@u-elements/u-datalist');
 var react = require('react');
 var MultiSuggestion = require('./MultiSuggestion.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 var Input = require('../Input/Input.js');
 
 /**
@@ -21,7 +21,7 @@ var Input = require('../Input/Input.js');
  */
 const MultiSuggestionInput = react.forwardRef(function MultiSuggestionList({ value, onInput, ...rest }, ref) {
     const { listId, inputRef, handleFilter } = react.useContext(MultiSuggestion.MultiSuggestionContext);
-    const mergedRefs = react$1.useMergeRefs([inputRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([inputRef, ref]);
     // Update also if controlled value
     react.useEffect(() => {
         handleFilter?.(inputRef?.current);

package/dist/cjs/components/Popover/Popover.js

@@ -3,11 +3,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var dom = require('@floating-ui/dom');
-var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var PopoverTriggerContext = require('./PopoverTriggerContext.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * Popover component, used to display content in a popover over an element.
@@ -29,7 +29,7 @@ var PopoverTriggerContext = require('./PopoverTriggerContext.js');
 const Popover = react.forwardRef(function Popover({ id, className, onClose, onOpen, open, variant = 'default', placement = 'top', autoPlacement = true, asChild = false, ...rest }, ref) {
     const Component = asChild ? reactSlot.Slot : 'div';
     const popoverRef = react.useRef(null);
-    const mergedRefs = react$1.useMergeRefs([popoverRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([popoverRef, ref]);
     const { popoverId, setPopoverId } = react.useContext(PopoverTriggerContext.Context);
     const [internalOpen, setInternalOpen] = react.useState(false);
     const controlledOpen = open ?? internalOpen;

package/dist/cjs/components/Skeleton/Skeleton.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
 var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * Skeleton is used to represent a draft of page while the content loads.
@@ -20,7 +20,7 @@ const Skeleton = react.forwardRef(function Skeleton({ asChild, className, height
     const Component = asChild ? reactSlot.Slot : 'span';
     const isText = variant === 'text';
     const animationRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
-    const mergedRefs = react$1.useMergeRefs([animationRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([animationRef, ref]);
     return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-text": isText ? '-'.repeat(Number(width) || 1) : undefined, "data-variant": variant, ref: mergedRefs, style: isText ? style : { width, height, ...style }, ...rest }));
 });
 

package/dist/cjs/components/Spinner/Spinner.js

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var cl = require('clsx/lite');
 var react = require('react');
 var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * Spinner component used for indicating busy or indeterminate loading.
@@ -16,7 +16,7 @@ var useSynchronizedAnimation = require('../../utilities/hooks/useSynchronizedAni
 const Spinner = react.forwardRef(function Spinner({ 'aria-label': ariaLabel, className, ...rest }, ref) {
     const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-rotate-animation');
     const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-stroke-animation');
-    const mergedRefs = react$1.useMergeRefs([svgRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([svgRef, ref]);
     return (jsxRuntime.jsxs("svg", { "aria-label": ariaLabel, className: cl('ds-spinner', className), ref: mergedRefs, role: 'img', viewBox: '0 0 50 50', ...rest, children: [jsxRuntime.jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
 });
 

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

@@ -31,7 +31,6 @@ const Suggestion = react.forwardRef(function Suggestion({ className, filter = tr
         // Let <datalist> handle filtering if filter is true
         if (filter === true || !list)
             return;
-        console.log(list);
         // Handle custom filter
         if (filter !== false) {
             let index = 0;

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

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 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');
 
 /**
@@ -21,7 +21,7 @@ var Input = require('../Input/Input.js');
  */
 const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInput, ...rest }, ref) {
     const { listId, inputRef, handleFilter } = react.useContext(Suggestion.SuggestionContext);
-    const mergedRefs = react$1.useMergeRefs([inputRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([inputRef, ref]);
     const updateSelected = react.useCallback(() => {
         const { list, value } = inputRef?.current || {};
         for (const option of list?.options || []) {

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

@@ -3,8 +3,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var react$1 = require('@floating-ui/react');
 var Tabs = require('./Tabs.js');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * A single content item in a Tabs component.
@@ -17,7 +17,7 @@ const TabsPanel = react.forwardRef(function TabsPanel({ children, value, ...rest
     const active = value === tabsValue;
     const [hasTabbableElement, setHasTabbableElement] = react.useState(false);
     const internalRef = react.useRef(null);
-    const mergedRef = react$1.useMergeRefs([ref, internalRef]);
+    const mergedRef = useMergeRefs.useMergeRefs([ref, internalRef]);
     /* Check if the panel has any tabbable elements */
     react.useEffect(() => {
         if (!internalRef.current)

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

@@ -6,7 +6,7 @@ var dom = require('@floating-ui/dom');
 var reactSlot = require('@radix-ui/react-slot');
 var cl = require('clsx/lite');
 var react = require('react');
-var react$1 = require('@floating-ui/react');
+var useMergeRefs = require('../../utilities/hooks/useMergeRefs/useMergeRefs.js');
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
@@ -21,12 +21,12 @@ var react$1 = require('@floating-ui/react');
  *  Hover me
  * </Tooltip>
  */
-const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', open, className, ...rest }, ref) {
+const Tooltip = react.forwardRef(function Tooltip({ id, children, content, placement = 'top', autoPlacement = true, open, className, ...rest }, ref) {
     const randomTooltipId = react.useId();
     const [internalOpen, setInternalOpen] = react.useState(false);
     const triggerRef = react.useRef(null);
     const tooltipRef = react.useRef(null);
-    const mergedRefs = react$1.useMergeRefs([tooltipRef, ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([tooltipRef, ref]);
     const controlledOpen = open ?? internalOpen;
     const setOpen = () => {
         setInternalOpen(true);
@@ -52,9 +52,9 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
                             const styles = getComputedStyle(data.elements.floating, '::before');
                             return parseFloat(styles.height);
                         }),
-                        dom.flip({
-                            fallbackAxisSideDirection: 'start',
-                        }),
+                        ...(autoPlacement
+                            ? [dom.flip({ fallbackAxisSideDirection: 'start' }), dom.shift()]
+                            : []),
                         dom.shift(),
                         arrowPseudoElement,
                     ],

package/dist/cjs/index.js

@@ -103,14 +103,14 @@ var MultiSuggestionOption = require('./components/MultiSuggestion/MultiSuggestio
 var MultiSuggestionChips = require('./components/MultiSuggestion/MultiSuggestionChips.js');
 var MultiSuggestionEmpty = require('./components/MultiSuggestion/MultiSuggestionEmpty.js');
 var MultiSuggestionClear = require('./components/MultiSuggestion/MultiSuggestionClear.js');
-var omit = require('./utilities/omit/omit.js');
 var useCheckboxGroup = require('./utilities/hooks/useCheckboxGroup/useCheckboxGroup.js');
+var useRadioGroup = require('./utilities/hooks/useRadioGroup/useRadioGroup.js');
+var usePagination = require('./utilities/hooks/usePagination/usePagination.js');
 var useDebounceCallback = require('./utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var useIsomorphicLayoutEffect = require('./utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 var useMediaQuery = require('./utilities/hooks/useMediaQuery/useMediaQuery.js');
-var useRadioGroup = require('./utilities/hooks/useRadioGroup/useRadioGroup.js');
 var useSynchronizedAnimation = require('./utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-var usePagination = require('./utilities/hooks/usePagination/usePagination.js');
+var omit = require('./utilities/omit/omit.js');
 var RovingFocusRoot = require('./utilities/RovingFocus/RovingFocusRoot.js');
 var useRovingFocus = require('./utilities/RovingFocus/useRovingFocus.js');
 var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
@@ -224,14 +224,14 @@ exports.EXPERIMENTAL_MultiSuggestionOption = MultiSuggestionOption.MultiSuggesti
 exports.EXPERIMENTAL_MultiSuggestionChips = MultiSuggestionChips.MultiSuggestionChips;
 exports.EXPERIMENTAL_MultiSuggestionEmpty = MultiSuggestionEmpty.MultiSuggestionEmpty;
 exports.EXPERIMENTAL_MultiSuggestionClear = MultiSuggestionClear.MultiSuggestionClear;
-exports.omit = omit.omit;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
+exports.useRadioGroup = useRadioGroup.useRadioGroup;
+exports.usePagination = usePagination.usePagination;
 exports.useDebounceCallback = useDebounceCallback.useDebounceCallback;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
 exports.useMediaQuery = useMediaQuery.useMediaQuery;
-exports.useRadioGroup = useRadioGroup.useRadioGroup;
 exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
-exports.usePagination = usePagination.usePagination;
+exports.omit = omit.omit;
 exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;
 exports.useRovingFocus = useRovingFocus.useRovingFocus;
 exports.RovingFocusItem = RovingFocusItem.RovingFocusItem;

package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js

@@ -2,10 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var useRovingFocus = require('./useRovingFocus.js');
+var useMergeRefs = require('../hooks/useMergeRefs/useMergeRefs.js');
 
 /** Get the next focusable RovingFocusItem */
 function getNextFocusableValue(items, value) {
@@ -63,7 +63,7 @@ const RovingFocusItem = react.forwardRef(({ value, asChild, ...rest }, ref) => {
             }
         },
     });
-    const mergedRefs = react$1.useMergeRefs([ref, rovingProps.ref]);
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, rovingProps.ref]);
     return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
 });
 

package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js

@@ -2,9 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('@floating-ui/react');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
+var useMergeRefs = require('../hooks/useMergeRefs/useMergeRefs.js');
 
 const RovingFocusContext = react.createContext({
     elements: { current: new Map() },
@@ -24,7 +24,7 @@ const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation =
     const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
     const elements = react.useRef(new Map());
     const myRef = react.useRef(null);
-    const refs = react$1.useMergeRefs([ref, myRef]);
+    const refs = useMergeRefs.useMergeRefs([ref, myRef]);
     const getOrderedItems = () => {
         if (!myRef.current)
             return [];

package/dist/cjs/utilities/hooks/useMergeRefs/useMergeRefs.js

@@ -0,0 +1,57 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+// https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useMergeRefs.ts
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ */
+function useMergeRefs(refs) {
+    const cleanupRef = react.useRef(undefined);
+    const refEffect = react.useCallback((instance) => {
+        const cleanups = refs.map((ref) => {
+            if (ref == null) {
+                return;
+            }
+            if (typeof ref === 'function') {
+                const refCallback = ref;
+                // biome-ignore lint/suspicious/noConfusingVoidType: @types-react wants `void` here
+                const refCleanup = refCallback(instance);
+                return typeof refCleanup === 'function'
+                    ? refCleanup
+                    : () => {
+                        refCallback(null);
+                    };
+            }
+            ref.current = instance;
+            return () => {
+                ref.current = null;
+            };
+        });
+        return () => {
+            for (const refCleanup of cleanups) {
+                refCleanup?.();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+    return react.useMemo(() => {
+        if (refs.every((ref) => ref == null)) {
+            return null;
+        }
+        return (value) => {
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = undefined;
+            }
+            if (value != null) {
+                cleanupRef.current =
+                    refEffect(value);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}
+
+exports.useMergeRefs = useMergeRefs;

package/dist/esm/components/Breadcrumbs/BreadcrumbsList.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
 import { forwardRef, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 
 const BreadcrumbsList = forwardRef(function BreadcrumbsList(rest, ref) {
     const innerRef = useRef(null);

package/dist/esm/components/Card/Card.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 
 /**
  * Card component to present content in a structured way.

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

@@ -16,8 +16,8 @@ import { useCombobox } from './useCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { prefix, setReactInputValue, removePrefix } from './utilities.js';
-import { Spinner } from '../Spinner/Spinner.js';
 import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { Spinner } from '../Spinner/Spinner.js';
 import { omit } from '../../utilities/omit/omit.js';
 
 /**

package/dist/esm/components/Details/Details.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
 import '@u-elements/u-details';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.

package/dist/esm/components/Dialog/Dialog.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useContext, useRef, useEffect } from 'react';
 import { Context } from './DialogTriggerContext.js';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 import { Button } from '../Button/Button.js';
 
 /**

package/dist/esm/components/Dropdown/DropdownButton.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from '../Button/Button.js';
 
-const DropdownButton = forwardRef(function DropdownButton({ className, ...rest }, ref) {
+const DropdownButton = forwardRef(function DropdownButton({ ...rest }, ref) {
     return jsx(Button, { ref: ref, variant: 'tertiary', ...rest });
 });
 

package/dist/esm/components/Field/Field.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useEffect } from 'react';
 import { fieldObserver } from './fieldObserver.js';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 
 /**
  * Field component, used to wrap a form field.

package/dist/esm/components/Field/fieldObserver.js

@@ -36,7 +36,6 @@ function fieldObserver(fieldElement) {
             if (input === el)
                 input = null;
             if (elements.has(el)) {
-                setAttr(el, 'aria-disabled', null); // Reset disabled state
                 setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
                 elements.delete(el);
             }
@@ -44,12 +43,9 @@ function fieldObserver(fieldElement) {
         // Connect elements
         const describedbyIds = [describedby]; // Keep original aria-describedby
         const inputId = input?.id || uuid;
-        const isDisabled = input?.hasAttribute('disabled') ||
-            input?.getAttribute('aria-disabled') === 'true';
         for (const [el, value] of elements) {
             const descriptionType = el.getAttribute('data-field');
             const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
-            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
             if (descriptionType === 'validation')

package/dist/esm/components/MultiSuggestion/MultiSuggestion.js

@@ -2,9 +2,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useState, useId, useRef, useEffect, useCallback } from 'react';
 import '@u-elements/u-tags';
-import { useMergeRefs } from '@floating-ui/react';
 import { getDatalistValue, syncDatalistState } from '@u-elements/u-datalist';
 import cl from 'clsx/lite';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 
 const MultiSuggestionContext = createContext({});
 const MultiSuggestion = forwardRef(function MultiSuggestion({ value, defaultValue, onValueChange, name, filter = true, allowCreate = false, className, ...rest }, ref) {

package/dist/esm/components/MultiSuggestion/MultiSuggestionInput.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
 import { isDatalistClick } from '@u-elements/u-datalist';
 import { forwardRef, useContext, useEffect } from 'react';
 import { MultiSuggestionContext } from './MultiSuggestion.js';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 import { Input } from '../Input/Input.js';
 
 /**

package/dist/esm/components/Popover/Popover.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
-import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
 import { Context } from './PopoverTriggerContext.js';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 
 /**
  * Popover component, used to display content in a popover over an element.

package/dist/esm/components/Skeleton/Skeleton.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import { useSynchronizedAnimation } from '../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
 
 /**
  * Skeleton is used to represent a draft of page while the content loads.