npm - @fluentui/react-toolbar - Versions diffs - 9.0.0-beta.8 → 9.0.0-beta.9 - Mend

@fluentui/react-toolbar 9.0.0-beta.8 → 9.0.0-beta.9

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

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,78 @@
   "name": "@fluentui/react-toolbar",
   "entries": [
     {
-      "date": "Mon, 03 Oct 2022 22:22:53 GMT",
+      "date": "Thu, 13 Oct 2022 10:59:40 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-beta.9",
+      "version": "9.0.0-beta.9",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "2d36a7c692d301b420b6a4b1a78b139fdc955612",
+            "comment": "fix: Toolbar selection should work"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "1a527d440e0497ef8046b3ce240492241e7a04ac",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.1.4",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.1",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.1.1",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.4",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.8",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.1.3",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          }
+        ],
+        "none": [
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "41c30da2fdb58551d5ec3ce2450ccab5d2d49969",
+            "comment": "chore: update api"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Oct 2022 22:24:42 GMT",
       "tag": "@fluentui/react-toolbar_v9.0.0-beta.8",
       "version": "9.0.0-beta.8",
       "comments": {
@@ -11,19 +82,19 @@
             "author": "beachball",
             "package": "@fluentui/react-toolbar",
             "comment": "Bump @fluentui/react-button to v9.1.3",
-            "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-toolbar",
             "comment": "Bump @fluentui/react-radio to v9.0.7",
-            "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-toolbar",
             "comment": "Bump @fluentui/react-tabster to v9.1.2",
-            "commit": "b0b7f99bbbb05b0bd136432983a74fea252c7163"
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
           }
         ]
       }

package/CHANGELOG.md CHANGED Viewed

@@ -1,19 +1,36 @@
 # Change Log - @fluentui/react-toolbar
