@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

package/lib/components/CompoundButton/useCompoundButton.js

@@ -1,32 +1,29 @@
-import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { useButtonState } from '../Button/useButtonState';
-import { renderCompoundButton } from './renderCompoundButton';
+import { __assign, __rest } from "tslib";
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useButton } from '../Button/index';
 /**
- * Consts listing which props are shorthand props.
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the CompoundButton component.
+ * @param ref - User provided ref to be passed to the CompoundButton component.
  */
-export var compoundButtonShorthandProps = ['icon', 'loader', 'content', 'contentContainer', 'secondaryContent'];
-var mergeProps = makeMergeProps({
-    deepMerge: compoundButtonShorthandProps,
-});
-/**
- * Given user props, returns state and render function for a Button.
- */
-export var useCompoundButton = function (props, ref, defaultProps) {
-    // Ensure that the `ref` prop can be used by other things (like useFocusRects) to refer to the root.
-    // NOTE: We are assuming refs should not mutate to undefined. Either they are passed or not.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var resolvedRef = ref || React.useRef();
-    var state = mergeProps({
-        ref: resolvedRef,
-        as: 'button',
-        icon: { as: 'span' },
-        content: { as: 'span', children: props.children },
-        contentContainer: { as: 'span', children: null },
-        secondaryContent: { as: 'span' },
-        loader: { as: 'span' },
-    }, defaultProps, resolveShorthandProps(props, compoundButtonShorthandProps));
-    useButtonState(state);
-    return { state: state, render: renderCompoundButton };
+
+export var useCompoundButton = function (_a, ref) {
+  var contentContainer = _a.contentContainer,
+      secondaryContent = _a.secondaryContent,
+      props = __rest(_a, ["contentContainer", "secondaryContent"]);
+
+  return __assign(__assign({}, useButton(props, ref)), {
+    // Slots definition
+    components: {
+      root: 'button',
+      icon: 'span',
+      contentContainer: 'span',
+      secondaryContent: 'span'
+    },
+    contentContainer: resolveShorthand(contentContainer, {
+      required: true
+    }),
+    secondaryContent: resolveShorthand(secondaryContent)
+  });
 };
 //# sourceMappingURL=useCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCompoundButton.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/F,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;GAEG;AACH,MAAM,CAAC,IAAM,4BAA4B,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAElH,IAAM,UAAU,GAAG,cAAc,CAAC;IAChC,SAAS,EAAE,4BAA4B;CACxC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,KAA0B,EAC1B,GAA2B,EAC3B,YAAkC;IAElC,oGAAoG;IACpG,4FAA4F;IAC5F,sDAAsD;IACtD,IAAM,WAAW,GAAG,GAAG,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;IAC1C,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,WAAW;QAChB,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;QACpB,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;QACjD,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QAChD,gBAAgB,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;QAChC,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;KACvB,EACD,YAAY,EACZ,qBAAqB,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAC3D,CAAC;IAEF,cAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,EAAE,oBAAoB,EAAE,CAAC;AACjD,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { CompoundButtonProps } from './CompoundButton.types';\nimport { useButtonState } from '../Button/useButtonState';\nimport { renderCompoundButton } from './renderCompoundButton';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const compoundButtonShorthandProps = ['icon', 'loader', 'content', 'contentContainer', 'secondaryContent'];\n\nconst mergeProps = makeMergeProps({\n  deepMerge: compoundButtonShorthandProps,\n});\n\n/**\n * Given user props, returns state and render function for a Button.\n */\nexport const useCompoundButton = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CompoundButtonProps,\n) => {\n  // Ensure that the `ref` prop can be used by other things (like useFocusRects) to refer to the root.\n  // NOTE: We are assuming refs should not mutate to undefined. Either they are passed or not.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const resolvedRef = ref || React.useRef();\n  const state = mergeProps(\n    {\n      ref: resolvedRef,\n      as: 'button',\n      icon: { as: 'span' },\n      content: { as: 'span', children: props.children },\n      contentContainer: { as: 'span', children: null },\n      secondaryContent: { as: 'span' },\n      loader: { as: 'span' },\n    },\n    defaultProps,\n    resolveShorthandProps(props, compoundButtonShorthandProps),\n  );\n\n  useButtonState(state);\n\n  return { state, render: renderCompoundButton };\n};\n"]}
+{"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":""}

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

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

package/lib/components/CompoundButton/useCompoundButtonStyles.js

@@ -0,0 +1,164 @@
+import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';
+var CompoundButtonClassNames = {
+  secondaryContent: 'CompoundButton-secondaryContent'
+};
+
+var useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "rmohyg": "fsbu5mz",
+    "Bqenvij": "f11ysow2",
+    "Bekya5a": "f1smw4j4",
+    "Bi863bl": "f1b73140",
+    "B7j81dy": "f19sbf7w"
+  },
+  "outline": {},
+  "primary": {
+    "Bekya5a": "f1wrmfx5",
+    "Bi863bl": "fl6im4w",
+    "B7j81dy": "f1y0ndy"
+  },
+  "subtle": {
+    "Bekya5a": "f1smw4j4",
+    "Bi863bl": "f182e9fe",
+    "B7j81dy": "fdrkfd0"
+  },
+  "transparent": {
+    "Bekya5a": "f1smw4j4",
+    "Bi863bl": "f182e9fe",
+    "B7j81dy": "fdrkfd0"
+  },
+  "small": {
+    "z8tnut": "fp9bwmr",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f150uoa4",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "medium": {
+    "z8tnut": "f1kcqot9",
+    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "Byoj8tv": "fpe6lb7",
+    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi"
+  },
+  "large": {
+    "z8tnut": "fqag9an",
+    "z189sj": ["f1gbmcue", "f1rh9g5y"],
+    "Byoj8tv": "fp67ikv",
+    "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
+    "Be2twd7": "fod5ikn",
+    "Bg96gwp": "faaz57k"
+  },
+  "disabled": {
+    "Bekya5a": "f1ygg8x6",
+    "Bi863bl": "fhtktt2",
+    "B7j81dy": "f1v2jbe6"
+  }
+}, {
+  "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);}"]
+});
+
+var useRootIconOnlyStyles = /*#__PURE__*/__styles({
+  "small": {
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["f8wuabp", "fycuoez"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["fycuoez", "f8wuabp"],
+    "B2u0y6b": "ft5vyj6",
+    "Bf4jedk": "f17suaiq"
+  },
+  "medium": {
+    "z8tnut": "f1xp5gbu",
+    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "Byoj8tv": "f1d7kygh",
+    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "B2u0y6b": "fdczgix",
+    "Bf4jedk": "fjdcg9m"
+  },
+  "large": {
+    "z8tnut": "fp9bwmr",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f150uoa4",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "B2u0y6b": "fww51uw",
+    "Bf4jedk": "f1qhsl2h"
+  }
+}, {
+  "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({
+  "base": {
+    "Be2twd7": "fndrnj9",
+    "Bqenvij": "fbhnoac",
+    "a9b677": "feqmc2u"
+  }
+}, {
+  "d": [".fndrnj9{font-size:40px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}"]
+});
+
+var useContentContainerStyles = /*#__PURE__*/__styles({
+  "base": {
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1vx9l62",
+    "fsow6f": ["f1o700av", "fes3tcz"]
+  }
+}, {
+  "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({
+  "base": {
+    "Bg96gwp": "flkuc6h",
+    "B6of3ja": "fvjh0tl",
+    "Bhrd7zp": "figsok6"
+  },
+  "small": {
+    "Be2twd7": "fy9rknc"
+  },
+  "medium": {
+    "Be2twd7": "fy9rknc"
+  },
+  "large": {
+    "Be2twd7": "fkhj508"
+  }
+}, {
+  "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
+  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);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(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);
+  }
+
+  useButtonStyles(state);
+  return state;
+};
+//# sourceMappingURL=useCompoundButtonStyles.js.map

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

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

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

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { MenuButtonProps } from './MenuButton.types';
+import type { MenuButtonProps } from './MenuButton.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Define a styled MenuButton, using the `useMenuButton` hook.
- * {@docCategory Button}
+ * MenuButtons are buttons that handle opening and closing a menu when they are triggered.
  */
