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

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-toolbar",
   "entries": [
     {
-      "date": "Thu, 17 Nov 2022 23:02:27 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:36 GMT",
+      "tag": "@fluentui/react-toolbar_v9.0.0-beta.15",
+      "version": "9.0.0-beta.15",
+      "comments": {
+        "none": [
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "803091ab911f810964555cedb64f7355df2d4554",
+            "comment": "chore: update default button appearance for toolbar"
+          },
+          {
+            "author": "chassunc@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "1bff9a3148961667fe516b46fead5798db794ae6",
+            "comment": "feat: add large size for toolbar"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.1.10",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.1.6",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.0.13",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.3.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:30 GMT",
       "tag": "@fluentui/react-toolbar_v9.0.0-beta.14",
       "version": "9.0.0-beta.14",
       "comments": {

package/CHANGELOG.md

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

package/dist/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n  /** The items for this value that are checked */\n  checkedItems: string[];\n  /** The name of the value */\n  name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n  /**\n   * Toolbar can have small or medium size\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Toolbar can be vertical styled\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * Map of all checked values\n   */\n  checkedValues?: Record<string, string[]>;\n\n  /**\n   * Default values to be checked on mount\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n\n  /**\n   * Callback when checked items change for value with a name\n   *\n   * @param event - React's original SyntheticEvent\n   * @param data - A data object with relevant information\n   */\n  onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n  Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n  Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleToggleButton: ToggableHandler;\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleRadio: ToggableHandler;\n  };\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n  handleToggleButton?: ToggableHandler;\n  handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n  toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &\n  Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked?: boolean,\n) => void;\n"]}
+{"version":3,"file":"Toolbar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-toolbar/src/components/Toolbar/Toolbar.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToolbarCheckedValueChangeData = {\n  /** The items for this value that are checked */\n  checkedItems: string[];\n  /** The name of the value */\n  name: string;\n};\n\nexport type ToolbarCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\n/**\n * Toolbar Props\n */\nexport type ToolbarProps = ComponentProps<ToolbarSlots> & {\n  /**\n   * Toolbar can have small or medium size\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Toolbar can be vertical styled\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * Map of all checked values\n   */\n  checkedValues?: Record<string, string[]>;\n\n  /**\n   * Default values to be checked on mount\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n\n  /**\n   * Callback when checked items change for value with a name\n   *\n   * @param event - React's original SyntheticEvent\n   * @param data - A data object with relevant information\n   */\n  onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\n/**\n * State used in rendering Toolbar\n */\nexport type ToolbarState = ComponentState<ToolbarSlots> &\n  Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> &\n  Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleToggleButton: ToggableHandler;\n    /*\n     * Toggles the state of a ToggleButton item\n     */\n    handleRadio: ToggableHandler;\n  };\n\nexport type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {\n  handleToggleButton?: ToggableHandler;\n  handleRadio?: ToggableHandler;\n};\n\nexport type ToolbarContextValues = {\n  toolbar: ToolbarContextValue;\n};\n\nexport type UninitializedToolbarState = Omit<ToolbarState, 'checkedValues' | 'handleToggleButton' | 'handleRadio'> &\n  Partial<Pick<ToolbarState, 'checkedValues'>>;\n\nexport type ToggableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked?: boolean,\n) => void;\n"]}

package/lib/components/Toolbar/useToolbarStyles.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;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/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/Toolbar/useToolbarStyles.ts"],"names":[],"mappings":"AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAAqB,KAA3B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAEjC,MAAM,CAAC,IAF0B,EAGjC,QAAQ,IAAI,MAAM,CAAC,QAHc,EAIjC,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KAJP,EAKjC,IAAI,KAAK,QAAT,IAAqB,CAAC,QAAtB,IAAkC,MAAM,CAAC,MALR,EAMjC,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KANP,EAOjC,KAAK,CAAC,IAAN,CAAW,SAPsB,CAAnC;EAUA,OAAO,KAAP;AACD,CAdM","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ToolbarSlots, ToolbarState } from './Toolbar.types';\n\nexport const toolbarClassNames: SlotClassNames<ToolbarSlots> = {\n  root: 'fui-Toolbar',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: {\n    height: '32px',\n  },\n  medium: {\n    height: '40px',\n  },\n  large: {\n    height: '48px',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToolbarButton/ToolbarButton.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,qBAAT,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/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,SAAS,qBAAT,EAAgC,wBAAhC,EAA0D,kBAA1D,QAAoF,wBAApF;AAEA;;;AAGG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,kBAAkB,CAAC;IAAE,UAAU,EAAE,QAAd;IAAwB,GAAG;EAA3B,CAAD,EAAqC,GAArC,CAAhC;EACA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,CAA5B,CAHoG,CAIpG;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { ToolbarButtonProps } from './ToolbarButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from '@fluentui/react-button';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable({ appearance: 'subtle', ...props }, ref);\n  useButtonStyles_unstable(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/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/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/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;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAsBA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAAqB,KAA3B;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,iBAAA,CAAkB,IADG,EAErB,MAAM,CAAC,IAFc,EAGrB,QAAQ,IAAI,MAAM,CAAC,QAHE,EAIrB,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KAJnB,EAKrB,IAAI,KAAK,QAAT,IAAqB,CAAC,QAAtB,IAAkC,MAAM,CAAC,MALpB,EAMrB,IAAI,KAAK,OAAT,IAAoB,CAAC,QAArB,IAAiC,MAAM,CAAC,KANnB,EAOrB,KAAK,CAAC,IAAN,CAAW,SAPU,CAAvB;EAUA,OAAO,KAAP;AACD,CAdM;;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    alignItems: 'center',\n    ...shorthands.padding('4px', '8px', '4px', '8px'),\n    ...shorthands.gap('8px'),\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n  small: {\n    height: '32px',\n  },\n  medium: {\n    height: '40px',\n  },\n  large: {\n    height: '48px',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {\n  const styles = useStyles();\n  const { vertical, size } = state;\n  state.root.className = mergeClasses(\n    toolbarClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    size === 'small' && !vertical && styles.small,\n    size === 'medium' && !vertical && styles.medium,\n    size === 'large' && !vertical && styles.large,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -8,8 +8,6 @@ exports.ToolbarButton = void 0;
 const React = /*#__PURE__*/require("react");
 
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-
-const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 /**
  * ToolbarButton component is a Button to be used inside Toolbar
  * which will respect toolbar props such as `size`
@@ -17,10 +15,8 @@ const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
 
 
 exports.ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const size = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.size);
   const state = react_button_1.useButton_unstable({
-    size,
-    appearance: 'transparent',
+    appearance: 'subtle',
     ...props
   }, ref);
   react_button_1.useButtonStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-toolbar/src/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/"}
+{"version":3,"sources":["packages/react-components/react-toolbar/src/components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,cAAA,CAAA,kBAAA,CAAmB;IAAE,UAAU,EAAE,QAAd;IAAwB,GAAG;EAA3B,CAAnB,EAAuD,GAAvD,CAAd;EACA,cAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CAHoG,CAIpG;AACD,CALqE,CAAzD;AAOb,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';\n\n/**\n * ToolbarButton component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarButton: ForwardRefComponent<ToolbarButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable({ appearance: 'subtle', ...props }, ref);\n  useButtonStyles_unstable(state);\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarButtonProps>;\n\nToolbarButton.displayName = 'ToolbarButton';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.0.0-beta.14",
+  "version": "9.0.0-beta.15",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,13 +32,13 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.1.9",
-    "@fluentui/react-divider": "^9.1.5",
-    "@fluentui/react-theme": "^9.1.2",
+    "@fluentui/react-button": "^9.1.10",
+    "@fluentui/react-divider": "^9.1.6",
+    "@fluentui/react-theme": "^9.1.3",
     "@fluentui/react-utilities": "^9.2.2",
     "@fluentui/react-context-selector": "^9.1.2",
-    "@fluentui/react-radio": "^9.0.12",
-    "@fluentui/react-tabster": "^9.3.1",
+    "@fluentui/react-radio": "^9.0.13",
+    "@fluentui/react-tabster": "^9.3.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },