@fluentui/react-button 1.0.0-beta.8 → 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 +3258 -1
- package/CHANGELOG.md +1247 -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 +130 -355
- package/lib/Button.js.map +1 -1
- package/lib/CompoundButton.js.map +1 -1
- package/lib/MenuButton.js.map +1 -1
- package/lib/SplitButton.js.map +1 -1
- package/lib/ToggleButton.js.map +1 -1
- package/lib/common/isConformant.d.ts +4 -2
- package/lib/common/isConformant.js +9 -5
- package/lib/common/isConformant.js.map +1 -1
- package/lib/components/Button/Button.d.ts +4 -5
- package/lib/components/Button/Button.js +8 -9
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.d.ts +46 -114
- 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 +3 -3
- package/lib/components/Button/index.js +4 -3
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.d.ts +2 -2
- package/lib/components/Button/renderButton.js +10 -10
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.d.ts +5 -10
- package/lib/components/Button/useButton.js +49 -24
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +10 -0
- package/lib/components/Button/useButtonStyles.js +354 -0
- package/lib/components/Button/useButtonStyles.js.map +1 -0
- package/lib/components/CompoundButton/CompoundButton.d.ts +4 -5
- package/lib/components/CompoundButton/CompoundButton.js +8 -11
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.types.d.ts +8 -27
- package/lib/components/CompoundButton/CompoundButton.types.js +1 -0
- package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib/components/CompoundButton/index.d.ts +2 -1
- package/lib/components/CompoundButton/index.js +3 -1
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.d.ts +2 -2
- package/lib/components/CompoundButton/renderCompoundButton.js +10 -12
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.d.ts +5 -10
- package/lib/components/CompoundButton/useCompoundButton.js +25 -28
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- 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 +4 -5
- package/lib/components/MenuButton/MenuButton.js +8 -21
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.d.ts +7 -50
- package/lib/components/MenuButton/MenuButton.types.js +1 -0
- package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
- package/lib/components/MenuButton/index.d.ts +2 -3
- package/lib/components/MenuButton/index.js +3 -3
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/renderMenuButton.d.ts +2 -4
- package/lib/components/MenuButton/renderMenuButton.js +10 -14
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.d.ts +3 -7
- package/lib/components/MenuButton/useMenuButton.js +28 -22
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- 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 +5 -5
- package/lib/components/SplitButton/SplitButton.js +9 -22
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.d.ts +12 -28
- package/lib/components/SplitButton/SplitButton.types.js +1 -0
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib/components/SplitButton/index.d.ts +3 -2
- package/lib/components/SplitButton/index.js +3 -1
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/renderSplitButton.d.ts +2 -4
- package/lib/components/SplitButton/renderSplitButton.js +8 -10
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.d.ts +5 -7
- package/lib/components/SplitButton/useSplitButton.js +69 -47
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- 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 +4 -5
- package/lib/components/ToggleButton/ToggleButton.js +8 -11
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.d.ts +11 -17
- package/lib/components/ToggleButton/ToggleButton.types.js +1 -0
- package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib/components/ToggleButton/index.d.ts +3 -3
- package/lib/components/ToggleButton/index.js +4 -3
- package/lib/components/ToggleButton/index.js.map +1 -1
- 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 +8 -5
- package/lib/components/ToggleButton/useToggleButton.js +47 -5
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- 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 +0 -1
- package/lib/index.js +0 -1
- 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.js +7 -2
- package/lib-commonjs/CompoundButton.js.map +1 -1
- package/lib-commonjs/MenuButton.js +7 -2
- package/lib-commonjs/MenuButton.js.map +1 -1
- package/lib-commonjs/SplitButton.js +7 -2
- package/lib-commonjs/SplitButton.js.map +1 -1
- package/lib-commonjs/ToggleButton.js +7 -2
- package/lib-commonjs/ToggleButton.js.map +1 -1
- package/lib-commonjs/common/isConformant.d.ts +4 -2
- package/lib-commonjs/common/isConformant.js +19 -7
- package/lib-commonjs/common/isConformant.js.map +1 -1
- package/lib-commonjs/components/Button/Button.d.ts +4 -5
- package/lib-commonjs/components/Button/Button.js +20 -12
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.d.ts +46 -114
- 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 +3 -3
- package/lib-commonjs/components/Button/index.js +23 -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 -14
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.d.ts +5 -10
- package/lib-commonjs/components/Button/useButton.js +59 -25
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +10 -0
- package/lib-commonjs/components/Button/useButtonStyles.js +365 -0
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -0
- package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +4 -5
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +20 -14
- package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +8 -27
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.js +4 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/index.d.ts +2 -1
- package/lib-commonjs/components/CompoundButton/index.js +22 -3
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +2 -2
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +24 -16
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +5 -10
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +35 -28
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- 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 +4 -5
- package/lib-commonjs/components/MenuButton/MenuButton.js +20 -24
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +7 -50
- package/lib-commonjs/components/MenuButton/MenuButton.types.js +4 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
- package/lib-commonjs/components/MenuButton/index.d.ts +2 -3
- package/lib-commonjs/components/MenuButton/index.js +22 -5
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +2 -4
- package/lib-commonjs/components/MenuButton/renderMenuButton.js +24 -18
- package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +3 -7
- package/lib-commonjs/components/MenuButton/useMenuButton.js +41 -23
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- 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 +5 -5
- package/lib-commonjs/components/SplitButton/SplitButton.js +21 -25
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +12 -28
- package/lib-commonjs/components/SplitButton/SplitButton.types.js +4 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib-commonjs/components/SplitButton/index.d.ts +3 -2
- package/lib-commonjs/components/SplitButton/index.js +22 -3
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +2 -4
- package/lib-commonjs/components/SplitButton/renderSplitButton.js +22 -14
- package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +5 -7
- package/lib-commonjs/components/SplitButton/useSplitButton.js +81 -48
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- 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 +4 -5
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +20 -14
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +11 -17
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js +4 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.d.ts +3 -3
- package/lib-commonjs/components/ToggleButton/index.js +23 -5
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- 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 +8 -5
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +60 -7
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- 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 +0 -1
- package/lib-commonjs/index.js +11 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +37 -35
- package/config/api-extractor.json +0 -3
- package/config/pre-copy.json +0 -9
- package/config/tests.js +0 -11
- package/etc/react-button.api.md +0 -335
- package/just.config.ts +0 -3
- package/lib/components/Button/useButtonClasses.d.ts +0 -29
- package/lib/components/Button/useButtonClasses.js +0 -417
- package/lib/components/Button/useButtonClasses.js.map +0 -1
- package/lib/components/Button/useButtonState.d.ts +0 -6
- package/lib/components/Button/useButtonState.js +0 -28
- package/lib/components/Button/useButtonState.js.map +0 -1
- package/lib/components/CompoundButton/useCompoundButtonClasses.d.ts +0 -4
- package/lib/components/CompoundButton/useCompoundButtonClasses.js +0 -180
- package/lib/components/CompoundButton/useCompoundButtonClasses.js.map +0 -1
- package/lib/components/MenuButton/useExpanded.d.ts +0 -18
- package/lib/components/MenuButton/useExpanded.js +0 -61
- package/lib/components/MenuButton/useExpanded.js.map +0 -1
- package/lib/components/MenuButton/useMenuButtonClasses.d.ts +0 -3
- package/lib/components/MenuButton/useMenuButtonClasses.js +0 -78
- package/lib/components/MenuButton/useMenuButtonClasses.js.map +0 -1
- package/lib/components/MenuButton/useMenuButtonState.d.ts +0 -2
- package/lib/components/MenuButton/useMenuButtonState.js +0 -9
- package/lib/components/MenuButton/useMenuButtonState.js.map +0 -1
- package/lib/components/SplitButton/useSplitButtonClasses.d.ts +0 -3
- package/lib/components/SplitButton/useSplitButtonClasses.js +0 -123
- package/lib/components/SplitButton/useSplitButtonClasses.js.map +0 -1
- package/lib/components/ToggleButton/useChecked.d.ts +0 -14
- package/lib/components/ToggleButton/useChecked.js +0 -25
- package/lib/components/ToggleButton/useChecked.js.map +0 -1
- package/lib/components/ToggleButton/useToggleButtonClasses.d.ts +0 -3
- package/lib/components/ToggleButton/useToggleButtonClasses.js +0 -130
- package/lib/components/ToggleButton/useToggleButtonClasses.js.map +0 -1
- package/lib/utils/tempTypes.d.ts +0 -33
- package/lib/utils/tempTypes.js +0 -4
- package/lib/utils/tempTypes.js.map +0 -1
- package/lib/version.d.ts +0 -1
- package/lib/version.js +0 -5
- package/lib/version.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/CompoundButton.d.ts +0 -1
- package/lib-amd/CompoundButton.js +0 -6
- package/lib-amd/CompoundButton.js.map +0 -1
- package/lib-amd/MenuButton.d.ts +0 -1
- package/lib-amd/MenuButton.js +0 -6
- package/lib-amd/MenuButton.js.map +0 -1
- package/lib-amd/SplitButton.d.ts +0 -1
- package/lib-amd/SplitButton.js +0 -6
- package/lib-amd/SplitButton.js.map +0 -1
- package/lib-amd/ToggleButton.d.ts +0 -1
- package/lib-amd/ToggleButton.js +0 -6
- package/lib-amd/ToggleButton.js.map +0 -1
- package/lib-amd/common/isConformant.d.ts +0 -2
- package/lib-amd/common/isConformant.js +0 -13
- package/lib-amd/common/isConformant.js.map +0 -1
- package/lib-amd/components/Button/Button.d.ts +0 -7
- package/lib-amd/components/Button/Button.js +0 -16
- package/lib-amd/components/Button/Button.js.map +0 -1
- package/lib-amd/components/Button/Button.types.d.ts +0 -130
- 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 -5
- package/lib-amd/components/Button/index.js +0 -9
- 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 -17
- package/lib-amd/components/Button/renderButton.js.map +0 -1
- package/lib-amd/components/Button/useButton.d.ts +0 -13
- package/lib-amd/components/Button/useButton.js +0 -28
- package/lib-amd/components/Button/useButton.js.map +0 -1
- package/lib-amd/components/Button/useButtonClasses.d.ts +0 -29
- package/lib-amd/components/Button/useButtonClasses.js +0 -417
- package/lib-amd/components/Button/useButtonClasses.js.map +0 -1
- package/lib-amd/components/Button/useButtonState.d.ts +0 -6
- package/lib-amd/components/Button/useButtonState.js +0 -32
- package/lib-amd/components/Button/useButtonState.js.map +0 -1
- package/lib-amd/components/CompoundButton/CompoundButton.d.ts +0 -7
- package/lib-amd/components/CompoundButton/CompoundButton.js +0 -17
- package/lib-amd/components/CompoundButton/CompoundButton.js.map +0 -1
- package/lib-amd/components/CompoundButton/CompoundButton.types.d.ts +0 -33
- package/lib-amd/components/CompoundButton/CompoundButton.types.js +0 -5
- package/lib-amd/components/CompoundButton/CompoundButton.types.js.map +0 -1
- package/lib-amd/components/CompoundButton/index.d.ts +0 -4
- package/lib-amd/components/CompoundButton/index.js +0 -8
- package/lib-amd/components/CompoundButton/index.js.map +0 -1
- package/lib-amd/components/CompoundButton/renderCompoundButton.d.ts +0 -5
- package/lib-amd/components/CompoundButton/renderCompoundButton.js +0 -19
- package/lib-amd/components/CompoundButton/renderCompoundButton.js.map +0 -1
- package/lib-amd/components/CompoundButton/useCompoundButton.d.ts +0 -13
- package/lib-amd/components/CompoundButton/useCompoundButton.js +0 -32
- package/lib-amd/components/CompoundButton/useCompoundButton.js.map +0 -1
- package/lib-amd/components/CompoundButton/useCompoundButtonClasses.d.ts +0 -4
- package/lib-amd/components/CompoundButton/useCompoundButtonClasses.js +0 -182
- package/lib-amd/components/CompoundButton/useCompoundButtonClasses.js.map +0 -1
- package/lib-amd/components/MenuButton/MenuButton.d.ts +0 -7
- package/lib-amd/components/MenuButton/MenuButton.js +0 -26
- package/lib-amd/components/MenuButton/MenuButton.js.map +0 -1
- package/lib-amd/components/MenuButton/MenuButton.types.d.ts +0 -54
- package/lib-amd/components/MenuButton/MenuButton.types.js +0 -5
- package/lib-amd/components/MenuButton/MenuButton.types.js.map +0 -1
- package/lib-amd/components/MenuButton/index.d.ts +0 -6
- package/lib-amd/components/MenuButton/index.js +0 -10
- package/lib-amd/components/MenuButton/index.js.map +0 -1
- package/lib-amd/components/MenuButton/renderMenuButton.d.ts +0 -7
- package/lib-amd/components/MenuButton/renderMenuButton.js +0 -21
- package/lib-amd/components/MenuButton/renderMenuButton.js.map +0 -1
- package/lib-amd/components/MenuButton/useExpanded.d.ts +0 -18
- package/lib-amd/components/MenuButton/useExpanded.js +0 -62
- package/lib-amd/components/MenuButton/useExpanded.js.map +0 -1
- package/lib-amd/components/MenuButton/useMenuButton.d.ts +0 -10
- package/lib-amd/components/MenuButton/useMenuButton.js +0 -27
- package/lib-amd/components/MenuButton/useMenuButton.js.map +0 -1
- package/lib-amd/components/MenuButton/useMenuButtonClasses.d.ts +0 -3
- package/lib-amd/components/MenuButton/useMenuButtonClasses.js +0 -81
- package/lib-amd/components/MenuButton/useMenuButtonClasses.js.map +0 -1
- package/lib-amd/components/MenuButton/useMenuButtonState.d.ts +0 -2
- package/lib-amd/components/MenuButton/useMenuButtonState.js +0 -11
- package/lib-amd/components/MenuButton/useMenuButtonState.js.map +0 -1
- package/lib-amd/components/SplitButton/SplitButton.d.ts +0 -7
- package/lib-amd/components/SplitButton/SplitButton.js +0 -26
- package/lib-amd/components/SplitButton/SplitButton.js.map +0 -1
- package/lib-amd/components/SplitButton/SplitButton.types.d.ts +0 -35
- package/lib-amd/components/SplitButton/SplitButton.types.js +0 -5
- package/lib-amd/components/SplitButton/SplitButton.types.js.map +0 -1
- package/lib-amd/components/SplitButton/index.d.ts +0 -4
- package/lib-amd/components/SplitButton/index.js +0 -8
- package/lib-amd/components/SplitButton/index.js.map +0 -1
- package/lib-amd/components/SplitButton/renderSplitButton.d.ts +0 -7
- package/lib-amd/components/SplitButton/renderSplitButton.js +0 -17
- package/lib-amd/components/SplitButton/renderSplitButton.js.map +0 -1
- package/lib-amd/components/SplitButton/useSplitButton.d.ts +0 -10
- package/lib-amd/components/SplitButton/useSplitButton.js +0 -50
- package/lib-amd/components/SplitButton/useSplitButton.js.map +0 -1
- package/lib-amd/components/SplitButton/useSplitButtonClasses.d.ts +0 -3
- package/lib-amd/components/SplitButton/useSplitButtonClasses.js +0 -123
- package/lib-amd/components/SplitButton/useSplitButtonClasses.js.map +0 -1
- package/lib-amd/components/ToggleButton/ToggleButton.d.ts +0 -7
- package/lib-amd/components/ToggleButton/ToggleButton.js +0 -17
- package/lib-amd/components/ToggleButton/ToggleButton.js.map +0 -1
- package/lib-amd/components/ToggleButton/ToggleButton.types.d.ts +0 -25
- package/lib-amd/components/ToggleButton/ToggleButton.types.js +0 -5
- package/lib-amd/components/ToggleButton/ToggleButton.types.js.map +0 -1
- package/lib-amd/components/ToggleButton/index.d.ts +0 -5
- package/lib-amd/components/ToggleButton/index.js +0 -9
- package/lib-amd/components/ToggleButton/index.js.map +0 -1
- package/lib-amd/components/ToggleButton/useChecked.d.ts +0 -14
- package/lib-amd/components/ToggleButton/useChecked.js +0 -27
- package/lib-amd/components/ToggleButton/useChecked.js.map +0 -1
- package/lib-amd/components/ToggleButton/useToggleButton.d.ts +0 -6
- package/lib-amd/components/ToggleButton/useToggleButton.js +0 -10
- package/lib-amd/components/ToggleButton/useToggleButton.js.map +0 -1
- package/lib-amd/components/ToggleButton/useToggleButtonClasses.d.ts +0 -3
- package/lib-amd/components/ToggleButton/useToggleButtonClasses.js +0 -132
- package/lib-amd/components/ToggleButton/useToggleButtonClasses.js.map +0 -1
- package/lib-amd/index.d.ts +0 -6
- package/lib-amd/index.js +0 -10
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/utils/tempTypes.d.ts +0 -33
- package/lib-amd/utils/tempTypes.js +0 -8
- package/lib-amd/utils/tempTypes.js.map +0 -1
- package/lib-amd/version.d.ts +0 -1
- package/lib-amd/version.js +0 -6
- package/lib-amd/version.js.map +0 -1
- package/lib-commonjs/components/Button/useButtonClasses.d.ts +0 -29
- package/lib-commonjs/components/Button/useButtonClasses.js +0 -419
- package/lib-commonjs/components/Button/useButtonClasses.js.map +0 -1
- package/lib-commonjs/components/Button/useButtonState.d.ts +0 -6
- package/lib-commonjs/components/Button/useButtonState.js +0 -30
- package/lib-commonjs/components/Button/useButtonState.js.map +0 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonClasses.d.ts +0 -4
- package/lib-commonjs/components/CompoundButton/useCompoundButtonClasses.js +0 -182
- package/lib-commonjs/components/CompoundButton/useCompoundButtonClasses.js.map +0 -1
- package/lib-commonjs/components/MenuButton/useExpanded.d.ts +0 -18
- package/lib-commonjs/components/MenuButton/useExpanded.js +0 -63
- package/lib-commonjs/components/MenuButton/useExpanded.js.map +0 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonClasses.d.ts +0 -3
- package/lib-commonjs/components/MenuButton/useMenuButtonClasses.js +0 -80
- package/lib-commonjs/components/MenuButton/useMenuButtonClasses.js.map +0 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonState.d.ts +0 -2
- package/lib-commonjs/components/MenuButton/useMenuButtonState.js +0 -11
- package/lib-commonjs/components/MenuButton/useMenuButtonState.js.map +0 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonClasses.d.ts +0 -3
- package/lib-commonjs/components/SplitButton/useSplitButtonClasses.js +0 -125
- package/lib-commonjs/components/SplitButton/useSplitButtonClasses.js.map +0 -1
- package/lib-commonjs/components/ToggleButton/useChecked.d.ts +0 -14
- package/lib-commonjs/components/ToggleButton/useChecked.js +0 -27
- package/lib-commonjs/components/ToggleButton/useChecked.js.map +0 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.d.ts +0 -3
- package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.js +0 -132
- package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.js.map +0 -1
- package/lib-commonjs/utils/tempTypes.d.ts +0 -33
- package/lib-commonjs/utils/tempTypes.js +0 -6
- package/lib-commonjs/utils/tempTypes.js.map +0 -1
- package/lib-commonjs/version.d.ts +0 -1
- package/lib-commonjs/version.js +0 -7
- package/lib-commonjs/version.js.map +0 -1
- package/src/components/Button/Button.types.ts +0 -166
- package/src/components/CompoundButton/CompoundButton.types.ts +0 -37
- package/src/components/MenuButton/MenuButton.types.ts +0 -63
- package/src/components/SplitButton/SplitButton.types.ts +0 -41
- package/src/components/ToggleButton/ToggleButton.types.ts +0 -29
@@ -1,182 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var _a;
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
|
5
|
-
var useButtonClasses_1 = require("../Button/useButtonClasses");
|
6
|
-
var GlobalClassNames = {
|
7
|
-
root: 'ms-CompoundButton',
|
8
|
-
contentContainer: 'ms-CompoundButton-contentContainer',
|
9
|
-
secondaryContent: 'ms-CompoundButton-secondaryContent',
|
10
|
-
};
|
11
|
-
exports.useClasses = react_theme_provider_1.makeVariantClasses({
|
12
|
-
name: 'CompoundButton',
|
13
|
-
prefix: '--button',
|
14
|
-
styles: {
|
15
|
-
root: [
|
16
|
-
GlobalClassNames.root,
|
17
|
-
{
|
18
|
-
alignItems: 'flex-start',
|
19
|
-
},
|
20
|
-
],
|
21
|
-
contentContainer: [
|
22
|
-
GlobalClassNames.contentContainer,
|
23
|
-
{
|
24
|
-
display: 'flex',
|
25
|
-
flexDirection: 'column',
|
26
|
-
textAlign: 'left',
|
27
|
-
},
|
28
|
-
],
|
29
|
-
secondaryContent: [
|
30
|
-
GlobalClassNames.secondaryContent,
|
31
|
-
(_a = {
|
32
|
-
color: 'var(--button-secondaryContentColor, var(--button-contentColor))',
|
33
|
-
fontSize: 'var(--button-secondaryContentFontSize)',
|
34
|
-
fontWeight: 'var(--button-secondaryContentFontWeight)',
|
35
|
-
lineHeight: '100%',
|
36
|
-
marginTop: 'var(--button-secondaryContentGap)',
|
37
|
-
'@media (forced-colors: active)': {
|
38
|
-
color: 'var(--button-highContrast-secondaryContentColor)',
|
39
|
-
}
|
40
|
-
},
|
41
|
-
_a["." + GlobalClassNames.root + ":hover &"] = {
|
42
|
-
color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',
|
43
|
-
'@media (forced-colors: active)': {
|
44
|
-
color: 'var(--button-highContrast-hovered-secondaryContentColor, ' +
|
45
|
-
'var(--button-highContrast-secondaryContentColor))',
|
46
|
-
},
|
47
|
-
},
|
48
|
-
_a["." + GlobalClassNames.root + ":active &"] = {
|
49
|
-
color: 'var(--button-pressed-secondaryContentColor, ' +
|
50
|
-
'var(--button-hovered-secondaryContentColor, ' +
|
51
|
-
'var(--button-secondaryContentColor)))',
|
52
|
-
'@media (forced-colors: active)': {
|
53
|
-
color: 'var(--button-highContrast-pressed-secondaryContentColor, ' +
|
54
|
-
'var(--button-highContrast-hovered-secondaryContentColor, ' +
|
55
|
-
'var(--button-highContrast-secondaryContentColor)))',
|
56
|
-
},
|
57
|
-
},
|
58
|
-
_a["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = {
|
59
|
-
color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',
|
60
|
-
'@media (forced-colors: active)': {
|
61
|
-
color: 'var(--button-highContrast-disabled-secondaryContentColor, ' +
|
62
|
-
'var(--button-highContrast-secondaryContentColor))',
|
63
|
-
},
|
64
|
-
},
|
65
|
-
_a),
|
66
|
-
],
|
67
|
-
},
|
68
|
-
variants: function (theme) {
|
69
|
-
var _a, _b;
|
70
|
-
var fonts = theme.fonts, palette = theme.palette, semanticColors = theme.semanticColors;
|
71
|
-
return {
|
72
|
-
root: {
|
73
|
-
height: 'auto',
|
74
|
-
maxWidth: '280px',
|
75
|
-
minWidth: '72px',
|
76
|
-
paddingBottom: '16px',
|
77
|
-
paddingLeft: '12px',
|
78
|
-
paddingRight: '12px',
|
79
|
-
paddingTop: '16px',
|
80
|
-
iconSize: '28px',
|
81
|
-
secondaryContentColor: palette.neutralSecondary,
|
82
|
-
secondaryContentGap: '4px',
|
83
|
-
secondaryContentFontSize: (_a = fonts) === null || _a === void 0 ? void 0 : _a.small.fontSize,
|
84
|
-
secondaryContentFontWeight: 'normal',
|
85
|
-
hovered: {
|
86
|
-
secondaryContentColor: palette.neutralDark,
|
87
|
-
},
|
88
|
-
pressed: {
|
89
|
-
secondaryContentColor: semanticColors.buttonTextPressed,
|
90
|
-
},
|
91
|
-
disabled: {
|
92
|
-
secondaryContentColor: semanticColors.buttonTextDisabled,
|
93
|
-
},
|
94
|
-
highContrast: {
|
95
|
-
secondaryContentColor: 'WindowText',
|
96
|
-
hovered: {
|
97
|
-
secondaryContentColor: 'Highlight',
|
98
|
-
},
|
99
|
-
pressed: {
|
100
|
-
secondaryContentColor: 'WindowText',
|
101
|
-
},
|
102
|
-
disabled: {
|
103
|
-
secondaryContentColor: 'GrayText',
|
104
|
-
},
|
105
|
-
},
|
106
|
-
},
|
107
|
-
block: {
|
108
|
-
maxWidth: '100%',
|
109
|
-
},
|
110
|
-
iconOnly: {
|
111
|
-
minHeight: 'var(--button-size-regular)',
|
112
|
-
width: 'var(--button-minHeight)',
|
113
|
-
minWidth: '0',
|
114
|
-
paddingBottom: '0',
|
115
|
-
paddingTop: '0',
|
116
|
-
paddingLeft: '0',
|
117
|
-
paddingRight: '0',
|
118
|
-
},
|
119
|
-
primary: {
|
120
|
-
secondaryContentColor: 'var(--color-brand-secondaryContentColor)',
|
121
|
-
focused: {
|
122
|
-
secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',
|
123
|
-
},
|
124
|
-
hovered: {
|
125
|
-
secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',
|
126
|
-
},
|
127
|
-
pressed: {
|
128
|
-
secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',
|
129
|
-
},
|
130
|
-
highContrast: {
|
131
|
-
secondaryContentColor: 'Window',
|
132
|
-
hovered: {
|
133
|
-
secondaryContentColor: 'Window',
|
134
|
-
},
|
135
|
-
pressed: {
|
136
|
-
secondaryContentColor: 'Window',
|
137
|
-
},
|
138
|
-
disabled: {
|
139
|
-
secondaryContentColor: 'GrayText',
|
140
|
-
},
|
141
|
-
},
|
142
|
-
},
|
143
|
-
ghost: {
|
144
|
-
secondaryContentColor: palette.neutralSecondary,
|
145
|
-
disabled: {
|
146
|
-
secondaryContentColor: palette.neutralTertiary,
|
147
|
-
},
|
148
|
-
focused: {
|
149
|
-
secondaryContentColor: palette.neutralSecondary,
|
150
|
-
},
|
151
|
-
hovered: {
|
152
|
-
secondaryContentColor: palette.neutralDark,
|
153
|
-
},
|
154
|
-
pressed: {
|
155
|
-
secondaryContentColor: palette.black,
|
156
|
-
},
|
157
|
-
highContrast: {
|
158
|
-
secondaryContentColor: 'WindowText',
|
159
|
-
hovered: {
|
160
|
-
secondaryContentColor: 'Highlight',
|
161
|
-
},
|
162
|
-
pressed: {
|
163
|
-
secondaryContentColor: 'Highlight',
|
164
|
-
},
|
165
|
-
disabled: {
|
166
|
-
secondaryContentColor: 'GrayText',
|
167
|
-
},
|
168
|
-
},
|
169
|
-
},
|
170
|
-
transparent: {
|
171
|
-
hovered: {
|
172
|
-
secondaryContentColor: (_b = palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
|
173
|
-
},
|
174
|
-
},
|
175
|
-
};
|
176
|
-
},
|
177
|
-
});
|
178
|
-
exports.useCompoundButtonClasses = function (state) {
|
179
|
-
useButtonClasses_1.useButtonClasses(state);
|
180
|
-
exports.useClasses(state);
|
181
|
-
};
|
182
|
-
//# sourceMappingURL=useCompoundButtonClasses.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useCompoundButtonClasses.js","sourceRoot":"../src/","sources":["components/CompoundButton/useCompoundButtonClasses.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { CompoundButtonState, CompoundButtonVariants } from './CompoundButton.types';\nimport { useButtonClasses } from '../Button/useButtonClasses';\n\nconst GlobalClassNames = {\n root: 'ms-CompoundButton',\n contentContainer: 'ms-CompoundButton-contentContainer',\n secondaryContent: 'ms-CompoundButton-secondaryContent',\n};\n\nexport const useClasses = makeVariantClasses<CompoundButtonState, CompoundButtonVariants>({\n name: 'CompoundButton',\n prefix: '--button',\n styles: {\n root: [\n GlobalClassNames.root,\n {\n alignItems: 'flex-start',\n },\n ],\n\n contentContainer: [\n GlobalClassNames.contentContainer,\n {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n ],\n\n secondaryContent: [\n GlobalClassNames.secondaryContent,\n {\n color: 'var(--button-secondaryContentColor, var(--button-contentColor))',\n fontSize: 'var(--button-secondaryContentFontSize)',\n fontWeight: 'var(--button-secondaryContentFontWeight)',\n lineHeight: '100%',\n marginTop: 'var(--button-secondaryContentGap)',\n\n '@media (forced-colors: active)': {\n color: 'var(--button-highContrast-secondaryContentColor)',\n },\n\n [`.${GlobalClassNames.root}:hover &`]: {\n color: 'var(--button-hovered-secondaryContentColor, var(--button-secondaryContentColor))',\n\n '@media (forced-colors: active)': {\n color:\n 'var(--button-highContrast-hovered-secondaryContentColor, ' +\n 'var(--button-highContrast-secondaryContentColor))',\n },\n },\n\n [`.${GlobalClassNames.root}:active &`]: {\n color:\n 'var(--button-pressed-secondaryContentColor, ' +\n 'var(--button-hovered-secondaryContentColor, ' +\n 'var(--button-secondaryContentColor)))',\n\n '@media (forced-colors: active)': {\n color:\n 'var(--button-highContrast-pressed-secondaryContentColor, ' +\n 'var(--button-highContrast-hovered-secondaryContentColor, ' +\n 'var(--button-highContrast-secondaryContentColor)))',\n },\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n color: 'var(--button-disabled-secondaryContentColor, var(--button-disabled-contentColor))',\n\n '@media (forced-colors: active)': {\n color:\n 'var(--button-highContrast-disabled-secondaryContentColor, ' +\n 'var(--button-highContrast-secondaryContentColor))',\n },\n },\n },\n ],\n },\n\n variants: (theme: Theme): CompoundButtonVariants => {\n const { fonts, palette, semanticColors } = theme;\n\n return {\n root: {\n height: 'auto',\n maxWidth: '280px',\n minWidth: '72px',\n paddingBottom: '16px',\n paddingLeft: '12px',\n paddingRight: '12px',\n paddingTop: '16px',\n iconSize: '28px',\n secondaryContentColor: palette.neutralSecondary,\n secondaryContentGap: '4px',\n secondaryContentFontSize: fonts?.small.fontSize as string,\n secondaryContentFontWeight: 'normal',\n\n hovered: {\n secondaryContentColor: palette.neutralDark,\n },\n\n pressed: {\n secondaryContentColor: semanticColors.buttonTextPressed,\n },\n\n disabled: {\n secondaryContentColor: semanticColors.buttonTextDisabled,\n },\n\n highContrast: {\n secondaryContentColor: 'WindowText',\n hovered: {\n secondaryContentColor: 'Highlight',\n },\n pressed: {\n secondaryContentColor: 'WindowText',\n },\n disabled: {\n secondaryContentColor: 'GrayText',\n },\n },\n },\n\n block: {\n maxWidth: '100%',\n },\n\n iconOnly: {\n minHeight: 'var(--button-size-regular)',\n width: 'var(--button-minHeight)',\n minWidth: '0',\n paddingBottom: '0',\n paddingTop: '0',\n paddingLeft: '0',\n paddingRight: '0',\n },\n\n primary: {\n secondaryContentColor: 'var(--color-brand-secondaryContentColor)',\n\n focused: {\n secondaryContentColor: 'var(--color-brand-focused-secondaryContentColor)',\n },\n\n hovered: {\n secondaryContentColor: 'var(--color-brand-hovered-secondaryContentColor)',\n },\n\n pressed: {\n secondaryContentColor: 'var(--color-brand-pressed-secondaryContentColor)',\n },\n\n highContrast: {\n secondaryContentColor: 'Window',\n hovered: {\n secondaryContentColor: 'Window',\n },\n pressed: {\n secondaryContentColor: 'Window',\n },\n disabled: {\n secondaryContentColor: 'GrayText',\n },\n },\n },\n\n ghost: {\n secondaryContentColor: palette.neutralSecondary,\n disabled: {\n secondaryContentColor: palette.neutralTertiary,\n },\n focused: {\n secondaryContentColor: palette.neutralSecondary,\n },\n hovered: {\n secondaryContentColor: palette.neutralDark,\n },\n pressed: {\n secondaryContentColor: palette.black,\n },\n\n highContrast: {\n secondaryContentColor: 'WindowText',\n hovered: {\n secondaryContentColor: 'Highlight',\n },\n pressed: {\n secondaryContentColor: 'Highlight',\n },\n disabled: {\n secondaryContentColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n hovered: {\n secondaryContentColor: palette?.themePrimary,\n },\n },\n };\n },\n});\n\nexport const useCompoundButtonClasses = (state: CompoundButtonState) => {\n useButtonClasses(state);\n useClasses(state);\n};\n"]}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { MenuButtonState, MinimalMenuProps } from './MenuButton.types';
|
3
|
-
export declare type ExpandedState = {
|
4
|
-
ref?: React.Ref<unknown>;
|
5
|
-
expanded?: boolean;
|
6
|
-
defaultExpanded?: boolean;
|
7
|
-
onClick?: (ev: React.MouseEvent) => void;
|
8
|
-
onMenuDismiss?: () => void;
|
9
|
-
onKeyDown?: (ev: React.KeyboardEvent) => void;
|
10
|
-
'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];
|
11
|
-
'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];
|
12
|
-
menu?: MenuButtonState['menu'];
|
13
|
-
};
|
14
|
-
export declare const useMenuContext: () => MinimalMenuProps;
|
15
|
-
/**
|
16
|
-
* @param draftState - mutable state object to update to add expanded behavior.
|
17
|
-
*/
|
18
|
-
export declare const useExpanded: <TDraftState extends ExpandedState>(draftState: TDraftState) => void;
|
@@ -1,63 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
var React = require("react");
|
4
|
-
var react_hooks_1 = require("@fluentui/react-hooks");
|
5
|
-
var keyboard_key_1 = require("@fluentui/keyboard-key");
|
6
|
-
var MenuContext = React.createContext({});
|
7
|
-
exports.useMenuContext = function () {
|
8
|
-
return React.useContext(MenuContext);
|
9
|
-
};
|
10
|
-
/**
|
11
|
-
* @param draftState - mutable state object to update to add expanded behavior.
|
12
|
-
*/
|
13
|
-
exports.useExpanded = function (draftState) {
|
14
|
-
var expanded = draftState.expanded, defaultExpanded = draftState.defaultExpanded, onClick = draftState.onClick, onMenuDismiss = draftState.onMenuDismiss, onKeyDown = draftState.onKeyDown;
|
15
|
-
var _a = react_hooks_1.useControllableValue(expanded, defaultExpanded), expandedValue = _a[0], setExpandedValue = _a[1];
|
16
|
-
var rootRef = React.useRef();
|
17
|
-
// Set up a ref to be used for the menu target.
|
18
|
-
draftState.ref = react_hooks_1.useMergedRefs(draftState.ref, rootRef);
|
19
|
-
// Set true value.
|
20
|
-
draftState.expanded = expandedValue;
|
21
|
-
// When the root is clicked, toggle menu.
|
22
|
-
draftState.onClick = React.useCallback(function (ev) {
|
23
|
-
if (onClick) {
|
24
|
-
onClick(ev);
|
25
|
-
if (ev.defaultPrevented) {
|
26
|
-
return;
|
27
|
-
}
|
28
|
-
}
|
29
|
-
setExpandedValue(!expandedValue);
|
30
|
-
}, [onClick, expandedValue, setExpandedValue]);
|
31
|
-
// When alt/meta down arrow is pressed, expand.
|
32
|
-
draftState.onKeyDown = React.useCallback(function (ev) {
|
33
|
-
if (onKeyDown) {
|
34
|
-
onKeyDown(ev);
|
35
|
-
if (ev.defaultPrevented) {
|
36
|
-
return;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
if ((ev.altKey || ev.metaKey) && keyboard_key_1.getCode(ev) === keyboard_key_1.ArrowDownKey) {
|
40
|
-
setExpandedValue(true);
|
41
|
-
ev.stopPropagation();
|
42
|
-
ev.preventDefault();
|
43
|
-
}
|
44
|
-
}, [onKeyDown, setExpandedValue]);
|
45
|
-
var onDismiss = React.useCallback(function () {
|
46
|
-
var _a;
|
47
|
-
(_a = onMenuDismiss) === null || _a === void 0 ? void 0 : _a();
|
48
|
-
setExpandedValue(false);
|
49
|
-
// TODO: should we re-focus the root?
|
50
|
-
}, [onMenuDismiss, setExpandedValue]);
|
51
|
-
var menuProps = {
|
52
|
-
hidden: !expandedValue,
|
53
|
-
onDismiss: onDismiss,
|
54
|
-
target: rootRef,
|
55
|
-
};
|
56
|
-
// Assign extra props to the menu slot.
|
57
|
-
draftState.menu = {
|
58
|
-
children: draftState.menu ? (typeof draftState.menu.children === 'function' ? (draftState.menu.children(menuProps)) : (React.createElement(MenuContext.Provider, { value: menuProps }, draftState.menu.children))) : null,
|
59
|
-
};
|
60
|
-
draftState['aria-expanded'] = expandedValue;
|
61
|
-
draftState['aria-haspopup'] = true;
|
62
|
-
};
|
63
|
-
//# sourceMappingURL=useExpanded.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useExpanded.js","sourceRoot":"../src/","sources":["components/MenuButton/useExpanded.tsx"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,qDAA4E;AAC5E,uDAA+D;AAgB/D,IAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB,EAAE,CAAC,CAAC;AACjD,QAAA,cAAc,GAAG;IAC5B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF;;GAEG;AACU,QAAA,WAAW,GAAG,UAAoC,UAAuB;IAC5E,IAAA,8BAAQ,EAAE,4CAAe,EAAE,4BAAO,EAAE,wCAAa,EAAE,gCAAS,CAAgB;IAC9E,IAAA,kEAAmF,EAAlF,qBAAa,EAAE,wBAAmE,CAAC;IAC1F,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,EAA2B,CAAC;IAExD,+CAA+C;IAC/C,UAAU,CAAC,GAAG,GAAG,2BAAa,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAExD,kBAAkB;IAClB,UAAU,CAAC,QAAQ,GAAG,aAAa,CAAC;IAEpC,yCAAyC;IACzC,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,EAAuC;QACtC,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,OAAO,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAC3C,CAAC;IAEF,+CAA+C;IAC/C,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,WAAW,CACtC,UAAC,EAAuB;QACtB,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,EAAE,CAAC,CAAC;YAEd,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,IAAI,CAAC,EAAE,CAAC,MAAM,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,sBAAO,CAAC,EAAE,CAAC,KAAK,2BAAY,EAAE;YAC7D,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;SACrB;IACH,CAAC,EACD,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAC9B,CAAC;IAEF,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC;;QAClC,MAAA,aAAa,4CAAK;QAElB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAExB,qCAAqC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEtC,IAAM,SAAS,GAAqB;QAClC,MAAM,EAAE,CAAC,aAAa;QACtB,SAAS,WAAA;QACT,MAAM,EAAE,OAAO;KAChB,CAAC;IAEF,uCAAuC;IACvC,UAAU,CAAC,IAAI,GAAG;QAChB,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,OAAO,UAAU,CAAC,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAC/C,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CACpC,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,IAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAwB,CAC1F,CACF,CAAC,CAAC,CAAC,IAAI;KACT,CAAC;IAEF,UAAU,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC;IAC5C,UAAU,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;AACrC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useMergedRefs } from '@fluentui/react-hooks';\nimport { getCode, ArrowDownKey } from '@fluentui/keyboard-key';\nimport { MenuButtonState, MinimalMenuProps } from './MenuButton.types';\n\nexport type ExpandedState = {\n ref?: React.Ref<unknown>;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onClick?: (ev: React.MouseEvent) => void;\n onMenuDismiss?: () => void;\n onKeyDown?: (ev: React.KeyboardEvent) => void;\n 'aria-expanded'?: React.HTMLAttributes<HTMLElement>['aria-expanded'];\n 'aria-haspopup'?: React.HTMLAttributes<HTMLElement>['aria-haspopup'];\n\n menu?: MenuButtonState['menu'];\n};\n\nconst MenuContext = React.createContext<MinimalMenuProps>({});\nexport const useMenuContext = () => {\n return React.useContext(MenuContext);\n};\n\n/**\n * @param draftState - mutable state object to update to add expanded behavior.\n */\nexport const useExpanded = <TDraftState extends ExpandedState>(draftState: TDraftState) => {\n const { expanded, defaultExpanded, onClick, onMenuDismiss, onKeyDown } = draftState;\n const [expandedValue, setExpandedValue] = useControllableValue(expanded, defaultExpanded);\n const rootRef = React.useRef<HTMLElement | undefined>();\n\n // Set up a ref to be used for the menu target.\n draftState.ref = useMergedRefs(draftState.ref, rootRef);\n\n // Set true value.\n draftState.expanded = expandedValue;\n\n // When the root is clicked, toggle menu.\n draftState.onClick = React.useCallback(\n (ev: React.MouseEvent<HTMLButtonElement>) => {\n if (onClick) {\n onClick(ev);\n\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n setExpandedValue(!expandedValue);\n },\n [onClick, expandedValue, setExpandedValue],\n );\n\n // When alt/meta down arrow is pressed, expand.\n draftState.onKeyDown = React.useCallback(\n (ev: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(ev);\n\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n if ((ev.altKey || ev.metaKey) && getCode(ev) === ArrowDownKey) {\n setExpandedValue(true);\n ev.stopPropagation();\n ev.preventDefault();\n }\n },\n [onKeyDown, setExpandedValue],\n );\n\n const onDismiss = React.useCallback(() => {\n onMenuDismiss?.();\n\n setExpandedValue(false);\n\n // TODO: should we re-focus the root?\n }, [onMenuDismiss, setExpandedValue]);\n\n const menuProps: MinimalMenuProps = {\n hidden: !expandedValue,\n onDismiss,\n target: rootRef,\n };\n\n // Assign extra props to the menu slot.\n draftState.menu = {\n children: draftState.menu ? (\n typeof draftState.menu.children === 'function' ? (\n draftState.menu.children(menuProps)\n ) : (\n <MenuContext.Provider value={menuProps}>{draftState.menu.children}</MenuContext.Provider>\n )\n ) : null,\n };\n\n draftState['aria-expanded'] = expandedValue;\n draftState['aria-haspopup'] = true;\n};\n"]}
|
@@ -1,3 +0,0 @@
|
|
1
|
-
import { Theme } from '@fluentui/react-theme-provider';
|
2
|
-
import { MenuButtonState } from './MenuButton.types';
|
3
|
-
export declare const useMenuButtonClasses: (state: MenuButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
|
@@ -1,80 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var _a, _b;
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
|
5
|
-
var GlobalClassNames = {
|
6
|
-
root: 'ms-Button-root',
|
7
|
-
menuIcon: 'ms-Button-menuIcon',
|
8
|
-
_disabled: 'ms-Button--disabled',
|
9
|
-
_iconOnly: 'ms-Button--iconOnly',
|
10
|
-
_ghost: 'ms-Button--ghost',
|
11
|
-
_expanded: 'ms-Button--expanded',
|
12
|
-
};
|
13
|
-
exports.useMenuButtonClasses = react_theme_provider_1.makeVariantClasses({
|
14
|
-
name: 'MenuButton',
|
15
|
-
prefix: '--button',
|
16
|
-
styles: {
|
17
|
-
root: [
|
18
|
-
GlobalClassNames.root,
|
19
|
-
(_a = {
|
20
|
-
// This seems like a bad selector.
|
21
|
-
'& > .ms-Button-menuIcon + *': {
|
22
|
-
marginLeft: 0,
|
23
|
-
},
|
24
|
-
'& .ms-layer': {
|
25
|
-
position: 'absolute',
|
26
|
-
}
|
27
|
-
},
|
28
|
-
_a["&:hover ." + GlobalClassNames.menuIcon] = {
|
29
|
-
color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))',
|
30
|
-
},
|
31
|
-
_a["&:active ." + GlobalClassNames.menuIcon] = {
|
32
|
-
color: 'var(--button-pressed-menuIconColor, var(--button-hovered-menuIconColor, var(--button-menuIconColor)))',
|
33
|
-
},
|
34
|
-
_a),
|
35
|
-
],
|
36
|
-
menuIcon: [
|
37
|
-
GlobalClassNames.menuIcon,
|
38
|
-
(_b = {
|
39
|
-
color: 'var(--button-menuIconColor)',
|
40
|
-
fontSize: 'var(--button-menuIconSize)'
|
41
|
-
},
|
42
|
-
_b["." + GlobalClassNames._disabled + " &"] = {
|
43
|
-
color: 'var(--button-disabled-menuIconColor)',
|
44
|
-
},
|
45
|
-
_b),
|
46
|
-
],
|
47
|
-
_disabled: [GlobalClassNames._disabled],
|
48
|
-
_iconOnly: [
|
49
|
-
GlobalClassNames._iconOnly,
|
50
|
-
{
|
51
|
-
'& > .ms-Button-icon + *': {
|
52
|
-
marginLeft: 0,
|
53
|
-
},
|
54
|
-
},
|
55
|
-
],
|
56
|
-
},
|
57
|
-
variants: function (theme) {
|
58
|
-
var _a, _b, _c, _d;
|
59
|
-
var palette = theme.palette;
|
60
|
-
return {
|
61
|
-
root: {
|
62
|
-
menuIconSize: '12px',
|
63
|
-
menuIconColor: 'var(--body-menuIconColor)',
|
64
|
-
},
|
65
|
-
ghost: {
|
66
|
-
menuIconColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralSecondary,
|
67
|
-
hovered: {
|
68
|
-
menuIconColor: (_b = palette) === null || _b === void 0 ? void 0 : _b.themePrimary,
|
69
|
-
},
|
70
|
-
pressed: {
|
71
|
-
menuIconColor: (_c = palette) === null || _c === void 0 ? void 0 : _c.black,
|
72
|
-
},
|
73
|
-
},
|
74
|
-
transparent: {
|
75
|
-
menuIconColor: (_d = palette) === null || _d === void 0 ? void 0 : _d.neutralSecondary,
|
76
|
-
},
|
77
|
-
};
|
78
|
-
},
|
79
|
-
});
|
80
|
-
//# sourceMappingURL=useMenuButtonClasses.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useMenuButtonClasses.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonClasses.ts"],"names":[],"mappings":";;;AAAA,uEAA2E;AAG3E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,gBAAgB;IACtB,QAAQ,EAAE,oBAAoB;IAC9B,SAAS,EAAE,qBAAqB;IAChC,SAAS,EAAE,qBAAqB;IAChC,MAAM,EAAE,kBAAkB;IAC1B,SAAS,EAAE,qBAAqB;CACjC,CAAC;AAEW,QAAA,oBAAoB,GAAG,yCAAkB,CAAsC;IAC1F,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,gBAAgB,CAAC,IAAI;;oBAEnB,kCAAkC;oBAClC,6BAA6B,EAAE;wBAC7B,UAAU,EAAE,CAAC;qBACd;oBAED,aAAa,EAAE;wBACb,QAAQ,EAAE,UAAU;qBACrB;;gBAED,GAAC,cAAY,gBAAgB,CAAC,QAAU,IAAG;oBACzC,KAAK,EAAE,kEAAkE;iBAC1E;gBAED,GAAC,eAAa,gBAAgB,CAAC,QAAU,IAAG;oBAC1C,KAAK,EACH,uGAAuG;iBAC1G;;SAEJ;QAED,QAAQ,EAAE;YACR,gBAAgB,CAAC,QAAQ;;oBAEvB,KAAK,EAAE,6BAA6B;oBACpC,QAAQ,EAAE,4BAA4B;;gBAEtC,GAAC,MAAI,gBAAgB,CAAC,SAAS,OAAI,IAAG;oBACpC,KAAK,EAAE,sCAAsC;iBAC9C;;SAEJ;QAED,SAAS,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC;QAEvC,SAAS,EAAE;YACT,gBAAgB,CAAC,SAAS;YAC1B;gBACE,yBAAyB,EAAE;oBACzB,UAAU,EAAE,CAAC;iBACd;aACF;SACF;KACF;IAED,QAAQ,EAAE,UAAC,KAAY;;QACb,IAAA,uBAAO,CAAW;QAE1B,OAAO;YACL,IAAI,EAAE;gBACJ,YAAY,EAAE,MAAM;gBACpB,aAAa,EAAE,2BAA2B;aAC3C;YAED,KAAK,EAAE;gBACL,aAAa,QAAE,OAAO,0CAAE,gBAAgB;gBACxC,OAAO,EAAE;oBACP,aAAa,QAAE,OAAO,0CAAE,YAAY;iBACrC;gBACD,OAAO,EAAE;oBACP,aAAa,QAAE,OAAO,0CAAE,KAAK;iBAC9B;aACF;YAED,WAAW,EAAE;gBACX,aAAa,QAAE,OAAO,0CAAE,gBAAgB;aACzC;SACF,CAAC;IACJ,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { MenuButtonState, MenuButtonVariants } from './MenuButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-Button-root',\n menuIcon: 'ms-Button-menuIcon',\n _disabled: 'ms-Button--disabled',\n _iconOnly: 'ms-Button--iconOnly',\n _ghost: 'ms-Button--ghost',\n _expanded: 'ms-Button--expanded',\n};\n\nexport const useMenuButtonClasses = makeVariantClasses<MenuButtonState, MenuButtonVariants>({\n name: 'MenuButton',\n prefix: '--button',\n styles: {\n root: [\n GlobalClassNames.root,\n {\n // This seems like a bad selector.\n '& > .ms-Button-menuIcon + *': {\n marginLeft: 0,\n },\n\n '& .ms-layer': {\n position: 'absolute',\n },\n\n [`&:hover .${GlobalClassNames.menuIcon}`]: {\n color: 'var(--button-hovered-menuIconColor, var(--button-menuIconColor))',\n },\n\n [`&:active .${GlobalClassNames.menuIcon}`]: {\n color:\n 'var(--button-pressed-menuIconColor, var(--button-hovered-menuIconColor, var(--button-menuIconColor)))',\n },\n },\n ],\n\n menuIcon: [\n GlobalClassNames.menuIcon,\n {\n color: 'var(--button-menuIconColor)',\n fontSize: 'var(--button-menuIconSize)',\n\n [`.${GlobalClassNames._disabled} &`]: {\n color: 'var(--button-disabled-menuIconColor)',\n },\n },\n ],\n\n _disabled: [GlobalClassNames._disabled],\n\n _iconOnly: [\n GlobalClassNames._iconOnly,\n {\n '& > .ms-Button-icon + *': {\n marginLeft: 0,\n },\n },\n ],\n },\n\n variants: (theme: Theme): MenuButtonVariants => {\n const { palette } = theme;\n\n return {\n root: {\n menuIconSize: '12px',\n menuIconColor: 'var(--body-menuIconColor)',\n },\n\n ghost: {\n menuIconColor: palette?.neutralSecondary,\n hovered: {\n menuIconColor: palette?.themePrimary,\n },\n pressed: {\n menuIconColor: palette?.black,\n },\n },\n\n transparent: {\n menuIconColor: palette?.neutralSecondary,\n },\n };\n },\n});\n"]}
|
@@ -1,11 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
var useButtonState_1 = require("../Button/useButtonState");
|
4
|
-
var useExpanded_1 = require("./useExpanded");
|
5
|
-
exports.useMenuButtonState = function (state) {
|
6
|
-
// It behaves like a button.
|
7
|
-
useButtonState_1.useButtonState(state);
|
8
|
-
// It can be expanded.
|
9
|
-
useExpanded_1.useExpanded(state);
|
10
|
-
};
|
11
|
-
//# sourceMappingURL=useMenuButtonState.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useMenuButtonState.js","sourceRoot":"../src/","sources":["components/MenuButton/useMenuButtonState.ts"],"names":[],"mappings":";;AACA,2DAA0D;AAC1D,6CAA4C;AAE/B,QAAA,kBAAkB,GAAG,UAAC,KAAsB;IACvD,4BAA4B;IAC5B,+BAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,sBAAsB;IACtB,yBAAW,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { MenuButtonState } from './MenuButton.types';\nimport { useButtonState } from '../Button/useButtonState';\nimport { useExpanded } from './useExpanded';\n\nexport const useMenuButtonState = (state: MenuButtonState) => {\n // It behaves like a button.\n useButtonState(state);\n\n // It can be expanded.\n useExpanded(state);\n};\n"]}
|
@@ -1,3 +0,0 @@
|
|
1
|
-
import { Theme } from '@fluentui/react-theme-provider';
|
2
|
-
import { SplitButtonState } from './SplitButton.types';
|
3
|
-
export declare const useSplitButtonClasses: (state: SplitButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
|
@@ -1,125 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var _a, _b, _c, _d;
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
-
var tslib_1 = require("tslib");
|
5
|
-
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
|
6
|
-
var style_utilities_1 = require("@fluentui/style-utilities");
|
7
|
-
var index_1 = require("../Button/index");
|
8
|
-
var GlobalClassNames = {
|
9
|
-
root: 'ms-SplitButton',
|
10
|
-
button: 'ms-SplitButton-button',
|
11
|
-
menuButton: 'ms-SplitButton-menuButton',
|
12
|
-
};
|
13
|
-
var menuButtonWidth = '32px';
|
14
|
-
exports.useSplitButtonClasses = react_theme_provider_1.makeVariantClasses({
|
15
|
-
name: 'SplitButton',
|
16
|
-
prefix: '--button',
|
17
|
-
styles: {
|
18
|
-
root: [
|
19
|
-
GlobalClassNames.root,
|
20
|
-
{
|
21
|
-
display: 'inline-flex',
|
22
|
-
justifyContent: 'stretch',
|
23
|
-
position: 'relative',
|
24
|
-
// Forward the menuIconSize to a variable which can be consumed by the child menu button.
|
25
|
-
'--button-splitMenuIconSize': 'var(--button-menuIconSize)',
|
26
|
-
},
|
27
|
-
],
|
28
|
-
button: [
|
29
|
-
GlobalClassNames.button,
|
30
|
-
{
|
31
|
-
'--button-borderRightWidth': 0,
|
32
|
-
'--button-borderTopRightRadius': 0,
|
33
|
-
'--button-borderBottomRightRadius': 0,
|
34
|
-
},
|
35
|
-
],
|
36
|
-
menuButton: [
|
37
|
-
GlobalClassNames.menuButton,
|
38
|
-
(_a = {},
|
39
|
-
// Scope the override to a child component, increase specificity.
|
40
|
-
_a["." + GlobalClassNames.root + " &"] = {
|
41
|
-
width: menuButtonWidth,
|
42
|
-
minWidth: menuButtonWidth,
|
43
|
-
'--button-borderLeftWidth': 0,
|
44
|
-
'--button-borderTopLeftRadius': 0,
|
45
|
-
'--button-borderBottomLeftRadius': 0,
|
46
|
-
'--button-iconColor': 'var(--button-menuIconColor)',
|
47
|
-
'--button-iconSize': 'var(--button-splitMenuIconSize)',
|
48
|
-
},
|
49
|
-
_a),
|
50
|
-
],
|
51
|
-
divider: (_b = {
|
52
|
-
width: 'var(--button-dividerThickness)',
|
53
|
-
backgroundColor: 'var(--button-dividerColor)',
|
54
|
-
position: 'absolute',
|
55
|
-
right: menuButtonWidth,
|
56
|
-
top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',
|
57
|
-
bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))'
|
58
|
-
},
|
59
|
-
_b[style_utilities_1.EdgeChromiumHighContrastSelector] = {
|
60
|
-
backgroundColor: 'var(--button-highContrast-dividerColor)',
|
61
|
-
},
|
62
|
-
_b["." + GlobalClassNames.root + "[aria-disabled=\"true\"] &"] = (_c = {
|
63
|
-
backgroundColor: 'var(--button-disabled-dividerColor)'
|
64
|
-
},
|
65
|
-
_c[style_utilities_1.EdgeChromiumHighContrastSelector] = {
|
66
|
-
backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',
|
67
|
-
},
|
68
|
-
_c),
|
69
|
-
_b),
|
70
|
-
_block: (_d = {
|
71
|
-
width: '100%',
|
72
|
-
maxWidth: '100%'
|
73
|
-
},
|
74
|
-
_d["." + GlobalClassNames.button] = {
|
75
|
-
flexGrow: 1,
|
76
|
-
maxWidth: '100%',
|
77
|
-
},
|
78
|
-
_d["." + GlobalClassNames.menuButton] = {
|
79
|
-
width: menuButtonWidth,
|
80
|
-
},
|
81
|
-
_d),
|
82
|
-
},
|
83
|
-
variants: function (theme) {
|
84
|
-
var _a;
|
85
|
-
var palette = theme.palette, semanticColors = theme.semanticColors;
|
86
|
-
return tslib_1.__assign({ root: {
|
87
|
-
size: {
|
88
|
-
smallest: '24px',
|
89
|
-
smaller: '24px',
|
90
|
-
small: '24px',
|
91
|
-
regular: '32px',
|
92
|
-
large: '40px',
|
93
|
-
larger: '48px',
|
94
|
-
largest: '64px',
|
95
|
-
},
|
96
|
-
dividerThickness: '1px',
|
97
|
-
dividerColor: (_a = palette) === null || _a === void 0 ? void 0 : _a.neutralTertiaryAlt,
|
98
|
-
disabled: {
|
99
|
-
dividerColor: semanticColors.disabledText,
|
100
|
-
},
|
101
|
-
menuIconColor: 'var(--body-menuIconColor)',
|
102
|
-
menuIconSize: '12px',
|
103
|
-
highContrast: {
|
104
|
-
dividerColor: 'WindowText',
|
105
|
-
disabled: {
|
106
|
-
dividerColor: 'GrayText',
|
107
|
-
},
|
108
|
-
},
|
109
|
-
}, primary: {
|
110
|
-
dividerColor: palette.white,
|
111
|
-
disabled: {
|
112
|
-
dividerColor: semanticColors.disabledText,
|
113
|
-
},
|
114
|
-
highContrast: {
|
115
|
-
dividerColor: 'Window',
|
116
|
-
disabled: {
|
117
|
-
dividerColor: 'GrayText',
|
118
|
-
},
|
119
|
-
},
|
120
|
-
}, transparent: {
|
121
|
-
menuIconColor: palette.neutralSecondary,
|
122
|
-
} }, index_1.ButtonSizeVariants);
|
123
|
-
},
|
124
|
-
});
|
125
|
-
//# sourceMappingURL=useSplitButtonClasses.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useSplitButtonClasses.js","sourceRoot":"../src/","sources":["components/SplitButton/useSplitButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';\nimport { ButtonSizeVariants } from '../Button/index';\nimport { SplitButtonState, SplitButtonVariants } from './SplitButton.types';\n\nconst GlobalClassNames = {\n root: 'ms-SplitButton',\n button: 'ms-SplitButton-button',\n menuButton: 'ms-SplitButton-menuButton',\n};\n\nconst menuButtonWidth = '32px';\n\nexport const useSplitButtonClasses = makeVariantClasses<SplitButtonState, SplitButtonVariants>({\n name: 'SplitButton',\n prefix: '--button',\n\n styles: {\n root: [\n GlobalClassNames.root,\n {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n\n // Forward the menuIconSize to a variable which can be consumed by the child menu button.\n '--button-splitMenuIconSize': 'var(--button-menuIconSize)',\n },\n ],\n\n button: [\n GlobalClassNames.button,\n {\n '--button-borderRightWidth': 0,\n '--button-borderTopRightRadius': 0,\n '--button-borderBottomRightRadius': 0,\n },\n ],\n\n menuButton: [\n GlobalClassNames.menuButton,\n {\n // Scope the override to a child component, increase specificity.\n [`.${GlobalClassNames.root} &`]: {\n width: menuButtonWidth,\n minWidth: menuButtonWidth,\n '--button-borderLeftWidth': 0,\n '--button-borderTopLeftRadius': 0,\n '--button-borderBottomLeftRadius': 0,\n '--button-iconColor': 'var(--button-menuIconColor)',\n '--button-iconSize': 'var(--button-splitMenuIconSize)',\n },\n },\n ],\n\n divider: {\n width: 'var(--button-dividerThickness)',\n backgroundColor: 'var(--button-dividerColor)',\n position: 'absolute',\n right: menuButtonWidth,\n top: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n bottom: 'calc(100% - var(--button-dividerLength, 100% + 8px))',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-dividerColor)',\n },\n\n [`.${GlobalClassNames.root}[aria-disabled=\"true\"] &`]: {\n backgroundColor: 'var(--button-disabled-dividerColor)',\n\n [EdgeChromiumHighContrastSelector]: {\n backgroundColor: 'var(--button-highContrast-disabled-dividerColor, var(--button-highContrast-dividerColor))',\n },\n },\n },\n\n _block: {\n width: '100%',\n maxWidth: '100%',\n\n [`.${GlobalClassNames.button}`]: {\n flexGrow: 1,\n maxWidth: '100%',\n },\n\n [`.${GlobalClassNames.menuButton}`]: {\n width: menuButtonWidth,\n },\n },\n },\n variants: (theme: Theme): SplitButtonVariants => {\n const { palette, semanticColors } = theme;\n\n return {\n root: {\n size: {\n smallest: '24px',\n smaller: '24px',\n small: '24px',\n regular: '32px',\n large: '40px',\n larger: '48px',\n largest: '64px',\n },\n dividerThickness: '1px',\n dividerColor: palette?.neutralTertiaryAlt,\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n menuIconColor: 'var(--body-menuIconColor)',\n menuIconSize: '12px',\n\n highContrast: {\n dividerColor: 'WindowText',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n primary: {\n dividerColor: palette.white,\n\n disabled: {\n dividerColor: semanticColors.disabledText,\n },\n\n highContrast: {\n dividerColor: 'Window',\n\n disabled: {\n dividerColor: 'GrayText',\n },\n },\n },\n\n transparent: {\n menuIconColor: palette.neutralSecondary,\n },\n\n ...ButtonSizeVariants,\n };\n },\n});\n"]}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
export interface CheckedState {
|
3
|
-
checked?: boolean;
|
4
|
-
defaultChecked?: boolean;
|
5
|
-
onClick?: React.DOMAttributes<HTMLElement>['onClick'];
|
6
|
-
role?: string;
|
7
|
-
'aria-checked'?: React.AriaAttributes['aria-pressed'];
|
8
|
-
'aria-pressed'?: React.AriaAttributes['aria-pressed'];
|
9
|
-
}
|
10
|
-
/**
|
11
|
-
* The useToggle hook processes adds the correct toggled state and acccessibility as needed.
|
12
|
-
* @param draftState - state to read and augment.
|
13
|
-
*/
|
14
|
-
export declare const useChecked: <TDraftState extends CheckedState>(draftState: TDraftState) => void;
|
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
var React = require("react");
|
4
|
-
var react_hooks_1 = require("@fluentui/react-hooks");
|
5
|
-
/**
|
6
|
-
* The useToggle hook processes adds the correct toggled state and acccessibility as needed.
|
7
|
-
* @param draftState - state to read and augment.
|
8
|
-
*/
|
9
|
-
exports.useChecked = function (draftState) {
|
10
|
-
var onClick = draftState.onClick, checked = draftState.checked, defaultChecked = draftState.defaultChecked, role = draftState.role;
|
11
|
-
var _a = react_hooks_1.useControllableValue(checked, defaultChecked), checkedValue = _a[0], setCheckedValue = _a[1];
|
12
|
-
// Ensure the state is the correct controlled/uncontrolled value.
|
13
|
-
draftState.checked = checkedValue;
|
14
|
-
// Ensure the right aria value is set to represent the checked state.
|
15
|
-
var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
|
16
|
-
draftState[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedValue;
|
17
|
-
draftState.onClick = React.useCallback(function (ev) {
|
18
|
-
if (onClick) {
|
19
|
-
onClick(ev);
|
20
|
-
if (ev.defaultPrevented) {
|
21
|
-
return;
|
22
|
-
}
|
23
|
-
}
|
24
|
-
setCheckedValue(!checkedValue);
|
25
|
-
}, [checkedValue, setCheckedValue, onClick]);
|
26
|
-
};
|
27
|
-
//# sourceMappingURL=useChecked.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useChecked.js","sourceRoot":"../src/","sources":["components/ToggleButton/useChecked.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,qDAA6D;AAY7D;;;GAGG;AACU,QAAA,UAAU,GAAG,UAAmC,UAAuB;IAC1E,IAAA,4BAAO,EAAE,4BAAO,EAAE,0CAAc,EAAE,sBAAI,CAAgB;IACxD,IAAA,gEAA+E,EAA9E,oBAAY,EAAE,uBAAgE,CAAC;IAEtF,iEAAiE;IACjE,UAAU,CAAC,OAAO,GAAG,YAAY,CAAC;IAElC,qEAAqE;IACrE,IAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAkB,IAAI,IAAI,KAAK,UAAU,CAAC;IAE9E,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,YAAY,CAAC;IAEhF,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CACpC,UAAC,EAAmD;QAClD,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,EAAE,CAAC,CAAC;YAEZ,IAAI,EAAE,CAAC,gBAAgB,EAAE;gBACvB,OAAO;aACR;SACF;QAED,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CACzC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-hooks';\n\nexport interface CheckedState {\n checked?: boolean;\n defaultChecked?: boolean;\n onClick?: React.DOMAttributes<HTMLElement>['onClick'];\n\n role?: string;\n 'aria-checked'?: React.AriaAttributes['aria-pressed'];\n 'aria-pressed'?: React.AriaAttributes['aria-pressed'];\n}\n\n/**\n * The useToggle hook processes adds the correct toggled state and acccessibility as needed.\n * @param draftState - state to read and augment.\n */\nexport const useChecked = <TDraftState extends CheckedState>(draftState: TDraftState) => {\n const { onClick, checked, defaultChecked, role } = draftState;\n const [checkedValue, setCheckedValue] = useControllableValue(checked, defaultChecked);\n\n // Ensure the state is the correct controlled/uncontrolled value.\n draftState.checked = checkedValue;\n\n // Ensure the right aria value is set to represent the checked state.\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n draftState[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedValue;\n\n draftState.onClick = React.useCallback(\n (ev: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (onClick) {\n onClick(ev);\n\n if (ev.defaultPrevented) {\n return;\n }\n }\n\n setCheckedValue(!checkedValue);\n },\n [checkedValue, setCheckedValue, onClick],\n );\n};\n"]}
|
@@ -1,3 +0,0 @@
|
|
1
|
-
import { Theme } from '@fluentui/react-theme-provider';
|
2
|
-
import { ToggleButtonState } from './ToggleButton.types';
|
3
|
-
export declare const useToggleButtonClasses: (state: ToggleButtonState, theme?: Theme | undefined, renderer?: import("@fluentui/react-theme-provider").StyleRenderer | undefined) => void;
|