@fluentui/react-toolbar 9.0.0-rc.2 → 9.0.0-rc.3

package/CHANGELOG.json

@@ -2,7 +2,84 @@
   "name": "@fluentui/react-toolbar",
   "entries": [
     {
-      "date": "Wed, 21 Dec 2022 10:17:16 GMT",
+      "date": "Wed, 04 Jan 2023 01:36:01 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-rc.3",
+      "version": "9.0.0-rc.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "5bdf0b017a95c95f7d6fea8efe448b74940e2022",
+            "comment": "fix: Export all relevant Toolbar components and utilities"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.1.13",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.9",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.4",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.16",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.5",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:33 GMT",
       "tag": "@fluentui/react-toolbar_v9.0.0-rc.2",
       "version": "9.0.0-rc.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Jan 2023 01:36:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-rc.3)
+
+Wed, 04 Jan 2023 01:36:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-rc.2..@fluentui/react-toolbar_v9.0.0-rc.3)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- fix: Export all relevant Toolbar components and utilities ([PR #26065](https://github.com/microsoft/fluentui/pull/26065) by lingfangao@hotmail.com)
+- Bump @fluentui/react-button to v9.1.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-divider to v9.1.9 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-radio to v9.0.16 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
 ## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-rc.2)
 
-Wed, 21 Dec 2022 10:17:16 GMT 
+Wed, 21 Dec 2022 10:20:33 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-rc.1..@fluentui/react-toolbar_v9.0.0-rc.2)
 
 ### Changes

package/dist/index.d.ts

@@ -19,6 +19,11 @@ import { ToggleButtonState } from '@fluentui/react-button';
  */
 export declare const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSX.Element;
 
+/**
+ * Render the final JSX of ToolbarGroup
+ */
+export declare const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSX.Element;
+
 declare type ToggableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked?: boolean) => void;
 
 /**
@@ -94,6 +99,8 @@ export declare type ToolbarDividerState = ComponentState<Partial<DividerSlots>>
  */
 export declare const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps>;
 
+export declare const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots>;
+
 /**
  * ToolbarButton Props
  */
@@ -201,14 +208,76 @@ export declare type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlot
  */
 export declare const useToolbar_unstable: (props: ToolbarProps, ref: React_2.Ref<HTMLElement>) => ToolbarState;
 
+/**
+ * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */
+export declare const useToolbarButton_unstable: (props: ToolbarButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarButtonState;
+
+/**
+ * Apply styling to the ToolbarButton slots based on the state
+ */
+export declare const useToolbarButtonStyles_unstable: (state: ToolbarButtonState) => void;
+
+/**
+ * Create the state required to render ToolbarDivider.
+ *
+ * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,
+ * before being passed to renderToolbar_unstable.
+ *
+ * @param props - props from this instance of ToolbarDivider
+ * @param ref - reference to root HTMLElement of ToolbarDivider
+ */
+export declare const useToolbarDivider_unstable: (props: ToolbarDividerProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerState;
+
 /**
  * Apply styling to the ToolbarDivider slots based on the state
  */
 export declare const useToolbarDividerStyles_unstable: (state: ToolbarDividerState) => ToolbarDividerState;
 
+/**
+ * Given user props, defines default props for the Group
+ * @param props - User provided props to the Group component.
+ * @param ref - User provided ref to be passed to the Group component.
+ */
+export declare const useToolbarGroup_unstable: (props: ToolbarGroupProps, ref: React_2.Ref<HTMLDivElement>) => ToolbarGroupState;
+
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */
+export declare const useToolbarGroupStyles_unstable: (state: ToolbarGroupState) => ToolbarGroupState;
+
+/**
+ * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the RadioButton component.
+ * @param ref - User provided ref to be passed to the RadioButton component.
+ */
+export declare const useToolbarRadioButton_unstable: (props: ToolbarRadioButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonState;
+
+/**
+ * Apply styling to the ToolbarRadioButton slots based on the state
+ */
+export declare const useToolbarRadioButtonStyles_unstable: (state: ToolbarRadioButtonState) => void;
+
 /**
  * Apply styling to the Toolbar slots based on the state
  */
 export declare const useToolbarStyles_unstable: (state: ToolbarState) => ToolbarState;
 
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */
+export declare const useToolbarToggleButton_unstable: (props: ToolbarToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonState;
+
+/**
+ * Apply styling to the ToolbarToggleButton slots based on the state
+ */
+export declare const useToolbarToggleButtonStyles_unstable: (state: ToolbarToggleButtonState) => void;
+
 export { }

package/lib/components/Toolbar/Toolbar.js

@@ -6,7 +6,6 @@ import { useToolbarContextValues_unstable } from './useToolbarContextValues';
 /**
  * Toolbar component
  */
-
 export const Toolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbar_unstable(props, ref);
   const contextValues = useToolbarContextValues_unstable(state);

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

@@ -1 +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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,gCAAgC,QAAQ,2BAA2B;AAE5E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGN,gCAAgC,CAACK,KAAK,CAAC;EAC7DN,yBAAyB,CAACM,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACM,WAAW,GAAG,SAAS","names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.tsx"],"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"]}

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

@@ -1 +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/"}
+{"version":3,"mappings":"AAAA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAIrG,OAAO,MAAMC,cAAc,gBAAGF,aAAa,CAAkCG,SAAS,CAAiC;AAEvH,MAAMC,0BAA0B,GAAwB;EACtDC,IAAI,EAAE,QAAoB;EAC1BC,kBAAkB,EAAE,MAAM,IAAI;EAC9BC,WAAW,EAAE,MAAM,IAAI;EACvBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE;CAChB;AAED,OAAO,MAAMC,0BAA0B,GAAOC,QAAiD,IAC7FV,kBAAkB,CAACC,cAAc,EAAE,CAACU,GAAG,GAAGR,0BAA0B,KAAKO,QAAQ,CAACC,GAAG,CAAC,CAAC","names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/ToolbarContext.ts"],"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"]}

package/lib/components/Toolbar/renderToolbar.js

@@ -4,7 +4,6 @@ import { ToolbarContext } from './ToolbarContext';
 /**
  * Render the final JSX of Toolbar
  */
-
 export const renderToolbar_unstable = (state, contextValues) => {
   const {
     slots,
@@ -12,7 +11,8 @@ export const renderToolbar_unstable = (state, contextValues) => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
     value: contextValues.toolbar
-  }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }, slotProps.root.children));
 };
 //# sourceMappingURL=renderToolbar.js.map

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

