@fluentui/react-toolbar 9.0.0-beta.11 → 9.0.0-beta.13

package/CHANGELOG.json

@@ -2,7 +2,176 @@
   "name": "@fluentui/react-toolbar",
   "entries": [
     {
-      "date": "Tue, 25 Oct 2022 00:34:17 GMT",
+      "date": "Fri, 11 Nov 2022 14:53:34 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-beta.13",
+      "version": "9.0.0-beta.13",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "b3907043bd8d7b650c55e8e7c3119b14f2606c38",
+            "comment": "fix: create valid export maps"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.1.8",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.4",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-theme to v9.1.2",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.2.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.11",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.0",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          }
+        ],
+        "none": [
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "65768ac4e7c6d8bc233535ab8726d3c8f3f224bc",
+            "comment": "chore: update toolbar stories examples"
+          },
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "169e9b94b0cf741102596f106ed726d9402145cc",
+            "comment": "fix: ToolbarRadio example and click"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 02 Nov 2022 11:58:05 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-beta.12",
+      "version": "9.0.0-beta.12",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "c619ba066f11a8654e95375314824ba6b81b003e",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "78d042e6d3053da0902ef75330249dbaedc2493c",
+            "comment": "chore: remove dependencies on Fluent UI v8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.1.7",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.3",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.2.0",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.0",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.10",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.2.1",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          }
+        ],
+        "none": [
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "abfb64d82916efdb0e5129cf41081a13e4e9d9ff",
+            "comment": "chore: add few small toolbar improvements"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 25 Oct 2022 22:09:49 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-beta.11",
+      "version": "9.0.0-beta.11",
+      "comments": {
+        "none": [
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "dba7e9c342ca32d05d49d341b3912cd79652f238",
+            "comment": "chore: remove best practices"
+          },
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "9bde21168a1032d2a429939b9b2d7d3ba590726f",
+            "comment": "feat: replace ToolbarRadio implementation by usage of toggle button as radio"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 25 Oct 2022 00:35:39 GMT",
       "tag": "@fluentui/react-toolbar_v9.0.0-beta.11",
       "version": "9.0.0-beta.11",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,46 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Tue, 25 Oct 2022 00:34:17 GMT and should not be manually modified.
+This log was last generated on Fri, 11 Nov 2022 14:53:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.13)
+
+Fri, 11 Nov 2022 14:53:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.12..@fluentui/react-toolbar_v9.0.0-beta.13)
+
+### Changes
+
+- fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
+- Bump @fluentui/react-button to v9.1.8 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-divider to v9.1.4 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-radio to v9.0.11 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-tabster to v9.3.0 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+
+## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.12)
+
+Wed, 02 Nov 2022 11:58:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.11..@fluentui/react-toolbar_v9.0.0-beta.12)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
+- chore: remove dependencies on Fluent UI v8 ([PR #25466](https://github.com/microsoft/fluentui/pull/25466) by olfedias@microsoft.com)
+- Bump @fluentui/react-button to v9.1.7 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-divider to v9.1.3 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-radio to v9.0.10 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-tabster to v9.2.1 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+
 ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.11)
 
-Tue, 25 Oct 2022 00:34:17 GMT 
+Tue, 25 Oct 2022 00:35:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.10..@fluentui/react-toolbar_v9.0.0-beta.11)
 
 ### Changes

package/dist/index.d.ts

@@ -8,28 +8,18 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import { DividerSlots } from '@fluentui/react-divider';
 import { DividerState } from '@fluentui/react-divider';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import { RadioGroupProps } from '@fluentui/react-radio';
-import { RadioGroupState } from '@fluentui/react-radio';
-import { RadioProps } from '@fluentui/react-radio';
-import { RadioState } from '@fluentui/react-radio';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 import { ToggleButtonProps } from '@fluentui/react-button';
 import { ToggleButtonState } from '@fluentui/react-button';
 
-export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
-
-export declare type RadioGroupContextValues = {
-    radioGroup: RadioGroupContextValue;
-};
-
 /**
  * Render the final JSX of Toolbar
  */
 export declare const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSX.Element;
 
