Skip to content

Commit 80ea1e9

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

File tree

11 files changed

+125
-44
lines changed

11 files changed

+125
-44
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: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ 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';
14+
import type { DividerBaseState } from '@fluentui/react-divider';
1315
import type { DividerSlots } from '@fluentui/react-divider';
1416
import type { DividerState } from '@fluentui/react-divider';
1517
import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -21,17 +23,29 @@ import type { ToggleButtonProps } from '@fluentui/react-button';
2123
import type { ToggleButtonState } from '@fluentui/react-button';
2224

2325
// @public
24-
export const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSXElement;
26+
export const renderToolbar_unstable: (state: ToolbarBaseState, contextValues: ToolbarContextValues) => JSXElement;
2527

2628
// @public
2729
export const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSXElement;
2830

2931
// @public
3032
export const Toolbar: ForwardRefComponent<ToolbarProps>;
3133

34+
// @public (undocumented)
35+
export type ToolbarBaseProps = Omit<ToolbarProps, 'size'>;
36+
37+
// @public (undocumented)
38+
export type ToolbarBaseState = Omit<ToolbarState, 'size'>;
39+
3240
// @public
3341
export const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
3442

43+
// @public (undocumented)
44+
export type ToolbarButtonBaseProps = DistributiveOmit<ToolbarButtonProps, 'appearance'>;
45+
46+
// @public (undocumented)
47+
export type ToolbarButtonBaseState = DistributiveOmit<ToolbarButtonState, 'appearance' | 'size' | 'shape'>;
48+
3549
// @public
3650
export type ToolbarButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {
3751
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -59,6 +73,12 @@ export type ToolbarContextValues = {
5973
// @public
6074
export const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
6175

76+
// @public (undocumented)
77+
export type ToolbarDividerBaseProps = ToolbarDividerProps;
78+
79+
// @public (undocumented)
80+
export type ToolbarDividerBaseState = ComponentState<Partial<DividerSlots>> & DividerBaseState;
81+
6282
// @public
6383
export type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {
6484
vertical?: boolean;
@@ -93,6 +113,12 @@ export type ToolbarProps = ComponentProps<ToolbarSlots> & {
93113
// @public
94114
export const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
95115

116+
// @public (undocumented)
117+
export type ToolbarRadioButtonBaseProps = DistributiveOmit<ToolbarRadioButtonProps, 'appearance'>;
118+
119+
// @public (undocumented)
120+
export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size' | 'shape'>;
121+
96122
// @public
97123
export type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
98124
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -126,6 +152,12 @@ export type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarP
126152
// @public
127153
export const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps>;
128154

155+
// @public (undocumented)
156+
export type ToolbarToggleButtonBaseProps = DistributiveOmit<ToolbarToggleButtonProps, 'appearance'>;
157+
158+
// @public (undocumented)
159+
export type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance' | 'size' | 'shape'>;
160+
129161
// @public
130162
export type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
131163
appearance?: 'primary' | 'subtle' | 'transparent';
@@ -139,9 +171,15 @@ export type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & To
139171
// @public
140172
export const useToolbar_unstable: (props: ToolbarProps, ref: React_2.Ref<HTMLElement>) => ToolbarState;
141173

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

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

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

195+
// @internal
196+
export const useToolbarDividerBase_unstable: (props: ToolbarDividerBaseProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerBaseState;
197+
157198
// @public
158199
export const useToolbarDividerStyles_unstable: (state: ToolbarDividerState) => ToolbarDividerState;
159200

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

210+
// @internal
211+
export const useToolbarRadioButtonBase_unstable: (props: ToolbarRadioButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonBaseState;
212+
169213
// @public
170214
export const useToolbarRadioButtonStyles_unstable: (state: ToolbarRadioButtonState) => ToolbarRadioButtonState;
171215

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

222+
// @internal
223+
export const useToolbarToggleButtonBase_unstable: (props: ToolbarToggleButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonBaseState;
224+
178225
// @public
179226
export const useToolbarToggleButtonStyles_unstable: (state: ToolbarToggleButtonState) => ToolbarToggleButtonState;
180227

‎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/components/ToolbarButton/useToolbarButton.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import * as React from 'react';
4-
import { useButton_unstable } from '@fluentui/react-button';
4+
import { useButtonBase_unstable } from '@fluentui/react-button';
55
import type {
66
ToolbarButtonBaseProps,
77
ToolbarButtonBaseState,
@@ -42,14 +42,7 @@ export const useToolbarButtonBase_unstable = (
4242
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
4343
): ToolbarButtonBaseState => {
4444
const { vertical = false, ...buttonProps } = props;
45-
const state = useButton_unstable(
46-
{
47-
appearance: 'subtle',
48-
...buttonProps,
49-
size: 'medium',
50-
},
51-
ref,
52-
);
45+
const state = useButtonBase_unstable(buttonProps, ref);
5346

5447
return {
5548
vertical,

‎packages/react-components/react-toolbar/library/src/components/ToolbarDivider/ToolbarDivider.types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
2-
import type { DividerSlots, DividerState } from '@fluentui/react-divider';
2+
import type { DividerSlots, DividerState, DividerBaseState } from '@fluentui/react-divider';
33

44
/**
55
* ToolbarDivider Props
@@ -20,4 +20,4 @@ export type ToolbarDividerBaseProps = ToolbarDividerProps;
2020
*/
2121
export type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;
2222

23-
export type ToolbarDividerBaseState = Omit<ToolbarDividerState, 'appearance'>;
23+
export type ToolbarDividerBaseState = ComponentState<Partial<DividerSlots>> & DividerBaseState;

‎packages/react-components/react-toolbar/library/src/components/ToolbarDivider/useToolbarDivider.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type {
77
ToolbarDividerProps,
88
ToolbarDividerState,
99
} from './ToolbarDivider.types';
10-
import { useDivider_unstable } from '@fluentui/react-divider';
10+
import { useDividerBase_unstable } from '@fluentui/react-divider';
1111
import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
1212

1313
/**
@@ -27,6 +27,8 @@ export const useToolbarDivider_unstable = (
2727
return {
2828
...state,
2929
appearance: 'default',
30+
alignContent: 'center',
31+
inset: false,
3032
};
3133
};
3234

@@ -43,5 +45,5 @@ export const useToolbarDividerBase_unstable = (
4345
ref: React.Ref<HTMLElement>,
4446
): ToolbarDividerBaseState => {
4547
const vertical = useToolbarContext_unstable(ctx => ctx.vertical);
46-
return useDivider_unstable({ vertical: !vertical, ...props }, ref);
48+
return useDividerBase_unstable({ vertical: !vertical, ...props }, ref);
4749
};

‎packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ export type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> &
2121
Required<Pick<ToggleButtonProps, 'checked'>> &
2222
Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
2323

24-
export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size'>;
24+
export type ToolbarRadioButtonBaseState = DistributiveOmit<ToolbarRadioButtonState, 'appearance' | 'size' | 'shape'>;

‎packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButton.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import * as React from 'react';
44
import { useEventCallback } from '@fluentui/react-utilities';
5-
import { useToggleButton_unstable } from '@fluentui/react-button';
5+
import { useToggleButtonBase_unstable } from '@fluentui/react-button';
66
import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
77
import type {
88
ToolbarRadioButtonProps,
@@ -21,15 +21,16 @@ export const useToolbarRadioButton_unstable = (
2121
props: ToolbarRadioButtonProps,
2222
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
2323
): ToolbarRadioButtonState => {
24-
const { appearance = 'secondary' } = props;
25-
const size = useToolbarContext_unstable(ctx => ctx.size);
26-
const state = useToolbarRadioButtonBase_unstable(props, ref);
24+
const { appearance = 'secondary', size, ...baseProps } = props;
25+
const contextSize = useToolbarContext_unstable(ctx => ctx.size);
26+
const state = useToolbarRadioButtonBase_unstable(baseProps, ref);
2727

2828
return {
2929
...state,
3030

3131
appearance,
32-
size: props.size || size,
32+
size: size || contextSize,
33+
shape: 'rounded',
3334
};
3435
};
3536

@@ -49,7 +50,7 @@ export const useToolbarRadioButtonBase_unstable = (
4950
const checked = useToolbarContext_unstable(ctx => !!ctx.checkedValues[props.name]?.includes(props.value));
5051

5152
const { onClick: onClickOriginal } = props;
52-
const toggleButtonState = useToggleButton_unstable(
53+
const toggleButtonState = useToggleButtonBase_unstable(
5354
{ checked, role: 'radio', 'aria-checked': checked, ...props },
5455
ref,
5556
);

‎packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ export type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> &
2121
Required<Pick<ToggleButtonProps, 'checked'>> &
2222
Pick<ToolbarToggleButtonProps, 'name' | 'value'>;
2323

24-
export type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance'>;
24+
export type ToolbarToggleButtonBaseState = DistributiveOmit<ToolbarToggleButtonState, 'appearance' | 'size' | 'shape'>;

‎packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButton.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,12 @@ export const useToolbarToggleButton_unstable = (
2020
props: ToolbarToggleButtonProps,
2121
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
2222
): ToolbarToggleButtonState => {
23-
const { appearance = 'subtle', ...baseProps } = props;
23+
const { appearance = 'subtle', size = 'medium', ...baseProps } = props;
2424
const state = useToolbarToggleButtonBase_unstable(baseProps, ref);
2525
return {
2626
appearance,
27+
size,
28+
shape: 'rounded',
2729
...state,
2830
};
2931
};

0 commit comments

Comments
 (0)