@@ -1 +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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,cAAc,QAAQ,kBAAkB;AAEjD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,oBAACE,cAAc,CAACM,QAAQ;IAACC,KAAK,EAAEJ,aAAa,CAACK;EAAO,gBACnDV,oBAACM,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAAGJ,SAAS,CAACI,IAAI,CAACC,QAAQ,CAAc,CAC9C;AAE9B,CAAC","names":["React","getSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","slots","slotProps","Provider","value","toolbar","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/renderToolbar.tsx"],"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"]}

package/lib/components/Toolbar/useToolbar.js

@@ -10,7 +10,6 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
  * @param props - props from this instance of Toolbar
  * @param ref - reference to root HTMLElement of Toolbar
  */
-
 export const useToolbar_unstable = (props, ref) => {
   const {
     size = 'medium',
@@ -46,13 +45,11 @@ export const useToolbar_unstable = (props, ref) => {
     if (name && value) {
       const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
       const newCheckedItems = [...checkedItems];
-
       if (checked) {
         newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
       } else {
         newCheckedItems.push(value);
       }
-
       onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
         name,
         checkedItems: newCheckedItems
@@ -67,7 +64,8 @@ export const useToolbar_unstable = (props, ref) => {
       });
     }
   });
-  return { ...initialState,
+  return {
+    ...initialState,
     handleToggleButton,
     handleRadio,
     checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
@@ -77,7 +75,6 @@ export const useToolbar_unstable = (props, ref) => {
  * Adds appropriate state values and handlers for selectable items
  * i.e checkboxes and radios
  */
-
 const useToolbarSelectableState = state => {
   const [checkedValues, setCheckedValues] = useControllableState({
     state: state.checkedValues,
@@ -97,9 +94,9 @@ const useToolbarSelectableState = state => {
         checkedItems
       });
     }
-
     setCheckedValues(s => {
-      return s ? { ...s,
+      return s ? {
+        ...s,
         [name]: checkedItems
       } : {
         [name]: checkedItems

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

@@ -1 +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/"}
+{"version":3,"mappings":"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","names":["useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts"],"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"]}

package/lib/components/Toolbar/useToolbarContextValues.js

@@ -5,8 +5,8 @@ export function useToolbarContextValues_unstable(state) {
     vertical,
     checkedValues,
     handleRadio
-  } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-
+  } = state;
+  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
   const toolbar = {
     size,
     vertical,

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

@@ -1 +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/"}
+{"version":3,"mappings":"AAEA,OAAM,SAAUA,gCAAgC,CAACC,KAAmB;EAClE,MAAM;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC,QAAQ;IAAEC,aAAa;IAAEC;EAAW,CAAE,GAAGL,KAAK;EAChF;EACA,MAAMM,OAAO,GAAwB;IACnCL,IAAI;IACJE,QAAQ;IACRD,kBAAkB;IAClBG,WAAW;IACXD;GACD;EAED,OAAO;IAAEE;EAAO,CAAE;AACpB","names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarContextValues.tsx"],"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"]}

package/lib/components/Toolbar/useToolbarStyles.js

@@ -5,39 +5,36 @@ export const toolbarClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "z8tnut": "f10ra9hq",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f1y2xyjm",
-    "uwmqm3": ["f177v4lu", "f19lj068"],
-    "i8kkvl": "f4px1ci",
-    "Belr9w4": "fn67r4l"
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    z8tnut: "f10ra9hq",
+    z189sj: ["f19lj068", "f177v4lu"],
+    Byoj8tv: "f1y2xyjm",
+    uwmqm3: ["f177v4lu", "f19lj068"],
+    i8kkvl: "f4px1ci",
+    Belr9w4: "fn67r4l"
   },
-  "vertical": {
-    "Beiy3e4": "f1vx9l62",
-    "a9b677": "f1acs6jw"
+  vertical: {
+    Beiy3e4: "f1vx9l62",
+    a9b677: "f1acs6jw"
   },
-  "small": {
-    "Bqenvij": "f1d2rq10"
+  small: {
+    Bqenvij: "f1d2rq10"
   },
-  "medium": {
-    "Bqenvij": "fbhnoac"
+  medium: {
+    Bqenvij: "fbhnoac"
   },
-  "large": {
-    "Bqenvij": "ff2sm71"
+  large: {
+    Bqenvij: "ff2sm71"
   }
 }, {
-  "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;}"]
+  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
  */
-
-
 export const useToolbarStyles_unstable = state => {
   const styles = useStyles();
   const {

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

@@ -1 +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/"}
+{"version":3,"mappings":"AACA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,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,EAoBhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAM;IAAEI,QAAQ;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAChCA,KAAK,CAACH,IAAI,CAACO,SAAS,GAAGV,YAAY,CACjCE,iBAAiB,CAACC,IAAI,EACtBI,MAAM,CAACJ,IAAI,EACXK,QAAQ,IAAID,MAAM,CAACC,QAAQ,EAC3BC,IAAI,KAAK,OAAO,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACI,KAAK,EAC7CF,IAAI,KAAK,QAAQ,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACK,MAAM,EAC/CH,IAAI,KAAK,OAAO,IAAI,CAACD,QAAQ,IAAID,MAAM,CAACM,KAAK,EAC7CP,KAAK,CAACH,IAAI,CAACO,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","toolbarClassNames","root","useStyles","useToolbarStyles_unstable","state","styles","vertical","size","className","small","medium","large"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"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"]}

package/lib/components/ToolbarButton/ToolbarButton.js

@@ -6,11 +6,12 @@ import { useToolbarButton_unstable } from './useToolbarButton';
  * 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 state = useToolbarButton_unstable(props, ref);
   useToolbarButtonStyles_unstable(state);
-  return renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
+  return renderButton_unstable(state);
+  // Casting is required due to lack of distributive union to support unions on @types/react
 });
+
 ToolbarButton.displayName = 'ToolbarButton';
 //# sourceMappingURL=ToolbarButton.js.map

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

@@ -1 +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,QAAsC,wBAAtC;AACA,SAAS,+BAAT,QAAgD,0BAAhD;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,yBAAyB,CAAC,KAAD,EAAQ,GAAR,CAAvC;EACA,+BAA+B,CAAC,KAAD,CAA/B;EAEA,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 } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\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 = useToolbarButton_unstable(props, ref);\n  useToolbarButtonStyles_unstable(state);\n  \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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,yBAAyB,QAAQ,oBAAoB;AAE9D;;;;AAIA,OAAO,MAAMC,aAAa,gBAA4CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAMC,KAAK,GAAGL,yBAAyB,CAACG,KAAK,EAAEC,GAAG,CAAC;EACnDL,+BAA+B,CAACM,KAAK,CAAC;EAEtC,OAAOP,qBAAqB,CAACO,KAAK,CAAC;EACnC;AACF,CAAC,CAA4C;;AAE7CJ,aAAa,CAACK,WAAW,GAAG,eAAe","names":["React","renderButton_unstable","useToolbarButtonStyles_unstable","useToolbarButton_unstable","ToolbarButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable } from '@fluentui/react-button';\nimport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles';\nimport { useToolbarButton_unstable } from './useToolbarButton';\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 = useToolbarButton_unstable(props, ref);\n  useToolbarButtonStyles_unstable(state);\n  \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"]}

package/lib/components/ToolbarButton/index.js

@@ -1,3 +1,5 @@
 export * from './ToolbarButton';
 export * from './ToolbarButton.types';
+export * from './useToolbarButton';
+export * from './useToolbarButtonStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"]}
+{"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;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './ToolbarButton';\nexport * from './ToolbarButton.types';\nexport * from './useToolbarButton';\nexport * from './useToolbarButtonStyles';\n"]}

package/lib/components/ToolbarButton/useToolbarButton.js

@@ -5,7 +5,6 @@ import { useButton_unstable } from '@fluentui/react-button';
  * @param props - User provided props to the Button component.
  * @param ref - User provided ref to be passed to the Button component.
  */
-
 export const useToolbarButton_unstable = (props, ref) => {
   const {
     vertical = false,

package/lib/components/ToolbarButton/useToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButton.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,wBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,GAAG;EAAvB,IAAuC,KAA7C;EACA,MAAM,KAAK,GAAG,kBAAkB,CAAC;IAAE,UAAU,EAAE,QAAd;IAAwB,GAAG;EAA3B,CAAD,EAA2C,GAA3C,CAAhC;EACA,OAAO;IACL,QADK;IAEL,GAAG;EAFE,CAAP;AAID,CAVM","sourcesContent":["import * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable({ appearance: 'subtle', ...buttonProps }, ref);\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AACA,SAASA,kBAAkB,QAAQ,wBAAwB;AAG3D;;;;;;AAMA,OAAO,MAAMC,yBAAyB,GAAG,CACvCC,KAAyB,EACzBC,GAAqD,KAC/B;EACtB,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAE,GAAGC;EAAW,CAAE,GAAGH,KAAK;EAClD,MAAMI,KAAK,GAAGN,kBAAkB,CAAC;IAAEO,UAAU,EAAE,QAAQ;IAAE,GAAGF;EAAW,CAAE,EAAEF,GAAG,CAAC;EAC/E,OAAO;IACLC,QAAQ;IACR,GAAGE;GACJ;AACH,CAAC","names":["useButton_unstable","useToolbarButton_unstable","props","ref","vertical","buttonProps","state","appearance"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable({ appearance: 'subtle', ...buttonProps }, ref);\n  return {\n    vertical,\n    ...state,\n  };\n};\n"]}

package/lib/components/ToolbarButton/useToolbarButtonStyles.js

@@ -1,26 +1,22 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
-
 const useBaseStyles = /*#__PURE__*/__styles({
-  "vertical": {
-    "Beiy3e4": "f1vx9l62"
+  vertical: {
+    Beiy3e4: "f1vx9l62"
   },
-  "verticalIcon": {
-    "Be2twd7": "f1rt2boy"
+  verticalIcon: {
+    Be2twd7: "f1rt2boy"
   }
 }, {
-  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1rt2boy{font-size:24px;}"]
+  d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1rt2boy{font-size:24px;}"]
 });
 /**
  * Apply styling to the ToolbarButton slots based on the state
  */
-
-
 export const useToolbarButtonStyles_unstable = state => {
   useButtonStyles_unstable(state);
   const buttonStyles = useBaseStyles();
   state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);
-
   if (state.icon) {
     state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);
   }

package/lib/components/ToolbarButton/useToolbarButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,wBAAT,QAAyC,wBAAzC;;AAGA,MAAM,aAAa,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AASA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAA8B;EAC3E,wBAAwB,CAAC,KAAD,CAAxB;EACA,MAAM,YAAY,GAAG,aAAa,EAAlC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,QAAN,IAAkB,YAAY,CAAC,QAAtD,CAAnC;;EACA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,KAAK,CAAC,IAAN,CAAW,SAAZ,EAAuB,KAAK,CAAC,QAAN,IAAkB,YAAY,CAAC,YAAtD,CAAnC;EACD;AACF,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  useButtonStyles_unstable(state);\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,wBAAwB,QAAQ,wBAAwB;AAGjE,MAAMC,aAAa,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAOpB;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAI;EAC3EH,wBAAwB,CAACG,KAAK,CAAC;EAC/B,MAAMC,YAAY,GAAGH,aAAa,EAAE;EAEpCE,KAAK,CAACE,IAAI,CAACC,SAAS,GAAGP,YAAY,CAACI,KAAK,CAACE,IAAI,CAACC,SAAS,EAAEH,KAAK,CAACI,QAAQ,IAAIH,YAAY,CAACG,QAAQ,CAAC;EAClG,IAAIJ,KAAK,CAACK,IAAI,EAAE;IACdL,KAAK,CAACK,IAAI,CAACF,SAAS,GAAGP,YAAY,CAACI,KAAK,CAACK,IAAI,CAACF,SAAS,EAAEH,KAAK,CAACI,QAAQ,IAAIH,YAAY,CAACK,YAAY,CAAC;;AAE1G,CAAC","names":["mergeClasses","useButtonStyles_unstable","useBaseStyles","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","vertical","icon","verticalIcon"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n  verticalIcon: {\n    fontSize: '24px',\n  },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n  useButtonStyles_unstable(state);\n  const buttonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);\n  if (state.icon) {\n    state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);\n  }\n};\n"]}

package/lib/components/ToolbarDivider/ToolbarDivider.js

@@ -5,7 +5,6 @@ import { useToolbarDivider_unstable } from './useToolbarDivider';
 /**
  * ToolbarDivider component
  */
-
 export const ToolbarDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useToolbarDivider_unstable(props, ref);
   useToolbarDividerStyles_unstable(state);

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

@@ -1 +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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gCAAgC,QAAQ,2BAA2B;AAG5E,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE;;;AAGA,OAAO,MAAMC,cAAc,gBAA6CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGL,0BAA0B,CAACG,KAAK,EAAEC,GAAG,CAAC;EACpDN,gCAAgC,CAACO,KAAK,CAAC;EACvC,OAAON,sBAAsB,CAACM,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,cAAc,CAACK,WAAW,GAAG,gBAAgB","names":["React","useToolbarDividerStyles_unstable","renderDivider_unstable","useToolbarDivider_unstable","ToolbarDivider","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.tsx"],"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"]}