@fluentui/react-button 0.0.0-nightly-20220519-0420.1 → 0.0.0-nightly-20220525-0423.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +99 -13
- package/CHANGELOG.md +35 -9
- package/README.md +80 -18
- package/dist/index.d.ts +6 -37
- package/lib/components/Button/Button.types.js.map +1 -1
- package/lib/components/Button/index.js +1 -3
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/useButton.js +0 -3
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.js +52 -58
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib/components/CompoundButton/index.js +1 -3
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +34 -33
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +2 -1
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
- package/lib/components/MenuButton/index.js +1 -3
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.js +21 -16
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js +1 -1
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/index.js +1 -3
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.js +0 -4
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js +4 -13
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/index.js +1 -3
- package/lib/components/ToggleButton/index.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +45 -9
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib/index.js +5 -10
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Button/index.js +1 -9
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.js +0 -3
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.js +53 -59
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/index.js +1 -9
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +35 -34
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js +2 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/index.js +1 -9
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +23 -17
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/index.js +1 -9
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +0 -4
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +5 -14
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.js +1 -9
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +47 -10
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -36
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /**\n * Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' | '
|
|
1
|
+
{"version":3,"file":"MenuButton.types.js","sourceRoot":"../src/","sources":["components/MenuButton/MenuButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /**\n * Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"]}
|
|
@@ -2,7 +2,5 @@ export * from './MenuButton.types';
|
|
|
2
2
|
export * from './MenuButton';
|
|
3
3
|
export * from './renderMenuButton';
|
|
4
4
|
export * from './useMenuButton';
|
|
5
|
-
export {
|
|
6
|
-
/* eslint-disable-next-line deprecation/deprecation */
|
|
7
|
-
menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
|
|
5
|
+
export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
|
|
8
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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,oBAAoB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';\n"]}
|
|
@@ -1,34 +1,39 @@
|
|
|
1
1
|
import { mergeClasses, __styles } from '@griffel/react';
|
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
|
2
3
|
import { useButtonStyles_unstable } from '../Button/useButtonStyles';
|
|
3
4
|
export const menuButtonClassNames = {
|
|
4
5
|
root: 'fui-MenuButton',
|
|
5
6
|
icon: 'fui-MenuButton__icon',
|
|
6
7
|
menuIcon: 'fui-MenuButton__menuIcon'
|
|
7
8
|
};
|
|
8
|
-
/**
|
|
9
|
-
* @deprecated Use `menuButtonClassName.root` instead.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
export const menuButtonClassName = menuButtonClassNames.root;
|
|
13
9
|
|
|
14
10
|
const useMenuIconStyles = /*#__PURE__*/__styles({
|
|
11
|
+
"base": {
|
|
12
|
+
"Bg96gwp": "fez10in"
|
|
13
|
+
},
|
|
15
14
|
"small": {
|
|
16
|
-
"Be2twd7": "
|
|
17
|
-
"Bqenvij": "
|
|
18
|
-
"
|
|
15
|
+
"Be2twd7": "f1ugzwwg",
|
|
16
|
+
"Bqenvij": "fvblgha",
|
|
17
|
+
"Bg96gwp": "fwrc4pm",
|
|
18
|
+
"a9b677": "frx94fk"
|
|
19
19
|
},
|
|
20
20
|
"medium": {
|
|
21
|
-
"Be2twd7": "
|
|
22
|
-
"Bqenvij": "
|
|
23
|
-
"
|
|
21
|
+
"Be2twd7": "f1ugzwwg",
|
|
22
|
+
"Bqenvij": "fvblgha",
|
|
23
|
+
"Bg96gwp": "fwrc4pm",
|
|
24
|
+
"a9b677": "frx94fk"
|
|
24
25
|
},
|
|
25
26
|
"large": {
|
|
26
|
-
"Be2twd7": "
|
|
27
|
-
"Bqenvij": "
|
|
28
|
-
"
|
|
27
|
+
"Be2twd7": "f4ybsrx",
|
|
28
|
+
"Bqenvij": "fd461yt",
|
|
29
|
+
"Bg96gwp": "faaz57k",
|
|
30
|
+
"a9b677": "fjw5fx7"
|
|
31
|
+
},
|
|
32
|
+
"notIconOnly": {
|
|
33
|
+
"Frg6f3": ["fbyavb5", "fm0x6gh"]
|
|
29
34
|
}
|
|
30
35
|
}, {
|
|
31
|
-
"d": [".
|
|
36
|
+
"d": [".fez10in{line-height:0;}", ".f1ugzwwg{font-size:12px;}", ".fvblgha{height:12px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".frx94fk{width:12px;}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fjw5fx7{width:16px;}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"]
|
|
32
37
|
});
|
|
33
38
|
|
|
34
39
|
export const useMenuButtonStyles_unstable = state => {
|
|
@@ -40,7 +45,7 @@ export const useMenuButtonStyles_unstable = state => {
|
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
if (state.menuIcon) {
|
|
43
|
-
state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles[state.size], state.menuIcon.className);
|
|
48
|
+
state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
|
|
44
49
|
}
|
|
45
50
|
|
|
46
51
|
useButtonStyles_unstable({ ...state,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAIA,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,IAAI,EAAE,sBAF6D;AAGnE,EAAA,QAAQ,EAAE;AAHyD,CAA9D
|
|
1
|
+
{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAIA,OAAO,MAAM,oBAAoB,GAAoC;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,IAAI,EAAE,sBAF6D;AAGnE,EAAA,QAAQ,EAAE;AAHyD,CAA9D;;AAMP,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AA+BA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,KAAK,CAAC,IAAN,CAAW,SAAvC,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,KAAK,CAAC,IAAN,CAAW,SAAvC,CAAnC;AACD;;AAED,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,oBAAoB,CAAC,QADgB,EAErC,cAAc,CAAC,IAFsB,EAGrC,cAAc,CAAC,KAAK,CAAC,IAAP,CAHuB,EAIrC,CAAC,KAAK,CAAC,QAAP,IAAmB,cAAc,CAAC,WAJG,EAKrC,KAAK,CAAC,QAAN,CAAe,SALsB,CAAvC;AAOD;;AAED,EAAA,wBAAwB,CAAC,EAAE,GAAG,KAAL;AAAY,IAAA,YAAY,EAAE;AAA1B,GAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAtBM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0,\n },\n\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px',\n },\n\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS,\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n const menuIconStyles = useMenuIconStyles();\n\n state.root.className = mergeClasses(menuButtonClassNames.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuButtonClassNames.icon, state.icon.className);\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,7 +3,7 @@ import { renderSplitButton_unstable } from './renderSplitButton';
|
|
|
3
3
|
import { useSplitButton_unstable } from './useSplitButton';
|
|
4
4
|
import { useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
|
5
5
|
/**
|
|
6
|
-
* SplitButtons are a grouping of two interactive surfaces where
|
|
6
|
+
* SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary
|
|
7
7
|
* action, while interacting with the second one opens a menu with secondary actions.
|
|
8
8
|
*/
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where
|
|
1
|
+
{"version":3,"sources":["components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { renderSplitButton_unstable } from './renderSplitButton';\nimport { useSplitButton_unstable } from './useSplitButton';\nimport { useSplitButtonStyles_unstable } from './useSplitButtonStyles';\nimport type { SplitButtonProps } from './SplitButton.types';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * SplitButtons are a grouping of two interactive surfaces where interacting with the first one triggers a primary\n * action, while interacting with the second one opens a menu with secondary actions.\n */\nexport const SplitButton: ForwardRefComponent<SplitButtonProps> = React.forwardRef((props, ref) => {\n const state = useSplitButton_unstable(props, ref);\n\n useSplitButtonStyles_unstable(state);\n\n return renderSplitButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<SplitButtonProps>;\n\nSplitButton.displayName = 'SplitButton';\n"],"sourceRoot":"../src/"}
|
|
@@ -2,7 +2,5 @@ export * from './SplitButton';
|
|
|
2
2
|
export * from './SplitButton.types';
|
|
3
3
|
export * from './renderSplitButton';
|
|
4
4
|
export * from './useSplitButton';
|
|
5
|
-
export {
|
|
6
|
-
/* eslint-disable-next-line deprecation/deprecation */
|
|
7
|
-
splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
|
5
|
+
export { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
|
8
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';\n"]}
|
|
@@ -10,8 +10,6 @@ import { MenuButton } from '../MenuButton/MenuButton';
|
|
|
10
10
|
export const useSplitButton_unstable = (props, ref) => {
|
|
11
11
|
const {
|
|
12
12
|
appearance = 'secondary',
|
|
13
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
14
|
-
block = false,
|
|
15
13
|
children,
|
|
16
14
|
disabled = false,
|
|
17
15
|
disabledFocusable = false,
|
|
@@ -38,7 +36,6 @@ export const useSplitButton_unstable = (props, ref) => {
|
|
|
38
36
|
const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
|
|
39
37
|
defaultProps: {
|
|
40
38
|
appearance,
|
|
41
|
-
block,
|
|
42
39
|
children,
|
|
43
40
|
disabled,
|
|
44
41
|
disabledFocusable,
|
|
@@ -59,7 +56,6 @@ export const useSplitButton_unstable = (props, ref) => {
|
|
|
59
56
|
return {
|
|
60
57
|
// Props passed at the top-level
|
|
61
58
|
appearance,
|
|
62
|
-
block,
|
|
63
59
|
disabled,
|
|
64
60
|
disabledFocusable,
|
|
65
61
|
iconPosition,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UAAU,GAAG,WADT;AAEJ
|
|
1
|
+
{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UAAU,GAAG,WADT;AAEJ,IAAA,QAFI;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,iBAAiB,GAAG,KAJhB;AAKJ,IAAA,IALI;AAMJ,IAAA,YAAY,GAAG,QANX;AAOJ,IAAA,UAPI;AAQJ,IAAA,QARI;AASJ,IAAA,mBATI;AAUJ,IAAA,KAAK,GAAG,SAVJ;AAWJ,IAAA,IAAI,GAAG;AAXH,MAYF,KAZJ;AAcA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAAb,CAA5C;AAYA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,iBAJY;AAKZ,MAAA,IALY;AAMZ,MAAA,YANY;AAOZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBAPD;AAQZ,MAAA,KARY;AASZ,MAAA;AATY,KAD2D;AAYzE,IAAA,QAAQ,EAAE;AAZ+D,GAAtB,CAArD,CA7BoB,CA4CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,QAHK;AAIL,IAAA,iBAJK;AAKL,IAAA,YALK;AAML,IAAA,KANK;AAOL,IAAA,IAPK;AASL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAVP;AAgBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAhBtB;AAiBL,IAAA,UAAU,EAAE,mBAjBP;AAkBL,IAAA,mBAAmB,EAAE;AAlBhB,GAAP;AAoBD,CA9EM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -6,11 +6,6 @@ export const splitButtonClassNames = {
|
|
|
6
6
|
menuButton: 'fui-SplitButton__menuButton',
|
|
7
7
|
primaryActionButton: 'fui-SplitButton__primaryActionButton'
|
|
8
8
|
};
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated Use `splitButtonClassName.root` instead.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
export const splitButtonClassName = splitButtonClassNames.root;
|
|
14
9
|
|
|
15
10
|
const useFocusStyles = /*#__PURE__*/__styles({
|
|
16
11
|
"primaryActionButton": {
|
|
@@ -39,10 +34,8 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
39
34
|
"Bs76p8a": ["fye5tvs", "fc597qq"],
|
|
40
35
|
"cuxpm9": ["f1e8brtx", "fr36rk3"],
|
|
41
36
|
"Biffepf": ["fxp12j1", "f1m6nt2y"],
|
|
42
|
-
"Defnvf": ["fr7y8no", "f1dn0c6m"]
|
|
43
|
-
|
|
44
|
-
"block": {
|
|
45
|
-
"a9b677": "fly5x3f"
|
|
37
|
+
"Defnvf": ["fr7y8no", "f1dn0c6m"],
|
|
38
|
+
"z0pv9t": "f1hvqvul"
|
|
46
39
|
},
|
|
47
40
|
"outline": {},
|
|
48
41
|
"primary": {
|
|
@@ -75,7 +68,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
75
68
|
"mba178": ["f1ma39qa", "f1nzpdru"]
|
|
76
69
|
}
|
|
77
70
|
}, {
|
|
78
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".
|
|
71
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".f12j1tfo .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ufkr8r .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1ysqkm5 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f10nbrj .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
|
79
72
|
"h": [".f17lyyco:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f151o42i:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1nb07eg:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fg8a8qi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fg8lp5p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1p6hj0a:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
|
80
73
|
"t": ["@media (forced-colors: active){.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", "@media (forced-colors: active){.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}"]
|
|
81
74
|
});
|
|
@@ -85,12 +78,10 @@ export const useSplitButtonStyles_unstable = state => {
|
|
|
85
78
|
const focusStyles = useFocusStyles();
|
|
86
79
|
const {
|
|
87
80
|
appearance,
|
|
88
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
89
|
-
block,
|
|
90
81
|
disabled,
|
|
91
82
|
disabledFocusable
|
|
92
83
|
} = state;
|
|
93
|
-
state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base,
|
|
84
|
+
state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
|
|
94
85
|
|
|
95
86
|
if (state.menuButton) {
|
|
96
87
|
state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAAhE
|
|
1
|
+
{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAAhE;;AAMP,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA8HA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA;AAAxB,MAA8C,KAApD;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -2,7 +2,5 @@ export * from './ToggleButton';
|
|
|
2
2
|
export * from './ToggleButton.types';
|
|
3
3
|
export * from './renderToggleButton';
|
|
4
4
|
export * from './useToggleButton';
|
|
5
|
-
export {
|
|
6
|
-
/* eslint-disable-next-line deprecation/deprecation */
|
|
7
|
-
toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
|
5
|
+
export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
|
8
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
2
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
2
3
|
import { tokens } from '@fluentui/react-theme';
|
|
3
4
|
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
|
4
5
|
import { useButtonStyles_unstable } from '../Button/useButtonStyles';
|
|
@@ -6,11 +7,6 @@ export const toggleButtonClassNames = {
|
|
|
6
7
|
root: 'fui-ToggleButton',
|
|
7
8
|
icon: 'fui-ToggleButton__icon'
|
|
8
9
|
};
|
|
9
|
-
/**
|
|
10
|
-
* @deprecated Use `toggleButtonClassName.root` instead.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
export const toggleButtonClassName = toggleButtonClassNames.root;
|
|
14
10
|
export const useCheckedStyles = /*#__PURE__*/__styles({
|
|
15
11
|
"base": {
|
|
16
12
|
"De3pzq": "f1nfm20t",
|
|
@@ -39,20 +35,59 @@ export const useCheckedStyles = /*#__PURE__*/__styles({
|
|
|
39
35
|
"B2d53fq": "f9olfzr"
|
|
40
36
|
},
|
|
41
37
|
"highContrast": {
|
|
38
|
+
"Bsw6fvg": "f1rirnrt",
|
|
42
39
|
"Bjwas2f": "f132fbg1",
|
|
43
40
|
"Bn1d65q": ["f1ene5x0", "fzbc999"],
|
|
44
41
|
"Bxeuatn": "f6jgcol",
|
|
45
42
|
"n51gp8": ["fzbc999", "f1ene5x0"],
|
|
46
|
-
"Bbusuzp": "
|
|
43
|
+
"Bbusuzp": "f1lkg8j3",
|
|
44
|
+
"ycbfsm": "fkc42ay",
|
|
45
|
+
"Bqrx1nm": "fq7113v",
|
|
46
|
+
"pgvf35": "ff1wgvm",
|
|
47
|
+
"Bh7lczh": ["fiob0tu", "f1x4h75k"],
|
|
48
|
+
"dpv3f4": "f1j6scgf",
|
|
49
|
+
"Bpnjhaq": ["f1x4h75k", "fiob0tu"],
|
|
50
|
+
"ze5xyy": "f4xjyn1",
|
|
51
|
+
"g2kj27": "fbgcvur",
|
|
52
|
+
"Bf756sw": "f1ks1yx8",
|
|
53
|
+
"Bow2dr7": ["f1o6qegi", "fmxjhhp"],
|
|
54
|
+
"Bvhedfk": "fcnxywj",
|
|
55
|
+
"Gye4lf": ["fmxjhhp", "f1o6qegi"],
|
|
56
|
+
"pc6evw": "f9ddjv3",
|
|
47
57
|
"G867l3": "fr7nen4",
|
|
48
58
|
"gdbnj": ["f10aq6ld", "fq8rgo9"],
|
|
49
59
|
"mxns5l": "f1md2qq2",
|
|
50
60
|
"o3nasb": ["fq8rgo9", "f10aq6ld"]
|
|
51
61
|
},
|
|
62
|
+
"highContrastFocusStyles": {
|
|
63
|
+
"B486eqv": "f2hkw1w",
|
|
64
|
+
"rkqiyj": "f12vviyd",
|
|
65
|
+
"Bs3nqqt": ["f8ccjn4", "f1kizmkg"],
|
|
66
|
+
"B4mky7d": "f14ges4w",
|
|
67
|
+
"Bviepcv": ["f1kizmkg", "f8ccjn4"],
|
|
68
|
+
"Bc28wk5": "flnfwa4",
|
|
69
|
+
"w1edd7": ["fuav46a", "fcnogh1"],
|
|
70
|
+
"Ba8awiv": "f19zilzp",
|
|
71
|
+
"I50xcx": ["fcnogh1", "fuav46a"],
|
|
72
|
+
"Bnmjwt4": "f4h99gy",
|
|
73
|
+
"Jopkrh": ["f4u9xa3", "f1uetw7i"],
|
|
74
|
+
"hhrs2v": "fnkqhj8",
|
|
75
|
+
"B7jbng7": ["f1uetw7i", "f4u9xa3"],
|
|
76
|
+
"Bh48x57": "f1kn9aoz"
|
|
77
|
+
},
|
|
52
78
|
"outline": {
|
|
53
79
|
"De3pzq": "f1q9pm1r",
|
|
80
|
+
"B4j52fo": "fgx37oo",
|
|
81
|
+
"Bekrc4i": ["f130t4y6", "f1efpmoh"],
|
|
82
|
+
"Bn0qgzm": "fv51ejd",
|
|
83
|
+
"ibv6hh": ["f1efpmoh", "f130t4y6"],
|
|
54
84
|
"Jwef8y": "fjxutwb",
|
|
55
|
-
"iro3zm": "fwiml72"
|
|
85
|
+
"iro3zm": "fwiml72",
|
|
86
|
+
"B486eqv": "f2hkw1w",
|
|
87
|
+
"Bnmjwt4": "f1d6g2h1",
|
|
88
|
+
"Jopkrh": ["fs8i4z6", "fgzizio"],
|
|
89
|
+
"hhrs2v": "fajrl09",
|
|
90
|
+
"B7jbng7": ["fgzizio", "fs8i4z6"]
|
|
56
91
|
},
|
|
57
92
|
"primary": {
|
|
58
93
|
"De3pzq": "f8w4g0q",
|
|
@@ -116,9 +151,10 @@ export const useCheckedStyles = /*#__PURE__*/__styles({
|
|
|
116
151
|
"B2d53fq": "f1fg1p5m"
|
|
117
152
|
}
|
|
118
153
|
}, {
|
|
119
|
-
"d": [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
|
|
154
|
+
"d": [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", "[data-keyboard-nav] .f12vviyd:focus{border-top-width:1px;}", "[data-keyboard-nav] .f8ccjn4:focus{border-right-width:1px;}", "[data-keyboard-nav] .f1kizmkg:focus{border-left-width:1px;}", "[data-keyboard-nav] .f14ges4w:focus{border-bottom-width:1px;}", "[data-keyboard-nav] .flnfwa4:focus{border-top-style:solid;}", "[data-keyboard-nav] .fuav46a:focus{border-right-style:solid;}", "[data-keyboard-nav] .fcnogh1:focus{border-left-style:solid;}", "[data-keyboard-nav] .f19zilzp:focus{border-bottom-style:solid;}", "[data-keyboard-nav] .f4h99gy:focus{border-top-color:HighlightText;}", "[data-keyboard-nav] .f4u9xa3:focus{border-right-color:HighlightText;}", "[data-keyboard-nav] .f1uetw7i:focus{border-left-color:HighlightText;}", "[data-keyboard-nav] .fnkqhj8:focus{border-bottom-color:HighlightText;}", "[data-keyboard-nav] .f1kn9aoz:focus{outline-color:Highlight;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", "[data-keyboard-nav] .f1d6g2h1:focus{border-top-color:var(--colorNeutralStroke1);}", "[data-keyboard-nav] .fs8i4z6:focus{border-right-color:var(--colorNeutralStroke1);}", "[data-keyboard-nav] .fgzizio:focus{border-left-color:var(--colorNeutralStroke1);}", "[data-keyboard-nav] .fajrl09:focus{border-bottom-color:var(--colorNeutralStroke1);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
|
|
120
155
|
"h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
|
|
121
|
-
"t": ["@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", "@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", "@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.fzbc999{border-left-color:Highlight;}.f1ene5x0{border-right-color:Highlight;}}", "@media (forced-colors: active){.
|
|
156
|
+
"t": ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", "@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", "@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", "@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.fzbc999{border-left-color:Highlight;}.f1ene5x0{border-right-color:Highlight;}}", "@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", "@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", "@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", "@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", "@media (forced-colors: active){.fiob0tu:hover{border-right-color:Highlight;}.f1x4h75k:hover{border-left-color:Highlight;}}", "@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", "@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", "@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", "@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", "@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", "@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.fmxjhhp:hover:active{border-left-color:Highlight;}.f1o6qegi:hover:active{border-right-color:Highlight;}}", "@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", "@media (forced-colors: active){.fr7nen4:focus{border-top-color:Highlight;}}", "@media (forced-colors: active){.f10aq6ld:focus{border-right-color:Highlight;}.fq8rgo9:focus{border-left-color:Highlight;}}", "@media (forced-colors: active){.f1md2qq2:focus{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.fq8rgo9:focus{border-left-color:Highlight;}.f10aq6ld:focus{border-right-color:Highlight;}}"],
|
|
157
|
+
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
122
158
|
});
|
|
123
159
|
export const useDisabledStyles = /*#__PURE__*/__styles({
|
|
124
160
|
"base": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAKA,OAAO,MAAM,sBAAsB,GAAgC;AACjE,EAAA,IAAI,EAAE,kBAD2D;AAEjE,EAAA,IAAI,EAAE;AAF2D,CAA5D;AAKP
|
|
1
|
+
{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,EAA8B,oBAA9B,QAA0D,uBAA1D;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAKA,OAAO,MAAM,sBAAsB,GAAgC;AACjE,EAAA,IAAI,EAAE,kBAD2D;AAEjE,EAAA,IAAI,EAAE;AAF2D,CAA5D;AAKP,OAAO,MAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;AAoIP,OAAO,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;AAoEP,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,sBAAsB,CAAC,IADU,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,OAAO,IAAI,aAAa,CAAC,YALQ,EAMjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CANL,EAQjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IATjB,EAUjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAV9B,EAYjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAbsB,CAAnC;;AAgBA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAsB,CAAC,IAAxB,EAA8B,KAAK,CAAC,IAAN,CAAW,SAAzC,CAAnC;AACD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CA7BM","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nexport const useCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n highContrastFocusStyles: createCustomFocusIndicatorStyle({\n ...shorthands.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n }),\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nexport const useDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const checkedStyles = useCheckedStyles();\n const disabledStyles = useDisabledStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Checked styles\n checked && checkedStyles.base,\n checked && checkedStyles.highContrast,\n appearance && checked && checkedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && disabledStyles.base,\n appearance && (disabled || disabledFocusable) && disabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.js
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
export { Button,
|
|
2
|
-
|
|
3
|
-
export {
|
|
4
|
-
|
|
5
|
-
export {
|
|
6
|
-
menuButtonClassName, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
|
|
7
|
-
export { SplitButton, renderSplitButton_unstable, // eslint-disable-next-line deprecation/deprecation
|
|
8
|
-
splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
|
|
9
|
-
export { ToggleButton, renderToggleButton_unstable, // eslint-disable-next-line deprecation/deprecation
|
|
10
|
-
toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
|
|
1
|
+
export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
|
|
2
|
+
export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
|
|
3
|
+
export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
|
|
4
|
+
export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
|
|
5
|
+
export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
|
|
11
6
|
export { useToggleState } from './utils/index';
|
|
12
7
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,0BAFF,EAGE,qBAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,YADF,EAEE,2BAFF,EAGE,sBAHF,EAIE,8BAJF,EAKE,wBALF,QAMO,gBANP;AASA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":"../src/"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useButtonStyles_unstable = exports.buttonClassNames =
|
|
6
|
+
exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
9
9
|
|
|
@@ -14,15 +14,7 @@ tslib_1.__exportStar(require("./renderButton"), exports);
|
|
|
14
14
|
tslib_1.__exportStar(require("./useButton"), exports);
|
|
15
15
|
|
|
16
16
|
var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
|
|
17
|
-
/* eslint-disable-next-line deprecation/deprecation */
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
Object.defineProperty(exports, "buttonClassName", {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function () {
|
|
23
|
-
return useButtonStyles_1.buttonClassName;
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
18
|
Object.defineProperty(exports, "buttonClassNames", {
|
|
27
19
|
enumerable: true,
|
|
28
20
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -19,8 +19,6 @@ const useButton_unstable = (props, ref) => {
|
|
|
19
19
|
const {
|
|
20
20
|
appearance = 'secondary',
|
|
21
21
|
as,
|
|
22
|
-
// eslint-disable-next-line deprecation/deprecation
|
|
23
|
-
block = false,
|
|
24
22
|
disabled = false,
|
|
25
23
|
disabledFocusable = false,
|
|
26
24
|
icon,
|
|
@@ -32,7 +30,6 @@ const useButton_unstable = (props, ref) => {
|
|
|
32
30
|
return {
|
|
33
31
|
// Props passed at the top-level
|
|
34
32
|
appearance,
|
|
35
|
-
block,
|
|
36
33
|
disabled,
|
|
37
34
|
disabledFocusable,
|
|
38
35
|
iconPosition,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UAAU,GAAG,WADT;AAEJ,IAAA,EAFI;AAGJ
|
|
1
|
+
{"version":3,"sources":["components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;;;AAIG;;;AACI,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UAAU,GAAG,WADT;AAEJ,IAAA,EAFI;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,iBAAiB,GAAG,KAJhB;AAKJ,IAAA,IALI;AAMJ,IAAA,YAAY,GAAG,QANX;AAOJ,IAAA,KAAK,GAAG,SAPJ;AAQJ,IAAA,IAAI,GAAG;AARH,MASF,KATJ;AAUA,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;AAEA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,QAHK;AAIL,IAAA,iBAJK;AAKL,IAAA,YALK;AAML,IAAA,KANK;AAOL,IAAA,IAPK;AASL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAVZ;AAYL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAbP;AAkBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAmC,KAAnC,EAA0C;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA1C,CAFI,CAlBD;AA6BL,IAAA,IAAI,EAAE;AA7BD,GAAP;AA+BD,CA/CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useARIAButton } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const {\n appearance = 'secondary',\n as,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as || 'button',\n useARIAButton<ARIAButtonSlotProps>(props, {\n required: true,\n defaultProps: {\n // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>\n ref: ref as React.Ref<HTMLButtonElement>,\n type: 'button', // This is added because the default for type is 'submit'\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
|