Skip to content

Commit fc76df2

Browse files
dmytrokirpadmytrokirpa
committed
feat(react-toolbar): expose base hooks and types for Toolbar components
1 parent ee6a69d commit fc76df2

File tree

4 files changed

+66
-14
lines changed

4 files changed

+66
-14
lines changed

‎change/@fluentui-react-toolbar-c4d2e81f-6a3b-4c90-d5e7-1f8b2a3c4d5e.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "feat: expose base hooks for Toolbar components",
4+
"packageName": "@fluentui/react-toolbar",
5+
"email": "dmytrokirpa@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-toolbar/library/etc/react-toolbar.api.md‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ButtonState } from '@fluentui/react-button';
1010
import type { ComponentProps } from '@fluentui/react-utilities';
1111
import type { ComponentState } from '@fluentui/react-utilities';
1212
import { ContextSelector } from '@fluentui/react-context-selector';
13+
import type { DistributiveOmit } from '@fluentui/react-utilities';
1314
import type { DividerSlots } from '@fluentui/react-divider';
1415
import type { DividerState } from '@fluentui/react-divider';
1516
import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -21,17 +22,29 @@ import type { ToggleButtonProps } from '@fluentui/react-button';
2122
import type { ToggleButtonState } from '@fluentui/react-button';
2223

2324
// @public
24-
export const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSXElement;
25+
export const renderToolbar_unstable: (state: ToolbarBaseState, contextValues: ToolbarContextValues) => JSXElement;
2526

2627
// @public
2728
export const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSXElement;
2829

2930
// @public
3031
export const Toolbar: ForwardRefComponent<ToolbarProps>;
3132

33+
// @public (undocumented)
34+
export type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;
35+
36+
// @public (undocumented)
37+
export type ToolbarBaseState = Omit<ToolbarState, 'size'>;
38+
3239
// @public
3340
export const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
3441

