@fluentui/react-toolbar 9.0.0-beta.13 → 9.0.0-beta.14

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.
Files changed (66) hide show
  1. package/CHANGELOG.json +60 -1
  2. package/CHANGELOG.md +16 -2
  3. package/lib/Toolbar.js.map +1 -1
  4. package/lib/ToolbarButton.js.map +1 -1
  5. package/lib/ToolbarDivider.js.map +1 -1
  6. package/lib/ToolbarRadioButton.js.map +1 -1
  7. package/lib/ToolbarToggleButton.js.map +1 -1
  8. package/lib/components/Toolbar/Toolbar.cy.js +89 -0
  9. package/lib/components/Toolbar/Toolbar.cy.js.map +1 -0
  10. package/lib/components/Toolbar/Toolbar.js.map +1 -1
  11. package/lib/components/Toolbar/Toolbar.types.js.map +1 -1
  12. package/lib/components/Toolbar/ToolbarContext.js.map +1 -1
  13. package/lib/components/Toolbar/index.js.map +1 -1
  14. package/lib/components/Toolbar/renderToolbar.js.map +1 -1
  15. package/lib/components/Toolbar/useToolbar.js.map +1 -1
  16. package/lib/components/Toolbar/useToolbarContextValues.js.map +1 -1
  17. package/lib/components/Toolbar/useToolbarStyles.js.map +1 -1
  18. package/lib/components/ToolbarButton/ToolbarButton.js.map +1 -1
  19. package/lib/components/ToolbarButton/ToolbarButton.types.js.map +1 -1
  20. package/lib/components/ToolbarButton/index.js.map +1 -1
  21. package/lib/components/ToolbarDivider/ToolbarDivider.js.map +1 -1
  22. package/lib/components/ToolbarDivider/ToolbarDivider.types.js.map +1 -1
  23. package/lib/components/ToolbarDivider/index.js.map +1 -1
  24. package/lib/components/ToolbarDivider/useToolbarDivider.js.map +1 -1
  25. package/lib/components/ToolbarDivider/useToolbarDividerStyles.js.map +1 -1
  26. package/lib/components/ToolbarRadioButton/ToolbarRadioButton.js.map +1 -1
  27. package/lib/components/ToolbarRadioButton/ToolbarRadioButton.types.js.map +1 -1
  28. package/lib/components/ToolbarRadioButton/index.js.map +1 -1
  29. package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
  30. package/lib/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js.map +1 -1
  31. package/lib/components/ToolbarToggleButton/ToolbarToggleButton.js.map +1 -1
  32. package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js.map +1 -1
  33. package/lib/components/ToolbarToggleButton/index.js.map +1 -1
  34. package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -1
  35. package/lib/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js.map +1 -1
  36. package/lib/index.js.map +1 -1
  37. package/lib-commonjs/Toolbar.js.map +1 -1
  38. package/lib-commonjs/ToolbarButton.js.map +1 -1
  39. package/lib-commonjs/ToolbarDivider.js.map +1 -1
  40. package/lib-commonjs/ToolbarRadioButton.js.map +1 -1
  41. package/lib-commonjs/ToolbarToggleButton.js.map +1 -1
  42. package/lib-commonjs/components/Toolbar/Toolbar.cy.js +103 -0
  43. package/lib-commonjs/components/Toolbar/Toolbar.cy.js.map +1 -0
  44. package/lib-commonjs/components/Toolbar/Toolbar.js.map +1 -1
  45. package/lib-commonjs/components/Toolbar/ToolbarContext.js.map +1 -1
  46. package/lib-commonjs/components/Toolbar/index.js.map +1 -1
  47. package/lib-commonjs/components/Toolbar/renderToolbar.js.map +1 -1
  48. package/lib-commonjs/components/Toolbar/useToolbar.js.map +1 -1
  49. package/lib-commonjs/components/Toolbar/useToolbarContextValues.js.map +1 -1
  50. package/lib-commonjs/components/Toolbar/useToolbarStyles.js.map +1 -1
  51. package/lib-commonjs/components/ToolbarButton/ToolbarButton.js.map +1 -1
  52. package/lib-commonjs/components/ToolbarButton/index.js.map +1 -1
  53. package/lib-commonjs/components/ToolbarDivider/ToolbarDivider.js.map +1 -1
  54. package/lib-commonjs/components/ToolbarDivider/index.js.map +1 -1
  55. package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js.map +1 -1
  56. package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.js.map +1 -1
  57. package/lib-commonjs/components/ToolbarRadioButton/ToolbarRadioButton.js.map +1 -1
  58. package/lib-commonjs/components/ToolbarRadioButton/index.js.map +1 -1
  59. package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
  60. package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButtonStyles.js.map +1 -1
  61. package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.js.map +1 -1
  62. package/lib-commonjs/components/ToolbarToggleButton/index.js.map +1 -1
  63. package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -1
  64. package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js.map +1 -1
  65. package/lib-commonjs/index.js.map +1 -1
  66. package/package.json +9 -10
package/CHANGELOG.json CHANGED
@@ -2,7 +2,66 @@
2
2
  "name": "@fluentui/react-toolbar",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 11 Nov 2022 14:53:34 GMT",
5
+ "date": "Thu, 17 Nov 2022 23:02:27 GMT",
6
+ "tag": "@fluentui/react-toolbar_v9.0.0-beta.14",
7
+ "version": "9.0.0-beta.14",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "martinhochel@microsoft.com",
12
+ "package": "@fluentui/react-toolbar",
13
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
14
+ "comment": "chore: update package scaffold"
15
+ },
16
+ {
17
+ "author": "chassunc@microsoft.com",
18
+ "package": "@fluentui/react-toolbar",
19
+ "commit": "4f5eec8081eed87fce6e8c4a071fb48e37629d1c",
20
+ "comment": "chore: add onClick on test title"
21
+ }
22
+ ],
23
+ "prerelease": [
24
+ {
25
+ "author": "beachball",
26
+ "package": "@fluentui/react-toolbar",
27
+ "comment": "Bump @fluentui/react-button to v9.1.9",
28
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-toolbar",
33
+ "comment": "Bump @fluentui/react-divider to v9.1.5",
34
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
35
+ },
36
+ {
37
+ "author": "beachball",
38
+ "package": "@fluentui/react-toolbar",
39
+ "comment": "Bump @fluentui/react-utilities to v9.2.2",
40
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
41
+ },
42
+ {
43
+ "author": "beachball",
44
+ "package": "@fluentui/react-toolbar",
45
+ "comment": "Bump @fluentui/react-context-selector to v9.1.2",
46
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
47
+ },
48
+ {
49
+ "author": "beachball",
50
+ "package": "@fluentui/react-toolbar",
51
+ "comment": "Bump @fluentui/react-radio to v9.0.12",
52
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
53
+ },
54
+ {
55
+ "author": "beachball",
56
+ "package": "@fluentui/react-toolbar",
57
+ "comment": "Bump @fluentui/react-tabster to v9.3.1",
58
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
59
+ }
60
+ ]
61
+ }
62
+ },
63
+ {
64
+ "date": "Fri, 11 Nov 2022 14:57:47 GMT",
6
65
  "tag": "@fluentui/react-toolbar_v9.0.0-beta.13",
7
66
  "version": "9.0.0-beta.13",
8
67
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,26 @@
1
1
  # Change Log - @fluentui/react-toolbar
2
2
 
3
- This log was last generated on Fri, 11 Nov 2022 14:53:34 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Nov 2022 23:02:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.14)
8
+
9
+ Thu, 17 Nov 2022 23:02:27 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.13..@fluentui/react-toolbar_v9.0.0-beta.14)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-button to v9.1.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
15
+ - Bump @fluentui/react-divider to v9.1.5 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
17
+ - Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
18
+ - Bump @fluentui/react-radio to v9.0.12 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
19
+ - Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
20
+
7
21
  ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.13)