-export declare const MenuButton: React.ForwardRefExoticComponent<Pick<MenuButtonProps, string | number> & React.RefAttributes<HTMLElement>>;
+export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;

package/lib/components/MenuButton/MenuButton.js

@@ -1,28 +1,15 @@
 import * as React from 'react';
-import { ChevronDownIcon } from '@fluentui/react-icons-mdl2';
-import { useInlineTokens } from '@fluentui/react-theme-provider';
+import { renderMenuButton } from './renderMenuButton';
 import { useMenuButton } from './useMenuButton';
-import { useButtonClasses } from '../Button/index';
-import { useMenuButtonClasses } from './useMenuButtonClasses';
+import { useMenuButtonStyles } from './useMenuButtonStyles';
 /**
- * Define a styled MenuButton, using the `useMenuButton` hook.
- * {@docCategory Button}
+ * MenuButtons are buttons that handle opening and closing a menu when they are triggered.
  */
-export var MenuButton = React.forwardRef(function (props, ref) {
-    var _a = useMenuButton(props, ref, {
-        menuIcon: { as: ChevronDownIcon },
-    }), state = _a.state, render = _a.render;
-    useButtonClasses(state);
-    useMenuButtonClasses(state);
-    // TODO remove any
-    /**
-     * Type 'MenuButtonState' has no properties in common with type '{
-     *  style?: CSSProperties | undefined; tokens?: string | { [key: string]: any; }
-     *  | undefined; }
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    useInlineTokens(state, '--button');
-    return render(state);
+
+export var MenuButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useMenuButton(props, ref);
+  useMenuButtonStyles(state);
+  return renderMenuButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 MenuButton.displayName = 'MenuButton';
 //# sourceMappingURL=MenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;;GAGG;AACH,MAAM,CAAC,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAA+B,UAAC,KAAK,EAAE,GAAG;IAC5E,IAAA;;MAEJ,EAFM,gBAAK,EAAE,kBAEb,CAAC;IAEH,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxB,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAE5B,kBAAkB;IAClB;;;;OAIG;IACH,8DAA8D;IAC9D,eAAe,CAAC,KAAY,EAAE,UAAU,CAAC,CAAC;IAE1C,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { ChevronDownIcon } from '@fluentui/react-icons-mdl2';\nimport { useInlineTokens } from '@fluentui/react-theme-provider';\nimport { useMenuButton } from './useMenuButton';\nimport { MenuButtonProps } from './MenuButton.types';\nimport { useButtonClasses } from '../Button/index';\nimport { useMenuButtonClasses } from './useMenuButtonClasses';\n\n/**\n * Define a styled MenuButton, using the `useMenuButton` hook.\n * {@docCategory Button}\n */\nexport const MenuButton = React.forwardRef<HTMLElement, MenuButtonProps>((props, ref) => {\n  const { state, render } = useMenuButton(props, ref, {\n    menuIcon: { as: ChevronDownIcon },\n  });\n\n  useButtonClasses(state);\n  useMenuButtonClasses(state);\n\n  // TODO remove any\n  /**\n   * Type 'MenuButtonState' has no properties in common with type '{\n   *  style?: CSSProperties | undefined; tokens?: string | { [key: string]: any; }\n   *  | undefined; }\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  useInlineTokens(state as any, '--button');\n\n  return render(state);\n});\n\nMenuButton.displayName = 'MenuButton';\n"]}
+{"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":""}

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

@@ -1,54 +1,11 @@
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonState, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-/**
- * {@docCategory Button}
- */
-export declare type MinimalMenuProps = {
-    hidden?: boolean;
-    onDismiss?: () => void;
-    target?: React.Ref<HTMLElement | undefined>;
-};
-/**
- * {@docCategory Button}
- */
-export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition' | 'loader'> & {
-    /**
-     * Menu that is displayed when the button is pressed.
-     */
-    menu?: ShorthandProps;
+import type { MenuTriggerChildProps } from '@fluentui/react-menu';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
+export declare type MenuButtonSlots = ButtonSlots & {
     /**
      * Menu icon that indicates that this button has a menu that can be expanded.
      */
-    menuIcon?: ShorthandProps;
-    /**
-     * Defines the inital expanded state of the MenuButton. Use this if you want the MenuButton to maintain its own state.
-     * Mutually exclusive with `expanded`.
-     * @defaultvalue false
-     */
-    defaultExpanded?: boolean;
-    /**
-     * Defines whether the MenuButton is in an expanded state. Use this if you wish to have the expanded state of the
-     * MenuButton be controlled. Mutually exclusive with `defaultExpanded`.
-     * @defaultvalue defaultExpanded
-     */
-    expanded?: boolean;
-    /**
-     * Defines a callback that runs after the MenuButton's contextual menu has been dismissed.
-     */
-    onMenuDismiss?: () => void;
-};
-export interface MenuButtonState extends Omit<MenuButtonProps, 'menu'>, Omit<ButtonState, 'iconPosition' | 'loader'> {
-    menu?: React.PropsWithChildren<MinimalMenuProps>;
-}
-/**
- * {@docCategory Button}
- */
-export declare type MenuButtonTokens = ButtonTokens & {
-    menuIconColor?: string;
-    menuIconSize?: string;
+    menuIcon?: IntrinsicShorthandProps<'span'>;
 };
-/**
- * {@docCategory Button}
- */
-export declare type MenuButtonVariants = ButtonVariants<MenuButtonTokens>;
+export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>> & Partial<MenuTriggerChildProps>;
+export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;

package/lib/components/MenuButton/MenuButton.types.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=MenuButton.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ShorthandProps } from '@fluentui/react-compose/lib/next/index';\nimport { ButtonProps, ButtonState, ButtonTokens, ButtonVariants } from '../Button/Button.types';\n\n/**\n * {@docCategory Button}\n */\nexport type MinimalMenuProps = {\n  hidden?: boolean;\n  onDismiss?: () => void;\n  target?: React.Ref<HTMLElement | undefined>;\n};\n\n/**\n * {@docCategory Button}\n */\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition' | 'loader'> & {\n  /**\n   * Menu that is displayed when the button is pressed.\n   */\n  menu?: ShorthandProps;\n\n  /**\n   * Menu icon that indicates that this button has a menu that can be expanded.\n   */\n  menuIcon?: ShorthandProps;\n\n  /**\n   * Defines the inital expanded state of the MenuButton. Use this if you want the MenuButton to maintain its own state.\n   * Mutually exclusive with `expanded`.\n   * @defaultvalue false\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Defines whether the MenuButton is in an expanded state. Use this if you wish to have the expanded state of the\n   * MenuButton be controlled. Mutually exclusive with `defaultExpanded`.\n   * @defaultvalue defaultExpanded\n   */\n  expanded?: boolean;\n\n  /**\n   * Defines a callback that runs after the MenuButton's contextual menu has been dismissed.\n   */\n  onMenuDismiss?: () => void;\n};\n\nexport interface MenuButtonState extends Omit<MenuButtonProps, 'menu'>, Omit<ButtonState, 'iconPosition' | 'loader'> {\n  menu?: React.PropsWithChildren<MinimalMenuProps>;\n}\n\n/**\n * {@docCategory Button}\n */\nexport type MenuButtonTokens = ButtonTokens & {\n  menuIconColor?: string;\n  menuIconSize?: string;\n};\n\n/**\n * {@docCategory Button}\n */\nexport type MenuButtonVariants = ButtonVariants<MenuButtonTokens>;\n"]}
+{"version":3,"file":"MenuButton.types.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":""}

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

@@ -1,6 +1,5 @@
 export * from './MenuButton.types';
 export * from './MenuButton';
+export * from './renderMenuButton';
 export * from './useMenuButton';
-export * from './useMenuButtonState';
-export * from './useExpanded';
-export * from './useMenuButtonClasses';
+export { useMenuButtonStyles } from './useMenuButtonStyles';

package/lib/components/MenuButton/index.js

@@ -1,6 +1,6 @@
+export * from './MenuButton.types';
 export * from './MenuButton';
+export * from './renderMenuButton';
 export * from './useMenuButton';
-export * from './useMenuButtonState';
-export * from './useExpanded';
-export * from './useMenuButtonClasses';
+export { useMenuButtonStyles } from './useMenuButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuButton/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './useMenuButton';\nexport * from './useMenuButtonState';\nexport * from './useExpanded';\nexport * from './useMenuButtonClasses';\n"]}
+{"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"}

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

@@ -1,7 +1,5 @@
-import { MenuButtonState } from './MenuButton.types';
+import type { MenuButtonState } from './MenuButton.types';
 /**
- * Redefine the render function to add slots. Reuse the button structure but add
- * slots to children.
- * @param state
+ * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
 export declare const renderMenuButton: (state: MenuButtonState) => JSX.Element;

package/lib/components/MenuButton/renderMenuButton.js

@@ -1,21 +1,17 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlots } from '@fluentui/react-compose/lib/next/index';
-import { menuButtonShorthandProps } from './useMenuButton';
+import { getSlots } from '@fluentui/react-utilities';
 /**
- * Redefine the render function to add slots. Reuse the button structure but add
- * slots to children.
- * @param state
+ * Renders a MenuButton component by passing the state defined props to the appropriate slots.
  */
+
 export var renderMenuButton = function (state) {
-    var _a;
-    var _b = getSlots(state, menuButtonShorthandProps), slots = _b.slots, slotProps = _b.slotProps;
-    var iconOnly = state.iconOnly, children = state.children;
-    var contentVisible = !iconOnly && (children || ((_a = slotProps.content) === null || _a === void 0 ? void 0 : _a.children));
-    return (React.createElement(slots.root, __assign({}, slotProps.root),
-        React.createElement(slots.icon, __assign({}, slotProps.icon)),
-        contentVisible && React.createElement(slots.content, __assign({}, slotProps.content)),
-        !iconOnly && React.createElement(slots.menuIcon, __assign({}, slotProps.menuIcon)),
-        React.createElement(slots.menu, __assign({}, slotProps.menu))));
+  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)));
 };
 //# sourceMappingURL=renderMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,KAAsB;;IAC/C,IAAA,8CAAgE,EAA9D,gBAAK,EAAE,wBAAuD,CAAC;IAC/D,IAAA,yBAAQ,EAAE,yBAAQ,CAAW;IAErC,IAAM,cAAc,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,WAAI,SAAS,CAAC,OAAO,0CAAE,QAAQ,CAAA,CAAC,CAAC;IAE9E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI;QAC5B,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,EAAI;QACjC,cAAc,IAAI,oBAAC,KAAK,CAAC,OAAO,eAAK,SAAS,CAAC,OAAO,EAAI;QAC1D,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,eAAK,SAAS,CAAC,QAAQ,EAAI;QACxD,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,EAAI,CACvB,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-compose/lib/next/index';\nimport { MenuButtonState } from './MenuButton.types';\nimport { menuButtonShorthandProps } from './useMenuButton';\n\n/**\n * Redefine the render function to add slots. Reuse the button structure but add\n * slots to children.\n * @param state\n */\nexport const renderMenuButton = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlots(state, menuButtonShorthandProps);\n  const { iconOnly, children } = state;\n\n  const contentVisible = !iconOnly && (children || slotProps.content?.children);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {contentVisible && <slots.content {...slotProps.content} />}\n      {!iconOnly && <slots.menuIcon {...slotProps.menuIcon} />}\n      <slots.menu {...slotProps.menu} />\n    </slots.root>\n  );\n};\n"]}
