npm - @fluentui/react-toolbar - Versions diffs - 9.0.0-beta.13 → 9.0.0-beta.15 - Mend

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

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 (71) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,119 @@
   "name": "@fluentui/react-toolbar",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:34 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:36 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-beta.15",
+      "version": "9.0.0-beta.15",
+      "comments": {
+        "none": [
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "803091ab911f810964555cedb64f7355df2d4554",
+            "comment": "chore: update default button appearance for toolbar"
+          },
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "1bff9a3148961667fe516b46fead5798db794ae6",
+            "comment": "feat: add large size for toolbar"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.1.10",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.6",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.13",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:30 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-beta.14",
+      "version": "9.0.0-beta.14",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          },
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "4f5eec8081eed87fce6e8c4a071fb48e37629d1c",
+            "comment": "chore: add onClick on test title"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.1.9",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.5",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.12",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.1",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:47 GMT",
       "tag": "@fluentui/react-toolbar_v9.0.0-beta.13",
       "version": "9.0.0-beta.13",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,39 @@
 # Change Log - @fluentui/react-toolbar
-This log was last generated on Fri, 11 Nov 2022 14:53:34 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:36 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.15)
+Mon, 05 Dec 2022 18:25:36 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.14..@fluentui/react-toolbar_v9.0.0-beta.15)
+### Changes
+- Bump @fluentui/react-button to v9.1.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-divider to v9.1.6 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-radio to v9.0.13 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-tabster to v9.3.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.14)
+Thu, 17 Nov 2022 23:05:30 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.13..@fluentui/react-toolbar_v9.0.0-beta.14)
+### Changes
+- Bump @fluentui/react-button to v9.1.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-divider to v9.1.5 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-radio to v9.0.12 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
 ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.13)
-Fri, 11 Nov 2022 14:53:34 GMT
+Fri, 11 Nov 2022 14:57:47 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.12..@fluentui/react-toolbar_v9.0.0-beta.13)
 ### Changes

package/dist/index.d.ts CHANGED Viewed

