@fluentui/react-toolbar 9.6.14 → 9.7.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-toolbar
 
-This log was last generated on Wed, 17 Dec 2025 18:06:03 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Jan 2026 17:01:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.7.0)
+
+Thu, 22 Jan 2026 17:01:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.14..@fluentui/react-toolbar_v9.7.0)
+
+### Minor changes
+
+- feat: add base hooks for Toolbar components ([PR #35658](https://github.com/microsoft/fluentui/pull/35658) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-button to v9.8.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-divider to v9.6.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-radio to v9.5.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+
 ## [9.6.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.14)
 
-Wed, 17 Dec 2025 18:06:03 GMT 
+Wed, 17 Dec 2025 18:10:10 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.13..@fluentui/react-toolbar_v9.6.14)
 
 ### Patches

package/dist/index.d.ts

@@ -3,15 +3,16 @@ import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import { DividerSlots } from '@fluentui/react-divider';
-import { DividerState } from '@fluentui/react-divider';
+import { ContextSelector } from '@fluentui/react-context-selector';
+import type { DividerSlots } from '@fluentui/react-divider';
+import type { DividerState } from '@fluentui/react-divider';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
-import { ToggleButtonProps } from '@fluentui/react-button';
-import { ToggleButtonState } from '@fluentui/react-button';
+import type { ToggleButtonProps } from '@fluentui/react-button';
+import type { ToggleButtonState } from '@fluentui/react-button';
 
 /**
  * Render the final JSX of Toolbar
@@ -242,6 +243,10 @@ export declare const useToolbarButton_unstable: (props: ToolbarButtonProps, ref:
  */
 export declare const useToolbarButtonStyles_unstable: (state: ToolbarButtonState) => void;
 
+export declare const useToolbarContext_unstable: <T>(selector: ContextSelector<ToolbarContextValue, T>) => T;
+
+export declare function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues;
+
 /**
  * Create the state required to render ToolbarDivider.
  *

package/lib/Toolbar.js

@@ -1 +1 @@
-export { Toolbar, renderToolbar_unstable, toolbarClassNames, useToolbarStyles_unstable, useToolbar_unstable } from './components/Toolbar/index';
+export { Toolbar, renderToolbar_unstable, toolbarClassNames, useToolbarStyles_unstable, useToolbar_unstable, useToolbarBase_unstable, useToolbarContext_unstable, useToolbarContextValues_unstable } from './components/Toolbar/index';

package/lib/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Toolbar.ts"],"sourcesContent":["export type {\n  ToggableHandler,\n  ToolbarCheckedValueChangeData,\n  ToolbarCheckedValueChangeEvent,\n  ToolbarContextValue,\n  ToolbarContextValues,\n  ToolbarProps,\n  ToolbarSlots,\n  ToolbarState,\n  UninitializedToolbarState,\n} from './components/Toolbar/index';\nexport {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n} from './components/Toolbar/index';\n"],"names":["Toolbar","renderToolbar_unstable","toolbarClassNames","useToolbarStyles_unstable","useToolbar_unstable"],"mappings":"AAWA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
+{"version":3,"sources":["../src/Toolbar.ts"],"sourcesContent":["export type {\n  ToggableHandler,\n  ToolbarCheckedValueChangeData,\n  ToolbarCheckedValueChangeEvent,\n  ToolbarContextValue,\n  ToolbarContextValues,\n  ToolbarBaseProps,\n  ToolbarProps,\n  ToolbarSlots,\n  ToolbarBaseState,\n  ToolbarState,\n  UninitializedToolbarState,\n} from './components/Toolbar/index';\nexport {\n  Toolbar,\n  renderToolbar_unstable,\n  toolbarClassNames,\n  useToolbarStyles_unstable,\n  useToolbar_unstable,\n  useToolbarBase_unstable,\n  useToolbarContext_unstable,\n  useToolbarContextValues_unstable,\n} from './components/Toolbar/index';\n"],"names":["Toolbar","renderToolbar_unstable","toolbarClassNames","useToolbarStyles_unstable","useToolbar_unstable","useToolbarBase_unstable","useToolbarContext_unstable","useToolbarContextValues_unstable"],"mappings":"AAaA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,gCAAgC,QAC3B,6BAA6B"}

package/lib/ToolbarButton.js

@@ -1 +1 @@
-export { ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButton_unstable } from './components/ToolbarButton/index';
+export { ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButton_unstable, useToolbarButtonBase_unstable } from './components/ToolbarButton/index';

package/lib/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToolbarButton.ts"],"sourcesContent":["export type { ToolbarButtonProps, ToolbarButtonState } from './components/ToolbarButton/index';\nexport {\n  ToolbarButton,\n  useToolbarButtonStyles_unstable,\n  useToolbarButton_unstable,\n} from './components/ToolbarButton/index';\n"],"names":["ToolbarButton","useToolbarButtonStyles_unstable","useToolbarButton_unstable"],"mappings":"AACA,SACEA,aAAa,EACbC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}
+{"version":3,"sources":["../src/ToolbarButton.ts"],"sourcesContent":["export type {\n  ToolbarButtonBaseState,\n  ToolbarButtonProps,\n  ToolbarButtonBaseProps,\n  ToolbarButtonState,\n} from './components/ToolbarButton/index';\nexport {\n  ToolbarButton,\n  useToolbarButtonStyles_unstable,\n  useToolbarButton_unstable,\n  useToolbarButtonBase_unstable,\n} from './components/ToolbarButton/index';\n"],"names":["ToolbarButton","useToolbarButtonStyles_unstable","useToolbarButton_unstable","useToolbarButtonBase_unstable"],"mappings":"AAMA,SACEA,aAAa,EACbC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,QACxB,mCAAmC"}

package/lib/ToolbarDivider.js

@@ -1 +1 @@
-export { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable } from './components/ToolbarDivider/index';
+export { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable, useToolbarDividerBase_unstable } from './components/ToolbarDivider/index';

package/lib/ToolbarDivider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToolbarDivider.ts"],"sourcesContent":["export type { ToolbarDividerProps, ToolbarDividerState } from './components/ToolbarDivider/index';\nexport {\n  ToolbarDivider,\n  useToolbarDividerStyles_unstable,\n  useToolbarDivider_unstable,\n} from './components/ToolbarDivider/index';\n"],"names":["ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+{"version":3,"sources":["../src/ToolbarDivider.ts"],"sourcesContent":["export type {\n  ToolbarDividerBaseState,\n  ToolbarDividerProps,\n  ToolbarDividerBaseProps,\n  ToolbarDividerState,\n} from './components/ToolbarDivider/index';\nexport {\n  ToolbarDivider,\n  useToolbarDividerStyles_unstable,\n  useToolbarDivider_unstable,\n  useToolbarDividerBase_unstable,\n} from './components/ToolbarDivider/index';\n"],"names":["ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable","useToolbarDividerBase_unstable"],"mappings":"AAMA,SACEA,cAAc,EACdC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,oCAAoC"}

package/lib/ToolbarRadioButton.js

@@ -1 +1 @@
-export { ToolbarRadioButton, useToolbarRadioButtonStyles_unstable, useToolbarRadioButton_unstable } from './components/ToolbarRadioButton/index';
+export { ToolbarRadioButton, useToolbarRadioButtonStyles_unstable, useToolbarRadioButton_unstable, useToolbarRadioButtonBase_unstable } from './components/ToolbarRadioButton/index';

package/lib/ToolbarRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToolbarRadioButton.ts"],"sourcesContent":["export type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './components/ToolbarRadioButton/index';\nexport {\n  ToolbarRadioButton,\n  useToolbarRadioButtonStyles_unstable,\n  useToolbarRadioButton_unstable,\n} from './components/ToolbarRadioButton/index';\n"],"names":["ToolbarRadioButton","useToolbarRadioButtonStyles_unstable","useToolbarRadioButton_unstable"],"mappings":"AACA,SACEA,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,QACzB,wCAAwC"}
+{"version":3,"sources":["../src/ToolbarRadioButton.ts"],"sourcesContent":["export type {\n  ToolbarRadioButtonBaseProps,\n  ToolbarRadioButtonProps,\n  ToolbarRadioButtonBaseState,\n  ToolbarRadioButtonState,\n} from './components/ToolbarRadioButton/index';\nexport {\n  ToolbarRadioButton,\n  useToolbarRadioButtonStyles_unstable,\n  useToolbarRadioButton_unstable,\n  useToolbarRadioButtonBase_unstable,\n} from './components/ToolbarRadioButton/index';\n"],"names":["ToolbarRadioButton","useToolbarRadioButtonStyles_unstable","useToolbarRadioButton_unstable","useToolbarRadioButtonBase_unstable"],"mappings":"AAMA,SACEA,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,EAC9BC,kCAAkC,QAC7B,wCAAwC"}

package/lib/ToolbarToggleButton.js

@@ -1 +1 @@
-export { ToolbarToggleButton, useToolbarToggleButtonStyles_unstable, useToolbarToggleButton_unstable } from './components/ToolbarToggleButton/index';
+export { ToolbarToggleButton, useToolbarToggleButtonStyles_unstable, useToolbarToggleButton_unstable, useToolbarToggleButtonBase_unstable } from './components/ToolbarToggleButton/index';

package/lib/ToolbarToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToolbarToggleButton.ts"],"sourcesContent":["export type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './components/ToolbarToggleButton/index';\nexport {\n  ToolbarToggleButton,\n  useToolbarToggleButtonStyles_unstable,\n  useToolbarToggleButton_unstable,\n} from './components/ToolbarToggleButton/index';\n"],"names":["ToolbarToggleButton","useToolbarToggleButtonStyles_unstable","useToolbarToggleButton_unstable"],"mappings":"AACA,SACEA,mBAAmB,EACnBC,qCAAqC,EACrCC,+BAA+B,QAC1B,yCAAyC"}
+{"version":3,"sources":["../src/ToolbarToggleButton.ts"],"sourcesContent":["export type {\n  ToolbarToggleButtonBaseProps,\n  ToolbarToggleButtonProps,\n  ToolbarToggleButtonBaseState,\n  ToolbarToggleButtonState,\n} from './components/ToolbarToggleButton/index';\nexport {\n  ToolbarToggleButton,\n  useToolbarToggleButtonStyles_unstable,\n  useToolbarToggleButton_unstable,\n  useToolbarToggleButtonBase_unstable,\n} from './components/ToolbarToggleButton/index';\n"],"names":["ToolbarToggleButton","useToolbarToggleButtonStyles_unstable","useToolbarToggleButton_unstable","useToolbarToggleButtonBase_unstable"],"mappings":"AAMA,SACEA,mBAAmB,EACnBC,qCAAqC,EACrCC,+BAA+B,EAC/BC,mCAAmC,QAC9B,yCAAyC"}

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

@@ -1 +1 @@
-{"version":3,"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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"}
+{"version":3,"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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;\n};\n\nexport type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;\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 ToolbarBaseState = Omit<ToolbarState, 'size'>;\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<ToolbarBaseState, '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/index.js

@@ -1,4 +1,6 @@
+export { useToolbarContext_unstable } from './ToolbarContext';
 export { Toolbar } from './Toolbar';
 export { renderToolbar_unstable } from './renderToolbar';
-export { useToolbar_unstable } from './useToolbar';
+export { useToolbar_unstable, useToolbarBase_unstable } from './useToolbar';
+export { useToolbarContextValues_unstable } from './useToolbarContextValues';
 export { toolbarClassNames, useToolbarStyles_unstable } from './useToolbarStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toolbar/index.ts"],"sourcesContent":["export { Toolbar } from './Toolbar';\nexport type {\n  ToggableHandler,\n  ToolbarCheckedValueChangeData,\n  ToolbarCheckedValueChangeEvent,\n  ToolbarContextValue,\n  ToolbarContextValues,\n  ToolbarProps,\n  ToolbarSlots,\n  ToolbarState,\n  UninitializedToolbarState,\n} from './Toolbar.types';\nexport { renderToolbar_unstable } from './renderToolbar';\nexport { useToolbar_unstable } from './useToolbar';\nexport { toolbarClassNames, useToolbarStyles_unstable } from './useToolbarStyles.styles';\n"],"names":["Toolbar","renderToolbar_unstable","useToolbar_unstable","toolbarClassNames","useToolbarStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAYpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Toolbar/index.ts"],"sourcesContent":["export { useToolbarContext_unstable } from './ToolbarContext';\nexport { Toolbar } from './Toolbar';\nexport type {\n  ToggableHandler,\n  ToolbarCheckedValueChangeData,\n  ToolbarCheckedValueChangeEvent,\n  ToolbarContextValue,\n  ToolbarContextValues,\n  ToolbarBaseProps,\n  ToolbarProps,\n  ToolbarSlots,\n  ToolbarBaseState,\n  ToolbarState,\n  UninitializedToolbarState,\n} from './Toolbar.types';\nexport { renderToolbar_unstable } from './renderToolbar';\nexport { useToolbar_unstable, useToolbarBase_unstable } from './useToolbar';\nexport { useToolbarContextValues_unstable } from './useToolbarContextValues';\nexport { toolbarClassNames, useToolbarStyles_unstable } from './useToolbarStyles.styles';\n"],"names":["useToolbarContext_unstable","Toolbar","renderToolbar_unstable","useToolbar_unstable","useToolbarBase_unstable","useToolbarContextValues_unstable","toolbarClassNames","useToolbarStyles_unstable"],"mappings":"AAAA,SAASA,0BAA0B,QAAQ,mBAAmB;AAC9D,SAASC,OAAO,QAAQ,YAAY;AAcpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,eAAe;AAC5E,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

package/lib/components/Toolbar/useToolbar.js

@@ -11,13 +11,28 @@ 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 = {
+    const { size = 'medium' } = props;
+    const state = useToolbarBase_unstable(props, ref);
+    const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();
+    return {
         size,
+        ...state,
+        root: {
+            ...state.root,
+            ...arrowNavigationProps
+        }
+    };
+};
+/**
+ * Base hook that builds Toolbar state for behavior and structure only.
+ * It does not add arrow key navigation, which is handled by `useToolbar_unstable`.
+ *
+ * @internal
+ * @param props - Props for this Toolbar instance.
+ * @param ref - Ref to the root HTMLElement.
+ */ export const useToolbarBase_unstable = (props, ref)=>{
+    const { vertical = false } = props;
+    const initialState = {
         vertical,
         // TODO add appropriate props/defaults
         components: {
@@ -28,14 +43,10 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         // mySlot: resolveShorthand(props.mySlot),
         root: slot.always(getIntrinsicElementProps('div', {
             role: 'toolbar',
-            // FIXME:
-            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
             ref: ref,
             ...vertical && {
                 'aria-orientation': 'vertical'
             },
-            ...arrowNavigationProps,
             ...props
         }), {
             elementType: 'div'
@@ -111,3 +122,14 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
         onCheckedValueChange
     ];
 };
+/**
+ * Hook to add arrow navigation props to the Toolbar.
+ *
+ * @internal
+ * @returns - Tabster DOM attributes for arrow navigation
+ */ export const useToolbarArrowNavigationProps_unstable = ()=>{
+    return useArrowNavigationGroup({
+        circular: true,
+        axis: 'both'
+    });
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toolbar/useToolbar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, useControllableState, getIntrinsicElementProps, slot } 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: slot.always(\n      getIntrinsicElementProps('div', {\n        role: 'toolbar',\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\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","getIntrinsicElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,oBAAoB,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,MAAMI,uBAAuBN,wBAAwB;QACnDO,UAAU;QACVC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9Be,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,KAAKA;YACL,GAAIE,YAAa;gBAAE,oBAAoB;YAAW,CAAW;YAC7D,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeb,MAAMa,aAAa;QAClCG,sBAAsBhB,MAAMgB,oBAAoB;QAChDF,sBAAsBd,MAAMc,oBAAoB;IAClD;IAEA,MAAMG,qBAAsCvB,iBAC1C,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,0BAAAA,oCAAAA,aAAe,CAACM,KAAK,KAAI,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,cAA+BjC,iBACnC,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGb,YAAY;QACfU;QACAU;QACAd,eAAeA,0BAAAA,2BAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCa;IAEA,MAAM,CAACf,eAAegB,iBAAiB,GAAGlC,qBAAqB;QAC7DiC,OAAOA,MAAMf,aAAa;QAC1BiB,cAAcF,MAAMZ,oBAAoB;QACxCT,cAAc,CAAC;IACjB;IACA,MAAM,EAAEO,sBAAsBiB,4BAA4B,EAAE,GAAGH;IAC/D,MAAMd,uBAA6DpB,iBAAiB,CAACwB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QAC5G,IAAIS,8BAA8B;YAChCA,6BAA6Bb,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAO,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACb,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAEA,OAAO;QAACT;QAAeC;KAAqB;AAC9C"}
+{"version":3,"sources":["../src/components/Toolbar/useToolbar.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  ToggableHandler,\n  ToolbarBaseProps,\n  ToolbarBaseState,\n  ToolbarProps,\n  ToolbarState,\n  UninitializedToolbarState,\n} from './Toolbar.types';\nimport { TabsterDOMAttribute, 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' } = props;\n  const state = useToolbarBase_unstable(props, ref);\n  const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();\n\n  return {\n    size,\n    ...state,\n    root: {\n      ...state.root,\n      ...arrowNavigationProps,\n    },\n  };\n};\n\n/**\n * Base hook that builds Toolbar state for behavior and structure only.\n * It does not add arrow key navigation, which is handled by `useToolbar_unstable`.\n *\n * @internal\n * @param props - Props for this Toolbar instance.\n * @param ref - Ref to the root HTMLElement.\n */\nexport const useToolbarBase_unstable = (props: ToolbarBaseProps, ref: React.Ref<HTMLElement>): ToolbarBaseState => {\n  const { vertical = false } = props;\n\n  const initialState: UninitializedToolbarState = {\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: slot.always(\n      getIntrinsicElementProps('div', {\n        role: 'toolbar',\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),\n        ...props,\n      }),\n      { elementType: 'div' },\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<ToolbarBaseProps, '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: ToolbarBaseState['onCheckedValueChange'] = useEventCallback(\n    (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\n  return [checkedValues, onCheckedValueChange] as const;\n};\n\n/**\n * Hook to add arrow navigation props to the Toolbar.\n *\n * @internal\n * @returns - Tabster DOM attributes for arrow navigation\n */\nexport const useToolbarArrowNavigationProps_unstable = (): TabsterDOMAttribute => {\n  return useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n  });\n};\n"],"names":["React","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","state","useToolbarBase_unstable","arrowNavigationProps","useToolbarArrowNavigationProps_unstable","root","vertical","initialState","components","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s","circular","axis"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,oBAAoB,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AASnH,SAA8BC,uBAAuB,QAAQ,0BAA0B;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAE,GAAGF;IAC5B,MAAMG,QAAQC,wBAAwBJ,OAAOC;IAC7C,MAAMI,uBAAuBC;IAE7B,OAAO;QACLJ;QACA,GAAGC,KAAK;QACRI,MAAM;YACJ,GAAGJ,MAAMI,IAAI;YACb,GAAGF,oBAAoB;QACzB;IACF;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMD,0BAA0B,CAACJ,OAAyBC;IAC/D,MAAM,EAAEO,WAAW,KAAK,EAAE,GAAGR;IAE7B,MAAMS,eAA0C;QAC9CD;QACA,sCAAsC;QACtCE,YAAY;YACV,iDAAiD;YACjDH,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMV,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BgB,MAAM;YACNX,KAAKA;YACL,GAAIO,YAAa;gBAAE,oBAAoB;YAAW,CAAW;YAC7D,GAAGR,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAed,MAAMc,aAAa;QAClCG,sBAAsBjB,MAAMiB,oBAAoB;QAChDF,sBAAsBf,MAAMe,oBAAoB;IAClD;IAEA,MAAMG,qBAAsCxB,iBAC1C,CAACyB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,0BAAAA,oCAAAA,aAAe,CAACM,KAAK,KAAI,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,cAA+BlC,iBACnC,CAACyB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGZ,YAAY;QACfS;QACAU;QACAd,eAAeA,0BAAAA,2BAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCb;IAEA,MAAM,CAACW,eAAee,iBAAiB,GAAGlC,qBAAqB;QAC7DQ,OAAOA,MAAMW,aAAa;QAC1BgB,cAAc3B,MAAMc,oBAAoB;QACxCR,cAAc,CAAC;IACjB;IACA,MAAM,EAAEM,sBAAsBgB,4BAA4B,EAAE,GAAG5B;IAC/D,MAAMY,uBAAiErB,iBACrE,CAACyB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QACxB,IAAIQ,8BAA8B;YAChCA,6BAA6BZ,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAM,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACZ,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAGF,OAAO;QAACT;QAAeC;KAAqB;AAC9C;AAEA;;;;;CAKC,GACD,OAAO,MAAMT,0CAA0C;IACrD,OAAOR,wBAAwB;QAC7BmC,UAAU;QACVC,MAAM;IACR;AACF,EAAE"}

package/lib/components/ToolbarButton/ToolbarButton.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering ToolbarButton
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n  } & {\n    vertical?: boolean;\n  };\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> &\n  ButtonState &\n  Required<Pick<ToolbarButtonProps, 'vertical'>>;\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAEiD"}
+{"version":3,"sources":["../src/components/ToolbarButton/ToolbarButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n  } & {\n    vertical?: boolean;\n  };\n\nexport type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> &\n  ButtonState &\n  Required<Pick<ToolbarButtonProps, 'vertical'>>;\n\nexport type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":"AAsBA,WAA2G"}

package/lib/components/ToolbarButton/index.js

@@ -1,3 +1,3 @@
 export { ToolbarButton } from './ToolbarButton';
-export { useToolbarButton_unstable } from './useToolbarButton';
+export { useToolbarButton_unstable, useToolbarButtonBase_unstable } from './useToolbarButton';
 export { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarButton/index.ts"],"sourcesContent":["export { ToolbarButton } from './ToolbarButton';\nexport type { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\nexport { useToolbarButton_unstable } from './useToolbarButton';\nexport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';\n"],"names":["ToolbarButton","useToolbarButton_unstable","useToolbarButtonStyles_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC"}
+{"version":3,"sources":["../src/components/ToolbarButton/index.ts"],"sourcesContent":["export { ToolbarButton } from './ToolbarButton';\nexport type {\n  ToolbarButtonBaseProps,\n  ToolbarButtonProps,\n  ToolbarButtonBaseState,\n  ToolbarButtonState,\n} from './ToolbarButton.types';\nexport { useToolbarButton_unstable, useToolbarButtonBase_unstable } from './useToolbarButton';\nexport { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';\n"],"names":["ToolbarButton","useToolbarButton_unstable","useToolbarButtonBase_unstable","useToolbarButtonStyles_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAOhD,SAASC,yBAAyB,EAAEC,6BAA6B,QAAQ,qBAAqB;AAC9F,SAASC,+BAA+B,QAAQ,kCAAkC"}

package/lib/components/ToolbarButton/useToolbarButton.js

@@ -7,6 +7,22 @@ import { useButton_unstable } from '@fluentui/react-button';
  * @param props - User provided props to the Button component.
  * @param ref - User provided ref to be passed to the Button component.
  */ export const useToolbarButton_unstable = (props, ref)=>{
+    const state = useToolbarButtonBase_unstable(props, ref);
+    return {
+        appearance: 'subtle',
+        size: 'medium',
+        shape: 'rounded',
+        ...state
+    };
+};
+/**
+ * Base hook that builds Toolbar Button state for behavior and structure only.
+ * It does not provide any design-related defaults.
+ *
+ * @internal
+ * @param props - User provided props to the Button component.
+ * @param ref - User provided ref to be passed to the Button component.
+ */ export const useToolbarButtonBase_unstable = (props, ref)=>{
     const { vertical = false, ...buttonProps } = props;
     const state = useButton_unstable({
         appearance: 'subtle',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport { ToolbarButtonProps, ToolbarButtonState } from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable(\n    {\n      appearance: 'subtle',\n      ...buttonProps,\n      size: 'medium',\n    },\n    ref,\n  );\n\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"names":["React","useButton_unstable","useToolbarButton_unstable","props","ref","vertical","buttonProps","state","appearance","size"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAG5D;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGH;IAC7C,MAAMI,QAAQN,mBACZ;QACEO,YAAY;QACZ,GAAGF,WAAW;QACdG,MAAM;IACR,GACAL;IAGF,OAAO;QACLC;QACA,GAAGE,KAAK;IACV;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarButton/useToolbarButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport type {\n  ToolbarButtonBaseProps,\n  ToolbarButtonBaseState,\n  ToolbarButtonProps,\n  ToolbarButtonState,\n} from './ToolbarButton.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButton_unstable = (\n  props: ToolbarButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonState => {\n  const state = useToolbarButtonBase_unstable(props, ref);\n\n  return {\n    appearance: 'subtle',\n    size: 'medium',\n    shape: 'rounded',\n    ...state,\n  };\n};\n\n/**\n * Base hook that builds Toolbar Button state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useToolbarButtonBase_unstable = (\n  props: ToolbarButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarButtonBaseState => {\n  const { vertical = false, ...buttonProps } = props;\n  const state = useButton_unstable(\n    {\n      appearance: 'subtle',\n      ...buttonProps,\n      size: 'medium',\n    },\n    ref,\n  );\n\n  return {\n    vertical,\n    ...state,\n  };\n};\n"],"names":["React","useButton_unstable","useToolbarButton_unstable","props","ref","state","useToolbarButtonBase_unstable","appearance","size","shape","vertical","buttonProps"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAQ5D;;;;;CAKC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,QAAQC,8BAA8BH,OAAOC;IAEnD,OAAO;QACLG,YAAY;QACZC,MAAM;QACNC,OAAO;QACP,GAAGJ,KAAK;IACV;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,gCAAgC,CAC3CH,OACAC;IAEA,MAAM,EAAEM,WAAW,KAAK,EAAE,GAAGC,aAAa,GAAGR;IAC7C,MAAME,QAAQJ,mBACZ;QACEM,YAAY;QACZ,GAAGI,WAAW;QACdH,MAAM;IACR,GACAJ;IAGF,OAAO;QACLM;QACA,GAAGL,KAAK;IACV;AACF,EAAE"}

package/lib/components/ToolbarDivider/ToolbarDivider.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering ToolbarDivider
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from '@fluentui/react-divider';\n\n/**\n * ToolbarDivider Props\n */\nexport type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {\n  /**\n   * A divider can be horizontal or vertical (default).\n   *\n   * @default true\n   */\n  vertical?: boolean;\n};\n\n/**\n * State used in rendering ToolbarDivider\n */\nexport type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAAuF"}
+{"version":3,"sources":["../src/components/ToolbarDivider/ToolbarDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { DividerSlots, DividerState } from '@fluentui/react-divider';\n\n/**\n * ToolbarDivider Props\n */\nexport type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {\n  /**\n   * A divider can be horizontal or vertical (default).\n   *\n   * @default true\n   */\n  vertical?: boolean;\n};\n\nexport type ToolbarDividerBaseProps = ToolbarDividerProps;\n\n/**\n * State used in rendering ToolbarDivider\n */\nexport type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;\n\nexport type ToolbarDividerBaseState = Omit<ToolbarDividerState, 'appearance'>;\n"],"names":[],"mappings":"AAsBA,WAA8E"}

package/lib/components/ToolbarDivider/index.js

@@ -1,3 +1,3 @@
 export { ToolbarDivider } from './ToolbarDivider';
 export { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';
-export { useToolbarDivider_unstable } from './useToolbarDivider';
+export { useToolbarDivider_unstable, useToolbarDividerBase_unstable } from './useToolbarDivider';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarDivider/index.ts"],"sourcesContent":["export { ToolbarDivider } from './ToolbarDivider';\nexport type { ToolbarDividerProps, ToolbarDividerState } from './ToolbarDivider.types';\nexport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';\nexport { useToolbarDivider_unstable } from './useToolbarDivider';\n"],"names":["ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,0BAA0B,QAAQ,sBAAsB"}
+{"version":3,"sources":["../src/components/ToolbarDivider/index.ts"],"sourcesContent":["export { ToolbarDivider } from './ToolbarDivider';\nexport type {\n  ToolbarDividerBaseProps,\n  ToolbarDividerProps,\n  ToolbarDividerBaseState,\n  ToolbarDividerState,\n} from './ToolbarDivider.types';\nexport { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';\nexport { useToolbarDivider_unstable, useToolbarDividerBase_unstable } from './useToolbarDivider';\n"],"names":["ToolbarDivider","useToolbarDividerStyles_unstable","useToolbarDivider_unstable","useToolbarDividerBase_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAOlD,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB"}

package/lib/components/ToolbarDivider/useToolbarDivider.js

@@ -11,6 +11,20 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
  * @param props - props from this instance of ToolbarDivider
  * @param ref - reference to root HTMLElement of ToolbarDivider
  */ export const useToolbarDivider_unstable = (props, ref)=>{
+    const state = useToolbarDividerBase_unstable(props, ref);
+    return {
+        ...state,
+        appearance: 'default'
+    };
+};
+/**
+ * Base hook that builds ToolbarDivider state for behavior and structure only.
+ * It does not provide any design-related defaults.
+ *
+ * @internal
+ * @param props - props from this instance of ToolbarDivider
+ * @param ref - reference to root HTMLElement of ToolbarDivider
+ */ export const useToolbarDividerBase_unstable = (props, ref)=>{
     const vertical = useToolbarContext_unstable((ctx)=>ctx.vertical);
     return useDivider_unstable({
         vertical: !vertical,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["'use client';\n\nimport * 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"],"names":["React","useDivider_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","vertical","ctx"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,0BAA0B;AAC9D,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,WAAWJ,2BAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAC/D,OAAOL,oBAAoB;QAAEK,UAAU,CAACA;QAAU,GAAGF,KAAK;IAAC,GAAGC;AAChE,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  ToolbarDividerBaseProps,\n  ToolbarDividerBaseState,\n  ToolbarDividerProps,\n  ToolbarDividerState,\n} 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 state = useToolbarDividerBase_unstable(props, ref);\n  return {\n    ...state,\n    appearance: 'default',\n  };\n};\n\n/**\n * Base hook that builds ToolbarDivider state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - props from this instance of ToolbarDivider\n * @param ref - reference to root HTMLElement of ToolbarDivider\n */\nexport const useToolbarDividerBase_unstable = (\n  props: ToolbarDividerBaseProps,\n  ref: React.Ref<HTMLElement>,\n): ToolbarDividerBaseState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n  return useDivider_unstable({ vertical: !vertical, ...props }, ref);\n};\n"],"names":["React","useDivider_unstable","useToolbarContext_unstable","useToolbarDivider_unstable","props","ref","state","useToolbarDividerBase_unstable","appearance","vertical","ctx"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAO/B,SAASC,mBAAmB,QAAQ,0BAA0B;AAC9D,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,QAAQC,+BAA+BH,OAAOC;IACpD,OAAO;QACL,GAAGC,KAAK;QACRE,YAAY;IACd;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMD,iCAAiC,CAC5CH,OACAC;IAEA,MAAMI,WAAWP,2BAA2BQ,CAAAA,MAAOA,IAAID,QAAQ;IAC/D,OAAOR,oBAAoB;QAAEQ,UAAU,CAACA;QAAU,GAAGL,KAAK;IAAC,GAAGC;AAChE,EAAE"}

package/lib/components/ToolbarGroup/index.js

@@ -1,4 +1,4 @@
 export { ToolbarGroup } from './ToolbarGroup';
-export { useToolbarGroup_unstable } from './useToolbarGroup';
+export { useToolbarGroup_unstable, useToolbarGroupBase_unstable } from './useToolbarGroup';
 export { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';
 export { renderToolbarGroup_unstable } from './renderToolbarGroup';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/index.ts"],"sourcesContent":["export { ToolbarGroup } from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\nexport { useToolbarGroup_unstable } from './useToolbarGroup';\nexport { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nexport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n"],"names":["ToolbarGroup","useToolbarGroup_unstable","toolbarGroupClassNames","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC;AACxG,SAASC,2BAA2B,QAAQ,uBAAuB"}
+{"version":3,"sources":["../src/components/ToolbarGroup/index.ts"],"sourcesContent":["export { ToolbarGroup } from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\nexport { useToolbarGroup_unstable, useToolbarGroupBase_unstable } from './useToolbarGroup';\nexport { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nexport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n"],"names":["ToolbarGroup","useToolbarGroup_unstable","useToolbarGroupBase_unstable","toolbarGroupClassNames","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC;AACxG,SAASC,2BAA2B,QAAQ,uBAAuB"}

package/lib/components/ToolbarGroup/useToolbarGroup.js

@@ -1,12 +1,22 @@
 'use client';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
 /**
  * Given user props, defines default props for the Group
  * @param props - User provided props to the Group component.
  * @param ref - User provided ref to be passed to the Group component.
  */ export const useToolbarGroup_unstable = (props, ref)=>{
+    return useToolbarGroupBase_unstable(props, ref);
+};
+/**
+ * Base hook that builds Toolbar Group state for behavior and structure only.
+ * It does not provide any design-related defaults.
+ *
+ * @internal
+ * @param props - User provided props to the Group component.
+ * @param ref - User provided ref to be passed to the Group component.
+ */ export const useToolbarGroupBase_unstable = (props, ref)=>{
     const vertical = useToolbarContext_unstable((ctx)=>ctx.vertical);
     return {
         components: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAE/B,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,WAAWJ,2BAA2BK,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAA+D,OAAO;YACpEM;YACAM,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return useToolbarGroupBase_unstable(props, ref);\n};\n\n/**\n * Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroupBase_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAA+B,CAC1CF,OACAC;IAEA,MAAME,WAAWL,2BAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib/components/ToolbarRadioButton/ToolbarRadioButton.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering ToolbarRadioButton
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAGkD"}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarRadioButton Props\n */\nexport type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\nexport type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarRadioButton\n */\nexport type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarRadioButtonProps, 'name' | 'value'>;\n\nexport type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance'>;\n"],"names":[],"mappings":"AAuBA,WAAkG"}

package/lib/components/ToolbarRadioButton/index.js

@@ -1,3 +1,3 @@
 export { ToolbarRadioButton } from './ToolbarRadioButton';
-export { useToolbarRadioButton_unstable } from './useToolbarRadioButton';
+export { useToolbarRadioButton_unstable, useToolbarRadioButtonBase_unstable } from './useToolbarRadioButton';
 export { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarRadioButton/index.ts"],"sourcesContent":["export { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\nexport { useToolbarRadioButton_unstable } from './useToolbarRadioButton';\nexport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';\n"],"names":["ToolbarRadioButton","useToolbarRadioButton_unstable","useToolbarRadioButtonStyles_unstable"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,oCAAoC,QAAQ,uCAAuC"}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/index.ts"],"sourcesContent":["export { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type {\n  ToolbarRadioButtonBaseProps,\n  ToolbarRadioButtonProps,\n  ToolbarRadioButtonBaseState,\n  ToolbarRadioButtonState,\n} from './ToolbarRadioButton.types';\nexport { useToolbarRadioButton_unstable, useToolbarRadioButtonBase_unstable } from './useToolbarRadioButton';\nexport { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';\n"],"names":["ToolbarRadioButton","useToolbarRadioButton_unstable","useToolbarRadioButtonBase_unstable","useToolbarRadioButtonStyles_unstable"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAO1D,SAASC,8BAA8B,EAAEC,kCAAkC,QAAQ,0BAA0B;AAC7G,SAASC,oCAAoC,QAAQ,uCAAuC"}

package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js

@@ -9,15 +9,30 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
  * @param props - User provided props to the RadioButton component.
  * @param ref - User provided ref to be passed to the RadioButton component.
  */ export const useToolbarRadioButton_unstable = (props, ref)=>{
+    const { appearance = 'secondary' } = props;
+    const size = useToolbarContext_unstable((ctx)=>ctx.size);
+    const state = useToolbarRadioButtonBase_unstable(props, ref);
+    return {
+        ...state,
+        appearance,
+        size
+    };
+};
+/**
+ * Base hook that builds Toolbar RadioButton state for behavior and structure only.
+ * It does not provide any design-related defaults.
+ *
+ * @internal
+ * @param props - User provided props to the RadioButton component.
+ * @param ref - User provided ref to be passed to the RadioButton component.
+ */ export const useToolbarRadioButtonBase_unstable = (props, ref)=>{
     const handleRadio = useToolbarContext_unstable((ctx)=>ctx.handleRadio);
     const checked = useToolbarContext_unstable((ctx)=>{
         var _ctx_checkedValues_props_name;
         return !!((_ctx_checkedValues_props_name = ctx.checkedValues[props.name]) === null || _ctx_checkedValues_props_name === void 0 ? void 0 : _ctx_checkedValues_props_name.includes(props.value));
     });
-    const size = useToolbarContext_unstable((ctx)=>ctx.size);
     const { onClick: onClickOriginal } = props;
     const toggleButtonState = useToggleButton_unstable({
-        size,
         checked,
         role: 'radio',
         'aria-checked': checked,

package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport { ToolbarRadioButtonProps, ToolbarRadioButtonState } from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\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(\n    { size, checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\n  const state: ToolbarRadioButtonState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n  state.root['aria-pressed'] = undefined;\n  state.root.onClick = handleOnClick;\n  return state;\n};\n"],"names":["React","useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","handleRadio","ctx","checked","checkedValues","name","includes","value","size","onClick","onClickOriginal","toggleButtonState","role","state","handleOnClick","e","root","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,0BAA0B,QAAQ,4BAA4B;AAGvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,cAAcJ,2BAA2BK,CAAAA,MAAOA,IAAID,WAAW;IACrE,MAAME,UAAUN,2BAA2BK,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIE,aAAa,CAACL,MAAMM,IAAI,CAAC,cAA7BH,oDAAAA,8BAA+BI,QAAQ,CAACP,MAAMQ,KAAK;;IACvG,MAAMC,OAAOX,2BAA2BK,CAAAA,MAAOA,IAAIM,IAAI;IAEvD,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGX;IACrC,MAAMY,oBAAoBf,yBACxB;QAAEY;QAAML;QAASS,MAAM;QAAS,gBAAgBT;QAAS,GAAGJ,KAAK;IAAC,GAClEC;IAEF,MAAMa,QAAiC;QACrC,GAAGF,iBAAiB;QACpBN,MAAMN,MAAMM,IAAI;QAChBE,OAAOR,MAAMQ,KAAK;IACpB;IAEA,MAAMO,gBAAgBnB,iBACpB,CAACoB;QACCd,wBAAAA,kCAAAA,YAAcc,GAAGF,MAAMR,IAAI,EAAEQ,MAAMN,KAAK,EAAEM,MAAMV,OAAO;QACvDO,4BAAAA,sCAAAA,gBAAkBK;IACpB;IAEFF,MAAMG,IAAI,CAAC,eAAe,GAAGC;IAC7BJ,MAAMG,IAAI,CAACP,OAAO,GAAGK;IACrB,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ToolbarRadioButton/useToolbarRadioButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useToggleButton_unstable } from '@fluentui/react-button';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\nimport type {\n  ToolbarRadioButtonProps,\n  ToolbarRadioButtonState,\n  ToolbarRadioButtonBaseProps,\n  ToolbarRadioButtonBaseState,\n} from './ToolbarRadioButton.types';\n\n/**\n * Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButton_unstable = (\n  props: ToolbarRadioButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonState => {\n  const { appearance = 'secondary' } = props;\n  const size = useToolbarContext_unstable(ctx => ctx.size);\n  const state = useToolbarRadioButtonBase_unstable(props, ref);\n  return {\n    ...state,\n    appearance,\n    size,\n  };\n};\n\n/**\n * Base hook that builds Toolbar RadioButton state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the RadioButton component.\n * @param ref - User provided ref to be passed to the RadioButton component.\n */\nexport const useToolbarRadioButtonBase_unstable = (\n  props: ToolbarRadioButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToolbarRadioButtonBaseState => {\n  const handleRadio = useToolbarContext_unstable(ctx => ctx.handleRadio);\n  const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));\n\n  const { onClick: onClickOriginal } = props;\n  const toggleButtonState = useToggleButton_unstable(\n    { checked, role: 'radio', 'aria-checked': checked, ...props },\n    ref,\n  );\n  const state: ToolbarRadioButtonBaseState = {\n    ...toggleButtonState,\n    name: props.name,\n    value: props.value,\n  };\n\n  const handleOnClick = useEventCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> & React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n      handleRadio?.(e, state.name, state.value, state.checked);\n      onClickOriginal?.(e);\n    },\n  );\n  state.root['aria-pressed'] = undefined;\n  state.root.onClick = handleOnClick;\n\n  return state;\n};\n"],"names":["React","useEventCallback","useToggleButton_unstable","useToolbarContext_unstable","useToolbarRadioButton_unstable","props","ref","appearance","size","ctx","state","useToolbarRadioButtonBase_unstable","handleRadio","checked","checkedValues","name","includes","value","onClick","onClickOriginal","toggleButtonState","role","handleOnClick","e","root","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,wBAAwB,QAAQ,yBAAyB;AAClE,SAASC,0BAA0B,QAAQ,4BAA4B;AAQvE;;;;;CAKC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAM,EAAEC,aAAa,WAAW,EAAE,GAAGF;IACrC,MAAMG,OAAOL,2BAA2BM,CAAAA,MAAOA,IAAID,IAAI;IACvD,MAAME,QAAQC,mCAAmCN,OAAOC;IACxD,OAAO;QACL,GAAGI,KAAK;QACRH;QACAC;IACF;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMG,qCAAqC,CAChDN,OACAC;IAEA,MAAMM,cAAcT,2BAA2BM,CAAAA,MAAOA,IAAIG,WAAW;IACrE,MAAMC,UAAUV,2BAA2BM,CAAAA;YAASA;eAAF,CAAC,GAACA,gCAAAA,IAAIK,aAAa,CAACT,MAAMU,IAAI,CAAC,cAA7BN,oDAAAA,8BAA+BO,QAAQ,CAACX,MAAMY,KAAK;;IAEvG,MAAM,EAAEC,SAASC,eAAe,EAAE,GAAGd;IACrC,MAAMe,oBAAoBlB,yBACxB;QAAEW;QAASQ,MAAM;QAAS,gBAAgBR;QAAS,GAAGR,KAAK;IAAC,GAC5DC;IAEF,MAAMI,QAAqC;QACzC,GAAGU,iBAAiB;QACpBL,MAAMV,MAAMU,IAAI;QAChBE,OAAOZ,MAAMY,KAAK;IACpB;IAEA,MAAMK,gBAAgBrB,iBACpB,CAACsB;QACCX,wBAAAA,kCAAAA,YAAcW,GAAGb,MAAMK,IAAI,EAAEL,MAAMO,KAAK,EAAEP,MAAMG,OAAO;QACvDM,4BAAAA,sCAAAA,gBAAkBI;IACpB;IAEFb,MAAMc,IAAI,CAAC,eAAe,GAAGC;IAC7Bf,MAAMc,IAAI,CAACN,OAAO,GAAGI;IAErB,OAAOZ;AACT,EAAE"}

package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering ToolbarToggleButton
- */ export { };
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n"],"names":[],"mappings":"AAaA;;CAEC,GACD,WAGmD"}
+{"version":3,"sources":["../src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ToggleButtonProps, ButtonSlots, ToggleButtonState } from '@fluentui/react-button';\n\n/**\n * ToolbarToggleButton Props\n */\nexport type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> &\n  Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {\n    appearance?: 'primary' | 'subtle' | 'transparent';\n    name: string;\n    value: string;\n  };\n\nexport type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;\n\n/**\n * State used in rendering ToolbarToggleButton\n */\nexport type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &\n  ToggleButtonState &\n  Required<Pick<ToggleButtonProps, 'checked'>> &\n  Pick<ToolbarToggleButtonProps, 'name' | 'value'>;\n\nexport type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance'>;\n"],"names":[],"mappings":"AAuBA,WAAoG"}

package/lib/components/ToolbarToggleButton/index.js

@@ -1,3 +1,3 @@
 export { ToolbarToggleButton } from './ToolbarToggleButton';
-export { useToolbarToggleButton_unstable } from './useToolbarToggleButton';
+export { useToolbarToggleButton_unstable, useToolbarToggleButtonBase_unstable } from './useToolbarToggleButton';
 export { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ToolbarToggleButton/index.ts"],"sourcesContent":["export { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type { ToolbarToggleButtonProps, ToolbarToggleButtonState } from './ToolbarToggleButton.types';\nexport { useToolbarToggleButton_unstable } from './useToolbarToggleButton';\nexport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';\n"],"names":["ToolbarToggleButton","useToolbarToggleButton_unstable","useToolbarToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,wBAAwB;AAE5D,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,qCAAqC,QAAQ,wCAAwC"}
+{"version":3,"sources":["../src/components/ToolbarToggleButton/index.ts"],"sourcesContent":["export { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type {\n  ToolbarToggleButtonBaseState,\n  ToolbarToggleButtonProps,\n  ToolbarToggleButtonBaseProps,\n  ToolbarToggleButtonState,\n} from './ToolbarToggleButton.types';\nexport { useToolbarToggleButton_unstable, useToolbarToggleButtonBase_unstable } from './useToolbarToggleButton';\nexport { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';\n"],"names":["ToolbarToggleButton","useToolbarToggleButton_unstable","useToolbarToggleButtonBase_unstable","useToolbarToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,wBAAwB;AAO5D,SAASC,+BAA+B,EAAEC,mCAAmC,QAAQ,2BAA2B;AAChH,SAASC,qCAAqC,QAAQ,wCAAwC"}