@fluentui/react-radio 9.0.0-beta.2 → 9.0.0-beta.5

package/CHANGELOG.json

@@ -2,7 +2,186 @@
   "name": "@fluentui/react-radio",
   "entries": [
     {
-      "date": "Fri, 04 Mar 2022 05:15:54 GMT",
+      "date": "Wed, 04 May 2022 13:24:16 GMT",
+      "tag": "@fluentui/react-radio_v9.0.0-beta.5",
+      "version": "9.0.0-beta.5",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "9132814df4b6d40d1f5d93d8324d756c1284b294",
+            "comment": "react-radio: update context usage"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "8d990349b5af2d61057cccda2357412d2f5ab9b9",
+            "comment": "add bundle size fixtures"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "6a017c3b1f2a282fa86c28b675e5ed34a1bb2aee",
+            "comment": "react-radio: add required prop to RadioGroup"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "4bc1c43194cb9f44c5ad40ae43ab26556778157e",
+            "comment": "react-radio: remove required indicator from label"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "5f27c51743f22f08741a75c2c10032a02afdf6fb",
+            "comment": "write readme"
+          },
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "3be7a89d9e9323780bba5b24d3bcc4342e1f1ec7",
+            "comment": "Allow data argument on onChange"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.11",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.8",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 25 Apr 2022 09:32:19 GMT",
+      "tag": "@fluentui/react-radio_v9.0.0-beta.4",
+      "version": "9.0.0-beta.4",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.7",
+            "commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:16:50 GMT",
+      "tag": "@fluentui/react-radio_v9.0.0-beta.3",
+      "version": "9.0.0-beta.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "086a675fd0c648944ff4048450190a0a13467de3",
+            "comment": "Deprecate static classname string for Radio."
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "c0c9b30ae2393775eac02870f6b04cade31ef3ac",
+            "comment": "Remove star exports from react-radio"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "c6af0f7fa900a2f497f4c7477bb05ca2c59c7987",
+            "comment": "Add onChange event prop to Radio"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "bea6aecfed8612f7b0664ab8bac77c5fccee1efb",
+            "comment": "update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "0f509ed4c7e26548ae9d27e3001bd8db4784e838",
+            "comment": "Radio/RadioGroup API alignment."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.10",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-radio",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          }
+        ],
+        "none": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
+            "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
+          },
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/react-radio",
+            "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
+            "comment": "Update React dev deps and hoist them to the repo root"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:40 GMT",
       "tag": "@fluentui/react-radio_v9.0.0-beta.2",
       "version": "9.0.0-beta.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,59 @@
 # Change Log - @fluentui/react-radio
 
