@fluentui/react-toolbar 9.1.46 → 9.1.48
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/useToolbar.js +6 -3
- package/lib/components/Toolbar/useToolbar.js.map +1 -1
- package/lib/components/ToolbarGroup/useToolbarGroup.js +2 -2
- package/lib/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
- package/lib-commonjs/components/Toolbar/useToolbar.js +5 -2
- package/lib-commonjs/components/Toolbar/useToolbar.js.map +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js +1 -1
- package/lib-commonjs/components/ToolbarGroup/useToolbarGroup.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,121 @@
|
|
|
2
2
|
"name": "@fluentui/react-toolbar",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 09 Oct 2023 20:41:58 GMT",
|
|
6
|
+
"tag": "@fluentui/react-toolbar_v9.1.48",
|
|
7
|
+
"version": "9.1.48",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-toolbar",
|
|
13
|
+
"comment": "Bump @fluentui/react-button to v9.3.47",
|
|
14
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-toolbar",
|
|
19
|
+
"comment": "Bump @fluentui/react-divider to v9.2.43",
|
|
20
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-toolbar",
|
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v9.14.2",
|
|
26
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-toolbar",
|
|
31
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.15",
|
|
32
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-toolbar",
|
|
37
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.39",
|
|
38
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-toolbar",
|
|
43
|
+
"comment": "Bump @fluentui/react-radio to v9.1.48",
|
|
44
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-toolbar",
|
|
49
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.10.0",
|
|
50
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-toolbar",
|
|
55
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.5",
|
|
56
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Thu, 05 Oct 2023 15:25:34 GMT",
|
|
63
|
+
"tag": "@fluentui/react-toolbar_v9.1.47",
|
|
64
|
+
"version": "9.1.47",
|
|
65
|
+
"comments": {
|
|
66
|
+
"patch": [
|
|
67
|
+
{
|
|
68
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
69
|
+
"package": "@fluentui/react-toolbar",
|
|
70
|
+
"commit": "86dd76990e3da5af1f2b6b04a3aec46141d5a653",
|
|
71
|
+
"comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-toolbar",
|
|
76
|
+
"comment": "Bump @fluentui/react-button to v9.3.46",
|
|
77
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-toolbar",
|
|
82
|
+
"comment": "Bump @fluentui/react-divider to v9.2.42",
|
|
83
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-toolbar",
|
|
88
|
+
"comment": "Bump @fluentui/react-utilities to v9.14.1",
|
|
89
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-toolbar",
|
|
94
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.14",
|
|
95
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-toolbar",
|
|
100
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.38",
|
|
101
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-toolbar",
|
|
106
|
+
"comment": "Bump @fluentui/react-radio to v9.1.47",
|
|
107
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-toolbar",
|
|
112
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.4",
|
|
113
|
+
"commit": "690590449dc3d65cd40b2b06a990fd920180919d"
|
|
114
|
+
}
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"date": "Wed, 04 Oct 2023 08:45:47 GMT",
|
|
6
120
|
"tag": "@fluentui/react-toolbar_v9.1.46",
|
|
7
121
|
"version": "9.1.46",
|
|
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
|
|
3
|
+
This log was last generated on Mon, 09 Oct 2023 20:41:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.48](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.48)
|
|
8
|
+
|
|
9
|
+
Mon, 09 Oct 2023 20:41:58 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.47..@fluentui/react-toolbar_v9.1.48)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-button to v9.3.47 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
15
|
+
- Bump @fluentui/react-divider to v9.2.43 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.14.2 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.15 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
18
|
+
- Bump @fluentui/react-context-selector to v9.1.39 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
19
|
+
- Bump @fluentui/react-radio to v9.1.48 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v9.10.0 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.13.5 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.1.47](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.47)
|
|
24
|
+
|
|
25
|
+
Thu, 05 Oct 2023 15:25:34 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.46..@fluentui/react-toolbar_v9.1.47)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29387](https://github.com/microsoft/fluentui/pull/29387) by bernardo.sunderhus@gmail.com)
|
|
31
|
+
- Bump @fluentui/react-button to v9.3.46 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
32
|
+
- Bump @fluentui/react-divider to v9.2.42 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
33
|
+
- Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
34
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.14 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
35
|
+
- Bump @fluentui/react-context-selector to v9.1.38 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
36
|
+
- Bump @fluentui/react-radio to v9.1.47 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
37
|
+
- Bump @fluentui/react-tabster to v9.13.4 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
|
|
38
|
+
|
|
7
39
|
## [9.1.46](https://github.com/microsoft/fluentui/tree/@fluentui/react-toolbar_v9.1.46)
|
|
8
40
|
|
|
9
|
-
Wed, 04 Oct 2023 08:
|
|
41
|
+
Wed, 04 Oct 2023 08:45:47 GMT
|
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toolbar_v9.1.45..@fluentui/react-toolbar_v9.1.46)
|
|
11
43
|
|
|
12
44
|
### Patches
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useEventCallback, useControllableState,
|
|
2
|
+
import { useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render Toolbar.
|
|
@@ -25,9 +25,12 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
|
25
25
|
},
|
|
26
26
|
// TODO add appropriate slots, for example:
|
|
27
27
|
// mySlot: resolveShorthand(props.mySlot),
|
|
28
|
-
root: slot.always(
|
|
28
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
29
29
|
role: 'toolbar',
|
|
30
|
-
|
|
30
|
+
// FIXME:
|
|
31
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
32
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
33
|
+
ref: ref,
|
|
31
34
|
...vertical && {
|
|
32
35
|
'aria-orientation': 'vertical'
|
|
33
36
|
},
|
|
@@ -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, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Toolbar.\n *\n * The returned state can be modified with hooks such as useToolbarStyles_unstable,\n * before being passed to renderToolbar_unstable.\n *\n * @param props - props from this instance of Toolbar\n * @param ref - reference to root HTMLElement of Toolbar\n */\nexport const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElement>): ToolbarState => {\n const { size = 'medium', vertical = false } = props;\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n });\n\n const initialState: UninitializedToolbarState = {\n size,\n vertical,\n // TODO add appropriate props/defaults\n components: {\n // TODO add each slot's element type or component\n root: 'div',\n },\n // TODO add appropriate slots, for example:\n // mySlot: resolveShorthand(props.mySlot),\n root: slot.always(\n getIntrinsicElementProps('div', {\n role: 'toolbar',\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),\n ...arrowNavigationProps,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n\n const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues: props.defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n const handleToggleButton: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n }\n },\n );\n\n const handleRadio: ToggableHandler = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {\n if (name && value) {\n onCheckedValueChange?.(e, {\n name,\n checkedItems: [value],\n });\n }\n },\n );\n\n return {\n ...initialState,\n handleToggleButton,\n handleRadio,\n checkedValues: checkedValues ?? {},\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useToolbarSelectableState = (\n state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n"],"names":["React","useEventCallback","useControllableState","getIntrinsicElementProps","slot","useArrowNavigationGroup","useToolbar_unstable","props","ref","size","vertical","arrowNavigationProps","circular","axis","initialState","components","root","always","role","elementType","checkedValues","onCheckedValueChange","useToolbarSelectableState","defaultCheckedValues","handleToggleButton","e","name","value","checked","checkedItems","newCheckedItems","splice","indexOf","push","handleRadio","state","setCheckedValues","defaultState","onCheckedValueChangeOriginal","s"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,oBAAoB,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,MAAMI,uBAAuBN,wBAAwB;QACnDO,UAAU;QACVC,MAAM;IACR;IAEA,MAAMC,eAA0C;QAC9CL;QACAC;QACA,sCAAsC;QACtCK,YAAY;YACV,iDAAiD;YACjDC,MAAM;QACR;QACA,2CAA2C;QAC3C,0CAA0C;QAC1CA,MAAMZ,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9Be,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,KAAKA;YACL,GAAIE,YAAa;gBAAE,oBAAoB;YAAW,CAAW;YAC7D,GAAGC,oBAAoB;YACvB,GAAGJ,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;IAEA,MAAM,CAACC,eAAeC,qBAAqB,GAAGC,0BAA0B;QACtEF,eAAeb,MAAMa,aAAa;QAClCG,sBAAsBhB,MAAMgB,oBAAoB;QAChDF,sBAAsBd,MAAMc,oBAAoB;IAClD;IAEA,MAAMG,qBAAsCvB,iBAC1C,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjB,MAAME,eAAeT,CAAAA,0BAAAA,oCAAAA,aAAe,CAACM,KAAK,KAAI,EAAE;YAChD,MAAMI,kBAAkB;mBAAID;aAAa;YACzC,IAAID,SAAS;gBACXE,gBAAgBC,MAAM,CAACD,gBAAgBE,OAAO,CAACL,QAAQ;YACzD,OAAO;gBACLG,gBAAgBG,IAAI,CAACN;YACvB;YACAN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBAAEC;gBAAMG,cAAcC;YAAgB;QAClE;IACF;IAGF,MAAMI,cAA+BjC,iBACnC,CAACwB,GAA2CC,MAAcC,OAAeC;QACvE,IAAIF,QAAQC,OAAO;YACjBN,iCAAAA,2CAAAA,qBAAuBI,GAAG;gBACxBC;gBACAG,cAAc;oBAACF;iBAAM;YACvB;QACF;IACF;IAGF,OAAO;QACL,GAAGb,YAAY;QACfU;QACAU;QACAd,eAAeA,0BAAAA,2BAAAA,gBAAiB,CAAC;IACnC;AACF,EAAE;AAEF;;;CAGC,GACD,MAAME,4BAA4B,CAChCa;IAEA,MAAM,CAACf,eAAegB,iBAAiB,GAAGlC,qBAAqB;QAC7DiC,OAAOA,MAAMf,aAAa;QAC1BiB,cAAcF,MAAMZ,oBAAoB;QACxCT,cAAc,CAAC;IACjB;IACA,MAAM,EAAEO,sBAAsBiB,4BAA4B,EAAE,GAAGH;IAC/D,MAAMd,uBAA6DpB,iBAAiB,CAACwB,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QAC5G,IAAIS,8BAA8B;YAChCA,6BAA6Bb,GAAG;gBAAEC;gBAAMG;YAAa;QACvD;QAEAO,iBAAiBG,CAAAA;YACf,OAAOA,IAAI;gBAAE,GAAGA,CAAC;gBAAE,CAACb,KAAK,EAAEG;YAAa,IAAI;gBAAE,CAACH,KAAK,EAAEG;YAAa;QACrE;IACF;IAEA,OAAO;QAACT;QAAeC;KAAqB;AAC9C"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getIntrinsicElementProps, 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,7 +9,7 @@ import * as React from 'react';
|
|
|
9
9
|
components: {
|
|
10
10
|
root: 'div'
|
|
11
11
|
},
|
|
12
|
-
root: slot.always(
|
|
12
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
13
13
|
ref,
|
|
14
14
|
role: 'presentation',
|
|
15
15
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarGroup.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useToolbarGroup.ts"],"sourcesContent":["import { getIntrinsicElementProps, 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 getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n ref,\n role: 'presentation',\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useToolbarGroup_unstable","props","ref","components","root","always","role","elementType"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,yBAA+D,OAAO;YACpEK;YACAI,MAAM;YACN,GAAGL,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
|
|
@@ -28,9 +28,12 @@ const useToolbar_unstable = (props, ref)=>{
|
|
|
28
28
|
},
|
|
29
29
|
// TODO add appropriate slots, for example:
|
|
30
30
|
// mySlot: resolveShorthand(props.mySlot),
|
|
31
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
31
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
32
32
|
role: 'toolbar',
|
|
33
|
-
|
|
33
|
+
// FIXME:
|
|
34
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
35
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
36
|
+
ref: ref,
|
|
34
37
|
...vertical && {
|
|
35
38
|
'aria-orientation': 'vertical'
|
|
36
39
|
},
|
|
@@ -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, getIntrinsicElementProps, 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(getIntrinsicElementProps('div', {\n role: 'toolbar',\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\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","getIntrinsicElementProps","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;;;eAAAA;;;;iEAXM;gCACgE;8BAC/C;AAS7B,MAAMA,sBAAsB,CAACC,OAAOC;IAC3C,MAAM,EAAEC,OAAO,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAC9C,MAAMI,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU;QACVC,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,wCAAwB,EAAC,OAAO;YAC9CC,MAAM;YACN,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fb,KAAKA;YACL,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;QACzD,IAAIF,QAAQC,OAAO;YACf,MAAME,eAAe,AAACV,CAAAA,kBAAkB,QAAQA,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;YACAP,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBK,GAAG;gBAChGC;gBACAG,cAAcC;YAClB;QACJ;IACJ;IACA,MAAMI,cAAcV,IAAAA,gCAAgB,EAAC,CAACC,GAAGC,MAAMC,OAAOC;QAClD,IAAIF,QAAQC,OAAO;YACfP,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBK,GAAG;gBAChGC;gBACAG,cAAc;oBACVF;iBACH;YACL;QACJ;IACJ;IACA,OAAO;QACH,GAAGhB,YAAY;QACfY;QACAW;QACAf,eAAeA,kBAAkB,QAAQA,kBAAkB,KAAK,IAAIA,gBAAgB,CAAC;IACzF;AACJ;AACA;;;CAGC,GAAG,MAAME,4BAA4B,CAACc;IACnC,MAAM,CAAChB,eAAeiB,iBAAiB,GAAGC,IAAAA,oCAAoB,EAAC;QAC3DF,OAAOA,MAAMhB,aAAa;QAC1BmB,cAAcH,MAAMb,oBAAoB;QACxCX,cAAc,CAAC;IACnB;IACA,MAAM,EAAES,sBAAsBmB,4BAA4B,EAAE,GAAGJ;IAC/D,MAAMf,uBAAuBI,IAAAA,gCAAgB,EAAC,CAACC,GAAG,EAAEC,IAAI,EAAEG,YAAY,EAAE;QACpE,IAAIU,8BAA8B;YAC9BA,6BAA6Bd,GAAG;gBAC5BC;gBACAG;YACJ;QACJ;QACAO,iBAAiB,CAACI;YACd,OAAOA,IAAI;gBACP,GAAGA,CAAC;gBACJ,CAACd,KAAK,EAAEG;YACZ,IAAI;gBACA,CAACH,KAAK,EAAEG;YACZ;QACJ;IACJ;IACA,OAAO;QACHV;QACAC;KACH;AACL"}
|
|
@@ -16,7 +16,7 @@ const useToolbarGroup_unstable = (props, ref)=>{
|
|
|
16
16
|
components: {
|
|
17
17
|
root: 'div'
|
|
18
18
|
},
|
|
19
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
19
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
20
20
|
ref,
|
|
21
21
|
role: 'presentation',
|
|
22
22
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToolbarGroup.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["useToolbarGroup.js"],"sourcesContent":["import { getIntrinsicElementProps, 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(getIntrinsicElementProps('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","getIntrinsicElementProps","role","elementType"],"mappings":";;;;+BAMiBA;;;eAAAA;;;;gCAN8B;iEACxB;AAKZ,MAAMA,2BAA2B,CAACC,OAAOC;IAChD,OAAO;QACHC,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CL;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.48",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
"@fluentui/scripts-tasks": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-button": "^9.3.
|
|
39
|
-
"@fluentui/react-divider": "^9.2.
|
|
38
|
+
"@fluentui/react-button": "^9.3.47",
|
|
39
|
+
"@fluentui/react-divider": "^9.2.43",
|
|
40
40
|
"@fluentui/react-theme": "^9.1.14",
|
|
41
|
-
"@fluentui/react-utilities": "^9.14.
|
|
42
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
43
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
44
|
-
"@fluentui/react-radio": "^9.1.
|
|
45
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
46
|
-
"@fluentui/react-tabster": "^9.13.
|
|
41
|
+
"@fluentui/react-utilities": "^9.14.2",
|
|
42
|
+
"@fluentui/react-jsx-runtime": "^9.0.15",
|
|
43
|
+
"@fluentui/react-context-selector": "^9.1.39",
|
|
44
|
+
"@fluentui/react-radio": "^9.1.48",
|
|
45
|
+
"@fluentui/react-shared-contexts": "^9.10.0",
|
|
46
|
+
"@fluentui/react-tabster": "^9.13.5",
|
|
47
47
|
"@griffel/react": "^1.5.14",
|
|
48
48
|
"@swc/helpers": "^0.5.1"
|
|
49
49
|
},
|