-This log was last generated on Mon, 03 Oct 2022 22:22:53 GMT and should not be manually modified.
+This log was last generated on Thu, 13 Oct 2022 10:59:40 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.9)
+Thu, 13 Oct 2022 10:59:40 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.8..@fluentui/react-toolbar_v9.0.0-beta.9)
+### Changes
+- fix: Toolbar selection should work ([PR #25153](https://github.com/microsoft/fluentui/pull/25153) by lingfangao@hotmail.com)
+- chore: Update Griffel to latest version ([PR #25075](https://github.com/microsoft/fluentui/pull/25075) by olfedias@microsoft.com)
+- Bump @fluentui/react-button to v9.1.4 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-divider to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-utilities to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.4 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-radio to v9.0.8 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-tabster to v9.1.3 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
 ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.8)
-Mon, 03 Oct 2022 22:22:53 GMT
+Mon, 03 Oct 2022 22:24:42 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.0.0-beta.7..@fluentui/react-toolbar_v9.0.0-beta.8)
 ### Changes
-- Bump @fluentui/react-button to v9.1.3 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
-- Bump @fluentui/react-radio to v9.0.7 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
-- Bump @fluentui/react-tabster to v9.1.2 ([PR #25016](https://github.com/microsoft/fluentui/pull/25016) by beachball)
+- Bump @fluentui/react-button to v9.1.3 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-radio to v9.0.7 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-tabster to v9.1.2 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
 ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.0.0-beta.7)

package/dist/index.d.ts CHANGED Viewed

@@ -65,7 +65,7 @@ declare type ToolbarCheckedValueChangeEvent = React_2.MouseEvent | React_2.Keybo
 export declare const toolbarClassNames: SlotClassNames<ToolbarSlots>;
-export declare type ToolbarContextValue = Pick<ToolbarProps, 'size'> & {
+export declare type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {
     handleToggleButton?: ToggableHandler;
 };
@@ -81,7 +81,14 @@ export declare const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
 /**
  * ToolbarDivider Props
  */
-export declare type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>>;
+export declare type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {
+    /**
+     * A divider can be horizontal or vertical (default).
+     *
+     * @default true
+     */
+    vertical?: boolean;
+};
 /**
  * State used in rendering ToolbarDivider
@@ -98,6 +105,11 @@ export declare type ToolbarProps = ComponentProps<ToolbarSlots> & {
      * @default medium
      */
     size?: 'small' | 'medium';
+    /**
+     * Toolbar can be vertical styled
+     * @default false
+     */
+    vertical?: boolean;
     /**
      * Map of all checked values
      */
@@ -157,7 +169,7 @@ export declare type ToolbarSlots = {
 /**
  * State used in rendering Toolbar
  */
-export declare type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size' | 'checkedValues'>> & Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
+export declare type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> & Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
     handleToggleButton: ToggableHandler;
 };
@@ -171,15 +183,14 @@ export declare const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButto
  */
 export declare type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
     appearance?: 'primary' | 'subtle';
+    name: string;
+    value: string;
 };
 /**
  * State used in rendering ToolbarToggleButton
  */
-export declare type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & {
-    name?: string;
-    value?: string;
-};
+export declare type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarToggleButtonProps, 'name' | 'value'>;
 /**
  * Create the state required to render Toolbar.

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 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'>> &\n Pick<ToolbarProps, 'defaultCheckedValues' \| 'onCheckedValueChange'> & {\n /\n * Toggles the state of a ToggleButton item\n */\n handleToggleButton: ToggableHandler;\n };\n\nexport type ToolbarContextValue = Pick<~~ToolbarProps~~, 'size'> & {\n handleToggleButton?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' \| 'handleToggleButton'> &\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":["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\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' \| 'vertical' \| 'checkedValues'> & {\n handleToggleButton?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' \| 'handleToggleButton'> &\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 CHANGED Viewed

@@ -1,12 +1,10 @@
-import * as React from 'react';
-export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const ToolbarContext = /*#__PURE__*/createContext(undefined);
 const toolbarContextDefaultValue = {
   size: 'medium',
-  handleToggleButton: () => null
-};
-export const useToolbarContext = () => {
-  var _a;
-  return (_a = React.useContext(ToolbarContext)) !== null && _a !== void 0 ? _a : toolbarContextDefaultValue;
+  handleToggleButton: () => null,
+  vertical: false,
+  checkedValues: {}
 };
+export const useToolbarContext_unstable = selector => useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));
 //# sourceMappingURL=ToolbarContext.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Toolbar/ToolbarContext.~~tsx~~"],"names":[],"mappings":"AAAA,~~OAAO~~,~~KAAK~~,~~KAAZ~~,~~MAAuB~~,~~OAAvB~~;~~AAGA~~,OAAO,MAAM,cAAc,gBAAG,~~KAAK~~,~~CAAC~~,~~aAAN~~,~~CAC5B,SAD4B,CAAvB~~;~~AAIP~~,MAAM,0BAA0B,~~GAAG~~;~~EACjC~~,IAAI,EAAE,~~QAD2B~~;~~EAEjC~~,kBAAkB,EAAE,MAAM~~;AAFO~~,~~CAAnC~~;~~AAKA~~,~~OAAO~~,~~MAAM~~,~~iBAAiB~~,~~GAAG~~,~~MAAK~~;~~EAAA~~,~~IAAA~~,~~EAAA;;EAAC~~,~~OAAA~~,~~CAAA~~,~~EAAA~~,~~GAAA~~,~~KAAK~~,CAAC,~~UAAN~~,~~CAAiB~~,~~cAAjB~~,~~CAAA~~,~~MAAgC~~,~~IAAhC~~,~~IAAgC~~,~~EAAA~~,~~KAAA~~,~~KAAA~~,~~CAAhC~~,~~GAAgC,EAAhC,GAAoC,0BAApC;AAA8D,CAA9F~~","sourcesContent":["import * as ~~React~~ from 'react';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = ~~React.~~createContext<ToolbarContextValue \| undefined>(\n undefined~~,\n~~) as ~~React.~~Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n};\n\nexport const ~~useToolbarContext~~ = () => ~~React.useContext~~(ToolbarContext) ?? ~~toolbarContextDefaultValue~~;\n"],"sourceRoot":"../src/"}
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,QAAQ,EAAE,KAH4C;EAItD,aAAa,EAAE;AAJuC,CAAxD;AAOA,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 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/useToolbar.js CHANGED Viewed

@@ -13,7 +13,8 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 export const useToolbar_unstable = (props, ref) => {
   const {
-    size = 'medium'
+    size = 'medium',
+    vertical = false
   } = props;
   const arrowNavigationProps = useArrowNavigationGroup({
     circular: true,
@@ -21,6 +22,7 @@ export const useToolbar_unstable = (props, ref) => {
   });
   const initialState = {
     size,
+    vertical,
     // TODO add appropriate props/defaults
     components: {
       // TODO add each slot's element type or component

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,EAA2B,oBAA3B,QAAuD,2BAAvD;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG;~~EAAT~~,~~IAAsB~~,~~KAA5B~~;EAEA,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAD,CAApD;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAAR;EAVmB,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,CAAC;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAAD,CAA9D;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,gBAAgB,CAC1D,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyD,CAA5D;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM","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' } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'horizontal',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n\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, setCheckedValues] = useControllableState({\n state: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n checkedValues: checkedValues ?? {},\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,EAA2B,oBAA3B,QAAuD,2BAAvD;AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,QAAQ,GAAG;EAA9B,IAAwC,KAA9C;EAEA,MAAM,oBAAoB,GAAG,uBAAuB,CAAC;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAD,CAApD;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAE9C,QAF8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAAR;EAVmB,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,CAAC;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAAD,CAA9D;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,gBAAgB,CAC1D,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyD,CAA5D;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM","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: 'horizontal',\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, setCheckedValues] = useControllableState({\n state: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n checkedValues: checkedValues ?? {},\n };\n};\n"],"sourceRoot":"../src/"}

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

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

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;~~EAAR~~,~~IAA+B~~,~~KAArC~~,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC;~~EAFmC~~,CAArC;~~EAKA~~,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 } = 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 handleToggleButton,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
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;EAAtC,IAAwD,KAA9D,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC;EAJmC,CAArC;EAOA,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 } = 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 checkedValues,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}

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

@@ -9,11 +9,19 @@ export const toolbarClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
     "i8kkvl": "f4px1ci",
     "Belr9w4": "fn67r4l"
+  },
+  "vertical": {
+    "Beiy3e4": "f1vx9l62",
+    "a9b677": "f1acs6jw"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"]
+  "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;}"]
 });
 /**
  * Apply styling to the Toolbar slots based on the state
@@ -22,7 +30,10 @@ const useStyles = /*#__PURE__*/__styles({
 export const useToolbarStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarClassNames.root, styles.root, state.root.className);
+  const {
+    vertical
+  } = state;
+  state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, 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;EAAA;AAAA;EAAA;AAAA,EAAlB;~~AAOA~~;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,~~CAAC~~,iBAAiB,CAAC,~~IAAnB~~,~~EAAyB~~,MAAM,CAAC,~~IAAhC~~,~~EAAsC~~,KAAK,CAAC,IAAN,CAAW,~~SAAjD~~,CAAnC;~~EAEA~~,OAAO,KAAP;AACD,~~CALM~~","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.gap('8px'),\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 state.root.className = mergeClasses(toolbarClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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/"}

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

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';
-import { useToolbarContext } from '../Toolbar/ToolbarContext';
+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();
+  const size = useToolbarContext_unstable(ctx => ctx.size);
   const state = useButton_unstable({
     size,
     appearance: 'transparent',

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,~~iBAAT~~,~~QAAkC~~,~~2BAAlC~~;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM~~;IAAE;EAAF~~,~~IAAW~~,~~iBAAiB~~,~~EAAlC~~;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~~ } 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~~();\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":["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/"}

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

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';
-import { renderDivider_unstable, useDivider_unstable } from '@fluentui/react-divider';
+import { renderDivider_unstable } from '@fluentui/react-divider';
+import { useToolbarDivider_unstable } from './useToolbarDivider';
 /**
  * ToolbarDivider component
  */
 export const ToolbarDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useDivider_unstable({
-    vertical: true,
-    ...props
-  }, ref);
+  const state = useToolbarDivider_unstable(props, ref);
   useToolbarDividerStyles_unstable(state);
   return renderDivider_unstable(state);
 });

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,~~EAAiC~~,~~mBAAjC~~,~~QAA4D~~,~~yBAA5D~~;AAEA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,~~mBAAmB~~,CAAC~~;IAAE~~,~~QAAQ~~,~~EAAE~~,~~IAAZ;IAAkB~~,~~GAAG~~;~~EAArB,CAAD,EAA+B,GAA/B,CAAjC;~~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, ~~useDivider_unstable~~ } from '@fluentui/react-divider';\n\n/*\n ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = ~~useDivider_unstable~~(~~{ vertical: true, ...~~props }, ref);\n useToolbarDividerStyles_unstable(state);\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}
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/"}

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/\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":["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 CHANGED Viewed

@@ -1,4 +1,5 @@
 export * from './ToolbarDivider';
 export * from './ToolbarDivider.types';
 export * from './useToolbarDividerStyles';
+export * from './useToolbarDivider';
 //# sourceMappingURL=index.js.map

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","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\n"]}
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"]}

package/lib/components/ToolbarDivider/useToolbarDivider.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { useDivider_unstable } from '@fluentui/react-divider';
+import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
+/**
+ * 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 const useToolbarDivider_unstable = (props, ref) => {
+  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);
+  return useDivider_unstable({
+    vertical: !vertical,
+    ...props
+  }, ref);
+};
+//# sourceMappingURL=useToolbarDivider.js.map

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

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

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

@@ -5,9 +5,12 @@ const useBaseStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "ftuwxu6",
     "B2u0y6b": "f1lwjmbk"
+  },
+  "vertical": {
+    "B2u0y6b": "fe668z"
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1lwjmbk{max-width:1px;}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1lwjmbk{max-width:1px;}", ".fe668z{max-width:initial;}"]
 });
 /**
  * Apply styling to the ToolbarDivider slots based on the state
@@ -16,8 +19,11 @@ const useBaseStyles = /*#__PURE__*/__styles({
 export const useToolbarDividerStyles_unstable = state => {
   useDividerStyles_unstable(state);
+  const {
+    vertical
+  } = state;
   const toolbarDividerStyles = useBaseStyles();
-  state.root.className = mergeClasses(state.root.className, toolbarDividerStyles.root);
+  state.root.className = mergeClasses(state.root.className, toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical);
   return state;
 };
 //# sourceMappingURL=useToolbarDividerStyles.js.map

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;AAAA;EAAA;AAAA,EAAtB;~~AAQA~~;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,yBAAyB,CAAC,KAAD,CAAzB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,~~CAAC~~,KAAK,CAAC,IAAN,CAAW,~~SAAZ~~,~~EAAuB~~,oBAAoB,CAAC,~~IAA5C~~,CAAnC;~~EACA~~,OAAO,KAAP;AACD,~~CALM~~","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});\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 toolbarDividerStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, toolbarDividerStyles.~~root~~);\n return state;\n};\n"],"sourceRoot":"../src/"}
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/"}

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

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { useRadio_unstable, renderRadio_unstable } from '@fluentui/react-radio';
 import { useToolbarRadioStyles_unstable } from './useToolbarRadioStyles';