8
22
 
9
- Fri, 11 Nov 2022 14:53:34 GMT
23
+ Fri, 11 Nov 2022 14:57:47 GMT
10
24
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.12..@fluentui/react-toolbar_v9.0.0-beta.13)
11
25
 
12
26
  ### Changes
@@ -1 +1 @@
1
- {"version":3,"file":"Toolbar.js","sourceRoot":"../src/","sources":["Toolbar.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Toolbar/index';\n"]}
1
+ {"version":3,"file":"Toolbar.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/Toolbar.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Toolbar/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarButton.js","sourceRoot":"../src/","sources":["ToolbarButton.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ToolbarButton/index';\n"]}
1
+ {"version":3,"file":"ToolbarButton.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/ToolbarButton.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ToolbarButton/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarDivider.js","sourceRoot":"../src/","sources":["ToolbarDivider.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/ToolbarDivider/index';\n"]}
1
+ {"version":3,"file":"ToolbarDivider.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/ToolbarDivider.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/ToolbarDivider/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarRadioButton.js","sourceRoot":"../src/","sources":["ToolbarRadioButton.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"]}
1
+ {"version":3,"file":"ToolbarRadioButton.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/ToolbarRadioButton.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarToggleButton.js","sourceRoot":"../src/","sources":["ToolbarToggleButton.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"]}
1
+ {"version":3,"file":"ToolbarToggleButton.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/ToolbarToggleButton.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"]}
@@ -0,0 +1,89 @@
1
+ import * as React from 'react';
2
+ import { mount as mountBase } from '@cypress/react';
3
+ import { FluentProvider } from '@fluentui/react-provider';
4
+ import { teamsLightTheme } from '@fluentui/react-theme';
5
+ import { Toolbar } from '../Toolbar';
6
+ import { ToolbarButton } from '../ToolbarButton';
7
+ import { ToolbarToggleButton } from '../ToolbarToggleButton';
8
+ import { ToolbarRadioButton } from '../ToolbarRadioButton';
9
+ const button = "[type='button']";
10
+
11
+ const mount = element => {
12
+ mountBase( /*#__PURE__*/React.createElement(FluentProvider, {
13
+ theme: teamsLightTheme
14
+ }, element));
15
+ };
16
+
17
+ describe('Toolbar', () => {
18
+ describe('Navigation', () => {
19
+ it('should navigate with arrows', () => {
20
+ mount( /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(ToolbarButton, null, "First"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Second"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Third"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Fourth")));
21
+ cy.get(button).eq(0).focus().get(button).eq(0).should('be.focused') // Navigate with right arrow to the right
22
+ .type('{rightArrow}').get(button).eq(1).should('be.focused') // Navigate with down arrow to the right
23
+ .type('{downArrow}').get(button).eq(2).should('be.focused') // Navigate with up arrow to the right
24
+ .type('{upArrow}').get(button).eq(1).should('be.focused') // Navigate with left arrow to the right
25
+ .type('{leftArrow}').get(button).eq(0).should('be.focused');
26
+ });
27
+ it('should have circular navigation', () => {
28
+ mount( /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(ToolbarButton, null, "First"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Second"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Third"), /*#__PURE__*/React.createElement(ToolbarButton, null, "Fourth")));
29
+ cy.get(button).eq(3).focus().get(button).eq(3).should('be.focused') // Navigate from last to first
30
+ .type('{rightArrow}').get(button).eq(0).should('be.focused') // Navigate from first to last
31
+ .type('{leftArrow}').get(button).eq(3).should('be.focused');
32
+ });
33
+ });
34
+ describe('Toggle Button', () => {
35
+ it('should toggle button state on click', () => {
36
+ mount( /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(ToolbarToggleButton, {
37
+ name: "group",
38
+ value: "first"
39
+ }, "First")));
40
+ cy.get(button).eq(0).focus().get(button).eq(0).should('have.attr', 'aria-pressed', 'false').get(button).eq(0).click().get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
41
+ });
42
+ it('should set default checked values', () => {
43
+ mount( /*#__PURE__*/React.createElement(Toolbar, {
44
+ defaultCheckedValues: {
45
+ group: ['first']
46
+ }
47
+ }, /*#__PURE__*/React.createElement(ToolbarToggleButton, {
48
+ name: "group",
49
+ value: "first"
50
+ }, "First")));
51
+ cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
52
+ });
53
+ });
54
+ describe('Radio Button', () => {
55
+ it('should toggle button state on click', () => {
56
+ mount( /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(ToolbarRadioButton, {
57
+ name: "group",
58
+ value: "first"
59
+ }, "First")));
60
+ cy.get(button).eq(0).focus().get(button).eq(0).should('have.attr', 'aria-pressed', 'false').get(button).eq(0).click().get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
61
+ });
62
+ it('should set default checked values', () => {
63
+ mount( /*#__PURE__*/React.createElement(Toolbar, {
64
+ defaultCheckedValues: {
65
+ group: ['first']
66
+ }
67
+ }, /*#__PURE__*/React.createElement(ToolbarRadioButton, {
68
+ name: "group",
69
+ value: "first"
70
+ }, "First")));
71
+ cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
72
+ });
73
+ it('should check new value and uncheck previously checked', () => {
74
+ mount( /*#__PURE__*/React.createElement(Toolbar, {
75
+ defaultCheckedValues: {
76
+ group: ['first']
77
+ }
78
+ }, /*#__PURE__*/React.createElement(ToolbarRadioButton, {
79
+ name: "group",
80
+ value: "first"
81
+ }, "First"), /*#__PURE__*/React.createElement(ToolbarRadioButton, {
82
+ name: "group",
83
+ value: "second"
84
+ }, "Second")));
85
+ cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true').get(button).eq(1).click().get(button).eq(1).should('have.attr', 'aria-pressed', 'true').get(button).eq(0).should('have.attr', 'aria-pressed', 'false');
86
+ });
87
+ });
88
+ });
89
+ //# sourceMappingURL=Toolbar.cy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.cy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAK,IAAI,SAAlB,QAAmC,gBAAnC;AAEA,SAAS,cAAT,QAA+B,0BAA/B;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAEA,SAAS,OAAT,QAAwB,YAAxB;AACA,SAAS,aAAT,QAA8B,kBAA9B;AACA,SAAS,mBAAT,QAAoC,wBAApC;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AAEA,MAAM,MAAM,GAAG,iBAAf;;AAEA,MAAM,KAAK,GAAI,OAAD,IAAyB;EACrC,SAAS,eAAC,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,KAAK,EAAE;EAAR,CAAf,EAAyC,OAAzC,CAAD,CAAT;AACD,CAFD;;AAIA,QAAQ,CAAC,SAAD,EAAY,MAAK;EACvB,QAAQ,CAAC,YAAD,EAAe,MAAK;IAC1B,EAAE,CAAC,6BAAD,EAAgC,MAAK;MACrC,KAAK,eACH,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ,IAAR,eACE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,OAAd,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,QAAd,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,OAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,QAAd,CAJF,CADG,CAAL;MASA,EAAE,CAAC,GAAH,CAAO,MAAP,EACG,EADH,CACM,CADN,EAEG,KAFH,GAGG,GAHH,CAGO,MAHP,EAIG,EAJH,CAIM,CAJN,EAKG,MALH,CAKU,YALV,EAME;MANF,CAOG,IAPH,CAOQ,cAPR,EAQG,GARH,CAQO,MARP,EASG,EATH,CASM,CATN,EAUG,MAVH,CAUU,YAVV,EAWE;MAXF,CAYG,IAZH,CAYQ,aAZR,EAaG,GAbH,CAaO,MAbP,EAcG,EAdH,CAcM,CAdN,EAeG,MAfH,CAeU,YAfV,EAgBE;MAhBF,CAiBG,IAjBH,CAiBQ,WAjBR,EAkBG,GAlBH,CAkBO,MAlBP,EAmBG,EAnBH,CAmBM,CAnBN,EAoBG,MApBH,CAoBU,YApBV,EAqBE;MArBF,CAsBG,IAtBH,CAsBQ,aAtBR,EAuBG,GAvBH,CAuBO,MAvBP,EAwBG,EAxBH,CAwBM,CAxBN,EAyBG,MAzBH,CAyBU,YAzBV;IA0BD,CApCC,CAAF;IAsCA,EAAE,CAAC,iCAAD,EAAoC,MAAK;MACzC,KAAK,eACH,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ,IAAR,eACE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,OAAd,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,QAAd,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,OAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EAAc,QAAd,CAJF,CADG,CAAL;MASA,EAAE,CAAC,GAAH,CAAO,MAAP,EACG,EADH,CACM,CADN,EAEG,KAFH,GAGG,GAHH,CAGO,MAHP,EAIG,EAJH,CAIM,CAJN,EAKG,MALH,CAKU,YALV,EAME;MANF,CAOG,IAPH,CAOQ,cAPR,EAQG,GARH,CAQO,MARP,EASG,EATH,CASM,CATN,EAUG,MAVH,CAUU,YAVV,EAWE;MAXF,CAYG,IAZH,CAYQ,aAZR,EAaG,GAbH,CAaO,MAbP,EAcG,EAdH,CAcM,CAdN,EAeG,MAfH,CAeU,YAfV;IAgBD,CA1BC,CAAF;EA2BD,CAlEO,CAAR;EAoEA,QAAQ,CAAC,eAAD,EAAkB,MAAK;IAC7B,EAAE,CAAC,qCAAD,EAAwC,MAAK;MAC7C,KAAK,eACH,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ,IAAR,eACE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB;QAAC,IAAI,EAAC,OAAN;QAAc,KAAK,EAAC;MAApB,CAApB,EAA+C,OAA/C,CADF,CADG,CAAL;MAQA,EAAE,CAAC,GAAH,CAAO,MAAP,EACG,EADH,CACM,CADN,EAEG,KAFH,GAGG,GAHH,CAGO,MAHP,EAIG,EAJH,CAIM,CAJN,EAKG,MALH,CAKU,WALV,EAKuB,cALvB,EAKuC,OALvC,EAMG,GANH,CAMO,MANP,EAOG,EAPH,CAOM,CAPN,EAQG,KARH,GASG,GATH,CASO,MATP,EAUG,EAVH,CAUM,CAVN,EAWG,MAXH,CAWU,WAXV,EAWuB,cAXvB,EAWuC,MAXvC;IAYD,CArBC,CAAF;IAuBA,EAAE,CAAC,mCAAD,EAAsC,MAAK;MAC3C,KAAK,eACH,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;QACN,oBAAoB,EAAE;UACpB,KAAK,EAAE,CAAC,OAAD;QADa;MADhB,CAAR,eAKE,KAAA,CAAA,aAAA,CAAC,mBAAD,EAAoB;QAAC,IAAI,EAAC,OAAN;QAAc,KAAK,EAAC;MAApB,CAApB,EAA+C,OAA/C,CALF,CADG,CAAL;MAYA,EAAE,CAAC,GAAH,CAAO,MAAP,EAAe,EAAf,CAAkB,CAAlB,EAAqB,MAArB,CAA4B,WAA5B,EAAyC,cAAzC,EAAyD,MAAzD;IACD,CAdC,CAAF;EAeD,CAvCO,CAAR;EAyCA,QAAQ,CAAC,cAAD,EAAiB,MAAK;IAC5B,EAAE,CAAC,qCAAD,EAAwC,MAAK;MAC7C,KAAK,eACH,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ,IAAR,eACE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB;QAAC,IAAI,EAAC,OAAN;QAAc,KAAK,EAAC;MAApB,CAAnB,EAA8C,OAA9C,CADF,CADG,CAAL;MAQA,EAAE,CAAC,GAAH,CAAO,MAAP,EACG,EADH,CACM,CADN,EAEG,KAFH,GAGG,GAHH,CAGO,MAHP,EAIG,EAJH,CAIM,CAJN,EAKG,MALH,CAKU,WALV,EAKuB,cALvB,EAKuC,OALvC,EAMG,GANH,CAMO,MANP,EAOG,EAPH,CAOM,CAPN,EAQG,KARH,GASG,GATH,CASO,MATP,EAUG,EAVH,CAUM,CAVN,EAWG,MAXH,CAWU,WAXV,EAWuB,cAXvB,EAWuC,MAXvC;IAYD,CArBC,CAAF;IAuBA,EAAE,CAAC,mCAAD,EAAsC,MAAK;MAC3C,KAAK,eACH,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;QACN,oBAAoB,EAAE;UACpB,KAAK,EAAE,CAAC,OAAD;QADa;MADhB,CAAR,eAKE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB;QAAC,IAAI,EAAC,OAAN;QAAc,KAAK,EAAC;MAApB,CAAnB,EAA8C,OAA9C,CALF,CADG,CAAL;MAYA,EAAE,CAAC,GAAH,CAAO,MAAP,EAAe,EAAf,CAAkB,CAAlB,EAAqB,MAArB,CAA4B,WAA5B,EAAyC,cAAzC,EAAyD,MAAzD;IACD,CAdC,CAAF;IAgBA,EAAE,CAAC,uDAAD,EAA0D,MAAK;MAC/D,KAAK,eACH,KAAA,CAAA,aAAA,CAAC,OAAD,EAAQ;QACN,oBAAoB,EAAE;UACpB,KAAK,EAAE,CAAC,OAAD;QADa;MADhB,CAAR,eAKE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB;QAAC,IAAI,EAAC,OAAN;QAAc,KAAK,EAAC;MAApB,CAAnB,EAA8C,OAA9C,CALF,eAQE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB;QAAC,IAAI,EAAC,OAAN;QAAc,KAAK,EAAC;MAApB,CAAnB,EAA+C,QAA/C,CARF,CADG,CAAL;MAeA,EAAE,CAAC,GAAH,CAAO,MAAP,EACG,EADH,CACM,CADN,EAEG,MAFH,CAEU,WAFV,EAEuB,cAFvB,EAEuC,MAFvC,EAGG,GAHH,CAGO,MAHP,EAIG,EAJH,CAIM,CAJN,EAKG,KALH,GAMG,GANH,CAMO,MANP,EAOG,EAPH,CAOM,CAPN,EAQG,MARH,CAQU,WARV,EAQuB,cARvB,EAQuC,MARvC,EASG,GATH,CASO,MATP,EAUG,EAVH,CAUM,CAVN,EAWG,MAXH,CAWU,WAXV,EAWuB,cAXvB,EAWuC,OAXvC;IAYD,CA5BC,CAAF;EA6BD,CArEO,CAAR;AAsED,CApLO,CAAR","sourcesContent":["import * as React from 'react';\nimport { mount as mountBase } from '@cypress/react';\n\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { teamsLightTheme } from '@fluentui/react-theme';\n\nimport { Toolbar } from '../Toolbar';\nimport { ToolbarButton } from '../ToolbarButton';\nimport { ToolbarToggleButton } from '../ToolbarToggleButton';\nimport { ToolbarRadioButton } from '../ToolbarRadioButton';\n\nconst button = \"[type='button']\";\n\nconst mount = (element: JSX.Element) => {\n mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);\n};\n\ndescribe('Toolbar', () => {\n describe('Navigation', () => {\n it('should navigate with arrows', () => {\n mount(\n <Toolbar>\n <ToolbarButton>First</ToolbarButton>\n <ToolbarButton>Second</ToolbarButton>\n <ToolbarButton>Third</ToolbarButton>\n <ToolbarButton>Fourth</ToolbarButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .focus()\n .get(button)\n .eq(0)\n .should('be.focused')\n // Navigate with right arrow to the right\n .type('{rightArrow}')\n .get(button)\n .eq(1)\n .should('be.focused')\n // Navigate with down arrow to the right\n .type('{downArrow}')\n .get(button)\n .eq(2)\n .should('be.focused')\n // Navigate with up arrow to the right\n .type('{upArrow}')\n .get(button)\n .eq(1)\n .should('be.focused')\n // Navigate with left arrow to the right\n .type('{leftArrow}')\n .get(button)\n .eq(0)\n .should('be.focused');\n });\n\n it('should have circular navigation', () => {\n mount(\n <Toolbar>\n <ToolbarButton>First</ToolbarButton>\n <ToolbarButton>Second</ToolbarButton>\n <ToolbarButton>Third</ToolbarButton>\n <ToolbarButton>Fourth</ToolbarButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(3)\n .focus()\n .get(button)\n .eq(3)\n .should('be.focused')\n // Navigate from last to first\n .type('{rightArrow}')\n .get(button)\n .eq(0)\n .should('be.focused')\n // Navigate from first to last\n .type('{leftArrow}')\n .get(button)\n .eq(3)\n .should('be.focused');\n });\n });\n\n describe('Toggle Button', () => {\n it('should toggle button state on click', () => {\n mount(\n <Toolbar>\n <ToolbarToggleButton name=\"group\" value=\"first\">\n First\n </ToolbarToggleButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .focus()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'false')\n .get(button)\n .eq(0)\n .click()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'true');\n });\n\n it('should set default checked values', () => {\n mount(\n <Toolbar\n defaultCheckedValues={{\n group: ['first'],\n }}\n >\n <ToolbarToggleButton name=\"group\" value=\"first\">\n First\n </ToolbarToggleButton>\n </Toolbar>,\n );\n\n cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');\n });\n });\n\n describe('Radio Button', () => {\n it('should toggle button state on click', () => {\n mount(\n <Toolbar>\n <ToolbarRadioButton name=\"group\" value=\"first\">\n First\n </ToolbarRadioButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .focus()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'false')\n .get(button)\n .eq(0)\n .click()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'true');\n });\n\n it('should set default checked values', () => {\n mount(\n <Toolbar\n defaultCheckedValues={{\n group: ['first'],\n }}\n >\n <ToolbarRadioButton name=\"group\" value=\"first\">\n First\n </ToolbarRadioButton>\n </Toolbar>,\n );\n\n cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');\n });\n\n it('should check new value and uncheck previously checked', () => {\n mount(\n <Toolbar\n defaultCheckedValues={{\n group: ['first'],\n }}\n >\n <ToolbarRadioButton name=\"group\" value=\"first\">\n First\n </ToolbarRadioButton>\n <ToolbarRadioButton name=\"group\" value=\"second\">\n Second\n </ToolbarRadioButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'true')\n .get(button)\n .eq(1)\n .click()\n .get(button)\n .eq(1)\n .should('have.attr', 'aria-pressed', 'true')\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'false');\n });\n });\n});\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAGA,SAAS,gCAAT,QAAiD,2BAAjD;AAEA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EACA,MAAM,aAAa,GAAG,gCAAgC,CAAC,KAAD,CAAtD;EACA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,EAAQ,aAAR,CAA7B;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n const state = useToolbar_unstable(props, ref);\n const contextValues = useToolbarContextValues_unstable(state);\n useToolbarStyles_unstable(state);\n return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAGA,SAAS,gCAAT,QAAiD,2BAAjD;AAEA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EACA,MAAM,aAAa,GAAG,gCAAgC,CAAC,KAAD,CAAtD;EACA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,EAAQ,aAAR,CAA7B;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n const state = useToolbar_unstable(props, ref);\n const contextValues = useToolbarContextValues_unstable(state);\n useToolbarStyles_unstable(state);\n return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n /**\n * Toolbar can have small or medium size\n *\n * @default medium\n */\n size?: 'small' | 'medium';\n\n /**\n * Toolbar can be vertical styled\n * @default false\n */\n vertical?: boolean;\n\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /*\n * Toggles the state of a ToggleButton item\n */\n handleToggleButton: ToggableHandler;\n /*\n * Toggles the state of a ToggleButton item\n */\n handleRadio: ToggableHandler;\n };\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n handleToggleButton?: ToggableHandler;\n handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &\n Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked?: boolean,\n) => void;\n"]}
1
+ {"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n /**\n * Toolbar can have small or medium size\n *\n * @default medium\n */\n size?: 'small' | 'medium';\n\n /**\n * Toolbar can be vertical styled\n * @default false\n */\n vertical?: boolean;\n\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n /*\n * Toggles the state of a ToggleButton item\n */\n handleToggleButton: ToggableHandler;\n /*\n * Toggles the state of a ToggleButton item\n */\n handleRadio: ToggableHandler;\n };\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n handleToggleButton?: ToggableHandler;\n handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &\n Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n e: React.MouseEvent | React.KeyboardEvent,\n name: string,\n value: string,\n checked?: boolean,\n) => void;\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":"AAAA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE;AAIA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAkC,SAAlC,CAApC;AAEP,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;AAQA,OAAO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,kBAAkB,CAAC,cAAD,EAAiB,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAA/D,CADb","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n handleRadio: () => null,\n vertical: false,\n checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":"AAAA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE;AAIA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAkC,SAAlC,CAApC;AAEP,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;AAQA,OAAO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,kBAAkB,CAAC,cAAD,EAAiB,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAA/D,CADb","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n handleRadio: () => null,\n vertical: false,\n checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,cAAT,QAA+B,kBAA/B;AAEA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n </ToolbarContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,cAAT,QAA+B,kBAA/B;AAEA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n </ToolbarContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,gCAAV,CAA2C,KAA3C,EAA8D;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n vertical,\n handleToggleButton,\n handleRadio,\n checkedValues,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,gCAAV,CAA2C,KAA3C,EAA8D;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n vertical,\n handleToggleButton,\n handleRadio,\n checkedValues,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,IAAI,MAAM,CAAC,QAHc,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAXM","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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 ...shorthands.padding('4px', '8px', '4px', '8px'),\n ...shorthands.gap('8px'),\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 useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n const styles = useStyles();\n const { vertical } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,IAAI,MAAM,CAAC,QAHc,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAXM","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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 ...shorthands.padding('4px', '8px', '4px', '8px'),\n ...shorthands.gap('8px'),\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 useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n const styles = useStyles();\n const { vertical } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,qBAAT,EAAgC,wBAAhC,EAA0D,kBAA1D,QAAoF,wBAApF;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EACA,MAAM,KAAK,GAAG,kBAAkB,CAAC;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAD,EAAgD,GAAhD,CAAhC;EACA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,CAA5B,CAJoG,CAKpG;AACD,CANqE,CAA/D;AAQP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useButton_unstable({ size, appearance: 'transparent', ...props }, ref);\n useButtonStyles_unstable(state);\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,qBAAT,EAAgC,wBAAhC,EAA0D,kBAA1D,QAAoF,wBAApF;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EACA,MAAM,KAAK,GAAG,kBAAkB,CAAC;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAD,EAAgD,GAAhD,CAAhC;EACA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,CAA5B,CAJoG,CAKpG;AACD,CANqE,CAA/D;AAQP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useButton_unstable({ size, appearance: 'transparent', ...props }, ref);\n useButtonStyles_unstable(state);\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarButton/ToolbarButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n appearance?: 'primary' | 'subtle';\n };\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> & ButtonState;\n"]}
1
+ {"version":3,"file":"ToolbarButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n appearance?: 'primary' | 'subtle';\n };\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> & ButtonState;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToolbarButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAGA,SAAS,sBAAT,QAAuC,yBAAvC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAEA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EACA,gCAAgC,CAAC,KAAD,CAAhC;EACA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CAJuE,CAAjE;AAMP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = useToolbarDivider_unstable(props, ref);\n useToolbarDividerStyles_unstable(state);\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAGA,SAAS,sBAAT,QAAuC,yBAAvC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAEA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EACA,gCAAgC,CAAC,KAAD,CAAhC;EACA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CAJuE,CAAjE;AAMP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = useToolbarDivider_unstable(props, ref);\n useToolbarDividerStyles_unstable(state);\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarDivider.types.js","sourceRoot":"../src/","sources":["components/ToolbarDivider/ToolbarDivider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from '@fluentui/react-divider';\n\n/**\n * ToolbarDivider Props\n */\nexport type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * A divider can be horizontal or vertical (default).\n *\n * @default true\n */\n vertical?: boolean;\n};\n\n/**\n * State used in rendering ToolbarDivider\n */\nexport type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;\n"]}
1
+ {"version":3,"file":"ToolbarDivider.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from '@fluentui/react-divider';\n\n/**\n * ToolbarDivider Props\n */\nexport type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * A divider can be horizontal or vertical (default).\n *\n * @default true\n */\n vertical?: boolean;\n};\n\n/**\n * State used in rendering ToolbarDivider\n */\nexport type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToolbarDivider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":"AAEA,SAAS,mBAAT,QAAoC,yBAApC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,QAAZ,CAA3C;EACA,OAAO,mBAAmB,CAAC;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAAD,EAAoC,GAApC,CAA1B;AACD,CANM","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n props: ToolbarDividerProps,\n ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":"AAEA,SAAS,mBAAT,QAAoC,yBAApC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,QAAZ,CAA3C;EACA,OAAO,mBAAmB,CAAC;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAAD,EAAoC,GAApC,CAA1B;AACD,CANM","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n props: ToolbarDividerProps,\n ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,yBAAT,QAA0C,yBAA1C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,yBAAyB,CAAC,KAAD,CAAzB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,KAAK,CAAC,IAAN,CAAW,SADsB,EAEjC,oBAAoB,CAAC,IAFY,EAGjC,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHD,CAAnC;EAKA,OAAO,KAAP;AACD,CAVM","sourcesContent":["import { 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 },\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 state.root.className = mergeClasses(\n state.root.className,\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n );\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,yBAAT,QAA0C,yBAA1C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,yBAAyB,CAAC,KAAD,CAAzB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,KAAK,CAAC,IAAN,CAAW,SADsB,EAEjC,oBAAoB,CAAC,IAFY,EAGjC,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHD,CAAnC;EAKA,OAAO,KAAP;AACD,CAVM","sourcesContent":["import { 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 },\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 state.root.className = mergeClasses(\n state.root.className,\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n );\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oCAAT,QAAqD,+BAArD;AAEA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,gBAAiD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,8BAA8B,CAAC,KAAD,EAAQ,GAAR,CAA5C;EAEA,oCAAoC,CAAC,KAAD,CAApC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CAL+E,CAAzE;AAOP,kBAAkB,CAAC,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarRadioButton_unstable(props, ref);\n\n useToolbarRadioButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,oCAAT,QAAqD,+BAArD;AAEA;;AAEG;;AACH,OAAO,MAAM,kBAAkB,gBAAiD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,8BAA8B,CAAC,KAAD,EAAQ,GAAR,CAA5C;EAEA,oCAAoC,CAAC,KAAD,CAApC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CAL+E,CAAzE;AAOP,kBAAkB,CAAC,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarRadioButton_unstable(props, ref);\n\n useToolbarRadioButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarRadioButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n appearance?: 'primary' | 'subtle';\n name: string;\n value: string;\n };\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n"]}
1
+ {"version":3,"file":"ToolbarRadioButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n appearance?: 'primary' | 'subtle';\n name: string;\n value: string;\n };\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToolbarRadioButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,WAAZ,CAA9C;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,gBAAgB,CACnC,CAAD,IAAyG;IACvG,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAJmC,CAAtC;EAOA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } 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 handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarRadioButtonState = {\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\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,WAAZ,CAA9C;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,gBAAgB,CACnC,CAAD,IAAyG;IACvG,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAJmC,CAAtC;EAOA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } 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 handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarRadioButtonState = {\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\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,8BAAT,QAA+C,wBAA/C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,8BAA8B,CAAC,KAAD,CAA9B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAA3D,CAAnC;AACD,CALM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,8BAAT,QAA+C,wBAA/C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACH,OAAO,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,8BAA8B,CAAC,KAAD,CAA9B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAA3D,CAAnC;AACD,CALM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,qCAAT,QAAsD,gCAAtD;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,qCAAqC,CAAC,KAAD,CAArC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarToggleButton_unstable(props, ref);\n\n useToolbarToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,2BAAT,QAA4C,wBAA5C;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,qCAAT,QAAsD,gCAAtD;AAEA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,gBAAkD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,+BAA+B,CAAC,KAAD,EAAQ,GAAR,CAA7C;EAEA,qCAAqC,CAAC,KAAD,CAArC;EACA,OAAO,2BAA2B,CAAC,KAAD,CAAlC;AACD,CALiF,CAA3E;AAOP,mBAAmB,CAAC,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarToggleButton_unstable(props, ref);\n\n useToolbarToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n appearance?: 'primary' | 'subtle';\n name: string;\n value: string;\n };\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n"]}
1
+ {"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n appearance?: 'primary' | 'subtle';\n name: string;\n value: string;\n };\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,kBAAZ,CAArD;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,kBAAZ,CAArD;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,8BAAT,QAA+C,wBAA/C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACH,OAAO,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,8BAA8B,CAAC,KAAD,CAA9B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAA3D,CAAnC;AACD,CALM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,8BAAT,QAA+C,wBAA/C;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACH,OAAO,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,8BAA8B,CAAC,KAAD,CAA9B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAA3D,CAAnC;AACD,CALM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,sBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP;AAQA,SAAS,aAAT,QAA8B,iBAA9B;AAEA,SAAS,cAAT,EAAyB,gCAAzB,QAAiE,kBAAjE;AAEA,SAAS,mBAAT,QAAoC,uBAApC;AAEA,SAAS,kBAAT,QAAmC,sBAAnC","sourcesContent":["export {\n Toolbar,\n renderToolbar_unstable,\n toolbarClassNames,\n useToolbarStyles_unstable,\n useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,sBAFF,EAGE,iBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP;AAQA,SAAS,aAAT,QAA8B,iBAA9B;AAEA,SAAS,cAAT,EAAyB,gCAAzB,QAAiE,kBAAjE;AAEA,SAAS,mBAAT,QAAoC,uBAApC;AAEA,SAAS,kBAAT,QAAmC,sBAAnC","sourcesContent":["export {\n Toolbar,\n renderToolbar_unstable,\n toolbarClassNames,\n useToolbarStyles_unstable,\n useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Toolbar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Toolbar/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/Toolbar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Toolbar/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["ToolbarButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarButton/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarButton/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["ToolbarDivider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarDivider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["ToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["ToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/ToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,103 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const React = /*#__PURE__*/require("react");
8
+
9
+ const react_1 = /*#__PURE__*/require("@cypress/react");
10
+
11
+ const react_provider_1 = /*#__PURE__*/require("@fluentui/react-provider");
12
+
13
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
14
+
15
+ const Toolbar_1 = /*#__PURE__*/require("../Toolbar");
16
+
17
+ const ToolbarButton_1 = /*#__PURE__*/require("../ToolbarButton");
18
+
19
+ const ToolbarToggleButton_1 = /*#__PURE__*/require("../ToolbarToggleButton");
20
+
21
+ const ToolbarRadioButton_1 = /*#__PURE__*/require("../ToolbarRadioButton");
22
+
23
+ const button = "[type='button']";
24
+
25
+ const mount = element => {
26
+ react_1.mount(React.createElement(react_provider_1.FluentProvider, {
27
+ theme: react_theme_1.teamsLightTheme
28
+ }, element));
29
+ };
30
+
31
+ describe('Toolbar', () => {
32
+ describe('Navigation', () => {
33
+ it('should navigate with arrows', () => {
34
+ mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarButton_1.ToolbarButton, null, "First"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Second"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Third"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Fourth")));
35
+ cy.get(button).eq(0).focus().get(button).eq(0).should('be.focused') // Navigate with right arrow to the right
36
+ .type('{rightArrow}').get(button).eq(1).should('be.focused') // Navigate with down arrow to the right
37
+ .type('{downArrow}').get(button).eq(2).should('be.focused') // Navigate with up arrow to the right
38
+ .type('{upArrow}').get(button).eq(1).should('be.focused') // Navigate with left arrow to the right
39
+ .type('{leftArrow}').get(button).eq(0).should('be.focused');
40
+ });
41
+ it('should have circular navigation', () => {
42
+ mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarButton_1.ToolbarButton, null, "First"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Second"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Third"), React.createElement(ToolbarButton_1.ToolbarButton, null, "Fourth")));
43
+ cy.get(button).eq(3).focus().get(button).eq(3).should('be.focused') // Navigate from last to first
44
+ .type('{rightArrow}').get(button).eq(0).should('be.focused') // Navigate from first to last
45
+ .type('{leftArrow}').get(button).eq(3).should('be.focused');
46
+ });
47
+ });
48
+ describe('Toggle Button', () => {
49
+ it('should toggle button state on click', () => {
50
+ mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarToggleButton_1.ToolbarToggleButton, {
51
+ name: "group",
52
+ value: "first"
53
+ }, "First")));
54
+ cy.get(button).eq(0).focus().get(button).eq(0).should('have.attr', 'aria-pressed', 'false').get(button).eq(0).click().get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
55
+ });
56
+ it('should set default checked values', () => {
57
+ mount(React.createElement(Toolbar_1.Toolbar, {
58
+ defaultCheckedValues: {
59
+ group: ['first']
60
+ }
61
+ }, React.createElement(ToolbarToggleButton_1.ToolbarToggleButton, {
62
+ name: "group",
63
+ value: "first"
64
+ }, "First")));
65
+ cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
66
+ });
67
+ });
68
+ describe('Radio Button', () => {
69
+ it('should toggle button state on click', () => {
70
+ mount(React.createElement(Toolbar_1.Toolbar, null, React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
71
+ name: "group",
72
+ value: "first"
73
+ }, "First")));
74
+ cy.get(button).eq(0).focus().get(button).eq(0).should('have.attr', 'aria-pressed', 'false').get(button).eq(0).click().get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
75
+ });
76
+ it('should set default checked values', () => {
77
+ mount(React.createElement(Toolbar_1.Toolbar, {
78
+ defaultCheckedValues: {
79
+ group: ['first']
80
+ }
81
+ }, React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
82
+ name: "group",
83
+ value: "first"
84
+ }, "First")));
85
+ cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
86
+ });
87
+ it('should check new value and uncheck previously checked', () => {
88
+ mount(React.createElement(Toolbar_1.Toolbar, {
89
+ defaultCheckedValues: {
90
+ group: ['first']
91
+ }
92
+ }, React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
93
+ name: "group",
94
+ value: "first"
95
+ }, "First"), React.createElement(ToolbarRadioButton_1.ToolbarRadioButton, {
96
+ name: "group",
97
+ value: "second"
98
+ }, "Second")));
99
+ cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true').get(button).eq(1).click().get(button).eq(1).should('have.attr', 'aria-pressed', 'true').get(button).eq(0).should('have.attr', 'aria-pressed', 'false');
100
+ });
101
+ });
102
+ });
103
+ //# sourceMappingURL=Toolbar.cy.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.cy.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mount as mountBase } from '@cypress/react';\n\nimport { FluentProvider } from '@fluentui/react-provider';\nimport { teamsLightTheme } from '@fluentui/react-theme';\n\nimport { Toolbar } from '../Toolbar';\nimport { ToolbarButton } from '../ToolbarButton';\nimport { ToolbarToggleButton } from '../ToolbarToggleButton';\nimport { ToolbarRadioButton } from '../ToolbarRadioButton';\n\nconst button = \"[type='button']\";\n\nconst mount = (element: JSX.Element) => {\n mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>);\n};\n\ndescribe('Toolbar', () => {\n describe('Navigation', () => {\n it('should navigate with arrows', () => {\n mount(\n <Toolbar>\n <ToolbarButton>First</ToolbarButton>\n <ToolbarButton>Second</ToolbarButton>\n <ToolbarButton>Third</ToolbarButton>\n <ToolbarButton>Fourth</ToolbarButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .focus()\n .get(button)\n .eq(0)\n .should('be.focused')\n // Navigate with right arrow to the right\n .type('{rightArrow}')\n .get(button)\n .eq(1)\n .should('be.focused')\n // Navigate with down arrow to the right\n .type('{downArrow}')\n .get(button)\n .eq(2)\n .should('be.focused')\n // Navigate with up arrow to the right\n .type('{upArrow}')\n .get(button)\n .eq(1)\n .should('be.focused')\n // Navigate with left arrow to the right\n .type('{leftArrow}')\n .get(button)\n .eq(0)\n .should('be.focused');\n });\n\n it('should have circular navigation', () => {\n mount(\n <Toolbar>\n <ToolbarButton>First</ToolbarButton>\n <ToolbarButton>Second</ToolbarButton>\n <ToolbarButton>Third</ToolbarButton>\n <ToolbarButton>Fourth</ToolbarButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(3)\n .focus()\n .get(button)\n .eq(3)\n .should('be.focused')\n // Navigate from last to first\n .type('{rightArrow}')\n .get(button)\n .eq(0)\n .should('be.focused')\n // Navigate from first to last\n .type('{leftArrow}')\n .get(button)\n .eq(3)\n .should('be.focused');\n });\n });\n\n describe('Toggle Button', () => {\n it('should toggle button state on click', () => {\n mount(\n <Toolbar>\n <ToolbarToggleButton name=\"group\" value=\"first\">\n First\n </ToolbarToggleButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .focus()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'false')\n .get(button)\n .eq(0)\n .click()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'true');\n });\n\n it('should set default checked values', () => {\n mount(\n <Toolbar\n defaultCheckedValues={{\n group: ['first'],\n }}\n >\n <ToolbarToggleButton name=\"group\" value=\"first\">\n First\n </ToolbarToggleButton>\n </Toolbar>,\n );\n\n cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');\n });\n });\n\n describe('Radio Button', () => {\n it('should toggle button state on click', () => {\n mount(\n <Toolbar>\n <ToolbarRadioButton name=\"group\" value=\"first\">\n First\n </ToolbarRadioButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .focus()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'false')\n .get(button)\n .eq(0)\n .click()\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'true');\n });\n\n it('should set default checked values', () => {\n mount(\n <Toolbar\n defaultCheckedValues={{\n group: ['first'],\n }}\n >\n <ToolbarRadioButton name=\"group\" value=\"first\">\n First\n </ToolbarRadioButton>\n </Toolbar>,\n );\n\n cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');\n });\n\n it('should check new value and uncheck previously checked', () => {\n mount(\n <Toolbar\n defaultCheckedValues={{\n group: ['first'],\n }}\n >\n <ToolbarRadioButton name=\"group\" value=\"first\">\n First\n </ToolbarRadioButton>\n <ToolbarRadioButton name=\"group\" value=\"second\">\n Second\n </ToolbarRadioButton>\n </Toolbar>,\n );\n\n cy.get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'true')\n .get(button)\n .eq(1)\n .click()\n .get(button)\n .eq(1)\n .should('have.attr', 'aria-pressed', 'true')\n .get(button)\n .eq(0)\n .should('have.attr', 'aria-pressed', 'false');\n });\n });\n});\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,gCAAA,CAAiC,KAAjC,CAAtB;EACA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n const state = useToolbar_unstable(props, ref);\n const contextValues = useToolbarContextValues_unstable(state);\n useToolbarStyles_unstable(state);\n return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EACA,MAAM,aAAa,GAAG,yBAAA,CAAA,gCAAA,CAAiC,KAAjC,CAAtB;EACA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,aAA9B,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n const state = useToolbar_unstable(props, ref);\n const contextValues = useToolbarContextValues_unstable(state);\n useToolbarStyles_unstable(state);\n return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;;AAQO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n handleRadio: () => null,\n vertical: false,\n checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,WAAW,EAAE,MAAM,IAHmC;EAItD,QAAQ,EAAE,KAJ4C;EAKtD,aAAa,EAAE;AALuC,CAAxD;;AAQO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n handleRadio: () => null,\n vertical: false,\n checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n </ToolbarContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,SAAS,CAAC,IAAV,CAAe,QAAhD,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n const { slots, slotProps } = getSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n </ToolbarContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...arrowNavigationProps,\n ...props,\n }),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD;;AAZD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n vertical,\n handleToggleButton,\n handleRadio,\n checkedValues,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC,aAAtC;IAAqD;EAArD,IAAqE,KAA3E,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC,WAJmC;IAKnC;EALmC,CAArC;EAQA,OAAO;IAAE;EAAF,CAAP;AACD;;AAZD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues, handleRadio } = state;\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const toolbar: ToolbarContextValue = {\n size,\n vertical,\n handleToggleButton,\n handleRadio,\n checkedValues,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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 ...shorthands.padding('4px', '8px', '4px', '8px'),\n ...shorthands.gap('8px'),\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 useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n const styles = useStyles();\n const { vertical } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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 ...shorthands.padding('4px', '8px', '4px', '8px'),\n ...shorthands.gap('8px'),\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 useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n const styles = useStyles();\n const { vertical } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAnB,EAAkE,GAAlE,CAAd;EACA,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAJoG,CAKpG;AACD,CANqE,CAAzD;AAQb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useButton_unstable({ size, appearance: 'transparent', ...props }, ref);\n useButtonStyles_unstable(state);\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAnB,EAAkE,GAAlE,CAAd;EACA,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAJoG,CAKpG;AACD,CANqE,CAAzD;AAQb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useButton_unstable({ size, appearance: 'transparent', ...props }, ref);\n useButtonStyles_unstable(state);\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CAJuE,CAA3D;AAMb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = useToolbarDivider_unstable(props, ref);\n useToolbarDividerStyles_unstable(state);\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CAJuE,CAA3D;AAMb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/**\n * ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = useToolbarDivider_unstable(props, ref);\n useToolbarDividerStyles_unstable(state);\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarDivider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,QAAtC,CAAjB;EACA,OAAO,eAAA,CAAA,mBAAA,CAAoB;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAApB,EAAuD,GAAvD,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n props: ToolbarDividerProps,\n ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,QAAtC,CAAjB;EACA,OAAO,eAAA,CAAA,mBAAA,CAAoB;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAApB,EAAuD,GAAvD,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n props: ToolbarDividerProps,\n ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,eAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EAErB,oBAAoB,CAAC,IAFA,EAGrB,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHb,CAAvB;EAKA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { 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 },\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 state.root.className = mergeClasses(\n state.root.className,\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n );\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,eAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EAErB,oBAAoB,CAAC,IAFA,EAGrB,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHb,CAAvB;EAKA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { 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 },\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 state.root.className = mergeClasses(\n state.root.className,\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n );\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAmE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,EAAsC,GAAtC,CAAd;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CAL+E,CAAnE;AAOb,OAAA,CAAA,kBAAA,CAAmB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarRadioButton_unstable(props, ref);\n\n useToolbarRadioButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/ToolbarRadioButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,6BAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,kBAAA,gBAAmE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9G,MAAM,KAAK,GAAG,uBAAA,CAAA,8BAAA,CAA+B,KAA/B,EAAsC,GAAtC,CAAd;EAEA,6BAAA,CAAA,oCAAA,CAAqC,KAArC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CAL+E,CAAnE;AAOb,OAAA,CAAA,kBAAA,CAAmB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioButtonProps } from './ToolbarRadioButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nimport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles';\n\n/**\n * ToolbarRadioButton component\n */\nexport const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarRadioButton_unstable(props, ref);\n\n useToolbarRadioButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioButtonProps>;\n\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarRadioButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarRadioButton';\nexport * from './ToolbarRadioButton.types';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,WAAtC,CAApB;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CACnB,CAAD,IAAyG;IACvG,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAJmB,CAAtB;EAOA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } 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 handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarRadioButtonState = {\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\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,WAAW,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,WAAtC,CAApB;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA4B,EACrC,GAAG,iBADkC;IAErC,IAAI,EAAE,KAAK,CAAC,IAFyB;IAGrC,KAAK,EAAE,KAAK,CAAC;EAHwB,CAAvC;EAMA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CACnB,CAAD,IAAyG;IACvG,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAJmB,CAAtB;EAOA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } 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 handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarRadioButtonState = {\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\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,oCAAoC,GAAI,KAAD,IAAmC;EACrF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,oCAAA,GAAoC,oCAApC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarRadioButton slots based on the state\n */\nexport const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarToggleButton_unstable(props, ref);\n\n useToolbarToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToolbarToggleButton_unstable(props, ref);\n\n useToolbarToggleButtonStyles_unstable(state);\n return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarToggleButton';\nexport * from './ToolbarToggleButton.types';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,kBAAtC,CAA3B;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,kBAAtC,CAA3B;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,qCAAA,GAAqC,qCAArC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,qCAAA,GAAqC,qCAArC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n selected: {\n color: tokens.colorBrandForeground1,\n },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n useToggleButtonStyles_unstable(state);\n const toggleButtonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAGF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;;AAET,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AAAgB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;;AAEzB,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,qBAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAET,IAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,oBAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA","sourcesContent":["export {\n Toolbar,\n renderToolbar_unstable,\n toolbarClassNames,\n useToolbarStyles_unstable,\n useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-toolbar/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAGF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;;AAET,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AAAgB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;;AAEzB,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,qBAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;;AAET,IAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,oBAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA","sourcesContent":["export {\n Toolbar,\n renderToolbar_unstable,\n toolbarClassNames,\n useToolbarStyles_unstable,\n useToolbar_unstable,\n} from './Toolbar';\nexport type { ToolbarContextValue, ToolbarContextValues, ToolbarProps, ToolbarSlots, ToolbarState } from './Toolbar';\nexport { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton';\nexport { ToolbarDivider, useToolbarDividerStyles_unstable } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider';\nexport { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton';\nexport { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-toolbar",
3
- "version": "9.0.0-beta.13",
3
+ "version": "9.0.0-beta.14",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,10 +21,9 @@
21
21
  "lint": "just-scripts lint",
22
22
  "start": "yarn storybook",
23
23
  "test": "jest --passWithNoTests",
24
- "docs": "api-extractor run --config=config/api-extractor.local.json --local",
25
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-toolbar/src && yarn docs",
26
24
  "storybook": "start-storybook",
27
- "type-check": "tsc -b tsconfig.json"
25
+ "type-check": "tsc -b tsconfig.json",
26
+ "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
28
27
  },
29
28
  "devDependencies": {
30
29
  "@fluentui/eslint-plugin": "*",
@@ -33,13 +32,13 @@
33
32
  "@fluentui/scripts": "^1.0.0"
34
33
  },
35
34
  "dependencies": {
36
- "@fluentui/react-button": "^9.1.8",
37
- "@fluentui/react-divider": "^9.1.4",
35
+ "@fluentui/react-button": "^9.1.9",
36
+ "@fluentui/react-divider": "^9.1.5",
38
37
  "@fluentui/react-theme": "^9.1.2",
39
- "@fluentui/react-utilities": "^9.2.1",
40
- "@fluentui/react-context-selector": "^9.1.1",
41
- "@fluentui/react-radio": "^9.0.11",
42
- "@fluentui/react-tabster": "^9.3.0",
38
+ "@fluentui/react-utilities": "^9.2.2",
39
+ "@fluentui/react-context-selector": "^9.1.2",
40
+ "@fluentui/react-radio": "^9.0.12",
41
+ "@fluentui/react-tabster": "^9.3.1",
43
42
  "@griffel/react": "^1.4.2",
44
43
  "tslib": "^2.1.0"
45
44
  },