@fluentui/react-toolbar 9.0.0-rc.4 → 9.0.0

package/lib-amd/components/ToolbarRadioButton/useToolbarRadioButton.js

@@ -0,0 +1,28 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "@fluentui/react-button", "../Toolbar/ToolbarContext"], function (require, exports, tslib_1, react_utilities_1, react_button_1, ToolbarContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useToolbarRadioButton_unstable = void 0;
+    /**
+     * 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.
+     */
+    var useToolbarRadioButton_unstable = function (props, ref) {
+        var handleRadio = ToolbarContext_1.useToolbarContext_unstable(function (ctx) { return ctx.handleRadio; });
+        var checked = ToolbarContext_1.useToolbarContext_unstable(function (ctx) { var _a; return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value)); });
+        var size = ToolbarContext_1.useToolbarContext_unstable(function (ctx) { return ctx.size; });
+        var onClickOriginal = props.onClick;
+        var toggleButtonState = react_button_1.useToggleButton_unstable(tslib_1.__assign({ size: size, checked: checked, role: 'radio', 'aria-checked': checked }, props), ref);
+        var state = tslib_1.__assign(tslib_1.__assign({}, toggleButtonState), { name: props.name, value: props.value });
+        var handleOnClick = react_utilities_1.useEventCallback(function (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['aria-pressed'] = undefined;
+        state.root.onClick = handleOnClick;
+        return state;
+    };
+    exports.useToolbarRadioButton_unstable = useToolbarRadioButton_unstable;
+});
+//# sourceMappingURL=useToolbarRadioButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarRadioButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":";;;;IAMA;;;;;OAKG;IACI,IAAM,8BAA8B,GAAG,UAC5C,KAA8B,EAC9B,GAAqD;QAErD,IAAM,WAAW,GAAG,2CAA0B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,WAAW,EAAf,CAAe,CAAC,CAAC;QACvE,IAAM,OAAO,GAAG,2CAA0B,CAAC,UAAA,GAAG,YAAI,OAAA,CAAC,CAAC,CAAA,MAAA,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,0CAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA,CAAA,EAAA,CAAC,CAAC;QAC1G,IAAM,IAAI,GAAG,2CAA0B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAR,CAAQ,CAAC,CAAC;QAEjD,IAAS,eAAe,GAAK,KAAK,QAAV,CAAW;QAC3C,IAAM,iBAAiB,GAAG,uCAAwB,oBAC9C,IAAI,MAAA,EAAE,OAAO,SAAA,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,IAAK,KAAK,GACjE,GAAG,CACJ,CAAC;QACF,IAAM,KAAK,yCACN,iBAAiB,KACpB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,GACnB,CAAC;QAEF,IAAM,aAAa,GAAG,kCAAgB,CACpC,UAAC,CAAoG;YACnG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,CAAC,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YACzD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,CAAC,CAAC,CAAC;QACvB,CAAC,CACF,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;QACvC,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;QACnC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA5BW,QAAA,8BAA8B,kCA4BzC","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(\n    { size, checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\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  state.root['aria-pressed'] = undefined;\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"]}

package/lib-amd/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js

@@ -0,0 +1,20 @@
+define(["require", "exports", "@fluentui/react-theme", "@griffel/react", "@fluentui/react-button"], function (require, exports, react_theme_1, react_1, react_button_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useToolbarRadioButtonStyles_unstable = void 0;
+    var useBaseStyles = react_1.makeStyles({
+        selected: {
+            color: react_theme_1.tokens.colorBrandForeground1,
+        },
+    });
+    /**
+     * Apply styling to the ToolbarRadioButton slots based on the state
+     */
+    var useToolbarRadioButtonStyles_unstable = function (state) {
+        react_button_1.useToggleButtonStyles_unstable(state);
+        var toggleButtonStyles = useBaseStyles();
+        state.root.className = react_1.mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
+    };
+    exports.useToolbarRadioButtonStyles_unstable = useToolbarRadioButtonStyles_unstable;
+});
+//# sourceMappingURL=useToolbarRadioButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarRadioButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":";;;;IAKA,IAAM,aAAa,GAAG,kBAAU,CAAC;QAC/B,QAAQ,EAAE;YACR,KAAK,EAAE,oBAAM,CAAC,qBAAqB;SACpC;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,oCAAoC,GAAG,UAAC,KAA8B;QACjF,6CAA8B,CAAC,KAAK,CAAC,CAAC;QACtC,IAAM,kBAAkB,GAAG,aAAa,EAAE,CAAC;QAE3C,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,IAAI,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC1G,CAAC,CAAC;IALW,QAAA,oCAAoC,wCAK/C","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"]}

package/lib-amd/components/ToolbarRadioGroup/ToolbarRadioGroup.js

@@ -0,0 +1,17 @@
+define(["require", "exports", "tslib", "react", "../../ToolbarGroup"], function (require, exports, tslib_1, React, ToolbarGroup_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ToolbarRadioGroup = void 0;
+    /**
+     * ToolbarRadioGroup component is a Button to be used inside Toolbar
+     * which will respect toolbar props such as `size`
+     */
+    exports.ToolbarRadioGroup = React.forwardRef(function (props, ref) {
+        var state = ToolbarGroup_1.useToolbarGroup_unstable(tslib_1.__assign({ role: 'radiogroup' }, props), ref);
+        ToolbarGroup_1.useToolbarGroupStyles_unstable(state);
+        return ToolbarGroup_1.renderToolbarGroup_unstable(state);
+        // Casting is required due to lack of distributive union to support unions on @types/react
+    });
+    exports.ToolbarRadioGroup.displayName = 'ToolbarRadioGroup';
+});
+//# sourceMappingURL=ToolbarRadioGroup.js.map

package/lib-amd/components/ToolbarRadioGroup/ToolbarRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarRadioGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx"],"names":[],"mappings":";;;;IASA;;;OAGG;IACU,QAAA,iBAAiB,GAAgD,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACxG,IAAM,KAAK,GAAG,uCAAwB,oBAAG,IAAI,EAAE,YAAY,IAAK,KAAK,GAAI,GAAG,CAAC,CAAC;QAC9E,6CAA8B,CAAC,KAAK,CAAC,CAAC;QACtC,OAAO,0CAA2B,CAAC,KAAK,CAAC,CAAC;QAC1C,0FAA0F;IAC5F,CAAC,CAAgD,CAAC;IAElD,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioGroupProps } from './ToolbarRadioGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  renderToolbarGroup_unstable,\n  useToolbarGroupStyles_unstable,\n  useToolbarGroup_unstable,\n} from '../../ToolbarGroup';\n\n/**\n * ToolbarRadioGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable({ role: 'radiogroup', ...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<ToolbarRadioGroupProps>;\n\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n"]}

package/lib-amd/components/ToolbarRadioGroup/ToolbarRadioGroup.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=ToolbarRadioGroup.types.js.map

package/lib-amd/components/ToolbarRadioGroup/ToolbarRadioGroup.types.js.map

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

package/lib-amd/components/ToolbarRadioGroup/index.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./ToolbarRadioGroup", "./ToolbarRadioGroup.types"], function (require, exports, tslib_1, ToolbarRadioGroup_1, ToolbarRadioGroup_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(ToolbarRadioGroup_1, exports);
+    tslib_1.__exportStar(ToolbarRadioGroup_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/ToolbarRadioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/index.ts"],"names":[],"mappings":";;;IAAA,mDAAoC;IACpC,yDAA0C","sourcesContent":["export * from './ToolbarRadioGroup';\nexport * from './ToolbarRadioGroup.types';\n"]}

package/lib-amd/components/ToolbarToggleButton/ToolbarToggleButton.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "@fluentui/react-button", "./useToolbarToggleButton", "./useToolbarToggleButtonStyles"], function (require, exports, React, react_button_1, useToolbarToggleButton_1, useToolbarToggleButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ToolbarToggleButton = void 0;
+    /**
+     * ToolbarToggleButton component
+     */
+    exports.ToolbarToggleButton = React.forwardRef(function (props, ref) {
+        var state = useToolbarToggleButton_1.useToolbarToggleButton_unstable(props, ref);
+        useToolbarToggleButtonStyles_1.useToolbarToggleButtonStyles_unstable(state);
+        return react_button_1.renderToggleButton_unstable(state);
+    });
+    exports.ToolbarToggleButton.displayName = 'ToolbarToggleButton';
+});
+//# sourceMappingURL=ToolbarToggleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,mBAAmB,GAAkD,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5G,IAAM,KAAK,GAAG,wDAA+B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE1D,oEAAqC,CAAC,KAAK,CAAC,CAAC;QAC7C,OAAO,0CAA2B,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAkD,CAAC;IAEpD,2BAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC","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"]}

package/lib-amd/components/ToolbarToggleButton/ToolbarToggleButton.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=ToolbarToggleButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"","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-amd/components/ToolbarToggleButton/index.js

@@ -0,0 +1,9 @@
+define(["require", "exports", "tslib", "./ToolbarToggleButton", "./ToolbarToggleButton.types", "./useToolbarToggleButton", "./useToolbarToggleButtonStyles"], function (require, exports, tslib_1, ToolbarToggleButton_1, ToolbarToggleButton_types_1, useToolbarToggleButton_1, useToolbarToggleButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(ToolbarToggleButton_1, exports);
+    tslib_1.__exportStar(ToolbarToggleButton_types_1, exports);
+    tslib_1.__exportStar(useToolbarToggleButton_1, exports);
+    tslib_1.__exportStar(useToolbarToggleButtonStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"names":[],"mappings":";;;IAAA,qDAAsC;IACtC,2DAA4C;IAC5C,wDAAyC;IACzC,8DAA+C","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\nexport * from './useToolbarToggleButton';\nexport * from './useToolbarToggleButtonStyles';\n"]}

package/lib-amd/components/ToolbarToggleButton/useToolbarToggleButton.js

@@ -0,0 +1,32 @@
+define(["require", "exports", "tslib", "@fluentui/react-button", "../Toolbar/ToolbarContext"], function (require, exports, tslib_1, react_button_1, ToolbarContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useToolbarToggleButton_unstable = void 0;
+    /**
+     * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+     * processed state.
+     * @param props - User provided props to the ToggleButton component.
+     * @param ref - User provided ref to be passed to the ToggleButton component.
+     */
+    var useToolbarToggleButton_unstable = function (props, ref) {
+        var handleToggleButton = ToolbarContext_1.useToolbarContext_unstable(function (ctx) { return ctx.handleToggleButton; });
+        var checked = ToolbarContext_1.useToolbarContext_unstable(function (ctx) { var _a; return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value)); });
+        var size = ToolbarContext_1.useToolbarContext_unstable(function (ctx) { return ctx.size; });
+        var onClickOriginal = props.onClick;
+        var toggleButtonState = react_button_1.useToggleButton_unstable(tslib_1.__assign({ size: size, checked: checked }, props), ref);
+        var state = tslib_1.__assign(tslib_1.__assign({}, toggleButtonState), { name: props.name, value: props.value });
+        var handleOnClick = function (e) {
+            if (state.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
+            onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
+        };
+        state.root.onClick = handleOnClick;
+        return state;
+    };
+    exports.useToolbarToggleButton_unstable = useToolbarToggleButton_unstable;
+});
+//# sourceMappingURL=useToolbarToggleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarToggleButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;IAKA;;;;;OAKG;IACI,IAAM,+BAA+B,GAAG,UAC7C,KAA+B,EAC/B,GAAqD;QAErD,IAAM,kBAAkB,GAAG,2CAA0B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,kBAAkB,EAAtB,CAAsB,CAAC,CAAC;QACrF,IAAM,OAAO,GAAG,2CAA0B,CAAC,UAAA,GAAG,YAAI,OAAA,CAAC,CAAC,CAAA,MAAA,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,0CAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA,CAAA,EAAA,CAAC,CAAC;QAC1G,IAAM,IAAI,GAAG,2CAA0B,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAR,CAAQ,CAAC,CAAC;QAEjD,IAAS,eAAe,GAAK,KAAK,QAAV,CAAW;QAC3C,IAAM,iBAAiB,GAAG,uCAAwB,oBAAG,IAAI,MAAA,EAAE,OAAO,SAAA,IAAK,KAAK,GAAI,GAAG,CAAC,CAAC;QACrF,IAAM,KAAK,yCACN,iBAAiB,KACpB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,GACnB,CAAC;QAEF,IAAM,aAAa,GAAG,UACpB,CAAoG;YAEpG,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO;aACR;YAED,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,CAAC,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YAChE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,CAAC,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,KAAK,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;QACnC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA/BW,QAAA,+BAA+B,mCA+B1C","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"]}

package/lib-amd/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js

@@ -0,0 +1,20 @@
+define(["require", "exports", "@fluentui/react-theme", "@griffel/react", "@fluentui/react-button"], function (require, exports, react_theme_1, react_1, react_button_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useToolbarToggleButtonStyles_unstable = void 0;
+    var useBaseStyles = react_1.makeStyles({
+        selected: {
+            color: react_theme_1.tokens.colorBrandForeground1,
+        },
+    });
+    /**
+     * Apply styling to the ToolbarToggleButton slots based on the state
+     */
+    var useToolbarToggleButtonStyles_unstable = function (state) {
+        react_button_1.useToggleButtonStyles_unstable(state);
+        var toggleButtonStyles = useBaseStyles();
+        state.root.className = react_1.mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
+    };
+    exports.useToolbarToggleButtonStyles_unstable = useToolbarToggleButtonStyles_unstable;
+});
+//# sourceMappingURL=useToolbarToggleButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToolbarToggleButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":";;;;IAKA,IAAM,aAAa,GAAG,kBAAU,CAAC;QAC/B,QAAQ,EAAE;YACR,KAAK,EAAE,oBAAM,CAAC,qBAAqB;SACpC;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,qCAAqC,GAAG,UAAC,KAA+B;QACnF,6CAA8B,CAAC,KAAK,CAAC,CAAC;QACtC,IAAM,kBAAkB,GAAG,aAAa,EAAE,CAAC;QAE3C,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,IAAI,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC1G,CAAC,CAAC;IALW,QAAA,qCAAqC,yCAKhD","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"]}