-import { useToolbarContext } from '../Toolbar/ToolbarContext';
+import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**
  * ToolbarRadio component is a Radio to be used inside Toolbar
  */
 export const ToolbarRadio = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    size
-  } = useToolbarContext();
+  const size = useToolbarContext_unstable(ctx => ctx.size);
   const state = useRadio_unstable(props, ref);
   useToolbarRadioStyles_unstable({
     size,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarRadio/ToolbarRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,iBAAT,EAA4B,oBAA5B,QAAwD,uBAAxD;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,~~iBAAT~~,~~QAAkC~~,~~2BAAlC~~;AAEA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM~~;IAAE;EAAF~~,~~IAAW~~,~~iBAAiB~~,~~EAAlC~~;EACA,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EACA,8BAA8B,CAAC;IAAE,IAAF;IAAQ,GAAG;EAAX,CAAD,CAA9B;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALmE,CAA7D;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioProps } from './ToolbarRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRadio_unstable, renderRadio_unstable } from '@fluentui/react-radio';\nimport { useToolbarRadioStyles_unstable } from './useToolbarRadioStyles';\nimport { ~~useToolbarContext~~ } from '../Toolbar/ToolbarContext';\n\n/*\n ToolbarRadio component is a Radio to be used inside Toolbar\n */\nexport const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps> = React.forwardRef((props, ref) => {\n const { size } = ~~useToolbarContext~~();\n const state = useRadio_unstable(props, ref);\n useToolbarRadioStyles_unstable({ size, ...state });\n return renderRadio_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioProps>;\n\nToolbarRadio.displayName = 'ToolbarRadio';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/ToolbarRadio/ToolbarRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,iBAAT,EAA4B,oBAA5B,QAAwD,uBAAxD;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAEA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EACA,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EACA,8BAA8B,CAAC;IAAE,IAAF;IAAQ,GAAG;EAAX,CAAD,CAA9B;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALmE,CAA7D;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioProps } from './ToolbarRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRadio_unstable, renderRadio_unstable } from '@fluentui/react-radio';\nimport { useToolbarRadioStyles_unstable } from './useToolbarRadioStyles';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/*\n ToolbarRadio component is a Radio to be used inside Toolbar\n */\nexport const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps> = React.forwardRef((props, ref) => {\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useRadio_unstable(props, ref);\n useToolbarRadioStyles_unstable({ size, ...state });\n return renderRadio_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioProps>;\n\nToolbarRadio.displayName = 'ToolbarRadio';\n"],"sourceRoot":"../src/"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/*\n ToolbarToggleButton Props\n /\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' \| 'disabledFocusable' \| 'size'>> & {\n appearance?: 'primary' \| 'subtle';\n };\n\n/\n State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> & ~~{\n~~ name?: ~~string;\n~~ value~~?: string;\~~n ~~};\n~~"]}
1	+ {"version":3,"file":"ToolbarToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/*\n ToolbarToggleButton Props\n /\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n Partial<Pick<ToggleButtonProps, 'disabled' \| 'disabledFocusable' \| 'size'>> & {\n appearance?: 'primary' \| 'subtle';\n name: string;\n value: string;\n };\n\n/\n State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n ToggleButtonState &\n Required<Pick<ToggleButtonProps, 'checked'>> &\n Pick<ToolbarToggleButtonProps, 'name' \| 'value'>;\n"]}

package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useToggleButton_unstable } from '@fluentui/react-button';
-import { useToolbarContext } from '../Toolbar/ToolbarContext';
+import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
  * processed state.
@@ -8,17 +8,25 @@ import { useToolbarContext } from '../Toolbar/ToolbarContext';
  */
 export const useToolbarToggleButton_unstable = (props, ref) => {
-  const {
-    handleToggleButton,
-    size
-  } = useToolbarContext();
+  const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);
+  const checked = useToolbarContext_unstable(ctx => {
+    var _a;
+    return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value));
+  });
+  const size = useToolbarContext_unstable(ctx => ctx.size);
   const {
     onClick: onClickOriginal
   } = props;
-  const state = useToggleButton_unstable({
+  const toggleButtonState = useToggleButton_unstable({
     size,
+    checked,
     ...props
   }, ref);
+  const state = { ...toggleButtonState,
+    name: props.name,
+    value: props.value
+  };
   const handleOnClick = e => {
     if (state.disabled) {

package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,~~iBAAT~~,~~QAAkC~~,~~2BAAlC~~;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM;~~IAAE~~,~~kBAAF~~;~~IAAsB;EAAtB~~,~~IAA+B~~,~~iBAAiB~~,~~EAAtD~~;EACA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,~~KAAK~~,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,GAAG;~~EAAX~~,CAAD,~~EAAqB~~,~~GAArB~~,~~CAAtC~~;;~~EAEA~~,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,~~CAvBM~~","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { ~~useToolbarContext~~ } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const { handleToggleButton, size } = ~~useToolbarContext~~();\n const { onClick: onClickOriginal } = props;\n const ~~state~~ = useToggleButton_unstable({ size, ...props }, ref) as ToolbarToggleButtonState;\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,wBAAT,QAAyC,wBAAzC;AACA,SAAS,0BAAT,QAA2C,2BAA3C;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,kBAAZ,CAArD;EACA,MAAM,OAAO,GAAG,0BAA0B,CAAC,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAA9D,CAA1C;EACA,MAAM,IAAI,GAAG,0BAA0B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAZ,CAAvC;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,wBAAwB,CAAC;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAD,EAA8B,GAA9B,CAAlD;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/ToolbarContext.js CHANGED Viewed

@@ -3,21 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useToolbarContext = exports.ToolbarContext = void 0;
+exports.useToolbarContext_unstable = exports.ToolbarContext = void 0;
-const React = /*#__PURE__*/require("react");
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
-exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+exports.ToolbarContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
 const toolbarContextDefaultValue = {
   size: 'medium',
-  handleToggleButton: () => null
+  handleToggleButton: () => null,
+  vertical: false,
+  checkedValues: {}
 };
-const useToolbarContext = () => {
-  var _a;
+const useToolbarContext_unstable = selector => react_context_selector_1.useContextSelector(exports.ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));
-  return (_a = React.useContext(exports.ToolbarContext)) !== null && _a !== void 0 ? _a : toolbarContextDefaultValue;
-};
-exports.useToolbarContext = useToolbarContext;
+exports.useToolbarContext_unstable = useToolbarContext_unstable;
 //# sourceMappingURL=ToolbarContext.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Toolbar/ToolbarContext.~~tsx~~"],"names":[],"mappings":";;;;;;;AAAA,MAAA,~~KAAA~~,gBAAA,OAAA,CAAA,~~OAAA~~,CAAA;;~~AAGa~~,OAAA,CAAA,cAAA,gBAAiB,~~KAAK~~,~~CAAC~~,~~aAAN~~,~~CAC5B~~,~~SAD4B~~,CAAjB;~~AAIb~~,MAAM,0BAA0B,~~GAAG~~;~~EACjC~~,IAAI,EAAE,~~QAD2B~~;~~EAEjC~~,kBAAkB,EAAE,MAAM;~~AAFO~~,~~CAAnC;;AAKO~~,~~MAAM~~,~~iBAAiB~~,~~GAAG~~,~~MAAK~~;~~EAAA~~,~~IAAA,EAAA~~;;~~EAAC~~,~~OAAA~~,~~CAAA~~,~~EAAA~~,~~GAAA~~,~~KAAK~~,~~CAAC~~,~~UAAN~~,~~CAAiB~~,OAAA,CAAA,~~cAAjB~~,~~CAAA~~,~~MAAgC~~,~~IAAhC~~,~~IAAgC~~,~~EAAA~~,~~KAAA~~,~~KAAA~~,~~CAAhC~~,~~GAAgC~~,~~EAAhC~~,~~GAAoC,0BAApC;AAA8D,CAA9F~~;;AAAM,OAAA,CAAA,~~iBAAA~~,~~GAAiB~~,~~iBAAjB~~","sourcesContent":["import * as ~~React~~ from 'react';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = ~~React.~~createContext<ToolbarContextValue \| undefined>(\n undefined~~,\n~~) as ~~React.~~Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n};\n\nexport const ~~useToolbarContext~~ = () => ~~React.useContext~~(ToolbarContext) ?? ~~toolbarContextDefaultValue~~;\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,QAAQ,EAAE,KAH4C;EAItD,aAAa,EAAE;AAJuC,CAAxD;;AAOO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue \| undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n size: 'medium' as 'medium',\n handleToggleButton: () => null,\n 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-commonjs/components/Toolbar/useToolbar.js CHANGED Viewed

@@ -23,7 +23,8 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const useToolbar_unstable = (props, ref) => {
   const {
-    size = 'medium'
+    size = 'medium',
+    vertical = false
   } = props;
   const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
     circular: true,
@@ -31,6 +32,7 @@ const useToolbar_unstable = (props, ref) => {
   });
   const initialState = {
     size,
+    vertical,
     // TODO add appropriate props/defaults
     components: {
       // TODO add each slot's element type or component

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG;~~EAAT~~,~~IAAsB~~,~~KAA5B~~;EAEA,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAA7B;EAVwC,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,iBAAA,CAAA,gBAAA,CAC1C,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyC,CAA5C;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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' } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'horizontal',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n\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, setCheckedValues] = useControllableState({\n state: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n checkedValues: checkedValues ?? {},\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,QAAQ,GAAG;EAA9B,IAAwC,KAA9C;EAEA,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAE9C,QAF8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAA7B;EAVwC,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,iBAAA,CAAA,gBAAA,CAC1C,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyC,CAA5C;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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: 'horizontal',\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, setCheckedValues] = useControllableState({\n state: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\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\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n checkedValues: checkedValues ?? {},\n };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Toolbar/useToolbarContextValues.js CHANGED Viewed

@@ -8,12 +8,16 @@ exports.useToolbarContextValues_unstable = void 0;
 function useToolbarContextValues_unstable(state) {
   const {
     size,
-    handleToggleButton
+    handleToggleButton,
+    vertical,
+    checkedValues
   } = state; // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
   const toolbar = {
     size,
-    handleToggleButton
+    vertical,
+    handleToggleButton,
+    checkedValues
   };
   return {
     toolbar

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ;~~EAAR~~,~~IAA+B~~,~~KAArC~~,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC;~~EAFmC~~,CAArC;~~EAKA~~,OAAO;IAAE;EAAF,CAAP;AACD;;~~AATD~~,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton } = 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 handleToggleButton,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC;EAAtC,IAAwD,KAA9D,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC;EAJmC,CAArC;EAOA,OAAO;IAAE;EAAF,CAAP;AACD;;AAXD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n const { size, handleToggleButton, vertical, checkedValues } = 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 checkedValues,\n };\n\n return { toolbar };\n}\n"],"sourceRoot":"../src/"}

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

@@ -17,11 +17,19 @@ exports.toolbarClassNames = {
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
     "i8kkvl": "f4px1ci",
     "Belr9w4": "fn67r4l"
+  },
+  "vertical": {
+    "Beiy3e4": "f1vx9l62",
+    "a9b677": "f1acs6jw"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"]
+  "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;}"]
 });
 /**
  * Apply styling to the Toolbar slots based on the state
@@ -30,7 +38,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useToolbarStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.toolbarClassNames.root, styles.root, state.root.className);
+  const {
+    vertical
+  } = state;
+  state.root.className = react_1.mergeClasses(exports.toolbarClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
   return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;~~AAOA~~;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,~~CAAa~~,OAAA,CAAA,iBAAA,CAAkB,~~IAA/B~~,~~EAAqC~~,MAAM,CAAC,~~IAA5C~~,~~EAAkD~~,KAAK,CAAC,IAAN,CAAW,~~SAA7D~~,CAAvB;~~EAEA~~,OAAO,KAAP;AACD,~~CALM~~;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.gap('8px'),\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 state.root.className = mergeClasses(toolbarClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n root: 'fui-Toolbar',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.padding('4px', '8px', '4px', '8px'),\n ...shorthands.gap('8px'),\n },\n vertical: {\n flexDirection: 'column',\n width: 'fit-content',\n },\n});\n\n/\n Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n const styles = useStyles();\n const { vertical } = state;\n state.root.className = mergeClasses(\n toolbarClassNames.root,\n styles.root,\n vertical && styles.vertical,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -17,9 +17,7 @@ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 exports.ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    size
-  } = ToolbarContext_1.useToolbarContext();
+  const size = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.size);
   const state = react_button_1.useButton_unstable({
     size,
     appearance: 'transparent',

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM~~;IAAE;EAAF~~,~~IAAW~~,gBAAA,CAAA,~~iBAAA~~,~~EAAjB~~;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAnB,EAAkE,GAAlE,CAAd;EACA,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAJoG,CAKpG;AACD,CANqE,CAAzD;AAQb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { ~~useToolbarContext~~ } 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~~();\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":["components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EACA,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,IAAF;IAAQ,UAAU,EAAE,aAApB;IAAmC,GAAG;EAAtC,CAAnB,EAAkE,GAAlE,CAAd;EACA,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAJoG,CAKpG;AACD,CANqE,CAAzD;AAQb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/*\n ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useButton_unstable({ size, appearance: 'transparent', ...props }, ref);\n useButtonStyles_unstable(state);\n return renderButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/ToolbarDivider.js CHANGED Viewed

@@ -10,16 +10,15 @@ const React = /*#__PURE__*/require("react");
 const useToolbarDividerStyles_1 = /*#__PURE__*/require("./useToolbarDividerStyles");
 const react_divider_1 = /*#__PURE__*/require("@fluentui/react-divider");
+const useToolbarDivider_1 = /*#__PURE__*/require("./useToolbarDivider");
 /**
  * ToolbarDivider component
  */
 exports.ToolbarDivider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = react_divider_1.useDivider_unstable({
-    vertical: true,
-    ...props
-  }, ref);
+  const state = useToolbarDivider_1.useToolbarDivider_unstable(props, ref);
   useToolbarDividerStyles_1.useToolbarDividerStyles_unstable(state);
   return react_divider_1.renderDivider_unstable(state);
 });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,~~eAAA~~,CAAA,~~mBAAA~~,~~CAAoB;IAAE~~,~~QAAQ~~,~~EAAE~~,~~IAAZ;IAAkB~~,~~GAAG;EAArB,CAApB,EAAkD,GAAlD,~~CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CAJuE,CAA3D;AAMb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable, ~~useDivider_unstable~~ } from '@fluentui/react-divider';\n\n/*\n ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = ~~useDivider_unstable~~(~~{ vertical: true, ...~~props }, ref);\n useToolbarDividerStyles_unstable(state);\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/ToolbarDivider/ToolbarDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CAJuE,CAA3D;AAMb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles';\nimport type { ToolbarDividerProps } from './ToolbarDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarDivider_unstable } from './useToolbarDivider';\n\n/*\n ToolbarDivider component\n */\nexport const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps> = React.forwardRef((props, ref) => {\n const state = useToolbarDivider_unstable(props, ref);\n useToolbarDividerStyles_unstable(state);\n return renderDivider_unstable(state);\n});\n\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/index.js CHANGED Viewed