-This log was last generated on Fri, 04 Mar 2022 05:15:54 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 13:24:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.5)
+
+Wed, 04 May 2022 13:24:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.4..@fluentui/react-radio_v9.0.0-beta.5)
+
+### Changes
+
+- react-radio: update context usage ([PR #22803](https://github.com/microsoft/fluentui/pull/22803) by seanmonahan@microsoft.com)
+- add bundle size fixtures ([PR #22675](https://github.com/microsoft/fluentui/pull/22675) by seanmonahan@microsoft.com)
+- react-radio: add required prop to RadioGroup ([PR #22809](https://github.com/microsoft/fluentui/pull/22809) by seanmonahan@microsoft.com)
+- react-radio: remove required indicator from label ([PR #22782](https://github.com/microsoft/fluentui/pull/22782) by seanmonahan@microsoft.com)
+- write readme ([PR #22676](https://github.com/microsoft/fluentui/pull/22676) by seanmonahan@microsoft.com)
+- Allow data argument on onChange ([PR #22753](https://github.com/microsoft/fluentui/pull/22753) by miroslav.stastny@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-label to v9.0.0-beta.11 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+
+## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.4)
+
+Mon, 25 Apr 2022 09:32:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.3..@fluentui/react-radio_v9.0.0-beta.4)
+
+### Changes
+
+- Bump @fluentui/react-tabster to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
+
+## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.3)
+
+Tue, 19 Apr 2022 19:16:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.2..@fluentui/react-radio_v9.0.0-beta.3)
+
+### Changes
+
+- Deprecate static classname string for Radio. ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
+- Remove star exports from react-radio ([PR #22106](https://github.com/microsoft/fluentui/pull/22106) by seanmonahan@microsoft.com)
+- Add onChange event prop to Radio ([PR #22104](https://github.com/microsoft/fluentui/pull/22104) by seanmonahan@microsoft.com)
+- update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10 ([PR #22512](https://github.com/microsoft/fluentui/pull/22512) by seanmonahan@microsoft.com)
+- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
+- Radio/RadioGroup API alignment. ([PR #22065](https://github.com/microsoft/fluentui/pull/22065) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-label to v9.0.0-beta.10 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+
 ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.2)
 
-Fri, 04 Mar 2022 05:15:54 GMT 
+Fri, 04 Mar 2022 05:17:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.1..@fluentui/react-radio_v9.0.0-beta.2)
 
 ### Changes

package/README.md

@@ -3,3 +3,42 @@
 **React Radio components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+A Radio allows a user to select a single value from two or more options. All Radios with the same `name` are considered to be part of the same group. However, a `RadioGroup` is recommended to add a group label, formatting, and other functionality.
+
+### Usage
+
+Import `Radio` and `RadioGroup`:
+
+```js
+import { Radio, RadioGroup } from '@fluentui/react-radio';
+```
+
+#### Examples
+
+```jsx
+<RadioGroup defaultValue="B">
+  <Radio value="A" label="Option A" />
+  <Radio value="B" label="Option B" />
+  <Radio value="C" label="Option C" />
+  <Radio value="D" label="Option D" />
+</RadioGroup>
+
+<RadioGroup value={value} onChange={(_, data) => setValue(data.value)}>
+  <Radio value="A" label="Option A" />
+  <Radio value="B" label="Option B" />
+  <Radio value="C" label="Option C" />
+  <Radio value="D" label="Option D" />
+</RadioGroup>
+```
+
+See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
+
+Alternatively, run Storybook locally with:
+
+1. `yarn start`
+2. Select `react-radio` from the list.
+
+### Specification
+
+See [Spec.md](./Spec.md).

package/dist/{react-radio.d.ts → index.d.ts}

@@ -1,30 +1,46 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { Context } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * Radio component is a wrapper for a radio button with a label.
  */
 export declare const Radio: ForwardRefComponent<RadioProps>;
 
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
 export declare const radioClassName = "fui-Radio";
 
+export declare const radioClassNames: SlotClassNames<RadioSlots>;
+
 /**
  * A RadioGroup component presents a set of options where only one option can be selected.
  */
 export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
+/**
+ * @deprecated Use `radioGroupClassNames.root` instead.
+ */
 export declare const radioGroupClassName = "fui-RadioGroup";
 
+export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
+
 /**
  * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
  */
-export declare const RadioGroupContext: React_2.Context<RadioGroupContextValue>;
+export declare const RadioGroupContext: Context<RadioGroupContextValue>;
+
+export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
 
-export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'layout' | 'value' | 'defaultValue' | 'disabled'>;
+export declare type RadioGroupContextValues = {
+    radioGroup: RadioGroupContextValue;
+};
 
 /**
  * Data for the onChange event for RadioGroup.
@@ -62,33 +78,45 @@ export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlot
     /**
      * How the radio items are laid out in the group.
      *
-     * @defaultvalue vertical
+     * @default vertical
      */
     layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
     /**
      * Disable all Radio items in this group.
      */
     disabled?: boolean;
+    /**
+     * Require all Radio items in this group.
+     */
+    required?: boolean;
 };
 
 export declare type RadioGroupSlots = {
     /**
      * The radio group root.
      */
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
 };
 
 /**
  * State used in rendering RadioGroup
  */
-export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & {
-    context: RadioGroupContextValue;
+export declare type RadioGroupState = ComponentState<RadioGroupSlots> & Required<Pick<RadioGroupProps, 'layout'>> & Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;
+
+/**
+ * Data for the onChange event for Radio.
+ */
+export declare type RadioOnChangeData = {
+    /**
+     * The value prop of this Radio item.
+     */
+    value: string;
 };
 
 /**
  * Radio Props
  */
-export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {
+export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
     /**
      * The value of the RadioGroup when this Radio item is selected.
      */
@@ -106,6 +134,13 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
      * Disable this Radio item.
      */
     disabled?: boolean;
+    /**
+     * Callback when this Radio is selected in its group.
+     *
+     * **Note:** `onChange` is NOT called when this Radio is deselected.
+     * Use RadioGroup's `onChange` event to determine when the selection in the group changes.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
 };
 
 export declare type RadioSlots = {
@@ -146,7 +181,7 @@ export declare const renderRadio_unstable: (state: RadioState) => JSX.Element;
 /**
  * Render the final JSX of RadioGroup
  */
-export declare const renderRadioGroup_unstable: (state: RadioGroupState) => JSX.Element;
+export declare const renderRadioGroup_unstable: (state: RadioGroupState, contextValues: RadioGroupContextValues) => JSX.Element;
 
 /**
  * Create the state required to render Radio.

package/lib/components/Radio/Radio.types.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Label } from '@fluentui/react-label';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 export declare type RadioSlots = {
@@ -27,7 +28,7 @@ export declare type RadioSlots = {
 /**
  * Radio Props
  */
-export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {
+export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {
     /**
      * The value of the RadioGroup when this Radio item is selected.
      */
@@ -45,6 +46,22 @@ export declare type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input
      * Disable this Radio item.
      */
     disabled?: boolean;
+    /**
+     * Callback when this Radio is selected in its group.
+     *
+     * **Note:** `onChange` is NOT called when this Radio is deselected.
+     * Use RadioGroup's `onChange` event to determine when the selection in the group changes.
+     */
+    onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;
+};
+/**
+ * Data for the onChange event for Radio.
+ */
+export declare type RadioOnChangeData = {
+    /**
+     * The value prop of this Radio item.
+     */
+    value: string;
 };
 /**
  * State used in rendering Radio

package/lib/components/Radio/Radio.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.types.js","sourceRoot":"../src/","sources":["components/Radio/Radio.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n  /**\n   * The root element of the Radio.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Radio's label.\n   */\n  label: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the radio's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * A circle outline, with a filled circle icon inside when the Radio is checked.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'size'> & {\n  /**\n   * The value of the RadioGroup when this Radio item is selected.\n   */\n  value?: string;\n\n  /**\n   * The position of the label relative to the radio indicator.\n   *\n   * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n   * in which case it defaults to `below`.\n   *\n   * @defaultvalue after\n   */\n  labelPosition?: 'after' | 'below';\n\n  /**\n   * Disable this Radio item.\n   */\n  disabled?: boolean;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n"]}
+{"version":3,"file":"Radio.types.js","sourceRoot":"../src/","sources":["components/Radio/Radio.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioSlots = {\n  /**\n   * The root element of the Radio.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Radio>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Radio's label.\n   */\n  label: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the radio's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * A circle outline, with a filled circle icon inside when the Radio is checked.\n   */\n  indicator: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Radio Props\n */\nexport type RadioProps = Omit<ComponentProps<Partial<RadioSlots>, 'input'>, 'onChange' | 'size'> & {\n  /**\n   * The value of the RadioGroup when this Radio item is selected.\n   */\n  value?: string;\n\n  /**\n   * The position of the label relative to the radio indicator.\n   *\n   * This defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\n   * in which case it defaults to `below`.\n   *\n   * @defaultvalue after\n   */\n  labelPosition?: 'after' | 'below';\n\n  /**\n   * Disable this Radio item.\n   */\n  disabled?: boolean;\n\n  /**\n   * Callback when this Radio is selected in its group.\n   *\n   * **Note:** `onChange` is NOT called when this Radio is deselected.\n   * Use RadioGroup's `onChange` event to determine when the selection in the group changes.\n   */\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void;\n};\n\n/**\n * Data for the onChange event for Radio.\n */\nexport type RadioOnChangeData = {\n  /**\n   * The value prop of this Radio item.\n   */\n  value: string;\n};\n\n/**\n * State used in rendering Radio\n */\nexport type RadioState = ComponentState<RadioSlots> & Required<Pick<RadioProps, 'labelPosition'>>;\n"]}

package/lib/components/Radio/useRadio.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
 import { RadioGroupContext } from '../../contexts/RadioGroupContext';
+import { useContextSelector } from '@fluentui/react-context-selector';
 /**
  * Create the state required to render Radio.
  *
@@ -14,19 +15,25 @@ import { RadioGroupContext } from '../../contexts/RadioGroupContext';
  */
 
 export const useRadio_unstable = (props, ref) => {
-  const group = React.useContext(RadioGroupContext);
+  const nameGroup = useContextSelector(RadioGroupContext, ctx => ctx.name);
+  const value = useContextSelector(RadioGroupContext, ctx => ctx.value);
+  const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);
+  const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);
+  const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);
+  const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);
   const {
-    name = group.name,
-    checked = group.value !== undefined ? group.value === props.value : undefined,
-    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,
-    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',
-    disabled = group.disabled,
-    required
+    name = nameGroup,
+    checked = value !== undefined ? value === props.value : undefined,
+    defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,
+    labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',
+    disabled = disabledGroup,
+    required = requiredGroup,
+    onChange
   } = props;
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['checked', 'defaultChecked']
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
   });
   const root = resolveShorthand(props.root, {
     required: true,
@@ -42,14 +49,17 @@ export const useRadio_unstable = (props, ref) => {
       checked,
       defaultChecked,
       disabled,
+      required,
       ...nativeProps.primary
     }
   });
+  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+    value: ev.currentTarget.value
+  }));
   const label = resolveShorthand(props.label, {
     defaultProps: {
       htmlFor: input.id,
-      disabled,
-      required
+      disabled
     }
   });
   const indicator = resolveShorthand(props.indicator, {

package/lib/components/Radio/useRadio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,QAAmE,2BAAnE;AACA,SAAS,iBAAT,QAAkC,kCAAlC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM,KAAK,GAAG,KAAK,CAAC,UAAN,CAAiB,iBAAjB,CAAd;AAEA,QAAM;AACJ,IAAA,IAAI,GAAG,KAAK,CAAC,IADT;AAEJ,IAAA,OAAO,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAhB,GAA4B,KAAK,CAAC,KAAN,KAAgB,KAAK,CAAC,KAAlD,GAA0D,SAFhE;AAGJ,IAAA,cAAc,GAAG,KAAK,CAAC,YAAN,KAAuB,SAAvB,GAAmC,KAAK,CAAC,YAAN,KAAuB,KAAK,CAAC,KAAhE,GAAwE,SAHrF;AAIJ,IAAA,aAAa,GAAG,KAAK,CAAC,MAAN,KAAiB,mBAAjB,GAAuC,OAAvC,GAAiD,OAJ7D;AAKJ,IAAA,QAAQ,GAAG,KAAK,CAAC,QALb;AAMJ,IAAA;AANI,MAOF,KAPJ;AASA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ;AAHyB,GAAD,CAA7C;AAMA,QAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;AACxC,IAAA,QAAQ,EAAE,IAD8B;AAExC,IAAA,YAAY,EAAE,WAAW,CAAC;AAFc,GAAb,CAA7B;AAKA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,QAAQ,EAAE,IADgC;AAE1C,IAAA,YAAY,EAAE;AACZ,MAAA,GADY;AAEZ,MAAA,IAAI,EAAE,OAFM;AAGZ,MAAA,EAAE,EAAE,KAAK,CAAC,QAAD,EAAW,WAAW,CAAC,OAAZ,CAAoB,EAA/B,CAHG;AAIZ,MAAA,IAJY;AAKZ,MAAA,OALY;AAMZ,MAAA,cANY;AAOZ,MAAA,QAPY;AAQZ,SAAG,WAAW,CAAC;AARH;AAF4B,GAAd,CAA9B;AAcA,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AAC1C,IAAA,YAAY,EAAE;AACZ,MAAA,OAAO,EAAE,KAAK,CAAC,EADH;AAEZ,MAAA,QAFY;AAGZ,MAAA;AAHY;AAD4B,GAAd,CAA9B;AAQA,QAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAClD,IAAA,QAAQ,EAAE,IADwC;AAElD,IAAA,YAAY,EAAE;AACZ,qBAAe,IADH;AAEZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,IAAb;AAFE;AAFoC,GAAlB,CAAlC;AAQA,SAAO;AACL,IAAA,aADK;AAEL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,KAAK,EAAE,KAHG;AAIV,MAAA,SAAS,EAAE;AAJD,KAFP;AAQL,IAAA,IARK;AASL,IAAA,KATK;AAUL,IAAA,KAVK;AAWL,IAAA;AAXK,GAAP;AAaD,CAlEM","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const group = React.useContext(RadioGroupContext);\n\n  const {\n    name = group.name,\n    checked = group.value !== undefined ? group.value === props.value : undefined,\n    defaultChecked = group.defaultValue !== undefined ? group.defaultValue === props.value : undefined,\n    labelPosition = group.layout === 'horizontalStacked' ? 'below' : 'after',\n    disabled = group.disabled,\n    required,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked'],\n  });\n\n  const root = resolveShorthand(props.root, {\n    required: true,\n    defaultProps: nativeProps.root,\n  });\n\n  const input = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      ...nativeProps.primary,\n    },\n  });\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled,\n      required,\n    },\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    required: true,\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n  });\n\n  return {\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      label: Label,\n      indicator: 'div',\n    },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n  const nameGroup = useContextSelector(RadioGroupContext, ctx => ctx.name);\n  const value = useContextSelector(RadioGroupContext, ctx => ctx.value);\n  const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);\n  const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);\n  const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);\n  const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);\n\n  const {\n    name = nameGroup,\n    checked = value !== undefined ? value === props.value : undefined,\n    defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n    labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',\n    disabled = disabledGroup,\n    required = requiredGroup,\n    onChange,\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const root = resolveShorthand(props.root, {\n    required: true,\n    defaultProps: nativeProps.root,\n  });\n\n  const input = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref,\n      type: 'radio',\n      id: useId('radio-', nativeProps.primary.id),\n      name,\n      checked,\n      defaultChecked,\n      disabled,\n      required,\n      ...nativeProps.primary,\n    },\n  });\n\n  input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      htmlFor: input.id,\n      disabled,\n    },\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    required: true,\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n  });\n\n  return {\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      label: Label,\n      indicator: 'div',\n    },\n    root,\n    input,\n    label,\n    indicator,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Radio/useRadioStyles.d.ts

@@ -1,5 +1,10 @@
-import type { RadioState } from './Radio.types';
+import type { RadioSlots, RadioState } from './Radio.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `radioClassNames.root` instead.
+ */
 export declare const radioClassName = "fui-Radio";
+export declare const radioClassNames: SlotClassNames<RadioSlots>;
 /**
  * Apply styling to the Radio slots based on the state
  */