@fluentui/react-toolbar 9.6.4 → 9.6.6

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 (23) hide show
  1. package/CHANGELOG.md +38 -2
  2. package/dist/index.d.ts +6 -5
  3. package/lib/components/Toolbar/renderToolbar.js.map +1 -1
  4. package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map +1 -1
  5. package/lib/components/ToolbarGroup/ToolbarGroup.types.js.map +1 -1
  6. package/lib/components/ToolbarGroup/renderToolbarGroup.js.map +1 -1
  7. package/lib/components/ToolbarGroup/useToolbarGroup.js +4 -1
  8. package/lib/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
  9. package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js +18 -2
  10. package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map +1 -1
  11. package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js +14 -2
  12. package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map +1 -1
  13. package/lib-commonjs/components/Toolbar/renderToolbar.js.map +1 -1
  14. package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map +1 -1
  15. package/lib-commonjs/components/ToolbarGroup/ToolbarGroup.types.js.map +1 -1
  16. package/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js.map +1 -1
  17. package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js +4 -1
  18. package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
  19. package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js +20 -1
  20. package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map +1 -1
  21. package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js +13 -1
  22. package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map +1 -1
  23. package/package.json +13 -13
package/CHANGELOG.md CHANGED
@@ -1,12 +1,48 @@
1
1
  # Change Log - @fluentui/react-toolbar
2
2
 
3
- This log was last generated on Thu, 07 Aug 2025 09:59:13 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 08 Sep 2025 12:41:29 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.6)
8
+
9
+ Mon, 08 Sep 2025 12:41:29 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.5..@fluentui/react-toolbar_v9.6.6)
11
+
12
+ ### Patches
13
+
14
+ - fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
15
+ - chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
16
+ - chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
17
+ - Bump @fluentui/react-button to v9.6.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
18
+ - Bump @fluentui/react-divider to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
19
+ - Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
20
+ - Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
21
+ - Bump @fluentui/react-context-selector to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
22
+ - Bump @fluentui/react-radio to v9.5.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
23
+ - Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
24
+ - Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
25
+
26
+ ## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.5)
27
+
28
+ Thu, 21 Aug 2025 12:25:24 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.4..@fluentui/react-toolbar_v9.6.5)
30
+
31
+ ### Patches
32
+
33
+ - fix: apply styles for ToolbarGroup ([PR #35052](https://github.com/microsoft/fluentui/pull/35052) by olfedias@microsoft.com)
34
+ - Bump @fluentui/react-button to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
35
+ - Bump @fluentui/react-divider to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
36
+ - Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
37
+ - Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
38
+ - Bump @fluentui/react-context-selector to v9.2.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
39
+ - Bump @fluentui/react-radio to v9.5.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
40
+ - Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
41
+ - Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
42
+
7
43
  ## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.4)
8
44
 
9
- Thu, 07 Aug 2025 09:59:13 GMT
45
+ Thu, 07 Aug 2025 10:03:33 GMT
10
46
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.3..@fluentui/react-toolbar_v9.6.4)
11
47
 
12
48
  ### Patches
package/dist/index.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- /// <reference types="react" />
2
-
3
1
  import { ButtonProps } from '@fluentui/react-button';
4
2
  import { ButtonSlots } from '@fluentui/react-button';
5
3
  import { ButtonState } from '@fluentui/react-button';
@@ -8,6 +6,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
8
6
  import { DividerSlots } from '@fluentui/react-divider';
9
7
  import { DividerState } from '@fluentui/react-divider';
10
8
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
9
+ import type { JSXElement } from '@fluentui/react-utilities';
11
10
  import * as React_2 from 'react';
12
11
  import type { Slot } from '@fluentui/react-utilities';
13
12
  import { SlotClassNames } from '@fluentui/react-utilities';
@@ -17,12 +16,12 @@ import { ToggleButtonState } from '@fluentui/react-button';
17
16
  /**
18
17
  * Render the final JSX of Toolbar
19
18
  */
20
- export declare const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSX.Element;
19
+ export declare const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSXElement;
21
20
 
22
21
  /**
23
22
  * Render the final JSX of ToolbarGroup
24
23
  */
25
- export declare const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSX.Element;
24
+ export declare const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSXElement;
26
25
 
27
26
  declare type ToggableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked?: boolean) => void;
28
27
 