package/lib-amd/index.js

@@ -0,0 +1,27 @@
+define(["require", "exports", "./Toolbar", "./ToolbarButton", "./ToolbarDivider", "./ToolbarToggleButton", "./ToolbarRadioButton", "./ToolbarGroup", "./ToolbarRadioGroup"], function (require, exports, Toolbar_1, ToolbarButton_1, ToolbarDivider_1, ToolbarToggleButton_1, ToolbarRadioButton_1, ToolbarGroup_1, ToolbarRadioGroup_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ToolbarRadioGroup = exports.toolbarGroupClassNames = exports.renderToolbarGroup_unstable = exports.useToolbarGroup_unstable = exports.useToolbarGroupStyles_unstable = exports.ToolbarGroup = exports.useToolbarRadioButton_unstable = exports.useToolbarRadioButtonStyles_unstable = exports.ToolbarRadioButton = exports.useToolbarToggleButton_unstable = exports.useToolbarToggleButtonStyles_unstable = exports.ToolbarToggleButton = exports.useToolbarDivider_unstable = exports.useToolbarDividerStyles_unstable = exports.ToolbarDivider = exports.ToolbarButton = exports.useToolbar_unstable = exports.useToolbarStyles_unstable = exports.toolbarClassNames = exports.renderToolbar_unstable = exports.Toolbar = void 0;
+    Object.defineProperty(exports, "Toolbar", { enumerable: true, get: function () { return Toolbar_1.Toolbar; } });
+    Object.defineProperty(exports, "renderToolbar_unstable", { enumerable: true, get: function () { return Toolbar_1.renderToolbar_unstable; } });
+    Object.defineProperty(exports, "toolbarClassNames", { enumerable: true, get: function () { return Toolbar_1.toolbarClassNames; } });
+    Object.defineProperty(exports, "useToolbarStyles_unstable", { enumerable: true, get: function () { return Toolbar_1.useToolbarStyles_unstable; } });
+    Object.defineProperty(exports, "useToolbar_unstable", { enumerable: true, get: function () { return Toolbar_1.useToolbar_unstable; } });
+    Object.defineProperty(exports, "ToolbarButton", { enumerable: true, get: function () { return ToolbarButton_1.ToolbarButton; } });
+    Object.defineProperty(exports, "ToolbarDivider", { enumerable: true, get: function () { return ToolbarDivider_1.ToolbarDivider; } });
+    Object.defineProperty(exports, "useToolbarDividerStyles_unstable", { enumerable: true, get: function () { return ToolbarDivider_1.useToolbarDividerStyles_unstable; } });
+    Object.defineProperty(exports, "useToolbarDivider_unstable", { enumerable: true, get: function () { return ToolbarDivider_1.useToolbarDivider_unstable; } });
+    Object.defineProperty(exports, "ToolbarToggleButton", { enumerable: true, get: function () { return ToolbarToggleButton_1.ToolbarToggleButton; } });
+    Object.defineProperty(exports, "useToolbarToggleButtonStyles_unstable", { enumerable: true, get: function () { return ToolbarToggleButton_1.useToolbarToggleButtonStyles_unstable; } });
+    Object.defineProperty(exports, "useToolbarToggleButton_unstable", { enumerable: true, get: function () { return ToolbarToggleButton_1.useToolbarToggleButton_unstable; } });
+    Object.defineProperty(exports, "ToolbarRadioButton", { enumerable: true, get: function () { return ToolbarRadioButton_1.ToolbarRadioButton; } });
+    Object.defineProperty(exports, "useToolbarRadioButtonStyles_unstable", { enumerable: true, get: function () { return ToolbarRadioButton_1.useToolbarRadioButtonStyles_unstable; } });
+    Object.defineProperty(exports, "useToolbarRadioButton_unstable", { enumerable: true, get: function () { return ToolbarRadioButton_1.useToolbarRadioButton_unstable; } });
+    Object.defineProperty(exports, "ToolbarGroup", { enumerable: true, get: function () { return ToolbarGroup_1.ToolbarGroup; } });
+    Object.defineProperty(exports, "useToolbarGroupStyles_unstable", { enumerable: true, get: function () { return ToolbarGroup_1.useToolbarGroupStyles_unstable; } });
+    Object.defineProperty(exports, "useToolbarGroup_unstable", { enumerable: true, get: function () { return ToolbarGroup_1.useToolbarGroup_unstable; } });
+    Object.defineProperty(exports, "renderToolbarGroup_unstable", { enumerable: true, get: function () { return ToolbarGroup_1.renderToolbarGroup_unstable; } });
+    Object.defineProperty(exports, "toolbarGroupClassNames", { enumerable: true, get: function () { return ToolbarGroup_1.toolbarGroupClassNames; } });
+    Object.defineProperty(exports, "ToolbarRadioGroup", { enumerable: true, get: function () { return ToolbarRadioGroup_1.ToolbarRadioGroup; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-toolbar/src/index.ts"],"names":[],"mappings":";;;;IACE,kGAAA,OAAO,OAAA;IACP,iHAAA,sBAAsB,OAAA;IACtB,4GAAA,iBAAiB,OAAA;IACjB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA;IAGZ,8GAAA,aAAa,OAAA;IAOb,gHAAA,cAAc,OAAA;IAAE,kIAAA,gCAAgC,OAAA;IAAE,4HAAA,0BAA0B,OAAA;IAGnF,0HAAA,mBAAmB,OAAA;IACnB,4IAAA,qCAAqC,OAAA;IACrC,sIAAA,+BAA+B,OAAA;IAI/B,wHAAA,kBAAkB,OAAA;IAClB,0IAAA,oCAAoC,OAAA;IACpC,oIAAA,8BAA8B,OAAA;IAI9B,4GAAA,YAAY,OAAA;IACZ,8HAAA,8BAA8B,OAAA;IAC9B,wHAAA,wBAAwB,OAAA;IACxB,2HAAA,2BAA2B,OAAA;IAC3B,sHAAA,sBAAsB,OAAA;IAGf,sHAAA,iBAAiB,OAAA","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 {\n  ToolbarButtonProps,\n  ToolbarButtonState,\n  useToolbarButtonStyles_unstable,\n  useToolbarButton_unstable,\n} from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport {\n  ToolbarToggleButton,\n  useToolbarToggleButtonStyles_unstable,\n  useToolbarToggleButton_unstable,\n} from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport {\n  ToolbarRadioButton,\n  useToolbarRadioButtonStyles_unstable,\n  useToolbarRadioButton_unstable,\n} from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\nexport {\n  ToolbarGroup,\n  useToolbarGroupStyles_unstable,\n  useToolbarGroup_unstable,\n  renderToolbarGroup_unstable,\n  toolbarGroupClassNames,\n} from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup';\nexport { ToolbarRadioGroup } from './ToolbarRadioGroup';\nexport type { ToolbarRadioGroupProps, ToolbarRadioGroupState } from './ToolbarRadioGroup';\n"]}

package/lib-commonjs/ToolbarRadioGroup.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./components/ToolbarRadioGroup/index"), exports);
+//# sourceMappingURL=ToolbarRadioGroup.js.map

package/lib-commonjs/ToolbarRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/ToolbarRadioGroup.ts"],"sourcesContent":["export * from './components/ToolbarRadioGroup/index';\n"]}

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

@@ -38,6 +38,9 @@ const useToolbar_unstable = (props, ref) => {
     root: react_utilities_2.getNativeElementProps('div', {
       role: 'toolbar',
       ref,
+      ...(vertical && {
+        'aria-orientation': 'vertical'
+      }),
       ...arrowNavigationProps,
       ...props
     })

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","react_tabster_1","circular","axis","initialState","components","root","react_utilities_2","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","react_utilities_1","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","exports","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"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"]}
+{"version":3,"mappings":"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","names":["useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","react_tabster_1","circular","axis","initialState","components","root","react_utilities_2","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","react_utilities_1","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","exports","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"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      ...(vertical && { 'aria-orientation': 'vertical' }),\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"]}

package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js

@@ -26,6 +26,8 @@ const useToolbarRadioButton_unstable = (props, ref) => {
   const toggleButtonState = react_button_1.useToggleButton_unstable({
     size,
     checked,
+    role: 'radio',
+    'aria-checked': checked,
     ...props
   }, ref);
   const state = {
@@ -37,6 +39,7 @@ const useToolbarRadioButton_unstable = (props, ref) => {
     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['aria-pressed'] = undefined;
   state.root.onClick = handleOnClick;
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AAGA;;;;;;AAMO,MAAMA,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAAqD,KAC1B;EAC3B,MAAMC,WAAW,GAAGC,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACF,WAAW,CAAC;EACtE,MAAMG,OAAO,GAAGF,2CAA0B,CAACC,GAAG,IAAG;IAAA;IAAC,QAAC,EAAC,SAAG,CAACE,aAAa,CAACN,KAAK,CAACO,IAAI,CAAC,0CAAEC,QAAQ,CAACR,KAAK,CAACS,KAAK,CAAC;EAAA,EAAC;EACzG,MAAMC,IAAI,GAAGP,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACM,IAAI,CAAC;EAExD,MAAM;IAAEC,OAAO,EAAEC;EAAe,CAAE,GAAGZ,KAAK;EAC1C,MAAMa,iBAAiB,GAAGC,uCAAwB,CAAC;IAAEJ,IAAI;IAAEL,OAAO;IAAE,GAAGL;EAAK,CAAE,EAAEC,GAAG,CAAC;EACpF,MAAMc,KAAK,GAA4B;IACrC,GAAGF,iBAAiB;IACpBN,IAAI,EAAEP,KAAK,CAACO,IAAI;IAChBE,KAAK,EAAET,KAAK,CAACS;GACd;EAED,MAAMO,aAAa,GAAGC,kCAAgB,CACnCC,CAAoG,IAAI;IACvGhB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGgB,CAAC,EAAEH,KAAK,CAACR,IAAI,EAAEQ,KAAK,CAACN,KAAK,EAAEM,KAAK,CAACV,OAAO,CAAC;IACxDO,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGM,CAAC,CAAC;EACtB,CAAC,CACF;EAEDH,KAAK,CAACI,IAAI,CAACR,OAAO,GAAGK,aAAa;EAClC,OAAOD,KAAK;AACd,CAAC;AAzBYK,sCAA8B","names":["useToolbarRadioButton_unstable","props","ref","handleRadio","ToolbarContext_1","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","react_button_1","state","handleOnClick","react_utilities_1","e","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"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"]}
+{"version":3,"mappings":";;;;;;AACA;AACA;AACA;AAGA;;;;;;AAMO,MAAMA,8BAA8B,GAAG,CAC5CC,KAA8B,EAC9BC,GAAqD,KAC1B;EAC3B,MAAMC,WAAW,GAAGC,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACF,WAAW,CAAC;EACtE,MAAMG,OAAO,GAAGF,2CAA0B,CAACC,GAAG,IAAG;IAAA;IAAC,QAAC,EAAC,SAAG,CAACE,aAAa,CAACN,KAAK,CAACO,IAAI,CAAC,0CAAEC,QAAQ,CAACR,KAAK,CAACS,KAAK,CAAC;EAAA,EAAC;EACzG,MAAMC,IAAI,GAAGP,2CAA0B,CAACC,GAAG,IAAIA,GAAG,CAACM,IAAI,CAAC;EAExD,MAAM;IAAEC,OAAO,EAAEC;EAAe,CAAE,GAAGZ,KAAK;EAC1C,MAAMa,iBAAiB,GAAGC,uCAAwB,CAChD;IAAEJ,IAAI;IAAEL,OAAO;IAAEU,IAAI,EAAE,OAAO;IAAE,cAAc,EAAEV,OAAO;IAAE,GAAGL;EAAK,CAAE,EACnEC,GAAG,CACJ;EACD,MAAMe,KAAK,GAA4B;IACrC,GAAGH,iBAAiB;IACpBN,IAAI,EAAEP,KAAK,CAACO,IAAI;IAChBE,KAAK,EAAET,KAAK,CAACS;GACd;EAED,MAAMQ,aAAa,GAAGC,kCAAgB,CACnCC,CAAoG,IAAI;IACvGjB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGiB,CAAC,EAAEH,KAAK,CAACT,IAAI,EAAES,KAAK,CAACP,KAAK,EAAEO,KAAK,CAACX,OAAO,CAAC;IACxDO,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGO,CAAC,CAAC;EACtB,CAAC,CACF;EACDH,KAAK,CAACI,IAAI,CAAC,cAAc,CAAC,GAAGC,SAAS;EACtCL,KAAK,CAACI,IAAI,CAACT,OAAO,GAAGM,aAAa;EAClC,OAAOD,KAAK;AACd,CAAC;AA5BYM,sCAA8B","names":["useToolbarRadioButton_unstable","props","ref","handleRadio","ToolbarContext_1","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","react_button_1","role","state","handleOnClick","react_utilities_1","e","root","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"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(\n    { size, checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\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  state.root['aria-pressed'] = undefined;\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"]}

package/lib-commonjs/components/ToolbarRadioGroup/ToolbarRadioGroup.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarRadioGroup = void 0;
+const React = /*#__PURE__*/require("react");
+const ToolbarGroup_1 = /*#__PURE__*/require("../../ToolbarGroup");
+/**
+ * ToolbarRadioGroup component is a Button to be used inside Toolbar
+ * which will respect toolbar props such as `size`
+ */
+exports.ToolbarRadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = ToolbarGroup_1.useToolbarGroup_unstable({
+    role: 'radiogroup',
+    ...props
+  }, ref);
+  ToolbarGroup_1.useToolbarGroupStyles_unstable(state);
+  return ToolbarGroup_1.renderToolbarGroup_unstable(state);
+  // Casting is required due to lack of distributive union to support unions on @types/react
+});
+
+exports.ToolbarRadioGroup.displayName = 'ToolbarRadioGroup';
+//# sourceMappingURL=ToolbarRadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAMA;;;;AAIaA,yBAAiB,gBAAgDC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5G,MAAMC,KAAK,GAAGC,uCAAwB,CAAC;IAAEC,IAAI,EAAE,YAAY;IAAE,GAAGJ;EAAK,CAAE,EAAEC,GAAG,CAAC;EAC7EE,6CAA8B,CAACD,KAAK,CAAC;EACrC,OAAOC,0CAA2B,CAACD,KAAK,CAAC;EACzC;AACF,CAAC,CAAgD;;AAEjDL,yBAAiB,CAACQ,WAAW,GAAG,mBAAmB","names":["exports","React","forwardRef","props","ref","state","ToolbarGroup_1","role","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/ToolbarRadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioGroupProps } from './ToolbarRadioGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  renderToolbarGroup_unstable,\n  useToolbarGroupStyles_unstable,\n  useToolbarGroup_unstable,\n} from '../../ToolbarGroup';\n\n/**\n * ToolbarRadioGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable({ role: 'radiogroup', ...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<ToolbarRadioGroupProps>;\n\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n"]}

package/lib-commonjs/components/ToolbarRadioGroup/ToolbarRadioGroup.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=ToolbarRadioGroup.types.js.map

package/lib-commonjs/components/ToolbarRadioGroup/ToolbarRadioGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/ToolbarRadioGroup/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./ToolbarRadioGroup"), exports);
+tslib_1.__exportStar(require("./ToolbarRadioGroup.types"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/ToolbarRadioGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioGroup/index.ts"],"sourcesContent":["export * from './ToolbarRadioGroup';\nexport * from './ToolbarRadioGroup.types';\n"]}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toolbarGroupClassNames = exports.renderToolbarGroup_unstable = exports.useToolbarGroup_unstable = exports.useToolbarGroupStyles_unstable = exports.ToolbarGroup = exports.useToolbarRadioButton_unstable = exports.useToolbarRadioButtonStyles_unstable = exports.ToolbarRadioButton = exports.useToolbarToggleButton_unstable = exports.useToolbarToggleButtonStyles_unstable = exports.ToolbarToggleButton = exports.useToolbarDivider_unstable = exports.useToolbarDividerStyles_unstable = exports.ToolbarDivider = exports.ToolbarButton = exports.useToolbar_unstable = exports.useToolbarStyles_unstable = exports.toolbarClassNames = exports.renderToolbar_unstable = exports.Toolbar = void 0;
+exports.ToolbarRadioGroup = exports.toolbarGroupClassNames = exports.renderToolbarGroup_unstable = exports.useToolbarGroup_unstable = exports.useToolbarGroupStyles_unstable = exports.ToolbarGroup = exports.useToolbarRadioButton_unstable = exports.useToolbarRadioButtonStyles_unstable = exports.ToolbarRadioButton = exports.useToolbarToggleButton_unstable = exports.useToolbarToggleButtonStyles_unstable = exports.ToolbarToggleButton = exports.useToolbarDivider_unstable = exports.useToolbarDividerStyles_unstable = exports.ToolbarDivider = exports.ToolbarButton = exports.useToolbar_unstable = exports.useToolbarStyles_unstable = exports.toolbarClassNames = exports.renderToolbar_unstable = exports.Toolbar = void 0;
 var Toolbar_1 = /*#__PURE__*/require("./Toolbar");
 Object.defineProperty(exports, "Toolbar", {
   enumerable: true,
@@ -130,4 +130,11 @@ Object.defineProperty(exports, "toolbarGroupClassNames", {
     return ToolbarGroup_1.toolbarGroupClassNames;
   }
 });
+var ToolbarRadioGroup_1 = /*#__PURE__*/require("./ToolbarRadioGroup");
+Object.defineProperty(exports, "ToolbarRadioGroup", {
+  enumerable: true,
+  get: function () {
+    return ToolbarRadioGroup_1.ToolbarRadioGroup;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA;AAGrB;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAOtB;AAASF;EAAAC;EAAAC;IAAA,sCAAc;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,wDAAgC;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,kDAA0B;EAAA;AAAA;AAErF;AACEF;EAAAC;EAAAC;IAAA,gDAAmB;EAAA;AAAA;AACnBF;EAAAC;EAAAC;IAAA,kEAAqC;EAAA;AAAA;AACrCF;EAAAC;EAAAC;IAAA,4DAA+B;EAAA;AAAA;AAGjC;AACEF;EAAAC;EAAAC;IAAA,8CAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,gEAAoC;EAAA;AAAA;AACpCF;EAAAC;EAAAC;IAAA,0DAA8B;EAAA;AAAA;AAGhC;AACEF;EAAAC;EAAAC;IAAA,kCAAY;EAAA;AAAA;AACZF;EAAAC;EAAAC;IAAA,oDAA8B;EAAA;AAAA;AAC9BF;EAAAC;EAAAC;IAAA,8CAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,iDAA2B;EAAA;AAAA;AAC3BF;EAAAC;EAAAC;IAAA,4CAAsB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/index.ts"],"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 {\n  ToolbarButtonProps,\n  ToolbarButtonState,\n  useToolbarButtonStyles_unstable,\n  useToolbarButton_unstable,\n} from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport {\n  ToolbarToggleButton,\n  useToolbarToggleButtonStyles_unstable,\n  useToolbarToggleButton_unstable,\n} from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport {\n  ToolbarRadioButton,\n  useToolbarRadioButtonStyles_unstable,\n  useToolbarRadioButton_unstable,\n} from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\nexport {\n  ToolbarGroup,\n  useToolbarGroupStyles_unstable,\n  useToolbarGroup_unstable,\n  renderToolbarGroup_unstable,\n  toolbarGroupClassNames,\n} from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup';\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA;AAGrB;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAOtB;AAASF;EAAAC;EAAAC;IAAA,sCAAc;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,wDAAgC;EAAA;AAAA;AAAEF;EAAAC;EAAAC;IAAA,kDAA0B;EAAA;AAAA;AAErF;AACEF;EAAAC;EAAAC;IAAA,gDAAmB;EAAA;AAAA;AACnBF;EAAAC;EAAAC;IAAA,kEAAqC;EAAA;AAAA;AACrCF;EAAAC;EAAAC;IAAA,4DAA+B;EAAA;AAAA;AAGjC;AACEF;EAAAC;EAAAC;IAAA,8CAAkB;EAAA;AAAA;AAClBF;EAAAC;EAAAC;IAAA,gEAAoC;EAAA;AAAA;AACpCF;EAAAC;EAAAC;IAAA,0DAA8B;EAAA;AAAA;AAGhC;AACEF;EAAAC;EAAAC;IAAA,kCAAY;EAAA;AAAA;AACZF;EAAAC;EAAAC;IAAA,oDAA8B;EAAA;AAAA;AAC9BF;EAAAC;EAAAC;IAAA,8CAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,iDAA2B;EAAA;AAAA;AAC3BF;EAAAC;EAAAC;IAAA,4CAAsB;EAAA;AAAA;AAGxB;AAASF;EAAAC;EAAAC;IAAA,4CAAiB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/index.ts"],"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 {\n  ToolbarButtonProps,\n  ToolbarButtonState,\n  useToolbarButtonStyles_unstable,\n  useToolbarButton_unstable,\n} from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport {\n  ToolbarToggleButton,\n  useToolbarToggleButtonStyles_unstable,\n  useToolbarToggleButton_unstable,\n} from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport {\n  ToolbarRadioButton,\n  useToolbarRadioButtonStyles_unstable,\n  useToolbarRadioButton_unstable,\n} from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\nexport {\n  ToolbarGroup,\n  useToolbarGroupStyles_unstable,\n  useToolbarGroup_unstable,\n  renderToolbarGroup_unstable,\n  toolbarGroupClassNames,\n} from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup';\nexport { ToolbarRadioGroup } from './ToolbarRadioGroup';\nexport type { ToolbarRadioGroupProps, ToolbarRadioGroupState } from './ToolbarRadioGroup';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.0.0-rc.4",
+  "version": "9.0.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,16 +29,18 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-cypress": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.1.14",
-    "@fluentui/react-divider": "^9.1.10",
+    "@fluentui/react-button": "^9.1.16",
+    "@fluentui/react-divider": "^9.1.11",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.4.0",
     "@fluentui/react-context-selector": "^9.1.5",
-    "@fluentui/react-radio": "^9.0.17",
-    "@fluentui/react-tabster": "^9.3.6",
+    "@fluentui/react-radio": "^9.0.19",
+    "@fluentui/react-tabster": "^9.4.0",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
@@ -50,9 +52,8 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
+      "prerelease",
+      "major"
     ]
   },
   "exports": {