-declare type ToggableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name?: string, value?: string, checked?: boolean) => void;
+declare type ToggableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked?: boolean) => void;
 
 /**
  * Toolbar component
@@ -67,6 +57,7 @@ export declare const toolbarClassNames: SlotClassNames<ToolbarSlots>;
 
 export declare type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {
     handleToggleButton?: ToggableHandler;
+    handleRadio?: ToggableHandler;
 };
 
 export declare type ToolbarContextValues = {
@@ -128,39 +119,23 @@ export declare type ToolbarProps = ComponentProps<ToolbarSlots> & {
 };
 
 /**
- * ToolbarRadio component is a Radio to be used inside Toolbar
- */
-export declare const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps>;
-
-/**
- * ToolbarRadioGroup component is a RadioGroup to be used inside Toolbar
- * which will keep always horizontal layout
- */
-export declare const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps>;
-
-/**
- * ToolbarRadioGroup Props
+ * ToolbarRadioButton component
  */
-export declare type ToolbarRadioGroupProps = RadioGroupProps;
+export declare const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
 
 /**
- * State used in rendering ToolbarRadioGroup
+ * ToolbarRadioButton Props
  */
-export declare type ToolbarRadioGroupState = RadioGroupState;
-
-/**
- * ToolbarRadio Props
- */
-export declare type ToolbarRadioProps = RadioProps & {
-    size?: 'small' | 'medium';
+export declare type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
+    appearance?: 'primary' | 'subtle';
+    name: string;
+    value: string;
 };
 
 /**
- * State used in rendering ToolbarRadio
+ * State used in rendering ToolbarRadioButton
  */
-export declare type ToolbarRadioState = RadioState & {
-    size?: 'small' | 'medium';
-};
+export declare type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
 
 export declare type ToolbarSlots = {
     root: Slot<'div'>;
@@ -171,6 +146,7 @@ export declare type ToolbarSlots = {
  */
 export declare type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> & Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
     handleToggleButton: ToggableHandler;
+    handleRadio: ToggableHandler;
 };
 
 /**

package/lib/ToolbarRadioButton.js

@@ -0,0 +1,2 @@
+export * from './components/ToolbarRadioButton/index';
+//# sourceMappingURL=ToolbarRadioButton.js.map

package/lib/ToolbarRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarRadioButton.js","sourceRoot":"../src/","sources":["ToolbarRadioButton.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n  /** The items for this value that are checked */\n  checkedItems: string[];\n  /** The name of the value */\n  name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n  /**\n   * Toolbar can have small or medium size\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Toolbar can be vertical styled\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * Map of all checked values\n   */\n  checkedValues?: Record<string, string[]>;\n\n  /**\n   * Default values to be checked on mount\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n\n  /**\n   * Callback when checked items change for value with a name\n   *\n   * @param event - React's original SyntheticEvent\n   * @param data - A data object with relevant information\n   */\n  onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n  Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n  Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleToggleButton: ToggableHandler;\n  };\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n  handleToggleButton?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n  toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton'> &\n  Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name?: string,\n  value?: string,\n  checked?: boolean,\n) => void;\n"]}
+{"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n  /** The items for this value that are checked */\n  checkedItems: string[];\n  /** The name of the value */\n  name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n  /**\n   * Toolbar can have small or medium size\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Toolbar can be vertical styled\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * Map of all checked values\n   */\n  checkedValues?: Record<string, string[]>;\n\n  /**\n   * Default values to be checked on mount\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n\n  /**\n   * Callback when checked items change for value with a name\n   *\n   * @param event - React's original SyntheticEvent\n   * @param data - A data object with relevant information\n   */\n  onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n  Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n  Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleToggleButton: ToggableHandler;\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleRadio: ToggableHandler;\n  };\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n  handleToggleButton?: ToggableHandler;\n  handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n  toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &\n  Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked?: boolean,\n) => void;\n"]}

package/lib/components/Toolbar/ToolbarContext.js

@@ -3,6 +3,7 @@ export const ToolbarContext = /*#__PURE__*/createContext(undefined);
 const toolbarContextDefaultValue = {
   size: 'medium',
   handleToggleButton: () => null,
+  handleRadio: () => null,
   vertical: false,
   checkedValues: {}
 };