@@ -113,7 +112,9 @@ declare type ToolbarGroupSlots = {
113
112
  /**
114
113
  * State used in rendering ToolbarButton
115
114
  */
116
- export declare type ToolbarGroupState = ComponentState<ToolbarGroupSlots>;
115
+ export declare type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {
116
+ vertical?: boolean;
117
+ };
117
118
 
118
119
  /**
119
120
  * Toolbar Props
package/lib/components/Toolbar/renderToolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,mBAAmB;AAElD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DJ,YAA0BG;IAE1B,qBACE,KAACF,eAAeI,QAAQ;QAACC,OAAOF,cAAcG,OAAO;kBACnD,cAAA,KAACJ,MAAMK,IAAI;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
1
+ {"version":3,"sources":["../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues): JSXElement => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,cAAc,QAAQ,mBAAmB;AAElD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DJ,YAA0BG;IAE1B,qBACE,KAACF,eAAeI,QAAQ;QAACC,OAAOF,cAAcG,OAAO;kBACnD,cAAA,KAACJ,MAAMK,IAAI;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n 'use no memo';\n\n const buttonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE,MAAMC,gBAAgBH,WAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;IAEAX,yBAAyBQ;AAC3B,EAAE"}
1
+ {"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n 'use no memo';\n\n const buttonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,wBAAwB,QAAQ,yBAAyB;AAGlE,MAAMC,gBAAgBH,WAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,GAAGZ,aAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;IAEAX,yBAAyBQ;AAC3B,EAAE"}
package/lib/components/ToolbarGroup/ToolbarGroup.types.js.map CHANGED
@@ -1 +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"}
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 vertical?: boolean;\n};\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAEE"}
package/lib/components/ToolbarGroup/renderToolbarGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n assertSlots<ToolbarGroupSlots>(state);\n\n return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}
1
+ {"version":3,"sources":["../src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState): JSXElement => {\n assertSlots<ToolbarGroupSlots>(state);\n\n return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}
package/lib/components/ToolbarGroup/useToolbarGroup.js CHANGED
@@ -1,10 +1,12 @@
1
1
  import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
2
2
  import * as React from 'react';
3
+ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
3
4
  /**
4
5
  * Given user props, defines default props for the Group
5
6
  * @param props - User provided props to the Group component.
6
7
  * @param ref - User provided ref to be passed to the Group component.
7
8
  */ export const useToolbarGroup_unstable = (props, ref)=>{
9
+ const vertical = useToolbarContext_unstable((ctx)=>ctx.vertical);
8
10
  return {
9
11
  components: {
10
12
  root: 'div'
@@ -15,6 +17,7 @@ import * as React from 'react';
15
17
  ...props
16
18
  }), {
17
19
  elementType: 'div'
18
- })
20
+ }),
21
+ vertical
19
22
  };
20
23
  };
package/lib/components/ToolbarGroup/useToolbarGroup.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,13 +1,29 @@
1
- import { mergeClasses } from '@griffel/react';
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
2
  export const toolbarGroupClassNames = {
3
3
  root: 'fui-ToolbarGroup'
4
4
  };
5
+ const useStyles = /*#__PURE__*/__styles({
6
+ root: {
7
+ mc9l5x: "f22iagw",
8
+ Bt984gj: "f122n59"
9
+ },
10
+ vertical: {
11
+ Beiy3e4: "f1vx9l62",
12
+ a9b677: "f1acs6jw"
13
+ }
14
+ }, {
15
+ d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1vx9l62{flex-direction:column;}", ".f1acs6jw{width:fit-content;}"]
16
+ });
5
17
  /**
6
18
  * Apply styling to the Toolbar slots based on the state
7
19
  */
8
20
  export const useToolbarGroupStyles_unstable = state => {
9
21
  'use no memo';
10
22
 
11
- state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);
23
+ const {
24
+ vertical
25
+ } = state;
26
+ const styles = useStyles();
27
+ state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
12
28
  return state;
13
29
  };
package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map CHANGED
@@ -1 +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":[]}
1
+ {"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 CHANGED
@@ -1,11 +1,23 @@
1
- import { mergeClasses } from '@griffel/react';
1
+ import { makeStyles, mergeClasses } from '@griffel/react';
2
2
  export const toolbarGroupClassNames = {
3
3
  root: 'fui-ToolbarGroup'
4
4
  };
5
+ const useStyles = makeStyles({
6
+ root: {
7
+ display: 'flex',
8
+ alignItems: 'center'
9
+ },
10
+ vertical: {
11
+ flexDirection: 'column',
12
+ width: 'fit-content'
13
+ }
14
+ });
5
15
  /**
6
16
  * Apply styling to the Toolbar slots based on the state
7
17
  */ export const useToolbarGroupStyles_unstable = (state)=>{
8
18
  'use no memo';
9
- state.root.className = mergeClasses(toolbarGroupClassNames.root, state.root.className);
19
+ const { vertical } = state;
20
+ const styles = useStyles();
21
+ state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
10
22
  return state;
11
23
  };
package/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map CHANGED
@@ -1 +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"}
1
+ {"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/Toolbar/renderToolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":";;;;+BASaE;;;;;;4BARb,gDAAiD;gCACrB,4BAA4B;gCAEzB,mBAAmB;AAK3C,+BAA+B,CAACC,OAAqBC;QAC1DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACF,8BAAAA,CAAeI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,OAAO;kBACnD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
1
+ {"version":3,"sources":["../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues): JSXElement => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;gCAGzB,mBAAmB;AAK3C,+BAA+B,CAACC,OAAqBC;QAC1DJ,2BAAAA,EAA0BG;IAE1B,OAAA,WAAA,OACE,eAAA,EAACF,8BAAAA,CAAeI,QAAQ,EAAA;QAACC,OAAOF,cAAcG,OAAO;kBACnD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA;sBAAEL,MAAMK,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState) => {\n 'use no memo';\n\n const buttonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":";;;;+BAiBaS;;;;;;uBAjB4B,iBAAiB;6BACjB,yBAAyB;AAGlE,MAAMN,oBAAgBH,iBAAAA,EAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,GAAGZ,uBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;QAEAX,qCAAAA,EAAyBQ;AAC3B,EAAE"}
1
+ {"version":3,"sources":["../src/components/ToolbarButton/useToolbarButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonState } from './ToolbarButton.types';\n\nconst useBaseStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n verticalIcon: {\n fontSize: '24px',\n margin: '0',\n },\n});\n\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): void => {\n 'use no memo';\n\n const buttonStyles = useBaseStyles();\n\n state.root.className = mergeClasses(state.vertical && buttonStyles.vertical, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(state.vertical && buttonStyles.verticalIcon, state.icon.className);\n }\n\n useButtonStyles_unstable(state);\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","useBaseStyles","vertical","flexDirection","verticalIcon","fontSize","margin","useToolbarButtonStyles_unstable","state","buttonStyles","root","className","icon"],"mappings":";;;;+BAiBaS;;;;;;uBAjB4B,iBAAiB;6BACjB,yBAAyB;AAGlE,MAAMN,oBAAgBH,iBAAAA,EAAW;IAC/BI,UAAU;QACRC,eAAe;IACjB;IACAC,cAAc;QACZC,UAAU;QACVC,QAAQ;IACV;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAMC,eAAeR;IAErBO,MAAME,IAAI,CAACC,SAAS,OAAGZ,mBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaP,QAAQ,EAAEM,MAAME,IAAI,CAACC,SAAS;IAEjG,IAAIH,MAAMI,IAAI,EAAE;QACdJ,MAAMI,IAAI,CAACD,SAAS,GAAGZ,uBAAAA,EAAaS,MAAMN,QAAQ,IAAIO,aAAaL,YAAY,EAAEI,MAAMI,IAAI,CAACD,SAAS;IACvG;QAEAX,qCAAAA,EAAyBQ;AAC3B,EAAE"}
package/lib-commonjs/components/ToolbarGroup/ToolbarGroup.types.js.map CHANGED
@@ -1 +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"}
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 vertical?: boolean;\n};\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAEE"}
package/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n assertSlots<ToolbarGroupSlots>(state);\n\n return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAMjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}
1
+ {"version":3,"sources":["../src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState): JSXElement => {\n assertSlots<ToolbarGroupSlots>(state);\n\n return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}
package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js CHANGED
@@ -11,7 +11,9 @@ Object.defineProperty(exports, "useToolbarGroup_unstable", {
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _reactutilities = require("@fluentui/react-utilities");
13
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
+ const _ToolbarContext = require("../Toolbar/ToolbarContext");
14
15
  const useToolbarGroup_unstable = (props, ref)=>{
16
+ const vertical = (0, _ToolbarContext.useToolbarContext_unstable)((ctx)=>ctx.vertical);
15
17
  return {
16
18
  components: {
17
19
  root: 'div'
@@ -22,6 +24,7 @@ const useToolbarGroup_unstable = (props, ref)=>{
22
24
  ...props
23
25
  }), {
24
26
  elementType: 'div'
25
- })
27
+ }),
28
+ vertical
26
29
  };
27
30
  };
package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -20,8 +20,27 @@ const _react = require("@griffel/react");
20
20
  const toolbarGroupClassNames = {
21
21
  root: 'fui-ToolbarGroup'
22
22
  };
23
+ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
24
+ root: {
25
+ mc9l5x: "f22iagw",
26
+ Bt984gj: "f122n59"
27
+ },
28
+ vertical: {
29
+ Beiy3e4: "f1vx9l62",
30
+ a9b677: "f1acs6jw"
31
+ }
32
+ }, {
33
+ d: [
34
+ ".f22iagw{display:flex;}",
35
+ ".f122n59{align-items:center;}",
36
+ ".f1vx9l62{flex-direction:column;}",
37
+ ".f1acs6jw{width:fit-content;}"
38
+ ]
39
+ });
23
40
  const useToolbarGroupStyles_unstable = (state)=>{
24
41
  'use no memo';
25
- state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, state.root.className);
42
+ const { vertical } = state;
43
+ const styles = useStyles();
44
+ state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
26
45
  return state;