@@ -11,4 +11,6 @@ tslib_1.__exportStar(require("./ToolbarDivider"), exports);
 tslib_1.__exportStar(require("./ToolbarDivider.types"), exports);
 tslib_1.__exportStar(require("./useToolbarDividerStyles"), exports);
+tslib_1.__exportStar(require("./useToolbarDivider"), exports);
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarDivider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/ToolbarDivider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ToolbarDivider';\nexport * from './ToolbarDivider.types';\nexport * from './useToolbarDividerStyles';\nexport * from './useToolbarDivider';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js ADDED Viewed

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarDivider_unstable = void 0;
+const react_divider_1 = /*#__PURE__*/require("@fluentui/react-divider");
+const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
+/**
+ * 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
+ */
+const useToolbarDivider_unstable = (props, ref) => {
+  const vertical = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.vertical);
+  return react_divider_1.useDivider_unstable({
+    vertical: !vertical,
+    ...props
+  }, ref);
+};
+exports.useToolbarDivider_unstable = useToolbarDivider_unstable;
+//# sourceMappingURL=useToolbarDivider.js.map

package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["components/ToolbarDivider/useToolbarDivider.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,QAAtC,CAAjB;EACA,OAAO,eAAA,CAAA,mBAAA,CAAoB;IAAE,QAAQ,EAAE,CAAC,QAAb;IAAuB,GAAG;EAA1B,CAApB,EAAuD,GAAvD,CAAP;AACD,CANM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nimport { useDivider_unstable } from '@fluentui/react-divider';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Create the state required to render ToolbarDivider.\n *\n * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDivider_unstable = (\n props: ToolbarDividerProps,\n ref: React.Ref<HTMLElement>,\n): ToolbarDividerState => {\n const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.js CHANGED Viewed

@@ -13,9 +13,12 @@ const useBaseStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "ftuwxu6",
     "B2u0y6b": "f1lwjmbk"
+  },
+  "vertical": {
+    "B2u0y6b": "fe668z"
   }
 }, {
-  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1lwjmbk{max-width:1px;}"]
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1lwjmbk{max-width:1px;}", ".fe668z{max-width:initial;}"]
 });
 /**
  * Apply styling to the ToolbarDivider slots based on the state
@@ -24,8 +27,11 @@ const useBaseStyles = /*#__PURE__*/react_1.__styles({
 const useToolbarDividerStyles_unstable = state => {
   react_divider_1.useDividerStyles_unstable(state);
+  const {
+    vertical
+  } = state;
   const toolbarDividerStyles = useBaseStyles();
-  state.root.className = react_1.mergeClasses(state.root.className, toolbarDividerStyles.root);
+  state.root.className = react_1.mergeClasses(state.root.className, toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical);
   return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;~~AAQA~~;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,eAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,~~CAAa~~,KAAK,CAAC,IAAN,CAAW,~~SAAxB~~,~~EAAmC~~,oBAAoB,CAAC,~~IAAxD~~,CAAvB;~~EACA~~,OAAO,KAAP;AACD,~~CALM~~;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n },\n});\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 toolbarDividerStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, toolbarDividerStyles.~~root~~);\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/ToolbarDivider/useToolbarDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAWA;;AAEG;;;AACI,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,eAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,MAAM;IAAE;EAAF,IAAe,KAArB;EACA,MAAM,oBAAoB,GAAG,aAAa,EAA1C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EAErB,oBAAoB,CAAC,IAFA,EAGrB,CAAC,QAAD,IAAa,oBAAoB,CAAC,QAHb,CAAvB;EAKA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nimport type { ToolbarDividerState } from './ToolbarDivider.types';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n root: {\n display: 'inline-flex',\n maxWidth: '1px',\n },\n vertical: {\n maxWidth: 'initial',\n },\n});\n\n/*\n Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {\n useDividerStyles_unstable(state);\n const { vertical } = state;\n const toolbarDividerStyles = useBaseStyles();\n state.root.className = mergeClasses(\n state.root.className,\n toolbarDividerStyles.root,\n !vertical && toolbarDividerStyles.vertical,\n );\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarRadio/ToolbarRadio.js CHANGED Viewed

@@ -18,9 +18,7 @@ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 exports.ToolbarRadio = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    size
-  } = ToolbarContext_1.useToolbarContext();
+  const size = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.size);
   const state = react_radio_1.useRadio_unstable(props, ref);
   useToolbarRadioStyles_1.useToolbarRadioStyles_unstable({
     size,

package/lib-commonjs/components/ToolbarRadio/ToolbarRadio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarRadio/ToolbarRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM~~;IAAE;EAAF~~,~~IAAW~~,gBAAA,CAAA,~~iBAAA~~,~~EAAjB~~;EACA,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EACA,uBAAA,CAAA,8BAAA,CAA+B;IAAE,IAAF;IAAQ,GAAG;EAAX,CAA/B;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALmE,CAAvD;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioProps } from './ToolbarRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRadio_unstable, renderRadio_unstable } from '@fluentui/react-radio';\nimport { useToolbarRadioStyles_unstable } from './useToolbarRadioStyles';\nimport { ~~useToolbarContext~~ } from '../Toolbar/ToolbarContext';\n\n/*\n ToolbarRadio component is a Radio to be used inside Toolbar\n */\nexport const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps> = React.forwardRef((props, ref) => {\n const { size } = ~~useToolbarContext~~();\n const state = useRadio_unstable(props, ref);\n useToolbarRadioStyles_unstable({ size, ...state });\n return renderRadio_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioProps>;\n\nToolbarRadio.displayName = 'ToolbarRadio';\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/ToolbarRadio/ToolbarRadio.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EACA,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EACA,uBAAA,CAAA,8BAAA,CAA+B;IAAE,IAAF;IAAQ,GAAG;EAAX,CAA/B;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALmE,CAAvD;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarRadioProps } from './ToolbarRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRadio_unstable, renderRadio_unstable } from '@fluentui/react-radio';\nimport { useToolbarRadioStyles_unstable } from './useToolbarRadioStyles';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/*\n ToolbarRadio component is a Radio to be used inside Toolbar\n */\nexport const ToolbarRadio: ForwardRefComponent<ToolbarRadioProps> = React.forwardRef((props, ref) => {\n const size = useToolbarContext_unstable(ctx => ctx.size);\n const state = useRadio_unstable(props, ref);\n useToolbarRadioStyles_unstable({ size, ...state });\n return renderRadio_unstable(state);\n}) as ForwardRefComponent<ToolbarRadioProps>;\n\nToolbarRadio.displayName = 'ToolbarRadio';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js CHANGED Viewed

@@ -17,17 +17,25 @@ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 const useToolbarToggleButton_unstable = (props, ref) => {
-  const {
-    handleToggleButton,
-    size
-  } = ToolbarContext_1.useToolbarContext();
+  const handleToggleButton = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.handleToggleButton);
+  const checked = ToolbarContext_1.useToolbarContext_unstable(ctx => {
+    var _a;
+    return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value));
+  });
+  const size = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.size);
   const {
     onClick: onClickOriginal
   } = props;
