npm - @fluentui/react-button - Versions diffs - 9.0.0-rc.1 → 9.0.0-rc.5 - Mend

@fluentui/react-button 9.0.0-rc.1 → 9.0.0-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/lib/components/CompoundButton/useCompoundButtonStyles.js CHANGED Viewed

@@ -1,35 +1,39 @@
 import { shorthands, mergeClasses, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useButtonStyles_unstable } from '../Button/useButtonStyles';
-export const compoundButtonClassName = 'fui-CompoundButton';
-const CompoundButtonClassNames = {
-  secondaryContent: `${compoundButtonClassName}-secondaryContent`
-};
+export const compoundButtonClassNames = {
+  root: 'fui-CompoundButton',
+  icon: 'fui-CompoundButton__icon',
+  contentContainer: 'fui-CompoundButton__contentContainer',
+  secondaryContent: 'fui-CompoundButton__secondaryContent'
+}; // TODO temporary export to pass conformance test.
+export const compoundButtonClassName = compoundButtonClassNames.root;
 const useRootStyles = /*#__PURE__*/__styles({
   "base": {
     "i8kkvl": "f4akndk",
     "Belr9w4": "fe5j3v",
     "Bqenvij": "f11ysow2",
-    "Bma4kx5": "f900oq5",
-    "l15nfm": "f8rpug0",
-    "n4n7rj": "fre7xro"
+    "J657lq": "f1um431h",
+    "Jlnjib": "fte7hqw",
+    "Bwbbhw0": "f1k6hgp7"
   },
   "outline": {},
   "primary": {
-    "Bma4kx5": "f1ur7rb7",
-    "l15nfm": "f1itoici",
-    "n4n7rj": "f1uen3ov"
+    "J657lq": "foe7gw6",
+    "Jlnjib": "fvxlz81",
+    "Bwbbhw0": "fkgv316"
   },
   "subtle": {
-    "Bma4kx5": "f900oq5",
-    "l15nfm": "f1l9nom2",
-    "n4n7rj": "fvjq8kx"
+    "J657lq": "f1um431h",
+    "Jlnjib": "f1wn9xqz",
+    "Bwbbhw0": "f1hgk1d9"
   },
   "transparent": {
-    "Bma4kx5": "f900oq5",
-    "l15nfm": "f1l9nom2",
-    "n4n7rj": "fvjq8kx"
+    "J657lq": "f1um431h",
+    "Jlnjib": "f1wn9xqz",
+    "Bwbbhw0": "f1hgk1d9"
   },
   "small": {
     "z8tnut": "fp9bwmr",
@@ -56,14 +60,14 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Bg96gwp": "faaz57k"
   },
   "disabled": {
-    "Bma4kx5": "fj9njph",
-    "l15nfm": "fr13fpv",
-    "n4n7rj": "f1xrf5v0"
+    "J657lq": "f1rlv8bf",
+    "Jlnjib": "fd1dbtm",
+    "Bwbbhw0": "f1k9sois"
   }
 }, {
-  "d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f900oq5 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1ur7rb7 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1fow5ox{padding-bottom:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fp67ikv{padding-bottom:16px;}", ".fm4bm3s{padding-top:18px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fe2my4m{padding-bottom:20px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fj9njph .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "h": [".f8rpug0:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1itoici:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1l9nom2:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fr13fpv:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "a": [".fre7xro:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1uen3ov:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fvjq8kx:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1xrf5v0:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
+  "d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1fow5ox{padding-bottom:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fp67ikv{padding-bottom:16px;}", ".fm4bm3s{padding-top:18px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fe2my4m{padding-bottom:20px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
+  "h": [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
+  "a": [".f1k6hgp7:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fkgv316:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1hgk1d9:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1k9sois:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
 });
 const useRootIconOnlyStyles = /*#__PURE__*/__styles({
@@ -146,20 +150,19 @@ export const useCompoundButtonStyles_unstable = state => {
     iconOnly,
     size
   } = state;
-  state.root.className = mergeClasses(compoundButtonClassName, // Root styles
+  state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles
   rootStyles.base, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
   (disabled || disabledFocusable) && rootStyles.disabled, // Icon-only styles
   iconOnly && rootIconOnlyStyles[size], // User provided class name
   state.root.className);
+  state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, state.icon.className);
+    state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.icon.className);
   }
-  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);
   if (state.secondaryContent) {
-    state.secondaryContent.className = mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
   }
   useButtonStyles_unstable(state);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~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~~","sourceRoot":""}
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;AAIA,OAAO,MAAM,wBAAwB,GAAwC;AAC3E,EAAA,IAAI,EAAE,oBADqE;AAE3E,EAAA,IAAI,EAAE,0BAFqE;AAG3E,EAAA,gBAAgB,EAAE,sCAHyD;AAI3E,EAAA,gBAAgB,EAAE;AAJyD,CAAtE,C,CAOP;;AACA,OAAO,MAAM,uBAAuB,GAAG,wBAAwB,CAAC,IAAzD;;AAEP,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,wBAAwB,CAAC,IADQ,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,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,wBAAwB,CAAC,gBADoB,EAE7C,sBAAsB,CAAC,IAFsB,EAG7C,KAAK,CAAC,gBAAN,CAAuB,SAHsB,CAA/C;;AAMA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,wBAAwB,CAAC,IAA1B,EAAgC,UAAU,CAAC,IAA3C,EAAiD,KAAK,CAAC,IAAN,CAAW,SAA5D,CAAnC;AACD;;AAED,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,CAjDM","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// TODO temporary export to pass conformance test.\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 ':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 compoundButtonClassNames.root,\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 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/MenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AAEA,SAAO,yBAAyB,CAAC,KAAD,CAAhC,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
1	+ {"version":3,"sources":["components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AAEA,SAAO,yBAAyB,CAAC,KAAD,CAAhC,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n MenuButtons are buttons that handle opening and closing a menu when they are triggered.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"sourceRoot":"../src/"}

package/lib/components/MenuButton/MenuButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuButton.types.js","sourceRoot":"","sources":["~~../../../src/~~components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":""}
1	+ {"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /*\n Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components' \| 'iconPosition'>;\n"]}

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

@@ -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 CHANGED Viewed

@@ -2,5 +2,5 @@ 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';
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../src/~~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"}
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,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}

package/lib/components/MenuButton/renderMenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,iBAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAHvD,CADF;AAOD,CAXM","sourceRoot":""}
1	+ {"version":3,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,iBAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAHvD,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/*\n Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n const { slots, slotProps } = getSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && slotProps.root.children}\n {(!iconOnly \|\| !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuButton/useMenuButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CACpC;AAAE,EAAA,QAAF;AAAY,KAAG;AAAf,CADoC,EAEpC,GAFoC,KAGjB;AACnB,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KARP;AAcL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;AADE,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAdrB,GAAP;AAqBD,CA1BM","sourceRoot":""}
1	+ {"version":3,"sources":["components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CACpC;AAAE,EAAA,QAAF;AAAY,KAAG;AAAf,CADoC,EAEpC,GAFoC,KAGjB;AACnB,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KARP;AAcL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;AADE,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAdrB,GAAP;AAqBD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/*\n Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n { menuIcon, ...props }: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): MenuButtonState => {\n const buttonState = useButton_unstable(props, ref);\n return {\n // Button state\n ...buttonState,\n\n // State calculated from a set of props\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n menuIcon: 'span',\n },\n\n menuIcon: resolveShorthand(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n required: true,\n }),\n };\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,3 +1,5 @@
-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>;
+export declare const menuButtonClassName: string;
 export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;

package/lib/components/MenuButton/useMenuButtonStyles.js CHANGED Viewed

@@ -1,6 +1,12 @@
 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'
+}; // TODO temporary export to pass conformance test.
+export const menuButtonClassName = menuButtonClassNames.root;
 const useMenuIconStyles = /*#__PURE__*/__styles({
   "small": {
@@ -24,7 +30,11 @@ 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);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~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~~","sourceRoot":""}
1	+ {"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,C,CAMP;;AACA,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,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,CAhBM","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// TODO temporary export to pass conformance test.\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(menuIconStyles[state.size], state.menuIcon.className);\n }\n\n useButtonStyles_unstable(state as ButtonState);\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/SplitButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
1	+ {"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton.types.js","sourceRoot":"","sources":["~~../../../src/~~components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":""}
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"]}

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

@@ -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 CHANGED Viewed

@@ -2,5 +2,5 @@ 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';
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../src/~~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"}
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,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}

package/lib/components/SplitButton/renderSplitButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM","sourceRoot":""}
1	+ {"version":3,"sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/*\n Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n const { slots, slotProps } = getSlots<SplitButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButton.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
 import { Button } from '../Button/Button';
 import { MenuButton } from '../MenuButton/MenuButton';
 /**
@@ -17,18 +17,22 @@ export const useSplitButton_unstable = (props, ref) => {
     icon,
     iconPosition = 'before',
     menuButton,
+    menuIcon,
     primaryActionButton,
     shape = 'rounded',
     size = 'medium'
   } = props;
+  const baseId = useId('splitButton-');
   const menuButtonShorthand = resolveShorthand(menuButton, {
     defaultProps: {
       appearance,
       disabled,
       disabledFocusable,
+      menuIcon,
       shape,
       size
-    }
+    },
+    required: true
   });
   const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
     defaultProps: {
@@ -39,10 +43,18 @@ export const useSplitButton_unstable = (props, ref) => {
       disabledFocusable,
       icon,
       iconPosition,
+      id: baseId + '__primaryActionButton',
       shape,
       size
-    }
-  });
+    },
+    required: true
+  }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
+  // by the user.
+  if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
+    menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
+  }
   return {
     // Props passed at the top-level
     appearance,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,~~QAAwD~~,~~2BAAxD~~;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,~~mBATI~~;AAUJ,IAAA,KAAK,GAAG,~~SAVJ~~;~~AAWJ~~,IAAA,IAAI,GAAG;~~AAXH~~,~~MAYF~~,~~KAZJ~~;~~AAaA~~,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,~~KAJY~~;AAKZ,MAAA;~~AALY~~;~~AADyC~~,GAAb,CAA5C;~~AASA~~,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,~~KARY~~;AASZ,MAAA;~~AATY~~;~~AAD2D~~,GAAtB,CAArD;~~AAcA~~,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,~~CA7DM~~","sourceRoot":""}
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/"}

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

@@ -1,3 +1,5 @@
-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>;
+export declare const splitButtonClassName: string;
 export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;

package/lib/components/SplitButton/useSplitButtonStyles.js CHANGED Viewed

@@ -1,11 +1,13 @@
 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'
+}; // TODO temporary export to pass conformance test.
+export const splitButtonClassName = splitButtonClassNames.root;
 const useFocusStyles = /*#__PURE__*/__styles({
   "primaryActionButton": {
@@ -30,43 +32,43 @@ 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"],
+    "stbsuy": ["f9de47b", "f15bxlxw"]
   },
   "subtle": {
-    "Bt6mj9": ["fh2ci0", "f1us00qf"],
-    "xhdd7j": ["fj8butq", "fkv8iz"],
-    "Jxu9b0": ["fjmcta", "fm99moz"]
+    "B1l9wao": ["f1ysqkm5", "f10nbrj"],
+    "lcnrd8": ["fn44ryq", "fwhhltr"],
+    "stbsuy": ["f1tjq2zb", "ffaxdki"]
   },
   "transparent": {
-    "Bt6mj9": ["fh2ci0", "f1us00qf"],
-    "xhdd7j": ["fj8butq", "fkv8iz"],
-    "Jxu9b0": ["fjmcta", "fm99moz"]
+    "B1l9wao": ["f1ysqkm5", "f10nbrj"],
+    "lcnrd8": ["fn44ryq", "fwhhltr"],
+    "stbsuy": ["f1tjq2zb", "ffaxdki"]
   },
   "circular": {},
   "rounded": {},
   "square": {},
   "disabled": {
-    "Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
-    "xhdd7j": ["f3cl9o2", "f12vilfs"],
-    "Jxu9b0": ["f1lpnjjp", "f8nirj0"]
+    "B1l9wao": ["f10xrnr8", "f15nylwb"],
+    "lcnrd8": ["f11fwhjz", "f18vtcsx"],
+    "stbsuy": ["f6z6t0e", "f17tedwu"]
   }
 }, {
-  "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);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .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);}"],
+  "a": [".f9de47b:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f15bxlxw:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1tjq2zb:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".ffaxdki:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f6z6t0e:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f17tedwu:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
 });
 export const useSplitButtonStyles_unstable = state => {
@@ -78,14 +80,14 @@ export const useSplitButtonStyles_unstable = state => {
     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, 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~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","sourceRoot":""}
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;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAAhE,C,CAMP;;AACA,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,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,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,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 { 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// TODO temporary export to pass conformance test.\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 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 splitButtonClassNames.root,\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/"}

package/lib/components/ToggleButton/ToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
1	+ {"version":3,"sources":["components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/ToggleButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleButton.types.js","sourceRoot":"","sources":["~~../../../src/~~components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":""}
1	+ {"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\ntype ToggleButtonCommons = {\n /*\n Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n * @default false\n /\n checked: boolean;\n};\n\nexport type ToggleButtonProps = ButtonProps &\n Partial<ToggleButtonCommons> & {\n /\n Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n * @default false\n */\n defaultChecked?: boolean;\n };\n\nexport type ToggleButtonState = ButtonState & ToggleButtonCommons;\n"]}

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

@@ -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 CHANGED Viewed

@@ -2,5 +2,5 @@ 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';
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../src/~~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"}
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,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}

package/lib/components/ToggleButton/renderToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["~~../../../src/~~components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}
1	+ {"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}

package/lib/components/ToggleButton/useToggleButton.js CHANGED Viewed

@@ -34,18 +34,18 @@ export const useToggleButton_unstable = ({
     checked: checkedValue,
     // Slots definition
     root: { ...buttonState.root,
-      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !disabled && !disabledFocusable && checkedValue,
+      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
       onClick: React.useCallback(ev => {
-        if (onClick) {
-          onClick(ev);
+        if (!disabled && !disabledFocusable) {
+          onClick === null || onClick === void 0 ? void 0 : onClick(ev);
           if (ev.defaultPrevented) {
             return;
           }
-        }
-        setCheckedValue(!checkedValue);
-      }, [checkedValue, setCheckedValue, onClick])
+          setCheckedValue(!checkedValue);
+        }
+      }, [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick])
     }
   };
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../../../src/~~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,~~CAAC,QAAD,IAAa,CAAC,iBAAd,IAAmC,YAFvF~~;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,~~OAAJ~~,~~EAAa~~;~~AACX~~,UAAA,OAAO,~~CAAC~~,~~EAAD~~,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD~~;AACF~~;;AAED,~~QAAA~~,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,OAXM,EAYP,CAAC,YAAD,EAAe,~~eAAf~~,~~EAAgC~~,~~OAAhC~~,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM","sourceRoot":""}
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/"}