42+
// @public (undocumented)
43+
export type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;
44+
45+
// @public (undocumented)
46+
export type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;
47+
3548
// @public
3649
export type ToolbarButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {
3750
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -59,6 +72,12 @@ export type ToolbarContextValues = {
5972
// @public
6073
export const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
6174

75+
// @public (undocumented)
76+
export type ToolbarDividerBaseProps = ToolbarDividerProps;
77+
78+
// @public (undocumented)
79+
export type ToolbarDividerBaseState = Omit<ToolbarDividerState, 'appearance'>;
80+
6281
// @public
6382
export type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {
6483
vertical?: boolean;
@@ -93,6 +112,12 @@ export type ToolbarProps = ComponentProps<ToolbarSlots> & {
93112
// @public
94113
export const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
95114

115+
// @public (undocumented)
116+
export type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;
117+
118+
// @public (undocumented)
119+
export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size'>;
120+
96121
// @public
97122
export type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
98123
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -126,6 +151,12 @@ export type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarP
126151
// @public
127152
export const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps>;
128153

154+
// @public (undocumented)
155+
export type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;
156+
157+
// @public (undocumented)
158+
export type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance'>;
159+
129160
// @public
130161
export type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
131162
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -139,9 +170,15 @@ export type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & To
139170
// @public
140171
export const useToolbar_unstable: (props: ToolbarProps, ref: React_2.Ref<HTMLElement>) => ToolbarState;
141172

173+
// @internal
174+
export const useToolbarBase_unstable: (props: ToolbarBaseProps, ref: React_2.Ref<HTMLElement>) => ToolbarBaseState;
175+
142176
// @public
143177
export const useToolbarButton_unstable: (props: ToolbarButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarButtonState;
144178

179+
// @internal
180+
export const useToolbarButtonBase_unstable: (props: ToolbarButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarButtonBaseState;
181+
145182
// @public
146183
export const useToolbarButtonStyles_unstable: (state: ToolbarButtonState) => void;
147184

@@ -154,6 +191,9 @@ export function useToolbarContextValues_unstable(state: ToolbarState): ToolbarCo
154191
// @public
155192
export const useToolbarDivider_unstable: (props: ToolbarDividerProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerState;
156193

194+
// @internal
195+
export const useToolbarDividerBase_unstable: (props: ToolbarDividerBaseProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerBaseState;
196+
157197
// @public
158198
export const useToolbarDividerStyles_unstable: (state: ToolbarDividerState) => ToolbarDividerState;
159199

@@ -166,6 +206,9 @@ export const useToolbarGroupStyles_unstable: (state: ToolbarGroupState) => Toolb
166206
// @public
167207
export const useToolbarRadioButton_unstable: (props: ToolbarRadioButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonState;
168208

209+
// @internal
210+
export const useToolbarRadioButtonBase_unstable: (props: ToolbarRadioButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonBaseState;
211+
169212
// @public
170213
export const useToolbarRadioButtonStyles_unstable: (state: ToolbarRadioButtonState) => ToolbarRadioButtonState;
171214

@@ -175,6 +218,9 @@ export const useToolbarStyles_unstable: (state: ToolbarState) => ToolbarState;
175218
// @public
176219
export const useToolbarToggleButton_unstable: (props: ToolbarToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonState;
177220

221+
// @internal
222+
export const useToolbarToggleButtonBase_unstable: (props: ToolbarToggleButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonBaseState;
223+
178224
// @public
179225
export const useToolbarToggleButtonStyles_unstable: (state: ToolbarToggleButtonState) => ToolbarToggleButtonState;
180226

‎packages/react-components/react-toolbar/library/src/components/Toolbar/renderToolbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
/** @jsxImportSource @fluentui/react-jsx-runtime */
33
import { assertSlots } from '@fluentui/react-utilities';
44
import type { JSXElement } from '@fluentui/react-utilities';
5-
import type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';
5+
import type { ToolbarBaseState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';
66
import { ToolbarContext } from './ToolbarContext';
77

88
/**
99
* Render the final JSX of Toolbar
1010
*/
11-
export const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues): JSXElement => {
11+
export const renderToolbar_unstable = (state: ToolbarBaseState, contextValues: ToolbarContextValues): JSXElement => {
1212
assertSlots<ToolbarSlots>(state);
1313

1414
return (

‎packages/react-components/react-toolbar/library/src/index.ts‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,13 @@ export type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup';
3535
export { ToolbarRadioGroup } from './ToolbarRadioGroup';
3636
export type { ToolbarRadioGroupProps, ToolbarRadioGroupState } from './ToolbarRadioGroup';
3737

38-
// Experimental APIs
39-
// export type { ToolbarBaseState, ToolbarBaseProps } from './Toolbar';
40-
// export { useToolbarBase_unstable } from './Toolbar';
41-
// export type { ToolbarButtonBaseState, ToolbarButtonBaseProps } from './ToolbarButton';
42-
// export { useToolbarButtonBase_unstable } from './ToolbarButton';
43-
// export type { ToolbarDividerBaseState, ToolbarDividerBaseProps } from './ToolbarDivider';
44-
// export { useToolbarDividerBase_unstable } from './ToolbarDivider';
45-
// export type { ToolbarRadioButtonBaseState, ToolbarRadioButtonBaseProps } from './ToolbarRadioButton';
46-
// export { useToolbarRadioButtonBase_unstable } from './ToolbarRadioButton';
47-
// export type { ToolbarToggleButtonBaseState, ToolbarToggleButtonBaseProps } from './ToolbarToggleButton';
48-
// export { useToolbarToggleButtonBase_unstable } from './ToolbarToggleButton';
38+
export type { ToolbarBaseState, ToolbarBaseProps } from './Toolbar';
39+
export { useToolbarBase_unstable } from './Toolbar';
40+
export type { ToolbarButtonBaseState, ToolbarButtonBaseProps } from './ToolbarButton';
41+
export { useToolbarButtonBase_unstable } from './ToolbarButton';
42+
export type { ToolbarDividerBaseState, ToolbarDividerBaseProps } from './ToolbarDivider';
43+
export { useToolbarDividerBase_unstable } from './ToolbarDivider';
44+
export type { ToolbarRadioButtonBaseState, ToolbarRadioButtonBaseProps } from './ToolbarRadioButton';
45+
export { useToolbarRadioButtonBase_unstable } from './ToolbarRadioButton';
46+
export type { ToolbarToggleButtonBaseState, ToolbarToggleButtonBaseProps } from './ToolbarToggleButton';
47+
export { useToolbarToggleButtonBase_unstable } from './ToolbarToggleButton';

0 commit comments

Comments
 (0)