npm - @fluentui/react-button - Versions diffs - 9.1.11 → 9.1.13 - Mend

@fluentui/react-button 9.1.11 → 9.1.13

Files changed (115) hide show

package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n highContrastFocusStyles: createCustomFocusIndicatorStyle({\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n }),\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n / No styles /\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' \|\| appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"mappings":"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","names":["exports","root","icon","useRootCheckedStyles","react_1","useRootDisabledStyles","useIconCheckedStyles","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","appearance","checked","disabled","disabledFocusable","className","base","highContrast","subtleOrTransparent","useButtonStyles_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n highContrastFocusStyles: createCustomFocusIndicatorStyle({\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n }),\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n / No styles /\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' \|\| appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"]}

package/lib-commonjs/index.js CHANGED Viewed

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToggleState = exports.useToggleButton_unstable = exports.useToggleButtonStyles_unstable = exports.toggleButtonClassNames = exports.renderToggleButton_unstable = exports.ToggleButton = exports.useSplitButton_unstable = exports.useSplitButtonStyles_unstable = exports.splitButtonClassNames = exports.renderSplitButton_unstable = exports.SplitButton = exports.useMenuButton_unstable = exports.useMenuButtonStyles_unstable = exports.renderMenuButton_unstable = exports.menuButtonClassNames = exports.MenuButton = exports.useCompoundButton_unstable = exports.useCompoundButtonStyles_unstable = exports.renderCompoundButton_unstable = exports.compoundButtonClassNames = exports.CompoundButton = exports.useButton_unstable = exports.useButtonStyles_unstable = exports.renderButton_unstable = exports.buttonClassNames = exports.Button = void 0;
 var Button_1 = /*#__PURE__*/require("./Button");
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -37,9 +35,7 @@ Object.defineProperty(exports, "useButton_unstable", {
     return Button_1.useButton_unstable;
   }
 });
 var CompoundButton_1 = /*#__PURE__*/require("./CompoundButton");
 Object.defineProperty(exports, "CompoundButton", {
   enumerable: true,
   get: function () {
@@ -70,9 +66,7 @@ Object.defineProperty(exports, "useCompoundButton_unstable", {
     return CompoundButton_1.useCompoundButton_unstable;
   }
 });
 var MenuButton_1 = /*#__PURE__*/require("./MenuButton");
 Object.defineProperty(exports, "MenuButton", {
   enumerable: true,
   get: function () {
@@ -103,9 +97,7 @@ Object.defineProperty(exports, "useMenuButton_unstable", {
     return MenuButton_1.useMenuButton_unstable;
   }
 });
 var SplitButton_1 = /*#__PURE__*/require("./SplitButton");
 Object.defineProperty(exports, "SplitButton", {
   enumerable: true,
   get: function () {
@@ -136,9 +128,7 @@ Object.defineProperty(exports, "useSplitButton_unstable", {
     return SplitButton_1.useSplitButton_unstable;
   }
 });
 var ToggleButton_1 = /*#__PURE__*/require("./ToggleButton");
 Object.defineProperty(exports, "ToggleButton", {
   enumerable: true,
   get: function () {
@@ -169,9 +159,7 @@ Object.defineProperty(exports, "useToggleButton_unstable", {
     return ToggleButton_1.useToggleButton_unstable;
   }
 });
 var index_1 = /*#__PURE__*/require("./utils/index");
 Object.defineProperty(exports, "useToggleState", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-button/src/index.ts"],"names":[],"~~mappings":"~~;;;;;;;~~AAAA,IAAA,~~QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,QAAA,CAAA,MAAA~~;~~EAAM~~;~~AAAN,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,QAAA,CAAA,gBAAA~~;~~EAAgB~~;~~AAAhB,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,QAAA,CAAA,qBAAA~~;~~EAAqB~~;~~AAArB,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,QAAA,CAAA,wBAAA~~;~~EAAwB~~;~~AAAxB,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,QAAA,CAAA,kBAAA~~;~~EAAkB~~;~~AAAlB,CAAA;;AAGF,~~IAAA,~~gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,gBAAA,CAAA,cAAA~~;~~EAAc~~;~~AAAd,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,gBAAA,CAAA,wBAAA~~;~~EAAwB~~;~~AAAxB,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,gBAAA,CAAA,6BAAA~~;~~EAA6B~~;~~AAA7B,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,gBAAA,CAAA,gCAAA~~;~~EAAgC~~;~~AAAhC,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,gBAAA,CAAA,0BAAA~~;~~EAA0B~~;~~AAA1B,CAAA;;AAGF,~~IAAA,~~YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,YAAA,CAAA,UAAA~~;~~EAAU~~;~~AAAV,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,YAAA,CAAA,oBAAA~~;~~EAAoB~~;~~AAApB,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,YAAA,CAAA,yBAAA~~;~~EAAyB~~;~~AAAzB,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,YAAA,CAAA,4BAAA~~;~~EAA4B~~;~~AAA5B,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,YAAA,CAAA,sBAAA~~;~~EAAsB~~;~~AAAtB,CAAA;;AAGF,~~IAAA,~~aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,aAAA,CAAA,WAAA~~;~~EAAW~~;~~AAAX,CAAA~~;~~AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,~~IAAA;EAAA~~,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,aAAA,CAAA,0BAAA~~;~~EAA0B~~;~~AAA1B,CAAA~~;~~AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA~~;~~EAAA~~,~~UAAA,EAAA,IAAA~~;EAAA~~,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,aAAA,CAAA,qBAAA~~;~~EAAqB~~;~~AAArB,CAAA~~;~~AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA~~;~~EAAA~~,~~UAAA,EAAA,IAAA~~;EAAA~~,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,aAAA,CAAA,6BAAA~~;~~EAA6B~~;~~AAA7B,CAAA~~;~~AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA~~;~~EAAA~~,~~UAAA,EAAA,IAAA~~;EAAA~~,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,aAAA,CAAA,uBAAA~~;~~EAAuB~~;~~AAAvB,CAAA;;AAGF,~~IAAA,~~cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,cAAA,CAAA,YAAA~~;~~EAAY~~;~~AAAZ,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,cAAA,CAAA,2BAAA~~;~~EAA2B~~;~~AAA3B,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,cAAA,CAAA,sBAAA~~;~~EAAsB~~;~~AAAtB,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,cAAA,CAAA,8BAAA~~;~~EAA8B~~;~~AAA9B,CAAA~~;~~AACA~~,~~MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA,GAAA,EAAA,YAAA~~;~~IAAA,OAAA,cAAA,CAAA,wBAAA~~;~~EAAwB~~;~~AAAxB,CAAA;;AAIF,~~IAAA,~~OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA~~;EAAA~~,UAAA,EAAA,IAAA~~;~~EAAA~~,~~GAAA~~,~~EAAA~~,~~YAAA;IAAA~~,~~OAAA~~,~~OAAA,CAAA,cAAA;EAAc;AAAd,CAAA~~","sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,sBAAM;EAAA;AAAA;AACNF;EAAAC;EAAAC;IAAA,gCAAgB;EAAA;AAAA;AAChBF;EAAAC;EAAAC;IAAA,qCAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,wCAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,kCAAkB;EAAA;AAAA;AAGpB;AACEF;EAAAC;EAAAC;IAAA,sCAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,gDAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,qDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,wDAAgC;EAAA;AAAA;AAChCF;EAAAC;EAAAC;IAAA,kDAA0B;EAAA;AAAA;AAG5B;AACEF;EAAAC;EAAAC;IAAA,8BAAU;EAAA;AAAA;AACVF;EAAAC;EAAAC;IAAA,wCAAoB;EAAA;AAAA;AACpBF;EAAAC;EAAAC;IAAA,6CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,gDAA4B;EAAA;AAAA;AAC5BF;EAAAC;EAAAC;IAAA,0CAAsB;EAAA;AAAA;AAGxB;AACEF;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AAGzB;AACEF;EAAAC;EAAAC;IAAA,kCAAY;EAAA;AAAA;AACZF;EAAAC;EAAAC;IAAA,iDAA2B;EAAA;AAAA;AAC3BF;EAAAC;EAAAC;IAAA,4CAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,oDAA8B;EAAA;AAAA;AAC9BF;EAAAC;EAAAC;IAAA,8CAAwB;EAAA;AAAA;AAI1B;AAASF;EAAAC;EAAAC;IAAA,6BAAc;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"]}

package/lib-commonjs/utils/index.js CHANGED Viewed

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 const tslib_1 = /*#__PURE__*/require("tslib");
 tslib_1.__exportStar(require("./useToggleState"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/utils/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-button/src/utils/index.ts"],"~~names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","~~sourcesContent":["export * from './useToggleState';\n"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/utils/index.ts"],"sourcesContent":["export * from './useToggleState';\n"]}

package/lib-commonjs/utils/useToggleState.js CHANGED Viewed

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useToggleState = void 0;
 const React = /*#__PURE__*/require("react");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 function useToggleState(props, state) {
   const {
     checked,
@@ -31,18 +28,18 @@ function useToggleState(props, state) {
       if (ev.defaultPrevented) {
         return;
       }
       setCheckedValue(!checkedValue);
     }
   }, [checkedValue, disabled, disabledFocusable, setCheckedValue]);
-  return { ...state,
+  return {
+    ...state,
     checked: checkedValue,
-    root: { ...state.root,
+    root: {
+      ...state.root,
       [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
       onClick: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(onClick, onToggleClick))
     }
   };
 }
 exports.useToggleState = useToggleState;
 //# sourceMappingURL=useToggleState.js.map

package/lib-commonjs/utils/useToggleState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~sources":["packages/react-components/react-button/src/utils/useToggleState.ts"],"names":[],"~~mappings":"~~;;;;;;;~~AAAA~~,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;~~AACA~~,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;~~AAIA,~~SAAgB~~,~~cAAhB~~,~~CAIE~~,~~KAJF~~,~~EAI6B~~,~~KAJ7B,EAIgD~~;EAC9C,MAAM;~~IAAE~~,~~OAAF~~;~~IAAW~~,~~cAAX~~;~~IAA2B~~,~~QAA3B~~;~~IAAqC~~;~~EAArC~~,~~IAA2D~~,~~KAAjE~~;~~EACA~~,MAAM;~~IAAE~~,~~OAAF~~;~~IAAW~~;~~EAAX~~,~~IAAoB~~,KAAK,~~CAAC~~,~~IAAhC~~;~~EAEA~~,MAAM,~~CAAC~~,~~YAAD~~,~~EAAe~~,~~eAAf~~,~~IAAkC~~,~~iBAAA~~,~~CAAA~~,~~oBAAA,CAAqB~~;~~IAC3D~~,KAAK,~~EAAE~~,~~OADoD~~;~~IAE3D~~,YAAY,~~EAAE~~,~~cAF6C~~;~~IAG3D~~,YAAY,EAAE;~~EAH6C~~,~~CAArB,CAAxC~~;~~EAMA~~,~~MAAM~~,kBAAkB,~~GAAG~~,IAAI,KAAK,~~kBAAT~~,~~IAA+B~~,IAAI,KAAK,~~UAAnE~~;~~EAEA~~,~~MAAM~~,aAAa,~~GAAG~~,KAAK,~~CAAC~~,~~WAAN~~,~~CACpB~~,EAAE,IAAG;IACH,IAAI,~~CAAC~~,~~QAAD~~,~~IAAa~~,~~CAAC~~,~~iBAAlB~~,~~EAAqC~~;MACnC,~~IAAI~~,EAAE,~~CAAC~~,~~gBAAP~~,~~EAAyB~~;QACvB~~;MACD~~;;~~MAED~~,eAAe,CAAC,~~CAAC~~,~~YAAF~~,~~CAAf;IACD;EACF~~,~~CATmB~~,~~EAUpB~~,~~CAAC~~,~~YAAD~~,~~EAAe~~,~~QAAf~~,~~EAAyB~~,~~iBAAzB~~,~~EAA4C~~,~~eAA5C~~,~~CAVoB~~,~~CAAtB~~;~~EAaA~~,OAAO,~~EACL~~,~~GAAG,KADE~~;~~IAGL~~,OAAO,~~EAAE~~,~~YAHJ~~;~~IAKL~~,IAAI,EAAE,~~EACJ~~,~~GAAG,~~KAAK,~~CAAC~~,~~IADL~~;~~MAEJ~~,~~CAAC~~,kBAAkB,GAAG,~~cAAH~~,~~GAAoB~~,~~cAAvC~~,~~GAAwD~~,~~YAFpD~~;~~MAGJ~~,OAAO,~~EAAE~~,~~iBAAA~~,~~CAAA~~,~~gBAAA~~,~~CACP~~,~~iBAAA~~,~~CAAA~~,~~cAAA~~,~~CAAe~~,~~OAAf~~,~~EAA0F~~,~~aAA1F~~,~~CADO;IAHL;EALD~~,~~CAAP;AAaD;;AA1CD~~,~~OAAA~~,~~CAAA~~,~~cAAA~~,~~GAAA~~,~~cAAA~~","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' \| 'defaultChecked' \| 'disabled' \| 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' \| 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' \|\| role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"]~~,"sourceRoot":"../src/"~~}
1	+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAIA,SAAgBA,cAAc,CAI5BC,KAAyB,EAAEC,KAAmB;EAC9C,MAAM;IAAEC,OAAO;IAAEC,cAAc;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EACtE,MAAM;IAAEM,OAAO;IAAEC;EAAI,CAAE,GAAGN,KAAK,CAACO,IAAI;EAEpC,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,sCAAoB,CAAC;IAC3DV,KAAK,EAAEC,OAAO;IACdU,YAAY,EAAET,cAAc;IAC5BU,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,kBAAkB,GAAGP,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,UAAU;EAE7E,MAAMQ,aAAa,GAAGC,KAAK,CAACC,WAAW,CACrCC,EAAE,IAAG;IACH,IAAI,CAACd,QAAQ,IAAI,CAACC,iBAAiB,EAAE;MACnC,IAAIa,EAAE,CAACC,gBAAgB,EAAE;QACvB;;MAGFT,eAAe,CAAC,CAACD,YAAY,CAAC;;EAElC,CAAC,EACD,CAACA,YAAY,EAAEL,QAAQ,EAAEC,iBAAiB,EAAEK,eAAe,CAAC,CAC7D;EAED,OAAO;IACL,GAAGT,KAAK;IAERC,OAAO,EAAEO,YAAY;IAErBD,IAAI,EAAE;MACJ,GAAGP,KAAK,CAACO,IAAI;MACb,CAACM,kBAAkB,GAAG,cAAc,GAAG,cAAc,GAAGL,YAAY;MACpEH,OAAO,EAAEK,kCAAgB,CACvBA,gCAAc,CAACL,OAAyE,EAAES,aAAa,CAAC;;GAGvF;AACzB;AA1CAK","names":["useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","react_utilities_1","defaultState","initialState","isCheckboxTypeRole","onToggleClick","React","useCallback","ev","defaultPrevented","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/utils/useToggleState.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' \| 'defaultChecked' \| 'disabled' \| 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' \| 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' \|\| role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "9.1.11",
+  "version": "9.1.13",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,17 +28,17 @@
     "@fluentui/a11y-testing": "^0.1.0",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/scripts": "*"
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-aria": "^9.3.3",
+    "@fluentui/react-aria": "^9.3.4",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-tabster": "^9.3.3",
-    "@fluentui/react-theme": "^9.1.4",
-    "@fluentui/react-utilities": "^9.3.0",
-    "@griffel/react": "^1.4.2",
+    "@fluentui/react-tabster": "^9.3.5",
+    "@fluentui/react-theme": "^9.1.5",
+    "@fluentui/react-utilities": "^9.3.1",
+    "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {