@fluentui/react-toolbar 9.1.16 → 9.1.17

package/CHANGELOG.json

@@ -2,7 +2,76 @@
   "name": "@fluentui/react-toolbar",
   "entries": [
     {
-      "date": "Thu, 25 May 2023 09:57:45 GMT",
+      "date": "Wed, 31 May 2023 06:43:04 GMT",
+      "tag": "@fluentui/react-toolbar_v9.1.17",
+      "version": "9.1.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "jirivyhnalek@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "77ae630247eb49cecef7bbb3a8564a5e2a83a5fa",
+            "comment": "Fixed a bug where ToolbarDivider default styles were prioritized"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-toolbar",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-button to v9.3.16",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-divider to v9.2.15",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-radio to v9.1.17",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-tabster to v9.7.5",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toolbar",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
       "tag": "@fluentui/react-toolbar_v9.1.16",
       "version": "9.1.16",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
+This log was last generated on Wed, 31 May 2023 06:43:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.17)
+
+Wed, 31 May 2023 06:43:04 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.16..@fluentui/react-toolbar_v9.1.17)
+
+### Patches
+
+- Fixed a bug where ToolbarDivider default styles were prioritized ([PR #28044](https://github.com/microsoft/fluentui/pull/28044) by jirivyhnalek@microsoft.com)
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-button to v9.3.16 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-divider to v9.2.15 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-radio to v9.1.17 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-tabster to v9.7.5 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+
 ## [9.1.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.16)
 
-Thu, 25 May 2023 09:57:45 GMT 
+Thu, 25 May 2023 10:00:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.15..@fluentui/react-toolbar_v9.1.16)
 
 ### Patches

package/lib/Toolbar.js

@@ -1,2 +1 @@
 export * from './components/Toolbar/index';
-//# sourceMappingURL=Toolbar.js.map

package/lib/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/Toolbar.ts"],"sourcesContent":["export * from './components/Toolbar/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["Toolbar.ts"],"sourcesContent":["export * from './components/Toolbar/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}

package/lib/ToolbarButton.js

@@ -1,2 +1 @@
 export * from './components/ToolbarButton/index';
-//# sourceMappingURL=ToolbarButton.js.map

package/lib/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/ToolbarButton.ts"],"sourcesContent":["export * from './components/ToolbarButton/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["ToolbarButton.ts"],"sourcesContent":["export * from './components/ToolbarButton/index';\n"],"names":[],"mappings":"AAAA,cAAc,mCAAmC"}

package/lib/ToolbarDivider.js

@@ -1,2 +1 @@
 export * from './components/ToolbarDivider/index';
-//# sourceMappingURL=ToolbarDivider.js.map

package/lib/ToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/ToolbarDivider.ts"],"sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["ToolbarDivider.ts"],"sourcesContent":["export * from './components/ToolbarDivider/index';\n"],"names":[],"mappings":"AAAA,cAAc,oCAAoC"}

package/lib/ToolbarGroup.js

@@ -1,2 +1 @@
 export * from './components/ToolbarGroup/index';
-//# sourceMappingURL=ToolbarGroup.js.map

package/lib/ToolbarGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/ToolbarGroup.ts"],"sourcesContent":["export * from './components/ToolbarGroup/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["ToolbarGroup.ts"],"sourcesContent":["export * from './components/ToolbarGroup/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/ToolbarRadioButton.js

@@ -1,2 +1 @@
 export * from './components/ToolbarRadioButton/index';
-//# sourceMappingURL=ToolbarRadioButton.js.map

package/lib/ToolbarRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/ToolbarRadioButton.ts"],"sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["ToolbarRadioButton.ts"],"sourcesContent":["export * from './components/ToolbarRadioButton/index';\n"],"names":[],"mappings":"AAAA,cAAc,wCAAwC"}

package/lib/ToolbarRadioGroup.js

@@ -1,2 +1 @@
 export * from './components/ToolbarRadioGroup/index';
-//# sourceMappingURL=ToolbarRadioGroup.js.map

package/lib/ToolbarRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/ToolbarRadioGroup.ts"],"sourcesContent":["export * from './components/ToolbarRadioGroup/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["ToolbarRadioGroup.ts"],"sourcesContent":["export * from './components/ToolbarRadioGroup/index';\n"],"names":[],"mappings":"AAAA,cAAc,uCAAuC"}

package/lib/ToolbarToggleButton.js

@@ -1,2 +1 @@
 export * from './components/ToolbarToggleButton/index';
-//# sourceMappingURL=ToolbarToggleButton.js.map

package/lib/ToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/ToolbarToggleButton.ts"],"sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["ToolbarToggleButton.ts"],"sourcesContent":["export * from './components/ToolbarToggleButton/index';\n"],"names":[],"mappings":"AAAA,cAAc,yCAAyC"}

package/lib/components/Toolbar/Toolbar.js

@@ -6,13 +6,11 @@ import { useToolbarContextValues_unstable } from './useToolbarContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Toolbar component
- */
-export const Toolbar = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useToolbar_unstable(props, ref);
-  const contextValues = useToolbarContextValues_unstable(state);
-  useToolbarStyles_unstable(state);
-  useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);
-  return renderToolbar_unstable(state, contextValues);
+ */ export const Toolbar = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToolbar_unstable(props, ref);
+    const contextValues = useToolbarContextValues_unstable(state);
+    useToolbarStyles_unstable(state);
+    useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);
+    return renderToolbar_unstable(state, contextValues);
 });
 Toolbar.displayName = 'Toolbar';
-//# sourceMappingURL=Toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","useCustomStyleHook_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles.styles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n\n  useToolbarStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);\n\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAG1C,SAASC,gCAAgC,QAAQ;AACjD,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQT,mBAAA,CAAoBO,KAAA,EAAOC,GAAA;EACzC,MAAME,aAAA,GAAgBP,gCAAA,CAAiCM,KAAA;EAEvDP,yBAAA,CAA0BO,KAAA;EAE1BL,2BAAA,CAA4B,6BAA6BK,KAAA;EAEzD,OAAOR,sBAAA,CAAuBQ,KAAA,EAAOC,aAAA;AACvC;AAEAL,OAAA,CAAQM,WAAW,GAAG"}
+{"version":3,"sources":["Toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useToolbar_unstable } from './useToolbar';\nimport { renderToolbar_unstable } from './renderToolbar';\nimport { useToolbarStyles_unstable } from './useToolbarStyles.styles';\nimport type { ToolbarProps } from './Toolbar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Toolbar component\n */\nexport const Toolbar: ForwardRefComponent<ToolbarProps> = React.forwardRef((props, ref) => {\n  const state = useToolbar_unstable(props, ref);\n  const contextValues = useToolbarContextValues_unstable(state);\n\n  useToolbarStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToolbarStyles_unstable')(state);\n\n  return renderToolbar_unstable(state, contextValues);\n});\n\nToolbar.displayName = 'Toolbar';\n"],"names":["React","useToolbar_unstable","renderToolbar_unstable","useToolbarStyles_unstable","useToolbarContextValues_unstable","useCustomStyleHook_unstable","Toolbar","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,iCAAiCM;IAEvDP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

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

@@ -1,2 +1 @@
 import * as React from 'react';
-//# sourceMappingURL=Toolbar.types.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/Toolbar/Toolbar.types.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
+{"version":3,"sources":["Toolbar.types.ts"],"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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Toolbar/ToolbarContext.js

@@ -1,11 +1,10 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-export const ToolbarContext = /*#__PURE__*/createContext(undefined);
+export const ToolbarContext = createContext(undefined);
 const toolbarContextDefaultValue = {
-  size: 'medium',
-  handleToggleButton: () => null,
-  handleRadio: () => null,
-  vertical: false,
-  checkedValues: {}
+    size: 'medium',
+    handleToggleButton: ()=>null,
+    handleRadio: ()=>null,
+    vertical: false,
+    checkedValues: {}
 };
-export const useToolbarContext_unstable = selector => useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue) => selector(ctx));
-//# sourceMappingURL=ToolbarContext.js.map
+export const useToolbarContext_unstable = (selector)=>useContextSelector(ToolbarContext, (ctx = toolbarContextDefaultValue)=>selector(ctx));

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

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"sources":["../../../src/components/Toolbar/ToolbarContext.ts"],"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  handleRadio: () => 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"],"mappings":"AAAA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAQ;AAInE,OAAO,MAAMC,cAAA,gBAAiBF,aAAA,CAA+CG,SAAA;AAE7E,MAAMC,0BAAA,GAAkD;EACtDC,IAAA,EAAM;EACNC,kBAAA,EAAoBA,CAAA,KAAM,IAAI;EAC9BC,WAAA,EAAaA,CAAA,KAAM,IAAI;EACvBC,QAAA,EAAU,KAAK;EACfC,aAAA,EAAe,CAAC;AAClB;AAEA,OAAO,MAAMC,0BAAA,GAAiCC,QAAA,IAC5CV,kBAAA,CAAmBC,cAAA,EAAgB,CAACU,GAAA,GAAMR,0BAA0B,KAAKO,QAAA,CAASC,GAAA"}
+{"version":3,"sources":["ToolbarContext.ts"],"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  handleRadio: () => 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"],"names":["createContext","useContextSelector","ToolbarContext","undefined","toolbarContextDefaultValue","size","handleToggleButton","handleRadio","vertical","checkedValues","useToolbarContext_unstable","selector","ctx"],"mappings":"AAAA,SAA0BA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAItG,OAAO,MAAMC,iBAAiBF,cAA+CG,WAA2C;AAExH,MAAMC,6BAAkD;IACtDC,MAAM;IACNC,oBAAoB,IAAM,IAAI;IAC9BC,aAAa,IAAM,IAAI;IACvBC,UAAU,KAAK;IACfC,eAAe,CAAC;AAClB;AAEA,OAAO,MAAMC,6BAA6B,CAAIC,WAC5CV,mBAAmBC,gBAAgB,CAACU,MAAMR,0BAA0B,GAAKO,SAASC,MAAM"}

package/lib/components/Toolbar/index.js

@@ -3,4 +3,3 @@ export * from './Toolbar.types';
 export * from './renderToolbar';
 export * from './useToolbar';
 export * from './useToolbarStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Toolbar/index.ts"],"sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Toolbar';\nexport * from './Toolbar.types';\nexport * from './renderToolbar';\nexport * from './useToolbar';\nexport * from './useToolbarStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,4BAA4B"}

package/lib/components/Toolbar/renderToolbar.js

@@ -1,16 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { ToolbarContext } from './ToolbarContext';
 /**
  * Render the final JSX of Toolbar
- */
-export const renderToolbar_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(ToolbarContext.Provider, {
-    value: contextValues.toolbar
-  }, /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children));
+ */ export const renderToolbar_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(ToolbarContext.Provider, {
+        value: contextValues.toolbar
+    }, /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children));
 };
-//# sourceMappingURL=renderToolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","ToolbarContext","renderToolbar_unstable","state","contextValues","slots","slotProps","Provider","value","toolbar","root","children"],"sources":["../../../src/components/Toolbar/renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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  const { slots, slotProps } = getSlotsNext<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,cAAc,QAAQ;AAE/B;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAqBC,aAAA,KAAwC;EAClG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA2BG,KAAA;EAExD,oBACEJ,aAdJ,CAcKE,cAAA,CAAeM,QAAQ;IAACC,KAAA,EAAOJ,aAAA,CAAcK;kBAC5CV,aAfN,CAeOM,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAAGJ,SAAA,CAAUI,IAAI,CAACC,QAAQ;AAG9D"}
+{"version":3,"sources":["renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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  const { slots, slotProps } = getSlotsNext<ToolbarSlots>(state);\n\n  return (\n    <ToolbarContext.Provider value={contextValues.toolbar}>\n      <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root>\n    </ToolbarContext.Provider>\n  );\n};\n"],"names":["createElement","getSlotsNext","ToolbarContext","renderToolbar_unstable","state","contextValues","slots","slotProps","Provider","value","toolbar","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,cAAc,QAAQ,mBAAmB;AAElD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC,gBAAwC;IAClG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA2BG;IAExD,qBACE,AAdJ,cAcKF,eAAeM,QAAQ;QAACC,OAAOJ,cAAcK,OAAO;qBACnD,AAfN,cAeOJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,EAAGJ,UAAUI,IAAI,CAACC,QAAQ;AAG9D,EAAE"}

package/lib/components/Toolbar/useToolbar.js

@@ -10,103 +10,99 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
  *
  * @param props - props from this instance of Toolbar
  * @param ref - reference to root HTMLElement of Toolbar
- */
-export const useToolbar_unstable = (props, ref) => {
-  const {
-    size = 'medium',
-    vertical = false
-  } = props;
-  const arrowNavigationProps = useArrowNavigationGroup({
-    circular: true,
-    axis: 'both'
-  });
-  const initialState = {
-    size,
-    vertical,
-    // TODO add appropriate props/defaults
-    components: {
-      // TODO add each slot's element type or component
-      root: 'div'
-    },
-    // TODO add appropriate slots, for example:
-    // mySlot: resolveShorthand(props.mySlot),
-    root: getNativeElementProps('div', {
-      role: 'toolbar',
-      ref,
-      ...(vertical && {
-        'aria-orientation': 'vertical'
-      }),
-      ...arrowNavigationProps,
-      ...props
-    })
-  };
-  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
-    checkedValues: props.checkedValues,
-    defaultCheckedValues: props.defaultCheckedValues,
-    onCheckedValueChange: props.onCheckedValueChange
-  });
-  const handleToggleButton = 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
-      });
-    }
-  });
-  const handleRadio = useEventCallback((e, name, value, checked) => {
-    if (name && value) {
-      onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
-        name,
-        checkedItems: [value]
-      });
-    }
-  });
-  return {
-    ...initialState,
-    handleToggleButton,
-    handleRadio,
-    checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
-  };
+ */ export const useToolbar_unstable = (props, ref)=>{
+    const { size ='medium' , vertical =false  } = props;
+    const arrowNavigationProps = useArrowNavigationGroup({
+        circular: true,
+        axis: 'both'
+    });
+    const initialState = {
+        size,
+        vertical,
+        // TODO add appropriate props/defaults
+        components: {
+            // TODO add each slot's element type or component
+            root: 'div'
+        },
+        // TODO add appropriate slots, for example:
+        // mySlot: resolveShorthand(props.mySlot),
+        root: getNativeElementProps('div', {
+            role: 'toolbar',
+            ref,
+            ...vertical && {
+                'aria-orientation': 'vertical'
+            },
+            ...arrowNavigationProps,
+            ...props
+        })
+    };
+    const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
+        checkedValues: props.checkedValues,
+        defaultCheckedValues: props.defaultCheckedValues,
+        onCheckedValueChange: props.onCheckedValueChange
+    });
+    const handleToggleButton = 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
+            });
+        }
+    });
+    const handleRadio = useEventCallback((e, name, value, checked)=>{
+        if (name && value) {
+            onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
+                name,
+                checkedItems: [
+                    value
+                ]
+            });
+        }
+    });
+    return {
+        ...initialState,
+        handleToggleButton,
+        handleRadio,
+        checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
+    };
 };
 /**
  * Adds appropriate state values and handlers for selectable items
  * i.e checkboxes and radios
- */
-const useToolbarSelectableState = state => {
-  const [checkedValues, setCheckedValues] = useControllableState({
-    state: state.checkedValues,
-    defaultState: state.defaultCheckedValues,
-    initialState: {}
-  });
-  const {
-    onCheckedValueChange: onCheckedValueChangeOriginal
-  } = state;
-  const onCheckedValueChange = useEventCallback((e, {
-    name,
-    checkedItems
-  }) => {
-    if (onCheckedValueChangeOriginal) {
-      onCheckedValueChangeOriginal(e, {
-        name,
-        checkedItems
-      });
-    }
-    setCheckedValues(s => {
-      return s ? {
-        ...s,
-        [name]: checkedItems
-      } : {
-        [name]: checkedItems
-      };
+ */ const useToolbarSelectableState = (state)=>{
+    const [checkedValues, setCheckedValues] = useControllableState({
+        state: state.checkedValues,
+        defaultState: state.defaultCheckedValues,
+        initialState: {}
+    });
+    const { onCheckedValueChange: onCheckedValueChangeOriginal  } = state;
+    const onCheckedValueChange = useEventCallback((e, { name , checkedItems  })=>{
+        if (onCheckedValueChangeOriginal) {
+            onCheckedValueChangeOriginal(e, {
+                name,
+                checkedItems
+            });
+        }
+        setCheckedValues((s)=>{
+            return s ? {
+                ...s,
+                [name]: checkedItems
+            } : {
+                [name]: checkedItems
+            };
+        });
     });
-  });
-  return [checkedValues, onCheckedValueChange];
+    return [
+        checkedValues,
+        onCheckedValueChange
+    ];
 };
-//# sourceMappingURL=useToolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"sources":["../../../src/components/Toolbar/useToolbar.ts"],"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: 'both',\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      ...(vertical && { 'aria-orientation': 'vertical' }),\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\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        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"],"mappings":"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"}
+{"version":3,"sources":["useToolbar.ts"],"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: 'both',\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      ...(vertical && { 'aria-orientation': 'vertical' }),\n      ...arrowNavigationProps,\n      ...props,\n    }),\n  };\n\n  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n    checkedValues: props.checkedValues,\n    defaultCheckedValues: props.defaultCheckedValues,\n    onCheckedValueChange: props.onCheckedValueChange,\n  });\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        onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n      }\n    },\n  );\n\n  const handleRadio: ToggableHandler = useEventCallback(\n    (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n      if (name && value) {\n        onCheckedValueChange?.(e, {\n          name,\n          checkedItems: [value],\n        });\n      }\n    },\n  );\n\n  return {\n    ...initialState,\n    handleToggleButton,\n    handleRadio,\n    checkedValues: checkedValues ?? {},\n  };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n  const [checkedValues, setCheckedValues] = useControllableState({\n    state: state.checkedValues,\n    defaultState: state.defaultCheckedValues,\n    initialState: {},\n  });\n  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n    if (onCheckedValueChangeOriginal) {\n      onCheckedValueChangeOriginal(e, { name, checkedItems });\n    }\n\n    setCheckedValues(s => {\n      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n    });\n  });\n\n  return [checkedValues, onCheckedValueChange] as const;\n};\n"],"names":["React","useEventCallback","useControllableState","getNativeElementProps","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","role","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,oBAAoB,QAAQ,4BAA4B;AACnF,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC,MAA8C;IACrG,MAAM,EAAEC,MAAO,SAAQ,EAAEC,UAAW,KAAK,CAAA,EAAE,GAAGH;IAE9C,MAAMI,uBAAuBN,wBAAwB;QACnDO,UAAU,IAAI;QACdC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,sBAAsB,OAAO;YACjCa,MAAM;YACNT;YACA,GAAIE,YAAY;gBAAE,oBAAoB;YAAW,CAAC;YAClD,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV;IACF;IAEA,MAAM,CAACW,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeX,MAAMW,aAAa;QAClCG,sBAAsBd,MAAMc,oBAAoB;QAChDF,sBAAsBZ,MAAMY,oBAAoB;IAClD;IAEA,MAAMG,qBAAsCpB,iBAC1C,CAACqB,GAA2CC,MAAcC,OAAeC,UAAsB;QAC7F,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,aAAe,CAACM,KAAK,AAAD,KAAK,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB,CAAC;YACDN,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE,CAAC;IACH;IAGF,MAAMI,cAA+B9B,iBACnC,CAACqB,GAA2CC,MAAcC,OAAeC,UAAsB;QAC7F,IAAIF,QAAQC,OAAO;YACjBN,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF,CAAC;IACH;IAGF,OAAO;QACL,GAAGX,YAAY;QACfQ;QACAU;QACAd,eAAeA,0BAAAA,2BAAAA,gBAAiB,CAAC,CAAC;IACpC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCa,QACG;IACH,MAAM,CAACf,eAAegB,iBAAiB,GAAG/B,qBAAqB;QAC7D8B,OAAOA,MAAMf,aAAa;QAC1BiB,cAAcF,MAAMZ,oBAAoB;QACxCP,cAAc,CAAC;IACjB;IACA,MAAM,EAAEK,sBAAsBiB,6BAA4B,EAAE,GAAGH;IAC/D,MAAMd,uBAA6DjB,iBAAiB,CAACqB,GAAG,EAAEC,KAAI,EAAEG,aAAY,EAAE,GAAK;QACjH,IAAIS,8BAA8B;YAChCA,6BAA6Bb,GAAG;gBAAEC;gBAAMG;YAAa;QACvD,CAAC;QAEDO,iBAAiBG,CAAAA,IAAK;YACpB,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACb,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa,CAAC;QACtE;IACF;IAEA,OAAO;QAACT;QAAeC;KAAqB;AAC9C"}

package/lib/components/Toolbar/useToolbarContextValues.js

@@ -1,21 +1,14 @@
 export function useToolbarContextValues_unstable(state) {
-  const {
-    size,
-    handleToggleButton,
-    vertical,
-    checkedValues,
-    handleRadio
-  } = state;
-  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-  const toolbar = {
-    size,
-    vertical,
-    handleToggleButton,
-    handleRadio,
-    checkedValues
-  };
-  return {
-    toolbar
-  };
+    const { size , handleToggleButton , vertical , checkedValues , handleRadio  } = state;
+    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
+    const toolbar = {
+        size,
+        vertical,
+        handleToggleButton,
+        handleRadio,
+        checkedValues
+    };
+    return {
+        toolbar
+    };
 }
-//# sourceMappingURL=useToolbarContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"sources":["../../../src/components/Toolbar/useToolbarContextValues.tsx"],"sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = 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    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"mappings":"AAEA,OAAO,SAASA,iCAAiCC,KAAmB,EAAwB;EAC1F,MAAM;IAAEC,IAAA;IAAMC,kBAAA;IAAoBC,QAAA;IAAUC,aAAA;IAAeC;EAAW,CAAE,GAAGL,KAAA;EAC3E;EACA,MAAMM,OAAA,GAA+B;IACnCL,IAAA;IACAE,QAAA;IACAD,kBAAA;IACAG,WAAA;IACAD;EACF;EAEA,OAAO;IAAEE;EAAQ;AACnB"}
+{"version":3,"sources":["useToolbarContextValues.tsx"],"sourcesContent":["import type { ToolbarContextValue, ToolbarContextValues, ToolbarState } from './Toolbar.types';\n\nexport function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues {\n  const { size, handleToggleButton, vertical, checkedValues, handleRadio } = 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    handleRadio,\n    checkedValues,\n  };\n\n  return { toolbar };\n}\n"],"names":["useToolbarContextValues_unstable","state","size","handleToggleButton","vertical","checkedValues","handleRadio","toolbar"],"mappings":"AAEA,OAAO,SAASA,iCAAiCC,KAAmB,EAAwB;IAC1F,MAAM,EAAEC,KAAI,EAAEC,mBAAkB,EAAEC,SAAQ,EAAEC,cAAa,EAAEC,YAAW,EAAE,GAAGL;IAC3E,mGAAmG;IACnG,MAAMM,UAA+B;QACnCL;QACAE;QACAD;QACAG;QACAD;IACF;IAEA,OAAO;QAAEE;IAAQ;AACnB,CAAC"}