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

package/lib/components/Button/useButtonStyles.js

@@ -1,8 +1,9 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; // TODO: These are named in design specs but not hoisted to global/alias yet.
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const buttonClassName = 'fui-Button'; // TODO: These are named in design specs but not hoisted to global/alias yet.
 //       We're tracking these here to determine how we can hoist them.
 
-export var buttonSpacing = {
+export const buttonSpacing = {
   smallest: '2px',
   smaller: '4px',
   small: '6px',
@@ -11,7 +12,7 @@ export var buttonSpacing = {
   larger: '16px'
 };
 
-var useRootStyles = /*#__PURE__*/__styles({
+const useRootStyles = /*#__PURE__*/__styles({
   "base": {
     "Bt984gj": "f122n59",
     "mc9l5x": "ftuwxu6",
@@ -177,7 +178,7 @@ var useRootStyles = /*#__PURE__*/__styles({
   "a": [".fzgy25m:active{background:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fb0xa7e:active{outline-style:none;}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".f4ihffn:active{background:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1be4e1d:active{background:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
 });
 
-var useRootDisabledStyles = /*#__PURE__*/__styles({
+const useRootDisabledStyles = /*#__PURE__*/__styles({
   "base": {
     "ayd6f0": "fqst6tg",
     "g2u3we": "f1jj8ep1",
@@ -260,7 +261,7 @@ var useRootDisabledStyles = /*#__PURE__*/__styles({
   "a": [".fkqx3al:active{background:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".fq67hom:active{cursor:not-allowed;}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f17oliv9:active{background:none;}"]
 });
 
-var useRootFocusStyles = /*#__PURE__*/__styles({
+const useRootFocusStyles = /*#__PURE__*/__styles({
   "base": {
     "B486eqv": "f2hkw1w",
     "Bnmjwt4": "flfsvnh",
@@ -270,7 +271,7 @@ var useRootFocusStyles = /*#__PURE__*/__styles({
     "B32s92o": "f4mghqd",
     "B5hngm5": "fhcq1yo",
     "Bh48x57": "f19j8a82",
-    "D4py6b": ["f9ycirn", "fj27422"],
+    "D4py6b": "f9ycirn",
     "Bgwpjed": "fpt6wn7"
   },
   "circular": {
@@ -284,7 +285,7 @@ var useRootFocusStyles = /*#__PURE__*/__styles({
     "Jopkrh": ["fhoxsto", "f19qf7vm"],
     "hhrs2v": "f1tl0rof",
     "B7jbng7": ["f19qf7vm", "fhoxsto"],
-    "D4py6b": ["f15m8qn2", "f5p9mqa"]
+    "D4py6b": "f15m8qn2"
   },
   "square": {
     "B486eqv": "f2hkw1w",
@@ -304,10 +305,10 @@ var useRootFocusStyles = /*#__PURE__*/__styles({
   }
 }, {
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
-  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f4mghqd:focus{outline-width:2px;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fj27422:focus{box-shadow:var(--shadow-4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f6dohij:focus{border-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f5p9mqa:focus{box-shadow:var(--shadow-2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1x6jsgk:focus{border-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1cqgkc0:focus{border-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .fhf9ij9:focus{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fnsjjqm:focus{border-radius:var(--borderRadiusLarge);}"]
+  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f4mghqd:focus{outline-width:2px;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f6dohij:focus{border-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1x6jsgk:focus{border-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1cqgkc0:focus{border-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .fhf9ij9:focus{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fnsjjqm:focus{border-radius:var(--borderRadiusLarge);}"]
 });
 
-var useRootIconOnlyStyles = /*#__PURE__*/__styles({
+const useRootIconOnlyStyles = /*#__PURE__*/__styles({
   "small": {
     "z8tnut": "f10ra9hq",
     "z189sj": ["f8wuabp", "fycuoez"],
@@ -336,7 +337,7 @@ var useRootIconOnlyStyles = /*#__PURE__*/__styles({
   "d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f107v6xj{min-width:28px;}", ".f17iyk3w{max-width:28px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
 });
 
-var useIconStyles = /*#__PURE__*/__styles({
+const useIconStyles = /*#__PURE__*/__styles({
   "base": {
     "Bt984gj": "f122n59",
     "mc9l5x": "ftuwxu6",
@@ -361,20 +362,22 @@ var useIconStyles = /*#__PURE__*/__styles({
   "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
 });
 
-export var useButtonStyles = function (state) {
-  var rootStyles = useRootStyles();
-  var rootDisabledStyles = useRootDisabledStyles();
-  var rootFocusStyles = useRootFocusStyles();
-  var rootIconOnlyStyles = useRootIconOnlyStyles();
-  var iconStyles = useIconStyles();
-  var appearance = state.appearance,
-      block = state.block,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable,
-      iconOnly = state.iconOnly,
-      shape = state.shape,
-      size = state.size;
-  state.root.className = mergeClasses( // Root styles
+export const useButtonStyles = state => {
+  const rootStyles = useRootStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const rootFocusStyles = useRootFocusStyles();
+  const rootIconOnlyStyles = useRootIconOnlyStyles();
+  const iconStyles = useIconStyles();
+  const {
+    appearance,
+    block,
+    disabled,
+    disabledFocusable,
+    iconOnly,
+    shape,
+    size
+  } = state;
+  state.root.className = mergeClasses(buttonClassName, // Root styles
   rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
   (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
   rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles

package/lib/components/Button/useButtonStyles.js.map

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

package/lib/components/CompoundButton/CompoundButton.js

@@ -6,8 +6,8 @@ import { useCompoundButtonStyles } from './useCompoundButtonStyles';
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
 
-export var CompoundButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCompoundButton(props, ref);
+export const CompoundButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCompoundButton(props, ref);
   useCompoundButtonStyles(state);
   return renderCompoundButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,uBAAT,QAAwC,2BAAxC;AAIA;;AAEG;;AACH,OAAO,IAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B,CALkG,CAMlG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,uBAAT,QAAwC,2BAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B,CALsG,CAMtG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourceRoot":""}

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

@@ -2,4 +2,4 @@ export * from './CompoundButton';
 export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
-export { useCompoundButtonStyles } from './useCompoundButtonStyles';
+export { compoundButtonClassName, useCompoundButtonStyles } from './useCompoundButtonStyles';

package/lib/components/CompoundButton/index.js

@@ -2,5 +2,5 @@ export * from './CompoundButton';
 export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
-export { useCompoundButtonStyles } from './useCompoundButtonStyles';
+export { compoundButtonClassName, useCompoundButtonStyles } from './useCompoundButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC"}

package/lib/components/CompoundButton/renderCompoundButton.js

@@ -1,17 +1,18 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
 
-export var renderCompoundButton = function (state) {
-  var _a = getSlots(state, ['root', 'contentContainer', 'icon', 'secondaryContent']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  var iconOnly = state.iconOnly,
-      iconPosition = state.iconPosition;
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), iconPosition !== 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, __assign({}, slotProps.contentContainer), slotProps.root.children, /*#__PURE__*/React.createElement(slots.secondaryContent, __assign({}, slotProps.secondaryContent))), iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
+export const renderCompoundButton = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state, ['root', 'contentContainer', 'icon', 'secondaryContent']);
+  const {
+    iconOnly,
+    iconPosition
+  } = state;
+  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), iconPosition !== 'after' && /*#__PURE__*/React.createElement(slots.icon, Object.assign({}, slotProps.icon)), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, Object.assign({}, slotProps.contentContainer), slotProps.root.children, /*#__PURE__*/React.createElement(slots.secondaryContent, Object.assign({}, slotProps.secondaryContent))), iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, Object.assign({}, slotProps.icon)));
 };
 //# sourceMappingURL=renderCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,QAAQ,CAAsB,KAAtB,EAA6B,CAChE,MADgE,EAEhE,kBAFgE,EAGhE,MAHgE,EAIhE,kBAJgE,CAA7B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAME,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAHJ,EAQG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAR/B,CADF;AAYD,CArBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA+B;AACjE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,EAA6B,CAChE,MADgE,EAEhE,kBAFgE,EAGhE,MAHgE,EAIhE,kBAJgE,CAA7B,CAArC;AAMA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAHJ,EAQG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAR/B,CADF;AAYD,CArBM","sourceRoot":""}

package/lib/components/CompoundButton/useCompoundButton.js

@@ -1,4 +1,3 @@
-import { __assign, __rest } from "tslib";
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { useButton } from '../Button/index';
 /**
@@ -7,12 +6,13 @@ import { useButton } from '../Button/index';
  * @param ref - User provided ref to be passed to the CompoundButton component.
  */
 
-export var useCompoundButton = function (_a, ref) {
-  var contentContainer = _a.contentContainer,
-      secondaryContent = _a.secondaryContent,
-      props = __rest(_a, ["contentContainer", "secondaryContent"]);
-
-  return __assign(__assign({}, useButton(props, ref)), {
+export const useCompoundButton = ({
+  contentContainer,
+  secondaryContent,
+  ...props
+}, ref) => {
+  return { // Button state
+    ...useButton(props, ref),
     // Slots definition
     components: {
       root: 'button',
@@ -24,6 +24,6 @@ export var useCompoundButton = function (_a, ref) {
       required: true
     }),
     secondaryContent: resolveShorthand(secondaryContent)
-  });
+  };
 };
 //# sourceMappingURL=useCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,SAAT,QAA0B,iBAA1B;AAEA;;;;AAIG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAC/B,EAD+B,EAE/B,GAF+B,EAEsB;AADnD,MAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAhB;AAAA,MAAkB,gBAAgB,GAAA,EAAA,CAAA,gBAAlC;AAAA,MAAuC,KAAK,GAAA,MAAA,CAAA,EAAA,EAA9C,CAAA,kBAAA,EAAA,kBAAA,CAA8C,CAA5C;;AAGF,SAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAEK,SAAS,CAAC,KAAD,EAAQ,GAAR,CAFd,CAAA,EAE0B;AAExB;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KAHY;AASxB,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnB,CATV;AAUxB,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;AAVV,GAF1B,CAAA;AAcD,CAlBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,SAAT,QAA0B,iBAA1B;AAEA;;;;AAIG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAC/B;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CAD+B,EAE/B,GAF+B,KAGR;AACvB,SAAO,EACL;AACA,OAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAFP;AAIL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALP;AAWL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnB,CAX7B;AAYL,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;AAZ7B,GAAP;AAcD,CAlBM","sourceRoot":""}

package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts

@@ -1,2 +1,3 @@
 import type { CompoundButtonState } from './CompoundButton.types';
+export declare const compoundButtonClassName = "fui-CompoundButton";
 export declare const useCompoundButtonStyles: (state: CompoundButtonState) => CompoundButtonState;

package/lib/components/CompoundButton/useCompoundButtonStyles.js

@@ -1,32 +1,33 @@
 import { mergeClasses, __styles } from '@fluentui/react-make-styles';
 import { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';
-var CompoundButtonClassNames = {
-  secondaryContent: 'CompoundButton-secondaryContent'
+export const compoundButtonClassName = 'fui-CompoundButton';
+const CompoundButtonClassNames = {
+  secondaryContent: `${compoundButtonClassName}-secondaryContent`
 };
 
-var useRootStyles = /*#__PURE__*/__styles({
+const useRootStyles = /*#__PURE__*/__styles({
   "base": {
     "rmohyg": "fsbu5mz",
     "Bqenvij": "f11ysow2",
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f1b73140",
-    "B7j81dy": "f19sbf7w"
+    "Bma4kx5": "f900oq5",
+    "l15nfm": "f8rpug0",
+    "n4n7rj": "fre7xro"
   },
   "outline": {},
   "primary": {
-    "Bekya5a": "f1wrmfx5",
-    "Bi863bl": "fl6im4w",
-    "B7j81dy": "f1y0ndy"
+    "Bma4kx5": "f1ur7rb7",
+    "l15nfm": "f1itoici",
+    "n4n7rj": "f1uen3ov"
   },
   "subtle": {
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f182e9fe",
-    "B7j81dy": "fdrkfd0"
+    "Bma4kx5": "f900oq5",
+    "l15nfm": "f1l9nom2",
+    "n4n7rj": "fvjq8kx"
   },
   "transparent": {
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f182e9fe",
-    "B7j81dy": "fdrkfd0"
+    "Bma4kx5": "f900oq5",
+    "l15nfm": "f1l9nom2",
+    "n4n7rj": "fvjq8kx"
   },
   "small": {
     "z8tnut": "fp9bwmr",
@@ -53,17 +54,17 @@ var useRootStyles = /*#__PURE__*/__styles({
     "Bg96gwp": "faaz57k"
   },
   "disabled": {
-    "Bekya5a": "f1ygg8x6",
-    "Bi863bl": "fhtktt2",
-    "B7j81dy": "f1v2jbe6"
+    "Bma4kx5": "fj9njph",
+    "l15nfm": "fr13fpv",
+    "n4n7rj": "f1xrf5v0"
   }
 }, {
-  "d": [".fsbu5mz{gap:12px;}", ".f11ysow2{height:auto;}", ".f1smw4j4 .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1wrmfx5 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1ygg8x6 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "h": [".f1b73140:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".fl6im4w:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f182e9fe:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fhtktt2:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "a": [".f19sbf7w:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1y0ndy:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fdrkfd0:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1v2jbe6:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
+  "d": [".fsbu5mz{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;}", ".f150uoa4{padding-bottom:8px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".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);}"]
 });
 
-var useRootIconOnlyStyles = /*#__PURE__*/__styles({
+const useRootIconOnlyStyles = /*#__PURE__*/__styles({
   "small": {
     "z8tnut": "f10ra9hq",
     "z189sj": ["f8wuabp", "fycuoez"],
@@ -92,7 +93,7 @@ var useRootIconOnlyStyles = /*#__PURE__*/__styles({
   "d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fww51uw{max-width:56px;}", ".f1qhsl2h{min-width:56px;}"]
 });
 
-var useIconStyles = /*#__PURE__*/__styles({
+const useIconStyles = /*#__PURE__*/__styles({
   "base": {
     "Be2twd7": "fndrnj9",
     "Bqenvij": "fbhnoac",
@@ -102,7 +103,7 @@ var useIconStyles = /*#__PURE__*/__styles({
   "d": [".fndrnj9{font-size:40px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}"]
 });
 
-var useContentContainerStyles = /*#__PURE__*/__styles({
+const useContentContainerStyles = /*#__PURE__*/__styles({
   "base": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1vx9l62",
@@ -112,7 +113,7 @@ var useContentContainerStyles = /*#__PURE__*/__styles({
   "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}"]
 });
 
-var useSecondaryContentStyles = /*#__PURE__*/__styles({
+const useSecondaryContentStyles = /*#__PURE__*/__styles({
   "base": {
     "Bg96gwp": "flkuc6h",
     "B6of3ja": "fvjh0tl",
@@ -131,18 +132,20 @@ var useSecondaryContentStyles = /*#__PURE__*/__styles({
   "d": [".flkuc6h{line-height:100%;}", ".fvjh0tl{margin-top:4px;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
 });
 
-export var useCompoundButtonStyles = function (state) {
-  var rootStyles = useRootStyles();
-  var rootIconOnlyStyles = useRootIconOnlyStyles();
-  var iconStyles = useIconStyles();
-  var contentContainerStyles = useContentContainerStyles();
-  var secondaryContentStyles = useSecondaryContentStyles();
-  var appearance = state.appearance,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable,
-      iconOnly = state.iconOnly,
-      size = state.size;
-  state.root.className = mergeClasses( // Root styles
+export const useCompoundButtonStyles = state => {
+  const rootStyles = useRootStyles();
+  const rootIconOnlyStyles = useRootIconOnlyStyles();
+  const iconStyles = useIconStyles();
+  const contentContainerStyles = useContentContainerStyles();
+  const secondaryContentStyles = useSecondaryContentStyles();
+  const {
+    appearance,
+    disabled,
+    disabledFocusable,
+    iconOnly,
+    size
+  } = state;
+  state.root.className = mergeClasses(compoundButtonClassName, // 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

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

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

package/lib/components/MenuButton/MenuButton.js

@@ -6,8 +6,8 @@ import { useMenuButtonStyles } from './useMenuButtonStyles';
  * MenuButtons are buttons that handle opening and closing a menu when they are triggered.
  */
 
-export var MenuButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useMenuButton(props, ref);
+export const MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useMenuButton(props, ref);
   useMenuButtonStyles(state);
   return renderMenuButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,IAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AAEA,SAAO,gBAAgB,CAAC,KAAD,CAAvB,CAL0F,CAM1F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AAEA,SAAO,gBAAgB,CAAC,KAAD,CAAvB,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}

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

@@ -1,6 +1,9 @@
-import type { MenuTriggerChildProps } from '@fluentui/react-menu';
+import * as React from 'react';
 import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
+declare type MenuTriggerChildProps = Pick<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'aria-expanded' | 'id'> & {
+    ref?: React.Ref<never>;
+};
 export declare type MenuButtonSlots = ButtonSlots & {
     /**
      * Menu icon that indicates that this button has a menu that can be expanded.
@@ -9,3 +12,4 @@ export declare type MenuButtonSlots = ButtonSlots & {
 };
 export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>> & Partial<MenuTriggerChildProps>;
 export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
+export {};

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 { useMenuButtonStyles } from './useMenuButtonStyles';
+export { menuButtonClassName, useMenuButtonStyles } from './useMenuButtonStyles';

package/lib/components/MenuButton/index.js

@@ -2,5 +2,5 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { useMenuButtonStyles } from './useMenuButtonStyles';
+export { menuButtonClassName, useMenuButtonStyles } from './useMenuButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -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,MAAM,uBAAuB,CAAC"}
+{"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,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/components/MenuButton/renderMenuButton.js

@@ -1,17 +1,18 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
 
-export var renderMenuButton = function (state) {
-  var _a = getSlots(state, ['root', 'icon', 'menuIcon']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  var icon = state.icon,
-      iconOnly = state.iconOnly;
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && /*#__PURE__*/React.createElement(slots.menuIcon, __assign({}, slotProps.menuIcon)));
+export const renderMenuButton = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state, ['root', 'icon', 'menuIcon']);
+  const {
+    icon,
+    iconOnly
+  } = state;
+  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.icon, Object.assign({}, slotProps.icon)), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && /*#__PURE__*/React.createElement(slots.menuIcon, Object.assign({}, slotProps.menuIcon)));
 };
 //# sourceMappingURL=renderMenuButton.js.map

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

@@ -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,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,QAAQ,CAAkB,KAAlB,EAAyB,CAAC,MAAD,EAAS,MAAT,EAAiB,UAAjB,CAAzB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,IAAI,GAAe,KAAK,CAApB,IAAJ;AAAA,MAAM,QAAQ,GAAK,KAAK,CAAV,QAAd;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,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,kBAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHrC,CADF;AAOD,CAXM","sourceRoot":""}
+{"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,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,CAAC,MAAD,EAAS,MAAT,EAAiB,UAAjB,CAAzB,CAArC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,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,kBAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHrC,CADF;AAOD,CAXM","sourceRoot":""}

package/lib/components/MenuButton/useMenuButton.js

@@ -1,4 +1,3 @@
-import { __assign, __rest } from "tslib";
 import * as React from 'react';
 import { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';
 import { resolveShorthand } from '@fluentui/react-utilities';
@@ -7,12 +6,13 @@ import { useButton } from '../Button/index';
  * Given user props, returns the final state for a MenuButton.
  */
 
-export var useMenuButton = function (_a, ref) {
-  var menuIcon = _a.menuIcon,
-      props = __rest(_a, ["menuIcon"]);
-
-  var buttonState = useButton(props, ref);
-  return __assign(__assign({}, buttonState), {
+export const useMenuButton = ({
+  menuIcon,
+  ...props
+}, ref) => {
+  const buttonState = useButton(props, ref);
+  return { // Button state
+    ...buttonState,
     // State calculated from a set of props
     iconOnly: Boolean(!props.children),
     // Slots definition
@@ -27,6 +27,6 @@ export var useMenuButton = function (_a, ref) {
       },
       required: true
     })
-  });
+  };
 };
 //# sourceMappingURL=useMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,oBAA/B,QAA2D,uBAA3D;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,SAAT,QAA0B,iBAA1B;AAGA;;AAEG;;AACH,OAAO,IAAM,aAAa,GAAG,UAC3B,EAD2B,EAE3B,GAF2B,EAE0B;AADnD,MAAA,QAAQ,GAAA,EAAA,CAAA,QAAR;AAAA,MAAa,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,CAAA,UAAA,CAAoB,CAAlB;;AAGF,MAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACA,SAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAEK,WAFL,CAAA,EAEgB;AAEd;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CAHH;AAKd;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KANE;AAYd,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,EAAE,WAAW,CAAC,IAAZ,KAAqB,OAArB,gBAA+B,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAA/B,gBAA0D,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB;AADxD,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAZZ,GAFhB,CAAA;AAqBD,CA1BM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,oBAA/B,QAA2D,uBAA3D;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,SAAT,QAA0B,iBAA1B;AAGA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,CAC3B;AAAE,EAAA,QAAF;AAAY,KAAG;AAAf,CAD2B,EAE3B,GAF2B,KAGR;AACnB,QAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;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,WAAW,CAAC,IAAZ,KAAqB,OAArB,gBAA+B,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAA/B,gBAA0D,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB;AADxD,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAdrB,GAAP;AAqBD,CA1BM","sourceRoot":""}

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

@@ -1,2 +1,3 @@
 import type { MenuButtonState } from './MenuButton.types';
+export declare const menuButtonClassName = "fui-MenuButton";
 export declare const useMenuButtonStyles: (state: MenuButtonState) => MenuButtonState;

package/lib/components/MenuButton/useMenuButtonStyles.js

@@ -1,7 +1,8 @@
 import { mergeClasses, __styles } from '@fluentui/react-make-styles';
 import { useButtonStyles } from '../Button/useButtonStyles';
+export const menuButtonClassName = 'fui-MenuButton';
 
-var useMenuIconStyles = /*#__PURE__*/__styles({
+const useMenuIconStyles = /*#__PURE__*/__styles({
   "small": {
     "Be2twd7": "fe5j1ua",
     "Bqenvij": "fjamq6b",
@@ -21,8 +22,9 @@ var useMenuIconStyles = /*#__PURE__*/__styles({
   "d": [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
 });
 
-export var useMenuButtonStyles = function (state) {
-  var menuIconStyles = useMenuIconStyles();
+export const useMenuButtonStyles = state => {
+  const menuIconStyles = useMenuIconStyles();
+  state.root.className = mergeClasses(menuButtonClassName, state.root.className);
 
   if (state.menuIcon) {
     state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AAEA,SAAS,eAAT,QAAgC,2BAAhC;;AAGA,IAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,cAAc,GAAG,iBAAiB,EAAxC;;AACA,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,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AAEA,SAAS,eAAT,QAAgC,2BAAhC;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,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,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,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAZM","sourceRoot":""}