@fluentui/react-button 9.0.0-rc.4 → 9.0.0-rc.7

package/lib/components/CompoundButton/useCompoundButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AAEP,MAAM,wBAAwB,GAAG;AAC/B,EAAA,gBAAgB,EAAE,GAAG,uBAAuB;AADb,CAAjC;;AAIA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAwHA,MAAM,qBAAqB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA9B;;AAsBA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AASA,MAAM,yBAAyB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AASA,MAAM,yBAAyB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAmBA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AACA,QAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA,iBAAxB;AAA2C,IAAA,QAA3C;AAAqD,IAAA;AAArD,MAA8D,KAApE;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBADiC,EAGjC;AACA,EAAA,UAAU,CAAC,IAJsB,EAKjC,UAAU,IAAI,UAAU,CAAC,UAAD,CALS,EAMjC,UAAU,CAAC,IAAD,CANuB,EAQjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QATb,EAWjC;AACA,EAAA,QAAQ,IAAI,kBAAkB,CAAC,IAAD,CAZG,EAcjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAfsB,CAAnC;;AAkBA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,UAAU,CAAC,IAAZ,EAAkB,KAAK,CAAC,IAAN,CAAW,SAA7B,CAAnC;AACD;;AAED,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,KAAK,CAAC,gBAAN,CAAuB,SAArD,CAA/C;;AAEA,MAAI,KAAK,CAAC,gBAAV,EAA4B;AAC1B,IAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,wBAAwB,CAAC,gBADoB,EAE7C,sBAAsB,CAAC,IAFsB,EAG7C,sBAAsB,CAAC,IAAD,CAHuB,EAI7C,KAAK,CAAC,gBAAN,CAAuB,SAJsB,CAA/C;AAMD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CA7CM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassName = 'fui-CompoundButton';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: `${compoundButtonClassName}-secondaryContent`,\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    ...shorthands.gap('12px'),\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  subtle: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding('8px', '8px', '10px', '8px'),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', '12px', '16px', '12px'),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', '16px', '20px', '16px'),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding('4px'),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding('6px'),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding('8px'),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassName,\n\n    // Root styles\n    rootStyles.base,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n  }\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      CompoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\n/**\n * @deprecated Use `compoundButtonClassName.root` instead.\n */\nexport const compoundButtonClassName = compoundButtonClassNames.root;\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    ...shorthands.gap('12px'),\n\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding('8px', '8px', '10px', '8px'),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', '12px', '16px', '12px'),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', '16px', '20px', '16px'),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding('4px'),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding('6px'),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding('8px'),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.icon.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuButton/index.d.ts

@@ -2,4 +2,4 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+export { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable, } from './useMenuButtonStyles';

package/lib/components/MenuButton/index.js

@@ -2,5 +2,7 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+export {
+/* eslint-disable-next-line deprecation/deprecation */
+menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}
+{"version":3,"sources":["components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAd;AACA,cAAc,cAAd;AACA,cAAc,oBAAd;AACA,cAAc,iBAAd;AACA;AACE;AACA,mBAFF,EAGE,oBAHF,EAIE,4BAJF,QAKO,uBALP","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport {\n  /* eslint-disable-next-line deprecation/deprecation */\n  menuButtonClassName,\n  menuButtonClassNames,\n  useMenuButtonStyles_unstable,\n} from './useMenuButtonStyles';\n"],"sourceRoot":"../src/"}

package/lib/components/MenuButton/useMenuButtonStyles.d.ts

@@ -1,3 +1,8 @@
-import type { MenuButtonState } from './MenuButton.types';
-export declare const menuButtonClassName = "fui-MenuButton";
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';
+export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
+/**
+ * @deprecated Use `menuButtonClassName.root` instead.
+ */
+export declare const menuButtonClassName: string;
 export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;

package/lib/components/MenuButton/useMenuButtonStyles.js

@@ -1,6 +1,15 @@
 import { mergeClasses, __styles } from '@griffel/react';
 import { useButtonStyles_unstable } from '../Button/useButtonStyles';
-export const menuButtonClassName = 'fui-MenuButton';
+export const menuButtonClassNames = {
+  root: 'fui-MenuButton',
+  icon: 'fui-MenuButton__icon',
+  menuIcon: 'fui-MenuButton__menuIcon'
+};
+/**
+ * @deprecated Use `menuButtonClassName.root` instead.
+ */
+
+export const menuButtonClassName = menuButtonClassNames.root;
 
 const useMenuIconStyles = /*#__PURE__*/__styles({
   "small": {
@@ -24,10 +33,14 @@ const useMenuIconStyles = /*#__PURE__*/__styles({
 
 export const useMenuButtonStyles_unstable = state => {
   const menuIconStyles = useMenuIconStyles();
-  state.root.className = mergeClasses(menuButtonClassName, state.root.className);
+  state.root.className = mergeClasses(menuButtonClassNames.root, state.root.className);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.icon.className);
+  }
 
   if (state.menuIcon) {
-    state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
+    state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles[state.size], state.menuIcon.className);
   }
 
   useButtonStyles_unstable(state);

package/lib/components/MenuButton/useMenuButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;;AAEP,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,KAAK,CAAC,IAAN,CAAW,SAAjC,CAAnC;;AAEA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AACD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAZM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { ButtonState } from '../Button/Button.types';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassName = 'fui-MenuButton';\n\nconst useMenuIconStyles = makeStyles({\n  // Size appearance\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(menuButtonClassName, state.root.className);\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n  }\n\n  useButtonStyles_unstable(state as ButtonState);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAIA,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,IAAI,EAAE,sBAF6D;AAGnE,EAAA,QAAQ,EAAE;AAHyD,CAA9D;AAMP;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,oBAAoB,CAAC,IAAjD;;AAEP,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,KAAK,CAAC,IAAN,CAAW,SAAvC,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,KAAK,CAAC,IAAN,CAAW,SAAvC,CAAnC;AACD;;AAED,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,oBAAoB,CAAC,QADgB,EAErC,cAAc,CAAC,KAAK,CAAC,IAAP,CAFuB,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;AAKD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CApBM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { ButtonState } from '../Button/Button.types';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n  root: 'fui-MenuButton',\n  icon: 'fui-MenuButton__icon',\n  menuIcon: 'fui-MenuButton__menuIcon',\n};\n\n/**\n * @deprecated Use `menuButtonClassName.root` instead.\n */\nexport const menuButtonClassName = menuButtonClassNames.root;\n\nconst useMenuIconStyles = makeStyles({\n  // Size appearance\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n  const menuIconStyles = useMenuIconStyles();\n\n  state.root.className = mergeClasses(menuButtonClassNames.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.icon.className);\n  }\n\n  if (state.menuIcon) {\n    state.menuIcon.className = mergeClasses(\n      menuButtonClassNames.menuIcon,\n      menuIconStyles[state.size],\n      state.menuIcon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state as ButtonState);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -7,7 +7,7 @@ export declare type SplitButtonSlots = {
     /**
      * Root of the component that wraps the primary action button and menu button.
      */
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
      * Button that opens menu with secondary actions in SplitButton.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root'> &\n  Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"]}
+{"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from '../Button/Button.types';\nimport type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';\n\nexport type SplitButtonSlots = {\n  /**\n   * Root of the component that wraps the primary action button and menu button.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Button that opens menu with secondary actions in SplitButton.\n   */\n  menuButton?: Slot<typeof MenuButton>;\n  /**\n   * Button to perform primary action in SplitButton.\n   */\n  primaryActionButton?: Slot<typeof Button>;\n};\n\nexport type SplitButtonProps = ComponentProps<SplitButtonSlots> &\n  Omit<ButtonProps, 'root'> &\n  Omit<MenuButtonProps, 'root'>;\n\nexport type SplitButtonState = ComponentState<SplitButtonSlots> &\n  Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &\n  Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;\n"]}

package/lib/components/SplitButton/index.d.ts

@@ -2,4 +2,4 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
+export { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable, } from './useSplitButtonStyles';

package/lib/components/SplitButton/index.js

@@ -2,5 +2,7 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
+export {
+/* eslint-disable-next-line deprecation/deprecation */
+splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}
+{"version":3,"sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,qBAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd;AACA;AACE;AACA,oBAFF,EAGE,qBAHF,EAIE,6BAJF,QAKO,wBALP","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport {\n  /* eslint-disable-next-line deprecation/deprecation */\n  splitButtonClassName,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n} from './useSplitButtonStyles';\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButton.js

@@ -10,6 +10,7 @@ import { MenuButton } from '../MenuButton/MenuButton';
 export const useSplitButton_unstable = (props, ref) => {
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block = false,
     children,
     disabled = false,

package/lib/components/SplitButton/useSplitButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,QATI;AAUJ,IAAA,mBAVI;AAWJ,IAAA,KAAK,GAAG,SAXJ;AAYJ,IAAA,IAAI,GAAG;AAZH,MAaF,KAbJ;AAeA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAAb,CAA5C;AAYA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtB,CAArD,CA9BoB,CA8CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAjFM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance,\n    block = false,\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      block,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    block,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAJI;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,UATI;AAUJ,IAAA,QAVI;AAWJ,IAAA,mBAXI;AAYJ,IAAA,KAAK,GAAG,SAZJ;AAaJ,IAAA,IAAI,GAAG;AAbH,MAcF,KAdJ;AAgBA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAAb,CAA5C;AAYA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtB,CAArD,CA/BoB,CA+CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAlFM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n  props: SplitButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n  const {\n    appearance,\n    // eslint-disable-next-line deprecation/deprecation\n    block = false,\n    children,\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    menuButton,\n    menuIcon,\n    primaryActionButton,\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('splitButton-');\n\n  const menuButtonShorthand = resolveShorthand(menuButton, {\n    defaultProps: {\n      appearance,\n      disabled,\n      disabledFocusable,\n      menuIcon,\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n    defaultProps: {\n      appearance,\n      block,\n      children,\n      disabled,\n      disabledFocusable,\n      icon,\n      iconPosition,\n      id: baseId + '__primaryActionButton',\n      shape,\n      size,\n    },\n    required: true,\n  });\n\n  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n  // by the user.\n  if (\n    menuButtonShorthand &&\n    primaryActionButtonShorthand &&\n    !menuButtonShorthand['aria-label'] &&\n    !menuButtonShorthand['aria-labelledby']\n  ) {\n    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n  }\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    block,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      menuButton: MenuButton,\n      primaryActionButton: Button,\n    },\n\n    root: getNativeElementProps('div', { ref, ...props }),\n    menuButton: menuButtonShorthand,\n    primaryActionButton: primaryActionButtonShorthand,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButtonStyles.d.ts

@@ -1,3 +1,8 @@
-import type { SplitButtonState } from './SplitButton.types';
-export declare const splitButtonClassName = "fui-SplitButton";
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';
+export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
+/**
+ * @deprecated Use `splitButtonClassName.root` instead.
+ */
+export declare const splitButtonClassName: string;
 export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;

package/lib/components/SplitButton/useSplitButtonStyles.js

@@ -1,11 +1,16 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-export const splitButtonClassName = 'fui-SplitButton';
-const SplitButtonClassNames = {
-  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
-  menuButton: `${splitButtonClassName}-menuButton`
+export const splitButtonClassNames = {
+  root: 'fui-SplitButton',
+  menuButton: 'fui-SplitButton__menuButton',
+  primaryActionButton: 'fui-SplitButton__primaryActionButton'
 };
+/**
+ * @deprecated Use `splitButtonClassName.root` instead.
+ */
+
+export const splitButtonClassName = splitButtonClassNames.root;
 
 const useFocusStyles = /*#__PURE__*/__styles({
   "primaryActionButton": {
@@ -30,43 +35,48 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Brf1p80": "fsxf2b5",
     "qhf8xq": "f10pi13n",
     "ha4doy": "fmrv4ls",
-    "mfjwoh": ["fwj9yvy", "f1lzjiju"],
-    "ibxugx": ["f1a35zaw", "f1l6wyf7"],
-    "Bqvcgfq": ["f104opbk", "f147sopj"],
-    "Baxitl6": ["fxs6g7p", "f1moly3t"],
-    "zkjfwm": ["f1m1y7kk", "ff82swa"]
+    "kn2xc0": ["f14uur2j", "fc1btbj"],
+    "Bs76p8a": ["fye5tvs", "fc597qq"],
+    "cuxpm9": ["f1e8brtx", "fr36rk3"],
+    "Biffepf": ["fxp12j1", "f1m6nt2y"],
+    "Defnvf": ["fr7y8no", "f1dn0c6m"]
   },
   "block": {
     "a9b677": "fly5x3f"
   },
   "outline": {},
   "primary": {
-    "Bt6mj9": ["fptrtw7", "f51449u"],
-    "xhdd7j": ["f1n4yg8a", "fbebbjo"],
-    "Jxu9b0": ["fnmoi2n", "f1l3povx"]
+    "B1l9wao": ["f12j1tfo", "f1ufkr8r"],
+    "lcnrd8": ["f17lyyco", "f151o42i"],
+    "Brbpp8k": ["f1nb07eg", "fg8a8qi"]
   },
   "subtle": {
-    "Bt6mj9": ["fh2ci0", "f1us00qf"],
-    "xhdd7j": ["fj8butq", "fkv8iz"],
-    "Jxu9b0": ["fjmcta", "fm99moz"]
+    "B1l9wao": ["f1ysqkm5", "f10nbrj"],
+    "lcnrd8": ["fn44ryq", "fwhhltr"],
+    "Brbpp8k": ["fg8lp5p", "f1p6hj0a"]
   },
   "transparent": {
-    "Bt6mj9": ["fh2ci0", "f1us00qf"],
-    "xhdd7j": ["fj8butq", "fkv8iz"],
-    "Jxu9b0": ["fjmcta", "fm99moz"]
+    "B1l9wao": ["f1ysqkm5", "f10nbrj"],
+    "lcnrd8": ["fn44ryq", "fwhhltr"],
+    "Brbpp8k": ["fg8lp5p", "f1p6hj0a"]
   },
   "circular": {},
   "rounded": {},
   "square": {},
   "disabled": {
-    "Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
-    "xhdd7j": ["f3cl9o2", "f12vilfs"],
-    "Jxu9b0": ["f1lpnjjp", "f8nirj0"]
+    "B1l9wao": ["f10xrnr8", "f15nylwb"],
+    "lcnrd8": ["f11fwhjz", "f18vtcsx"],
+    "Brbpp8k": ["f31btwb", "fzgm9gq"]
+  },
+  "disabledHighContrast": {
+    "Bcsxniv": ["fj2q5vi", "f13tct40"],
+    "tl7e51": ["fb2mzc7", "f179dhpp"],
+    "mba178": ["f1ma39qa", "f1nzpdru"]
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".fwj9yvy .fui-SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f1lzjiju .fui-SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1a35zaw .fui-SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1l6wyf7 .fui-SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".f104opbk .fui-SplitButton-menuButton{border-left-width:0;}", ".f147sopj .fui-SplitButton-menuButton{border-right-width:0;}", ".fxs6g7p .fui-SplitButton-menuButton{border-top-left-radius:0;}", ".f1moly3t .fui-SplitButton-menuButton{border-top-right-radius:0;}", ".f1m1y7kk .fui-SplitButton-menuButton{border-bottom-left-radius:0;}", ".ff82swa .fui-SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".fptrtw7 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f51449u .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fh2ci0 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1us00qf .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1gu8nb8 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f7r8m4m .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
-  "h": [".f1n4yg8a:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fbebbjo:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fj8butq:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fkv8iz:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f3cl9o2:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f12vilfs:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
-  "a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f12j1tfo .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ufkr8r .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1ysqkm5 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f10nbrj .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "h": [".f17lyyco:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f151o42i:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1nb07eg:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fg8a8qi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fg8lp5p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1p6hj0a:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "t": ["@media (forced-colors: active){.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", "@media (forced-colors: active){.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}"]
 });
 
 export const useSplitButtonStyles_unstable = state => {
@@ -74,18 +84,19 @@ export const useSplitButtonStyles_unstable = state => {
   const focusStyles = useFocusStyles();
   const {
     appearance,
+    // eslint-disable-next-line deprecation/deprecation
     block,
     disabled,
     disabledFocusable
   } = state;
-  state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
+  state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
 
   if (state.menuButton) {
-    state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+    state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
   }
 
   if (state.primaryActionButton) {
-    state.primaryActionButton.className = mergeClasses(SplitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+    state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
   }
 
   return state;

package/lib/components/SplitButton/useSplitButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassName = 'fui-SplitButton';\n\nconst SplitButtonClassNames = {\n  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,\n  menuButton: `${splitButtonClassName}-menuButton`,\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base rootStyles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n  },\n\n  // Block rootStyles\n  block: {\n    width: '100%',\n  },\n\n  // Appearance variations\n  outline: {\n    /* No rootStyles */\n  },\n  primary: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundInverted,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n  },\n  subtle: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n  transparent: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled rootStyles\n  disabled: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, block, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassName,\n    rootStyles.base,\n    block && rootStyles.block,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      SplitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      SplitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAAhE;AAMP;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAG,qBAAqB,CAAC,IAAnD;;AAEP,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA+HA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAHI;AAIJ,IAAA,QAJI;AAKJ,IAAA;AALI,MAMF,KANJ;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBANb,EAOjC,KAAK,CAAC,IAAN,CAAW,SAPsB,CAAnC;;AAUA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAvCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n  root: 'fui-SplitButton',\n  menuButton: 'fui-SplitButton__menuButton',\n  primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/**\n * @deprecated Use `splitButtonClassName.root` instead.\n */\nexport const splitButtonClassName = splitButtonClassNames.root;\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    [`& .${splitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n  },\n\n  // Block styles\n  block: {\n    width: '100%',\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundInverted,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n  },\n  subtle: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n  transparent: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled styles\n  disabled: {\n    [`& .${splitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${splitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n          borderRightColor: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const {\n    appearance,\n    // eslint-disable-next-line deprecation/deprecation\n    block,\n    disabled,\n    disabledFocusable,\n  } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassNames.root,\n    rootStyles.base,\n    block && rootStyles.block,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      splitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      splitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/index.d.ts

@@ -2,4 +2,4 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+export { toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable, } from './useToggleButtonStyles';

package/lib/components/ToggleButton/index.js

@@ -2,5 +2,7 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+export {
+/* eslint-disable-next-line deprecation/deprecation */
+toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}
+{"version":3,"sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAd;AACA,cAAc,sBAAd;AACA,cAAc,sBAAd;AACA,cAAc,mBAAd;AACA;AACE;AACA,qBAFF,EAGE,sBAHF,EAIE,8BAJF,QAKO,yBALP","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport {\n  /* eslint-disable-next-line deprecation/deprecation */\n  toggleButtonClassName,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n} from './useToggleButtonStyles';\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/useToggleButton.d.ts

@@ -6,4 +6,4 @@ import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types'
  * @param props - User provided props to the ToggleButton component.
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
-export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
+export declare const useToggleButton_unstable: (props: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;

package/lib/components/ToggleButton/useToggleButton.js

@@ -1,5 +1,4 @@
-import { useControllableState } from '@fluentui/react-utilities';
-import * as React from 'react';
+import { useToggleState } from '../../utils/useToggleState';
 import { useButton_unstable } from '../Button/useButton';
 /**
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
@@ -8,45 +7,8 @@ import { useButton_unstable } from '../Button/useButton';
  * @param ref - User provided ref to be passed to the ToggleButton component.
  */
 
-export const useToggleButton_unstable = ({
-  checked,
-  defaultChecked,
-  ...props
-}, ref) => {
-  const {
-    disabled,
-    disabledFocusable
-  } = props;
+export const useToggleButton_unstable = (props, ref) => {
   const buttonState = useButton_unstable(props, ref);
-  const {
-    role,
-    onClick
-  } = buttonState.root;
-  const [checkedValue, setCheckedValue] = useControllableState({
-    state: checked,
-    defaultState: defaultChecked,
-    initialState: false
-  });
-  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
-  return { // Button state
-    ...buttonState,
-    // State calculated from a set of props
-    checked: checkedValue,
-    // Slots definition
-    root: { ...buttonState.root,
-      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
-      onClick: React.useCallback(ev => {
-        if (!disabled && !disabledFocusable) {
-          onClick === null || onClick === void 0 ? void 0 : onClick(ev);
-
-          if (ev.defaultPrevented) {
-            return;
-          }
-
-          setCheckedValue(!checkedValue);
-        }
-      }, [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick])
-    }
-  };
+  return useToggleState(props, buttonState);
 };
 //# sourceMappingURL=useToggleButton.js.map

package/lib/components/ToggleButton/useToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAMA,QAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,OAAO,EAAE,YALJ;AAOL;AACA,IAAA,IAAI,EAAE,EACJ,GAAG,WAAW,CAAC,IADX;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;AACnC,UAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,EAAH,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;;AAED,UAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD;AACF,OAXM,EAYP,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,EAA6D,OAA7D,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.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 useToggleButton_unstable = (\n  { checked, defaultChecked, ...props }: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { disabled, disabledFocusable } = props;\n  const buttonState = useButton_unstable(props, ref);\n  const { role, onClick } = buttonState.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  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    checked: checkedValue,\n\n    // Slots definition\n    root: {\n      ...buttonState.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: React.useCallback(\n        ev => {\n          if (!disabled && !disabledFocusable) {\n            onClick?.(ev);\n\n            if (ev.defaultPrevented) {\n              return;\n            }\n\n            setCheckedValue(!checkedValue);\n          }\n        },\n        [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick],\n      ),\n    },\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,SAAO,cAAc,CAAC,KAAD,EAAQ,WAAR,CAArB;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.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 useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/useToggleButtonStyles.d.ts

@@ -1,3 +1,11 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { ButtonSlots } from '../Button/Button.types';
 import type { ToggleButtonState } from './ToggleButton.types';
-export declare const toggleButtonClassName = "fui-ToggleButton";
+export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
+/**
+ * @deprecated Use `toggleButtonClassName.root` instead.
+ */
+export declare const toggleButtonClassName: string;
+export declare const useCheckedStyles: () => Record<"base" | "primary" | "outline" | "subtle" | "transparent" | "highContrast", string>;
+export declare const useDisabledStyles: () => Record<"base" | "primary" | "outline" | "subtle" | "transparent", string>;
 export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;