27
46
  };
package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -20,8 +20,20 @@ const _react = require("@griffel/react");
20
20
  const toolbarGroupClassNames = {
21
21
  root: 'fui-ToolbarGroup'
22
22
  };
23
+ const useStyles = (0, _react.makeStyles)({
24
+ root: {
25
+ display: 'flex',
26
+ alignItems: 'center'
27
+ },
28
+ vertical: {
29
+ flexDirection: 'column',
30
+ width: 'fit-content'
31
+ }
32
+ });
23
33
  const useToolbarGroupStyles_unstable = (state)=>{
24
34
  'use no memo';
25
- state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, state.root.className);
35
+ const { vertical } = state;
36
+ const styles = useStyles();
37
+ state.root.className = (0, _react.mergeClasses)(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
26
38
  return state;
27
39
  };
package/lib-commonjs/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-toolbar",
3
- "version": "9.6.4",
3
+ "version": "9.6.6",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,23 +20,23 @@
20
20
  "@fluentui/scripts-cypress": "*"
21
21
  },
22
22
  "dependencies": {
23
- "@fluentui/react-button": "^9.6.4",
24
- "@fluentui/react-divider": "^9.4.3",
23
+ "@fluentui/react-button": "^9.6.6",
24
+ "@fluentui/react-divider": "^9.4.5",
25
25
  "@fluentui/react-theme": "^9.2.0",
26
- "@fluentui/react-utilities": "^9.23.2",
27
- "@fluentui/react-jsx-runtime": "^9.1.5",
28
- "@fluentui/react-context-selector": "^9.2.5",
29
- "@fluentui/react-radio": "^9.5.3",
30
- "@fluentui/react-shared-contexts": "^9.24.1",
31
- "@fluentui/react-tabster": "^9.26.3",
26
+ "@fluentui/react-utilities": "^9.24.1",
27
+ "@fluentui/react-jsx-runtime": "^9.2.0",
28
+ "@fluentui/react-context-selector": "^9.2.7",
29
+ "@fluentui/react-radio": "^9.5.5",
30
+ "@fluentui/react-shared-contexts": "^9.25.1",
31
+ "@fluentui/react-tabster": "^9.26.5",
32
32
  "@griffel/react": "^1.5.22",
33
33
  "@swc/helpers": "^0.5.1"
34
34
  },
35
35
  "peerDependencies": {
36
- "@types/react": ">=16.14.0 <19.0.0",
37
- "@types/react-dom": ">=16.9.0 <19.0.0",
38
- "react": ">=16.14.0 <19.0.0",
39
- "react-dom": ">=16.14.0 <19.0.0"
36
+ "@types/react": ">=16.14.0 <20.0.0",
37
+ "@types/react-dom": ">=16.9.0 <20.0.0",
38
+ "react": ">=16.14.0 <20.0.0",
39
+ "react-dom": ">=16.14.0 <20.0.0"
40
40
  },
41
41
  "beachball": {
42
42
  "disallowedChangeTypes": [