@fluentui/react-toolbar 9.0.0-beta.9 → 9.0.0-rc.2

package/lib/components/ToolbarGroup/ToolbarGroup.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useToolbarGroup_unstable } from './useToolbarGroup';
+import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';
+import { renderToolbarGroup_unstable } from './renderToolbarGroup';
+/**
+ * ToolbarGroup component is a Button to be used inside Toolbar
+ * which will respect toolbar props such as `size`
+ */
+
+export const ToolbarGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useToolbarGroup_unstable(props, ref);
+  useToolbarGroupStyles_unstable(state);
+  return renderToolbarGroup_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
+});
+ToolbarGroup.displayName = 'ToolbarGroup';
+//# sourceMappingURL=ToolbarGroup.js.map

package/lib/components/ToolbarGroup/ToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AAEA;;;AAGG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EACA,8BAA8B,CAAC,KAAD,CAA9B;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC,CAHkG,CAIlG;AACD,CALmE,CAA7D;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n  useToolbarGroupStyles_unstable(state);\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarGroup/ToolbarGroup.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/ToolbarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots>;\n"]}

package/lib/components/ToolbarGroup/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './ToolbarGroup';\nexport * from './ToolbarGroup.types';\n"]}

package/lib/components/ToolbarGroup/renderToolbarGroup.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ToolbarGroup
+ */
+
+export const renderToolbarGroup_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children);
+};
+//# sourceMappingURL=renderToolbarGroup.js.map

package/lib/components/ToolbarGroup/renderToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/renderToolbarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAA6B;EACtE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAoB,KAApB,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n  const { slots, slotProps } = getSlots<ToolbarGroupSlots>(state);\n\n  return <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarGroup/useToolbarGroup.js

@@ -0,0 +1,20 @@
+import { getNativeElementProps } from '@fluentui/react-utilities';
+/**
+ * Given user props, defines default props for the Group
+ * @param props - User provided props to the Group component.
+ * @param ref - User provided ref to be passed to the Group component.
+ */
+
+export const useToolbarGroup_unstable = (props, ref) => {
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      role: 'presentation',
+      ...props
+    })
+  };
+};
+//# sourceMappingURL=useToolbarGroup.js.map

package/lib/components/ToolbarGroup/useToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts"],"names":[],"mappings":"AAAA,SAAS,qBAAT,QAAsC,2BAAtC;AAIA;;;;AAIG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAuC,KAAvC,EAA8C;MACvE,GADuE;MAEvE,IAAI,EAAE,cAFiE;MAGvE,GAAG;IAHoE,CAA9C;EAJtB,CAAP;AAUD,CAdM","sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n      ref,\n      role: 'presentation',\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarGroup/useToolbarGroupStyles.js

@@ -0,0 +1,28 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const toolbarGroupClassNames = {
+  root: 'fui-ToolbarGroup'
+};
+/**
+ * Styles for the root slot
+ */
+
+const useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "mc9l5x": "f22iagw",
+    "i8kkvl": "f4px1ci",
+    "Belr9w4": "fn67r4l"
+  }
+}, {
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"]
+});
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */
+
+
+export const useToolbarGroupStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useToolbarGroupStyles.js.map

package/lib/components/ToolbarGroup/useToolbarGroupStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroupStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,sBAAsB,GAAsC;EACvE,IAAI,EAAE;AADiE,CAAlE;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;EAC5F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,MAAM,CAAC,IAArC,EAA2C,KAAK,CAAC,IAAN,CAAW,SAAtD,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.gap('8px'),\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\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":["packages/react-components/react-toolbar/src/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":["packages/react-components/react-toolbar/src/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":["packages/react-components/react-toolbar/src/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":["packages/react-components/react-toolbar/src/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":["packages/react-components/react-toolbar/src/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/components/ToolbarToggleButton/ToolbarToggleButton.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { renderToggleButton_unstable, useToggleButtonStyles_unstable } from '@fluentui/react-button';
+import { renderToggleButton_unstable } from '@fluentui/react-button';
 import { useToolbarToggleButton_unstable } from './useToolbarToggleButton';
+import { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';
 /**
  * ToolbarToggleButton component
  */
 
 export const ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarToggleButton_unstable(props, ref);
-  useToggleButtonStyles_unstable(state);
+  useToolbarToggleButtonStyles_unstable(state);
   return renderToggleButton_unstable(state);
 });
 ToolbarToggleButton.displayName = 'ToolbarToggleButton';

