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

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

Files changed (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;