@fluentui/react-toolbar 9.6.13 → 9.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -2
- package/dist/index.d.ts +9 -4
- package/lib/Toolbar.js +1 -1
- package/lib/Toolbar.js.map +1 -1
- package/lib/ToolbarButton.js +1 -1
- package/lib/ToolbarButton.js.map +1 -1
- package/lib/ToolbarDivider.js +1 -1
- package/lib/ToolbarDivider.js.map +1 -1
- package/lib/ToolbarRadioButton.js +1 -1
- package/lib/ToolbarRadioButton.js.map +1 -1
- package/lib/ToolbarToggleButton.js +1 -1
- package/lib/ToolbarToggleButton.js.map +1 -1
- package/lib/components/Toolbar/Toolbar.types.js.map +1 -1
- package/lib/components/Toolbar/index.js +3 -1
- package/lib/components/Toolbar/index.js.map +1 -1
- package/lib/components/Toolbar/useToolbar.js +32 -10
- package/lib/components/Toolbar/useToolbar.js.map +1 -1
- package/lib/components/ToolbarButton/ToolbarButton.types.js +1 -3
- package/lib/components/ToolbarButton/ToolbarButton.types.js.map +1 -1
- package/lib/components/ToolbarButton/index.js +1 -1
- package/lib/components/ToolbarButton/index.js.map +1 -1
- package/lib/components/ToolbarButton/useToolbarButton.js +16 -0
- package/lib/components/ToolbarButton/useToolbarButton.js.map +1 -1
- package/lib/components/ToolbarDivider/ToolbarDivider.types.js +1 -3
- package/lib/components/ToolbarDivider/ToolbarDivider.types.js.map +1 -1
- package/lib/components/ToolbarDivider/index.js +1 -1
- package/lib/components/ToolbarDivider/index.js.map +1 -1
- package/lib/components/ToolbarDivider/useToolbarDivider.js +14 -0
- package/lib/components/ToolbarDivider/useToolbarDivider.js.map +1 -1
- package/lib/components/ToolbarGroup/index.js +1 -1
- package/lib/components/ToolbarGroup/index.js.map +1 -1
- package/lib/components/ToolbarGroup/useToolbarGroup.js +11 -1
- package/lib/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
- package/lib/components/ToolbarRadioButton/ToolbarRadioButton.types.js +1 -3
- package/lib/components/ToolbarRadioButton/ToolbarRadioButton.types.js.map +1 -1
- package/lib/components/ToolbarRadioButton/index.js +1 -1
- package/lib/components/ToolbarRadioButton/index.js.map +1 -1
- package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js +17 -2
- package/lib/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
- package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js +1 -3
- package/lib/components/ToolbarToggleButton/ToolbarToggleButton.types.js.map +1 -1
- package/lib/components/ToolbarToggleButton/index.js +1 -1
- package/lib/components/ToolbarToggleButton/index.js.map +1 -1
- package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js +15 -1
- package/lib/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -1
- package/lib/index.js +12 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Toolbar.js +9 -0
- package/lib-commonjs/Toolbar.js.map +1 -1
- package/lib-commonjs/ToolbarButton.js +3 -0
- package/lib-commonjs/ToolbarButton.js.map +1 -1
- package/lib-commonjs/ToolbarDivider.js +3 -0
- package/lib-commonjs/ToolbarDivider.js.map +1 -1
- package/lib-commonjs/ToolbarRadioButton.js +3 -0
- package/lib-commonjs/ToolbarRadioButton.js.map +1 -1
- package/lib-commonjs/ToolbarToggleButton.js +3 -0
- package/lib-commonjs/ToolbarToggleButton.js.map +1 -1
- package/lib-commonjs/components/Toolbar/Toolbar.types.js.map +1 -1
- package/lib-commonjs/components/Toolbar/index.js +11 -0
- package/lib-commonjs/components/Toolbar/index.js.map +1 -1
- package/lib-commonjs/components/Toolbar/useToolbar.js +34 -13
- package/lib-commonjs/components/Toolbar/useToolbar.js.map +1 -1
- package/lib-commonjs/components/ToolbarButton/ToolbarButton.types.js +1 -3
- package/lib-commonjs/components/ToolbarButton/ToolbarButton.types.js.map +1 -1
- package/lib-commonjs/components/ToolbarButton/index.js +3 -0
- package/lib-commonjs/components/ToolbarButton/index.js.map +1 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButton.js +20 -3
- package/lib-commonjs/components/ToolbarButton/useToolbarButton.js.map +1 -1
- package/lib-commonjs/components/ToolbarDivider/ToolbarDivider.types.js +1 -3
- package/lib-commonjs/components/ToolbarDivider/ToolbarDivider.types.js.map +1 -1
- package/lib-commonjs/components/ToolbarDivider/index.js +3 -0
- package/lib-commonjs/components/ToolbarDivider/index.js.map +1 -1
- package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js +18 -3
- package/lib-commonjs/components/ToolbarDivider/useToolbarDivider.js.map +1 -1
- package/lib-commonjs/components/ToolbarGroup/index.js +3 -0
- package/lib-commonjs/components/ToolbarGroup/index.js.map +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js +15 -4
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/ToolbarRadioButton.types.js +1 -3
- package/lib-commonjs/components/ToolbarRadioButton/ToolbarRadioButton.types.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/index.js +3 -0
- package/lib-commonjs/components/ToolbarRadioButton/index.js.map +1 -1
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js +21 -5
- package/lib-commonjs/components/ToolbarRadioButton/useToolbarRadioButton.js.map +1 -1
- package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.types.js +1 -3
- package/lib-commonjs/components/ToolbarToggleButton/ToolbarToggleButton.types.js.map +1 -1
- package/lib-commonjs/components/ToolbarToggleButton/index.js +3 -0
- package/lib-commonjs/components/ToolbarToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js +19 -4
- package/lib-commonjs/components/ToolbarToggleButton/useToolbarToggleButton.js.map +1 -1
- package/lib-commonjs/index.js +17 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,46 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toolbar
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 22 Jan 2026 17:01:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.7.0)
|
|
8
|
+
|
|
9
|
+
Thu, 22 Jan 2026 17:01:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.14..@fluentui/react-toolbar_v9.7.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: add base hooks for Toolbar components ([PR #35658](https://github.com/microsoft/fluentui/pull/35658) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-button to v9.8.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
16
|
+
- Bump @fluentui/react-divider to v9.6.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
19
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
20
|
+
- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
21
|
+
- Bump @fluentui/react-radio to v9.5.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
22
|
+
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
23
|
+
- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
|
|
24
|
+
|
|
25
|
+
## [9.6.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.14)
|
|
26
|
+
|
|
27
|
+
Wed, 17 Dec 2025 18:10:10 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.13..@fluentui/react-toolbar_v9.6.14)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- Fix toolbar toggle button ([PR #35563](https://github.com/microsoft/fluentui/pull/35563) by charles.assuncao@microsoft.com)
|
|
33
|
+
- Bump @fluentui/react-button to v9.7.1 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
|
|
34
|
+
- Bump @fluentui/react-divider to v9.5.1 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
|
|
36
|
+
- Bump @fluentui/react-jsx-runtime to v9.3.4 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
|
|
37
|
+
- Bump @fluentui/react-context-selector to v9.2.13 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
|
|
38
|
+
- Bump @fluentui/react-radio to v9.5.12 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
|
|
39
|
+
- Bump @fluentui/react-tabster to v9.26.11 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
|
|
40
|
+
|
|
7
41
|
## [9.6.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.6.13)
|
|
8
42
|
|
|
9
|
-
Fri, 05 Dec 2025 22:
|
|
43
|
+
Fri, 05 Dec 2025 22:38:27 GMT
|
|
10
44
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.6.12..@fluentui/react-toolbar_v9.6.13)
|
|
11
45
|
|
|
12
46
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -3,15 +3,16 @@ import { ButtonSlots } from '@fluentui/react-button';
|
|
|
3
3
|
import { ButtonState } from '@fluentui/react-button';
|
|
4
4
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
5
5
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { ContextSelector } from '@fluentui/react-context-selector';
|
|
7
|
+
import type { DividerSlots } from '@fluentui/react-divider';
|
|
8
|
+
import type { DividerState } from '@fluentui/react-divider';
|
|
8
9
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
9
10
|
import type { JSXElement } from '@fluentui/react-utilities';
|
|
10
11
|
import * as React_2 from 'react';
|
|
11
12
|
import type { Slot } from '@fluentui/react-utilities';
|
|
12
13
|
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
13
|
-
import { ToggleButtonProps } from '@fluentui/react-button';
|
|
14
|
-
import { ToggleButtonState } from '@fluentui/react-button';
|
|
14
|
+
import type { ToggleButtonProps } from '@fluentui/react-button';
|
|
15
|
+
import type { ToggleButtonState } from '@fluentui/react-button';
|
|
15
16
|
|
|
16
17
|
/**
|
|
17
18
|
* Render the final JSX of Toolbar
|
|
@@ -242,6 +243,10 @@ export declare const useToolbarButton_unstable: (props: ToolbarButtonProps, ref:
|
|
|
242
243
|
*/
|
|
243
244
|
export declare const useToolbarButtonStyles_unstable: (state: ToolbarButtonState) => void;
|
|
244
245
|
|
|
246
|
+
export declare const useToolbarContext_unstable: <T>(selector: ContextSelector<ToolbarContextValue, T>) => T;
|
|
247
|
+
|
|
248
|
+
export declare function useToolbarContextValues_unstable(state: ToolbarState): ToolbarContextValues;
|
|
249
|
+
|
|
245
250
|
/**
|
|
246
251
|
* Create the state required to render ToolbarDivider.
|
|
247
252
|
*
|
package/lib/Toolbar.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Toolbar, renderToolbar_unstable, toolbarClassNames, useToolbarStyles_unstable, useToolbar_unstable } from './components/Toolbar/index';
|
|
1
|
+
export { Toolbar, renderToolbar_unstable, toolbarClassNames, useToolbarStyles_unstable, useToolbar_unstable, useToolbarBase_unstable, useToolbarContext_unstable, useToolbarContextValues_unstable } from './components/Toolbar/index';
|
package/lib/Toolbar.js.map
CHANGED
|
@@ -1 +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":"
|
|
1
|
+
{"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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButton_unstable } from './components/ToolbarButton/index';
|
|
1
|
+
export { ToolbarButton, useToolbarButtonStyles_unstable, useToolbarButton_unstable, useToolbarButtonBase_unstable } from './components/ToolbarButton/index';
|
package/lib/ToolbarButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ToolbarButton.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable } from './components/ToolbarDivider/index';
|
|
1
|
+
export { ToolbarDivider, useToolbarDividerStyles_unstable, useToolbarDivider_unstable, useToolbarDividerBase_unstable } from './components/ToolbarDivider/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ToolbarDivider.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { ToolbarRadioButton, useToolbarRadioButtonStyles_unstable, useToolbarRadioButton_unstable } from './components/ToolbarRadioButton/index';
|
|
1
|
+
export { ToolbarRadioButton, useToolbarRadioButtonStyles_unstable, useToolbarRadioButton_unstable, useToolbarRadioButtonBase_unstable } from './components/ToolbarRadioButton/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ToolbarRadioButton.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { ToolbarToggleButton, useToolbarToggleButtonStyles_unstable, useToolbarToggleButton_unstable } from './components/ToolbarToggleButton/index';
|
|
1
|
+
export { ToolbarToggleButton, useToolbarToggleButtonStyles_unstable, useToolbarToggleButton_unstable, useToolbarToggleButtonBase_unstable } from './components/ToolbarToggleButton/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ToolbarToggleButton.ts"],"sourcesContent":["export type {
|
|
1
|
+
{"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"}
|
|
@@ -1 +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<
|
|
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\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"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
export { useToolbarContext_unstable } from './ToolbarContext';
|
|
1
2
|
export { Toolbar } from './Toolbar';
|
|
2
3
|
export { renderToolbar_unstable } from './renderToolbar';
|
|
3
|
-
export { useToolbar_unstable } from './useToolbar';
|
|
4
|
+
export { useToolbar_unstable, useToolbarBase_unstable } from './useToolbar';
|
|
5
|
+
export { useToolbarContextValues_unstable } from './useToolbarContextValues';
|
|
4
6
|
export { toolbarClassNames, useToolbarStyles_unstable } from './useToolbarStyles.styles';
|
|
@@ -1 +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;
|
|
1
|
+
{"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"}
|
|
@@ -11,13 +11,28 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
11
11
|
* @param props - props from this instance of Toolbar
|
|
12
12
|
* @param ref - reference to root HTMLElement of Toolbar
|
|
13
13
|
*/ export const useToolbar_unstable = (props, ref)=>{
|
|
14
|
-
const { size = 'medium'
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
});
|
|
19
|
-
const initialState = {
|
|
14
|
+
const { size = 'medium' } = props;
|
|
15
|
+
const state = useToolbarBase_unstable(props, ref);
|
|
16
|
+
const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();
|
|
17
|
+
return {
|
|
20
18
|
size,
|
|
19
|
+
...state,
|
|
20
|
+
root: {
|
|
21
|
+
...state.root,
|
|
22
|
+
...arrowNavigationProps
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Base hook that builds Toolbar state for behavior and structure only.
|
|
28
|
+
* It does not add arrow key navigation, which is handled by `useToolbar_unstable`.
|
|
29
|
+
*
|
|
30
|
+
* @internal
|
|
31
|
+
* @param props - Props for this Toolbar instance.
|
|
32
|
+
* @param ref - Ref to the root HTMLElement.
|
|
33
|
+
*/ export const useToolbarBase_unstable = (props, ref)=>{
|
|
34
|
+
const { vertical = false } = props;
|
|
35
|
+
const initialState = {
|
|
21
36
|
vertical,
|
|
22
37
|
// TODO add appropriate props/defaults
|
|
23
38
|
components: {
|
|
@@ -28,14 +43,10 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
28
43
|
// mySlot: resolveShorthand(props.mySlot),
|
|
29
44
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
30
45
|
role: 'toolbar',
|
|
31
|
-
// FIXME:
|
|
32
|
-
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
33
|
-
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
34
46
|
ref: ref,
|
|
35
47
|
...vertical && {
|
|
36
48
|
'aria-orientation': 'vertical'
|
|
37
49
|
},
|
|
38
|
-
...arrowNavigationProps,
|
|
39
50
|
...props
|
|
40
51
|
}), {
|
|
41
52
|
elementType: 'div'
|
|
@@ -111,3 +122,14 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
111
122
|
onCheckedValueChange
|
|
112
123
|
];
|
|
113
124
|
};
|
|
125
|
+
/**
|
|
126
|
+
* Hook to add arrow navigation props to the Toolbar.
|
|
127
|
+
*
|
|
128
|
+
* @internal
|
|
129
|
+
* @returns - Tabster DOM attributes for arrow navigation
|
|
130
|
+
*/ export const useToolbarArrowNavigationProps_unstable = ()=>{
|
|
131
|
+
return useArrowNavigationGroup({
|
|
132
|
+
circular: true,
|
|
133
|
+
axis: 'both'
|
|
134
|
+
});
|
|
135
|
+
};
|
|
@@ -1 +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 {
|
|
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 {\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"}
|
|
@@ -1 +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":"
|
|
1
|
+
{"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { ToolbarButton } from './ToolbarButton';
|
|
2
|
-
export { useToolbarButton_unstable } from './useToolbarButton';
|
|
2
|
+
export { useToolbarButton_unstable, useToolbarButtonBase_unstable } from './useToolbarButton';
|
|
3
3
|
export { useToolbarButtonStyles_unstable } from './useToolbarButtonStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarButton/index.ts"],"sourcesContent":["export { ToolbarButton } from './ToolbarButton';\nexport type {
|
|
1
|
+
{"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"}
|
|
@@ -7,6 +7,22 @@ import { useButton_unstable } from '@fluentui/react-button';
|
|
|
7
7
|
* @param props - User provided props to the Button component.
|
|
8
8
|
* @param ref - User provided ref to be passed to the Button component.
|
|
9
9
|
*/ export const useToolbarButton_unstable = (props, ref)=>{
|
|
10
|
+
const state = useToolbarButtonBase_unstable(props, ref);
|
|
11
|
+
return {
|
|
12
|
+
appearance: 'subtle',
|
|
13
|
+
size: 'medium',
|
|
14
|
+
shape: 'rounded',
|
|
15
|
+
...state
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Base hook that builds Toolbar Button state for behavior and structure only.
|
|
20
|
+
* It does not provide any design-related defaults.
|
|
21
|
+
*
|
|
22
|
+
* @internal
|
|
23
|
+
* @param props - User provided props to the Button component.
|
|
24
|
+
* @param ref - User provided ref to be passed to the Button component.
|
|
25
|
+
*/ export const useToolbarButtonBase_unstable = (props, ref)=>{
|
|
10
26
|
const { vertical = false, ...buttonProps } = props;
|
|
11
27
|
const state = useButton_unstable({
|
|
12
28
|
appearance: 'subtle',
|
|
@@ -1 +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 {
|
|
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 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"}
|
|
@@ -1 +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":"
|
|
1
|
+
{"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { ToolbarDivider } from './ToolbarDivider';
|
|
2
2
|
export { useToolbarDividerStyles_unstable } from './useToolbarDividerStyles.styles';
|
|
3
|
-
export { useToolbarDivider_unstable } from './useToolbarDivider';
|
|
3
|
+
export { useToolbarDivider_unstable, useToolbarDividerBase_unstable } from './useToolbarDivider';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarDivider/index.ts"],"sourcesContent":["export { ToolbarDivider } from './ToolbarDivider';\nexport type {
|
|
1
|
+
{"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"}
|
|
@@ -11,6 +11,20 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
|
|
|
11
11
|
* @param props - props from this instance of ToolbarDivider
|
|
12
12
|
* @param ref - reference to root HTMLElement of ToolbarDivider
|
|
13
13
|
*/ export const useToolbarDivider_unstable = (props, ref)=>{
|
|
14
|
+
const state = useToolbarDividerBase_unstable(props, ref);
|
|
15
|
+
return {
|
|
16
|
+
...state,
|
|
17
|
+
appearance: 'default'
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Base hook that builds ToolbarDivider state for behavior and structure only.
|
|
22
|
+
* It does not provide any design-related defaults.
|
|
23
|
+
*
|
|
24
|
+
* @internal
|
|
25
|
+
* @param props - props from this instance of ToolbarDivider
|
|
26
|
+
* @param ref - reference to root HTMLElement of ToolbarDivider
|
|
27
|
+
*/ export const useToolbarDividerBase_unstable = (props, ref)=>{
|
|
14
28
|
const vertical = useToolbarContext_unstable((ctx)=>ctx.vertical);
|
|
15
29
|
return useDivider_unstable({
|
|
16
30
|
vertical: !vertical,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarDivider/useToolbarDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
1
|
+
{"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { ToolbarGroup } from './ToolbarGroup';
|
|
2
|
-
export { useToolbarGroup_unstable } from './useToolbarGroup';
|
|
2
|
+
export { useToolbarGroup_unstable, useToolbarGroupBase_unstable } from './useToolbarGroup';
|
|
3
3
|
export { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';
|
|
4
4
|
export { renderToolbarGroup_unstable } from './renderToolbarGroup';
|
|
@@ -1 +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;
|
|
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, 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"}
|
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
2
|
import * as React from 'react';
|
|
3
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
4
4
|
import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
|
|
5
5
|
/**
|
|
6
6
|
* Given user props, defines default props for the Group
|
|
7
7
|
* @param props - User provided props to the Group component.
|
|
8
8
|
* @param ref - User provided ref to be passed to the Group component.
|
|
9
9
|
*/ export const useToolbarGroup_unstable = (props, ref)=>{
|
|
10
|
+
return useToolbarGroupBase_unstable(props, ref);
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Base hook that builds Toolbar Group state for behavior and structure only.
|
|
14
|
+
* It does not provide any design-related defaults.
|
|
15
|
+
*
|
|
16
|
+
* @internal
|
|
17
|
+
* @param props - User provided props to the Group component.
|
|
18
|
+
* @param ref - User provided ref to be passed to the Group component.
|
|
19
|
+
*/ export const useToolbarGroupBase_unstable = (props, ref)=>{
|
|
10
20
|
const vertical = useToolbarContext_unstable((ctx)=>ctx.vertical);
|
|
11
21
|
return {
|
|
12
22
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport
|
|
1
|
+
{"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"}
|
|
@@ -1 +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":"
|
|
1
|
+
{"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { ToolbarRadioButton } from './ToolbarRadioButton';
|
|
2
|
-
export { useToolbarRadioButton_unstable } from './useToolbarRadioButton';
|
|
2
|
+
export { useToolbarRadioButton_unstable, useToolbarRadioButtonBase_unstable } from './useToolbarRadioButton';
|
|
3
3
|
export { useToolbarRadioButtonStyles_unstable } from './useToolbarRadioButtonStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarRadioButton/index.ts"],"sourcesContent":["export { ToolbarRadioButton } from './ToolbarRadioButton';\nexport type {
|
|
1
|
+
{"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"}
|
|
@@ -9,15 +9,30 @@ import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
|
|
|
9
9
|
* @param props - User provided props to the RadioButton component.
|
|
10
10
|
* @param ref - User provided ref to be passed to the RadioButton component.
|
|
11
11
|
*/ export const useToolbarRadioButton_unstable = (props, ref)=>{
|
|
12
|
+
const { appearance = 'secondary' } = props;
|
|
13
|
+
const size = useToolbarContext_unstable((ctx)=>ctx.size);
|
|
14
|
+
const state = useToolbarRadioButtonBase_unstable(props, ref);
|
|
15
|
+
return {
|
|
16
|
+
...state,
|
|
17
|
+
appearance,
|
|
18
|
+
size
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Base hook that builds Toolbar RadioButton state for behavior and structure only.
|
|
23
|
+
* It does not provide any design-related defaults.
|
|
24
|
+
*
|
|
25
|
+
* @internal
|
|
26
|
+
* @param props - User provided props to the RadioButton component.
|
|
27
|
+
* @param ref - User provided ref to be passed to the RadioButton component.
|
|
28
|
+
*/ export const useToolbarRadioButtonBase_unstable = (props, ref)=>{
|
|
12
29
|
const handleRadio = useToolbarContext_unstable((ctx)=>ctx.handleRadio);
|
|
13
30
|
const checked = useToolbarContext_unstable((ctx)=>{
|
|
14
31
|
var _ctx_checkedValues_props_name;
|
|
15
32
|
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));
|
|
16
33
|
});
|
|
17
|
-
const size = useToolbarContext_unstable((ctx)=>ctx.size);
|
|
18
34
|
const { onClick: onClickOriginal } = props;
|
|
19
35
|
const toggleButtonState = useToggleButton_unstable({
|
|
20
|
-
size,
|
|
21
36
|
checked,
|
|
22
37
|
role: 'radio',
|
|
23
38
|
'aria-checked': checked,
|
|
@@ -1 +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 {
|
|
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 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"}
|
|
@@ -1 +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":"
|
|
1
|
+
{"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { ToolbarToggleButton } from './ToolbarToggleButton';
|
|
2
|
-
export { useToolbarToggleButton_unstable } from './useToolbarToggleButton';
|
|
2
|
+
export { useToolbarToggleButton_unstable, useToolbarToggleButtonBase_unstable } from './useToolbarToggleButton';
|
|
3
3
|
export { useToolbarToggleButtonStyles_unstable } from './useToolbarToggleButtonStyles.styles';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToolbarToggleButton/index.ts"],"sourcesContent":["export { ToolbarToggleButton } from './ToolbarToggleButton';\nexport type {
|
|
1
|
+
{"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"}
|