package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,EAAsC,8BAAtC,QAA4E,wBAA5E;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,8BAA8B,CAAC,KAAD,CAA9B;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable, useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,qCAAT,QAAsD,gCAAtD;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,qCAAqC,CAAC,KAAD,CAArC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = 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 ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n"]}
+{"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = 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 ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"]}

package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,kBAAZ,CAArD;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,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\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: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,kBAAZ,CAArD;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,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n  props: ToolbarToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\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: ToolbarToggleButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = (\n    e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    if (state.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    handleToggleButton?.(e, state.name, state.value, state.checked);\n    onClickOriginal?.(e);\n  };\n\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.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 ToolbarToggleButton slots based on the state
+ */
+
+
+export const useToolbarToggleButtonStyles_unstable = state => {
+  useToggleButtonStyles_unstable(state);
+  const toggleButtonStyles = useBaseStyles();
+  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
+};
+//# sourceMappingURL=useToolbarToggleButtonStyles.js.map

package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.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,qCAAqC,GAAI,KAAD,IAAoC;EACvF,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 { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\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,6 @@ 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';
+export { ToolbarGroup } from './ToolbarGroup';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,sBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP;AAQA,SAAS,aAAT,QAA8B,iBAA9B;AAEA,SAAS,cAAT,EAAyB,gCAAzB,QAAiE,kBAAjE;AAEA,SAAS,mBAAT,QAAoC,uBAApC;AAEA,SAAS,YAAT,QAA6B,gBAA7B;AAEA,SAAS,iBAAT,QAAkC,qBAAlC","sourcesContent":["export {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadio } from './ToolbarRadio';\nexport type { ToolbarRadioProps, ToolbarRadioState } from './ToolbarRadio';\nexport { ToolbarRadioGroup } from './ToolbarRadioGroup';\nexport type {\n  RadioGroupContextValue,\n  RadioGroupContextValues,\n  ToolbarRadioGroupProps,\n  ToolbarRadioGroupState,\n} from './ToolbarRadioGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,sBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP;AAQA,SAAS,aAAT,QAA8B,iBAA9B;AAEA,SAAS,cAAT,EAAyB,gCAAzB,QAAiE,kBAAjE;AAEA,SAAS,mBAAT,QAAoC,uBAApC;AAEA,SAAS,kBAAT,QAAmC,sBAAnC;AAEA,SAAS,YAAT,QAA6B,gBAA7B","sourcesContent":["export {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\nexport { ToolbarGroup } from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toolbar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Toolbar/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/Toolbar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Toolbar/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToolbarButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarButton/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/ToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToolbarDivider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarDivider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/{ToolbarRadio.js → ToolbarGroup.js}

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 
 const tslib_1 = /*#__PURE__*/require("tslib");
 
-tslib_1.__exportStar(require("./components/ToolbarRadio/index"), exports);
-//# sourceMappingURL=ToolbarRadio.js.map
+tslib_1.__exportStar(require("./components/ToolbarGroup/index"), exports);
+//# sourceMappingURL=ToolbarGroup.js.map

package/lib-commonjs/ToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarGroup/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/{ToolbarRadioGroup.js → ToolbarRadioButton.js}

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 
 const tslib_1 = /*#__PURE__*/require("tslib");
 
-tslib_1.__exportStar(require("./components/ToolbarRadioGroup/index"), exports);
-//# sourceMappingURL=ToolbarRadioGroup.js.map
+tslib_1.__exportStar(require("./components/ToolbarRadioButton/index"), exports);
+//# sourceMappingURL=ToolbarRadioButton.js.map

package/lib-commonjs/ToolbarRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/ToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,gCAAA,CAAiC,KAAjC,CAAtB;EACA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,gCAAA,CAAiC,KAAjC,CAAtB;EACA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n  useToolbarStyles_unstable(state);\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/ToolbarContext.js

@@ -11,6 +11,7 @@ exports.ToolbarContext = /*#__PURE__*/react_context_selector_1.createContext(und
 const toolbarContextDefaultValue = {
   size: 'medium',
   handleToggleButton: () => null,
+  handleRadio: () => null,
   vertical: false,
   checkedValues: {}
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,QAAQ,EAAE,KAH4C;EAItD,aAAa,EAAE;AAJuC,CAAxD;;AAOO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,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;;AAQO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","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-commonjs/components/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/renderToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n  const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/useToolbar.js

@@ -28,7 +28,7 @@ const useToolbar_unstable = (props, ref) => {
   } = props;
   const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
     circular: true,
-    axis: 'horizontal'
+    axis: 'both'
   });
   const initialState = {
     size,
@@ -47,14 +47,11 @@ const useToolbar_unstable = (props, ref) => {
       ...props
     })
   };
-  const [checkedValues, setCheckedValues] = react_utilities_1.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 = react_utilities_1.useEventCallback((e, name, value, checked) => {
     if (name && value) {
       const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
@@ -70,16 +67,57 @@ const useToolbar_unstable = (props, ref) => {
         name,
         checkedItems: newCheckedItems
       });
-      setCheckedValues(s => ({ ...s,
-        [name]: newCheckedItems
-      }));
+    }
+  });
+  const handleRadio = react_utilities_1.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 : {}
   };
 };
 
 exports.useToolbar_unstable = useToolbar_unstable;
