@fluentui/react-button 9.11.2 → 9.11.3
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.
- package/CHANGELOG.md +11 -2
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.js.map +1 -1
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.js +2 -2
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.js +1 -1
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.js +2 -2
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/renderMenuButton.js +2 -2
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/renderSplitButton.js +2 -2
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib/components/ToggleButton/index.js.map +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +12 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js +11 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
- package/lib/contexts/ButtonContext.js.map +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/useToggleState.js.map +1 -1
- package/lib-commonjs/Button.cjs +7 -7
- package/lib-commonjs/CompoundButton.cjs +7 -7
- package/lib-commonjs/MenuButton.cjs +7 -7
- package/lib-commonjs/SplitButton.cjs +7 -7
- package/lib-commonjs/ToggleButton.cjs +7 -7
- package/lib-commonjs/components/Button/Button.cjs.map +1 -1
- package/lib-commonjs/components/Button/Button.types.cjs.map +1 -1
- package/lib-commonjs/components/Button/index.cjs +7 -7
- package/lib-commonjs/components/Button/index.cjs.map +1 -1
- package/lib-commonjs/components/Button/renderButton.cjs.map +1 -1
- package/lib-commonjs/components/Button/useButton.cjs +4 -4
- package/lib-commonjs/components/Button/useButton.cjs.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.styles.cjs +3 -3
- package/lib-commonjs/components/Button/useButtonStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/Button/useButtonStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.cjs.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.cjs.map +1 -1
- package/lib-commonjs/components/CompoundButton/index.cjs +7 -7
- package/lib-commonjs/components/CompoundButton/index.cjs.map +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.cjs.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.cjs +3 -3
- package/lib-commonjs/components/CompoundButton/useCompoundButton.cjs.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.cjs +3 -3
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.cjs.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.cjs.map +1 -1
- package/lib-commonjs/components/MenuButton/index.cjs +7 -7
- package/lib-commonjs/components/MenuButton/index.cjs.map +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.cjs.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.cjs +3 -3
- package/lib-commonjs/components/MenuButton/useMenuButton.cjs.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.cjs +3 -3
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.cjs.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.cjs.map +1 -1
- package/lib-commonjs/components/SplitButton/index.cjs +7 -7
- package/lib-commonjs/components/SplitButton/index.cjs.map +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.cjs.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.cjs +3 -3
- package/lib-commonjs/components/SplitButton/useSplitButton.cjs.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.cjs +3 -3
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.cjs.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.cjs.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.cjs +7 -7
- package/lib-commonjs/components/ToggleButton/index.cjs.map +1 -1
- package/lib-commonjs/components/ToggleButton/renderToggleButton.cjs.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.cjs +3 -3
- package/lib-commonjs/components/ToggleButton/useToggleButton.cjs.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.cjs +27 -4
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.cjs +14 -4
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/contexts/ButtonContext.cjs +3 -3
- package/lib-commonjs/contexts/ButtonContext.cjs.map +1 -1
- package/lib-commonjs/contexts/index.cjs +3 -3
- package/lib-commonjs/contexts/index.cjs.map +1 -1
- package/lib-commonjs/index.cjs +34 -34
- package/lib-commonjs/index.cjs.map +1 -1
- package/lib-commonjs/utils/index.cjs.map +1 -1
- package/lib-commonjs/utils/useToggleState.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/useButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\n/* Firefox has box shadow sizing issue at some zoom levels\n * this will ensure the inset boxShadow is always uniform\n * without affecting other browser platforms\n */\nconst boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n\n margin: 0,\n overflow: 'hidden',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n },\n\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n\n // Transition styles\n\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n // High contrast styles\n\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText',\n },\n\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n\n // Focus styles\n\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorStrokeFocus2,\n borderRadius: tokens.borderRadiusMedium,\n borderWidth: '1px',\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}\n inset\n `,\n zIndex: 1,\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}\n inset\n `,\n }),\n },\n});\n\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('HighlightText'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\n },\n ':hover:active,:active:focus-visible': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n },\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: { borderRadius: tokens.borderRadiusNone },\n\n // Size variations\n small: {\n minWidth: '64px',\n padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n smallWithIcon: {\n paddingBottom: buttonSpacingSmallWithIcon,\n paddingTop: buttonSpacingSmallWithIcon,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n minWidth: '96px',\n padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n largeWithIcon: {\n paddingBottom: buttonSpacingLargeWithIcon,\n paddingTop: buttonSpacingLargeWithIcon,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n rounded: {\n /* The rounded styles are exactly the same as the base styles. */\n },\n square: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n\n // Primary styles\n primary: {\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n },\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,\n },\n }),\n },\n },\n\n // Size variations\n small: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusSmall }),\n medium: {\n /* defined in base styles */\n },\n large: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusLarge }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: buttonSpacingSmallWithIcon,\n\n minWidth: '24px',\n maxWidth: '24px',\n },\n medium: {\n padding: buttonSpacingMedium,\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n padding: buttonSpacingLargeWithIcon,\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n buttonClassNames.root,\n rootBaseClassName,\n\n appearance && rootStyles[appearance],\n\n rootStyles[size],\n icon && size === 'small' && rootStyles.smallWithIcon,\n icon && size === 'large' && rootStyles.largeWithIcon,\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n buttonClassNames.icon,\n iconBaseClassName,\n !!state.root.children && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","makeStyles","makeResetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","boxShadowStrokeWidthThinMoz","strokeWidthThin","useRootBaseClassName","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","margin","overflow","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","border","colorNeutralStroke1","fontFamily","fontFamilyBase","outlineStyle","colorNeutralBackground1Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground1Hover","cursor","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","padding","spacingHorizontalM","minWidth","borderRadius","borderRadiusMedium","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase300","transitionDuration","durationFaster","transitionProperty","transitionTimingFunction","curveEasyEase","forcedColorAdjust","colorStrokeFocus2","borderWidth","outline","strokeWidthThick","colorTransparentStroke","boxShadow","zIndex","useIconBaseClassName","height","width","spacingHorizontalSNudge","useRootStyles","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackground","colorNeutralForeground2","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","colorNeutralForeground2BrandPressed","transparent","circular","borderRadiusCircular","rounded","square","borderRadiusNone","small","spacingHorizontalS","fontSizeBase200","fontWeightRegular","lineHeightBase200","smallWithIcon","paddingBottom","paddingTop","medium","large","spacingHorizontalL","fontSizeBase400","lineHeightBase400","largeWithIcon","useRootDisabledStyles","base","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","highContrast","useRootFocusStyles","shadow2","borderRadiusSmall","borderRadiusLarge","useRootIconOnlyStyles","maxWidth","useIconStyles","spacingHorizontalXS","before","marginRight","after","marginLeft","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/useButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\n/* Firefox has box shadow sizing issue at some zoom levels\n * this will ensure the inset boxShadow is always uniform\n * without affecting other browser platforms\n */\nconst boxShadowStrokeWidthThinMoz = `calc(${tokens.strokeWidthThin} + 0.25px)`;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n\n margin: 0,\n overflow: 'hidden',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n },\n\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n\n // Transition styles\n\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n // High contrast styles\n\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText',\n },\n\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n\n // Focus styles\n\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorStrokeFocus2,\n borderRadius: tokens.borderRadiusMedium,\n borderWidth: '1px',\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}\n inset\n `,\n zIndex: 1,\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2}\n inset\n `,\n }),\n },\n});\n\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('HighlightText'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\n },\n ':hover:active,:active:focus-visible': {\n color: 'Highlight',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n color: 'Highlight',\n },\n },\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: { borderRadius: tokens.borderRadiusNone },\n\n // Size variations\n small: {\n minWidth: '64px',\n padding: `${buttonSpacingSmall} ${tokens.spacingHorizontalS}`,\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n smallWithIcon: {\n paddingBottom: buttonSpacingSmallWithIcon,\n paddingTop: buttonSpacingSmallWithIcon,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n minWidth: '96px',\n padding: `${buttonSpacingLarge} ${tokens.spacingHorizontalL}`,\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n largeWithIcon: {\n paddingBottom: buttonSpacingLargeWithIcon,\n paddingTop: buttonSpacingLargeWithIcon,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n [`& .${buttonClassNames.icon}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n rounded: {\n /* The rounded styles are exactly the same as the base styles. */\n },\n square: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n\n // Primary styles\n primary: {\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n },\n }),\n\n // BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642)\n '@supports (-moz-appearance:button)': {\n ...createCustomFocusIndicatorStyle({\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset, 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,\n ':hover': {\n boxShadow: `${tokens.shadow2}, 0 0 0 ${boxShadowStrokeWidthThinMoz} ${tokens.colorStrokeFocus2} inset`,\n },\n }),\n },\n },\n\n // Size variations\n small: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusSmall }),\n medium: {\n /* defined in base styles */\n },\n large: createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusLarge }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: buttonSpacingSmallWithIcon,\n\n minWidth: '24px',\n maxWidth: '24px',\n },\n medium: {\n padding: buttonSpacingMedium,\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n padding: buttonSpacingLargeWithIcon,\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n buttonClassNames.root,\n rootBaseClassName,\n\n appearance && rootStyles[appearance],\n\n rootStyles[size],\n icon && size === 'small' && rootStyles.smallWithIcon,\n icon && size === 'large' && rootStyles.largeWithIcon,\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n buttonClassNames.icon,\n iconBaseClassName,\n !!state.root.children && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","makeStyles","makeResetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","boxShadowStrokeWidthThinMoz","strokeWidthThin","useRootBaseClassName","alignItems","boxSizing","display","justifyContent","textDecorationLine","verticalAlign","margin","overflow","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","border","colorNeutralStroke1","fontFamily","fontFamilyBase","outlineStyle","colorNeutralBackground1Hover","borderColor","colorNeutralStroke1Hover","colorNeutralForeground1Hover","cursor","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","padding","spacingHorizontalM","minWidth","borderRadius","borderRadiusMedium","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase300","transitionDuration","durationFaster","transitionProperty","transitionTimingFunction","curveEasyEase","forcedColorAdjust","colorStrokeFocus2","borderWidth","outline","strokeWidthThick","colorTransparentStroke","boxShadow","zIndex","useIconBaseClassName","height","width","spacingHorizontalSNudge","useRootStyles","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackground","colorNeutralForeground2","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","colorNeutralForeground2BrandPressed","transparent","circular","borderRadiusCircular","rounded","square","borderRadiusNone","small","spacingHorizontalS","fontSizeBase200","fontWeightRegular","lineHeightBase200","smallWithIcon","paddingBottom","paddingTop","medium","large","spacingHorizontalL","fontSizeBase400","lineHeightBase400","largeWithIcon","useRootDisabledStyles","base","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","highContrast","useRootFocusStyles","shadow2","borderRadiusSmall","borderRadiusLarge","useRootIconOnlyStyles","maxWidth","useIconStyles","spacingHorizontalXS","before","marginRight","after","marginLeft","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;sCACe,4BAAyB;mCAC5B,yBAAsB;+CAChB,sCAAmC;qCAGxC,kCAAkC;AAKvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQP,6CAAAA,EAA2BK,OAAOC;QAEhDL,+DAAAA,EAAiCM;QAEjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOR,mDAAAA,EAA8BQ;AACrC,0FAA0F;AAC5F,GAA+C;AAE/CJ,eAAeK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /**\n * Second line of text that describes the action this button takes.\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonBaseProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonBaseProps, 'disabledFocusable' | 'disabled' | 'iconPosition'>;\n\nexport type CompoundButtonProps = CompoundButtonBaseProps & Pick<ButtonProps, 'appearance' | 'shape' | 'size'>;\n\nexport type CompoundButtonBaseState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonBaseState, keyof ButtonSlots | 'components'>;\n\nexport type CompoundButtonState = CompoundButtonBaseState & Pick<ButtonState, 'appearance' | 'shape' | 'size'>;\n"],"names":[],"mappings":""}
|
|
@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
CompoundButton
|
|
12
|
+
get CompoundButton () {
|
|
13
13
|
return _CompoundButton.CompoundButton;
|
|
14
14
|
},
|
|
15
|
-
compoundButtonClassNames
|
|
15
|
+
get compoundButtonClassNames () {
|
|
16
16
|
return _useCompoundButtonStylesstyles.compoundButtonClassNames;
|
|
17
17
|
},
|
|
18
|
-
renderCompoundButton_unstable
|
|
18
|
+
get renderCompoundButton_unstable () {
|
|
19
19
|
return _renderCompoundButton.renderCompoundButton_unstable;
|
|
20
20
|
},
|
|
21
|
-
useCompoundButtonBase_unstable
|
|
21
|
+
get useCompoundButtonBase_unstable () {
|
|
22
22
|
return _useCompoundButton.useCompoundButtonBase_unstable;
|
|
23
23
|
},
|
|
24
|
-
useCompoundButtonStyles_unstable
|
|
24
|
+
get useCompoundButtonStyles_unstable () {
|
|
25
25
|
return _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable;
|
|
26
26
|
},
|
|
27
|
-
useCompoundButton_unstable
|
|
27
|
+
get useCompoundButton_unstable () {
|
|
28
28
|
return _useCompoundButton.useCompoundButton_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type {\n CompoundButtonBaseProps,\n CompoundButtonBaseState,\n CompoundButtonProps,\n CompoundButtonSlots,\n CompoundButtonState,\n} from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButtonBase_unstable, useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButtonBase_unstable","useCompoundButton_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAUdI,uDAAwB;;;eAFxBH,mDAA6B;;;eAC7BC,iDAA8B;;;eACJG,+DAAgC;;;eAD1BF,6CAA0B;;;gCATpC,sBAAmB;sCAQJ,4BAAyB;mCACI,yBAAsB;+CACtB,sCAAmC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CompoundButtonBaseState, CompoundButtonSlots } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonBaseState): JSXElement => {\n assertSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && (\n <state.contentContainer>\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.contentContainer>\n )}\n\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCompoundButton_unstable","state","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":";;;;+BAWaC;;;;;;;gCAVb,gDAAiD,GAEjD,SAASD,WAAW,QAAQ,4BAA4B;AAQjD,sCAAsC,CAACE;QAC5CF,2BAAAA,EAAiCE;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGF;IAEnC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRD,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;YACrD,CAACH,YAAAA,WAAAA,GACA,oBAAA,EAACD,MAAMK,gBAAgB,EAAA;;oBACpBL,MAAMG,IAAI,CAACG,QAAQ;oBACnBN,MAAMO,gBAAgB,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,gBAAgB,EAAA,CAAA;;;YAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAG5D,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
useCompoundButtonBase_unstable
|
|
13
|
+
get useCompoundButtonBase_unstable () {
|
|
14
14
|
return useCompoundButtonBase_unstable;
|
|
15
15
|
},
|
|
16
|
-
useCompoundButton_unstable
|
|
16
|
+
get useCompoundButton_unstable () {
|
|
17
17
|
return useCompoundButton_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type {\n CompoundButtonBaseProps,\n CompoundButtonBaseState,\n CompoundButtonProps,\n CompoundButtonState,\n} from './CompoundButton.types';\n\n/**\n * Base hook for CompoundButton, which manages state related to slots structure and ARIA attributes.\n *\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 useCompoundButtonBase_unstable = (\n props: CompoundButtonBaseProps,\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonBaseState => {\n const { contentContainer, secondaryContent, ...buttonProps } = props;\n const state: CompoundButtonBaseState = {\n ...useButtonBase_unstable(buttonProps, ref),\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n };\n\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n return state;\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_unstable = (\n props: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium', ...buttonProps } = props;\n const state = useCompoundButtonBase_unstable(buttonProps, ref);\n\n return {\n appearance,\n shape,\n size,\n ...state,\n };\n};\n"],"names":["slot","useButtonContext","useButtonBase_unstable","useCompoundButtonBase_unstable","props","ref","state","contentContainer","secondaryContent","buttonProps","components","root","icon","always","elementType","optional","iconOnly","Boolean","children","useCompoundButton_unstable","size","contextSize","appearance","shape"],"mappings":"AAAA;;;;;;;;;;;;QAmBaG;;;QA0BAgB;;;;gCA1CQ,4BAA4B;+BAChB,kCAA+B;uBACzB,qBAAkB;AAclD,uCAAuC,CAC5Cf,OACAC;QAeyBC,aAA4CA;IAbrE,MAAM,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,aAAa,GAAGL;IAC/D,MAAME,QAAiC;QACrC,OAAGJ,6BAAAA,EAAuBO,aAAaJ,IAAI;QAC3CK,YAAY;YACVC,MAAM;YACNC,MAAM;YACNL,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBP,oBAAAA,CAAKa,MAAM,CAACN,kBAAkB;YAAEO,aAAa;QAAO;QACtEN,kBAAkBR,oBAAAA,CAAKe,QAAQ,CAACP,kBAAkB;YAAEM,aAAa;QAAO;IAC1E;IAEAR,MAAMU,QAAQ,GAAGC,QAAQX,CAAAA,CAAAA,cAAAA,MAAMM,IAAAA,AAAI,MAAA,QAAVN,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAYY,QAAAA,AAAQ,KAAI,CAACd,MAAMc,QAAQ,IAAI,CAAA,CAAA,CAACZ,0BAAAA,MAAME,gBAAAA,AAAgB,MAAA,QAAtBF,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAwBY,QAAAA,AAAQ;IACrG,OAAOZ;AACT,EAAE;AAOK,mCAAmC,CACxCF,OACAC;IAEA,MAAM,EAAEe,MAAMC,WAAW,EAAE,OAAGpB,+BAAAA;IAC9B,MAAM,EAAEqB,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGZ,aAAa,GAAGL;IACxG,MAAME,QAAQH,+BAA+BM,aAAaJ;IAE1D,OAAO;QACLiB;QACAC;QACAH;QACA,GAAGd,KAAK;IACV;AACF,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
compoundButtonClassNames
|
|
13
|
+
get compoundButtonClassNames () {
|
|
14
14
|
return compoundButtonClassNames;
|
|
15
15
|
},
|
|
16
|
-
useCompoundButtonStyles_unstable
|
|
16
|
+
get useCompoundButtonStyles_unstable () {
|
|
17
17
|
return useCompoundButtonStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from \"@fluentui/react-theme\";\nimport { mergeClasses, makeStyles } from \"@griffel/react\";\nimport { useButtonStyles_unstable } from \"../Button/useButtonStyles.styles.js\";\nexport const compoundButtonClassNames = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\n }\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight'\n }\n }\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText'\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n }\n }\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n },\n // Size variations\n small: {\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n medium: {\n padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400\n },\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n }\n }\n }\n});\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: tokens.spacingHorizontalXS,\n maxWidth: '48px',\n minWidth: '48px'\n },\n medium: {\n padding: tokens.spacingHorizontalSNudge,\n maxWidth: '52px',\n minWidth: '52px'\n },\n large: {\n padding: tokens.spacingHorizontalS,\n maxWidth: '56px',\n minWidth: '56px'\n }\n});\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px'\n },\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM\n },\n after: {\n marginLeft: tokens.spacingHorizontalM\n }\n});\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left'\n }\n});\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular\n },\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase200\n },\n large: {\n fontSize: tokens.fontSizeBase300\n }\n});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n iconOnly && rootIconOnlyStyles[size], // User provided class name\n state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bo7webf","highContrast","m3fafd","pus4l6","outline","primary","D126e9","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,wBAAwB;;;IAuNxBmD,gCAAgC;;;;uBAzNJ,gBAAgB;uCAChB,qCAAqC;AACvE,iCAAiC;IACpClD,IAAI,EAAE,oBAAoB;IAC1BC,IAAI,EAAE,0BAA0B;IAChCC,gBAAgB,EAAE,sCAAsC;IACxDC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA,CAAA;IAAAC,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAM,MAAA,EAAA;IAAA;IAAAC,SAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAV,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAM,WAAA,EAAA;QAAAX,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAU,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,QAAA,EAAA;QAAAtB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAqB,oBAAA,EAAA;QAAAf,MAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAmB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAsJrB,CAAC;AACF,MAAMC,qBAAqB,GAAA,WAAA,OAAGtC,eAAA,EAAA;IAAAsB,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAV,MAAA,EAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAT,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAY,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAN,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAiB7B,CAAC;AACF,MAAMM,aAAa,GAAA,WAAA,OAAGzC,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAoB,OAAA,EAAA;QAAAnB,OAAA,EAAA;QAAAiC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAZ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAcrB,CAAC;AACF,MAAMa,yBAAyB,GAAA,WAAA,OAAG/C,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAwC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAhB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOjC,CAAC;AACF,MAAMiB,yBAAyB,GAAA,WAAA,GAAGnD,mBAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAqB,OAAA,EAAA;QAAAuB,OAAA,EAAA;IAAA;IAAA9B,KAAA,EAAA;QAAAM,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,KAAA,EAAA;QAAAH,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgBjC,CAAC;AACK,0CAA0CoB,KAAK,IAAG;IACrD,MAAMC,UAAU,GAAGhD,aAAa,CAAC,CAAC;IAClC,MAAMiD,kBAAkB,GAAGlB,qBAAqB,CAAC,CAAC;IAClD,MAAMmB,UAAU,GAAGhB,aAAa,CAAC,CAAC;IAClC,MAAMiB,sBAAsB,GAAGX,yBAAyB,CAAC,CAAC;IAC1D,MAAMY,sBAAsB,GAAGR,yBAAyB,CAAC,CAAC;IAC1D,MAAM,EAAES,UAAU,EAAE5B,QAAQ,EAAE6B,iBAAiB,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAAA,EAAM,GAAGV,KAAK;IACvF,oDAAA;IACAA,KAAK,CAACnD,IAAI,CAAC8D,SAAS,OAAGlE,mBAAY,EAACG,wBAAwB,CAACC,IAAI,EAAE,cAAA;IACnEoD,UAAU,CAAC/C,IAAI,EAAE+C,UAAU,CAAC1C,YAAY,EAAE+C,UAAU,IAAIL,UAAU,CAACK,UAAU,CAAC,EAAEL,UAAU,CAACS,IAAI,CAAC,EAAE,AAClG,kBADkG;IACjGhC,QAAQ,KAAI6B,iBAAAA,CAAiB,IAAKN,UAAU,CAACvB,QAAQ,EAAE,CAACA,QAAQ,IAAI6B,iBAAAA,CAAiB,IAAKN,UAAU,CAACtB,oBAAoB,EAAE,mBAAA;IAC5H6B,QAAQ,IAAIN,kBAAkB,CAACQ,IAAI,CAAC,EAAE,2BAAA;IACtCV,KAAK,CAACnD,IAAI,CAAC8D,SAAS,CAAC;IACrB,oDAAA;IACAX,KAAK,CAACjD,gBAAgB,CAAC4D,SAAS,OAAGlE,mBAAY,EAACG,wBAAwB,CAACG,gBAAgB,EAAEqD,sBAAsB,CAAClD,IAAI,EAAE8C,KAAK,CAACjD,gBAAgB,CAAC4D,SAAS,CAAC;IACzJ,IAAIX,KAAK,CAAClD,IAAI,EAAE;QACZ,oDAAA;QACAkD,KAAK,CAAClD,IAAI,CAAC6D,SAAS,OAAGlE,mBAAY,EAACG,wBAAwB,CAACE,IAAI,EAAEqD,UAAU,CAACjD,IAAI,EAAE8C,KAAK,CAACnD,IAAI,CAAC+D,QAAQ,KAAKC,SAAS,IAAIb,KAAK,CAACnD,IAAI,CAAC+D,QAAQ,KAAK,IAAI,IAAIT,UAAU,CAACM,YAAY,CAAC,EAAET,KAAK,CAAClD,IAAI,CAAC6D,SAAS,CAAC;IAC5M;IACA,IAAIX,KAAK,CAAChD,gBAAgB,EAAE;QACxB,oDAAA;QACAgD,KAAK,CAAChD,gBAAgB,CAAC2D,SAAS,OAAGlE,mBAAY,EAACG,wBAAwB,CAACI,gBAAgB,EAAEqD,sBAAsB,CAACnD,IAAI,EAAEmD,sBAAsB,CAACK,IAAI,CAAC,EAAEV,KAAK,CAAChD,gBAAgB,CAAC2D,SAAS,CAAC;IAC3L;QACAhE,+CAAwB,EAACqD,KAAK,CAAC;IAC/B,OAAOA,KAAK;AAChB,CAAC"}
|
|
1
|
+
{"version":3,"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from \"@fluentui/react-theme\";\nimport { mergeClasses, makeStyles } from \"@griffel/react\";\nimport { useButtonStyles_unstable } from \"../Button/useButtonStyles.styles.js\";\nexport const compoundButtonClassNames = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\n }\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight'\n }\n }\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText'\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas'\n }\n }\n }\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n },\n // Size variations\n small: {\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n medium: {\n padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400\n },\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n },\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText'\n }\n }\n }\n }\n});\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: tokens.spacingHorizontalXS,\n maxWidth: '48px',\n minWidth: '48px'\n },\n medium: {\n padding: tokens.spacingHorizontalSNudge,\n maxWidth: '52px',\n minWidth: '52px'\n },\n large: {\n padding: tokens.spacingHorizontalS,\n maxWidth: '56px',\n minWidth: '56px'\n }\n});\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px'\n },\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM\n },\n after: {\n marginLeft: tokens.spacingHorizontalM\n }\n});\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left'\n }\n});\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular\n },\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase200\n },\n large: {\n fontSize: tokens.fontSizeBase300\n }\n});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n iconOnly && rootIconOnlyStyles[size], // User provided class name\n state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n }\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bo7webf","highContrast","m3fafd","pus4l6","outline","primary","D126e9","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"mappings":"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"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
compoundButtonClassNames
|
|
13
|
+
get compoundButtonClassNames () {
|
|
14
14
|
return compoundButtonClassNames;
|
|
15
15
|
},
|
|
16
|
-
useCompoundButtonStyles_unstable
|
|
16
|
+
get useCompoundButtonStyles_unstable () {
|
|
17
17
|
return useCompoundButtonStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas',\n },\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas',\n },\n },\n },\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n\n // Size variations\n small: {\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n medium: {\n padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: tokens.spacingHorizontalXS,\n\n maxWidth: '48px',\n minWidth: '48px',\n },\n medium: {\n padding: tokens.spacingHorizontalSNudge,\n\n maxWidth: '52px',\n minWidth: '52px',\n },\n large: {\n padding: tokens.spacingHorizontalS,\n\n maxWidth: '56px',\n minWidth: '56px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px',\n },\n\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n});\n\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular,\n },\n\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200,\n },\n medium: {\n fontSize: tokens.fontSizeBase200,\n },\n large: {\n fontSize: tokens.fontSizeBase300,\n },\n});\n\nexport const useCompoundButtonStyles_unstable = (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 const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n compoundButtonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n appearance && rootStyles[appearance],\n rootStyles[size],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.contentContainer.className = mergeClasses(\n compoundButtonClassNames.contentContainer,\n contentContainerStyles.base,\n state.contentContainer.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n compoundButtonClassNames.icon,\n iconStyles.base,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n state.icon.className,\n );\n }\n\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(\n compoundButtonClassNames.secondaryContent,\n secondaryContentStyles.base,\n secondaryContentStyles[size],\n state.secondaryContent.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","mergeClasses","makeStyles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","height","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","highContrast","outline","primary","colorNeutralForegroundOnBrand","secondary","subtle","transparent","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","small","padding","spacingHorizontalS","spacingHorizontalMNudge","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","medium","spacingHorizontalM","spacingHorizontalL","large","spacingHorizontalXL","fontSizeBase400","lineHeightBase400","disabled","colorNeutralForegroundDisabled","disabledHighContrast","useRootIconOnlyStyles","spacingHorizontalXS","maxWidth","minWidth","spacingHorizontalSNudge","useIconStyles","width","before","marginRight","after","marginLeft","useContentContainerStyles","display","flexDirection","textAlign","useSecondaryContentStyles","fontWeight","fontWeightRegular","fontSizeBase200","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas',\n },\n },\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas',\n },\n },\n },\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n\n // Size variations\n small: {\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n medium: {\n padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: tokens.spacingHorizontalXS,\n\n maxWidth: '48px',\n minWidth: '48px',\n },\n medium: {\n padding: tokens.spacingHorizontalSNudge,\n\n maxWidth: '52px',\n minWidth: '52px',\n },\n large: {\n padding: tokens.spacingHorizontalS,\n\n maxWidth: '56px',\n minWidth: '56px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px',\n },\n\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n});\n\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular,\n },\n\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200,\n },\n medium: {\n fontSize: tokens.fontSizeBase200,\n },\n large: {\n fontSize: tokens.fontSizeBase300,\n },\n});\n\nexport const useCompoundButtonStyles_unstable = (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 const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n compoundButtonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n appearance && rootStyles[appearance],\n rootStyles[size],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.contentContainer.className = mergeClasses(\n compoundButtonClassNames.contentContainer,\n contentContainerStyles.base,\n state.contentContainer.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n compoundButtonClassNames.icon,\n iconStyles.base,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n state.icon.className,\n );\n }\n\n if (state.secondaryContent) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryContent.className = mergeClasses(\n compoundButtonClassNames.secondaryContent,\n secondaryContentStyles.base,\n secondaryContentStyles[size],\n state.secondaryContent.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","mergeClasses","makeStyles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","height","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","highContrast","outline","primary","colorNeutralForegroundOnBrand","secondary","subtle","transparent","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","small","padding","spacingHorizontalS","spacingHorizontalMNudge","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","medium","spacingHorizontalM","spacingHorizontalL","large","spacingHorizontalXL","fontSizeBase400","lineHeightBase400","disabled","colorNeutralForegroundDisabled","disabledHighContrast","useRootIconOnlyStyles","spacingHorizontalXS","maxWidth","minWidth","spacingHorizontalSNudge","useIconStyles","width","before","marginRight","after","marginLeft","useContentContainerStyles","display","flexDirection","textAlign","useSecondaryContentStyles","fontWeight","fontWeightRegular","fontSizeBase200","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","children","undefined"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderMenuButton_unstable } from './renderMenuButton';\nimport { useMenuButton_unstable } from './useMenuButton';\nimport { useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\nimport type { MenuButtonProps } from './MenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close\n * menus.\n */\nexport const MenuButton: ForwardRefComponent<MenuButtonProps> = React.forwardRef((props, ref) => {\n const state = useMenuButton_unstable(props, ref);\n\n useMenuButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuButtonStyles_unstable')(state);\n\n return renderMenuButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<MenuButtonProps>;\n\nMenuButton.displayName = 'MenuButton';\n"],"names":["React","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonStyles_unstable","useCustomStyleHook_unstable","MenuButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,wBAAqB;+BACxB,qBAAkB;2CACZ,kCAA+B;qCAGhC,kCAAkC;AAMvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQP,qCAAAA,EAAuBK,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOR,2CAAAA,EAA0BQ;AACjC,0FAA0F;AAC5F,GAA2C;AAE3CJ,WAAWK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /**\n * Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n\n/**\n * MenuButton Props without the `appearance`/`size`/`shape` styling props, for headless usage.\n */\nexport type MenuButtonBaseProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonBaseProps, 'disabled' | 'disabledFocusable'>;\n\n/**\n * MenuButton State without the `appearance`/`size`/`shape` styling props, for headless usage.\n */\nexport type MenuButtonBaseState = ComponentState<MenuButtonSlots> &\n Omit<ButtonBaseState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"mappings":"AAsBA;;CAEC,GACD,WAC2E"}
|
|
@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
MenuButton
|
|
12
|
+
get MenuButton () {
|
|
13
13
|
return _MenuButton.MenuButton;
|
|
14
14
|
},
|
|
15
|
-
menuButtonClassNames
|
|
15
|
+
get menuButtonClassNames () {
|
|
16
16
|
return _useMenuButtonStylesstyles.menuButtonClassNames;
|
|
17
17
|
},
|
|
18
|
-
renderMenuButton_unstable
|
|
18
|
+
get renderMenuButton_unstable () {
|
|
19
19
|
return _renderMenuButton.renderMenuButton_unstable;
|
|
20
20
|
},
|
|
21
|
-
useMenuButtonBase_unstable
|
|
21
|
+
get useMenuButtonBase_unstable () {
|
|
22
22
|
return _useMenuButton.useMenuButtonBase_unstable;
|
|
23
23
|
},
|
|
24
|
-
useMenuButtonStyles_unstable
|
|
24
|
+
get useMenuButtonStyles_unstable () {
|
|
25
25
|
return _useMenuButtonStylesstyles.useMenuButtonStyles_unstable;
|
|
26
26
|
},
|
|
27
|
-
useMenuButton_unstable
|
|
27
|
+
get useMenuButton_unstable () {
|
|
28
28
|
return _useMenuButton.useMenuButton_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/index.ts"],"sourcesContent":["export type {\n MenuButtonBaseProps,\n MenuButtonBaseState,\n MenuButtonProps,\n MenuButtonSlots,\n MenuButtonState,\n} from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable, useMenuButtonBase_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAOSA,sBAAU;;;eAGVI,+CAAoB;;;eAFpBH,2CAAyB;;;eACDE,yCAA0B;;;eAC5BE,uDAA4B;;;eADlDH,qCAAsB;;;4BAFJ,kBAAe;kCACA,wBAAqB;+BACI,qBAAkB;2CAClB,kCAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { MenuButtonSlots, MenuButtonBaseState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonBaseState): JSXElement => {\n assertSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <state.root>\n {state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderMenuButton_unstable","state","icon","iconOnly","root","children","menuIcon"],"mappings":";;;;+BAWaC;;;;;;;gCAVb,gDAAiD,GAEjD,SAASD,WAAW,QAAQ,4BAA4B;AAQjD,kCAAkC,CAACE;QACxCF,2BAAAA,EAA6BE;IAC7B,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMC,IAAI,IAAA,WAAA,OAAI,eAAA,EAACD,MAAMC,IAAI,EAAA,CAAA;YACzB,CAACC,YAAYF,MAAMG,IAAI,CAACC,QAAQ;aAC/B,CAACF,YAAY,EAACD,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAMG,QAAAA,CAAQ,CAAD,IAAMJ,MAAMK,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,QAAQ,EAAA,CAAA;;;AAG1E,EAAE"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
useMenuButtonBase_unstable
|
|
13
|
+
get useMenuButtonBase_unstable () {
|
|
14
14
|
return useMenuButtonBase_unstable;
|
|
15
15
|
},
|
|
16
|
-
useMenuButton_unstable
|
|
16
|
+
get useMenuButton_unstable () {
|
|
17
17
|
return useMenuButton_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|