+{"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":""}

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

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { MenuButtonProps, MenuButtonState } from './MenuButton.types';
-export declare const menuButtonShorthandProps: string[];
+import type { MenuButtonProps, MenuButtonState } from './MenuButton.types';
 /**
- * Redefine the component factory, reusing button factory.
+ * Given user props, returns the final state for a MenuButton.
  */
-export declare const useMenuButton: (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => {
-    state: MenuButtonState;
-    render: (state: MenuButtonState) => JSX.Element;
-};
+export declare const useMenuButton: ({ menuIcon, ...props }: MenuButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;

package/lib/components/MenuButton/useMenuButton.js

@@ -1,26 +1,32 @@
-import { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index';
-import { useMenuButtonState } from './useMenuButtonState';
-import { renderMenuButton } from './renderMenuButton';
-export var menuButtonShorthandProps = ['icon', 'content', 'menuIcon', 'menu'];
-var mergeProps = makeMergeProps({ deepMerge: menuButtonShorthandProps });
+import { __assign, __rest } from "tslib";
+import * as React from 'react';
+import { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useButton } from '../Button/index';
 /**
- * Redefine the component factory, reusing button factory.
+ * Given user props, returns the final state for a MenuButton.
  */
-export var useMenuButton = function (props, ref, defaultProps) {
-    // Note: because menu button's template and slots are different, we can't reuse
-    // those, but the useMenuButtonState hook can reuse useButtonState.
-    var state = mergeProps({
-        ref: ref,
-        as: 'button',
-        icon: { as: 'span' },
-        content: { as: 'span', children: props.children },
-        menuIcon: { as: 'span' },
-        menu: { as: 'span' },
-    }, defaultProps, resolveShorthandProps(props, menuButtonShorthandProps));
-    useMenuButtonState(state);
-    return {
-        state: state,
-        render: renderMenuButton,
-    };
+
+export var useMenuButton = function (_a, ref) {
+  var menuIcon = _a.menuIcon,
+      props = __rest(_a, ["menuIcon"]);
+
+  var buttonState = useButton(props, ref);
+  return __assign(__assign({}, buttonState), {
+    // State calculated from a set of props
+    iconOnly: Boolean(!props.children),
+    // Slots definition
+    components: {
+      root: 'button',
+      icon: 'span',
+      menuIcon: 'span'
+    },
+    menuIcon: resolveShorthand(menuIcon, {
+      defaultProps: {
+        children: buttonState.size === 'large' ? /*#__PURE__*/React.createElement(ChevronDown24Regular, null) : /*#__PURE__*/React.createElement(ChevronDown20Regular, null)
+      },
+      required: true
+    })
+  });
 };
 //# sourceMappingURL=useMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useMenuButton.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAE/F,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,IAAM,wBAAwB,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;AAEhF,IAAM,UAAU,GAAG,cAAc,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC,CAAC;AAE3E;;GAEG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,KAAsB,EAAE,GAA2B,EAAE,YAA8B;IAC/G,+EAA+E;IAC/E,mEAAmE;IACnE,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,KAAA;QACH,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;QACpB,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;QACjD,QAAQ,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;QACxB,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE;KACrB,EACD,YAAY,EACZ,qBAAqB,CAAC,KAAK,EAAE,wBAAwB,CAAC,CACpC,CAAC;IAErB,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE1B,OAAO;QACL,KAAK,OAAA;QACL,MAAM,EAAE,gBAAgB;KACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { resolveShorthandProps, makeMergeProps } from '@fluentui/react-compose/lib/next/index';\nimport { MenuButtonProps, MenuButtonState } from './MenuButton.types';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport { renderMenuButton } from './renderMenuButton';\n\nexport const menuButtonShorthandProps = ['icon', 'content', 'menuIcon', 'menu'];\n\nconst mergeProps = makeMergeProps({ deepMerge: menuButtonShorthandProps });\n\n/**\n * Redefine the component factory, reusing button factory.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n  // Note: because menu button's template and slots are different, we can't reuse\n  // those, but the useMenuButtonState hook can reuse useButtonState.\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      icon: { as: 'span' },\n      content: { as: 'span', children: props.children },\n      menuIcon: { as: 'span' },\n      menu: { as: 'span' },\n    },\n    defaultProps,\n    resolveShorthandProps(props, menuButtonShorthandProps),\n  ) as MenuButtonState;\n\n  useMenuButtonState(state);\n\n  return {\n    state,\n    render: renderMenuButton,\n  };\n};\n"]}
+{"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":""}

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

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

package/lib/components/MenuButton/useMenuButtonStyles.js

@@ -0,0 +1,34 @@
+import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { useButtonStyles } from '../Button/useButtonStyles';
+
+var useMenuIconStyles = /*#__PURE__*/__styles({
+  "small": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "medium": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "large": {
+    "Be2twd7": "f1rt2boy",
+    "Bqenvij": "frvgh55",
+    "a9b677": "fq4mcun"
+  }
+}, {
+  "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();
+
+  if (state.menuIcon) {
+    state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
+  }
+
+  useButtonStyles(state);
+  return state;
+};
+//# sourceMappingURL=useMenuButtonStyles.js.map

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

@@ -0,0 +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":""}