+/**
+ * Adds appropriate state values and handlers for selectable items
+ * i.e checkboxes and radios
+ */
+
+const useToolbarSelectableState = state => {
+  const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
+    state: state.checkedValues,
+    defaultState: state.defaultCheckedValues,
+    initialState: {}
+  });
+  const {
+    onCheckedValueChange: onCheckedValueChangeOriginal
+  } = state;
+  const onCheckedValueChange = react_utilities_1.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-commonjs/components/Toolbar/useToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,QAAQ,GAAG;EAA9B,IAAwC,KAA9C;EAEA,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAE9C,QAF8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAA7B;EAVwC,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,iBAAA,CAAA,gBAAA,CAC1C,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,CAdyC,CAA5C;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;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,QAAQ,GAAG;EAA9B,IAAwC,KAA9C;EAEA,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAE9C,QAF8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAA7B;EAVwC,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,oBAAhB,IAAwC,yBAAyB,CAAC;IACtE,aAAa,EAAE,KAAK,CAAC,aADiD;IAEtE,oBAAoB,EAAE,KAAK,CAAC,oBAF0C;IAGtE,oBAAoB,EAAE,KAAK,CAAC;EAH0C,CAAD,CAAvE;EAMA,MAAM,kBAAkB,GAAoB,iBAAA,CAAA,gBAAA,CAC1C,CAAC,CAAD,EAA4C,IAA5C,EAA0D,KAA1D,EAAyE,OAAzE,KAA8F;IAC5F,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;;MACD,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;IACD;EACF,CAZyC,CAA5C;EAeA,MAAM,WAAW,GAAoB,iBAAA,CAAA,gBAAA,CACnC,CAAC,CAAD,EAA4C,IAA5C,EAA0D,KAA1D,EAAyE,OAAzE,KAA8F;IAC5F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QACxB,IADwB;QAExB,YAAY,EAAE,CAAC,KAAD;MAFU,CAAN,CAApB;IAID;EACF,CARkC,CAArC;EAWA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,WAHK;IAIL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAJ3B,CAAP;AAMD,CAhEM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB;AAkEb;;;AAGG;;AACH,MAAM,yBAAyB,GAC7B,KADgC,IAE9B;EACF,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,KAAK,CAAC,aADgD;IAE7D,YAAY,EAAE,KAAK,CAAC,oBAFyC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAKA,MAAM;IAAE,oBAAoB,EAAE;EAAxB,IAAyD,KAA/D;EACA,MAAM,oBAAoB,GAAyC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI;IAAE,IAAF;IAAQ;EAAR,CAAJ,KAA8B;IAChH,IAAI,4BAAJ,EAAkC;MAChC,4BAA4B,CAAC,CAAD,EAAI;QAAE,IAAF;QAAQ;MAAR,CAAJ,CAA5B;IACD;;IAED,gBAAgB,CAAC,CAAC,IAAG;MACnB,OAAO,CAAC,GAAG,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAH,GAAoC;QAAE,CAAC,IAAD,GAAQ;MAAV,CAA5C;IACD,CAFe,CAAhB;EAGD,CARkE,CAAnE;EAUA,OAAO,CAAC,aAAD,EAAgB,oBAAhB,CAAP;AACD,CApBD","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-commonjs/components/Toolbar/useToolbarContextValues.js

@@ -10,13 +10,15 @@ 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-commonjs/components/Toolbar/useToolbarContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;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;;AAXD,OAAA,CAAA,gCAAA,GAAA,gCAAA","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":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;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;;AAZD,OAAA,CAAA,gCAAA,GAAA,gCAAA","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/"}