@@ -95,7 +95,7 @@ export declare type ToolbarProps = ComponentProps<ToolbarSlots> & {
      *
      * @default medium
      */
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Toolbar can be vertical styled
      * @default false

package/lib/Toolbar.js.map CHANGED Viewed

	@@ -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"]}

package/lib/ToolbarButton.js.map CHANGED Viewed

	@@ -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"]}

package/lib/ToolbarDivider.js.map CHANGED Viewed

	@@ -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"]}

package/lib/ToolbarRadioButton.js.map CHANGED Viewed

	@@ -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"]}

package/lib/ToolbarToggleButton.js.map CHANGED Viewed

	@@ -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"]}

package/lib/components/Toolbar/Toolbar.cy.js ADDED Viewed

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { mount as mountBase } from '@cypress/react';
+import { FluentProvider } from '@fluentui/react-provider';
+import { teamsLightTheme } from '@fluentui/react-theme';
+import { Toolbar } from '../Toolbar';
+import { ToolbarButton } from '../ToolbarButton';
+import { ToolbarToggleButton } from '../ToolbarToggleButton';
+import { ToolbarRadioButton } from '../ToolbarRadioButton';
+const button = "[type='button']";
+const mount = element => {
+  mountBase( /*#__PURE__*/React.createElement(FluentProvider, {
+    theme: teamsLightTheme
+  }, element));
+};
+describe('Toolbar', () => {
+  describe('Navigation', () => {
+    it('should navigate with arrows', () => {
+      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")));
+      cy.get(button).eq(0).focus().get(button).eq(0).should('be.focused') // Navigate with right arrow to the right
+      .type('{rightArrow}').get(button).eq(1).should('be.focused') // Navigate with down arrow to the right
+      .type('{downArrow}').get(button).eq(2).should('be.focused') // Navigate with up arrow to the right
+      .type('{upArrow}').get(button).eq(1).should('be.focused') // Navigate with left arrow to the right
+      .type('{leftArrow}').get(button).eq(0).should('be.focused');
+    });
+    it('should have circular navigation', () => {
+      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")));
+      cy.get(button).eq(3).focus().get(button).eq(3).should('be.focused') // Navigate from last to first
+      .type('{rightArrow}').get(button).eq(0).should('be.focused') // Navigate from first to last
+      .type('{leftArrow}').get(button).eq(3).should('be.focused');
+    });
+  });
+  describe('Toggle Button', () => {
+    it('should toggle button state on click', () => {
+      mount( /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(ToolbarToggleButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      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');
+    });
+    it('should set default checked values', () => {
+      mount( /*#__PURE__*/React.createElement(Toolbar, {
+        defaultCheckedValues: {
+          group: ['first']
+        }
+      }, /*#__PURE__*/React.createElement(ToolbarToggleButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
+    });
+  });
+  describe('Radio Button', () => {
+    it('should toggle button state on click', () => {
+      mount( /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(ToolbarRadioButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      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');
+    });
+    it('should set default checked values', () => {
+      mount( /*#__PURE__*/React.createElement(Toolbar, {
+        defaultCheckedValues: {
+          group: ['first']
+        }
+      }, /*#__PURE__*/React.createElement(ToolbarRadioButton, {
+        name: "group",
+        value: "first"
+      }, "First")));
+      cy.get(button).eq(0).should('have.attr', 'aria-pressed', 'true');
+    });
+    it('should check new value and uncheck previously checked', () => {
+      mount( /*#__PURE__*/React.createElement(Toolbar, {
+        defaultCheckedValues: {
+          group: ['first']
+        }
+      }, /*#__PURE__*/React.createElement(ToolbarRadioButton, {
+        name: "group",
+        value: "first"
+      }, "First"), /*#__PURE__*/React.createElement(ToolbarRadioButton, {
+        name: "group",
+        value: "second"
+      }, "Second")));
+      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');
+    });
+  });
+});
+//# sourceMappingURL=Toolbar.cy.js.map

package/lib/components/Toolbar/Toolbar.cy.js.map ADDED Viewed

@@ -0,0 +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/"}

package/lib/components/Toolbar/Toolbar.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/Toolbar/Toolbar.types.js.map CHANGED Viewed

	@@ -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' \| 'large';\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"]}

package/lib/components/Toolbar/ToolbarContext.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/Toolbar/index.js.map CHANGED Viewed

	@@ -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"]}

package/lib/components/Toolbar/renderToolbar.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/Toolbar/useToolbar.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/Toolbar/useToolbarContextValues.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/Toolbar/useToolbarStyles.js CHANGED Viewed

@@ -9,6 +9,7 @@ export const toolbarClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
+    "Bt984gj": "f122n59",
     "z8tnut": "f10ra9hq",
     "z189sj": ["f19lj068", "f177v4lu"],
     "Byoj8tv": "f1y2xyjm",
@@ -19,9 +20,18 @@ const useStyles = /*#__PURE__*/__styles({
   "vertical": {
     "Beiy3e4": "f1vx9l62",
     "a9b677": "f1acs6jw"
+  },
+  "small": {
+    "Bqenvij": "f1d2rq10"
+  },
+  "medium": {
+    "Bqenvij": "fbhnoac"
+  },
+  "large": {
+    "Bqenvij": "ff2sm71"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10ra9hq{padding-top:4px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1acs6jw{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f10ra9hq{padding-top:4px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1acs6jw{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}", ".f1d2rq10{height:32px;}", ".fbhnoac{height:40px;}", ".ff2sm71{height:48px;}"]
 });
 /**
  * Apply styling to the Toolbar slots based on the state
@@ -31,9 +41,10 @@ const useStyles = /*#__PURE__*/__styles({
 export const useToolbarStyles_unstable = state => {
   const styles = useStyles();
   const {
-    vertical
+    vertical,
+    size
   } = state;
-  state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
+  state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);
   return state;
 };
 //# sourceMappingURL=useToolbarStyles.js.map

package/lib/components/Toolbar/useToolbarStyles.js.map CHANGED Viewed

	@@ -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;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAAqB,KAA3B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,IAAI,MAAM,CAAC,QAHc,EAIjC,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KAJP,EAKjC,IAAI,KAAK,QAAT,IAAqB,CAAC,QAAtB,IAAkC,MAAM,CAAC,MALR,EAMjC,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KANP,EAOjC,KAAK,CAAC,IAAN,CAAW,SAPsB,CAAnC;EAUA,OAAO,KAAP;AACD,CAdM","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 alignItems: 'center',\n ...shorthands.padding('4px', '8px', '4px', '8px'),\n ...shorthands.gap('8px'),\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n small: {\n height: '32px',\n },\n medium: {\n height: '40px',\n },\n large: {\n height: '48px',\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, size } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n size === 'small' && !vertical && styles.small,\n size === 'medium' && !vertical && styles.medium,\n size === 'large' && !vertical && styles.large,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarButton/ToolbarButton.js CHANGED Viewed

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';
-import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**
  * ToolbarButton component is a Button to be used inside Toolbar
  * which will respect toolbar props such as `size`
  */
 export const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const size = useToolbarContext_unstable(ctx => ctx.size);
   const state = useButton_unstable({
-    size,
-    appearance: 'transparent',
+    appearance: 'subtle',
     ...props
   }, ref);
   useButtonStyles_unstable(state);

package/lib/components/ToolbarButton/ToolbarButton.js.map CHANGED Viewed

	@@ -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;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,kBAAkB,CAAC;IAAE,UAAU,EAAE,QAAd;IAAwB,GAAG;EAA3B,CAAD,EAAqC,GAArC,CAAhC;EACA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,CAA5B,CAHoG,CAIpG;AACD,CALqE,CAA/D;AAOP,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';\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 state = useButton_unstable({ appearance: 'subtle', ...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/"}

package/lib/components/ToolbarButton/ToolbarButton.types.js.map CHANGED Viewed

	@@ -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"]}

package/lib/components/ToolbarButton/index.js.map CHANGED Viewed

	@@ -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"]}

package/lib/components/ToolbarDivider/ToolbarDivider.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/ToolbarDivider/ToolbarDivider.types.js.map CHANGED Viewed

	@@ -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"]}

package/lib/components/ToolbarDivider/index.js.map CHANGED Viewed

	@@ -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"]}

package/lib/components/ToolbarDivider/useToolbarDivider.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/ToolbarDivider/useToolbarDividerStyles.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.js.map CHANGED Viewed

	@@ -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/"}

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.types.js.map CHANGED Viewed

	@@ -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"]}

package/lib/components/ToolbarRadioButton/index.js.map CHANGED Viewed

	@@ -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"]}