-  const state = react_button_1.useToggleButton_unstable({
+  const toggleButtonState = react_button_1.useToggleButton_unstable({
     size,
+    checked,
     ...props
   }, ref);
+  const state = { ...toggleButtonState,
+    name: props.name,
+    value: props.value
+  };
   const handleOnClick = e => {
     if (state.disabled) {

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM;~~IAAE~~,~~kBAAF~~;~~IAAsB~~;~~EAAtB~~,~~IAA+B~~,gBAAA,CAAA,~~iBAAA~~,~~EAArC~~;~~EACA~~,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,~~KAAK~~,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,GAAG;~~EAAX~~,CAAzB,~~EAA6C~~,~~GAA7C~~,~~CAAd~~;;~~EAEA~~,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,~~CAvBM~~;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { ~~useToolbarContext~~ } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const { handleToggleButton, size } = ~~useToolbarContext~~();\n const { onClick: onClickOriginal } = props;\n const ~~state~~ = useToggleButton_unstable({ size, ...props }, ref) as ToolbarToggleButtonState;\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;AAKG;;;AACI,MAAM,+BAA+B,GAAG,CAC7C,KAD6C,EAE7C,GAF6C,KAGjB;EAC5B,MAAM,kBAAkB,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,kBAAtC,CAA3B;EACA,MAAM,OAAO,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAG;IAAA,IAAA,EAAA;;IAAC,OAAA,CAAC,EAAC,CAAA,EAAA,GAAA,GAAG,CAAC,aAAJ,CAAkB,KAAK,CAAC,IAAxB,CAAA,MAA6B,IAA7B,IAA6B,EAAA,KAAA,KAAA,CAA7B,GAA6B,KAAA,CAA7B,GAA6B,EAAA,CAAE,QAAF,CAAW,KAAK,CAAC,KAAjB,CAA9B,CAAD;EAAsD,CAAxF,CAAhB;EACA,MAAM,IAAI,GAAG,gBAAA,CAAA,0BAAA,CAA2B,GAAG,IAAI,GAAG,CAAC,IAAtC,CAAb;EAEA,MAAM;IAAE,OAAO,EAAE;EAAX,IAA+B,KAArC;EACA,MAAM,iBAAiB,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,OAAR;IAAiB,GAAG;EAApB,CAAzB,EAAsD,GAAtD,CAA1B;EACA,MAAM,KAAK,GAA6B,EACtC,GAAG,iBADmC;IAEtC,IAAI,EAAE,KAAK,CAAC,IAF0B;IAGtC,KAAK,EAAE,KAAK,CAAC;EAHyB,CAAxC;;EAMA,MAAM,aAAa,GACjB,CADoB,IAElB;IACF,IAAI,KAAK,CAAC,QAAV,EAAoB;MAClB,CAAC,CAAC,cAAF;MACA,CAAC,CAAC,eAAF;MACA;IACD;;IAED,kBAAkB,KAAA,IAAlB,IAAA,kBAAkB,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAA,kBAAkB,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAlB;IACA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;EACD,CAXD;;EAaA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,aAArB;EACA,OAAO,KAAP;AACD,CA/BM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import * as React from 'react';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\n/*\n Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToolbarToggleButton_unstable = (\n props: ToolbarToggleButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ToolbarToggleButtonState => {\n const handleToggleButton = useToolbarContext_unstable(ctx => ctx.handleToggleButton);\n const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n const size = useToolbarContext_unstable(ctx => ctx.size);\n\n const { onClick: onClickOriginal } = props;\n const toggleButtonState = useToggleButton_unstable({ size, checked, ...props }, ref);\n const state: ToolbarToggleButtonState = {\n ...toggleButtonState,\n name: props.name,\n value: props.value,\n };\n\n const handleOnClick = (\n e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n ) => {\n if (state.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n handleToggleButton?.(e, state.name, state.value, state.checked);\n onClickOriginal?.(e);\n };\n\n state.root.onClick = handleOnClick;\n return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.0-beta.9",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,17 +29,18 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.14",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.15",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.1.3",
-    "@fluentui/react-divider": "^9.1.0",
+    "@fluentui/react-button": "^9.1.4",
+    "@fluentui/react-divider": "^9.1.1",
     "@fluentui/react-theme": "^9.1.0",
-    "@fluentui/react-utilities": "^9.1.0",
-    "@fluentui/react-radio": "^9.0.7",
-    "@fluentui/react-tabster": "^9.1.2",
-    "@griffel/react": "^1.3.0",
+    "@fluentui/react-utilities": "^9.1.1",
+    "@fluentui/react-context-selector": "^9.0.4",
+    "@fluentui/react-radio": "^9.0.8",
+    "@fluentui/react-tabster": "^9.1.3",
+    "@griffel/react": "^1.4.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {