@fluentui/react-toolbar 9.6.3 → 9.6.5

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Wed, 30 Jul 2025 16:53:00 GMT and should not be manually modified.
+This log was last generated on Thu, 21 Aug 2025 12:20:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.5)
+
+Thu, 21 Aug 2025 12:20:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.4..@fluentui/react-toolbar_v9.6.5)
+
+### Patches
+
+- fix: apply styles for ToolbarGroup ([PR #35052](https://github.com/microsoft/fluentui/pull/35052) by olfedias@microsoft.com)
+- Bump @fluentui/react-button to v9.6.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-divider to v9.4.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-radio to v9.5.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+
+## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.4)
+
+Thu, 07 Aug 2025 10:03:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.3..@fluentui/react-toolbar_v9.6.4)
+
+### Patches
+
+- Bump @fluentui/react-button to v9.6.4 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-divider to v9.4.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-radio to v9.5.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+
 ## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.3)
 
-Wed, 30 Jul 2025 16:53:00 GMT 
+Wed, 30 Jul 2025 16:55:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.2..@fluentui/react-toolbar_v9.6.3)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import { ButtonProps } from '@fluentui/react-button';
 import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
@@ -113,7 +111,9 @@ declare type ToolbarGroupSlots = {
 /**
  * State used in rendering ToolbarButton
  */
-export declare type ToolbarGroupState = ComponentState<ToolbarGroupSlots>;
+export declare type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {
+    vertical?: boolean;
+};
 
 /**
  * Toolbar Props

package/lib/components/ToolbarGroup/ToolbarGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAAkE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {\n  vertical?: boolean;\n};\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAEE"}

package/lib/components/ToolbarGroup/useToolbarGroup.js

@@ -1,10 +1,12 @@
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
+import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**
  * Given user props, defines default props for the Group
  * @param props - User provided props to the Group component.
  * @param ref - User provided ref to be passed to the Group component.
  */ export const useToolbarGroup_unstable = (props, ref)=>{
+    const vertical = useToolbarContext_unstable((ctx)=>ctx.vertical);
     return {
         components: {
             root: 'div'
@@ -15,6 +17,7 @@ import * as React from 'react';
             ...props
         }), {
             elementType: 'div'
-        })
+        }),
+        vertical
     };
 };

package/lib/components/ToolbarGroup/useToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarGroup_unstable","props","ref","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,yBAA+D,OAAO;YACpEK;YACAI,MAAM;YACN,GAAGL,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,WAAWJ,2BAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAA+D,OAAO;YACpEM;YACAM,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js

@@ -1,13 +1,29 @@
-import { mergeClasses } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 export const toolbarGroupClassNames = {
   root: 'fui-ToolbarGroup'
 };
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59"
+  },
+  vertical: {
+    Beiy3e4: "f1vx9l62",
+    a9b677: "f1acs6jw"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1vx9l62{flex-direction:column;}", ".f1acs6jw{width:fit-content;}"]
+});
 /**
  * Apply styling to the Toolbar slots based on the state
  */
 export const useToolbarGroupStyles_unstable = state => {
   'use no memo';
 
-  state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);
+  const {
+    vertical
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
   return state;
 };

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","toolbarGroupClassNames","root","useToolbarGroupStyles_unstable","state","className"],"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACtF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const { vertical } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js

@@ -1,11 +1,23 @@
-import { mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 export const toolbarGroupClassNames = {
     root: 'fui-ToolbarGroup'
 };
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    vertical: {
+        flexDirection: 'column',
+        width: 'fit-content'
+    }
+});
 /**
  * Apply styling to the Toolbar slots based on the state
  */ export const useToolbarGroupStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);
+    const { vertical } = state;
+    const styles = useStyles();
+    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
     return state;
 };

package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","toolbarGroupClassNames","root","useToolbarGroupStyles_unstable","state","className"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,uBAAuBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAErF,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  const { vertical } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    toolbarGroupClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEfO,MAAMR,IAAI,CAACU,SAAS,GAAGZ,aACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/ToolbarGroup/ToolbarGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAAkE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {\n  vertical?: boolean;\n};\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAEE"}

package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js

@@ -11,7 +11,9 @@ Object.defineProperty(exports, "useToolbarGroup_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _ToolbarContext = require("../Toolbar/ToolbarContext");
 const useToolbarGroup_unstable = (props, ref)=>{
+    const vertical = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.vertical);
     return {
         components: {
             root: 'div'
@@ -22,6 +24,7 @@ const useToolbarGroup_unstable = (props, ref)=>{
             ...props
         }), {
             elementType: 'div'
-        })
+        }),
+        vertical
     };
 };

package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarGroup_unstable","props","ref","components","root","always","role","elementType"],"mappings":";;;;+BASaG;;;;;;;gCATkC,4BAA4B;iEACpD,QAAQ;AAQxB,iCAAiC,CACtCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,oBAAAA,CAAKO,MAAM,KACfR,wCAAAA,EAA+D,OAAO;YACpEK;YACAI,MAAM;YACN,GAAGL,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","vertical","ctx","components","root","always","role","elementType"],"mappings":";;;;+BAWaI;;;;;;;gCAXkC,4BAA4B;iEACpD,QAAQ;gCAEY,4BAA4B;AAQhE,iCAAiC,CACtCC,OACAC;IAEA,MAAMC,eAAWJ,0CAAAA,EAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAA+D,OAAO;YACpEM;YACAM,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js

@@ -20,8 +20,27 @@ const _react = require("@griffel/react");
 const toolbarGroupClassNames = {
     root: 'fui-ToolbarGroup'
 };
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59"
+    },
+    vertical: {
+        Beiy3e4: "f1vx9l62",
+        a9b677: "f1acs6jw"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f1acs6jw{width:fit-content;}"
+    ]
+});
 const useToolbarGroupStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, state.root.className);
+    const { vertical } = state;
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
     return state;
 };

package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","toolbarGroupClassNames","root","useToolbarGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,sBAAsB;;;kCAKY;;;;uBANlB,gBAAgB;AACtC,+BAA+B;IAClCC,IAAI,EAAE;AACV,CAAC;AAGU,MAAMC,iCAAkCC,KAAK,IAAG;IACvD,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACtF,OAAOD,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const { vertical } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IACaE,sBAAsB;;;IAelBS,8BAA8B;;;;uBAhBN,gBAAgB;AAClD,+BAA+B;IAClCR,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAM,EAAEL,QAAAA,EAAU,GAAGK,KAAK;IAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,OAAGb,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;IAChI,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js

@@ -20,8 +20,20 @@ const _react = require("@griffel/react");
 const toolbarGroupClassNames = {
     root: 'fui-ToolbarGroup'
 };
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    vertical: {
+        flexDirection: 'column',
+        width: 'fit-content'
+    }
+});
 const useToolbarGroupStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, state.root.className);
+    const { vertical } = state;
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
     return state;
 };

package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","toolbarGroupClassNames","root","useToolbarGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,sBAAAA;;;kCAOAE;;;;uBAVgB,iBAAiB;AAGvC,+BAAkE;IACvED,MAAM;AACR,EAAE;AAKK,MAAMC,iCAAiC,CAACC;IAC7C;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,uBAAuBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAErF,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  const { vertical } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    toolbarGroupClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":";;;;;;;;;;;IAKaE,sBAAAA;;;kCAkBAQ;;;;uBAtB4B,iBAAiB;AAInD,+BAAkE;IACvEP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAKO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEfO,MAAMR,IAAI,CAACU,SAAS,OAAGZ,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.6.3",
+  "version": "9.6.5",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,15 +20,15 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.6.3",
-    "@fluentui/react-divider": "^9.4.2",
+    "@fluentui/react-button": "^9.6.5",
+    "@fluentui/react-divider": "^9.4.4",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.23.1",
-    "@fluentui/react-jsx-runtime": "^9.1.4",
-    "@fluentui/react-context-selector": "^9.2.4",
-    "@fluentui/react-radio": "^9.5.2",
-    "@fluentui/react-shared-contexts": "^9.24.1",
-    "@fluentui/react-tabster": "^9.26.2",
+    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-jsx-runtime": "^9.1.6",
+    "@fluentui/react-context-selector": "^9.2.6",
+    "@fluentui/react-radio": "^9.5.4",
+    "@fluentui/react-shared-contexts": "^9.25.0",
+    "@fluentui/react-tabster": "^9.26.4",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },