npm - @fluentui/react-button - Versions diffs - 9.0.0-alpha.85 → 9.0.0-alpha.89 - Mend

@fluentui/react-button 9.0.0-alpha.85 → 9.0.0-alpha.89

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 (190) hide show

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/CompoundButton.d.ts CHANGED Viewed

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import type { CompoundButtonProps } from './CompoundButton.types';
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
-export declare const CompoundButton: React.ForwardRefExoticComponent<CompoundButtonProps & React.RefAttributes<HTMLElement>>;
+export declare const CompoundButton: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.ButtonHTMLAttributes<HTMLElement> & {
+    icon?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    block?: boolean | undefined;
+    circular?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledFocusable?: boolean | undefined;
+    iconPosition?: "before" | "after" | undefined;
+    outline?: boolean | undefined;
+    primary?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    subtle?: boolean | undefined;
+    transparent?: boolean | undefined;
+} & {
+    secondaryContent?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    contentContainer?: import("@fluentui/react-utilities").ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+} & React.RefAttributes<HTMLElement>>;

package/lib/components/CompoundButton/CompoundButton.types.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 import type { ButtonDefaultedProps, ButtonProps, ButtonShorthandPropsCompat, ButtonState } from '../Button/Button.types';
-export interface CompoundButtonProps extends ButtonProps {
+export declare type CompoundButtonProps = ButtonProps & {
     /**
      * Second line of text that describes the action this button takes.
      */
@@ -10,8 +10,7 @@ export interface CompoundButtonProps extends ButtonProps {
      * Container that wraps the children and secondaryContent slots.
      */
     contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
+};
 export declare type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat | 'contentContainer' | 'secondaryContent';
 export declare type CompoundButtonDefaultedProps = ButtonDefaultedProps | 'contentContainer' | 'secondaryContent';
-export interface CompoundButtonState extends ButtonState, ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps> {
-}
+export declare type CompoundButtonState = ButtonState & ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;

package/lib/components/CompoundButton/CompoundButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n ButtonDefaultedProps,\n ButtonProps,\n ButtonShorthandPropsCompat,\n ButtonState,\n} from '../Button/Button.types';\n\nexport ~~interface~~ CompoundButtonProps ~~extends~~ ButtonProps {\n /*\n Second line of text that describes the action this button takes.\n /\n secondaryContent?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n /\n Container that wraps the children and secondaryContent slots.\n */\n contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n}\n\nexport type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat \| 'contentContainer' \| 'secondaryContent';\n\nexport type CompoundButtonDefaultedProps = ButtonDefaultedProps \| 'contentContainer' \| 'secondaryContent';\n\nexport ~~interface~~ CompoundButtonState~~\n extends~~ ButtonState,\n ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps~~> {}\~~n"]}
1	+ {"version":3,"file":"CompoundButton.types.js","sourceRoot":"../src/","sources":["components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';\nimport type {\n ButtonDefaultedProps,\n ButtonProps,\n ButtonShorthandPropsCompat,\n ButtonState,\n} from '../Button/Button.types';\n\nexport type CompoundButtonProps = ButtonProps & {\n /*\n Second line of text that describes the action this button takes.\n /\n secondaryContent?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n /\n Container that wraps the children and secondaryContent slots.\n */\n contentContainer?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n};\n\nexport type CompoundButtonShorthandPropsCompat = ButtonShorthandPropsCompat \| 'contentContainer' \| 'secondaryContent';\n\nexport type CompoundButtonDefaultedProps = ButtonDefaultedProps \| 'contentContainer' \| 'secondaryContent';\n\nexport type CompoundButtonState = ButtonState &\n ComponentStateCompat<CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundButtonDefaultedProps>;\n"]}

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/useCompoundButton.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ import type { CompoundButtonProps, CompoundButtonShorthandPropsCompat, CompoundB
  */
 export declare const compoundButtonShorthandPropsCompat: CompoundButtonShorthandPropsCompat[];
 /**
- * Given user props, returns the final state for a CompoundButton.
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the CompoundButton component.
+ * @param ref - User provided ref to be passed to the CompoundButton component.
  */
 export declare const useCompoundButton: (props: CompoundButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: CompoundButtonProps | undefined) => CompoundButtonState;

package/lib/components/CompoundButton/useCompoundButton.js CHANGED Viewed

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

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

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

package/lib/components/CompoundButton/useCompoundButtonStyles.js 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/MenuButton.types.d.ts CHANGED Viewed

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

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

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

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.d.ts CHANGED Viewed

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

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

@@ -9,12 +9,12 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
   deepMerge: menuButtonShorthandPropsCompat
 });
 /**
- * Given user props, returns the final state for a MenuButton.
+ * Given user props, defines default props for the MenuButton, calls useButtonState, and returns processed state.
+ * @param props - User provided props to the MenuButton component.
+ * @param ref - User provided ref to be passed to the MenuButton component.
  */
 export var useMenuButton = function (props, ref, defaultProps) {
-  // Note: because menu button's template and slots are different, we can't reuse
-  // those, but the useMenuButtonState hook can reuse useButtonState.
   var state = mergeProps({
     ref: ref,
     as: 'button',

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;;~~AAEG;;~~AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAsD,YAAtD,EAAoF;AAC/G~~;AACA;AACA~~,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,~~CAtBM~~","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, ~~returns~~ the ~~final~~ state ~~for~~ a MenuButton.\n */\nexport const useMenuButton = (props: MenuButtonProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuButtonProps) => {\n ~~// Note: because menu button's template and slots are different, we can't reuse\n // those, but the useMenuButtonState hook can reuse useButtonState.\n~~ const state = mergeProps(\n {\n ref,\n as: 'button',\n // 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.d.ts CHANGED Viewed

@@ -1,2 +1,7 @@
 import type { MenuButtonState } from './MenuButton.types';
+/**
+ * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any
+ * additional MenuButton specific processing.
+ * @param state - MenuButtonButton state to mutate.
+ */
 export declare const useMenuButtonState: (state: MenuButtonState) => MenuButtonState;

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

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';
 import { useButtonState } from '../Button/useButtonState';
+/**
+ * The useMenuButtonState hook processes the MenuButton state, first calling useButtonState, and then adding any
+ * additional MenuButton specific processing.
+ * @param state - MenuButtonButton state to mutate.
+ */
 export 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,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\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