@digdir/designsystemet-react 1.0.0 → 1.0.2

package/README.md

@@ -2,10 +2,13 @@
 
 React implementation of the Designsystemet components
 
-- Uses `@digdir/designsystemet-theme` and `@digdir/designsystemet-css` for styling.
-- All components support `forwardRef`.
+- Uses `@digdir/designsystemet-css` for styling.
+- Uses `@digdir/designsystemet-theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
+  - Build your own theme on https://theme.designsystemet.no/
+- All components support `ref`.
+- All components support SSR.
+  - Use full component name, e.g. `CardBlock` instead of `Card.Block`
 - Most components extend and behave as native html-elements.
 - Most components support composition and `asChild` for overriding the underlying html-element.
-- SSR support.
 
 Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.

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

@@ -0,0 +1,160 @@
+'use client';
+'use strict';
+
+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');
+
+const MultiSuggestionContext = react.createContext({});
+const MultiSuggestion = react.forwardRef(function MultiSuggestion({ value, defaultValue, onValueChange, name, filter = true, allowCreate = false, className, ...rest }, ref) {
+    const [listId, setListId] = react.useState(react.useId());
+    const [selectedItems, setSelectedItems] = react.useState({});
+    const inputRef = react.useRef(null);
+    const uTagsRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([ref, uTagsRef]);
+    const isControlled = Boolean(value);
+    const [controlledDirty, setControlledDirty] = react.useState(false);
+    /**
+     * If we have set a default value, set it on initial render
+     */
+    react.useEffect(() => {
+        if (!defaultValue)
+            return;
+        if (value) {
+            console.warn('defaultValue can not be used in combination with value');
+            return;
+        }
+        const items = uTagsRef.current?.querySelectorAll('u-option');
+        if (!items)
+            return;
+        const defaultItems = Array.from(items).filter((item) => defaultValue.includes(item.value));
+        for (const item of defaultItems) {
+            uTagsRef.current?.dispatchEvent(new CustomEvent('add', {
+                detail: { item },
+            }));
+            setSelectedItems((prevItems) => ({
+                ...prevItems,
+                [item.value]: item,
+            }));
+        }
+        return () => {
+            console.error('Default value changed during render');
+        };
+    }, [defaultValue]);
+    /**
+     * Controlled state management
+     */
+    react.useEffect(() => {
+        if (!value)
+            return;
+        const items = inputRef.current?.list?.options;
+        if (!items)
+            return;
+        const itemsArray = Array.from(items);
+        const itemsArrayValues = itemsArray.map((item) => item.value);
+        const selectedArray = Object.keys(selectedItems);
+        const validValues = value.filter((val) => itemsArrayValues.includes(val));
+        const itemsToAdd = validValues.filter((val) => !selectedArray.includes(val));
+        const itemsToRemove = selectedArray.filter((val) => !validValues.includes(val));
+        for (const item of itemsArray) {
+            if (itemsToAdd.includes(item.value)) {
+                uTagsRef.current?.dispatchEvent(new CustomEvent('add', {
+                    detail: { item },
+                }));
+                setSelectedItems((prevItems) => ({
+                    ...prevItems,
+                    [item.value]: item,
+                }));
+            }
+            if (itemsToRemove.includes(item.value)) {
+                uTagsRef.current?.dispatchEvent(new CustomEvent('remove', {
+                    detail: { item },
+                }));
+                setSelectedItems((prevItems) => {
+                    const { [item.value]: _, ...rest } = prevItems;
+                    return rest;
+                });
+            }
+        }
+    }, [value]);
+    /**
+     * Listerners and handling of adding/removing
+     */
+    react.useEffect(() => {
+        if (!uTagsRef?.current)
+            return;
+        const handleItemsChange = (e) => {
+            e.preventDefault();
+            const item = e.detail.item;
+            if (e.detail.action === 'add') {
+                /**
+                 * If creating is off, check if the value is allowed to be added
+                 */
+                if (!allowCreate) {
+                    const optionExists = Array.from(inputRef.current?.list?.options || [], uDatalist.getDatalistValue).includes(item.value);
+                    if (!optionExists)
+                        return;
+                }
+                setSelectedItems((prevItems) => ({
+                    ...prevItems,
+                    [item.value]: item,
+                }));
+            }
+            if (e.detail.action === 'remove') {
+                setSelectedItems((prevItems) => {
+                    const { [item.value]: _, ...rest } = prevItems;
+                    return rest;
+                });
+            }
+            if (isControlled)
+                setControlledDirty(true);
+        };
+        uTagsRef.current.addEventListener('tags', handleItemsChange);
+        return () => {
+            uTagsRef.current?.removeEventListener('tags', handleItemsChange);
+        };
+    }, [uTagsRef, setSelectedItems]);
+    /**
+     * When controlled, trigger onValueChange callback for ordinary add/remove
+     */
+    react.useEffect(() => {
+        if (!controlledDirty)
+            return;
+        onValueChange?.(Object.keys(selectedItems));
+        setControlledDirty(false);
+    }, [controlledDirty]);
+    const handleFilter = react.useCallback((input) => {
+        const list = input?.list;
+        // Let <datalist> handle filtering if filter is true
+        if (filter === true || !list)
+            return;
+        // Handle custom filter
+        if (filter !== false) {
+            let index = 0;
+            for (const option of list.getElementsByTagName('u-option')) {
+                if (!option.hasAttribute('data-empty'))
+                    option.disabled = !filter({
+                        index: index++, // Increment index for each <option>
+                        input,
+                        optionElement: option,
+                        text: option.text,
+                        value: uDatalist.getDatalistValue(option),
+                    });
+            }
+        }
+        uDatalist.syncDatalistState(input); // Sync the datalist state if filter is custom or false
+    }, [filter]);
+    return (jsxRuntime.jsxs(MultiSuggestionContext.Provider, { value: {
+            inputRef,
+            listId,
+            selectedItems,
+            setListId,
+            handleFilter,
+        }, children: [jsxRuntime.jsx("u-tags", { class: cl('ds-multi-suggestion', className), ref: mergedRefs, ...rest }), name && (jsxRuntime.jsx("select", { multiple: true, hidden: true, name: name, children: Object.values(selectedItems).map((item) => (jsxRuntime.jsx("option", { value: item.value }, item.value))) }))] }));
+});
+
+exports.MultiSuggestion = MultiSuggestion;
+exports.MultiSuggestionContext = MultiSuggestionContext;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../Chip/index.js');
+var MultiSuggestion = require('./MultiSuggestion.js');
+
+const MultiSuggestionChips = ({ render = ({ value }) => value, }) => {
+    const { selectedItems } = react.useContext(MultiSuggestion.MultiSuggestionContext);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedItems &&
+            Object.values(selectedItems).map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: render({
+                        text: item.textContent || item.value,
+                        value: item.value,
+                        element: item,
+                    }) }) }, item.value))) }));
+};
+MultiSuggestionChips.displayName = 'MultiSuggestionChips';
+
+exports.MultiSuggestionChips = MultiSuggestionChips;

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

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var MultiSuggestion = require('./MultiSuggestion.js');
+var Button = require('../Button/Button.js');
+
+/**
+ * Component that provides a clear button for the MultiSuggestion input.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.Clear />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionClear = react.forwardRef(function MultiSuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const { inputRef } = react.useContext(MultiSuggestion.MultiSuggestionContext); //, handleValueChange
+    const handleClear = (event) => {
+        if (!inputRef?.current)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(inputRef?.current instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        event.preventDefault();
+        setReactInputValue(inputRef.current, '');
+        inputRef.current.focus();
+        onClick?.(event);
+    };
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
+const setReactInputValue = (input, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(input, value);
+    }
+    else {
+        throw new Error('Unable to find the native input value setter');
+    }
+    const inputEvent = new Event('input', { bubbles: true });
+    const changeEvent = new Event('change', { bubbles: true });
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
+};
+
+exports.MultiSuggestionClear = MultiSuggestionClear;
+exports.setReactInputValue = setReactInputValue;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Component that provides an empty MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion.List`
+ *
+ * @example
+ * <MultiSuggestion.List>
+ *   <MultiSuggestion.Empty>Tomt</MultiSuggestion.Empty>
+ * </MultiSuggestion.List>
+ */
+const MultiSuggestionEmpty = react.forwardRef(function MultiSuggestionEmpty(rest, ref) {
+    return (
+    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
+    jsxRuntime.jsx("u-option", { "data-empty": true, role: 'none', ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionEmpty = MultiSuggestionEmpty;

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

@@ -0,0 +1,37 @@
+'use client';
+'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 Input = require('../Input/Input.js');
+
+/**
+ * Component that provides an input field for the MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+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]);
+    // Update also if controlled value
+    react.useEffect(() => {
+        handleFilter?.(inputRef?.current);
+    }, [value]);
+    return (jsxRuntime.jsx(Input.Input, { ref: mergedRefs, list: listId, value: value, onInput: (event) => {
+            onInput?.(event); // Should run first
+            if (!uDatalist.isDatalistClick(event.nativeEvent))
+                handleFilter?.(inputRef?.current);
+        }, placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
+        , ...rest }));
+});
+
+exports.MultiSuggestionInput = MultiSuggestionInput;

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

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+var MultiSuggestion = require('./MultiSuggestion.js');
+
+/**
+ * Component that provides a MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionList = react.forwardRef(function MultiSuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+    const { inputRef, listId, setListId, handleFilter } = react.useContext(MultiSuggestion.MultiSuggestionContext);
+    react.useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
+    react.useEffect(() => {
+        if (id && listId !== id)
+            setListId?.(id);
+    }, [listId, id, setListId]);
+    return (jsxRuntime.jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionList = MultiSuggestionList;

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

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+
+const MultiSuggestionOption = react.forwardRef(function MultiSuggestionOption({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionOption = MultiSuggestionOption;

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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var MultiSuggestion$1 = require('./MultiSuggestion.js');
+var MultiSuggestionChips = require('./MultiSuggestionChips.js');
+var MultiSuggestionClear = require('./MultiSuggestionClear.js');
+var MultiSuggestionEmpty = require('./MultiSuggestionEmpty.js');
+var MultiSuggestionInput = require('./MultiSuggestionInput.js');
+var MultiSuggestionList = require('./MultiSuggestionList.js');
+var MultiSuggestionOption = require('./MultiSuggestionOption.js');
+
+const MultiSuggestion = Object.assign(MultiSuggestion$1.MultiSuggestion, {
+    Input: MultiSuggestionInput.MultiSuggestionInput,
+    List: MultiSuggestionList.MultiSuggestionList,
+    Option: MultiSuggestionOption.MultiSuggestionOption,
+    Chips: MultiSuggestionChips.MultiSuggestionChips,
+    Empty: MultiSuggestionEmpty.MultiSuggestionEmpty,
+    Clear: MultiSuggestionClear.MultiSuggestionClear,
+});
+MultiSuggestion.displayName = 'EXPERIMENTRAL_MultiSuggestion';
+MultiSuggestion.Input.displayName = 'EXPERIMENTRAL_MultiSuggestion.Input';
+MultiSuggestion.List.displayName = 'EXPERIMENTRAL_MultiSuggestion.List';
+MultiSuggestion.Option.displayName = 'EXPERIMENTRAL_MultiSuggestion.Option';
+MultiSuggestion.Chips.displayName = 'EXPERIMENTRAL_MultiSuggestion.Chips';
+MultiSuggestion.Empty.displayName = 'EXPERIMENTRAL_MultiSuggestion.Empty';
+MultiSuggestion.Clear.displayName = 'EXPERIMENTRAL_MultiSuggestion.Clear';
+
+exports.EXPERIMENTAL_MultiSuggestionChips = MultiSuggestionChips.MultiSuggestionChips;
+exports.EXPERIMENTAL_MultiSuggestionClear = MultiSuggestionClear.MultiSuggestionClear;
+exports.EXPERIMENTAL_MultiSuggestionEmpty = MultiSuggestionEmpty.MultiSuggestionEmpty;
+exports.EXPERIMENTAL_MultiSuggestionInput = MultiSuggestionInput.MultiSuggestionInput;
+exports.EXPERIMENTAL_MultiSuggestionList = MultiSuggestionList.MultiSuggestionList;
+exports.EXPERIMENTAL_MultiSuggestionOption = MultiSuggestionOption.MultiSuggestionOption;
+exports.EXPERIMENTAL_MultiSuggestion = MultiSuggestion;

package/dist/cjs/index.js

@@ -96,6 +96,13 @@ var SuggestionInput = require('./components/Suggestion/SuggestionInput.js');
 var SuggestionEmpty = require('./components/Suggestion/SuggestionEmpty.js');
 var SuggestionOption = require('./components/Suggestion/SuggestionOption.js');
 var SuggestionClear = require('./components/Suggestion/SuggestionClear.js');
+var index$k = require('./components/MultiSuggestion/index.js');
+var MultiSuggestionInput = require('./components/MultiSuggestion/MultiSuggestionInput.js');
+var MultiSuggestionList = require('./components/MultiSuggestion/MultiSuggestionList.js');
+var MultiSuggestionOption = require('./components/MultiSuggestion/MultiSuggestionOption.js');
+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 useDebounceCallback = require('./utilities/hooks/useDebounceCallback/useDebounceCallback.js');
@@ -210,6 +217,13 @@ exports.EXPERIMENTAL_SuggestionInput = SuggestionInput.SuggestionInput;
 exports.EXPERIMENTAL_SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
 exports.EXPERIMENTAL_SuggestionOption = SuggestionOption.SuggestionOption;
 exports.EXPERIMENTAL_SuggestionClear = SuggestionClear.SuggestionClear;
+exports.EXPERIMENTAL_MultiSuggestion = index$k.EXPERIMENTAL_MultiSuggestion;
+exports.EXPERIMENTAL_MultiSuggestionInput = MultiSuggestionInput.MultiSuggestionInput;
+exports.EXPERIMENTAL_MultiSuggestionList = MultiSuggestionList.MultiSuggestionList;
+exports.EXPERIMENTAL_MultiSuggestionOption = MultiSuggestionOption.MultiSuggestionOption;
+exports.EXPERIMENTAL_MultiSuggestionChips = MultiSuggestionChips.MultiSuggestionChips;
+exports.EXPERIMENTAL_MultiSuggestionEmpty = MultiSuggestionEmpty.MultiSuggestionEmpty;
+exports.EXPERIMENTAL_MultiSuggestionClear = MultiSuggestionClear.MultiSuggestionClear;
 exports.omit = omit.omit;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.useDebounceCallback = useDebounceCallback.useDebounceCallback;

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

@@ -1,7 +1,6 @@
 'use client';
 'use strict';
 
-var react$1 = require('@floating-ui/react');
 var react = require('react');
 
 const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
@@ -20,8 +19,12 @@ function useCheckboxGroup(props) {
     const errorId = react.useId();
     const checkboxRefs = react.useRef(new Set());
     const indeterminateRefs = react.useRef(new Set());
+    const inputRefs = react.useRef(new Map());
     const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
     const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    react.useEffect(() => {
+        toggleIndeterminate(getIndeterminateInputs, getInputs);
+    }, [groupValue]);
     return {
         /**
          * Current value of the group.
@@ -47,44 +50,49 @@ function useCheckboxGroup(props) {
             const props = typeof propsOrValue === 'string'
                 ? { value: propsOrValue }
                 : propsOrValue || {};
-            const { allowIndeterminate = false, ref = undefined, value = '', ...rest } = props;
-            const inputRef = react.useRef(null);
-            const mergedRefs = react$1.useMergeRefs([ref, inputRef]);
+            const { allowIndeterminate = false, ref: forwardedRef = undefined, value = '', ...rest } = props;
+            const handleRef = (element) => {
+                if (element) {
+                    const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                    refs.current.add(element);
+                    inputRefs.current.set(value, element);
+                    if (getIndeterminateInputs().length) {
+                        toggleIndeterminate(getIndeterminateInputs, getInputs);
+                    }
+                }
+                else {
+                    const oldElement = inputRefs.current.get(value);
+                    if (oldElement) {
+                        checkboxRefs.current.delete(oldElement);
+                        indeterminateRefs.current.delete(oldElement);
+                        inputRefs.current.delete(value);
+                    }
+                }
+                if (forwardedRef) {
+                    if (typeof forwardedRef === 'function') {
+                        forwardedRef(element);
+                    }
+                    else {
+                        forwardedRef.current = element;
+                    }
+                }
+            };
             const handleChange = () => {
                 const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
                 setGroupValue(nextGroupValue);
                 onChange?.(nextGroupValue, groupValue);
             };
             const indeterminateChange = () => {
-                if (!inputRef.current)
+                const element = inputRefs.current.get(value);
+                if (!element)
                     return;
-                const checked = !!inputRef.current.checked;
+                const checked = !!element.checked;
                 for (const input of getInputs(!checked)) {
-                    /* We use click to send both event and change checked state */
                     input.click();
                 }
             };
-            react.useEffect(() => {
-                if (!allowIndeterminate)
-                    return;
-                toggleIndeterminate(getIndeterminateInputs, getInputs);
-            }, [groupValue]);
-            react.useEffect(() => {
-                if (!inputRef.current)
-                    return;
-                const input = inputRef.current;
-                const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
-                refs.current.add(input);
-                if (getIndeterminateInputs().length)
-                    toggleIndeterminate(getIndeterminateInputs, getInputs);
-                return () => {
-                    refs.current.delete(input);
-                };
-            }, [value]);
             return {
-                /* Spread anything the user has set first */
                 ...rest,
-                /* Concat ours with the user prop */
                 'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
                     undefined,
                 'aria-invalid': !!error || rest['aria-invalid'],
@@ -97,7 +105,7 @@ function useCheckboxGroup(props) {
                     allowIndeterminate && indeterminateChange();
                     handleChange();
                 },
-                ref: mergedRefs,
+                ref: handleRef,
                 value,
                 disabled: disabled || rest.disabled,
                 readOnly: readOnly || rest.readOnly,

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

@@ -1,7 +1,6 @@
 'use client';
 'use strict';
 
-var react$1 = require('@floating-ui/react');
 var react = require('react');
 
 /**
@@ -43,34 +42,38 @@ function useRadioGroup({ error, readOnly, required, disabled, name, onChange, va
             const props = typeof propsOrValue === 'string'
                 ? { value: propsOrValue }
                 : propsOrValue;
-            const { ref = undefined, value = '', ...rest } = props;
-            const localRef = react.useRef(null);
-            const mergedRefs = react$1.useMergeRefs([ref, localRef]);
-            const handleChange = () => {
-                const input = localRef.current;
-                const isInput = input instanceof HTMLInputElement;
-                if (isInput && input.name === radioGroupName) {
+            const { ref: forwardedRef = undefined, value = '', ...rest } = props;
+            const handleRef = (element) => {
+                if (element) {
+                    // Set initial checked state
+                    element.checked = value === groupValue;
+                }
+                // Handle forwarded ref
+                if (forwardedRef) {
+                    if (typeof forwardedRef === 'function') {
+                        forwardedRef(element);
+                    }
+                    else {
+                        forwardedRef.current = element;
+                    }
+                }
+            };
+            const handleChange = (e) => {
+                if (e.target.name === radioGroupName) {
                     setGroupValue((prevValue) => {
-                        onChange?.(input.value, prevValue);
-                        return input.value;
+                        onChange?.(e.target.value, prevValue);
+                        return e.target.value;
                     });
                 }
             };
-            react.useEffect(() => {
-                if (!localRef.current)
-                    return;
-                localRef.current.checked = value === groupValue;
-            }, [groupValue, value]);
             return {
-                /* Spread anything the user has set first */
                 ...rest,
-                /* Concat ours with the user prop */
                 name: radioGroupName,
                 'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
                     undefined,
                 'aria-invalid': !!error || rest['aria-invalid'],
                 value,
-                ref: mergedRefs,
+                ref: handleRef,
                 required: required || rest.required,
                 readOnly: readOnly || rest.readOnly,
                 disabled: disabled || rest.disabled,
@@ -78,7 +81,7 @@ function useRadioGroup({ error, readOnly, required, disabled, name, onChange, va
                     rest.onChange?.(e);
                     if (e.defaultPrevented)
                         return;
-                    handleChange();
+                    handleChange(e);
                 },
             };
         },