@fluentui/react-toolbar 9.8.0 → 9.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -9
- package/lib/components/Toolbar/useToolbarStyles.styles.js +1 -2
- package/lib/components/Toolbar/useToolbarStyles.styles.js.map +1 -1
- package/lib/components/Toolbar/useToolbarStyles.styles.raw.js +1 -1
- package/lib/components/Toolbar/useToolbarStyles.styles.raw.js.map +1 -1
- package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.js +2 -2
- package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.js.map +1 -1
- package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js +2 -1
- package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/ToolbarDivider/useToolbarDividerStyles.styles.js +1 -2
- package/lib/components/ToolbarDivider/useToolbarDividerStyles.styles.js.map +1 -1
- package/lib/components/ToolbarDivider/useToolbarDividerStyles.styles.raw.js +1 -1
- package/lib/components/ToolbarDivider/useToolbarDividerStyles.styles.raw.js.map +1 -1
- package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js +1 -2
- package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map +1 -1
- package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js +1 -1
- package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map +1 -1
- package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js +2 -0
- package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
- package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js +2 -2
- package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map +1 -1
- package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js +2 -1
- package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js.map +1 -1
- package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js +2 -2
- package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map +1 -1
- package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js +2 -1
- package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js +1 -1
- package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js +2 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.styles.js +1 -1
- package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js +2 -0
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js +2 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js +2 -1
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js +2 -1
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,55 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toolbar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.8.2)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.8.1..@fluentui/react-toolbar_v9.8.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-button to v9.10.0 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-divider to v9.7.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
19
|
+
- Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
20
|
+
- Bump @fluentui/react-radio to v9.6.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.8.1)
|
|
24
|
+
|
|
25
|
+
Tue, 26 May 2026 09:39:14 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.8.0..@fluentui/react-toolbar_v9.8.1)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- Bump @fluentui/react-button to v9.9.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
31
|
+
- Bump @fluentui/react-divider to v9.7.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
33
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
34
|
+
- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
35
|
+
- Bump @fluentui/react-radio to v9.6.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
36
|
+
- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
37
|
+
|
|
7
38
|
## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.8.0)
|
|
8
39
|
|
|
9
|
-
Thu, 23 Apr 2026
|
|
40
|
+
Thu, 23 Apr 2026 14:21:00 GMT
|
|
10
41
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.7.7..@fluentui/react-toolbar_v9.8.0)
|
|
11
42
|
|
|
12
43
|
### Minor changes
|
|
13
44
|
|
|
14
45
|
- feat: expose base hooks for Toolbar components ([PR #35903](https://github.com/microsoft/fluentui/pull/35903) by dmytrokirpa@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-button to v9.9.1 ([PR #
|
|
16
|
-
- Bump @fluentui/react-divider to v9.7.1 ([PR #
|
|
17
|
-
- Bump @fluentui/react-utilities to v9.26.3 ([PR #
|
|
18
|
-
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #
|
|
19
|
-
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #
|
|
20
|
-
- Bump @fluentui/react-radio to v9.6.2 ([PR #
|
|
21
|
-
- Bump @fluentui/react-tabster to v9.26.14 ([PR #
|
|
46
|
+
- Bump @fluentui/react-button to v9.9.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
47
|
+
- Bump @fluentui/react-divider to v9.7.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
48
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
49
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
50
|
+
- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
51
|
+
- Bump @fluentui/react-radio to v9.6.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
52
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
22
53
|
|
|
23
54
|
### Patches
|
|
24
55
|
|
|
@@ -57,13 +57,12 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
57
57
|
* Apply styling to the Toolbar slots based on the state
|
|
58
58
|
*/
|
|
59
59
|
export const useToolbarStyles_unstable = state => {
|
|
60
|
-
'use no memo';
|
|
61
|
-
|
|
62
60
|
const styles = useStyles();
|
|
63
61
|
const {
|
|
64
62
|
vertical,
|
|
65
63
|
size
|
|
66
64
|
} = state;
|
|
65
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
67
66
|
state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
|
|
68
67
|
return state;
|
|
69
68
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n },\n small: {\n padding: '0px 4px'\n },\n medium: {\n padding: '4px 8px'\n },\n large: {\n padding: '4px 20px'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n },\n small: {\n padding: '0px 4px'\n },\n medium: {\n padding: '4px 8px'\n },\n large: {\n padding: '4px 20px'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n const styles = useStyles();\n const { vertical, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAK,MAAA;IAAAT,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,KAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAO,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEQ,QAAQ;IAAEW;EAAK,CAAC,GAAGF,KAAK;EAChC;EACAA,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGvB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;EAC1Q,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -28,9 +28,9 @@ export const toolbarClassNames = {
|
|
|
28
28
|
/**
|
|
29
29
|
* Apply styling to the Toolbar slots based on the state
|
|
30
30
|
*/ export const useToolbarStyles_unstable = (state)=>{
|
|
31
|
-
'use no memo';
|
|
32
31
|
const styles = useStyles();
|
|
33
32
|
const { vertical, size } = state;
|
|
33
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
34
34
|
state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
|
|
35
35
|
return state;
|
|
36
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: { padding: '0px 4px' },\n medium: { padding: '4px 8px' },\n large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: { padding: '0px 4px' },\n medium: { padding: '4px 8px' },\n large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n const styles = useStyles();\n const { vertical, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n size === 'small' && !vertical && styles.small,\n size === 'medium' && !vertical && styles.medium,\n size === 'large' && !vertical && styles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAEA;;CAEC,GACD,OAAO,MAAMO,4BAA4B,CAACC;IACxC,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3B,oDAAoD;IACpDA,MAAMZ,IAAI,CAACe,SAAS,GAAGjB,aACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
|
@@ -23,11 +23,11 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
23
23
|
* Apply styling to the ToolbarButton slots based on the state
|
|
24
24
|
*/
|
|
25
25
|
export const useToolbarButtonStyles_unstable = state => {
|
|
26
|
-
'use no memo';
|
|
27
|
-
|
|
28
26
|
const buttonStyles = useBaseStyles();
|
|
27
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
29
28
|
state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);
|
|
30
29
|
if (state.icon) {
|
|
30
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
31
31
|
state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);
|
|
32
32
|
}
|
|
33
33
|
useButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n const buttonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n useButtonStyles_unstable(state);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,YAAY,GAAGd,aAAa,CAAC,CAAC;EACpC;EACAa,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGlB,YAAY,CAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACb,QAAQ,EAAEY,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EAClG,IAAIH,KAAK,CAACI,IAAI,EAAE;IACZ;IACAJ,KAAK,CAACI,IAAI,CAACD,SAAS,GAAGlB,YAAY,CAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACX,YAAY,EAAEU,KAAK,CAACI,IAAI,CAACD,SAAS,CAAC;EAC1G;EACAjB,wBAAwB,CAACc,KAAK,CAAC;AACnC,CAAC","ignoreList":[]}
|
|
@@ -13,10 +13,11 @@ const useBaseStyles = makeStyles({
|
|
|
13
13
|
/**
|
|
14
14
|
* Apply styling to the ToolbarButton slots based on the state
|
|
15
15
|
*/ export const useToolbarButtonStyles_unstable = (state)=>{
|
|
16
|
-
'use no memo';
|
|
17
16
|
const buttonStyles = useBaseStyles();
|
|
17
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
18
18
|
state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);
|
|
19
19
|
if (state.icon) {
|
|
20
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
20
21
|
state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);
|
|
21
22
|
}
|
|
22
23
|
useButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n const buttonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE,MAAMC,gBAAgBH,WAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,MAAMC,eAAeR;IAErB,oDAAoD;IACpDO,MAAME,IAAI,CAACC,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACd,oDAAoD;QACpDJ,MAAMI,IAAI,CAACD,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;IAEAX,yBAAyBQ;AAC3B,EAAE"}
|
|
@@ -24,13 +24,12 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
24
24
|
* Apply styling to the ToolbarDivider slots based on the state
|
|
25
25
|
*/
|
|
26
26
|
export const useToolbarDividerStyles_unstable = state => {
|
|
27
|
-
'use no memo';
|
|
28
|
-
|
|
29
27
|
useDividerStyles_unstable(state);
|
|
30
28
|
const {
|
|
31
29
|
vertical
|
|
32
30
|
} = state;
|
|
33
31
|
const toolbarDividerStyles = useBaseStyles();
|
|
32
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
34
33
|
state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
|
|
35
34
|
return state;
|
|
36
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","mc9l5x","B2u0y6b","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","d","p","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px'\n },\n vertical: {\n maxWidth: 'initial'\n }\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */ export const useToolbarDividerStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","mc9l5x","B2u0y6b","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","d","p","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px'\n },\n vertical: {\n maxWidth: 'initial'\n }\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */ export const useToolbarDividerStyles_unstable = (state)=>{\n useDividerStyles_unstable(state);\n const { vertical } = state;\n const toolbarDividerStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAN,OAAA;EAAA;AAAA;EAAAO,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzDd,yBAAyB,CAACc,KAAK,CAAC;EAChC,MAAM;IAAEJ;EAAS,CAAC,GAAGI,KAAK;EAC1B,MAAMC,oBAAoB,GAAGd,aAAa,CAAC,CAAC;EAC5C;EACAa,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACgB,oBAAoB,CAACb,IAAI,EAAE,CAACQ,QAAQ,IAAIK,oBAAoB,CAACL,QAAQ,EAAEI,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -15,10 +15,10 @@ const useBaseStyles = makeStyles({
|
|
|
15
15
|
/**
|
|
16
16
|
* Apply styling to the ToolbarDivider slots based on the state
|
|
17
17
|
*/ export const useToolbarDividerStyles_unstable = (state)=>{
|
|
18
|
-
'use no memo';
|
|
19
18
|
useDividerStyles_unstable(state);
|
|
20
19
|
const { vertical } = state;
|
|
21
20
|
const toolbarDividerStyles = useBaseStyles();
|
|
21
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
22
22
|
state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
|
|
23
23
|
return state;
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px',\n },\n vertical: {\n maxWidth: 'initial',\n },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px',\n },\n vertical: {\n maxWidth: 'initial',\n },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n useDividerStyles_unstable(state);\n const { vertical } = state;\n const toolbarDividerStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","display","maxWidth","padding","vertical","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,yBAAyB,QAAQ,0BAA0B;AAGpE,MAAMC,gBAAgBH,WAAW;IAC/B,cAAc;IACdI,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMG,mCAAmC,CAACC;IAC/CR,0BAA0BQ;IAC1B,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,uBAAuBR;IAC7B,oDAAoD;IACpDO,MAAMN,IAAI,CAACQ,SAAS,GAAGX,aACrBU,qBAAqBP,IAAI,EACzB,CAACI,YAAYG,qBAAqBH,QAAQ,EAC1CE,MAAMN,IAAI,CAACQ,SAAS;IAEtB,OAAOF;AACT,EAAE"}
|
|
@@ -20,12 +20,11 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
20
20
|
* Apply styling to the Toolbar slots based on the state
|
|
21
21
|
*/
|
|
22
22
|
export const useToolbarGroupStyles_unstable = state => {
|
|
23
|
-
'use no memo';
|
|
24
|
-
|
|
25
23
|
const {
|
|
26
24
|
vertical
|
|
27
25
|
} = state;
|
|
28
26
|
const styles = useStyles();
|
|
27
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
29
28
|
state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
|
|
30
29
|
return state;
|
|
31
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n const { vertical } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B;EACAQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -16,9 +16,9 @@ const useStyles = makeStyles({
|
|
|
16
16
|
/**
|
|
17
17
|
* Apply styling to the Toolbar slots based on the state
|
|
18
18
|
*/ export const useToolbarGroupStyles_unstable = (state)=>{
|
|
19
|
-
'use no memo';
|
|
20
19
|
const { vertical } = state;
|
|
21
20
|
const styles = useStyles();
|
|
21
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
22
22
|
state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
|
|
23
23
|
return state;
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n const { vertical } = state;\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarGroupClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,GAAGZ,aACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
@@ -47,7 +47,9 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
|
|
|
47
47
|
handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
|
|
48
48
|
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
|
|
49
49
|
});
|
|
50
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
50
51
|
state.root['aria-pressed'] = undefined;
|
|
52
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
51
53
|
state.root.onClick = handleOnClick;
|
|
52
54
|
return state;
|
|
53
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const contextSize = useToolbarContext_unstable(ctx => ctx.size);\n const { appearance = 'subtle', size = contextSize, ...baseProps } = props;\n const state = useToolbarRadioButtonBase_unstable(baseProps, ref);\n\n return {\n ...state,\n appearance,\n size,\n shape: 'rounded',\n };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n props: ToolbarRadioButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButtonBase_unstable(\n { checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n state.root['aria-pressed'] = undefined;\n state.root.onClick = handleOnClick;\n\n return state;\n};\n"],"names":["useEventCallback","useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarRadioButtonBase_unstable","shape","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;AAGA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,4BAA4B,QAAQ,yBAAyB;AACtE,SAASC,0BAA0B,QAAQ,4BAA4B;AAQvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,cAAcJ,2BAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,WAAW,EAAE,GAAGI,WAAW,GAAGN;IACpE,MAAMO,QAAQC,mCAAmCF,WAAWL;IAE5D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMD,qCAAqC,CAChDR,OACAC;IAEA,MAAMS,cAAcZ,2BAA2BK,CAAAA,MAAOA,IAAIO,WAAW;IACrE,MAAMC,UAAUb,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIS,aAAa,CAACZ,MAAMa,IAAI,CAAC,cAA7BV,oDAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,oBAAoBrB,6BACxB;QAAEc;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGX,KAAK;IAAC,GAC5DC;IAEF,MAAMM,QAAqC;QACzC,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMK,gBAAgBxB,iBACpB,CAACyB;QACCX,wBAAAA,kCAAAA,YAAcW,GAAGd,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QACvDM,4BAAAA,sCAAAA,gBAAkBI;IACpB;
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const contextSize = useToolbarContext_unstable(ctx => ctx.size);\n const { appearance = 'subtle', size = contextSize, ...baseProps } = props;\n const state = useToolbarRadioButtonBase_unstable(baseProps, ref);\n\n return {\n ...state,\n appearance,\n size,\n shape: 'rounded',\n };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n props: ToolbarRadioButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButtonBase_unstable(\n { checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n // eslint-disable-next-line react-hooks/immutability\n state.root['aria-pressed'] = undefined;\n // eslint-disable-next-line react-hooks/immutability\n state.root.onClick = handleOnClick;\n\n return state;\n};\n"],"names":["useEventCallback","useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarRadioButtonBase_unstable","shape","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;AAGA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,4BAA4B,QAAQ,yBAAyB;AACtE,SAASC,0BAA0B,QAAQ,4BAA4B;AAQvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,cAAcJ,2BAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,WAAW,EAAE,GAAGI,WAAW,GAAGN;IACpE,MAAMO,QAAQC,mCAAmCF,WAAWL;IAE5D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMD,qCAAqC,CAChDR,OACAC;IAEA,MAAMS,cAAcZ,2BAA2BK,CAAAA,MAAOA,IAAIO,WAAW;IACrE,MAAMC,UAAUb,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIS,aAAa,CAACZ,MAAMa,IAAI,CAAC,cAA7BV,oDAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,oBAAoBrB,6BACxB;QAAEc;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGX,KAAK;IAAC,GAC5DC;IAEF,MAAMM,QAAqC;QACzC,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMK,gBAAgBxB,iBACpB,CAACyB;QACCX,wBAAAA,kCAAAA,YAAcW,GAAGd,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QACvDM,4BAAAA,sCAAAA,gBAAkBI;IACpB;IAEF,oDAAoD;IACpDd,MAAMe,IAAI,CAAC,eAAe,GAAGC;IAC7B,oDAAoD;IACpDhB,MAAMe,IAAI,CAACN,OAAO,GAAGI;IAErB,OAAOb;AACT,EAAE"}
|
|
@@ -18,11 +18,11 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
18
18
|
* Apply styling to the ToolbarRadioButton slots based on the state
|
|
19
19
|
*/
|
|
20
20
|
export const useToolbarRadioButtonStyles_unstable = state => {
|
|
21
|
-
'use no memo';
|
|
22
|
-
|
|
23
21
|
const toggleButtonStyles = useBaseStyles();
|
|
22
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
24
23
|
state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
25
24
|
if (state.icon) {
|
|
25
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
26
26
|
state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
27
27
|
}
|
|
28
28
|
useToggleButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n const toggleButtonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,oCAAoC,GAAIC,KAAK,IAAG;EAC7D,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1C;EACAO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;IACZ;IACAL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -14,10 +14,11 @@ const useBaseStyles = makeStyles({
|
|
|
14
14
|
/**
|
|
15
15
|
* Apply styling to the ToolbarRadioButton slots based on the state
|
|
16
16
|
*/ export const useToolbarRadioButtonStyles_unstable = (state)=>{
|
|
17
|
-
'use no memo';
|
|
18
17
|
const toggleButtonStyles = useBaseStyles();
|
|
18
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
19
19
|
state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
20
20
|
if (state.icon) {
|
|
21
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
21
22
|
state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
22
23
|
}
|
|
23
24
|
useToggleButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n const toggleButtonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAACC;IACnD,MAAMC,qBAAqBV;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}
|
|
@@ -18,11 +18,11 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
18
18
|
* Apply styling to the ToolbarToggleButton slots based on the state
|
|
19
19
|
*/
|
|
20
20
|
export const useToolbarToggleButtonStyles_unstable = state => {
|
|
21
|
-
'use no memo';
|
|
22
|
-
|
|
23
21
|
const toggleButtonStyles = useBaseStyles();
|
|
22
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
24
23
|
state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
25
24
|
if (state.icon) {
|
|
25
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
26
26
|
state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
27
27
|
}
|
|
28
28
|
useToggleButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n const toggleButtonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,8BAA8B,QAAQ,wBAAwB;AACvE,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qCAAqC,GAAIC,KAAK,IAAG;EAC9D,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;EAC1C;EACAO,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;EACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;IACZ;IACAL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGZ,YAAY,CAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;EAC/G;EACAX,8BAA8B,CAACQ,KAAK,CAAC;EACrC,OAAOA,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -14,10 +14,11 @@ const useBaseStyles = makeStyles({
|
|
|
14
14
|
/**
|
|
15
15
|
* Apply styling to the ToolbarToggleButton slots based on the state
|
|
16
16
|
*/ export const useToolbarToggleButtonStyles_unstable = (state)=>{
|
|
17
|
-
'use no memo';
|
|
18
17
|
const toggleButtonStyles = useBaseStyles();
|
|
18
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
19
19
|
state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
20
20
|
if (state.icon) {
|
|
21
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
21
22
|
state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
22
23
|
}
|
|
23
24
|
useToggleButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n const toggleButtonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,MAAMC,gBAAgBH,WAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,OAAOO,6BAA6B;QACrDC,OAAOR,OAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,OAAOW,oCAAoC;IACpD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpD,MAAMC,qBAAqBV;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,MAAMK,IAAI,CAACF,SAAS,GAAGd,aAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;IAEAb,+BAA+BU;IAE/B,OAAOA;AACT,EAAE"}
|
|
@@ -91,9 +91,9 @@ const toolbarClassNames = {
|
|
|
91
91
|
]
|
|
92
92
|
});
|
|
93
93
|
const useToolbarStyles_unstable = (state)=>{
|
|
94
|
-
'use no memo';
|
|
95
94
|
const styles = useStyles();
|
|
96
95
|
const { vertical, size } = state;
|
|
96
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
97
97
|
state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
|
|
98
98
|
return state;
|
|
99
99
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n },\n small: {\n padding: '0px 4px'\n },\n medium: {\n padding: '4px 8px'\n },\n large: {\n padding: '4px 20px'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n },\n small: {\n padding: '0px 4px'\n },\n medium: {\n padding: '4px 8px'\n },\n large: {\n padding: '4px 20px'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarStyles_unstable = (state)=>{\n const styles = useStyles();\n const { vertical, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","toolbarClassNames","root","useStyles","mc9l5x","Bt984gj","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","Beiy3e4","a9b677","small","medium","large","d","p","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,iBAAiB;;;IA2BbkB,yBAAyB;;;;uBA5BD,gBAAgB;AAClD,0BAA0B;IAC7BjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAK,MAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,kCAAmCE,KAAK,IAAG;IAClD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEQ,QAAQ,EAAEW,IAAAA,EAAM,GAAGF,KAAK;IAChC,oDAAA;IACAA,KAAK,CAAClB,IAAI,CAACqB,SAAS,GAAGvB,uBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAES,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEW,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACP,KAAK,EAAEQ,IAAI,KAAK,QAAQ,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACN,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAI,CAACX,QAAQ,IAAIU,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAClB,IAAI,CAACqB,SAAS,CAAC;IAC1Q,OAAOH,KAAK;AAChB,CAAC"}
|
|
@@ -44,9 +44,9 @@ const toolbarClassNames = {
|
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
46
|
const useToolbarStyles_unstable = (state)=>{
|
|
47
|
-
'use no memo';
|
|
48
47
|
const styles = useStyles();
|
|
49
48
|
const { vertical, size } = state;
|
|
49
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
50
50
|
state.root.className = (0, _react.mergeClasses)(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
|
|
51
51
|
return state;
|
|
52
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: { padding: '0px 4px' },\n medium: { padding: '4px 8px' },\n large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/Toolbar/useToolbarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: '4px 8px',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: { padding: '0px 4px' },\n medium: { padding: '4px 8px' },\n large: { padding: '4px 20px' },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n const styles = useStyles();\n const { vertical, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n size === 'small' && !vertical && styles.small,\n size === 'medium' && !vertical && styles.medium,\n size === 'large' && !vertical && styles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarClassNames","root","useStyles","display","alignItems","padding","vertical","flexDirection","width","small","medium","large","useToolbarStyles_unstable","state","styles","size","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,iBAAAA;;;6BAyBAY;eAAAA;;;uBA5B4B,iBAAiB;AAGnD,0BAAwD;IAC7DX,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;QACZC,SAAS;IACX;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;IACAC,OAAO;QAAEJ,SAAS;IAAU;IAC5BK,QAAQ;QAAEL,SAAS;IAAU;IAC7BM,OAAO;QAAEN,SAAS;IAAW;AAC/B;AAKO,kCAAkC,CAACQ;IACxC,MAAMC,SAASZ;IACf,MAAM,EAAEI,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAC3B,oDAAoD;IACpDA,MAAMZ,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EACrBC,kBAAkBC,IAAI,EACtBa,OAAOb,IAAI,EACXK,YAAYQ,OAAOR,QAAQ,EAC3BS,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAC7CM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAC/CK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAC7CE,MAAMZ,IAAI,CAACe,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
|
@@ -36,10 +36,11 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
36
36
|
]
|
|
37
37
|
});
|
|
38
38
|
const useToolbarButtonStyles_unstable = (state)=>{
|
|
39
|
-
'use no memo';
|
|
40
39
|
const buttonStyles = useBaseStyles();
|
|
40
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
41
|
state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
|
|
42
42
|
if (state.icon) {
|
|
43
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
43
44
|
state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
|
|
44
45
|
}
|
|
45
46
|
(0, _reactbutton.useButtonStyles_unstable)(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0'\n }\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */ export const useToolbarButtonStyles_unstable = (state)=>{\n const buttonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n useButtonStyles_unstable(state);\n};\n"],"names":["__styles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","Beiy3e4","verticalIcon","Be2twd7","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA,YAAY;;;;;+BAcKe,+BAA+B;;;;;;uBAbP,gBAAgB;6BAChB,wBAAwB;AACjE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,MAAMC,YAAY,GAAGd,aAAa,CAAC,CAAC;IACpC,oDAAA;IACAa,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACb,QAAQ,EAAEY,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IAClG,IAAIH,KAAK,CAACI,IAAI,EAAE;QACZ,oDAAA;QACAJ,KAAK,CAACI,IAAI,CAACD,SAAS,OAAGlB,mBAAY,EAACe,KAAK,CAACZ,QAAQ,IAAIa,YAAY,CAACX,YAAY,EAAEU,KAAK,CAACI,IAAI,CAACD,SAAS,CAAC;IAC1G;QACAjB,qCAAwB,EAACc,KAAK,CAAC;AACnC,CAAC"}
|
|
@@ -21,10 +21,11 @@ const useBaseStyles = (0, _react.makeStyles)({
|
|
|
21
21
|
}
|
|
22
22
|
});
|
|
23
23
|
const useToolbarButtonStyles_unstable = (state)=>{
|
|
24
|
-
'use no memo';
|
|
25
24
|
const buttonStyles = useBaseStyles();
|
|
25
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
26
26
|
state.root.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.vertical, state.root.className);
|
|
27
27
|
if (state.icon) {
|
|
28
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
28
29
|
state.icon.className = (0, _react.mergeClasses)(state.vertical && buttonStyles.verticalIcon, state.icon.className);
|
|
29
30
|
}
|
|
30
31
|
(0, _reactbutton.useButtonStyles_unstable)(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n const buttonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA;;;;;;;;;;;uBAEyC,iBAAiB;6BACjB,yBAAyB;AAGlE,MAAMG,oBAAgBH,iBAAAA,EAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,MAAMC,kCAAkC,CAACC;IAC9C,MAAMC,eAAeR;IAErB,oDAAoD;IACpDO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACd,oDAAoD;QACpDJ,MAAMI,IAAI,CAACD,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;QAEAX,qCAAAA,EAAyBQ;AAC3B,EAAE"}
|
|
@@ -38,10 +38,10 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
38
38
|
]
|
|
39
39
|
});
|
|
40
40
|
const useToolbarDividerStyles_unstable = (state)=>{
|
|
41
|
-
'use no memo';
|
|
42
41
|
(0, _reactdivider.useDividerStyles_unstable)(state);
|
|
43
42
|
const { vertical } = state;
|
|
44
43
|
const toolbarDividerStyles = useBaseStyles();
|
|
44
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
45
45
|
state.root.className = (0, _react.mergeClasses)(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
|
|
46
46
|
return state;
|
|
47
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px'\n },\n vertical: {\n maxWidth: 'initial'\n }\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */ export const useToolbarDividerStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px'\n },\n vertical: {\n maxWidth: 'initial'\n }\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */ export const useToolbarDividerStyles_unstable = (state)=>{\n useDividerStyles_unstable(state);\n const { vertical } = state;\n const toolbarDividerStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","mc9l5x","B2u0y6b","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","vertical","d","p","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":"AAAA,YAAY;;;;;+BAgBKe,gCAAgC;;;;;;uBAfR,gBAAgB;8BACf,yBAAyB;AACnE,MAAMZ,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAN,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAO,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;QACzDd,uCAAyB,EAACc,KAAK,CAAC;IAChC,MAAM,EAAEJ,QAAAA,EAAU,GAAGI,KAAK;IAC1B,MAAMC,oBAAoB,GAAGd,aAAa,CAAC,CAAC;IAC5C,oDAAA;IACAa,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACgB,oBAAoB,CAACb,IAAI,EAAE,CAACQ,QAAQ,IAAIK,oBAAoB,CAACL,QAAQ,EAAEI,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -23,10 +23,10 @@ const useBaseStyles = (0, _react.makeStyles)({
|
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
const useToolbarDividerStyles_unstable = (state)=>{
|
|
26
|
-
'use no memo';
|
|
27
26
|
(0, _reactdivider.useDividerStyles_unstable)(state);
|
|
28
27
|
const { vertical } = state;
|
|
29
28
|
const toolbarDividerStyles = useBaseStyles();
|
|
29
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
30
30
|
state.root.className = (0, _react.mergeClasses)(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);
|
|
31
31
|
return state;
|
|
32
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px',\n },\n vertical: {\n maxWidth: 'initial',\n },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDividerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n padding: '0 12px',\n },\n vertical: {\n maxWidth: 'initial',\n },\n});\n\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n useDividerStyles_unstable(state);\n const { vertical } = state;\n const toolbarDividerStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n state.root.className,\n );\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useDividerStyles_unstable","useBaseStyles","root","display","maxWidth","padding","vertical","useToolbarDividerStyles_unstable","state","toolbarDividerStyles","className"],"mappings":"AAAA;;;;;+BAqBaS;;;;;;uBAnB4B,iBAAiB;8BAChB,0BAA0B;AAGpE,MAAMN,oBAAgBH,iBAAAA,EAAW;IAC/B,cAAc;IACdI,MAAM;QACJC,SAAS;QACTC,UAAU;QACVC,SAAS;IACX;IACAC,UAAU;QACRF,UAAU;IACZ;AACF;AAKO,yCAAyC,CAACI;QAC/CR,uCAAAA,EAA0BQ;IAC1B,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,uBAAuBR;IAC7B,oDAAoD;IACpDO,MAAMN,IAAI,CAACQ,SAAS,GAAGX,uBAAAA,EACrBU,qBAAqBP,IAAI,EACzB,CAACI,YAAYG,qBAAqBH,QAAQ,EAC1CE,MAAMN,IAAI,CAACQ,SAAS;IAEtB,OAAOF;AACT,EAAE"}
|
|
@@ -39,9 +39,9 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
39
39
|
]
|
|
40
40
|
});
|
|
41
41
|
const useToolbarGroupStyles_unstable = (state)=>{
|
|
42
|
-
'use no memo';
|
|
43
42
|
const { vertical } = state;
|
|
44
43
|
const styles = useStyles();
|
|
44
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
45
45
|
state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
|
|
46
46
|
return state;
|
|
47
47
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content'\n }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n const { vertical } = state;\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAeY;eAA9BS;;;uBAhBwB,gBAAgB;AAClD,+BAA+B;IAClCR,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAQ,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGb,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -32,9 +32,9 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
const useToolbarGroupStyles_unstable = (state)=>{
|
|
35
|
-
'use no memo';
|
|
36
35
|
const { vertical } = state;
|
|
37
36
|
const styles = useStyles();
|
|
37
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
38
38
|
state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
|
|
39
39
|
return state;
|
|
40
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n const { vertical } = state;\n const styles = useStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toolbarGroupClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaE,sBAAAA;;;IAkBAQ,8BAAAA;;;;uBAtB4B,iBAAiB;AAInD,+BAAkE;IACvEP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAKO,uCAAuC,CAACE;IAC7C,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,OAAGZ,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
@@ -53,7 +53,9 @@ const useToolbarRadioButtonBase_unstable = (props, ref)=>{
|
|
|
53
53
|
handleRadio === null || handleRadio === void 0 ? void 0 : handleRadio(e, state.name, state.value, state.checked);
|
|
54
54
|
onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
|
|
55
55
|
});
|
|
56
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
56
57
|
state.root['aria-pressed'] = undefined;
|
|
58
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
57
59
|
state.root.onClick = handleOnClick;
|
|
58
60
|
return state;
|
|
59
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const contextSize = useToolbarContext_unstable(ctx => ctx.size);\n const { appearance = 'subtle', size = contextSize, ...baseProps } = props;\n const state = useToolbarRadioButtonBase_unstable(baseProps, ref);\n\n return {\n ...state,\n appearance,\n size,\n shape: 'rounded',\n };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n props: ToolbarRadioButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButtonBase_unstable(\n { checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n state.root['aria-pressed'] = undefined;\n state.root.onClick = handleOnClick;\n\n return state;\n};\n"],"names":["useEventCallback","useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarRadioButtonBase_unstable","shape","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;;;;;;;;;;;;IA2CaY,kCAAAA;;;kCAxBAT;;;;gCAhBoB,4BAA4B;6BAChB,yBAAyB;gCAC3B,4BAA4B;AAchE,MAAMA,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,kBAAcJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,WAAW,EAAE,GAAGI,WAAW,GAAGN;IACpE,MAAMO,QAAQC,mCAAmCF,WAAWL;IAE5D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAUK,2CAA2C,CAChDT,OACAC;IAEA,MAAMS,kBAAcZ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIO,WAAW;IACrE,MAAMC,cAAUb,0CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAACA,AAAD,iCAACA,IAAIS,aAAa,CAACZ,MAAMa,KAAI,AAAC,MAAA,QAA7BV,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,wBAAoBrB,yCAAAA,EACxB;QAAEc;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGX,KAAK;IAAC,GAC5DC;IAEF,MAAMM,QAAqC;QACzC,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMK,oBAAgBxB,gCAAAA,EACpB,CAACyB;QACCX,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcW,GAAGd,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QACvDM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBI;IACpB;
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButtonBase_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n ToolbarRadioButtonProps,\n ToolbarRadioButtonState,\n ToolbarRadioButtonBaseProps,\n ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n props: ToolbarRadioButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n const contextSize = useToolbarContext_unstable(ctx => ctx.size);\n const { appearance = 'subtle', size = contextSize, ...baseProps } = props;\n const state = useToolbarRadioButtonBase_unstable(baseProps, ref);\n\n return {\n ...state,\n appearance,\n size,\n shape: 'rounded',\n };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n props: ToolbarRadioButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButtonBase_unstable(\n { checked, role: 'radio', 'aria-checked': checked, ...props },\n ref,\n );\n const state: ToolbarRadioButtonBaseState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = useEventCallback(\n (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n handleRadio?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n },\n );\n // eslint-disable-next-line react-hooks/immutability\n state.root['aria-pressed'] = undefined;\n // eslint-disable-next-line react-hooks/immutability\n state.root.onClick = handleOnClick;\n\n return state;\n};\n"],"names":["useEventCallback","useToggleButtonBase_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","contextSize","ctx","size","appearance","baseProps","state","useToolbarRadioButtonBase_unstable","shape","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;;;;;;;;;;;;IA2CaY,kCAAAA;;;kCAxBAT;;;;gCAhBoB,4BAA4B;6BAChB,yBAAyB;gCAC3B,4BAA4B;AAchE,MAAMA,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,kBAAcJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIC,IAAI;IAC9D,MAAM,EAAEC,aAAa,QAAQ,EAAED,OAAOF,WAAW,EAAE,GAAGI,WAAW,GAAGN;IACpE,MAAMO,QAAQC,mCAAmCF,WAAWL;IAE5D,OAAO;QACL,GAAGM,KAAK;QACRF;QACAD;QACAK,OAAO;IACT;AACF,EAAE;AAUK,2CAA2C,CAChDT,OACAC;IAEA,MAAMS,kBAAcZ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAIO,WAAW;IACrE,MAAMC,cAAUb,0CAAAA,EAA2BK,CAAAA;YAASA;eAAF,CAAC,CAAA,CAACA,AAAD,iCAACA,IAAIS,aAAa,CAACZ,MAAMa,KAAI,AAAC,MAAA,QAA7BV,kCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,8BAA+BW,QAAQ,CAACd,MAAMe,MAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGjB;IACrC,MAAMkB,wBAAoBrB,yCAAAA,EACxB;QAAEc;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGX,KAAK;IAAC,GAC5DC;IAEF,MAAMM,QAAqC;QACzC,GAAGW,iBAAiB;QACpBL,MAAMb,MAAMa,IAAI;QAChBE,OAAOf,MAAMe,KAAK;IACpB;IAEA,MAAMK,oBAAgBxB,gCAAAA,EACpB,CAACyB;QACCX,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAcW,GAAGd,MAAMM,IAAI,EAAEN,MAAMQ,KAAK,EAAER,MAAMI,OAAO;QACvDM,oBAAAA,QAAAA,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAkBI;IACpB;IAEF,oDAAoD;IACpDd,MAAMe,IAAI,CAAC,eAAe,GAAGC;IAC7B,oDAAoD;IACpDhB,MAAMe,IAAI,CAACN,OAAO,GAAGI;IAErB,OAAOb;AACT,EAAE"}
|
|
@@ -27,10 +27,11 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
27
27
|
]
|
|
28
28
|
});
|
|
29
29
|
const useToolbarRadioButtonStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const toggleButtonStyles = useBaseStyles();
|
|
31
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
32
32
|
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
33
33
|
if (state.icon) {
|
|
34
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
34
35
|
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
35
36
|
}
|
|
36
37
|
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarRadioButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */ export const useToolbarRadioButtonStyles_unstable = (state)=>{\n const toggleButtonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBAE6B,gBAAgB;6BACV,wBAAwB;AACvE,MAAMI,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,MAAMC,oCAAoC,IAAIC,KAAK,IAAG;IAC7D,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1C,oDAAA;IACAO,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZ,oDAAA;QACAL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}
|
package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js
CHANGED
|
@@ -22,10 +22,11 @@ const useBaseStyles = (0, _react.makeStyles)({
|
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
24
|
const useToolbarRadioButtonStyles_unstable = (state)=>{
|
|
25
|
-
'use no memo';
|
|
26
25
|
const toggleButtonStyles = useBaseStyles();
|
|
26
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
27
27
|
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
28
28
|
if (state.icon) {
|
|
29
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
29
30
|
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
30
31
|
}
|
|
31
32
|
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState): ToolbarRadioButtonState => {\n const toggleButtonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarRadioButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;;;;;;;;;;;4BAEuB,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMI,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,MAAMC,uCAAuC,CAACC;IACnD,MAAMC,qBAAqBV;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}
|
|
@@ -27,10 +27,11 @@ const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
27
27
|
]
|
|
28
28
|
});
|
|
29
29
|
const useToolbarToggleButtonStyles_unstable = (state)=>{
|
|
30
|
-
'use no memo';
|
|
31
30
|
const toggleButtonStyles = useBaseStyles();
|
|
31
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
32
32
|
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
33
33
|
if (state.icon) {
|
|
34
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
34
35
|
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
35
36
|
}
|
|
36
37
|
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useToolbarToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected\n },\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected\n }\n});\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */ export const useToolbarToggleButtonStyles_unstable = (state)=>{\n const toggleButtonStyles = useBaseStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n useToggleButtonStyles_unstable(state);\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","De3pzq","sj55zd","iconSelected","d","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBAE6B,gBAAgB;6BACV,wBAAwB;AACvE,MAAMI,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,MAAMC,qCAAqC,IAAIC,KAAK,IAAG;IAC9D,MAAMC,kBAAkB,GAAGR,aAAa,CAAC,CAAC;IAC1C,oDAAA;IACAO,KAAK,CAACE,IAAI,CAACC,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACP,QAAQ,EAAEM,KAAK,CAACE,IAAI,CAACC,SAAS,CAAC;IACvG,IAAIH,KAAK,CAACK,IAAI,EAAE;QACZ,oDAAA;QACAL,KAAK,CAACK,IAAI,CAACF,SAAS,OAAGZ,mBAAY,EAACS,KAAK,CAACI,OAAO,IAAIH,kBAAkB,CAACJ,YAAY,EAAEG,KAAK,CAACK,IAAI,CAACF,SAAS,CAAC;IAC/G;QACAX,2CAA8B,EAACQ,KAAK,CAAC;IACrC,OAAOA,KAAK;AAChB,CAAC"}
|
package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js
CHANGED
|
@@ -22,10 +22,11 @@ const useBaseStyles = (0, _react.makeStyles)({
|
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
24
|
const useToolbarToggleButtonStyles_unstable = (state)=>{
|
|
25
|
-
'use no memo';
|
|
26
25
|
const toggleButtonStyles = useBaseStyles();
|
|
26
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
27
27
|
state.root.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.selected, state.root.className);
|
|
28
28
|
if (state.icon) {
|
|
29
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
29
30
|
state.icon.className = (0, _react.mergeClasses)(state.checked && toggleButtonStyles.iconSelected, state.icon.className);
|
|
30
31
|
}
|
|
31
32
|
(0, _reactbutton.useToggleButtonStyles_unstable)(state);
|
package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.raw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport type { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n /* use subtle ToggleButton selected styles for Toolbar Radio selected state */\n selected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n\n iconSelected: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState): ToolbarToggleButtonState => {\n const toggleButtonStyles = useBaseStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(state.checked && toggleButtonStyles.selected, state.root.className);\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(state.checked && toggleButtonStyles.iconSelected, state.icon.className);\n }\n\n useToggleButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","useToggleButtonStyles_unstable","useBaseStyles","selected","backgroundColor","colorSubtleBackgroundSelected","color","colorNeutralForeground2Selected","iconSelected","colorNeutralForeground2BrandSelected","useToolbarToggleButtonStyles_unstable","state","toggleButtonStyles","root","className","checked","icon"],"mappings":"AAAA;;;;;;;;;;;4BAEuB,wBAAwB;uBACN,iBAAiB;6BACX,yBAAyB;AAGxE,MAAMI,oBAAgBH,iBAAAA,EAAW;IAC/B,4EAA4E,GAC5EI,UAAU;QACRC,iBAAiBN,kBAAAA,CAAOO,6BAA6B;QACrDC,OAAOR,kBAAAA,CAAOS,+BAA+B;IAC/C;IAEAC,cAAc;QACZF,OAAOR,kBAAAA,CAAOW,oCAAoC;IACpD;AACF;AAKO,MAAMC,wCAAwC,CAACC;IACpD,MAAMC,qBAAqBV;IAE3B,oDAAoD;IACpDS,MAAME,IAAI,CAACC,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBT,QAAQ,EAAEQ,MAAME,IAAI,CAACC,SAAS;IAEtG,IAAIH,MAAMK,IAAI,EAAE;QACd,oDAAoD;QACpDL,MAAMK,IAAI,CAACF,SAAS,OAAGd,mBAAAA,EAAaW,MAAMI,OAAO,IAAIH,mBAAmBJ,YAAY,EAAEG,MAAMK,IAAI,CAACF,SAAS;IAC5G;QAEAb,2CAAAA,EAA+BU;IAE/B,OAAOA;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-toolbar",
|
|
3
|
-
"version": "9.8.
|
|
3
|
+
"version": "9.8.2",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,15 +12,15 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-button": "^9.
|
|
16
|
-
"@fluentui/react-divider": "^9.7.
|
|
15
|
+
"@fluentui/react-button": "^9.10.0",
|
|
16
|
+
"@fluentui/react-divider": "^9.7.3",
|
|
17
17
|
"@fluentui/react-theme": "^9.2.1",
|
|
18
|
-
"@fluentui/react-utilities": "^9.26.
|
|
19
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
20
|
-
"@fluentui/react-context-selector": "^9.2.
|
|
21
|
-
"@fluentui/react-radio": "^9.6.
|
|
18
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
19
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
20
|
+
"@fluentui/react-context-selector": "^9.2.18",
|
|
21
|
+
"@fluentui/react-radio": "^9.6.4",
|
|
22
22
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
23
|
-
"@fluentui/react-tabster": "^9.26.
|
|
23
|
+
"@fluentui/react-tabster": "^9.26.16",
|
|
24
24
|
"@griffel/react": "^1.5.32",
|
|
25
25
|
"@swc/helpers": "^0.5.1"
|
|
26
26
|
},
|