@fluentui/react-button 9.0.0-alpha.84 → 9.0.0-alpha.88

package/CHANGELOG.json

@@ -2,7 +2,93 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Fri, 10 Sep 2021 16:29:54 GMT",
+      "date": "Mon, 20 Sep 2021 07:35:22 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.88",
+      "version": "9.0.0-alpha.88",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "comment": "SplitButton: Re-introducing SplitButton using the latest version of makeStyles.",
+            "commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884",
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.88"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-button",
+            "comment": "chore: use  versioon eslint-plugin and react-conformance in dev dependencies",
+            "commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 17 Sep 2021 07:35:26 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.87",
+      "version": "9.0.0-alpha.87",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "comment": "Modifying MenuButton to adhere to MenuTrigger changes.",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "comment": "Updating API comments to be more descriptive.",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575",
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.87"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Sep 2021 07:38:39 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.86",
+      "version": "9.0.0-alpha.86",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "fbe41e2877a20ce0f3c01b5188e17c12f941cc4c",
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.86"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Sep 2021 20:09:02 GMT",
+      "tag": "@fluentui/react-button_v9.0.0-alpha.85",
+      "version": "9.0.0-alpha.85",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "10495c31fb5c5cf48b4665601a75a0cfabb6a03c",
+            "comment": "Bump @fluentui/react-button to v9.0.0-alpha.85"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Sep 2021 16:31:53 GMT",
       "tag": "@fluentui/react-button_v9.0.0-alpha.84",
       "version": "9.0.0-alpha.84",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,51 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Fri, 10 Sep 2021 16:29:54 GMT and should not be manually modified.
+This log was last generated on Mon, 20 Sep 2021 07:35:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.88](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.88)
+
+Mon, 20 Sep 2021 07:35:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.87..@fluentui/react-button_v9.0.0-alpha.88)
+
+### Changes
+
+- SplitButton: Re-introducing SplitButton using the latest version of makeStyles. ([PR #18290](https://github.com/microsoft/fluentui/pull/18290) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-button to v9.0.0-alpha.88 ([PR #18290](https://github.com/microsoft/fluentui/pull/18290) by lingfangao@hotmail.com)
+
+## [9.0.0-alpha.87](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.87)
+
+Fri, 17 Sep 2021 07:35:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.86..@fluentui/react-button_v9.0.0-alpha.87)
+
+### Changes
+
+- Modifying MenuButton to adhere to MenuTrigger changes. ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+- Updating API comments to be more descriptive. ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+- Bump @fluentui/react-button to v9.0.0-alpha.87 ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+
+## [9.0.0-alpha.86](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.86)
+
+Thu, 16 Sep 2021 07:38:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.85..@fluentui/react-button_v9.0.0-alpha.86)
+
+### Changes
+
+- Bump @fluentui/react-button to v9.0.0-alpha.86 ([PR #19815](https://github.com/microsoft/fluentui/pull/19815) by behowell@microsoft.com)
+
+## [9.0.0-alpha.85](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.85)
+
+Tue, 14 Sep 2021 20:09:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.84..@fluentui/react-button_v9.0.0-alpha.85)
+
+### Changes
+
+- Bump @fluentui/react-button to v9.0.0-alpha.85 ([PR #19155](https://github.com/microsoft/fluentui/pull/19155) by bsunderhus@microsoft.com)
+
 ## [9.0.0-alpha.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-alpha.84)
 
-Fri, 10 Sep 2021 16:29:54 GMT 
+Fri, 10 Sep 2021 16:31:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-alpha.83..@fluentui/react-button_v9.0.0-alpha.84)
 
 ### Changes

package/dist/react-button.d.ts

@@ -140,7 +140,7 @@ export declare const MenuButton: React_2.FunctionComponent<MenuButtonProps & Rea
 
 export declare type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';
 
-export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<MenuTriggerChildProps> & {
+export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<Omit<MenuTriggerChildProps, 'ref'>> & {
     /**
      * Menu icon that indicates that this button has a menu that can be expanded.
      */
@@ -174,6 +174,49 @@ export declare const renderCompoundButton: (state: CompoundButtonState) => JSX.E
  */
 export declare const renderMenuButton: (state: MenuButtonState) => JSX.Element;
 
+/**
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element;
+
+/**
+ * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
+ * action, while interacting with the second one opens a menu with secondary actions.
+ */
+export declare const SplitButton: React_2.ForwardRefExoticComponent<SplitButtonProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare type SplitButtonDefaultedProps = 'size';
+
+export declare interface SplitButtonProps extends Omit<ButtonProps, ButtonShorthandPropsCompat>, MenuButtonProps {
+    /**
+     * Button to perform primary action in SplitButton.
+     */
+    button?: ShorthandPropsCompat<ButtonProps>;
+    /**
+     * Button that opens menu with secondary actions in SplitButton.
+     */
+    menuButton?: ShorthandPropsCompat<MenuButtonProps>;
+    /**
+     * Ref to the Button element.
+     */
+    buttonRef?: React_2.Ref<HTMLElement>;
+    /**
+     * Ref to the MenuButton element.
+     */
+    menuButtonRef?: React_2.Ref<HTMLElement>;
+}
+
+export declare const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[];
+
+export declare type SplitButtonShorthandPropsCompat = 'button' | 'menuButton';
+
+export declare interface SplitButtonState extends ComponentStateCompat<SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonDefaultedProps> {
+    /**
+     * Ref to the root element
+     */
+    ref: React_2.Ref<HTMLElement>;
+}
+
 /**
  * ToggleButtons are buttons that toggle between two defined states when triggered.
  */
@@ -204,13 +247,15 @@ export declare interface ToggleButtonState extends ButtonState, ComponentStateCo
 }
 
 /**
- * Given user props, returns the final state for a Button.
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
  */
 export declare const useButton: (props: ButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;
 
 /**
- * The useButton hook processes the Button draft state.
- * @param state - Button draft state to mutate.
+ * The useButton hook processes the Button state.
+ * @param state - Button state to mutate.
  */
 export declare const useButtonState: (state: ButtonState) => ButtonState;
 
@@ -223,23 +268,44 @@ export declare const useButtonStyles: (state: ButtonState) => ButtonState;
 export declare const useChecked: <TState extends CheckedState>(state: TState) => void;
 
 /**
- * Given user props, returns the final state for a CompoundButton.
+ * 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 declare const useCompoundButton: (props: CompoundButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => CompoundButtonState;
 
 export declare const useCompoundButtonStyles: (state: CompoundButtonState) => CompoundButtonState;
 
 /**
- * Given user props, returns the final state for a MenuButton.
+ * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
  */
 export declare const useMenuButton: (props: MenuButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => MenuButtonState;
 
+/**
+ * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any
+ * additional MenuButton specific processing.
+ * @param state - MenuButtonButton state to mutate.
+ */
 export declare const useMenuButtonState: (state: MenuButtonState) => MenuButtonState;
 
 export declare const useMenuButtonStyles: (state: MenuButtonState) => MenuButtonState;
 
 /**
- * Given user props, returns the final state for a ToggleButton.
+ * Given user props, defines default props for the SplitButton and returns processed state.
+ * @param props - User provided props to the SplitButton component.
+ * @param ref - User provided ref to be passed to the SplitButton component.
+ */
+export declare const useSplitButton: (props: SplitButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: SplitButtonProps | undefined) => SplitButtonState;
+
+export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;
+
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
  */
 export declare const useToggleButton: (props: ToggleButtonProps, ref: React_2.Ref<HTMLElement>, defaultProps?: ToggleButtonProps | undefined) => ToggleButtonState;
 

package/lib/SplitButton.d.ts

@@ -0,0 +1 @@
+export * from './components/SplitButton/index';

package/lib/SplitButton.js

@@ -0,0 +1,2 @@
+export * from './components/SplitButton/index';
+//# sourceMappingURL=SplitButton.js.map

package/lib/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sourceRoot":"../src/","sources":["SplitButton.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/SplitButton/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,0BAAT,QAA2C,aAA3C;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,0BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAEG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAF/B,EAGG,CAAC,QAAD,IAAa,QAHhB,EAIG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAJ/B,CADF;AAQD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*{loading && <slots.loader {...slotProps.loader} />}*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/renderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,0BAAT,QAA2C,aAA3C;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,0BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;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,IAAa,QAFhB,EAGG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAH/B,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { buttonShorthandPropsCompat } from './useButton';\nimport type { ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton = (state: ButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, buttonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && children}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Button/useButton.d.ts

@@ -5,6 +5,8 @@ import type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './But
  */
 export declare const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a Button.
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
  */
 export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps | undefined) => ButtonState;

package/lib/components/Button/useButton.js

@@ -9,7 +9,9 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
   deepMerge: buttonShorthandPropsCompat
 });
 /**
- * Given user props, returns the final state for a Button.
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
  */
 
 export var useButton = function (props, ref, defaultProps) {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,0BAA0B,GAAiC,CAAC,MAAD,CAAjE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAc;AAAE,EAAA,SAAS,EAAE;AAAb,CAAd,CAAjC;AAEA;;AAEG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAAkD,YAAlD,EAA4E;AACnG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,IAAI,EAAE,QANR;AAOE,IAAA,IAAI,EAAE;AAPR,GADsB,EAUtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,0BAAf,CAVf,EAWtB,qBAAqB,CAAC,KAAD,EAAQ,0BAAR,CAXC,CAAxB;AAcA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from './useButtonState';\nimport type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './Button.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[] = ['icon'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ deepMerge: buttonShorthandPropsCompat });\n\n/**\n * Given user props, returns the final state for a Button.\n */\nexport const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps): ButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots\n      icon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, buttonShorthandPropsCompat),\n    resolveShorthandProps(props, buttonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,0BAA0B,GAAiC,CAAC,MAAD,CAAjE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAc;AAAE,EAAA,SAAS,EAAE;AAAb,CAAd,CAAjC;AAEA;;;;AAIG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAAkD,YAAlD,EAA4E;AACnG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,IAAI,EAAE,QANR;AAOE,IAAA,IAAI,EAAE;AAPR,GADsB,EAUtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,0BAAf,CAVf,EAWtB,qBAAqB,CAAC,KAAD,EAAQ,0BAAR,CAXC,CAAxB;AAcA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from './useButtonState';\nimport type { ButtonProps, ButtonShorthandPropsCompat, ButtonState } from './Button.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const buttonShorthandPropsCompat: ButtonShorthandPropsCompat[] = ['icon'];\n\nconst mergeProps = makeMergeProps<ButtonState>({ deepMerge: buttonShorthandPropsCompat });\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton = (props: ButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: ButtonProps): ButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots\n      icon: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, buttonShorthandPropsCompat),\n    resolveShorthandProps(props, buttonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Button/useButtonState.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonState } from './Button.types';
 /**
- * The useButton hook processes the Button draft state.
- * @param state - Button draft state to mutate.
+ * The useButton hook processes the Button state.
+ * @param state - Button state to mutate.
  */
 export declare const useButtonState: (state: ButtonState) => ButtonState;

package/lib/components/Button/useButtonState.js

@@ -1,7 +1,7 @@
 import { Enter, Space } from '@fluentui/keyboard-keys';
 /**
- * The useButton hook processes the Button draft state.
- * @param state - Button draft state to mutate.
+ * The useButton hook processes the Button state.
+ * @param state - Button state to mutate.
  */
 
 export var useButtonState = function (state) {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button draft state.\n * @param state - Button draft state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButtonState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { ButtonState } from './Button.types';\n\n/**\n * The useButton hook processes the Button state.\n * @param state - Button state to mutate.\n */\nexport const useButtonState = (state: ButtonState): ButtonState => {\n  const { as, children, disabled, disabledFocusable, icon, onClick, onKeyDown: onKeyDownCallback } = state;\n\n  const receivedChildren = !!children;\n  const receivedIcon = !!icon?.children;\n  state.iconOnly = receivedIcon && !receivedChildren;\n\n  const onNonAnchorOrButtonKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDownCallback?.(ev);\n\n    const key = ev.key;\n    if (!ev.defaultPrevented && onClick && (key === Enter || key === Space)) {\n      // Translate the keydown enter/space to a click.\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      onClick((ev as unknown) as React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>);\n    }\n  };\n\n  // Adjust props depending on the root type.\n  if (typeof as === 'string') {\n    // Add 'role=button' and 'tabIndex=0' for all non-button elements.\n    if (as !== 'button') {\n      state.role = 'button';\n      state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n      // Add keydown event handler for all other non-anchor elements.\n      if (as !== 'a') {\n        state.onKeyDown = onNonAnchorOrButtonKeyDown;\n      }\n    }\n  }\n  // Add keydown event handler, 'role=button' and 'tabIndex=0' for all other elements.\n  else {\n    state.onKeyDown = onNonAnchorOrButtonKeyDown;\n    state.role = 'button';\n    state.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.onClick = (ev: React.MouseEvent<HTMLElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  const { onKeyDown } = state;\n  state.onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n    const key = ev.key;\n    if ((disabled || disabledFocusable) && (key === Enter || key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = as === 'button' ? disabled && !disabledFocusable : undefined;\n  state['aria-disabled'] = disabled && !state.disabled;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\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 useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { ButtonState } from './Button.types';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n//       We're tracking these here to determine how we can hoist them.\nexport const buttonSpacing = {\n  smallest: '2px',\n  smaller: '4px',\n  small: '6px',\n  medium: '8px',\n  large: '12px',\n  larger: '16px',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    margin: 0,\n\n    maxWidth: '280px',\n\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    background: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n\n    borderColor: theme.alias.color.neutral.neutralStroke1,\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n\n    fontFamily: theme.global.type.fontFamilies.base,\n\n    outline: 'none',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackground1Hover,\n      borderColor: theme.alias.color.neutral.neutralStroke1Hover,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackground1Pressed,\n      borderColor: theme.alias.color.neutral.neutralStroke1Pressed,\n      color: theme.alias.color.neutral.neutralForeground1,\n\n      outline: 'none',\n    },\n  }),\n  small: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.smaller,\n    padding: `0 ${buttonSpacing.medium}`,\n\n    height: '24px',\n    minWidth: '64px',\n\n    borderRadius: theme.global.borderRadius.small,\n\n    fontSize: theme.global.type.fontSizes.base[200],\n    fontWeight: theme.global.type.fontWeights.regular,\n    lineHeight: theme.global.type.lineHeights.base[200],\n  }),\n  medium: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.large}`,\n\n    height: '32px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.small,\n    padding: `0 ${buttonSpacing.larger}`,\n\n    height: '40px',\n    minWidth: '96px',\n\n    borderRadius: theme.global.borderRadius.medium,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    fontWeight: theme.global.type.fontWeights.semibold,\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n  circular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  outline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  primary: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n\n    ':hover': {\n      background: theme.alias.color.neutral.brandBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.brandBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n  }),\n  subtle: theme => ({\n    background: theme.alias.color.neutral.subtleBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.subtleBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.subtleBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  transparent: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n    borderColor: 'transparent',\n    color: theme.alias.color.neutral.neutralForeground2,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n      borderColor: 'transparent',\n      color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n    },\n  }),\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n    borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n    color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.neutralBackgroundDisabled,\n      borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n    },\n  }),\n  disabledOutline: theme => ({\n    background: theme.alias.color.neutral.transparentBackground,\n\n    ':hover': {\n      background: theme.alias.color.neutral.transparentBackgroundHover,\n    },\n\n    ':active': {\n      background: theme.alias.color.neutral.transparentBackgroundPressed,\n    },\n  }),\n  disabledPrimary: {\n    borderColor: 'transparent',\n\n    ':hover': {\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      borderColor: 'transparent',\n    },\n  },\n  disabledSubtle: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n  disabledTransparent: {\n    background: 'none',\n    borderColor: 'transparent',\n\n    ':hover': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n\n    ':active': {\n      background: 'none',\n      borderColor: 'transparent',\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createFocusIndicatorStyleRule(theme => ({\n    borderColor: 'transparent',\n    boxShadow: `\n      ${theme.alias.shadow.shadow4},\n      0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}\n    `,\n    zIndex: 1,\n  })),\n  circular: createFocusIndicatorStyleRule(theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  })),\n  primary: createFocusIndicatorStyleRule(theme => ({\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n    boxShadow: `${theme.alias.shadow.shadow2}, 0 0 0 2px ${theme.alias.color.neutral.strokeFocus2}`,\n  })),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    padding: buttonSpacing.smaller,\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    padding: buttonSpacing.small,\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\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 useButtonStyles = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  state.className = mergeClasses(\n    rootStyles.base,\n    rootFocusStyles.base,\n    rootStyles[state.size],\n    state.block && rootStyles.block,\n    state.circular && rootStyles.circular,\n    state.circular && rootFocusStyles.circular,\n    state.outline && rootStyles.outline,\n    state.primary && rootStyles.primary,\n    state.primary && rootFocusStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    (state.disabled || state.disabledFocusable) && state.outline && rootStyles.disabledOutline,\n    (state.disabled || state.disabledFocusable) && state.primary && rootStyles.disabledPrimary,\n    (state.disabled || state.disabledFocusable) && state.subtle && rootStyles.disabledSubtle,\n    (state.disabled || state.disabledFocusable) && state.transparent && rootStyles.disabledTransparent,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,kCAAT,QAAmD,qBAAnD;AAGA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,kCAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAEG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAF/B,EAGG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,QADH,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAJJ,EASG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAT/B,CADF;AAaD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { compoundButtonShorthandPropsCompat } from './useCompoundButton';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, compoundButtonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/*loading && <slots.loader {...slotProps.loader} />*/}\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {children}\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,kCAAT,QAAmD,qBAAnD;AAGA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,kCAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAA6B,KAAK,CAAlC,QAAR;AAAA,MAAU,QAAQ,GAAmB,KAAK,CAAxB,QAAlB;AAAA,MAAoB,YAAY,GAAK,KAAK,CAAV,YAAhC;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,QADH,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,CAhBM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { compoundButtonShorthandPropsCompat } from './useCompoundButton';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, compoundButtonShorthandPropsCompat);\n  const { children, iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {children}\n          <slots.secondaryContent {...slotProps.secondaryContent} />\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,6 +5,8 @@ import type { CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundB
  */
 export declare const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a CompoundButton.
+ * 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 declare const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => CompoundButtonState;

package/lib/components/CompoundButton/useCompoundButton.js

@@ -9,7 +9,9 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
   deepMerge: compoundButtonShorthandPropsCompat
 });
 /**
- * Given user props, returns the final state for a CompoundButton.
+ * 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 useCompoundButton = function (props, ref, defaultProps) {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,cAAT,QAA+B,0BAA/B;AAOA;;AAEG;;AACH,OAAO,IAAM,kCAAkC,GAAyC,CACtF,kBADsF,EAEtF,MAFsF,EAGtF,kBAHsF,CAAjF;AAMP,IAAM,UAAU,gBAAG,cAAc,CAAsB;AACrD,EAAA,SAAS,EAAE;AAD0C,CAAtB,CAAjC;AAIA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAC/B,KAD+B,EAE/B,GAF+B,EAG/B,YAH+B,EAGG;AAElC,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,gBAAgB,EAAE;AAAE,MAAA,EAAE,EAAE,MAAN;AAAc,MAAA,QAAQ,EAAE;AAAxB,KANpB;AAOE,IAAA,gBAAgB,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAPpB;AAQE;AACA,IAAA,IAAI,EAAE,QATR;AAUE,IAAA,IAAI,EAAE;AAVR,GADsB,EAatB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,kCAAf,CAbf,EActB,qBAAqB,CAAC,KAAD,EAAQ,kCAAR,CAdC,CAAxB;AAiBA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from '../Button/useButtonState';\nimport type {\n  CompoundButtonProps,\n  CompoundButtonShorthandPropsCompat,\n  CompoundButtonState,\n} from './CompoundButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[] = [\n  'contentContainer',\n  'icon',\n  'secondaryContent',\n];\n\nconst mergeProps = makeMergeProps<CompoundButtonState>({\n  deepMerge: compoundButtonShorthandPropsCompat,\n});\n\n/**\n * Given user props, returns the final state for a CompoundButton.\n */\nexport const useCompoundButton = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CompoundButtonProps,\n): CompoundButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots inherited from Button\n      icon: { as: 'span' },\n      // Slots exclusive to CompoundButton\n      contentContainer: { as: 'span', children: null },\n      secondaryContent: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, compoundButtonShorthandPropsCompat),\n    resolveShorthandProps(props, compoundButtonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,cAAT,QAA+B,0BAA/B;AAOA;;AAEG;;AACH,OAAO,IAAM,kCAAkC,GAAyC,CACtF,kBADsF,EAEtF,MAFsF,EAGtF,kBAHsF,CAAjF;AAMP,IAAM,UAAU,gBAAG,cAAc,CAAsB;AACrD,EAAA,SAAS,EAAE;AAD0C,CAAtB,CAAjC;AAIA;;;;AAIG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAC/B,KAD+B,EAE/B,GAF+B,EAG/B,YAH+B,EAGG;AAElC,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,QAFN;AAGE;AACA,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAJR;AAKE;AACA,IAAA,gBAAgB,EAAE;AAAE,MAAA,EAAE,EAAE,MAAN;AAAc,MAAA,QAAQ,EAAE;AAAxB,KANpB;AAOE,IAAA,gBAAgB,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAPpB;AAQE;AACA,IAAA,IAAI,EAAE,QATR;AAUE,IAAA,IAAI,EAAE;AAVR,GADsB,EAatB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,kCAAf,CAbf,EActB,qBAAqB,CAAC,KAAD,EAAQ,kCAAR,CAdC,CAAxB;AAiBA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,KAAP;AACD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useButtonState } from '../Button/useButtonState';\nimport type {\n  CompoundButtonProps,\n  CompoundButtonShorthandPropsCompat,\n  CompoundButtonState,\n} from './CompoundButton.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[] = [\n  'contentContainer',\n  'icon',\n  'secondaryContent',\n];\n\nconst mergeProps = makeMergeProps<CompoundButtonState>({\n  deepMerge: compoundButtonShorthandPropsCompat,\n});\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton = (\n  props: CompoundButtonProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CompoundButtonProps,\n): CompoundButtonState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'button',\n      // Slots inherited from Button\n      icon: { as: 'span' },\n      // Slots exclusive to CompoundButton\n      contentContainer: { as: 'span', children: null },\n      secondaryContent: { as: 'span' },\n      // Non-slot props\n      size: 'medium',\n      type: 'button', // This is added because the default for type is 'submit'\n    },\n    defaultProps && resolveShorthandProps(defaultProps, compoundButtonShorthandPropsCompat),\n    resolveShorthandProps(props, compoundButtonShorthandPropsCompat),\n  );\n\n  useButtonState(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/CompoundButton/useCompoundButtonStyles.js

@@ -1,4 +1,4 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
 import { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';
 var CompoundButtonClassNames = {
   secondaryContent: 'CompoundButton-secondaryContent'

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,aAAT,EAAwB,eAAxB,QAA+C,2BAA/C;AAGA,IAAM,wBAAwB,GAAG;AAC/B,EAAA,gBAAgB,EAAE;AADa,CAAjC;;AAIA,IAAM,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,EAAtB;;AA+GA,IAAM,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;;AAqBA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAQA,IAAM,yBAAyB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAQA,IAAM,yBAAyB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAiBA,OAAO,IAAM,uBAAuB,GAAG,UAAC,KAAD,EAA2B;AAChE,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AACA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,UAAU,CAAC,IADiB,EAE5B,UAAU,CAAC,KAAK,CAAC,IAAP,CAFkB,EAG5B,KAAK,CAAC,OAAN,IAAiB,UAAU,CAAC,OAHA,EAI5B,KAAK,CAAC,MAAN,IAAgB,UAAU,CAAC,MAJC,EAK5B,KAAK,CAAC,WAAN,IAAqB,UAAU,CAAC,WALJ,EAM5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,UAAU,CAAC,QAN9B,EAO5B,KAAK,CAAC,QAAN,IAAkB,kBAAkB,CAAC,KAAK,CAAC,IAAP,CAPR,EAQ5B,KAAK,CAAC,SARsB,CAA9B;AAWA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,UAAU,CAAC,IAAZ,EAAkB,KAAK,CAAC,IAAN,CAAW,SAA7B,CAAnC;AAEA,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,KAAK,CAAC,gBAAN,CAAuB,SAArD,CAA/C;AAEA,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,wBAAwB,CAAC,gBADoB,EAE7C,sBAAsB,CAAC,IAFsB,EAG7C,sBAAsB,CAAC,KAAK,CAAC,IAAP,CAHuB,EAI7C,KAAK,CAAC,gBAAN,CAAuB,SAJsB,CAA/C;AAOA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAhCM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: 'CompoundButton-secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.large,\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Pressed,\n      },\n    },\n  }),\n  small: theme => ({\n    padding: buttonSpacing.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  medium: theme => ({\n    padding: buttonSpacing.large,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    padding: buttonSpacing.larger,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  primary: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n  }),\n  subtle: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  transparent: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  disabled: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: buttonSpacing.small,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: buttonSpacing.medium,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  base: theme => ({\n    lineHeight: '100%',\n    marginTop: '4px',\n    fontWeight: theme.global.type.fontWeights.regular,\n  }),\n  small: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  medium: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  large: theme => ({\n    fontSize: theme.global.type.fontSizes.base[300],\n  }),\n});\n\nexport const useCompoundButtonStyles = (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  state.className = mergeClasses(\n    rootStyles.base,\n    rootStyles[state.size],\n    state.primary && rootStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  state.secondaryContent.className = mergeClasses(\n    CompoundButtonClassNames.secondaryContent,\n    secondaryContentStyles.base,\n    secondaryContentStyles[state.size],\n    state.secondaryContent.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,aAAT,EAAwB,eAAxB,QAA+C,2BAA/C;AAGA,IAAM,wBAAwB,GAAG;AAC/B,EAAA,gBAAgB,EAAE;AADa,CAAjC;;AAIA,IAAM,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,EAAtB;;AA+GA,IAAM,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;;AAqBA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAQA,IAAM,yBAAyB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAQA,IAAM,yBAAyB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlC;;AAiBA,OAAO,IAAM,uBAAuB,GAAG,UAAC,KAAD,EAA2B;AAChE,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AACA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,UAAU,CAAC,IADiB,EAE5B,UAAU,CAAC,KAAK,CAAC,IAAP,CAFkB,EAG5B,KAAK,CAAC,OAAN,IAAiB,UAAU,CAAC,OAHA,EAI5B,KAAK,CAAC,MAAN,IAAgB,UAAU,CAAC,MAJC,EAK5B,KAAK,CAAC,WAAN,IAAqB,UAAU,CAAC,WALJ,EAM5B,CAAC,KAAK,CAAC,QAAN,IAAkB,KAAK,CAAC,iBAAzB,KAA+C,UAAU,CAAC,QAN9B,EAO5B,KAAK,CAAC,QAAN,IAAkB,kBAAkB,CAAC,KAAK,CAAC,IAAP,CAPR,EAQ5B,KAAK,CAAC,SARsB,CAA9B;AAWA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,UAAU,CAAC,IAAZ,EAAkB,KAAK,CAAC,IAAN,CAAW,SAA7B,CAAnC;AAEA,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,KAAK,CAAC,gBAAN,CAAuB,SAArD,CAA/C;AAEA,EAAA,KAAK,CAAC,gBAAN,CAAuB,SAAvB,GAAmC,YAAY,CAC7C,wBAAwB,CAAC,gBADoB,EAE7C,sBAAsB,CAAC,IAFsB,EAG7C,sBAAsB,CAAC,KAAK,CAAC,IAAP,CAHuB,EAI7C,KAAK,CAAC,gBAAN,CAAuB,SAJsB,CAA/C;AAOA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAhCM","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';\nimport type { CompoundButtonState } from './CompoundButton.types';\n\nconst CompoundButtonClassNames = {\n  secondaryContent: 'CompoundButton-secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  base: theme => ({\n    // TODO: remove unsafe property: https://caniuse.com/?search=gap\n    gap: buttonSpacing.large,\n\n    height: 'auto',\n\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2Pressed,\n      },\n    },\n  }),\n  small: theme => ({\n    padding: buttonSpacing.medium,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  medium: theme => ({\n    padding: buttonSpacing.large,\n\n    fontSize: theme.global.type.fontSizes.base[300],\n    lineHeight: theme.global.type.lineHeights.base[300],\n  }),\n  large: theme => ({\n    padding: buttonSpacing.larger,\n\n    fontSize: theme.global.type.fontSizes.base[400],\n    lineHeight: theme.global.type.lineHeights.base[400],\n  }),\n  primary: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundOnBrand,\n      },\n    },\n  }),\n  subtle: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  transparent: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandHover,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForeground2BrandPressed,\n      },\n    },\n  }),\n  disabled: theme => ({\n    [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n      color: theme.alias.color.neutral.neutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${CompoundButtonClassNames.secondaryContent}`]: {\n        color: theme.alias.color.neutral.neutralForegroundDisabled,\n      },\n    },\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  small: {\n    padding: buttonSpacing.smaller,\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    padding: buttonSpacing.small,\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    padding: buttonSpacing.medium,\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  base: theme => ({\n    lineHeight: '100%',\n    marginTop: '4px',\n    fontWeight: theme.global.type.fontWeights.regular,\n  }),\n  small: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  medium: theme => ({\n    fontSize: theme.global.type.fontSizes.base[200],\n  }),\n  large: theme => ({\n    fontSize: theme.global.type.fontSizes.base[300],\n  }),\n});\n\nexport const useCompoundButtonStyles = (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  state.className = mergeClasses(\n    rootStyles.base,\n    rootStyles[state.size],\n    state.primary && rootStyles.primary,\n    state.subtle && rootStyles.subtle,\n    state.transparent && rootStyles.transparent,\n    (state.disabled || state.disabledFocusable) && rootStyles.disabled,\n    state.iconOnly && rootIconOnlyStyles[state.size],\n    state.className,\n  );\n\n  state.icon.className = mergeClasses(iconStyles.base, state.icon.className);\n\n  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);\n\n  state.secondaryContent.className = mergeClasses(\n    CompoundButtonClassNames.secondaryContent,\n    secondaryContentStyles.base,\n    secondaryContentStyles[state.size],\n    state.secondaryContent.className,\n  );\n\n  useButtonStyles(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { MenuTriggerChildProps } from '@fluentui/react-menu';
 import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<MenuTriggerChildProps> & {
+export declare type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> & Partial<Omit<MenuTriggerChildProps, 'ref'>> & {
     /**
      * Menu icon that indicates that this button has a menu that can be expanded.
      */

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 type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<MenuTriggerChildProps> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport interface MenuButtonState\n  extends Omit<ButtonState, 'iconPosition'>,\n    ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {}\n"]}
+{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { MenuTriggerChildProps } from '@fluentui/react-menu';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n  ButtonDefaultedProps,\n  ButtonProps,\n  ButtonShorthandPropsCompat,\n  ButtonState,\n} from '../Button/Button.types';\n\nexport type MenuButtonProps = Omit<ButtonProps, 'iconPosition'> &\n  Partial<Omit<MenuTriggerChildProps, 'ref'>> & {\n    /**\n     * Menu icon that indicates that this button has a menu that can be expanded.\n     */\n    menuIcon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n  };\n\nexport type MenuButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'menuIcon';\n\nexport type MenuButtonDefaultedProps = ButtonDefaultedProps | 'menuIcon';\n\nexport interface MenuButtonState\n  extends Omit<ButtonState, 'iconPosition'>,\n    ComponentStateCompat<MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonDefaultedProps> {}\n"]}

package/lib/components/MenuButton/renderMenuButton.js

@@ -12,7 +12,8 @@ export var renderMenuButton = function (state) {
       slotProps = _a.slotProps;
 
   var children = state.children,
+      icon = state.icon,
       iconOnly = state.iconOnly;
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && children, !iconOnly && /*#__PURE__*/React.createElement(slots.menuIcon, __assign({}, slotProps.menuIcon)));
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && children, (!iconOnly || !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,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,8BAAT,QAA+C,iBAA/C;AAGA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,8BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAAe,KAAK,CAApB,QAAR;AAAA,MAAU,QAAQ,GAAK,KAAK,CAAV,QAAlB;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,QAFhB,EAGG,CAAC,QAAD,iBAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHhB,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { menuButtonShorthandPropsCompat } from './useMenuButton';\nimport type { 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 = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, menuButtonShorthandPropsCompat);\n  const { children, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {!iconOnly && children}\n      {!iconOnly && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,8BAAT,QAA+C,iBAA/C;AAGA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,8BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAAqB,KAAK,CAA1B,QAAR;AAAA,MAAU,IAAI,GAAe,KAAK,CAApB,IAAd;AAAA,MAAgB,QAAQ,GAAK,KAAK,CAAV,QAAxB;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,QAFhB,EAGG,CAAC,CAAC,QAAD,IAAa,CAAC,IAAI,CAAC,QAApB,kBAAiC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHpC,CADF;AAOD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { menuButtonShorthandPropsCompat } from './useMenuButton';\nimport type { 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 = (state: MenuButtonState) => {\n  const { slots, slotProps } = getSlotsCompat(state, menuButtonShorthandPropsCompat);\n  const { children, icon, iconOnly } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.icon {...slotProps.icon} />\n      {!iconOnly && children}\n      {(!iconOnly || !icon.children) && <slots.menuIcon {...slotProps.menuIcon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,6 +5,8 @@ import type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState }
  */
 export declare const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a MenuButton.
+ * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
  */
 export declare const useMenuButton: (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps | undefined) => MenuButtonState;