@fluentui/react-button 0.0.0-nightly-20230317-0436.1 → 0.0.0-nightly-20230317-1454.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/.swcrc +39 -0
- package/CHANGELOG.json +17 -17
- package/CHANGELOG.md +11 -11
- package/lib/Button.js +1 -1
- package/lib/Button.js.map +1 -1
- package/lib/CompoundButton.js +1 -1
- package/lib/CompoundButton.js.map +1 -1
- package/lib/MenuButton.js +1 -1
- package/lib/MenuButton.js.map +1 -1
- package/lib/SplitButton.js +1 -1
- package/lib/SplitButton.js.map +1 -1
- package/lib/ToggleButton.js +1 -1
- package/lib/ToggleButton.js.map +1 -1
- package/lib/components/Button/Button.js +6 -6
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.js.map +1 -1
- package/lib/components/Button/index.js +4 -4
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.js +3 -9
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.js +13 -12
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.js +14 -14
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js +6 -6
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib/components/CompoundButton/index.js +5 -5
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.js +3 -13
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +8 -8
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +7 -7
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +6 -6
- 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 +5 -5
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/renderMenuButton.js +3 -9
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.js +8 -9
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.js +10 -10
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js +6 -6
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib/components/SplitButton/index.js +5 -5
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/renderSplitButton.js +3 -9
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.js +14 -13
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js +6 -6
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js +6 -6
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib/components/ToggleButton/index.js +5 -5
- package/lib/components/ToggleButton/index.js.map +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.js +3 -2
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +9 -9
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib/contexts/ButtonContext.js +2 -5
- package/lib/contexts/ButtonContext.js.map +1 -1
- package/lib/contexts/index.js +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/index.js +7 -7
- package/lib/index.js.map +1 -1
- package/lib/utils/index.js +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/useToggleState.js +4 -4
- package/lib/utils/useToggleState.js.map +1 -1
- package/lib-commonjs/Button.js +5 -4
- package/lib-commonjs/Button.js.map +1 -1
- package/lib-commonjs/CompoundButton.js +5 -4
- package/lib-commonjs/CompoundButton.js.map +1 -1
- package/lib-commonjs/MenuButton.js +5 -4
- package/lib-commonjs/MenuButton.js.map +1 -1
- package/lib-commonjs/SplitButton.js +5 -4
- package/lib-commonjs/SplitButton.js.map +1 -1
- package/lib-commonjs/ToggleButton.js +5 -4
- package/lib-commonjs/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/Button/Button.js +19 -21
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.js +3 -2
- package/lib-commonjs/components/Button/Button.types.js.map +1 -1
- package/lib-commonjs/components/Button/index.js +17 -19
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.js +14 -26
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.js +40 -52
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.js +1135 -477
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +19 -21
- package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.js +3 -2
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/index.js +18 -20
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +14 -30
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +30 -36
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +315 -184
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js +19 -22
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.js +3 -2
- package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
- package/lib-commonjs/components/MenuButton/index.js +18 -20
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.js +14 -26
- package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.js +33 -37
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +166 -106
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js +19 -22
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.js +3 -2
- package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib-commonjs/components/SplitButton/index.js +18 -20
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.js +13 -22
- package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +66 -79
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +263 -106
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +19 -21
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js +3 -2
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.js +18 -20
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js +6 -8
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +14 -16
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +897 -380
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/contexts/ButtonContext.js +17 -19
- package/lib-commonjs/contexts/ButtonContext.js.map +1 -1
- package/lib-commonjs/contexts/index.js +5 -4
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/index.js +47 -179
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/index.js +5 -4
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/useToggleState.js +40 -40
- package/lib-commonjs/utils/useToggleState.js.map +1 -1
- package/package.json +10 -10
@@ -1,6 +1,7 @@
|
|
1
|
-
import
|
2
|
-
import {
|
3
|
-
import {
|
1
|
+
import * as React from "react";
|
2
|
+
import { getNativeElementProps, resolveShorthand, useId } from "@fluentui/react-utilities";
|
3
|
+
import { Button } from "../Button/Button";
|
4
|
+
import { MenuButton } from "../MenuButton/MenuButton";
|
4
5
|
/**
|
5
6
|
* Given user props, defines default props for the SplitButton and returns processed state.
|
6
7
|
* @param props - User provided props to the SplitButton component.
|
@@ -8,19 +9,19 @@ import { MenuButton } from '../MenuButton/MenuButton';
|
|
8
9
|
*/
|
9
10
|
export const useSplitButton_unstable = (props, ref) => {
|
10
11
|
const {
|
11
|
-
appearance =
|
12
|
+
appearance = "secondary",
|
12
13
|
children,
|
13
14
|
disabled = false,
|
14
15
|
disabledFocusable = false,
|
15
16
|
icon,
|
16
|
-
iconPosition =
|
17
|
+
iconPosition = "before",
|
17
18
|
menuButton,
|
18
19
|
menuIcon,
|
19
20
|
primaryActionButton,
|
20
|
-
shape =
|
21
|
-
size =
|
21
|
+
shape = "rounded",
|
22
|
+
size = "medium"
|
22
23
|
} = props;
|
23
|
-
const baseId = useId(
|
24
|
+
const baseId = useId("splitButton-");
|
24
25
|
const menuButtonShorthand = resolveShorthand(menuButton, {
|
25
26
|
defaultProps: {
|
26
27
|
appearance,
|
@@ -40,7 +41,7 @@ export const useSplitButton_unstable = (props, ref) => {
|
|
40
41
|
disabledFocusable,
|
41
42
|
icon,
|
42
43
|
iconPosition,
|
43
|
-
id: baseId +
|
44
|
+
id: baseId + "__primaryActionButton",
|
44
45
|
shape,
|
45
46
|
size
|
46
47
|
},
|
@@ -48,8 +49,8 @@ export const useSplitButton_unstable = (props, ref) => {
|
|
48
49
|
});
|
49
50
|
// Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
|
50
51
|
// by the user.
|
51
|
-
if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand[
|
52
|
-
menuButtonShorthand[
|
52
|
+
if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand["aria-label"] && !menuButtonShorthand["aria-labelledby"]) {
|
53
|
+
menuButtonShorthand["aria-labelledby"] = primaryActionButtonShorthand.id;
|
53
54
|
}
|
54
55
|
return {
|
55
56
|
// Props passed at the top-level
|
@@ -61,11 +62,11 @@ export const useSplitButton_unstable = (props, ref) => {
|
|
61
62
|
size,
|
62
63
|
// Slots definition
|
63
64
|
components: {
|
64
|
-
root:
|
65
|
+
root: "div",
|
65
66
|
menuButton: MenuButton,
|
66
67
|
primaryActionButton: Button
|
67
68
|
},
|
68
|
-
root: getNativeElementProps(
|
69
|
+
root: getNativeElementProps("div", {
|
69
70
|
ref,
|
70
71
|
...props
|
71
72
|
}),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["getNativeElementProps","resolveShorthand","useId","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root"],"sources":["
|
1
|
+
{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root"],"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAC/D,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAG3B;;;;;AAKA,OAAO,MAAMC,uBAAA,GAA0BA,CACrCC,KAAA,EACAC,GAAA,KACqB;EACrB,MAAM;IACJC,UAAA,GAAa;IACbC,QAAA;IACAC,QAAA,GAAW,KAAK;IAChBC,iBAAA,GAAoB,KAAK;IACzBC,IAAA;IACAC,YAAA,GAAe;IACfC,UAAA;IACAC,QAAA;IACAC,mBAAA;IACAC,KAAA,GAAQ;IACRC,IAAA,GAAO;EAAQ,CAChB,GAAGZ,KAAA;EAEJ,MAAMa,MAAA,GAASjB,KAAA,CAAM;EAErB,MAAMkB,mBAAA,GAAsBnB,gBAAA,CAAiBa,UAAA,EAAY;IACvDO,YAAA,EAAc;MACZb,UAAA;MACAE,QAAA;MACAC,iBAAA;MACAI,QAAA;MACAE,KAAA;MACAC;IACF;IACAI,QAAA,EAAU;EACZ;EAEA,MAAMC,4BAAA,GAA+BtB,gBAAA,CAAiBe,mBAAA,EAAqB;IACzEK,YAAA,EAAc;MACZb,UAAA;MACAC,QAAA;MACAC,QAAA;MACAC,iBAAA;MACAC,IAAA;MACAC,YAAA;MACAW,EAAA,EAAIL,MAAA,GAAS;MACbF,KAAA;MACAC;IACF;IACAI,QAAA,EAAU;EACZ;EAEA;EACA;EACA,IACEF,mBAAA,IACAG,4BAAA,IACA,CAACH,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;IACAA,mBAAmB,CAAC,kBAAkB,GAAGG,4BAAA,CAA6BC,EAAE;EAC1E;EAEA,OAAO;IACL;IACAhB,UAAA;IACAE,QAAA;IACAC,iBAAA;IACAE,YAAA;IACAI,KAAA;IACAC,IAAA;IAEA;IACAO,UAAA,EAAY;MACVC,IAAA,EAAM;MACNZ,UAAA,EAAYV,UAAA;MACZY,mBAAA,EAAqBb;IACvB;IAEAuB,IAAA,EAAM1B,qBAAA,CAAsB,OAAO;MAAEO,GAAA;MAAK,GAAGD;IAAM;IACnDQ,UAAA,EAAYM,mBAAA;IACZJ,mBAAA,EAAqBO;EACvB;AACF"}
|
@@ -1,10 +1,10 @@
|
|
1
|
-
import { __styles, mergeClasses } from
|
2
|
-
import { createCustomFocusIndicatorStyle } from
|
3
|
-
import { tokens } from
|
1
|
+
import { __styles, mergeClasses } from "@griffel/react";
|
2
|
+
import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
|
3
|
+
import { tokens } from "@fluentui/react-theme";
|
4
4
|
export const splitButtonClassNames = {
|
5
|
-
root:
|
6
|
-
menuButton:
|
7
|
-
primaryActionButton:
|
5
|
+
root: "fui-SplitButton",
|
6
|
+
menuButton: "fui-SplitButton__menuButton",
|
7
|
+
primaryActionButton: "fui-SplitButton__primaryActionButton"
|
8
8
|
};
|
9
9
|
const useFocusStyles = /*#__PURE__*/__styles({
|
10
10
|
primaryActionButton: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","Brovlpu","B486eqv","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","f","i","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","Brovlpu","B486eqv","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","f","i","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"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.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\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.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,+BAA+B,QAAQ;AAChD,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,mBAAA,EAAqB;AACvB;AAEA,MAAMC,cAAA,gBAAiBR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,UAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAWvB;AAEA,MAAMC,aAAA,gBAAgBnB,QAAA;EAAAoB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA8ItB;AAEA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,UAAA,GAAahC,aAAA;EACnB,MAAMiC,WAAA,GAAc5C,cAAA;EAEpB,MAAM;IAAE6C,UAAA;IAAYR,QAAA;IAAUS;EAAiB,CAAE,GAAGJ,KAAA;EAEpDA,KAAA,CAAM7C,IAAI,CAACkD,SAAS,GAAGtD,YAAA,CACrBG,qBAAA,CAAsBC,IAAI,EAC1B8C,UAAA,CAAW/B,IAAI,EACfiC,UAAA,IAAcF,UAAU,CAACE,UAAA,CAAW,EACpC,CAACR,QAAA,IAAYS,iBAAgB,KAAMH,UAAA,CAAWN,QAAQ,EACtD,CAACA,QAAA,IAAYS,iBAAgB,KAAMH,UAAA,CAAWL,oBAAoB,EAClEI,KAAA,CAAM7C,IAAI,CAACkD,SAAS;EAGtB,IAAIL,KAAA,CAAM5C,UAAU,EAAE;IACpB4C,KAAA,CAAM5C,UAAU,CAACiD,SAAS,GAAGtD,YAAA,CAC3BG,qBAAA,CAAsBE,UAAU,EAChC8C,WAAA,CAAY9C,UAAU,EACtB4C,KAAA,CAAM5C,UAAU,CAACiD,SAAS;EAE9B;EAEA,IAAIL,KAAA,CAAM3C,mBAAmB,EAAE;IAC7B2C,KAAA,CAAM3C,mBAAmB,CAACgD,SAAS,GAAGtD,YAAA,CACpCG,qBAAA,CAAsBG,mBAAmB,EACzC6C,WAAA,CAAY7C,mBAAmB,EAC/B2C,KAAA,CAAM3C,mBAAmB,CAACgD,SAAS;EAEvC;EAEA,OAAOL,KAAA;AACT"}
|
@@ -1,8 +1,8 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { renderToggleButton_unstable } from
|
3
|
-
import { useToggleButton_unstable } from
|
4
|
-
import { useToggleButtonStyles_unstable } from
|
5
|
-
import { useCustomStyleHooks_unstable } from
|
1
|
+
import * as React from "react";
|
2
|
+
import { renderToggleButton_unstable } from "./renderToggleButton";
|
3
|
+
import { useToggleButton_unstable } from "./useToggleButton";
|
4
|
+
import { useToggleButtonStyles_unstable } from "./useToggleButtonStyles";
|
5
|
+
import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
|
6
6
|
/**
|
7
7
|
* ToggleButtons are buttons that toggle between two defined states when triggered.
|
8
8
|
*/
|
@@ -17,5 +17,5 @@ export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
17
17
|
// Casting is required due to lack of distributive union to support unions on @types/react
|
18
18
|
});
|
19
19
|
|
20
|
-
ToggleButton.displayName =
|
20
|
+
ToggleButton.displayName = "ToggleButton";
|
21
21
|
//# sourceMappingURL=ToggleButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHooks_unstable","ToggleButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["
|
1
|
+
{"version":3,"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHooks_unstable","ToggleButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n const { useToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,wBAAwB,QAAQ;AACzC,SAASC,8BAA8B,QAAQ;AAG/C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,YAAA,gBAAuDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQP,wBAAA,CAAyBK,KAAA,EAAOC,GAAA;EAE9CL,8BAAA,CAA+BM,KAAA;EAE/B,MAAM;IAAEN,8BAAA,EAAgCO;EAAe,CAAE,GAAGN,4BAAA;EAC5DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,2BAAA,CAA4BQ,KAAA;EACnC;AACF;;AAEAJ,YAAA,CAAaM,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"mappings":"AAAA"}
|
@@ -1,6 +1,6 @@
|
|
1
|
-
export * from
|
2
|
-
export * from
|
3
|
-
export * from
|
4
|
-
export * from
|
5
|
-
export { toggleButtonClassNames, useToggleButtonStyles_unstable } from
|
1
|
+
export * from "./ToggleButton";
|
2
|
+
export * from "./ToggleButton.types";
|
3
|
+
export * from "./renderToggleButton";
|
4
|
+
export * from "./useToggleButton";
|
5
|
+
export { toggleButtonClassNames, useToggleButtonStyles_unstable } from "./useToggleButtonStyles";
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["toggleButtonClassNames","useToggleButtonStyles_unstable"],"sources":["../../../src/components/ToggleButton/index.ts"],"sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,sBAAsB,EAAEC,8BAA8B,QAAQ"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export { renderButton_unstable as renderToggleButton_unstable } from
|
1
|
+
export { renderButton_unstable as renderToggleButton_unstable } from "../Button/renderButton";
|
2
2
|
//# sourceMappingURL=renderToggleButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["renderButton_unstable","renderToggleButton_unstable"],"sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"mappings":"AAAA,SAASA,qBAAA,IAAyBC,2BAA2B,QAAQ"}
|
@@ -1,5 +1,6 @@
|
|
1
|
-
import
|
2
|
-
import {
|
1
|
+
import * as React from "react";
|
2
|
+
import { useToggleState } from "../../utils/useToggleState";
|
3
|
+
import { useButton_unstable } from "../Button/useButton";
|
3
4
|
/**
|
4
5
|
* Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
|
5
6
|
* processed state.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"sources":["
|
1
|
+
{"version":3,"names":["React","useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AAGnC;;;;;;AAMA,OAAO,MAAMC,wBAAA,GAA2BA,CACtCC,KAAA,EACAC,GAAA,KACsB;EACtB,MAAMC,WAAA,GAAcJ,kBAAA,CAAmBE,KAAA,EAAOC,GAAA;EAE9C,OAAOJ,cAAA,CAAeG,KAAA,EAAOE,WAAA;AAC/B"}
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import { iconFilledClassName, iconRegularClassName } from
|
2
|
-
import { createCustomFocusIndicatorStyle } from
|
3
|
-
import { tokens } from
|
4
|
-
import { shorthands, mergeClasses, __styles } from
|
5
|
-
import { useButtonStyles_unstable } from
|
1
|
+
import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
|
2
|
+
import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
|
3
|
+
import { tokens } from "@fluentui/react-theme";
|
4
|
+
import { shorthands, mergeClasses, __styles } from "@griffel/react";
|
5
|
+
import { useButtonStyles_unstable } from "../Button/useButtonStyles";
|
6
6
|
export const toggleButtonClassNames = {
|
7
|
-
root:
|
8
|
-
icon:
|
7
|
+
root: "fui-ToggleButton",
|
8
|
+
icon: "fui-ToggleButton__icon"
|
9
9
|
};
|
10
10
|
const useRootCheckedStyles = /*#__PURE__*/__styles({
|
11
11
|
base: {
|
@@ -370,7 +370,7 @@ export const useToggleButtonStyles_unstable = state => {
|
|
370
370
|
} = state;
|
371
371
|
state.root.className = mergeClasses(toggleButtonClassNames.root,
|
372
372
|
// Primary high contrast styles
|
373
|
-
appearance ===
|
373
|
+
appearance === "primary" && primaryHighContrastStyles.base, appearance === "primary" && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
|
374
374
|
// Checked styles
|
375
375
|
checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
|
376
376
|
// Disabled styles
|
@@ -378,7 +378,7 @@ export const useToggleButtonStyles_unstable = state => {
|
|
378
378
|
// User provided class name
|
379
379
|
state.root.className);
|
380
380
|
if (state.icon) {
|
381
|
-
state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance ===
|
381
|
+
state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === "subtle" || appearance === "transparent") && iconCheckedStyles.subtleOrTransparent, state.icon.className);
|
382
382
|
}
|
383
383
|
useButtonStyles_unstable(state);
|
384
384
|
return state;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","Btyszwp","B8jyv7h","l9kbep","By5cl00","abbn9y","Bw5jppy","B0tp99d","B55dcl7","G867l3","gdbnj","mxns5l","o3nasb","B7d2ofm","outline","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","f","i","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts"],"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\nconst useRootCheckedStyles = 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.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\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.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\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\nconst useRootDisabledStyles = 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: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"mappings":"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"}
|
1
|
+
{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","Btyszwp","B8jyv7h","l9kbep","By5cl00","abbn9y","Bw5jppy","B0tp99d","B55dcl7","G867l3","gdbnj","mxns5l","o3nasb","B7d2ofm","outline","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","f","i","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"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\nconst useRootCheckedStyles = 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.border('1px', 'solid', 'HighlightText'),\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\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.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\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\nconst useRootDisabledStyles = 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: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"mappings":"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"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import * as React from
|
1
|
+
import * as React from "react";
|
2
2
|
const buttonContext = /*#__PURE__*/React.createContext(undefined);
|
3
3
|
const buttonContextDefaultValue = {};
|
4
4
|
/**
|
@@ -10,8 +10,5 @@ export const ButtonContextProvider = buttonContext.Provider;
|
|
10
10
|
* @internal
|
11
11
|
* Internal context hook used to update default values between internal components
|
12
12
|
*/
|
13
|
-
export const useButtonContext = () =>
|
14
|
-
var _a;
|
15
|
-
return (_a = React.useContext(buttonContext)) !== null && _a !== void 0 ? _a : buttonContextDefaultValue;
|
16
|
-
};
|
13
|
+
export const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;
|
17
14
|
//# sourceMappingURL=ButtonContext.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","
|
1
|
+
{"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"sources":["../../src/contexts/ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,aAAA,gBAAgBD,KAAA,CAAME,aAAa,CAAiCC,SAAA;AAU1E,MAAMC,yBAAA,GAAgD,CAAC;AAEvD;;;;AAIA,OAAO,MAAMC,qBAAA,GAAwBJ,aAAA,CAAcK,QAAQ;AAE3D;;;;AAIA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAAMP,KAAA,CAAMQ,UAAU,CAACP,aAAA,KAAkBG,yBAAA"}
|
package/lib/contexts/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export * from
|
1
|
+
export * from "./ButtonContext";
|
2
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './ButtonContext';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/index.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from
|
2
|
-
export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from
|
3
|
-
export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from
|
4
|
-
export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from
|
5
|
-
export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from
|
6
|
-
export { useToggleState } from
|
7
|
-
export { ButtonContextProvider, useButtonContext } from
|
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";
|
6
|
+
export { useToggleState } from "./utils/index";
|
7
|
+
export { ButtonContextProvider, useButtonContext } from "./contexts/index";
|
8
8
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"sources":["
|
1
|
+
{"version":3,"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"sources":["../src/index.ts"],"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\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb;AAEP,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB;AAEP,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB;AAEP,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB;AAEP,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB;AAGP,SAASC,cAAc,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ"}
|
package/lib/utils/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export * from
|
1
|
+
export * from "./useToggleState";
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/utils/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from './useToggleState';\n"],"mappings":"AAAA,cAAc"}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { mergeCallbacks, useControllableState, useEventCallback } from
|
1
|
+
import * as React from "react";
|
2
|
+
import { mergeCallbacks, useControllableState, useEventCallback } from "@fluentui/react-utilities";
|
3
3
|
export function useToggleState(props, state) {
|
4
4
|
const {
|
5
5
|
checked,
|
@@ -16,7 +16,7 @@ export function useToggleState(props, state) {
|
|
16
16
|
defaultState: defaultChecked,
|
17
17
|
initialState: false
|
18
18
|
});
|
19
|
-
const isCheckboxTypeRole = role ===
|
19
|
+
const isCheckboxTypeRole = role === "menuitemcheckbox" || role === "checkbox";
|
20
20
|
const onToggleClick = React.useCallback(ev => {
|
21
21
|
if (!disabled && !disabledFocusable) {
|
22
22
|
if (ev.defaultPrevented) {
|
@@ -30,7 +30,7 @@ export function useToggleState(props, state) {
|
|
30
30
|
checked: checkedValue,
|
31
31
|
root: {
|
32
32
|
...state.root,
|
33
|
-
[isCheckboxTypeRole ?
|
33
|
+
[isCheckboxTypeRole ? "aria-checked" : "aria-pressed"]: checkedValue,
|
34
34
|
onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
|
35
35
|
}
|
36
36
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"sources":["
|
1
|
+
{"version":3,"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"sources":["../../src/utils/useToggleState.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ;AAIvE,OAAO,SAASC,eAIdC,KAAyB,EAAEC,KAAmB,EAAsB;EACpE,MAAM;IAAEC,OAAA;IAASC,cAAA;IAAgBC,QAAA;IAAUC;EAAiB,CAAE,GAAGL,KAAA;EACjE,MAAM;IAAEM,OAAA;IAASC;EAAI,CAAE,GAAGN,KAAA,CAAMO,IAAI;EAEpC,MAAM,CAACC,YAAA,EAAcC,eAAA,CAAgB,GAAGb,oBAAA,CAAqB;IAC3DI,KAAA,EAAOC,OAAA;IACPS,YAAA,EAAcR,cAAA;IACdS,YAAA,EAAc;EAChB;EAEA,MAAMC,kBAAA,GAAqBN,IAAA,KAAS,sBAAsBA,IAAA,KAAS;EAEnE,MAAMO,aAAA,GAAgBnB,KAAA,CAAMoB,WAAW,CACrCC,EAAA,IAAM;IACJ,IAAI,CAACZ,QAAA,IAAY,CAACC,iBAAA,EAAmB;MACnC,IAAIW,EAAA,CAAGC,gBAAgB,EAAE;QACvB;MACF;MAEAP,eAAA,CAAgB,CAACD,YAAA;IACnB;EACF,GACA,CAACA,YAAA,EAAcL,QAAA,EAAUC,iBAAA,EAAmBK,eAAA,CAAgB;EAG9D,OAAO;IACL,GAAGT,KAAK;IAERC,OAAA,EAASO,YAAA;IAETD,IAAA,EAAM;MACJ,GAAGP,KAAA,CAAMO,IAAI;MACb,CAACK,kBAAA,GAAqB,iBAAiB,cAAc,GAAGJ,YAAA;MACxDH,OAAA,EAASR,gBAAA,CACPF,cAAA,CAAeU,OAAA,EAA2EQ,aAAA;IAE9F;EACF;AACF"}
|
package/lib-commonjs/Button.js
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./components/Button/index"), exports);
|
7
|
+
//# sourceMappingURL=Button.js.map
|
8
|
+
|
8
9
|
//# sourceMappingURL=Button.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/Button.js"],"sourcesContent":["export * from \"./components/Button/index\";\n//# sourceMappingURL=Button.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,kCAAkC"}
|
@@ -1,8 +1,9 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./components/CompoundButton/index"), exports);
|
7
|
+
//# sourceMappingURL=CompoundButton.js.map
|
8
|
+
|
8
9
|
//# sourceMappingURL=CompoundButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/CompoundButton.js"],"sourcesContent":["export * from \"./components/CompoundButton/index\";\n//# sourceMappingURL=CompoundButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,0CAA0C"}
|
@@ -1,8 +1,9 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./components/MenuButton/index"), exports);
|
7
|
+
//# sourceMappingURL=MenuButton.js.map
|
8
|
+
|
8
9
|
//# sourceMappingURL=MenuButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/MenuButton.js"],"sourcesContent":["export * from \"./components/MenuButton/index\";\n//# sourceMappingURL=MenuButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
|