feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-radio/lib/components/RadioGroup/useRadioGroup.js

@@ -0,0 +1,57 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render RadioGroup.
+ *
+ * The returned state can be modified with hooks such as useRadioGroupStyles_unstable,
+ * before being passed to renderRadioGroup_unstable.
+ *
+ * @param props - props from this instance of RadioGroup
+ * @param ref - reference to root HTMLElement of RadioGroup
+ */ export const useRadioGroup_unstable = (props, ref)=>{
+    const { layout = 'vertical', ...baseProps } = props;
+    const state = useRadioGroupBase_unstable(baseProps, ref);
+    return {
+        layout,
+        ...state
+    };
+};
+/**
+ * Create the base state required to render RadioGroup, without design-related properties such as `layout`.
+ */ export const useRadioGroupBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props);
+    const generatedName = useId('radiogroup-');
+    const { name = generatedName, value, defaultValue, disabled, onChange, required } = props;
+    return {
+        name,
+        value,
+        defaultValue,
+        disabled,
+        required,
+        components: {
+            root: 'div'
+        },
+        root: {
+            ref,
+            role: 'radiogroup',
+            ...slot.always(getIntrinsicElementProps('div', props, /*excludedPropNames:*/ [
+                'onChange',
+                'name'
+            ]), {
+                elementType: 'div'
+            }),
+            onChange: useEventCallback((ev)=>{
+                if (onChange && isHTMLElement(ev.target, {
+                    constructorName: 'HTMLInputElement'
+                }) && ev.target.type === 'radio') {
+                    onChange(ev, {
+                        value: ev.target.value
+                    });
+                }
+            })
+        }
+    };
+};