npm - @fluentui/react-button - Versions diffs - 9.0.0-alpha.87 → 9.0.0-alpha.88 - Mend

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

Files changed (113) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,36 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Fri, 17 Sep 2021 07:32:57 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": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-button
-This log was last generated on Fri, 17 Sep 2021 07:32:57 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:32:57 GMT
+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

package/dist/react-button.d.ts CHANGED Viewed

@@ -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.
  */
@@ -249,6 +292,15 @@ export declare const useMenuButtonState: (state: MenuButtonState) => MenuButtonS
 export declare const useMenuButtonStyles: (state: MenuButtonState) => MenuButtonState;
+/**
+ * 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.

package/lib/SplitButton.d.ts ADDED Viewed

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

package/lib/SplitButton.js ADDED Viewed

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

package/lib/SplitButton.js.map ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

	@@ -1 +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/"}
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,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/useButtonStyles.js.map CHANGED Viewed

	@@ -1 +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/"}
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 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 CHANGED Viewed

	@@ -1 +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/"}
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,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/useCompoundButtonStyles.js CHANGED Viewed

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

	@@ -1 +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/"}
1	+ {"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/renderMenuButton.js CHANGED Viewed

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

	@@ -1 +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/"}
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,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.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AAGA;;AAEG;;AACH,OAAO,IAAM,8BAA8B,GAAqC,CAAC,MAAD,EAAS,UAAT,CAAzE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAkB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAlB,CAAjC;AAEA;;;;AAIG;;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAsD,YAAtD,EAAoF;AAC/G,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,QAAQ,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KANZ;AAOE;AACA,IAAA,IAAI,EAAE,QARR;AASE,IAAA,IAAI,EAAE;AATR,GADsB,EAYtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,8BAAf,CAZf,EAatB,qBAAqB,CAAC,KAAD,EAAQ,8BAAR,CAbC,CAAxB;AAgBA,EAAA,kBAAkB,CAAC,KAAD,CAAlB;AAEA,SAAO,KAAP;AACD,CApBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState } from './MenuButton.types';\n\n/*\n Consts listing which props are shorthand props.\n /\nexport const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[] = ['icon', 'menuIcon'];\n\nconst mergeProps = makeMergeProps<MenuButtonState>({ deepMerge: menuButtonShorthandPropsCompat });\n\n/\n Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n const state = mergeProps(\n {\n ref,\n as: 'button',\n // Button slots\n icon: { as: 'span' },\n // MenuButton slots\n menuIcon: { 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, menuButtonShorthandPropsCompat),\n resolveShorthandProps(props, menuButtonShorthandPropsCompat),\n ) ~~as MenuButtonState~~;\n\n useMenuButtonState(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/MenuButton/useMenuButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AAGA;;AAEG;;AACH,OAAO,IAAM,8BAA8B,GAAqC,CAAC,MAAD,EAAS,UAAT,CAAzE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAkB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAlB,CAAjC;AAEA;;;;AAIG;;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAsD,YAAtD,EAAoF;AAC/G,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,QAAQ,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KANZ;AAOE;AACA,IAAA,IAAI,EAAE,QARR;AASE,IAAA,IAAI,EAAE;AATR,GADsB,EAYtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,8BAAf,CAZf,EAatB,qBAAqB,CAAC,KAAD,EAAQ,8BAAR,CAbC,CAAxB;AAgBA,EAAA,kBAAkB,CAAC,KAAD,CAAlB;AAEA,SAAO,KAAP;AACD,CApBM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { useMenuButtonState } from './useMenuButtonState';\nimport type { MenuButtonProps, MenuButtonShorthandPropsCompat, MenuButtonState } from './MenuButton.types';\n\n/*\n Consts listing which props are shorthand props.\n /\nexport const menuButtonShorthandPropsCompat: MenuButtonShorthandPropsCompat[] = ['icon', 'menuIcon'];\n\nconst mergeProps = makeMergeProps<MenuButtonState>({ deepMerge: menuButtonShorthandPropsCompat });\n\n/\n Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n const state = mergeProps(\n {\n ref,\n as: 'button',\n // Button slots\n icon: { as: 'span' },\n // MenuButton slots\n menuIcon: { 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, menuButtonShorthandPropsCompat),\n resolveShorthandProps(props, menuButtonShorthandPropsCompat),\n );\n\n useMenuButtonState(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -10,8 +10,10 @@ import { useButtonState } from '../Button/useButtonState';
 export var useMenuButtonState = function (state) {
   // It behaves like a button.
   useButtonState(state);
-  var menuIcon = state.menuIcon,
+  var children = state.children,
+      menuIcon = state.menuIcon,
       size = state.size;
+  state.iconOnly = !children;
   if (!menuIcon.children) {
     if (size === 'large') {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/MenuButton/useMenuButtonState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,oBAA/B,QAA2D,uBAA3D;AACA,SAAS,cAAT,QAA+B,0BAA/B;AAGA;;;;AAIG;;AACH,OAAO,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAuB;AACvD;AACA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEQ,MAAA,QAAQ,~~GAAW~~,KAAK,~~CAAhB~~,QAAR;AAAA,MAAU,IAAI,GAAK,KAAK,CAAV,~~IAAd;;~~AACR,MAAI,CAAC,QAAQ,CAAC,QAAd,EAAwB;AACtB,QAAI,IAAI,KAAK,OAAb,EAAsB;AACpB,MAAA,QAAQ,CAAC,QAAT,gBAAoB,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAApB;AACD,KAFD,MAEO;AACL,MAAA,QAAQ,CAAC,QAAT,gBAAoB,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAApB;AACD;AACF;;AAED,SAAO,KAAP;AACD,~~CAdM~~","sourcesContent":["import * as React from 'react';\nimport { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';\nimport { useButtonState } from '../Button/useButtonState';\nimport type { MenuButtonState } from './MenuButton.types';\n\n/*\n The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any\n * additional MenuButton specific processing.\n * @param state - MenuButtonButton state to mutate.\n */\nexport const useMenuButtonState = (state: MenuButtonState): MenuButtonState => {\n // It behaves like a button.\n useButtonState(state);\n\n const { menuIcon, size } = state;\n if (!menuIcon.children) {\n if (size === 'large') {\n menuIcon.children = <ChevronDown24Regular />;\n } else {\n menuIcon.children = <ChevronDown20Regular />;\n }\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/MenuButton/useMenuButtonState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,oBAA/B,QAA2D,uBAA3D;AACA,SAAS,cAAT,QAA+B,0BAA/B;AAGA;;;;AAIG;;AACH,OAAO,IAAM,kBAAkB,GAAG,UAAC,KAAD,EAAuB;AACvD;AACA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEQ,MAAA,QAAQ,GAAqB,KAAK,CAA1B,QAAR;AAAA,MAAU,QAAQ,GAAW,KAAK,CAAhB,QAAlB;AAAA,MAAoB,IAAI,GAAK,KAAK,CAAV,IAAxB;AACR,EAAA,KAAK,CAAC,QAAN,GAAiB,CAAC,QAAlB;;AACA,MAAI,CAAC,QAAQ,CAAC,QAAd,EAAwB;AACtB,QAAI,IAAI,KAAK,OAAb,EAAsB;AACpB,MAAA,QAAQ,CAAC,QAAT,gBAAoB,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAApB;AACD,KAFD,MAEO;AACL,MAAA,QAAQ,CAAC,QAAT,gBAAoB,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAApB;AACD;AACF;;AAED,SAAO,KAAP;AACD,CAfM","sourcesContent":["import * as React from 'react';\nimport { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';\nimport { useButtonState } from '../Button/useButtonState';\nimport type { MenuButtonState } from './MenuButton.types';\n\n/*\n The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any\n * additional MenuButton specific processing.\n * @param state - MenuButtonButton state to mutate.\n */\nexport const useMenuButtonState = (state: MenuButtonState): MenuButtonState => {\n // It behaves like a button.\n useButtonState(state);\n\n const { children, menuIcon, size } = state;\n state.iconOnly = !children;\n if (!menuIcon.children) {\n if (size === 'large') {\n menuIcon.children = <ChevronDown24Regular />;\n } else {\n menuIcon.children = <ChevronDown20Regular />;\n }\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,4 +1,4 @@
-import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
 import { useButtonStyles } from '../Button/useButtonStyles';
 var useMenuIconStyles = /*#__PURE__*/__styles({

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,~~SAAS~~,~~YAAT~~,~~kBAAyC~~,6BAAzC;AACA,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;;AAkBA,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CARM","sourcesContent":["import { ~~mergeClasses~~, ~~makeStyles~~ } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nconst useMenuIconStyles = makeStyles({\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useMenuButtonStyles = (state: MenuButtonState): MenuButtonState => {\n const menuIconStyles = useMenuIconStyles();\n\n state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n\n useButtonStyles(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,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;;AAkBA,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { useButtonStyles } from '../Button/useButtonStyles';\nimport type { MenuButtonState } from './MenuButton.types';\n\nconst useMenuIconStyles = makeStyles({\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useMenuButtonStyles = (state: MenuButtonState): MenuButtonState => {\n const menuIconStyles = useMenuIconStyles();\n\n state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);\n\n useButtonStyles(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/SplitButton.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { SplitButtonProps } from './SplitButton.types';
+/**
+ * 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.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLElement>>;

package/lib/components/SplitButton/SplitButton.js ADDED Viewed

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Button } from '../Button/index';
+import { MenuButton } from '../MenuButton/index';
+import { renderSplitButton } from './renderSplitButton';
+import { useSplitButton } from './useSplitButton';
+import { useSplitButtonStyles } from './useSplitButtonStyles';
+/**
+ * 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 var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useSplitButton(props, ref, {
+    button: {
+      as: Button
+    },
+    menuButton: {
+      as: MenuButton
+    }
+  });
+  useSplitButtonStyles(state);
+  return renderSplitButton(state);
+});
+SplitButton.displayName = 'SplitButton';
+//# sourceMappingURL=SplitButton.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,iBAAvB;AACA,SAAS,UAAT,QAA2B,qBAA3B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAGA;;;AAGG;;AACH,OAAO,IAAM,WAAW,gBAAG,KAAK,CAAC,UAAN,CAAgD,UAAC,KAAD,EAAQ,GAAR,EAAW;AACpF,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,EAAa;AACvC,IAAA,MAAM,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN,KAD+B;AAEvC,IAAA,UAAU,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN;AAF2B,GAAb,CAA5B;AAKA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CAT0B,CAApB;AAWP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Button } from '../Button/index';\nimport { MenuButton } from '../MenuButton/index';\nimport { renderSplitButton } from './renderSplitButton';\nimport { useSplitButton } from './useSplitButton';\nimport { useSplitButtonStyles } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>((props, ref) => {\n const state = useSplitButton(props, ref, {\n button: { as: Button },\n menuButton: { as: MenuButton },\n });\n\n useSplitButtonStyles(state);\n\n return renderSplitButton(state);\n});\n\nSplitButton.displayName = 'SplitButton';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ButtonProps, ButtonShorthandPropsCompat } from '../Button/Button.types';
+import type { MenuButtonProps } from '../MenuButton/MenuButton.types';
+export 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.Ref<HTMLElement>;
+    /**
+     * Ref to the MenuButton element.
+     */
+    menuButtonRef?: React.Ref<HTMLElement>;
+}
+export declare type SplitButtonShorthandPropsCompat = 'button' | 'menuButton';
+export declare type SplitButtonDefaultedProps = 'size';
+export interface SplitButtonState extends ComponentStateCompat<SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonDefaultedProps> {
+    /**
+     * Ref to the root element
+     */
+    ref: React.Ref<HTMLElement>;
+}

package/lib/components/SplitButton/SplitButton.types.js ADDED Viewed

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"SplitButton.types.js","sourceRoot":"../src/","sources":["components/SplitButton/SplitButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonShorthandPropsCompat } from '../Button/Button.types';\nimport type { MenuButtonProps } from '../MenuButton/MenuButton.types';\n\nexport interface SplitButtonProps extends Omit<ButtonProps, ButtonShorthandPropsCompat>, MenuButtonProps {\n /**\n * Button to perform primary action in SplitButton.\n */\n button?: ShorthandPropsCompat<ButtonProps>;\n\n /**\n * Button that opens menu with secondary actions in SplitButton.\n */\n menuButton?: ShorthandPropsCompat<MenuButtonProps>;\n\n /**\n * Ref to the Button element.\n */\n buttonRef?: React.Ref<HTMLElement>;\n\n /**\n * Ref to the MenuButton element.\n */\n menuButtonRef?: React.Ref<HTMLElement>;\n}\n\nexport type SplitButtonShorthandPropsCompat = 'button' | 'menuButton';\n\nexport type SplitButtonDefaultedProps = 'size';\n\nexport interface SplitButtonState\n extends ComponentStateCompat<SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonDefaultedProps> {\n /**\n * Ref to the root element\n */\n ref: React.Ref<HTMLElement>;\n}\n"]}

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

@@ -0,0 +1,5 @@
+export * from './SplitButton';
+export * from './SplitButton.types';
+export * from './renderSplitButton';
+export * from './useSplitButton';
+export { useSplitButtonStyles } from './useSplitButtonStyles';

package/lib/components/SplitButton/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+export * from './SplitButton';
+export * from './SplitButton.types';
+export * from './renderSplitButton';
+export * from './useSplitButton';
+export { useSplitButtonStyles } from './useSplitButtonStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { useSplitButtonStyles } from './useSplitButtonStyles';\n"]}

package/lib/components/SplitButton/renderSplitButton.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { SplitButtonState } from './SplitButton.types';
+/**
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element;

package/lib/components/SplitButton/renderSplitButton.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { getSlotsCompat } from '@fluentui/react-utilities';
+import { splitButtonShorthandProps } from './useSplitButton';
+/**
+ * Renders a SplitButton component by passing the state defined props to the appropriate slots.
+ */
+export var renderSplitButton = function (state) {
+  var _a = getSlotsCompat(state, splitButtonShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.button, __assign({}, slotProps.button)), /*#__PURE__*/React.createElement(slots.menuButton, __assign({}, slotProps.menuButton)));
+};
+//# sourceMappingURL=renderSplitButton.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,yBAAT,QAA0C,kBAA1C;AAGA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,yBAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { splitButtonShorthandProps } from './useSplitButton';\nimport type { SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton = (state: SplitButtonState) => {\n const { slots, slotProps } = getSlotsCompat(state, splitButtonShorthandProps);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.button {...slotProps.button} />\n <slots.menuButton {...slotProps.menuButton} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/SplitButton/useSplitButton.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonState } from './SplitButton.types';
+export declare const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[];
+/**
+ * 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.Ref<HTMLElement>, defaultProps?: SplitButtonProps | undefined) => SplitButtonState;

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

@@ -0,0 +1,72 @@
+import { __assign, __rest } from "tslib";
+import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
+export var splitButtonShorthandProps = ['button', 'menuButton'];
+var mergeProps = /*#__PURE__*/makeMergeProps({
+  deepMerge: splitButtonShorthandProps
+});
+/**
+ * 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 var useSplitButton = function (props, ref, defaultProps) {
+  var resolvedShorthandProps = resolveShorthandProps(props, splitButtonShorthandProps);
+  var className = props.className;
+  var button = resolvedShorthandProps.button,
+      buttonRef = resolvedShorthandProps.buttonRef,
+      circular = resolvedShorthandProps.circular,
+      disabled = resolvedShorthandProps.disabled,
+      disabledFocusable = resolvedShorthandProps.disabledFocusable,
+      menuButton = resolvedShorthandProps.menuButton,
+      menuButtonRef = resolvedShorthandProps.menuButtonRef,
+      outline = resolvedShorthandProps.outline,
+      primary = resolvedShorthandProps.primary,
+      _a = resolvedShorthandProps.size,
+      size = _a === void 0 ? 'medium' : _a,
+      subtle = resolvedShorthandProps.subtle,
+      transparent = resolvedShorthandProps.transparent,
+      userProps = __rest(resolvedShorthandProps, ["button", "buttonRef", "circular", "disabled", "disabledFocusable", "menuButton", "menuButtonRef", "outline", "primary", "size", "subtle", "transparent"]); // TODO: To be resolved when moving to simplified prop merging
+  // const buttonInternalRef = React.useRef<HTMLElement | null>(null);
+  // const menuButtonInternalRef = React.useRef<HTMLElement | null>(null);
+  var state = mergeProps({
+    'aria-disabled': disabled,
+    as: 'div',
+    className: className,
+    ref: ref,
+    size: size,
+    button: __assign(__assign({
+      as: 'button',
+      // TODO: To be resolved when moving to simplified prop merging
+      // ref: useMergedRefs(buttonRef, buttonInternalRef),
+      circular: circular,
+      disabled: disabled,
+      disabledFocusable: disabledFocusable,
+      outline: outline,
+      primary: primary,
+      size: size,
+      subtle: subtle,
+      transparent: transparent
+    }, userProps), button),
+    menuButton: __assign({
+      as: 'button',
+      // TODO: To be resolved when moving to simplified prop merging
+      // ref: useMergedRefs(menuButtonRef, menuButtonInternalRef),
+      circular: circular,
+      disabled: disabled,
+      disabledFocusable: disabledFocusable,
+      outline: outline,
+      primary: primary,
+      size: size,
+      subtle: subtle,
+      transparent: transparent
+    }, menuButton)
+  }, // TODO: To be resolved when moving to simplified prop merging
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultProps, resolvedShorthandProps);
+  return state;
+};
+//# sourceMappingURL=useSplitButton.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA,OAAO,IAAM,yBAAyB,GAAsC,CAAC,QAAD,EAAW,YAAX,CAArE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAmB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAnB,CAAjC;AAEA;;;;AAIG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,KAD4B,EAE5B,GAF4B,EAG5B,YAH4B,EAGG;AAE/B,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,KAAD,EAAQ,yBAAR,CAApD;AACQ,MAAA,SAAS,GAAK,KAAK,CAAV,SAAT;;AAEN,MAAA,MAAM,GAaJ,sBAAsB,CAblB,MAAN;AAAA,MACA,SAAS,GAYP,sBAAsB,CAZf,SADT;AAAA,MAEA,QAAQ,GAWN,sBAAsB,CAXhB,QAFR;AAAA,MAGA,QAAQ,GAUN,sBAAsB,CAVhB,QAHR;AAAA,MAIA,iBAAiB,GASf,sBAAsB,CATP,iBAJjB;AAAA,MAKA,UAAU,GAQR,sBAAsB,CARd,UALV;AAAA,MAMA,aAAa,GAOX,sBAAsB,CAPX,aANb;AAAA,MAOA,OAAO,GAML,sBAAsB,CANjB,OAPP;AAAA,MAQA,OAAO,GAKL,sBAAsB,CALjB,OARP;AAAA,MASA,EAAA,GAIE,sBAAsB,CAJT,IATf;AAAA,MASA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EATf;AAAA,MAUA,MAAM,GAGJ,sBAAsB,CAHlB,MAVN;AAAA,MAWA,WAAW,GAET,sBAAsB,CAFb,WAXX;AAAA,MAYG,SAAS,GAAA,MAAA,CACV,sBADU,EAbR,CAAA,QAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,aAAA,CAaQ,CAZZ,CAL6B,CAoB/B;AACA;AACA;;;AAEA,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,qBAAiB,QADnB;AAEE,IAAA,EAAE,EAAE,KAFN;AAGE,IAAA,SAAS,EAAA,SAHX;AAIE,IAAA,GAAG,EAAA,GAJL;AAKE,IAAA,IAAI,EAAA,IALN;AAOE,IAAA,MAAM,EAAA,QAAA,CAAA,QAAA,CAAA;AACJ,MAAA,EAAE,EAAE,QADA;AAEJ;AACA;AACA,MAAA,QAAQ,EAAA,QAJJ;AAKJ,MAAA,QAAQ,EAAA,QALJ;AAMJ,MAAA,iBAAiB,EAAA,iBANb;AAOJ,MAAA,OAAO,EAAA,OAPH;AAQJ,MAAA,OAAO,EAAA,OARH;AASJ,MAAA,IAAI,EAAA,IATA;AAUJ,MAAA,MAAM,EAAA,MAVF;AAWJ,MAAA,WAAW,EAAA;AAXP,KAAA,EAYD,SAZC,CAAA,EAaD,MAbC,CAPR;AAuBE,IAAA,UAAU,EAAA,QAAA,CAAA;AACR,MAAA,EAAE,EAAE,QADI;AAER;AACA;AACA,MAAA,QAAQ,EAAA,QAJA;AAKR,MAAA,QAAQ,EAAA,QALA;AAMR,MAAA,iBAAiB,EAAA,iBANT;AAOR,MAAA,OAAO,EAAA,OAPC;AAQR,MAAA,OAAO,EAAA,OARC;AASR,MAAA,IAAI,EAAA,IATI;AAUR,MAAA,MAAM,EAAA,MAVE;AAWR,MAAA,WAAW,EAAA;AAXH,KAAA,EAYL,UAZK;AAvBZ,GADsB,EAuCtB;AACA;AACA,EAAA,YAzCsB,EA0CtB,sBA1CsB,CAAxB;AA6CA,SAAO,KAAP;AACD,CAzEM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport type { SplitButtonProps, SplitButtonShorthandPropsCompat, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonShorthandProps: SplitButtonShorthandPropsCompat[] = ['button', 'menuButton'];\n\nconst mergeProps = makeMergeProps<SplitButtonState>({ deepMerge: splitButtonShorthandProps });\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLElement>,\n defaultProps?: SplitButtonProps,\n): SplitButtonState => {\n const resolvedShorthandProps = resolveShorthandProps(props, splitButtonShorthandProps);\n const { className } = props;\n const {\n button,\n buttonRef,\n circular,\n disabled,\n disabledFocusable,\n menuButton,\n menuButtonRef,\n outline,\n primary,\n size = 'medium',\n subtle,\n transparent,\n ...userProps\n } = resolvedShorthandProps;\n\n // TODO: To be resolved when moving to simplified prop merging\n // const buttonInternalRef = React.useRef<HTMLElement | null>(null);\n // const menuButtonInternalRef = React.useRef<HTMLElement | null>(null);\n\n const state = mergeProps(\n {\n 'aria-disabled': disabled,\n as: 'div',\n className,\n ref,\n size,\n\n button: {\n as: 'button',\n // TODO: To be resolved when moving to simplified prop merging\n // ref: useMergedRefs(buttonRef, buttonInternalRef),\n circular,\n disabled,\n disabledFocusable,\n outline,\n primary,\n size,\n subtle,\n transparent,\n ...userProps,\n ...button,\n },\n\n menuButton: {\n as: 'button',\n // TODO: To be resolved when moving to simplified prop merging\n // ref: useMergedRefs(menuButtonRef, menuButtonInternalRef),\n circular,\n disabled,\n disabledFocusable,\n outline,\n primary,\n size,\n subtle,\n transparent,\n ...menuButton,\n },\n },\n // TODO: To be resolved when moving to simplified prop merging\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n defaultProps as any,\n resolvedShorthandProps,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

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