@fluentui/react-toolbar 9.1.28 → 9.1.30
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.json +115 -1
- package/CHANGELOG.md +34 -2
- package/lib/components/Toolbar/renderToolbar.js +3 -3
- package/lib/components/Toolbar/renderToolbar.js.map +1 -1
- package/lib/components/Toolbar/useToolbar.js +4 -3
- package/lib/components/Toolbar/useToolbar.js.map +1 -1
- package/lib/components/Toolbar/useToolbarStyles.styles.js +1 -1
- package/lib/components/ToolbarButton/useToolbarButtonStyles.styles.js +1 -1
- package/lib/components/ToolbarDivider/useToolbarDividerStyles.styles.js +1 -1
- package/lib/components/ToolbarGroup/renderToolbarGroup.js +3 -3
- package/lib/components/ToolbarGroup/renderToolbarGroup.js.map +1 -1
- package/lib/components/ToolbarGroup/useToolbarGroup.js +4 -2
- package/lib/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
- package/lib-commonjs/components/Toolbar/renderToolbar.js +2 -2
- package/lib-commonjs/components/Toolbar/renderToolbar.js.map +1 -1
- package/lib-commonjs/components/Toolbar/useToolbar.js +3 -1
- package/lib-commonjs/components/Toolbar/useToolbar.js.map +1 -1
- package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js +4 -4
- package/lib-commonjs/components/Toolbar/useToolbarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js +1 -1
- package/lib-commonjs/components/ToolbarButton/useToolbarButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.styles.js +1 -1
- package/lib-commonjs/components/ToolbarDivider/useToolbarDividerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js +2 -2
- package/lib-commonjs/components/ToolbarGroup/renderToolbarGroup.js.map +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js +3 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
- package/package.json +11 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,121 @@
|
|
|
2
2
|
"name": "@fluentui/react-toolbar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Fri,
|
|
5
|
+
"date": "Fri, 11 Aug 2023 12:10:20 GMT",
|
|
6
|
+
"tag": "@fluentui/react-toolbar_v9.1.30",
|
|
7
|
+
"version": "9.1.30",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-toolbar",
|
|
13
|
+
"comment": "Bump @fluentui/react-button to v9.3.29",
|
|
14
|
+
"commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-toolbar",
|
|
19
|
+
"comment": "Bump @fluentui/react-divider to v9.2.25",
|
|
20
|
+
"commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-toolbar",
|
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v9.11.1",
|
|
26
|
+
"commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-toolbar",
|
|
31
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15",
|
|
32
|
+
"commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-toolbar",
|
|
37
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.28",
|
|
38
|
+
"commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-toolbar",
|
|
43
|
+
"comment": "Bump @fluentui/react-radio to v9.1.30",
|
|
44
|
+
"commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-toolbar",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.2",
|
|
50
|
+
"commit": "a77bcda1628e8b20b113d0237317efd7ebbc5294"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Wed, 09 Aug 2023 13:17:08 GMT",
|
|
57
|
+
"tag": "@fluentui/react-toolbar_v9.1.29",
|
|
58
|
+
"version": "9.1.29",
|
|
59
|
+
"comments": {
|
|
60
|
+
"patch": [
|
|
61
|
+
{
|
|
62
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
63
|
+
"package": "@fluentui/react-toolbar",
|
|
64
|
+
"commit": "e615f12c54c8a4acad49930a02c3b703fd64692b",
|
|
65
|
+
"comment": "chore(teams-prg): migrate to new slot API"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "olfedias@microsoft.com",
|
|
69
|
+
"package": "@fluentui/react-toolbar",
|
|
70
|
+
"commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
|
|
71
|
+
"comment": "chore: Update Griffel to latest version"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-toolbar",
|
|
76
|
+
"comment": "Bump @fluentui/react-button to v9.3.28",
|
|
77
|
+
"commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-toolbar",
|
|
82
|
+
"comment": "Bump @fluentui/react-divider to v9.2.24",
|
|
83
|
+
"commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-toolbar",
|
|
88
|
+
"comment": "Bump @fluentui/react-theme to v9.1.11",
|
|
89
|
+
"commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-toolbar",
|
|
94
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
|
|
95
|
+
"commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-toolbar",
|
|
100
|
+
"comment": "Bump @fluentui/react-radio to v9.1.29",
|
|
101
|
+
"commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-toolbar",
|
|
106
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
|
|
107
|
+
"commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-toolbar",
|
|
112
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.1",
|
|
113
|
+
"commit": "9509e950254d838cdfe3718a775ba5c78cb8f11a"
|
|
114
|
+
}
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"date": "Fri, 04 Aug 2023 08:52:58 GMT",
|
|
6
120
|
"tag": "@fluentui/react-toolbar_v9.1.28",
|
|
7
121
|
"version": "9.1.28",
|
|
8
122
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-toolbar
|
|
2
2
|
|
|
3
|
-
This log was last generated on Fri,
|
|
3
|
+
This log was last generated on Fri, 11 Aug 2023 12:10:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.30)
|
|
8
|
+
|
|
9
|
+
Fri, 11 Aug 2023 12:10:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.29..@fluentui/react-toolbar_v9.1.30)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-button to v9.3.29 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
|
|
15
|
+
- Bump @fluentui/react-divider to v9.2.25 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.11.1 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.15 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
|
|
18
|
+
- Bump @fluentui/react-context-selector to v9.1.28 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
|
|
19
|
+
- Bump @fluentui/react-radio to v9.1.30 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.12.2 ([PR #28808](https://github.com/microsoft/fluentui/pull/28808) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.1.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.29)
|
|
23
|
+
|
|
24
|
+
Wed, 09 Aug 2023 13:17:08 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.28..@fluentui/react-toolbar_v9.1.29)
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- chore(teams-prg): migrate to new slot API ([PR #28751](https://github.com/microsoft/fluentui/pull/28751) by bernardo.sunderhus@gmail.com)
|
|
30
|
+
- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
|
|
31
|
+
- Bump @fluentui/react-button to v9.3.28 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
|
|
32
|
+
- Bump @fluentui/react-divider to v9.2.24 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
|
|
33
|
+
- Bump @fluentui/react-theme to v9.1.11 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
|
|
34
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
|
|
35
|
+
- Bump @fluentui/react-radio to v9.1.29 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
|
|
36
|
+
- Bump @fluentui/react-shared-contexts to v9.7.2 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
|
|
37
|
+
- Bump @fluentui/react-tabster to v9.12.1 ([PR #28775](https://github.com/microsoft/fluentui/pull/28775) by beachball)
|
|
38
|
+
|
|
7
39
|
## [9.1.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.28)
|
|
8
40
|
|
|
9
|
-
Fri, 04 Aug 2023 08:
|
|
41
|
+
Fri, 04 Aug 2023 08:52:58 GMT
|
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.27..@fluentui/react-toolbar_v9.1.28)
|
|
11
43
|
|
|
12
44
|
### Patches
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
import { ToolbarContext } from './ToolbarContext';
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of Toolbar
|
|
6
6
|
*/ export const renderToolbar_unstable = (state, contextValues)=>{
|
|
7
|
-
|
|
7
|
+
assertSlots(state);
|
|
8
8
|
return /*#__PURE__*/ createElement(ToolbarContext.Provider, {
|
|
9
9
|
value: contextValues.toolbar
|
|
10
|
-
}, /*#__PURE__*/ createElement(
|
|
10
|
+
}, /*#__PURE__*/ createElement(state.root, null, state.root.children));
|
|
11
11
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport {
|
|
1
|
+
{"version":3,"sources":["renderToolbar.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToolbarState, ToolbarSlots, ToolbarContextValues } from './Toolbar.types';\nimport { ToolbarContext } from './ToolbarContext';\n\n/**\n * Render the final JSX of Toolbar\n */\nexport const renderToolbar_unstable = (state: ToolbarState, contextValues: ToolbarContextValues) => {\n assertSlots<ToolbarSlots>(state);\n\n return (\n <ToolbarContext.Provider value={contextValues.toolbar}>\n <state.root>{state.root.children}</state.root>\n </ToolbarContext.Provider>\n );\n};\n"],"names":["createElement","assertSlots","ToolbarContext","renderToolbar_unstable","state","contextValues","Provider","value","toolbar","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,cAAc,QAAQ,mBAAmB;AAElD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC,gBAAwC;IAClGJ,YAA0BG;IAE1B,qBACE,AAdJ,cAcKF,eAAeI,QAAQ;QAACC,OAAOF,cAAcG,OAAO;qBACnD,AAfN,cAeOJ,MAAMK,IAAI,QAAEL,MAAMK,IAAI,CAACC,QAAQ;AAGtC,EAAE"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useEventCallback, useControllableState } from '@fluentui/react-utilities';
|
|
3
|
-
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
2
|
+
import { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
4
3
|
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
5
4
|
/**
|
|
6
5
|
* Create the state required to render Toolbar.
|
|
@@ -26,7 +25,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
26
25
|
},
|
|
27
26
|
// TODO add appropriate slots, for example:
|
|
28
27
|
// mySlot: resolveShorthand(props.mySlot),
|
|
29
|
-
root: getNativeElementProps('div', {
|
|
28
|
+
root: slot.always(getNativeElementProps('div', {
|
|
30
29
|
role: 'toolbar',
|
|
31
30
|
ref,
|
|
32
31
|
...vertical && {
|
|
@@ -34,6 +33,8 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
34
33
|
},
|
|
35
34
|
...arrowNavigationProps,
|
|
36
35
|
...props
|
|
36
|
+
}), {
|
|
37
|
+
elementType: 'div'
|
|
37
38
|
})
|
|
38
39
|
};
|
|
39
40
|
const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState
|
|
1
|
+
{"version":3,"sources":["useToolbar.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(\n getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...(vertical && { 'aria-orientation': 'vertical' }),\n ...arrowNavigationProps,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"names":["React","useEventCallback","useControllableState","getNativeElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,oBAAoB,EAAEC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAEhH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC,MAA8C;IACrG,MAAM,EAAEC,MAAO,SAAQ,EAAEC,UAAW,KAAK,CAAA,EAAE,GAAGH;IAE9C,MAAMI,uBAAuBN,wBAAwB;QACnDO,UAAU,IAAI;QACdC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,KAAKa,MAAM,CACfd,sBAAsB,OAAO;YAC3Be,MAAM;YACNV;YACA,GAAIE,YAAY;gBAAE,oBAAoB;YAAW,CAAC;YAClD,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeb,MAAMa,aAAa;QAClCG,sBAAsBhB,MAAMgB,oBAAoB;QAChDF,sBAAsBd,MAAMc,oBAAoB;IAClD;IAEA,MAAMG,qBAAsCvB,iBAC1C,CAACwB,GAA2CC,MAAcC,OAAeC,UAAsB;QAC7F,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,aAAe,CAACM,KAAK,AAAD,KAAK,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB,CAAC;YACDN,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE,CAAC;IACH;IAGF,MAAMI,cAA+BjC,iBACnC,CAACwB,GAA2CC,MAAcC,OAAeC,UAAsB;QAC7F,IAAIF,QAAQC,OAAO;YACjBN,iCAAAA,kCAAAA,KAAAA,IAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF,CAAC;IACH;IAGF,OAAO;QACL,GAAGb,YAAY;QACfU;QACAU;QACAd,eAAeA,0BAAAA,2BAAAA,gBAAiB,CAAC,CAAC;IACpC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCa,QACG;IACH,MAAM,CAACf,eAAegB,iBAAiB,GAAGlC,qBAAqB;QAC7DiC,OAAOA,MAAMf,aAAa;QAC1BiB,cAAcF,MAAMZ,oBAAoB;QACxCT,cAAc,CAAC;IACjB;IACA,MAAM,EAAEO,sBAAsBiB,6BAA4B,EAAE,GAAGH;IAC/D,MAAMd,uBAA6DpB,iBAAiB,CAACwB,GAAG,EAAEC,KAAI,EAAEG,aAAY,EAAE,GAAK;QACjH,IAAIS,8BAA8B;YAChCA,6BAA6Bb,GAAG;gBAAEC;gBAAMG;YAAa;QACvD,CAAC;QAEDO,iBAAiBG,CAAAA,IAAK;YACpB,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACb,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa,CAAC;QACtE;IACF;IAEA,OAAO;QAACT;QAAeC;KAAqB;AAC9C"}
|
|
@@ -37,7 +37,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
37
37
|
uwmqm3: ["fekwl8i", "fat0sn4"]
|
|
38
38
|
}
|
|
39
39
|
}, {
|
|
40
|
-
d: [".f22iagw{display
|
|
40
|
+
d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f10ra9hq{padding-top:4px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f1vx9l62{flex-direction:column;}", ".f1acs6jw{width:fit-content;}", ".f1nbblvp{padding-top:0px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1ov4xf1{padding-bottom:0px;}", ".fat0sn4{padding-right:20px;}", ".fekwl8i{padding-left:20px;}"]
|
|
41
41
|
});
|
|
42
42
|
/**
|
|
43
43
|
* Apply styling to the Toolbar slots based on the state
|
|
@@ -12,7 +12,7 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
12
12
|
Frg6f3: ["f1tyq0we", "f11qmguv"]
|
|
13
13
|
}
|
|
14
14
|
}, {
|
|
15
|
-
d: [".f1vx9l62{
|
|
15
|
+
d: [".f1vx9l62{flex-direction:column;}", ".f1rt2boy{font-size:24px;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}"]
|
|
16
16
|
});
|
|
17
17
|
/**
|
|
18
18
|
* Apply styling to the ToolbarButton slots based on the state
|
|
@@ -13,7 +13,7 @@ const useBaseStyles = /*#__PURE__*/__styles({
|
|
|
13
13
|
B2u0y6b: "fe668z"
|
|
14
14
|
}
|
|
15
15
|
}, {
|
|
16
|
-
d: [".ftuwxu6{display
|
|
16
|
+
d: [".ftuwxu6{display:inline-flex;}", ".f1lwjmbk{max-width:1px;}", ".f1g0x7ka{padding-top:0;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1qch9an{padding-bottom:0;}", ".fe668z{max-width:initial;}"]
|
|
17
17
|
});
|
|
18
18
|
/**
|
|
19
19
|
* Apply styling to the ToolbarDivider slots based on the state
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { assertSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of ToolbarGroup
|
|
5
5
|
*/ export const renderToolbarGroup_unstable = (state)=>{
|
|
6
|
-
|
|
7
|
-
return /*#__PURE__*/ createElement(
|
|
6
|
+
assertSlots(state);
|
|
7
|
+
return /*#__PURE__*/ createElement(state.root, null, state.root.children);
|
|
8
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport {
|
|
1
|
+
{"version":3,"sources":["renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState) => {\n assertSlots<ToolbarGroupSlots>(state);\n\n return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["createElement","assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvEF,YAA+BE;IAE/B,qBAAO,AAZT,cAYUA,MAAMC,IAAI,QAAED,MAAMC,IAAI,CAACC,QAAQ;AACzC,EAAE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
1
|
+
import { getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
/**
|
|
4
4
|
* Given user props, defines default props for the Group
|
|
@@ -9,10 +9,12 @@ import * as React from 'react';
|
|
|
9
9
|
components: {
|
|
10
10
|
root: 'div'
|
|
11
11
|
},
|
|
12
|
-
root: getNativeElementProps('div', {
|
|
12
|
+
root: slot.always(getNativeElementProps('div', {
|
|
13
13
|
ref,
|
|
14
14
|
role: 'presentation',
|
|
15
15
|
...props
|
|
16
|
+
}), {
|
|
17
|
+
elementType: 'div'
|
|
16
18
|
})
|
|
17
19
|
};
|
|
18
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarGroup.ts"],"sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n
|
|
1
|
+
{"version":3,"sources":["useToolbarGroup.ts"],"sourcesContent":["import { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n props: ToolbarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n ref,\n role: 'presentation',\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getNativeElementProps","slot","React","useToolbarGroup_unstable","props","ref","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,YAAYC,WAAW,QAAQ;AAG/B;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC,MACsB;IACtB,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,sBAA4D,OAAO;YACjEK;YACAI,MAAM;YACN,GAAGL,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -10,8 +10,8 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
|
|
|
10
10
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
11
|
const _toolbarContext = require("./ToolbarContext");
|
|
12
12
|
const renderToolbar_unstable = (state, contextValues)=>{
|
|
13
|
-
|
|
13
|
+
(0, _reactUtilities.assertSlots)(state);
|
|
14
14
|
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_toolbarContext.ToolbarContext.Provider, {
|
|
15
15
|
value: contextValues.toolbar
|
|
16
|
-
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(
|
|
16
|
+
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.root.children));
|
|
17
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderToolbar.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport {
|
|
1
|
+
{"version":3,"sources":["renderToolbar.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ToolbarContext } from './ToolbarContext';\n/**\n * Render the final JSX of Toolbar\n */ export const renderToolbar_unstable = (state, contextValues)=>{\n assertSlots(state);\n return /*#__PURE__*/ createElement(ToolbarContext.Provider, {\n value: contextValues.toolbar\n }, /*#__PURE__*/ createElement(state.root, null, state.root.children));\n};\n"],"names":["renderToolbar_unstable","state","contextValues","assertSlots","createElement","ToolbarContext","Provider","value","toolbar","root","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;gCACG;AAGpB,MAAMA,yBAAyB,CAACC,OAAOC,gBAAgB;IAC9DC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACC,8BAAc,CAACC,QAAQ,EAAE;QACxDC,OAAOL,cAAcM,OAAO;IAChC,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMQ,IAAI,EAAE,IAAI,EAAER,MAAMQ,IAAI,CAACC,QAAQ;AACxE"}
|
|
@@ -26,7 +26,7 @@ const useToolbar_unstable = (props, ref)=>{
|
|
|
26
26
|
},
|
|
27
27
|
// TODO add appropriate slots, for example:
|
|
28
28
|
// mySlot: resolveShorthand(props.mySlot),
|
|
29
|
-
root: (0, _reactUtilities.getNativeElementProps)('div', {
|
|
29
|
+
root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
|
|
30
30
|
role: 'toolbar',
|
|
31
31
|
ref,
|
|
32
32
|
...vertical && {
|
|
@@ -34,6 +34,8 @@ const useToolbar_unstable = (props, ref)=>{
|
|
|
34
34
|
},
|
|
35
35
|
...arrowNavigationProps,
|
|
36
36
|
...props
|
|
37
|
+
}), {
|
|
38
|
+
elementType: 'div'
|
|
37
39
|
})
|
|
38
40
|
};
|
|
39
41
|
const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbar.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState
|
|
1
|
+
{"version":3,"sources":["useToolbar.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\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 */ export const useToolbar_unstable = (props, ref)=>{\n const { size ='medium' , vertical =false } = props;\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both'\n });\n const initialState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div'\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(getNativeElementProps('div', {\n role: 'toolbar',\n ref,\n ...vertical && {\n 'aria-orientation': 'vertical'\n },\n ...arrowNavigationProps,\n ...props\n }), {\n elementType: 'div'\n })\n };\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange\n });\n const handleToggleButton = useEventCallback((e, name, value, checked)=>{\n if (name && value) {\n const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];\n const newCheckedItems = [\n ...checkedItems\n ];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {\n name,\n checkedItems: newCheckedItems\n });\n }\n });\n const handleRadio = useEventCallback((e, name, value, checked)=>{\n if (name && value) {\n onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {\n name,\n checkedItems: [\n value\n ]\n });\n }\n });\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}\n };\n};\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */ const useToolbarSelectableState = (state)=>{\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {}\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange = useEventCallback((e, { name , checkedItems })=>{\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, {\n name,\n checkedItems\n });\n }\n setCheckedValues((s)=>{\n return s ? {\n ...s,\n [name]: checkedItems\n } : {\n [name]: checkedItems\n };\n });\n });\n return [\n checkedValues,\n onCheckedValueChange\n ];\n};\n"],"names":["useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","useArrowNavigationGroup","circular","axis","initialState","components","root","slot","always","getNativeElementProps","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","useEventCallback","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","useControllableState","defaultState","onCheckedValueChangeOriginal","s"],"mappings":";;;;+BAWiBA;;aAAAA;;;6DAXM;gCAC6D;8BAC5C;AAS7B,MAAMA,sBAAsB,CAACC,OAAOC,MAAM;IACjD,MAAM,EAAEC,MAAM,SAAQ,EAAGC,UAAU,KAAK,CAAA,EAAG,GAAGH;IAC9C,MAAMI,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU,IAAI;QACdC,MAAM;IACV;IACA,MAAMC,eAAe;QACjBN;QACAC;QACA,sCAAsC;QACtCM,YAAY;YACR,iDAAiD;YACjDC,MAAM;QACV;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CC,MAAM;YACNb;YACA,GAAGE,YAAY;gBACX,oBAAoB;YACxB,CAAC;YACD,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACZ,IAAI;YACAe,aAAa;QACjB;IACJ;IACA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACpEF,eAAehB,MAAMgB,aAAa;QAClCG,sBAAsBnB,MAAMmB,oBAAoB;QAChDF,sBAAsBjB,MAAMiB,oBAAoB;IACpD;IACA,MAAMG,qBAAqBC,IAAAA,gCAAgB,EAAC,CAACC,GAAGC,MAAMC,OAAOC,UAAU;QACnE,IAAIF,QAAQC,OAAO;YACf,MAAME,eAAe,AAACV,CAAAA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,aAAa,CAACO,KAAK,AAAD,KAAM,EAAE;YAC9G,MAAMI,kBAAkB;mBACjBD;aACN;YACD,IAAID,SAAS;gBACTE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YAC3D,OAAO;gBACHG,gBAAgBG,IAAI,CAACN;YACzB,CAAC;YACDP,yBAAyB,IAAI,IAAIA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBK,GAAG;gBAChGC;gBACAG,cAAcC;YAClB,EAAE;QACN,CAAC;IACL;IACA,MAAMI,cAAcV,IAAAA,gCAAgB,EAAC,CAACC,GAAGC,MAAMC,OAAOC,UAAU;QAC5D,IAAIF,QAAQC,OAAO;YACfP,yBAAyB,IAAI,IAAIA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBK,GAAG;gBAChGC;gBACAG,cAAc;oBACVF;iBACH;YACL,EAAE;QACN,CAAC;IACL;IACA,OAAO;QACH,GAAGhB,YAAY;QACfY;QACAW;QACAf,eAAeA,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAIA,gBAAgB,CAAC,CAAC;IAC1F;AACJ;AACA;;;CAGC,GAAG,MAAME,4BAA4B,CAACc,QAAQ;IAC3C,MAAM,CAAChB,eAAeiB,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DF,OAAOA,MAAMhB,aAAa;QAC1BmB,cAAcH,MAAMb,oBAAoB;QACxCX,cAAc,CAAC;IACnB;IACA,MAAM,EAAES,sBAAsBmB,6BAA4B,EAAG,GAAGJ;IAChE,MAAMf,uBAAuBI,IAAAA,gCAAgB,EAAC,CAACC,GAAG,EAAEC,KAAI,EAAGG,aAAY,EAAG,GAAG;QACzE,IAAIU,8BAA8B;YAC9BA,6BAA6Bd,GAAG;gBAC5BC;gBACAG;YACJ;QACJ,CAAC;QACDO,iBAAiB,CAACI,IAAI;YAClB,OAAOA,IAAI;gBACP,GAAGA,CAAC;gBACJ,CAACd,KAAK,EAAEG;YACZ,IAAI;gBACA,CAACH,KAAK,EAAEG;YACZ,CAAC;QACL;IACJ;IACA,OAAO;QACHV;QACAC;KACH;AACL"}
|
|
@@ -75,14 +75,14 @@ const toolbarClassNames = {
|
|
|
75
75
|
}
|
|
76
76
|
}, {
|
|
77
77
|
d: [
|
|
78
|
-
".f22iagw{display
|
|
79
|
-
".f122n59{
|
|
78
|
+
".f22iagw{display:flex;}",
|
|
79
|
+
".f122n59{align-items:center;}",
|
|
80
80
|
".f10ra9hq{padding-top:4px;}",
|
|
81
81
|
".f19lj068{padding-right:8px;}",
|
|
82
82
|
".f177v4lu{padding-left:8px;}",
|
|
83
83
|
".f1y2xyjm{padding-bottom:4px;}",
|
|
84
|
-
".f1vx9l62{
|
|
85
|
-
".f1acs6jw{width
|
|
84
|
+
".f1vx9l62{flex-direction:column;}",
|
|
85
|
+
".f1acs6jw{width:fit-content;}",
|
|
86
86
|
".f1nbblvp{padding-top:0px;}",
|
|
87
87
|
".f8wuabp{padding-right:4px;}",
|
|
88
88
|
".fycuoez{padding-left:4px;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n z8tnut: \"f10ra9hq\",\n z189sj: [\"f19lj068\", \"f177v4lu\"],\n Byoj8tv: \"f1y2xyjm\",\n uwmqm3: [\"f177v4lu\", \"f19lj068\"]\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n a9b677: \"f1acs6jw\"\n },\n small: {\n z8tnut: \"f1nbblvp\",\n z189sj: [\"f8wuabp\", \"fycuoez\"],\n Byoj8tv: \"f1ov4xf1\",\n uwmqm3: [\"fycuoez\", \"f8wuabp\"]\n },\n medium: {\n z8tnut: \"f10ra9hq\",\n z189sj: [\"f19lj068\", \"f177v4lu\"],\n Byoj8tv: \"f1y2xyjm\",\n uwmqm3: [\"f177v4lu\", \"f19lj068\"]\n },\n large: {\n z8tnut: \"f10ra9hq\",\n z189sj: [\"fat0sn4\", \"fekwl8i\"],\n Byoj8tv: \"f1y2xyjm\",\n uwmqm3: [\"fekwl8i\", \"fat0sn4\"]\n }\n}, {\n d: [\".f22iagw{display
|
|
1
|
+
{"version":3,"sources":["useToolbarStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nexport const toolbarClassNames = {\n root: 'fui-Toolbar'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"f22iagw\",\n Bt984gj: \"f122n59\",\n z8tnut: \"f10ra9hq\",\n z189sj: [\"f19lj068\", \"f177v4lu\"],\n Byoj8tv: \"f1y2xyjm\",\n uwmqm3: [\"f177v4lu\", \"f19lj068\"]\n },\n vertical: {\n Beiy3e4: \"f1vx9l62\",\n a9b677: \"f1acs6jw\"\n },\n small: {\n z8tnut: \"f1nbblvp\",\n z189sj: [\"f8wuabp\", \"fycuoez\"],\n Byoj8tv: \"f1ov4xf1\",\n uwmqm3: [\"fycuoez\", \"f8wuabp\"]\n },\n medium: {\n z8tnut: \"f10ra9hq\",\n z189sj: [\"f19lj068\", \"f177v4lu\"],\n Byoj8tv: \"f1y2xyjm\",\n uwmqm3: [\"f177v4lu\", \"f19lj068\"]\n },\n large: {\n z8tnut: \"f10ra9hq\",\n z189sj: [\"fat0sn4\", \"fekwl8i\"],\n Byoj8tv: \"f1y2xyjm\",\n uwmqm3: [\"fekwl8i\", \"fat0sn4\"]\n }\n}, {\n d: [\".f22iagw{display:flex;}\", \".f122n59{align-items:center;}\", \".f10ra9hq{padding-top:4px;}\", \".f19lj068{padding-right:8px;}\", \".f177v4lu{padding-left:8px;}\", \".f1y2xyjm{padding-bottom:4px;}\", \".f1vx9l62{flex-direction:column;}\", \".f1acs6jw{width:fit-content;}\", \".f1nbblvp{padding-top:0px;}\", \".f8wuabp{padding-right:4px;}\", \".fycuoez{padding-left:4px;}\", \".f1ov4xf1{padding-bottom:0px;}\", \".fat0sn4{padding-right:20px;}\", \".fekwl8i{padding-left:20px;}\"]\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarStyles_unstable = state => {\n const styles = useStyles();\n const {\n vertical,\n size\n } = state;\n state.root.className = mergeClasses(toolbarClassNames.root, styles.root, vertical && styles.vertical, size === 'small' && !vertical && styles.small, size === 'medium' && !vertical && styles.medium, size === 'large' && !vertical && styles.large, state.root.className);\n return state;\n};\n//# sourceMappingURL=useToolbarStyles.styles.js.map"],"names":["toolbarClassNames","useToolbarStyles_unstable","root","useStyles","__styles","mc9l5x","Bt984gj","z8tnut","z189sj","Byoj8tv","uwmqm3","vertical","Beiy3e4","a9b677","small","medium","large","d","state","styles","size","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,iBAAiB,MAAjBA;IA2CAC,yBAAyB,MAAzBA;;uBA5CsC;AAC5C,MAAMD,oBAAoB;IAC/BE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAC,UAAU;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,OAAO;QACLP,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAK,QAAQ;QACNR,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAM,OAAO;QACLT,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDO,GAAG;QAAC;QAA2B;QAAiC;QAA+B;QAAiC;QAAgC;QAAkC;QAAqC;QAAiC;QAA+B;QAAgC;QAA+B;QAAkC;QAAiC;KAA+B;AAC1c;AAIO,MAAMhB,4BAA4BiB,CAAAA,QAAS;IAChD,MAAMC,SAAShB;IACf,MAAM,EACJQ,SAAQ,EACRS,KAAI,EACL,GAAGF;IACJA,MAAMhB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,kBAAkBE,IAAI,EAAEiB,OAAOjB,IAAI,EAAES,YAAYQ,OAAOR,QAAQ,EAAES,SAAS,WAAW,CAACT,YAAYQ,OAAOL,KAAK,EAAEM,SAAS,YAAY,CAACT,YAAYQ,OAAOJ,MAAM,EAAEK,SAAS,WAAW,CAACT,YAAYQ,OAAOH,KAAK,EAAEE,MAAMhB,IAAI,CAACmB,SAAS;IACzQ,OAAOH;AACT,GACA,mDAAmD"}
|
|
@@ -27,7 +27,7 @@ const useBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
27
27
|
}
|
|
28
28
|
}, {
|
|
29
29
|
d: [
|
|
30
|
-
".f1vx9l62{
|
|
30
|
+
".f1vx9l62{flex-direction:column;}",
|
|
31
31
|
".f1rt2boy{font-size:24px;}",
|
|
32
32
|
".f1hu3pq6{margin-top:0;}",
|
|
33
33
|
".f11qmguv{margin-right:0;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n },\n verticalIcon: {\n Be2twd7: \"f1rt2boy\",\n B6of3ja: \"f1hu3pq6\",\n t21cq0: [\"f11qmguv\", \"f1tyq0we\"],\n jrapky: \"f19f4twv\",\n Frg6f3: [\"f1tyq0we\", \"f11qmguv\"]\n }\n}, {\n d: [\".f1vx9l62{
|
|
1
|
+
{"version":3,"sources":["useToolbarButtonStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nconst useBaseStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n },\n verticalIcon: {\n Be2twd7: \"f1rt2boy\",\n B6of3ja: \"f1hu3pq6\",\n t21cq0: [\"f11qmguv\", \"f1tyq0we\"],\n jrapky: \"f19f4twv\",\n Frg6f3: [\"f1tyq0we\", \"f11qmguv\"]\n }\n}, {\n d: [\".f1vx9l62{flex-direction:column;}\", \".f1rt2boy{font-size:24px;}\", \".f1hu3pq6{margin-top:0;}\", \".f11qmguv{margin-right:0;}\", \".f1tyq0we{margin-left:0;}\", \".f19f4twv{margin-bottom:0;}\"]\n});\n/**\n * Apply styling to the ToolbarButton slots based on the state\n */\nexport const useToolbarButtonStyles_unstable = state => {\n useButtonStyles_unstable(state);\n const buttonStyles = useBaseStyles();\n state.root.className = mergeClasses(state.root.className, state.vertical && buttonStyles.vertical);\n if (state.icon) {\n state.icon.className = mergeClasses(state.icon.className, state.vertical && buttonStyles.verticalIcon);\n }\n};\n//# sourceMappingURL=useToolbarButtonStyles.styles.js.map"],"names":["useToolbarButtonStyles_unstable","useBaseStyles","__styles","vertical","Beiy3e4","verticalIcon","Be2twd7","B6of3ja","t21cq0","jrapky","Frg6f3","d","state","useButtonStyles_unstable","buttonStyles","root","className","mergeClasses","icon"],"mappings":";;;;+BAmBaA;;aAAAA;;uBAnBsC;6BACV;AACzC,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,SAAS;IACX;IACAC,cAAc;QACZC,SAAS;QACTC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;QAChCC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;IAClC;AACF,GAAG;IACDC,GAAG;QAAC;QAAqC;QAA8B;QAA4B;QAA8B;QAA6B;KAA8B;AAC9L;AAIO,MAAMX,kCAAkCY,CAAAA,QAAS;IACtDC,IAAAA,qCAAwB,EAACD;IACzB,MAAME,eAAeb;IACrBW,MAAMG,IAAI,CAACC,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMG,IAAI,CAACC,SAAS,EAAEJ,MAAMT,QAAQ,IAAIW,aAAaX,QAAQ;IACjG,IAAIS,MAAMM,IAAI,EAAE;QACdN,MAAMM,IAAI,CAACF,SAAS,GAAGC,IAAAA,mBAAY,EAACL,MAAMM,IAAI,CAACF,SAAS,EAAEJ,MAAMT,QAAQ,IAAIW,aAAaT,YAAY;IACvG,CAAC;AACH,GACA,yDAAyD"}
|
|
@@ -28,7 +28,7 @@ const useBaseStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
|
28
28
|
}
|
|
29
29
|
}, {
|
|
30
30
|
d: [
|
|
31
|
-
".ftuwxu6{display
|
|
31
|
+
".ftuwxu6{display:inline-flex;}",
|
|
32
32
|
".f1lwjmbk{max-width:1px;}",
|
|
33
33
|
".f1g0x7ka{padding-top:0;}",
|
|
34
34
|
".f11qrl6u{padding-right:12px;}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"ftuwxu6\",\n B2u0y6b: \"f1lwjmbk\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"f11qrl6u\", \"fjlbh76\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"fjlbh76\", \"f11qrl6u\"]\n },\n vertical: {\n B2u0y6b: \"fe668z\"\n }\n}, {\n d: [\".ftuwxu6{display
|
|
1
|
+
{"version":3,"sources":["useToolbarDividerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useDividerStyles_unstable } from '@fluentui/react-divider';\nconst useBaseStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"ftuwxu6\",\n B2u0y6b: \"f1lwjmbk\",\n z8tnut: \"f1g0x7ka\",\n z189sj: [\"f11qrl6u\", \"fjlbh76\"],\n Byoj8tv: \"f1qch9an\",\n uwmqm3: [\"fjlbh76\", \"f11qrl6u\"]\n },\n vertical: {\n B2u0y6b: \"fe668z\"\n }\n}, {\n d: [\".ftuwxu6{display:inline-flex;}\", \".f1lwjmbk{max-width:1px;}\", \".f1g0x7ka{padding-top:0;}\", \".f11qrl6u{padding-right:12px;}\", \".fjlbh76{padding-left:12px;}\", \".f1qch9an{padding-bottom:0;}\", \".fe668z{max-width:initial;}\"]\n});\n/**\n * Apply styling to the ToolbarDivider slots based on the state\n */\nexport const useToolbarDividerStyles_unstable = state => {\n useDividerStyles_unstable(state);\n const {\n vertical\n } = state;\n const toolbarDividerStyles = useBaseStyles();\n state.root.className = mergeClasses(toolbarDividerStyles.root, !vertical && toolbarDividerStyles.vertical, state.root.className);\n return state;\n};\n//# sourceMappingURL=useToolbarDividerStyles.styles.js.map"],"names":["useToolbarDividerStyles_unstable","useBaseStyles","__styles","root","mc9l5x","B2u0y6b","z8tnut","z189sj","Byoj8tv","uwmqm3","vertical","d","state","useDividerStyles_unstable","toolbarDividerStyles","className","mergeClasses"],"mappings":";;;;+BAoBaA;;aAAAA;;uBApBsC;8BACT;AAC1C,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;IACjC;IACAC,UAAU;QACRL,SAAS;IACX;AACF,GAAG;IACDM,GAAG;QAAC;QAAkC;QAA6B;QAA6B;QAAkC;QAAgC;QAAgC;KAA8B;AAClO;AAIO,MAAMX,mCAAmCY,CAAAA,QAAS;IACvDC,IAAAA,uCAAyB,EAACD;IAC1B,MAAM,EACJF,SAAQ,EACT,GAAGE;IACJ,MAAME,uBAAuBb;IAC7BW,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACF,qBAAqBX,IAAI,EAAE,CAACO,YAAYI,qBAAqBJ,QAAQ,EAAEE,MAAMT,IAAI,CAACY,SAAS;IAC/H,OAAOH;AACT,GACA,0DAA0D"}
|
|
@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderToolbarGroup_unstable", {
|
|
|
9
9
|
const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
|
|
10
10
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
11
|
const renderToolbarGroup_unstable = (state)=>{
|
|
12
|
-
|
|
13
|
-
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(
|
|
12
|
+
(0, _reactUtilities.assertSlots)(state);
|
|
13
|
+
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.root.children);
|
|
14
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderToolbarGroup.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport {
|
|
1
|
+
{"version":3,"sources":["renderToolbarGroup.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of ToolbarGroup\n */ export const renderToolbarGroup_unstable = (state)=>{\n assertSlots(state);\n return /*#__PURE__*/ createElement(state.root, null, state.root.children);\n};\n"],"names":["renderToolbarGroup_unstable","state","assertSlots","createElement","root","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,8BAA8B,CAACC,QAAQ;IACpDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI,EAAEH,MAAMG,IAAI,CAACC,QAAQ;AAC5E"}
|
|
@@ -14,10 +14,12 @@ const useToolbarGroup_unstable = (props, ref)=>{
|
|
|
14
14
|
components: {
|
|
15
15
|
root: 'div'
|
|
16
16
|
},
|
|
17
|
-
root: (0, _reactUtilities.getNativeElementProps)('div', {
|
|
17
|
+
root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
|
|
18
18
|
ref,
|
|
19
19
|
role: 'presentation',
|
|
20
20
|
...props
|
|
21
|
+
}), {
|
|
22
|
+
elementType: 'div'
|
|
21
23
|
})
|
|
22
24
|
};
|
|
23
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarGroup.js"],"sourcesContent":["import { getNativeElementProps } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 */ export const useToolbarGroup_unstable = (props, ref)=>{\n return {\n components: {\n root: 'div'\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'presentation',\n ...props\n })\n };\n};\n"],"names":["useToolbarGroup_unstable","props","ref","components","root","getNativeElementProps","role"],"mappings":";;;;+BAMiBA;;aAAAA;;;
|
|
1
|
+
{"version":3,"sources":["useToolbarGroup.js"],"sourcesContent":["import { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\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 */ export const useToolbarGroup_unstable = (props, ref)=>{\n return {\n components: {\n root: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ref,\n role: 'presentation',\n ...props\n }), {\n elementType: 'div'\n })\n };\n};\n"],"names":["useToolbarGroup_unstable","props","ref","components","root","slot","always","getNativeElementProps","role","elementType"],"mappings":";;;;+BAMiBA;;aAAAA;;;gCAN2B;6DACrB;AAKZ,MAAMA,2BAA2B,CAACC,OAAOC,MAAM;IACtD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CL;YACAM,MAAM;YACN,GAAGP,KAAK;QACZ,IAAI;YACAQ,aAAa;QACjB;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-toolbar",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.30",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
"@fluentui/scripts-tasks": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-button": "^9.3.
|
|
39
|
-
"@fluentui/react-divider": "^9.2.
|
|
40
|
-
"@fluentui/react-theme": "^9.1.
|
|
41
|
-
"@fluentui/react-utilities": "^9.11.
|
|
42
|
-
"@fluentui/react-jsx-runtime": "9.0.0-alpha.
|
|
43
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
44
|
-
"@fluentui/react-radio": "^9.1.
|
|
45
|
-
"@fluentui/react-shared-contexts": "^9.7.
|
|
46
|
-
"@fluentui/react-tabster": "^9.12.
|
|
47
|
-
"@griffel/react": "^1.5.
|
|
38
|
+
"@fluentui/react-button": "^9.3.29",
|
|
39
|
+
"@fluentui/react-divider": "^9.2.25",
|
|
40
|
+
"@fluentui/react-theme": "^9.1.11",
|
|
41
|
+
"@fluentui/react-utilities": "^9.11.1",
|
|
42
|
+
"@fluentui/react-jsx-runtime": "9.0.0-alpha.15",
|
|
43
|
+
"@fluentui/react-context-selector": "^9.1.28",
|
|
44
|
+
"@fluentui/react-radio": "^9.1.30",
|
|
45
|
+
"@fluentui/react-shared-contexts": "^9.7.2",
|
|
46
|
+
"@fluentui/react-tabster": "^9.12.2",
|
|
47
|
+
"@griffel/react": "^1.5.14",
|
|
48
48
|
"@swc/helpers": "^0.4.14"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|