@fluentui/react-toolbar 9.0.0-beta.1 → 9.0.0-beta.10

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/ToolbarContext.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,aAAN,CAAyC;EACrE,IAAI,EAAE;AAD+D,CAAzC,CAAjB;;AAIN,MAAM,iBAAiB,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,OAAA,CAAA,cAAjB,CAAhC;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = React.createContext<ToolbarContextValue>({\n  size: 'medium',\n});\n\nexport const useToolbarContext = () => React.useContext(ToolbarContext);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Toolbar/ToolbarContext.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,gBAAiB,wBAAA,CAAA,aAAA,CAA+C,SAA/C,CAAjB;AAEb,MAAM,0BAA0B,GAAwB;EACtD,IAAI,EAAE,QADgD;EAEtD,kBAAkB,EAAE,MAAM,IAF4B;EAGtD,QAAQ,EAAE,KAH4C;EAItD,aAAa,EAAE;AAJuC,CAAxD;;AAOO,MAAM,0BAA0B,GAAO,QAAJ,IACxC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,cAAnB,EAAmC,CAAC,GAAG,GAAG,0BAAP,KAAsC,QAAQ,CAAC,GAAD,CAAjF,CADK;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { ToolbarContextValue } from './Toolbar.types';\n\nexport const ToolbarContext = createContext<ToolbarContextValue | undefined>(undefined) as Context<ToolbarContextValue>;\n\nconst toolbarContextDefaultValue: ToolbarContextValue = {\n  size: 'medium' as 'medium',\n  handleToggleButton: () => null,\n  vertical: false,\n  checkedValues: {},\n};\n\nexport const useToolbarContext_unstable = <T>(selector: ContextSelector<ToolbarContextValue, T>): T =>\n  useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}

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

@@ -7,6 +7,8 @@ exports.useToolbar_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
+const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
+
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
  * Create the state required to render Toolbar.
@@ -20,15 +22,17 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 
 
 const useToolbar_unstable = (props, ref) => {
+  const {
+    size = 'medium',
+    vertical = false
+  } = props;
   const arrowNavigationProps = react_tabster_1.useArrowNavigationGroup({
     circular: true,
     axis: 'horizontal'
   });
-  const {
-    size = 'medium'
-  } = props;
-  return {
+  const initialState = {
     size,
+    vertical,
     // TODO add appropriate props/defaults
     components: {
       // TODO add each slot's element type or component
@@ -36,12 +40,44 @@ const useToolbar_unstable = (props, ref) => {
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
-    root: react_utilities_1.getNativeElementProps('div', {
+    root: react_utilities_2.getNativeElementProps('div', {
+      role: 'toolbar',
       ref,
       ...arrowNavigationProps,
       ...props
-    }),
-    ...props
+    })
+  };
+  const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
+    state: initialState.checkedValues,
+    defaultState: initialState.defaultCheckedValues,
+    initialState: {}
+  });
+  const {
+    onCheckedValueChange
+  } = initialState;
+  const handleToggleButton = react_utilities_1.useEventCallback((e, name, value, checked) => {
+    if (name && value) {
+      const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
+      const newCheckedItems = [...checkedItems];
+
+      if (checked) {
+        newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
+      } else {
+        newCheckedItems.push(value);
+      }
+
+      onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+        name,
+        checkedItems: newCheckedItems
+      });
+      setCheckedValues(s => ({ ...s,
+        [name]: newCheckedItems
+      }));
+    }
+  });
+  return { ...initialState,
+    handleToggleButton,
+    checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM;IAAE,IAAI,GAAG;EAAT,IAAsB,KAA5B;EAEA,OAAO;IACL,IADK;IAGL;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJP;IAQL;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG,oBAF8B;MAGjC,GAAG;IAH8B,CAA7B,CAVD;IAeL,GAAG;EAfE,CAAP;AAiBD,CAzBM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToolbarProps, ToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'horizontal',\n  });\n\n  const { size = 'medium' } = props;\n\n  return {\n    size,\n\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n    ...props,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Toolbar/useToolbar.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,QAAQ,GAAG;EAA9B,IAAwC,KAA9C;EAEA,MAAM,oBAAoB,GAAG,eAAA,CAAA,uBAAA,CAAwB;IACnD,QAAQ,EAAE,IADyC;IAEnD,IAAI,EAAE;EAF6C,CAAxB,CAA7B;EAKA,MAAM,YAAY,GAA8B;IAC9C,IAD8C;IAE9C,QAF8C;IAG9C;IACA,UAAU,EAAE;MACV;MACA,IAAI,EAAE;IAFI,CAJkC;IAQ9C;IACA;IACA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,IAAI,EAAE,SAD2B;MAEjC,GAFiC;MAGjC,GAAG,oBAH8B;MAIjC,GAAG;IAJ8B,CAA7B;EAVwC,CAAhD;EAkBA,MAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,iBAAA,CAAA,oBAAA,CAAqB;IAC7D,KAAK,EAAE,YAAY,CAAC,aADyC;IAE7D,YAAY,EAAE,YAAY,CAAC,oBAFkC;IAG7D,YAAY,EAAE;EAH+C,CAArB,CAA1C;EAMA,MAAM;IAAE;EAAF,IAA2B,YAAjC;EAEA,MAAM,kBAAkB,GAAoB,iBAAA,CAAA,gBAAA,CAC1C,CAAC,CAAD,EAA4C,IAA5C,EAA2D,KAA3D,EAA2E,OAA3E,KAAgG;IAC9F,IAAI,IAAI,IAAI,KAAZ,EAAmB;MACjB,MAAM,YAAY,GAAG,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAG,IAAH,CAAb,KAAyB,EAA9C;MACA,MAAM,eAAe,GAAG,CAAC,GAAG,YAAJ,CAAxB;;MACA,IAAI,OAAJ,EAAa;QACX,eAAe,CAAC,MAAhB,CAAuB,eAAe,CAAC,OAAhB,CAAwB,KAAxB,CAAvB,EAAuD,CAAvD;MACD,CAFD,MAEO;QACL,eAAe,CAAC,IAAhB,CAAqB,KAArB;MACD;;MAED,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,EAAM;QAAE,IAAF;QAAQ,YAAY,EAAE;MAAtB,CAAN,CAApB;MACA,gBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,CAAL;QAAQ,CAAC,IAAD,GAAQ;MAAhB,CAAL,CAAF,CAAhB;IACD;EACF,CAdyC,CAA5C;EAiBA,OAAO,EACL,GAAG,YADE;IAEL,kBAFK;IAGL,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAH3B,CAAP;AAKD,CAxDM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n  const { size = 'medium', vertical = false } = props;\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'horizontal',\n  });\n\n  const initialState: UninitializedToolbarState = {\n    size,\n    vertical,\n    // TODO add appropriate props/defaults\n    components: {\n      // TODO add each slot's element type or component\n      root: 'div',\n    },\n    // TODO add appropriate slots, for example:\n    // mySlot: resolveShorthand(props.mySlot),\n    root: getNativeElementProps('div', {\n      role: 'toolbar',\n      ref,\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: initialState.checkedValues,\n    defaultState: initialState.defaultCheckedValues,\n    initialState: {},\n  });\n\n  const { onCheckedValueChange } = initialState;\n\n  const handleToggleButton: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name?: string, value?: string, checked?: boolean) => {\n      if (name && value) {\n        const checkedItems = checkedValues?.[name] || [];\n        const newCheckedItems = [...checkedItems];\n        if (checked) {\n          newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n        } else {\n          newCheckedItems.push(value);\n        }\n\n        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n        setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    checkedValues: checkedValues ?? {},\n  };\n};\n"],"sourceRoot":"../src/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE;EAAF,IAAW,KAAjB,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC;EADmC,CAArC;EAIA,OAAO;IAAE;EAAF,CAAP;AACD;;AARD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n  };\n\n  return { toolbar };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Toolbar/useToolbarContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,gCAAhB,CAAiD,KAAjD,EAAoE;EAClE,MAAM;IAAE,IAAF;IAAQ,kBAAR;IAA4B,QAA5B;IAAsC;EAAtC,IAAwD,KAA9D,CADkE,CAElE;;EACA,MAAM,OAAO,GAAwB;IACnC,IADmC;IAEnC,QAFmC;IAGnC,kBAHmC;IAInC;EAJmC,CAArC;EAOA,OAAO;IAAE;EAAF,CAAP;AACD;;AAXD,OAAA,CAAA,gCAAA,GAAA,gCAAA","sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues } = state;\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const toolbar: ToolbarContextValue = {\n    size,\n    vertical,\n    handleToggleButton,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"sourceRoot":"../src/"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarDivider_unstable = void 0;
+
+const react_divider_1 = /*#__PURE__*/require("@fluentui/react-divider");
+
+const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
+/**
+ * Create the state required to render ToolbarDivider.
+ *
+ * The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,
+ * before being passed to renderToolbar_unstable.
+ *
+ * @param props - props from this instance of ToolbarDivider
+ * @param ref - reference to root HTMLElement of ToolbarDivider
+ */
+
+
+const useToolbarDivider_unstable = (props, ref) => {
+  const vertical = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.vertical);
+  return react_divider_1.useDivider_unstable({
+    vertical: !vertical,
+    ...props
+  }, ref);
+};
+
+exports.useToolbarDivider_unstable = useToolbarDivider_unstable;
+//# sourceMappingURL=useToolbarDivider.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -9,21 +9,17 @@ const React = /*#__PURE__*/require("react");
 
 const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
 
-const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
+const useToolbarToggleButton_1 = /*#__PURE__*/require("./useToolbarToggleButton");
+
+const useToolbarToggleButtonStyles_1 = /*#__PURE__*/require("./useToolbarToggleButtonStyles");
 /**
  * ToolbarToggleButton component
  */
 
 
 exports.ToolbarToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    size
-  } = ToolbarContext_1.useToolbarContext();
-  const state = react_button_1.useToggleButton_unstable({
-    size,
-    ...props
-  }, ref);
-  react_button_1.useToggleButtonStyles_unstable(state);
+  const state = useToolbarToggleButton_1.useToolbarToggleButton_unstable(props, ref);
+  useToolbarToggleButtonStyles_1.useToolbarToggleButtonStyles_unstable(state);
   return react_button_1.renderToggleButton_unstable(state);
 });
 exports.ToolbarToggleButton.displayName = 'ToolbarToggleButton';

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

@@ -1 +1 @@
-{"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAKA,MAAA,gBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM;IAAE;EAAF,IAAW,gBAAA,CAAA,iBAAA,EAAjB;EAEA,MAAM,KAAK,GAAG,cAAA,CAAA,wBAAA,CAAyB;IAAE,IAAF;IAAQ,GAAG;EAAX,CAAzB,EAA6C,GAA7C,CAAd;EAEA,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CAPiF,CAArE;AASb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  renderToggleButton_unstable,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from '@fluentui/react-button';\nimport { useToolbarContext } from '../Toolbar/ToolbarContext';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const { size } = useToolbarContext();\n\n  const state = useToggleButton_unstable({ size, ...props }, ref);\n\n  useToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/ToolbarToggleButton/ToolbarToggleButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,8BAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACU,OAAA,CAAA,mBAAA,gBAAqE,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChH,MAAM,KAAK,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,EAAuC,GAAvC,CAAd;EAEA,8BAAA,CAAA,qCAAA,CAAsC,KAAtC;EACA,OAAO,cAAA,CAAA,2BAAA,CAA4B,KAA5B,CAAP;AACD,CALiF,CAArE;AAOb,OAAA,CAAA,mBAAA,CAAoB,WAApB,GAAkC,qBAAlC","sourcesContent":["import * as React from 'react';\nimport type { ToolbarToggleButtonProps } from './ToolbarToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nimport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles';\n\n/**\n * ToolbarToggleButton component\n */\nexport const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarToggleButton_unstable(props, ref);\n\n  useToolbarToggleButtonStyles_unstable(state);\n  return renderToggleButton_unstable(state);\n}) as ForwardRefComponent<ToolbarToggleButtonProps>;\n\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarToggleButton_unstable = void 0;
+
+const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
+
+const ToolbarContext_1 = /*#__PURE__*/require("../Toolbar/ToolbarContext");
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */
+
+
+const useToolbarToggleButton_unstable = (props, ref) => {
+  const handleToggleButton = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.handleToggleButton);
+  const checked = ToolbarContext_1.useToolbarContext_unstable(ctx => {
+    var _a;
+
+    return !!((_a = ctx.checkedValues[props.name]) === null || _a === void 0 ? void 0 : _a.includes(props.value));
+  });
+  const size = ToolbarContext_1.useToolbarContext_unstable(ctx => ctx.size);
+  const {
+    onClick: onClickOriginal
+  } = props;
+  const toggleButtonState = react_button_1.useToggleButton_unstable({
+    size,
+    checked,
+    ...props
+  }, ref);
+  const state = { ...toggleButtonState,
+    name: props.name,
+    value: props.value
+  };
+
+  const handleOnClick = e => {
+    if (state.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    handleToggleButton === null || handleToggleButton === void 0 ? void 0 : handleToggleButton(e, state.name, state.value, state.checked);
+    onClickOriginal === null || onClickOriginal === void 0 ? void 0 : onClickOriginal(e);
+  };
+
+  state.root.onClick = handleOnClick;
+  return state;
+};
+
+exports.useToolbarToggleButton_unstable = useToolbarToggleButton_unstable;
+//# sourceMappingURL=useToolbarToggleButton.js.map

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

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

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToolbarToggleButtonStyles_unstable = void 0;
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
+
+const useBaseStyles = /*#__PURE__*/react_1.__styles({
+  "selected": {
+    "sj55zd": "f16muhyy"
+  }
+}, {
+  "d": [".f16muhyy{color:var(--colorBrandForeground1);}"]
+});
+/**
+ * Apply styling to the ToolbarToggleButton slots based on the state
+ */
+
+
+const useToolbarToggleButtonStyles_unstable = state => {
+  react_button_1.useToggleButtonStyles_unstable(state);
+  const toggleButtonStyles = useBaseStyles();
+  state.root.className = react_1.mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);
+};
+
+exports.useToolbarToggleButtonStyles_unstable = useToolbarToggleButtonStyles_unstable;
+//# sourceMappingURL=useToolbarToggleButtonStyles.js.map

package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ToolbarToggleButton/useToolbarToggleButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;AAMA;;AAEG;;;AACI,MAAM,qCAAqC,GAAI,KAAD,IAAoC;EACvF,cAAA,CAAA,8BAAA,CAA+B,KAA/B;EACA,MAAM,kBAAkB,GAAG,aAAa,EAAxC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,KAAK,CAAC,IAAN,CAAW,SAAxB,EAAmC,KAAK,CAAC,OAAN,IAAiB,kBAAkB,CAAC,QAAvE,CAAvB;AACD,CALM;;AAAM,OAAA,CAAA,qCAAA,GAAqC,qCAArC","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useToggleButtonStyles_unstable } from '@fluentui/react-button';\nimport { ToolbarToggleButtonState } from './ToolbarToggleButton.types';\n\nconst useBaseStyles = makeStyles({\n  selected: {\n    color: tokens.colorBrandForeground1,\n  },\n});\n\n/**\n * Apply styling to the ToolbarToggleButton slots based on the state\n */\nexport const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButtonState) => {\n  useToggleButtonStyles_unstable(state);\n  const toggleButtonStyles = useBaseStyles();\n\n  state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected);\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toolbar",
-  "version": "9.0.0-beta.1",
+  "version": "9.0.0-beta.10",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -15,36 +15,39 @@
     "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
+    "e2e": "yarn cypress run --component",
+    "e2e:local": "yarn cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-toolbar/src && yarn docs",
-    "storybook": "node ../../../scripts/storybook/runner",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-toolbar/src && yarn docs",
+    "storybook": "start-storybook",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.9",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.16",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-button": "^9.0.0",
-    "@fluentui/react-divider": "^9.0.0",
-    "@fluentui/react-theme": "^9.0.0",
-    "@fluentui/react-utilities": "^9.0.0",
-    "@fluentui/react-radio": "^9.0.0",
-    "@fluentui/react-tabster": "^9.0.0",
-    "@griffel/react": "1.2.0",
+    "@fluentui/react-button": "^9.1.5",
+    "@fluentui/react-divider": "^9.1.2",
+    "@fluentui/react-theme": "^9.1.1",
+    "@fluentui/react-utilities": "^9.1.2",
+    "@fluentui/react-context-selector": "^9.0.5",
+    "@fluentui/react-radio": "^9.0.9",
+    "@fluentui/react-tabster": "^9.2.0",
+    "@griffel/react": "^1.4.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <18.0.0",
-    "@types/react-dom": ">=16.8.0 <18.0.0",
-    "react": ">=16.8.0 <18.0.0",
-    "react-dom": ">=16.8.0 <18.0.0"
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

package/dist/tsdoc-metadata.json

@@ -1,11 +0,0 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.18.1"
-    }
-  ]
-}