package/lib/components/Toolbar/ToolbarContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":"AAAA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE;AAIA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAkC,SAAlC,CAApC;AAEP,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,QAAQ,EAAE,KAH4C;EAItD,aAAa,EAAE;AAJuC,CAAxD;AAOA,OAAO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,kBAAkB,CAAC,cAAD,EAAiB,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAA/D,CADb","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":"AAAA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE;AAIA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAkC,SAAlC,CAApC;AAEP,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;AAQA,OAAO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,kBAAkB,CAAC,cAAD,EAAiB,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAA/D,CADb","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  handleRadio: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}

package/lib/components/Toolbar/useToolbar.js

@@ -18,7 +18,7 @@ export const useToolbar_unstable = (props, ref) => {
   } = props;
   const arrowNavigationProps = useArrowNavigationGroup({
     circular: true,
-    axis: 'horizontal'
+    axis: 'both'
   });
   const initialState = {
     size,
@@ -37,14 +37,11 @@ export const useToolbar_unstable = (props, ref) => {
       ...props
     })
   };
-  const [checkedValues, setCheckedValues] = useControllableState({
-    state: initialState.checkedValues,
-    defaultState: initialState.defaultCheckedValues,
-    initialState: {}
+  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
+    checkedValues: props.checkedValues,
+    defaultCheckedValues: props.defaultCheckedValues,
+    onCheckedValueChange: props.onCheckedValueChange
   });
-  const {
-    onCheckedValueChange
-  } = initialState;
   const handleToggleButton = useEventCallback((e, name, value, checked) => {
     if (name && value) {
       const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
@@ -60,14 +57,55 @@ export const useToolbar_unstable = (props, ref) => {
         name,
         checkedItems: newCheckedItems
       });
-      setCheckedValues(s => ({ ...s,
-        [name]: newCheckedItems
-      }));
+    }
+  });
+  const handleRadio = useEventCallback((e, name, value, checked) => {
+    if (name && value) {
+      onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+        name,
+        checkedItems: [value]
+      });
     }
   });
   return { ...initialState,
     handleToggleButton,
+    handleRadio,
     checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
   };
 };
+/**
+ * Adds appropriate state values and handlers for selectable items
+ * i.e checkboxes and radios
+ */
+
+const useToolbarSelectableState = state => {
+  const [checkedValues, setCheckedValues] = useControllableState({
+    state: state.checkedValues,
+    defaultState: state.defaultCheckedValues,
+    initialState: {}
+  });
+  const {
+    onCheckedValueChange: onCheckedValueChangeOriginal
+  } = state;
+  const onCheckedValueChange = useEventCallback((e, {
+    name,
+    checkedItems
+  }) => {
+    if (onCheckedValueChangeOriginal) {
+      onCheckedValueChangeOriginal(e, {
+        name,
+        checkedItems
+      });
+    }
+
+    setCheckedValues(s => {
+      return s ? { ...s,
+        [name]: checkedItems
+      } : {
+        [name]: checkedItems
+      };
+    });
+  });
+  return [checkedValues, onCheckedValueChange];
+};
 //# sourceMappingURL=useToolbar.js.map

package/lib/components/Toolbar/useToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,EAA2B,oBAA3B,QAAuD,2BAAvD;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,QAAQ,GAAG;EAA9B,IAAwC,KAA9C;EAEA,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAD,CAApD;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAE9C,QAF8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAAR;EAVmB,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,CAAC;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAAD,CAA9D;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,gBAAgB,CAC1D,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyD,CAA5D;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'horizontal',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: initialState.checkedValues,\n    defaultState: initialState.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const { onCheckedValueChange } = initialState;\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name?: string, value?: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n        setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    checkedValues: checkedValues ?? {},\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Toolbar/useToolbarContextValues.js

@@ -3,13 +3,15 @@ export function useToolbarContextValues_unstable(state) {
     size,
     handleToggleButton,
     vertical,
-    checkedValues
+    checkedValues,
+    handleRadio
   } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
 
   const toolbar = {
     size,
     vertical,
     handleToggleButton,
+    handleRadio,
     checkedValues
   };
   return {

package/lib/components/Toolbar/useToolbarContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,gCAAV,CAA2C,KAA3C,EAA8D;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC;EAAtC,IAAwD,KAA9D,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC;EAJmC,CAArC;EAOA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,gCAAV,CAA2C,KAA3C,EAA8D;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { renderToggleButton_unstable } from '@fluentui/react-button';
+import { useToolbarRadioButton_unstable } from './useToolbarRadioButton';
+import { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';
+/**
+ * ToolbarRadioButton component
+ */
+
+export const ToolbarRadioButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useToolbarRadioButton_unstable(props, ref);
+  useToolbarRadioButtonStyles_unstable(state);
+  return renderToggleButton_unstable(state);
+});
+ToolbarRadioButton.displayName = 'ToolbarRadioButton';
+//# sourceMappingURL=ToolbarRadioButton.js.map

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oCAAT,QAAqD,+BAArD;AAEA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,gBAAiD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,8BAA8B,CAAC,KAAD,EAAQ,GAAR,CAA5C;EAEA,oCAAoC,CAAC,KAAD,CAApC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CAL+E,CAAzE;AAOP,kBAAkB,CAAC,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarRadioButton_unstable(props, ref);\n\n  useToolbarRadioButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ToolbarRadioButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarRadioButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle';\n    name: string;\n    value: string;\n  };\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n"]}

package/lib/components/ToolbarRadioButton/index.js

@@ -0,0 +1,3 @@
+export * from './ToolbarRadioButton';
+export * from './ToolbarRadioButton.types';
+//# sourceMappingURL=index.js.map

package/lib/components/ToolbarRadioButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToolbarRadioButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"]}

package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js

@@ -0,0 +1,38 @@
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useToggleButton_unstable } from '@fluentui/react-button';
+import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
+/**
+ * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the RadioButton component.
+ * @param ref - User provided ref to be passed to the RadioButton component.
+ */
+
+export const useToolbarRadioButton_unstable = (props, ref) => {
+  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);
+  const checked = useToolbarContext_unstable(ctx => {
+    var _a;
+
+    return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value));
+  });
+  const size = useToolbarContext_unstable(ctx => ctx.size);
+  const {
+    onClick: onClickOriginal
+  } = props;
+  const toggleButtonState = useToggleButton_unstable({
+    size,
+    checked,
+    ...props
+  }, ref);
+  const state = { ...toggleButtonState,
+    name: props.name,
+    value: props.value
+  };
+  const handleOnClick = useEventCallback(e => {
+    handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
+    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
+  });
+  state.root.onClick = handleOnClick;
+  return state;
+};
+//# sourceMappingURL=useToolbarRadioButton.js.map

package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,WAAZ,CAA9C;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,gBAAgB,CACnC,CAAD,IAAyG;IACvG,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAJmC,CAAtC;EAOA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js

@@ -0,0 +1,22 @@
+import { tokens } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
+
+const useBaseStyles = /*#__PURE__*/__styles({
+  "selected": {
+    "sj55zd": "f16muhyy"
+  }
+}, {
+  "d": [".f16muhyy{color:var(--colorBrandForeground1);}"]
+});
+/**
+ * Apply styling to the ToolbarRadioButton slots based on the state
+ */
+
+
+export const useToolbarRadioButtonStyles_unstable = state => {
+  useToggleButtonStyles_unstable(state);
+  const toggleButtonStyles = useBaseStyles();
+  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
+};
+//# sourceMappingURL=useToolbarRadioButtonStyles.js.map

package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,8BAAT,QAA+C,wBAA/C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,8BAA8B,CAAC,KAAD,CAA9B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAA3D,CAAnC;AACD,CALM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -2,6 +2,5 @@ export { Toolbar, renderToolbar_unstable, toolbarClassNames, useToolbarStyles_un
 export { ToolbarButton } from './ToolbarButton';
 export { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';
 export { ToolbarToggleButton } from './ToolbarToggleButton';
-export { ToolbarRadio } from './ToolbarRadio';
-export { ToolbarRadioGroup } from './ToolbarRadioGroup';
+export { ToolbarRadioButton } from './ToolbarRadioButton';
 //# sourceMappingURL=index.js.map