@fluentui/react-button 9.0.0-alpha.10 → 9.0.0-alpha.100
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +2418 -1
- package/CHANGELOG.md +920 -2
- package/README.md +19 -108
- package/dist/demo/index.html +71 -0
- package/dist/demo/react-dom.development.js +21413 -0
- package/dist/demo/react.development.js +3155 -0
- package/dist/react-button.d.ts +204 -82
- package/lib/Button.js.map +1 -1
- package/lib/CompoundButton.d.ts +1 -0
- package/lib/CompoundButton.js +2 -0
- package/lib/CompoundButton.js.map +1 -0
- package/lib/MenuButton.d.ts +1 -0
- package/lib/MenuButton.js +2 -0
- package/lib/MenuButton.js.map +1 -0
- package/lib/SplitButton.d.ts +1 -0
- package/lib/SplitButton.js +2 -0
- package/lib/SplitButton.js.map +1 -0
- package/lib/ToggleButton.d.ts +1 -0
- package/lib/ToggleButton.js +2 -0
- package/lib/ToggleButton.js.map +1 -0
- package/lib/common/isConformant.d.ts +4 -2
- package/lib/common/isConformant.js +9 -6
- package/lib/common/isConformant.js.map +1 -1
- package/lib/components/Button/Button.d.ts +4 -11
- package/lib/components/Button/Button.js +7 -16
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.d.ts +57 -60
- package/lib/components/Button/Button.types.js +1 -0
- package/lib/components/Button/Button.types.js.map +1 -1
- package/lib/components/Button/index.d.ts +1 -2
- package/lib/components/Button/index.js +1 -1
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.d.ts +2 -2
- package/lib/components/Button/renderButton.js +9 -8
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.d.ts +5 -7
- package/lib/components/Button/useButton.js +49 -23
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +10 -4
- package/lib/components/Button/useButtonStyles.js +350 -378
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.d.ts +6 -0
- package/lib/components/CompoundButton/CompoundButton.js +15 -0
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -0
- package/lib/components/CompoundButton/CompoundButton.types.d.ts +14 -0
- package/lib/components/CompoundButton/CompoundButton.types.js +2 -0
- package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -0
- package/lib/components/CompoundButton/index.d.ts +5 -0
- package/lib/components/CompoundButton/index.js +6 -0
- package/lib/components/CompoundButton/index.js.map +1 -0
- package/lib/components/CompoundButton/renderCompoundButton.d.ts +5 -0
- package/lib/components/CompoundButton/renderCompoundButton.js +17 -0
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -0
- package/lib/components/CompoundButton/useCompoundButton.d.ts +8 -0
- package/lib/components/CompoundButton/useCompoundButton.js +29 -0
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -0
- package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -0
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +164 -0
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -0
- package/lib/components/MenuButton/MenuButton.d.ts +6 -0
- package/lib/components/MenuButton/MenuButton.js +15 -0
- package/lib/components/MenuButton/MenuButton.js.map +1 -0
- package/lib/components/MenuButton/MenuButton.types.d.ts +11 -0
- package/lib/components/MenuButton/MenuButton.types.js +2 -0
- package/lib/components/MenuButton/MenuButton.types.js.map +1 -0
- package/lib/components/MenuButton/index.d.ts +5 -0
- package/lib/components/MenuButton/index.js +6 -0
- package/lib/components/MenuButton/index.js.map +1 -0
- package/lib/components/MenuButton/renderMenuButton.d.ts +5 -0
- package/lib/components/MenuButton/renderMenuButton.js +17 -0
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -0
- package/lib/components/MenuButton/useMenuButton.d.ts +6 -0
- package/lib/components/MenuButton/useMenuButton.js +32 -0
- package/lib/components/MenuButton/useMenuButton.js.map +1 -0
- package/lib/components/MenuButton/useMenuButtonStyles.d.ts +2 -0
- package/lib/components/MenuButton/useMenuButtonStyles.js +34 -0
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -0
- package/lib/components/SplitButton/SplitButton.d.ts +7 -0
- package/lib/components/SplitButton/SplitButton.js +16 -0
- package/lib/components/SplitButton/SplitButton.js.map +1 -0
- package/lib/components/SplitButton/SplitButton.types.d.ts +19 -0
- package/lib/components/SplitButton/SplitButton.types.js +2 -0
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -0
- package/lib/components/SplitButton/index.d.ts +5 -0
- package/lib/components/SplitButton/index.js +6 -0
- package/lib/components/SplitButton/index.js.map +1 -0
- package/lib/components/SplitButton/renderSplitButton.d.ts +5 -0
- package/lib/components/SplitButton/renderSplitButton.js +15 -0
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -0
- package/lib/components/SplitButton/useSplitButton.d.ts +8 -0
- package/lib/components/SplitButton/useSplitButton.js +73 -0
- package/lib/components/SplitButton/useSplitButton.js.map +1 -0
- package/lib/components/SplitButton/useSplitButtonStyles.d.ts +2 -0
- package/lib/components/SplitButton/useSplitButtonStyles.js +77 -0
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -0
- package/lib/components/ToggleButton/ToggleButton.d.ts +6 -0
- package/lib/components/ToggleButton/ToggleButton.js +15 -0
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -0
- package/lib/components/ToggleButton/ToggleButton.types.d.ts +19 -0
- package/lib/components/ToggleButton/ToggleButton.types.js +2 -0
- package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -0
- package/lib/components/ToggleButton/index.d.ts +5 -0
- package/lib/components/ToggleButton/index.js +6 -0
- package/lib/components/ToggleButton/index.js.map +1 -0
- package/lib/components/ToggleButton/renderToggleButton.d.ts +1 -0
- package/lib/components/ToggleButton/renderToggleButton.js +2 -0
- package/lib/components/ToggleButton/renderToggleButton.js.map +1 -0
- package/lib/components/ToggleButton/useToggleButton.d.ts +9 -0
- package/lib/components/ToggleButton/useToggleButton.js +50 -0
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -0
- package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +2 -0
- package/lib/components/ToggleButton/useToggleButtonStyles.js +190 -0
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -0
- package/lib/index.d.ts +4 -0
- package/lib/index.js +4 -0
- package/lib/index.js.map +1 -1
- package/lib/tsdoc-metadata.json +1 -1
- package/lib-commonjs/Button.js +7 -2
- package/lib-commonjs/Button.js.map +1 -1
- package/lib-commonjs/CompoundButton.d.ts +1 -0
- package/lib-commonjs/CompoundButton.js +10 -0
- package/lib-commonjs/CompoundButton.js.map +1 -0
- package/lib-commonjs/MenuButton.d.ts +1 -0
- package/lib-commonjs/MenuButton.js +10 -0
- package/lib-commonjs/MenuButton.js.map +1 -0
- package/lib-commonjs/SplitButton.d.ts +1 -0
- package/lib-commonjs/SplitButton.js +10 -0
- package/lib-commonjs/SplitButton.js.map +1 -0
- package/lib-commonjs/ToggleButton.d.ts +1 -0
- package/lib-commonjs/ToggleButton.js +10 -0
- package/lib-commonjs/ToggleButton.js.map +1 -0
- package/lib-commonjs/common/isConformant.d.ts +4 -2
- package/lib-commonjs/common/isConformant.js +19 -8
- package/lib-commonjs/common/isConformant.js.map +1 -1
- package/lib-commonjs/components/Button/Button.d.ts +4 -11
- package/lib-commonjs/components/Button/Button.js +20 -20
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.d.ts +57 -60
- package/lib-commonjs/components/Button/Button.types.js +4 -1
- package/lib-commonjs/components/Button/Button.types.js.map +1 -1
- package/lib-commonjs/components/Button/index.d.ts +1 -2
- package/lib-commonjs/components/Button/index.js +21 -5
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.d.ts +2 -2
- package/lib-commonjs/components/Button/renderButton.js +24 -13
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.d.ts +5 -7
- package/lib-commonjs/components/Button/useButton.js +59 -24
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +10 -4
- package/lib-commonjs/components/Button/useButtonStyles.js +360 -379
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +6 -0
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +26 -0
- package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -0
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +14 -0
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.js +6 -0
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -0
- package/lib-commonjs/components/CompoundButton/index.d.ts +5 -0
- package/lib-commonjs/components/CompoundButton/index.js +26 -0
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -0
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +5 -0
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +29 -0
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +8 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +41 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +175 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -0
- package/lib-commonjs/components/MenuButton/MenuButton.d.ts +6 -0
- package/lib-commonjs/components/MenuButton/MenuButton.js +26 -0
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -0
- package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +11 -0
- package/lib-commonjs/components/MenuButton/MenuButton.types.js +6 -0
- package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -0
- package/lib-commonjs/components/MenuButton/index.d.ts +5 -0
- package/lib-commonjs/components/MenuButton/index.js +26 -0
- package/lib-commonjs/components/MenuButton/index.js.map +1 -0
- package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +5 -0
- package/lib-commonjs/components/MenuButton/renderMenuButton.js +29 -0
- package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -0
- package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +6 -0
- package/lib-commonjs/components/MenuButton/useMenuButton.js +46 -0
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -0
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +2 -0
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +44 -0
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -0
- package/lib-commonjs/components/SplitButton/SplitButton.d.ts +7 -0
- package/lib-commonjs/components/SplitButton/SplitButton.js +27 -0
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -0
- package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +19 -0
- package/lib-commonjs/components/SplitButton/SplitButton.types.js +6 -0
- package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -0
- package/lib-commonjs/components/SplitButton/index.d.ts +5 -0
- package/lib-commonjs/components/SplitButton/index.js +26 -0
- package/lib-commonjs/components/SplitButton/index.js.map +1 -0
- package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +5 -0
- package/lib-commonjs/components/SplitButton/renderSplitButton.js +27 -0
- package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -0
- package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +8 -0
- package/lib-commonjs/components/SplitButton/useSplitButton.js +86 -0
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -0
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +2 -0
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +88 -0
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -0
- package/lib-commonjs/components/ToggleButton/ToggleButton.d.ts +6 -0
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +26 -0
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -0
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +19 -0
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js +6 -0
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -0
- package/lib-commonjs/components/ToggleButton/index.d.ts +5 -0
- package/lib-commonjs/components/ToggleButton/index.js +26 -0
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -0
- package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +1 -0
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js +16 -0
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -0
- package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +9 -0
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +63 -0
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -0
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +2 -0
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +200 -0
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -0
- package/lib-commonjs/index.d.ts +4 -0
- package/lib-commonjs/index.js +15 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +21 -14
- package/config/api-extractor.json +0 -3
- package/config/pre-copy.json +0 -9
- package/config/tests.js +0 -6
- package/etc/react-button.api.md +0 -104
- package/just.config.ts +0 -3
- package/lib/components/Button/useButtonState.d.ts +0 -6
- package/lib/components/Button/useButtonState.js +0 -45
- package/lib/components/Button/useButtonState.js.map +0 -1
- package/lib-amd/Button.d.ts +0 -1
- package/lib-amd/Button.js +0 -6
- package/lib-amd/Button.js.map +0 -1
- package/lib-amd/common/isConformant.d.ts +0 -2
- package/lib-amd/common/isConformant.js +0 -14
- package/lib-amd/common/isConformant.js.map +0 -1
- package/lib-amd/components/Button/Button.d.ts +0 -13
- package/lib-amd/components/Button/Button.js +0 -24
- package/lib-amd/components/Button/Button.js.map +0 -1
- package/lib-amd/components/Button/Button.types.d.ts +0 -65
- package/lib-amd/components/Button/Button.types.js +0 -5
- package/lib-amd/components/Button/Button.types.js.map +0 -1
- package/lib-amd/components/Button/index.d.ts +0 -6
- package/lib-amd/components/Button/index.js +0 -10
- package/lib-amd/components/Button/index.js.map +0 -1
- package/lib-amd/components/Button/renderButton.d.ts +0 -5
- package/lib-amd/components/Button/renderButton.js +0 -16
- package/lib-amd/components/Button/renderButton.js.map +0 -1
- package/lib-amd/components/Button/useButton.d.ts +0 -10
- package/lib-amd/components/Button/useButton.js +0 -28
- package/lib-amd/components/Button/useButton.js.map +0 -1
- package/lib-amd/components/Button/useButtonState.d.ts +0 -6
- package/lib-amd/components/Button/useButtonState.js +0 -48
- package/lib-amd/components/Button/useButtonState.js.map +0 -1
- package/lib-amd/components/Button/useButtonStyles.d.ts +0 -4
- package/lib-amd/components/Button/useButtonStyles.js +0 -385
- package/lib-amd/components/Button/useButtonStyles.js.map +0 -1
- package/lib-amd/index.d.ts +0 -1
- package/lib-amd/index.js +0 -6
- package/lib-amd/index.js.map +0 -1
- package/lib-commonjs/components/Button/useButtonState.d.ts +0 -6
- package/lib-commonjs/components/Button/useButtonState.js +0 -47
- package/lib-commonjs/components/Button/useButtonState.js.map +0 -1
- package/src/components/Button/Button.types.ts +0 -120
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useButtonStyles.js","sourceRoot":"../src/","sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ButtonState, ButtonStyleSelectors, ButtonVariantTokens } from './Button.types';\nimport { ax, makeStylesCompat } from '@fluentui/react-make-styles';\nimport { Theme } from '@fluentui/react-theme';\n\n// TODO: These are named in design specs but not hoisted to global/alias yet.\n// We're tracking these here to determine how we can hoist them.\nconst buttonSpacing = {\n smallest: '2px',\n smaller: '4px',\n small: '6px',\n medium: '8px',\n large: '12px',\n larger: '16px',\n};\n\n// We do not want a combinatorial explosion of component variables for variants (bg, bgPrimary, etc)\n// We want a fixed interface of variables for a given component and to alter those between variants\nexport const makeButtonTokens = (theme: Theme): ButtonVariantTokens => ({\n base: {\n // TODO: these are not in the global/alias theme currently\n // When they are shown in the token UI, we need to make it clear there is no global/alias mapping support\n height: '32px',\n paddingX: buttonSpacing.large,\n paddingY: '0',\n minWidth: '96px',\n maxWidth: '280px',\n\n color: theme.alias.color.neutral.neutralForeground1,\n content2Color: theme.alias.color.neutral.neutralForeground2,\n background: theme.alias.color.neutral.neutralBackground1,\n backgroundPressed: theme.alias.color.neutral.neutralBackground1,\n\n borderRadius: theme.global.borderRadius.medium,\n borderWidth: theme.global.strokeWidth.thin,\n borderColor: theme.alias.color.neutral.neutralStroke1,\n\n backgroundHover: theme.alias.color.neutral.neutralBackground1Hover,\n borderColorHover: theme.alias.color.neutral.neutralStroke1Hover,\n\n backgroundActive: theme.alias.color.neutral.neutralBackground1Pressed,\n borderColorActive: theme.alias.color.neutral.neutralStroke1Pressed,\n\n fontWeight: theme.global.type.fontWeights.semibold,\n fontSize: theme.global.type.fontSizes.base[300],\n lineHeight: theme.global.type.lineHeights.base[300],\n\n iconSpacing: buttonSpacing.small,\n iconWidth: '20px',\n iconHeight: '20px',\n },\n disabled: {\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n color: theme.alias.color.neutral.neutralForegroundDisabled,\n content2Color: theme.alias.color.neutral.neutralForegroundDisabled,\n },\n small: {\n paddingX: buttonSpacing.medium,\n borderRadius: theme.global.borderRadius.small,\n // TODO: design spec says minWidth \"can be toggled off\", consider prop like compact?\n minWidth: '64px',\n height: '24px',\n fontSize: theme.global.type.fontSizes.base[200],\n lineHeight: theme.global.type.fontSizes.base[200],\n fontWeight: theme.global.type.fontWeights.regular,\n },\n large: {\n paddingX: buttonSpacing.larger,\n height: '40px',\n borderRadius: theme.global.borderRadius.medium,\n fontSize: theme.global.type.fontSizes.base[400],\n // TODO: 24px is not on the global ramp of line heights\n // 22px = theme.global.type.lineHeights.base[400]\n // 28px = theme.global.type.lineHeights.base[500]\n lineHeight: '24px',\n iconWidth: '24px',\n iconHeight: '24px',\n iconSpacing: buttonSpacing.small,\n },\n // TODO: Would be ideal to automate a check to ensure when a variant is accessed, all the tokens are accessed as well.\n // If not, it means there is cruft in the variant tokens definition.\n // All tokens in a variant should be mapped to some style property.\n iconOnly: {\n paddingX: buttonSpacing.small,\n paddingY: buttonSpacing.small,\n minWidth: '32px',\n maxWidth: '32px',\n },\n // TODO: combinatorial \"variants\" is wrong, we already have iconOnly and small.\n // we essentially need to update component token mappings based on variant matchers.\n // fow the sake of progress for now, we're extending variants to have combinations.\n iconOnlySmall: {\n paddingX: buttonSpacing.smallest,\n paddingY: buttonSpacing.smallest,\n borderRadius: theme.global.borderRadius.small,\n minWidth: '24px',\n maxWidth: '24px',\n },\n iconOnlyLarge: {\n paddingX: buttonSpacing.small,\n paddingY: buttonSpacing.small,\n borderRadius: theme.global.borderRadius.medium,\n minWidth: '40px',\n maxWidth: '40px',\n },\n primary: {\n color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,\n\n background: theme.alias.color.brand.brandBackground,\n borderColor: 'transparent',\n borderColorHover: 'transparent',\n borderColorActive: 'transparent',\n\n backgroundHover: theme.alias.color.brand.brandBackgroundHover,\n backgroundPressed: theme.alias.color.brand.brandBackgroundPressed,\n\n // TODO: spec calls out \"shadow 4 __brand__\", are we missing tokens?\n shadow: theme.alias.shadow.shadow4,\n\n // TODO: spec calls out \"shadow 2 __darker__\", are we missing tokens?\n shadowPressed: theme.alias.shadow.shadow2,\n },\n primaryDisabled: {\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n // borderColor: theme.alias.color.neutral.neutralStrokeDisabled,\n color: theme.alias.color.neutral.neutralForegroundDisabled,\n content2Color: theme.alias.color.neutral.neutralForegroundDisabled,\n shadow: 'none',\n shadowPressed: 'none',\n },\n});\n\nconst useRootStyles = makeStylesCompat<ButtonStyleSelectors>([\n [\n null,\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n // TODO: remove unsafe property: https://caniuse.com/?search=gap\n gap: buttonTokens.base.iconSpacing,\n // // TODO: 1) ask designers what our vertical align strategy is\n // // 2) enforce with conformance for inline elements\n verticalAlign: 'text-bottom',\n margin: 0,\n\n padding: `${buttonTokens.base.paddingY} ${buttonTokens.base.paddingX}`,\n height: buttonTokens.base.height,\n\n minWidth: buttonTokens.base.minWidth,\n maxWidth: buttonTokens.base.maxWidth,\n\n color: buttonTokens.base.color,\n borderStyle: 'solid',\n borderRadius: buttonTokens.base.borderRadius,\n borderWidth: buttonTokens.base.borderWidth,\n borderColor: buttonTokens.base.borderColor,\n background: buttonTokens.base.background,\n\n outline: 'none',\n ':hover': {\n background: buttonTokens.base.backgroundHover,\n borderColor: buttonTokens.base.borderColorHover,\n cursor: 'pointer',\n },\n ':active': {\n background: buttonTokens.base.backgroundActive,\n borderColor: buttonTokens.base.borderColorActive,\n outline: 'none',\n },\n // TODO: this is for toggle button only. Use here in regular button?\n // '.active': theme.alias.color.neutral.neutralStroke1Pressed,\n };\n },\n ],\n [\n ({ size }) => size === 'small',\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n padding: `${buttonTokens.small.paddingX} ${buttonTokens.small.paddingY}`,\n minWidth: buttonTokens.small.minWidth,\n height: buttonTokens.small.height,\n borderRadius: buttonTokens.small.borderRadius,\n };\n },\n ],\n [\n ({ size }) => size === 'large',\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n gap: buttonTokens.large.iconSpacing,\n padding: `${buttonTokens.large.paddingX} ${buttonTokens.large.paddingY}`,\n height: buttonTokens.large.height,\n borderRadius: buttonTokens.large.borderRadius,\n };\n },\n ],\n [\n ({ disabled }) => disabled,\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n background: buttonTokens.disabled.background,\n borderColor: buttonTokens.disabled.borderColor,\n color: buttonTokens.disabled.color,\n ':hover': {\n background: buttonTokens.disabled.background,\n borderColor: buttonTokens.disabled.borderColor,\n cursor: 'default',\n },\n ':active': {\n background: buttonTokens.disabled.background,\n borderColor: buttonTokens.disabled.borderColor,\n },\n };\n },\n ],\n [\n ({ primary }) => primary,\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n background: buttonTokens.primary.background,\n color: buttonTokens.primary.color,\n borderColor: buttonTokens.primary.borderColor,\n // TODO: spec calls out \"shadow 4 __darker__\", are we missing tokens?\n boxShadow: buttonTokens.primary.shadow,\n\n ':hover': {\n background: buttonTokens.primary.backgroundHover,\n borderColor: buttonTokens.primary.borderColorHover,\n },\n\n ':active': {\n background: buttonTokens.primary.backgroundPressed,\n // TODO: spec calls out \"shadow 2 __darker__\", are we missing tokens?\n boxShadow: buttonTokens.primary.shadow,\n borderColor: buttonTokens.primary.borderColorActive,\n },\n\n // TODO: focus\n };\n },\n ],\n [\n ({ primary, disabled }) => primary && disabled,\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n background: buttonTokens.primaryDisabled.background,\n color: buttonTokens.primaryDisabled.color,\n boxShadow: buttonTokens.primaryDisabled.shadow,\n ':hover': {\n background: buttonTokens.primaryDisabled.background,\n cursor: 'default',\n },\n ':active': {\n boxShadow: buttonTokens.primaryDisabled.shadowPressed,\n },\n };\n },\n ],\n [\n ({ iconOnly }) => iconOnly,\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n padding: buttonTokens.iconOnly.paddingX,\n minWidth: buttonTokens.iconOnly.minWidth,\n maxWidth: buttonTokens.iconOnly.maxWidth,\n };\n },\n ],\n [\n ({ iconOnly, size }) => iconOnly && size === 'small',\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n padding: `${buttonTokens.iconOnlySmall.paddingX} ${buttonTokens.iconOnlySmall.paddingY}`,\n minWidth: buttonTokens.iconOnlySmall.minWidth,\n maxWidth: buttonTokens.iconOnlySmall.maxWidth,\n borderRadius: buttonTokens.iconOnlySmall.borderRadius,\n };\n },\n ],\n [\n ({ iconOnly, size }) => iconOnly && size === 'large',\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n padding: `${buttonTokens.iconOnlyLarge.paddingX} ${buttonTokens.iconOnlyLarge.paddingY}`,\n minWidth: buttonTokens.iconOnlyLarge.minWidth,\n maxWidth: buttonTokens.iconOnlyLarge.maxWidth,\n borderRadius: buttonTokens.iconOnlyLarge.borderRadius,\n };\n },\n ],\n // TODO: add disabled before ship prerelease\n]);\n\nconst useChildrenStyles = makeStylesCompat<ButtonStyleSelectors>([\n [\n null,\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n // TODO: This is \"Body, Strong (?)\" token in the design spec (14px size, 20px line, semibold weight)\n // There are some type aliases in the figma not in our theme as well, not sure if this maps to alias or not\n fontWeight: buttonTokens.base.fontWeight,\n fontSize: buttonTokens.base.fontSize,\n lineHeight: buttonTokens.base.lineHeight,\n };\n },\n ],\n [\n ({ size }) => size === 'small',\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n fontSize: buttonTokens.small.fontSize,\n fontWeight: buttonTokens.small.fontWeight,\n lineHeight: buttonTokens.small.lineHeight,\n };\n },\n ],\n [\n ({ size }) => size === 'large',\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n fontSize: buttonTokens.large.fontSize,\n lineHeight: buttonTokens.large.lineHeight,\n };\n },\n ],\n]);\n\nconst useIconStyles = makeStylesCompat<ButtonStyleSelectors>([\n [\n null,\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: buttonTokens.base.iconHeight,\n width: buttonTokens.base.iconWidth,\n };\n },\n ],\n [\n ({ size }) => size === 'large',\n theme => {\n const buttonTokens = makeButtonTokens(theme);\n\n return {\n width: buttonTokens.large.iconWidth,\n height: buttonTokens.large.iconHeight,\n };\n },\n ],\n]);\n\nexport const useButtonStyles = (state: ButtonState, selectors: ButtonStyleSelectors) => {\n state.className = ax(state.className, useRootStyles(selectors));\n\n state.children = state.children || { className: '' };\n state.icon = state.icon || { className: '' };\n\n state.children.className = ax(state.children.className, useChildrenStyles(selectors));\n state.icon.className = ax(state.icon.className, useIconStyles(selectors));\n};\n"]}
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { CompoundButtonProps } from './CompoundButton.types';
|
2
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* CompoundButtons are buttons that can have secondary content that adds extra information to the user.
|
5
|
+
*/
|
6
|
+
export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { renderCompoundButton } from './renderCompoundButton';
|
3
|
+
import { useCompoundButton } from './useCompoundButton';
|
4
|
+
import { useCompoundButtonStyles } from './useCompoundButtonStyles';
|
5
|
+
/**
|
6
|
+
* CompoundButtons are buttons that can have secondary content that adds extra information to the user.
|
7
|
+
*/
|
8
|
+
|
9
|
+
export var CompoundButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
10
|
+
var state = useCompoundButton(props, ref);
|
11
|
+
useCompoundButtonStyles(state);
|
12
|
+
return renderCompoundButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
13
|
+
});
|
14
|
+
CompoundButton.displayName = 'CompoundButton';
|
15
|
+
//# sourceMappingURL=CompoundButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,uBAAT,QAAwC,2BAAxC;AAIA;;AAEG;;AACH,OAAO,IAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B,CALkG,CAMlG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourceRoot":""}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
2
|
+
import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
|
3
|
+
export declare type CompoundButtonSlots = ButtonSlots & {
|
4
|
+
/**
|
5
|
+
* Second line of text that describes the action this button takes.
|
6
|
+
*/
|
7
|
+
secondaryContent?: IntrinsicShorthandProps<'span'>;
|
8
|
+
/**
|
9
|
+
* Container that wraps the children and the secondaryContent slot.
|
10
|
+
*/
|
11
|
+
contentContainer: IntrinsicShorthandProps<'span'>;
|
12
|
+
};
|
13
|
+
export declare type CompoundButtonProps = ComponentProps<CompoundButtonSlots> & Partial<ButtonCommons>;
|
14
|
+
export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"CompoundButton.types.js","sourceRoot":"","sources":["../../../src/components/CompoundButton/CompoundButton.types.ts"],"names":[],"mappings":""}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { __assign } from "tslib";
|
2
|
+
import * as React from 'react';
|
3
|
+
import { getSlots } from '@fluentui/react-utilities';
|
4
|
+
/**
|
5
|
+
* Renders a CompoundButton component by passing the state defined props to the appropriate slots.
|
6
|
+
*/
|
7
|
+
|
8
|
+
export var renderCompoundButton = function (state) {
|
9
|
+
var _a = getSlots(state, ['root', 'contentContainer', 'icon', 'secondaryContent']),
|
10
|
+
slots = _a.slots,
|
11
|
+
slotProps = _a.slotProps;
|
12
|
+
|
13
|
+
var iconOnly = state.iconOnly,
|
14
|
+
iconPosition = state.iconPosition;
|
15
|
+
return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), iconPosition !== 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, __assign({}, slotProps.contentContainer), slotProps.root.children, /*#__PURE__*/React.createElement(slots.secondaryContent, __assign({}, slotProps.secondaryContent))), iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
|
16
|
+
};
|
17
|
+
//# sourceMappingURL=renderCompoundButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,QAAQ,CAAsB,KAAtB,EAA6B,CAChE,MADgE,EAEhE,kBAFgE,EAGhE,MAHgE,EAIhE,kBAJgE,CAA7B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAME,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAHJ,EAQG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAR/B,CADF;AAYD,CArBM","sourceRoot":""}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';
|
3
|
+
/**
|
4
|
+
* Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
|
5
|
+
* @param props - User provided props to the CompoundButton component.
|
6
|
+
* @param ref - User provided ref to be passed to the CompoundButton component.
|
7
|
+
*/
|
8
|
+
export declare const useCompoundButton: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
2
|
+
import { resolveShorthand } from '@fluentui/react-utilities';
|
3
|
+
import { useButton } from '../Button/index';
|
4
|
+
/**
|
5
|
+
* Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
|
6
|
+
* @param props - User provided props to the CompoundButton component.
|
7
|
+
* @param ref - User provided ref to be passed to the CompoundButton component.
|
8
|
+
*/
|
9
|
+
|
10
|
+
export var useCompoundButton = function (_a, ref) {
|
11
|
+
var contentContainer = _a.contentContainer,
|
12
|
+
secondaryContent = _a.secondaryContent,
|
13
|
+
props = __rest(_a, ["contentContainer", "secondaryContent"]);
|
14
|
+
|
15
|
+
return __assign(__assign({}, useButton(props, ref)), {
|
16
|
+
// Slots definition
|
17
|
+
components: {
|
18
|
+
root: 'button',
|
19
|
+
icon: 'span',
|
20
|
+
contentContainer: 'span',
|
21
|
+
secondaryContent: 'span'
|
22
|
+
},
|
23
|
+
contentContainer: resolveShorthand(contentContainer, {
|
24
|
+
required: true
|
25
|
+
}),
|
26
|
+
secondaryContent: resolveShorthand(secondaryContent)
|
27
|
+
});
|
28
|
+
};
|
29
|
+
//# sourceMappingURL=useCompoundButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,SAAT,QAA0B,iBAA1B;AAEA;;;;AAIG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAC/B,EAD+B,EAE/B,GAF+B,EAEsB;AADnD,MAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAhB;AAAA,MAAkB,gBAAgB,GAAA,EAAA,CAAA,gBAAlC;AAAA,MAAuC,KAAK,GAAA,MAAA,CAAA,EAAA,EAA9C,CAAA,kBAAA,EAAA,kBAAA,CAA8C,CAA5C;;AAGF,SAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAEK,SAAS,CAAC,KAAD,EAAQ,GAAR,CAFd,CAAA,EAE0B;AAExB;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KAHY;AASxB,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD,EAAmB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnB,CATV;AAUxB,IAAA,gBAAgB,EAAE,gBAAgB,CAAC,gBAAD;AAVV,GAF1B,CAAA;AAcD,CAlBM","sourceRoot":""}
|
@@ -0,0 +1,164 @@
|
|
1
|
+
import { mergeClasses, __styles } from '@fluentui/react-make-styles';
|
2
|
+
import { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';
|
3
|
+
var CompoundButtonClassNames = {
|
4
|
+
secondaryContent: 'CompoundButton-secondaryContent'
|
5
|
+
};
|
6
|
+
|
7
|
+
var useRootStyles = /*#__PURE__*/__styles({
|
8
|
+
"base": {
|
9
|
+
"rmohyg": "fsbu5mz",
|
10
|
+
"Bqenvij": "f11ysow2",
|
11
|
+
"Bekya5a": "f1smw4j4",
|
12
|
+
"Bi863bl": "f1b73140",
|
13
|
+
"B7j81dy": "f19sbf7w"
|
14
|
+
},
|
15
|
+
"outline": {},
|
16
|
+
"primary": {
|
17
|
+
"Bekya5a": "f1wrmfx5",
|
18
|
+
"Bi863bl": "fl6im4w",
|
19
|
+
"B7j81dy": "f1y0ndy"
|
20
|
+
},
|
21
|
+
"subtle": {
|
22
|
+
"Bekya5a": "f1smw4j4",
|
23
|
+
"Bi863bl": "f182e9fe",
|
24
|
+
"B7j81dy": "fdrkfd0"
|
25
|
+
},
|
26
|
+
"transparent": {
|
27
|
+
"Bekya5a": "f1smw4j4",
|
28
|
+
"Bi863bl": "f182e9fe",
|
29
|
+
"B7j81dy": "fdrkfd0"
|
30
|
+
},
|
31
|
+
"small": {
|
32
|
+
"z8tnut": "fp9bwmr",
|
33
|
+
"z189sj": ["f19lj068", "f177v4lu"],
|
34
|
+
"Byoj8tv": "f150uoa4",
|
35
|
+
"uwmqm3": ["f177v4lu", "f19lj068"],
|
36
|
+
"Be2twd7": "fkhj508",
|
37
|
+
"Bg96gwp": "f1i3iumi"
|
38
|
+
},
|
39
|
+
"medium": {
|
40
|
+
"z8tnut": "f1kcqot9",
|
41
|
+
"z189sj": ["f11qrl6u", "fjlbh76"],
|
42
|
+
"Byoj8tv": "fpe6lb7",
|
43
|
+
"uwmqm3": ["fjlbh76", "f11qrl6u"],
|
44
|
+
"Be2twd7": "fkhj508",
|
45
|
+
"Bg96gwp": "f1i3iumi"
|
46
|
+
},
|
47
|
+
"large": {
|
48
|
+
"z8tnut": "fqag9an",
|
49
|
+
"z189sj": ["f1gbmcue", "f1rh9g5y"],
|
50
|
+
"Byoj8tv": "fp67ikv",
|
51
|
+
"uwmqm3": ["f1rh9g5y", "f1gbmcue"],
|
52
|
+
"Be2twd7": "fod5ikn",
|
53
|
+
"Bg96gwp": "faaz57k"
|
54
|
+
},
|
55
|
+
"disabled": {
|
56
|
+
"Bekya5a": "f1ygg8x6",
|
57
|
+
"Bi863bl": "fhtktt2",
|
58
|
+
"B7j81dy": "f1v2jbe6"
|
59
|
+
}
|
60
|
+
}, {
|
61
|
+
"d": [".fsbu5mz{gap:12px;}", ".f11ysow2{height:auto;}", ".f1smw4j4 .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1wrmfx5 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1ygg8x6 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
|
62
|
+
"h": [".f1b73140:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".fl6im4w:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f182e9fe:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fhtktt2:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
|
63
|
+
"a": [".f19sbf7w:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1y0ndy:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fdrkfd0:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1v2jbe6:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
|
64
|
+
});
|
65
|
+
|
66
|
+
var useRootIconOnlyStyles = /*#__PURE__*/__styles({
|
67
|
+
"small": {
|
68
|
+
"z8tnut": "f10ra9hq",
|
69
|
+
"z189sj": ["f8wuabp", "fycuoez"],
|
70
|
+
"Byoj8tv": "f1y2xyjm",
|
71
|
+
"uwmqm3": ["fycuoez", "f8wuabp"],
|
72
|
+
"B2u0y6b": "ft5vyj6",
|
73
|
+
"Bf4jedk": "f17suaiq"
|
74
|
+
},
|
75
|
+
"medium": {
|
76
|
+
"z8tnut": "f1xp5gbu",
|
77
|
+
"z189sj": ["f1sgzk6v", "f1bg5zqg"],
|
78
|
+
"Byoj8tv": "f1d7kygh",
|
79
|
+
"uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
|
80
|
+
"B2u0y6b": "fdczgix",
|
81
|
+
"Bf4jedk": "fjdcg9m"
|
82
|
+
},
|
83
|
+
"large": {
|
84
|
+
"z8tnut": "fp9bwmr",
|
85
|
+
"z189sj": ["f19lj068", "f177v4lu"],
|
86
|
+
"Byoj8tv": "f150uoa4",
|
87
|
+
"uwmqm3": ["f177v4lu", "f19lj068"],
|
88
|
+
"B2u0y6b": "fww51uw",
|
89
|
+
"Bf4jedk": "f1qhsl2h"
|
90
|
+
}
|
91
|
+
}, {
|
92
|
+
"d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fww51uw{max-width:56px;}", ".f1qhsl2h{min-width:56px;}"]
|
93
|
+
});
|
94
|
+
|
95
|
+
var useIconStyles = /*#__PURE__*/__styles({
|
96
|
+
"base": {
|
97
|
+
"Be2twd7": "fndrnj9",
|
98
|
+
"Bqenvij": "fbhnoac",
|
99
|
+
"a9b677": "feqmc2u"
|
100
|
+
}
|
101
|
+
}, {
|
102
|
+
"d": [".fndrnj9{font-size:40px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}"]
|
103
|
+
});
|
104
|
+
|
105
|
+
var useContentContainerStyles = /*#__PURE__*/__styles({
|
106
|
+
"base": {
|
107
|
+
"mc9l5x": "f22iagw",
|
108
|
+
"Beiy3e4": "f1vx9l62",
|
109
|
+
"fsow6f": ["f1o700av", "fes3tcz"]
|
110
|
+
}
|
111
|
+
}, {
|
112
|
+
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}"]
|
113
|
+
});
|
114
|
+
|
115
|
+
var useSecondaryContentStyles = /*#__PURE__*/__styles({
|
116
|
+
"base": {
|
117
|
+
"Bg96gwp": "flkuc6h",
|
118
|
+
"B6of3ja": "fvjh0tl",
|
119
|
+
"Bhrd7zp": "figsok6"
|
120
|
+
},
|
121
|
+
"small": {
|
122
|
+
"Be2twd7": "fy9rknc"
|
123
|
+
},
|
124
|
+
"medium": {
|
125
|
+
"Be2twd7": "fy9rknc"
|
126
|
+
},
|
127
|
+
"large": {
|
128
|
+
"Be2twd7": "fkhj508"
|
129
|
+
}
|
130
|
+
}, {
|
131
|
+
"d": [".flkuc6h{line-height:100%;}", ".fvjh0tl{margin-top:4px;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
|
132
|
+
});
|
133
|
+
|
134
|
+
export var useCompoundButtonStyles = function (state) {
|
135
|
+
var rootStyles = useRootStyles();
|
136
|
+
var rootIconOnlyStyles = useRootIconOnlyStyles();
|
137
|
+
var iconStyles = useIconStyles();
|
138
|
+
var contentContainerStyles = useContentContainerStyles();
|
139
|
+
var secondaryContentStyles = useSecondaryContentStyles();
|
140
|
+
var appearance = state.appearance,
|
141
|
+
disabled = state.disabled,
|
142
|
+
disabledFocusable = state.disabledFocusable,
|
143
|
+
iconOnly = state.iconOnly,
|
144
|
+
size = state.size;
|
145
|
+
state.root.className = mergeClasses( // Root styles
|
146
|
+
rootStyles.base, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
|
147
|
+
(disabled || disabledFocusable) && rootStyles.disabled, // Icon-only styles
|
148
|
+
iconOnly && rootIconOnlyStyles[size], // User provided class name
|
149
|
+
state.root.className);
|
150
|
+
|
151
|
+
if (state.icon) {
|
152
|
+
state.icon.className = mergeClasses(iconStyles.base, state.icon.className);
|
153
|
+
}
|
154
|
+
|
155
|
+
state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);
|
156
|
+
|
157
|
+
if (state.secondaryContent) {
|
158
|
+
state.secondaryContent.className = mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
|
159
|
+
}
|
160
|
+
|
161
|
+
useButtonStyles(state);
|
162
|
+
return state;
|
163
|
+
};
|
164
|
+
//# sourceMappingURL=useCompoundButtonStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { MenuButtonProps } from './MenuButton.types';
|
2
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* MenuButtons are buttons that handle opening and closing a menu when they are triggered.
|
5
|
+
*/
|
6
|
+
export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { renderMenuButton } from './renderMenuButton';
|
3
|
+
import { useMenuButton } from './useMenuButton';
|
4
|
+
import { useMenuButtonStyles } from './useMenuButtonStyles';
|
5
|
+
/**
|
6
|
+
* MenuButtons are buttons that handle opening and closing a menu when they are triggered.
|
7
|
+
*/
|
8
|
+
|
9
|
+
export var MenuButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
10
|
+
var state = useMenuButton(props, ref);
|
11
|
+
useMenuButtonStyles(state);
|
12
|
+
return renderMenuButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
13
|
+
});
|
14
|
+
MenuButton.displayName = 'MenuButton';
|
15
|
+
//# sourceMappingURL=MenuButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,IAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AAEA,SAAO,gBAAgB,CAAC,KAAD,CAAvB,CAL0F,CAM1F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import type { MenuTriggerChildProps } from '@fluentui/react-menu';
|
2
|
+
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
3
|
+
import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
|
4
|
+
export declare type MenuButtonSlots = ButtonSlots & {
|
5
|
+
/**
|
6
|
+
* Menu icon that indicates that this button has a menu that can be expanded.
|
7
|
+
*/
|
8
|
+
menuIcon?: IntrinsicShorthandProps<'span'>;
|
9
|
+
};
|
10
|
+
export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>> & Partial<MenuTriggerChildProps>;
|
11
|
+
export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuButton.types.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":""}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { __assign } from "tslib";
|
2
|
+
import * as React from 'react';
|
3
|
+
import { getSlots } from '@fluentui/react-utilities';
|
4
|
+
/**
|
5
|
+
* Renders a MenuButton component by passing the state defined props to the appropriate slots.
|
6
|
+
*/
|
7
|
+
|
8
|
+
export var renderMenuButton = function (state) {
|
9
|
+
var _a = getSlots(state, ['root', 'icon', 'menuIcon']),
|
10
|
+
slots = _a.slots,
|
11
|
+
slotProps = _a.slotProps;
|
12
|
+
|
13
|
+
var icon = state.icon,
|
14
|
+
iconOnly = state.iconOnly;
|
15
|
+
return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && /*#__PURE__*/React.createElement(slots.menuIcon, __assign({}, slotProps.menuIcon)));
|
16
|
+
};
|
17
|
+
//# sourceMappingURL=renderMenuButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,QAAQ,CAAkB,KAAlB,EAAyB,CAAC,MAAD,EAAS,MAAT,EAAiB,UAAjB,CAAzB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,IAAI,GAAe,KAAK,CAApB,IAAJ;AAAA,MAAM,QAAQ,GAAK,KAAK,CAAV,QAAd;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,kBAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHrC,CADF;AAOD,CAXM","sourceRoot":""}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { MenuButtonProps, MenuButtonState } from './MenuButton.types';
|
3
|
+
/**
|
4
|
+
* Given user props, returns the final state for a MenuButton.
|
5
|
+
*/
|
6
|
+
export declare const useMenuButton: ({ menuIcon, ...props }: MenuButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
2
|
+
import * as React from 'react';
|
3
|
+
import { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';
|
4
|
+
import { resolveShorthand } from '@fluentui/react-utilities';
|
5
|
+
import { useButton } from '../Button/index';
|
6
|
+
/**
|
7
|
+
* Given user props, returns the final state for a MenuButton.
|
8
|
+
*/
|
9
|
+
|
10
|
+
export var useMenuButton = function (_a, ref) {
|
11
|
+
var menuIcon = _a.menuIcon,
|
12
|
+
props = __rest(_a, ["menuIcon"]);
|
13
|
+
|
14
|
+
var buttonState = useButton(props, ref);
|
15
|
+
return __assign(__assign({}, buttonState), {
|
16
|
+
// State calculated from a set of props
|
17
|
+
iconOnly: Boolean(!props.children),
|
18
|
+
// Slots definition
|
19
|
+
components: {
|
20
|
+
root: 'button',
|
21
|
+
icon: 'span',
|
22
|
+
menuIcon: 'span'
|
23
|
+
},
|
24
|
+
menuIcon: resolveShorthand(menuIcon, {
|
25
|
+
defaultProps: {
|
26
|
+
children: buttonState.size === 'large' ? /*#__PURE__*/React.createElement(ChevronDown24Regular, null) : /*#__PURE__*/React.createElement(ChevronDown20Regular, null)
|
27
|
+
},
|
28
|
+
required: true
|
29
|
+
})
|
30
|
+
});
|
31
|
+
};
|
32
|
+
//# sourceMappingURL=useMenuButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,oBAA/B,QAA2D,uBAA3D;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,SAAT,QAA0B,iBAA1B;AAGA;;AAEG;;AACH,OAAO,IAAM,aAAa,GAAG,UAC3B,EAD2B,EAE3B,GAF2B,EAE0B;AADnD,MAAA,QAAQ,GAAA,EAAA,CAAA,QAAR;AAAA,MAAa,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,CAAA,UAAA,CAAoB,CAAlB;;AAGF,MAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACA,SAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAEK,WAFL,CAAA,EAEgB;AAEd;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CAHH;AAKd;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KANE;AAYd,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,EAAE,WAAW,CAAC,IAAZ,KAAqB,OAArB,gBAA+B,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAA/B,gBAA0D,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB;AADxD,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAZZ,GAFhB,CAAA;AAqBD,CA1BM","sourceRoot":""}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import { mergeClasses, __styles } from '@fluentui/react-make-styles';
|
2
|
+
import { useButtonStyles } from '../Button/useButtonStyles';
|
3
|
+
|
4
|
+
var useMenuIconStyles = /*#__PURE__*/__styles({
|
5
|
+
"small": {
|
6
|
+
"Be2twd7": "fe5j1ua",
|
7
|
+
"Bqenvij": "fjamq6b",
|
8
|
+
"a9b677": "f64fuq3"
|
9
|
+
},
|
10
|
+
"medium": {
|
11
|
+
"Be2twd7": "fe5j1ua",
|
12
|
+
"Bqenvij": "fjamq6b",
|
13
|
+
"a9b677": "f64fuq3"
|
14
|
+
},
|
15
|
+
"large": {
|
16
|
+
"Be2twd7": "f1rt2boy",
|
17
|
+
"Bqenvij": "frvgh55",
|
18
|
+
"a9b677": "fq4mcun"
|
19
|
+
}
|
20
|
+
}, {
|
21
|
+
"d": [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
|
22
|
+
});
|
23
|
+
|
24
|
+
export var useMenuButtonStyles = function (state) {
|
25
|
+
var menuIconStyles = useMenuIconStyles();
|
26
|
+
|
27
|
+
if (state.menuIcon) {
|
28
|
+
state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
|
29
|
+
}
|
30
|
+
|
31
|
+
useButtonStyles(state);
|
32
|
+
return state;
|
33
|
+
};
|
34
|
+
//# sourceMappingURL=useMenuButtonStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AAEA,SAAS,eAAT,QAAgC,2BAAhC;;AAGA,IAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,cAAc,GAAG,iBAAiB,EAAxC;;AACA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AACD;;AAED,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CATM","sourceRoot":""}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { SplitButtonProps } from './SplitButton.types';
|
2
|
+
import { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
|
5
|
+
* action, while interacting with the second one opens a menu with secondary actions.
|
6
|
+
*/
|
7
|
+
export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { renderSplitButton } from './renderSplitButton';
|
3
|
+
import { useSplitButton } from './useSplitButton';
|
4
|
+
import { useSplitButtonStyles } from './useSplitButtonStyles';
|
5
|
+
/**
|
6
|
+
* SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
|
7
|
+
* action, while interacting with the second one opens a menu with secondary actions.
|
8
|
+
*/
|
9
|
+
|
10
|
+
export var SplitButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
11
|
+
var state = useSplitButton(props, ref);
|
12
|
+
useSplitButtonStyles(state);
|
13
|
+
return renderSplitButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
14
|
+
});
|
15
|
+
SplitButton.displayName = 'SplitButton';
|
16
|
+
//# sourceMappingURL=SplitButton.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;;AAGG;;AACH,OAAO,IAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC5F,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB,CAL4F,CAM5F;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
|