@fluentui/react-infobutton 9.0.0-beta.11 → 9.0.0-beta.12
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 +37 -4
- package/CHANGELOG.md +17 -5
- package/lib/components/InfoButton/useInfoButton.js +3 -1
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +3 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,40 @@
|
|
|
2
2
|
"name": "@fluentui/react-infobutton",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 07 Feb 2023 14:10:43 GMT",
|
|
6
|
+
"tag": "@fluentui/react-infobutton_v9.0.0-beta.12",
|
|
7
|
+
"version": "9.0.0-beta.12",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "esteban.230@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-infobutton",
|
|
13
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746",
|
|
14
|
+
"comment": "chore: Add aria-label to InfoButton's button and add a11y guidance for using InfoButton with a label."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "esteban.230@hotmail.com",
|
|
18
|
+
"package": "@fluentui/react-infobutton",
|
|
19
|
+
"commit": "34514e3502e2830d81f9de25956be8b624cd3c20",
|
|
20
|
+
"comment": "chore: Making the content focusable and updating example's text."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-infobutton",
|
|
25
|
+
"comment": "Bump @fluentui/react-popover to v9.4.6",
|
|
26
|
+
"commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-infobutton",
|
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v9.5.0",
|
|
32
|
+
"commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Tue, 31 Jan 2023 19:53:58 GMT",
|
|
6
39
|
"tag": "@fluentui/react-infobutton_v9.0.0-beta.11",
|
|
7
40
|
"version": "9.0.0-beta.11",
|
|
8
41
|
"comments": {
|
|
@@ -11,19 +44,19 @@
|
|
|
11
44
|
"author": "beachball",
|
|
12
45
|
"package": "@fluentui/react-infobutton",
|
|
13
46
|
"comment": "Bump @fluentui/react-popover to v9.4.5",
|
|
14
|
-
"commit": "
|
|
47
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
15
48
|
},
|
|
16
49
|
{
|
|
17
50
|
"author": "beachball",
|
|
18
51
|
"package": "@fluentui/react-infobutton",
|
|
19
52
|
"comment": "Bump @fluentui/react-tabster to v9.4.2",
|
|
20
|
-
"commit": "
|
|
53
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
21
54
|
},
|
|
22
55
|
{
|
|
23
56
|
"author": "beachball",
|
|
24
57
|
"package": "@fluentui/react-infobutton",
|
|
25
58
|
"comment": "Bump @fluentui/react-utilities to v9.5.1",
|
|
26
|
-
"commit": "
|
|
59
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
27
60
|
}
|
|
28
61
|
]
|
|
29
62
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-infobutton
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 07 Feb 2023 14:10:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.12)
|
|
8
|
+
|
|
9
|
+
Tue, 07 Feb 2023 14:10:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.11..@fluentui/react-infobutton_v9.0.0-beta.12)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Add aria-label to InfoButton's button and add a11y guidance for using InfoButton with a label. ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by esteban.230@hotmail.com)
|
|
15
|
+
- chore: Making the content focusable and updating example's text. ([PR #26596](https://github.com/microsoft/fluentui/pull/26596) by esteban.230@hotmail.com)
|
|
16
|
+
- Bump @fluentui/react-popover to v9.4.6 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.5.0 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
|
|
18
|
+
|
|
7
19
|
## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.11)
|
|
8
20
|
|
|
9
|
-
Tue, 31 Jan 2023 19:
|
|
21
|
+
Tue, 31 Jan 2023 19:53:58 GMT
|
|
10
22
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.10..@fluentui/react-infobutton_v9.0.0-beta.11)
|
|
11
23
|
|
|
12
24
|
### Changes
|
|
13
25
|
|
|
14
|
-
- Bump @fluentui/react-popover to v9.4.5 ([PR #
|
|
15
|
-
- Bump @fluentui/react-tabster to v9.4.2 ([PR #
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.5.1 ([PR #
|
|
26
|
+
- Bump @fluentui/react-popover to v9.4.5 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.4.2 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
17
29
|
|
|
18
30
|
## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.10)
|
|
19
31
|
|
|
@@ -36,6 +36,7 @@ export const useInfoButton_unstable = (props, ref) => {
|
|
|
36
36
|
root: getNativeElementProps('button', {
|
|
37
37
|
children: infoButtonIconMap[size],
|
|
38
38
|
type: 'button',
|
|
39
|
+
'aria-label': 'information',
|
|
39
40
|
...props,
|
|
40
41
|
ref
|
|
41
42
|
}),
|
|
@@ -50,7 +51,8 @@ export const useInfoButton_unstable = (props, ref) => {
|
|
|
50
51
|
content: resolveShorthand(props.content, {
|
|
51
52
|
required: true,
|
|
52
53
|
defaultProps: {
|
|
53
|
-
role: 'note'
|
|
54
|
+
role: 'note',
|
|
55
|
+
tabIndex: -1
|
|
54
56
|
}
|
|
55
57
|
})
|
|
56
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,0BAA0B;AACpH,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnG,SAASC,OAAO,EAAEC,cAAc,QAAQ,yBAAyB;AACjE,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,MAAMC,iBAAiB,GAAG;EACxBC,KAAK,eAAEX,oBAACC,uBAAuB,OAAG;EAClCW,MAAM,eAAEZ,oBAACE,uBAAuB,OAAG;EACnCW,KAAK,eAAEb,oBAACG,uBAAuB;CACvB;AAEV,MAAMW,cAAc,GAAG;EACrBH,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASA,OAAO,MAAME,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGF,KAAK;EAEjC,MAAMG,KAAK,GAAoB;IAC7BD,IAAI;IAEJE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEf,OAA0C;MACnDgB,OAAO,EAAEf;KACV;IAEDa,IAAI,EAAEjB,qBAAqB,CAAC,QAAQ,EAAE;MACpCoB,QAAQ,EAAEd,iBAAiB,CAACQ,IAAI,CAAC;MACjCO,IAAI,EAAE,QAAQ;MACd,GAAGT,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEhB,gBAAgB,CAACU,KAAK,CAACM,OAAO,EAAE;MACvCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,WAAW,EAAE,aAAa;QAC1BV,IAAI,EAAEJ,cAAc,CAACI,IAAI,CAAC;QAC1BW,SAAS,EAAE;;KAEd,CAAC;IACFN,OAAO,EAAEjB,gBAAgB,CAACU,KAAK,CAACO,OAAO,EAAE;MACvCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE;;
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,0BAA0B;AACpH,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnG,SAASC,OAAO,EAAEC,cAAc,QAAQ,yBAAyB;AACjE,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,MAAMC,iBAAiB,GAAG;EACxBC,KAAK,eAAEX,oBAACC,uBAAuB,OAAG;EAClCW,MAAM,eAAEZ,oBAACE,uBAAuB,OAAG;EACnCW,KAAK,eAAEb,oBAACG,uBAAuB;CACvB;AAEV,MAAMW,cAAc,GAAG;EACrBH,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASA,OAAO,MAAME,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGF,KAAK;EAEjC,MAAMG,KAAK,GAAoB;IAC7BD,IAAI;IAEJE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEf,OAA0C;MACnDgB,OAAO,EAAEf;KACV;IAEDa,IAAI,EAAEjB,qBAAqB,CAAC,QAAQ,EAAE;MACpCoB,QAAQ,EAAEd,iBAAiB,CAACQ,IAAI,CAAC;MACjCO,IAAI,EAAE,QAAQ;MACd,YAAY,EAAE,aAAa;MAC3B,GAAGT,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEhB,gBAAgB,CAACU,KAAK,CAACM,OAAO,EAAE;MACvCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,WAAW,EAAE,aAAa;QAC1BV,IAAI,EAAEJ,cAAc,CAACI,IAAI,CAAC;QAC1BW,SAAS,EAAE;;KAEd,CAAC;IACFN,OAAO,EAAEjB,gBAAgB,CAACU,KAAK,CAACO,OAAO,EAAE;MACvCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE,MAAM;QACZC,QAAQ,EAAE,CAAC;;KAEd;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGxB,oBAAoB,CAAC;IACzDU,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACY,IAAI;IACzBC,YAAY,EAAEhB,KAAK,CAACG,OAAO,CAACc,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFlB,KAAK,CAACG,OAAO,CAACY,IAAI,GAAGF,WAAW;EAChCb,KAAK,CAACG,OAAO,CAACgB,YAAY,GAAGjC,cAAc,CAACc,KAAK,CAACG,OAAO,CAACgB,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKP,cAAc,CAACO,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOf,KAAK;AACd,CAAC","names":["React","DefaultInfoButtonIcon12","DefaultInfoButtonIcon16","DefaultInfoButtonIcon20","getNativeElementProps","mergeCallbacks","resolveShorthand","Popover","PopoverSurface","useControllableState","infoButtonIconMap","small","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","content","children","type","required","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","open","defaultState","defaultOpen","initialState","onOpenChange","e","data"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n const { size = 'medium' } = props;\n\n const state: InfoButtonState = {\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n content: PopoverSurface,\n },\n\n root: getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref,\n }),\n popover: resolveShorthand(props.popover, {\n required: true,\n defaultProps: {\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n }),\n content: resolveShorthand(props.content, {\n required: true,\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n return state;\n};\n"]}
|
|
@@ -42,6 +42,7 @@ const useInfoButton_unstable = (props, ref) => {
|
|
|
42
42
|
root: react_utilities_1.getNativeElementProps('button', {
|
|
43
43
|
children: infoButtonIconMap[size],
|
|
44
44
|
type: 'button',
|
|
45
|
+
'aria-label': 'information',
|
|
45
46
|
...props,
|
|
46
47
|
ref
|
|
47
48
|
}),
|
|
@@ -56,7 +57,8 @@ const useInfoButton_unstable = (props, ref) => {
|
|
|
56
57
|
content: react_utilities_1.resolveShorthand(props.content, {
|
|
57
58
|
required: true,
|
|
58
59
|
defaultProps: {
|
|
59
|
-
role: 'note'
|
|
60
|
+
role: 'note',
|
|
61
|
+
tabIndex: -1
|
|
60
62
|
}
|
|
61
63
|
})
|
|
62
64
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA,MAAMA,iBAAiB,GAAG;EACxBC,KAAK,eAAEC,oBAACC,gDAAuB,OAAG;EAClCC,MAAM,eAAEF,oBAACC,gDAAuB,OAAG;EACnCE,KAAK,eAAEH,oBAACC,gDAAuB;CACvB;AAEV,MAAMG,cAAc,GAAG;EACrBL,KAAK,EAAE,OAAO;EACdG,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASO,MAAME,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGF,KAAK;EAEjC,MAAMG,KAAK,GAAoB;IAC7BD,IAAI;IAEJE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEC,uBAA0C;MACnDC,OAAO,EAAED;KACV;IAEDF,IAAI,EAAEI,uCAAqB,CAAC,QAAQ,EAAE;MACpCC,QAAQ,EAAElB,iBAAiB,CAACU,IAAI,CAAC;MACjCS,IAAI,EAAE,QAAQ;MACd,GAAGX,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEG,kCAAgB,CAACT,KAAK,CAACM,OAAO,EAAE;MACvCM,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,WAAW,EAAE,aAAa;QAC1BZ,IAAI,EAAEJ,cAAc,CAACI,IAAI,CAAC;QAC1Ba,SAAS,EAAE;;KAEd,CAAC;IACFP,OAAO,EAAEC,kCAAgB,CAACT,KAAK,CAACQ,OAAO,EAAE;MACvCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE;;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAIA,MAAMA,iBAAiB,GAAG;EACxBC,KAAK,eAAEC,oBAACC,gDAAuB,OAAG;EAClCC,MAAM,eAAEF,oBAACC,gDAAuB,OAAG;EACnCE,KAAK,eAAEH,oBAACC,gDAAuB;CACvB;AAEV,MAAMG,cAAc,GAAG;EACrBL,KAAK,EAAE,OAAO;EACdG,MAAM,EAAE,OAAO;EACfC,KAAK,EAAE;CACC;AAEV;;;;;;;;;AASO,MAAME,sBAAsB,GAAG,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGF,KAAK;EAEjC,MAAMG,KAAK,GAAoB;IAC7BD,IAAI;IAEJE,UAAU,EAAE;MACVC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEC,uBAA0C;MACnDC,OAAO,EAAED;KACV;IAEDF,IAAI,EAAEI,uCAAqB,CAAC,QAAQ,EAAE;MACpCC,QAAQ,EAAElB,iBAAiB,CAACU,IAAI,CAAC;MACjCS,IAAI,EAAE,QAAQ;MACd,YAAY,EAAE,aAAa;MAC3B,GAAGX,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEG,kCAAgB,CAACT,KAAK,CAACM,OAAO,EAAE;MACvCM,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,WAAW,EAAE,aAAa;QAC1BZ,IAAI,EAAEJ,cAAc,CAACI,IAAI,CAAC;QAC1Ba,SAAS,EAAE;;KAEd,CAAC;IACFP,OAAO,EAAEC,kCAAgB,CAACT,KAAK,CAACQ,OAAO,EAAE;MACvCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZG,IAAI,EAAE,MAAM;QACZC,QAAQ,EAAE,CAAC;;KAEd;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,sCAAoB,CAAC;IACzDjB,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACe,IAAI;IACzBC,YAAY,EAAEnB,KAAK,CAACG,OAAO,CAACiB,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFrB,KAAK,CAACG,OAAO,CAACe,IAAI,GAAGH,WAAW;EAChCf,KAAK,CAACG,OAAO,CAACmB,YAAY,GAAGhB,gCAAc,CAACN,KAAK,CAACG,OAAO,CAACmB,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKR,cAAc,CAACQ,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOlB,KAAK;AACd,CAAC;AA9CYyB,8BAAsB","names":["infoButtonIconMap","small","React","DefaultInfoButtonIcons_1","medium","large","popoverSizeMap","useInfoButton_unstable","props","ref","size","state","components","root","popover","react_popover_1","content","react_utilities_1","children","type","required","defaultProps","positioning","withArrow","role","tabIndex","popoverOpen","setPopoverOpen","react_utilities_2","open","defaultState","defaultOpen","initialState","onOpenChange","e","data","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';\nimport { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { InfoButtonProps, InfoButtonState } from './InfoButton.types';\nimport type { PopoverProps } from '@fluentui/react-popover';\n\nconst infoButtonIconMap = {\n small: <DefaultInfoButtonIcon12 />,\n medium: <DefaultInfoButtonIcon16 />,\n large: <DefaultInfoButtonIcon20 />,\n} as const;\n\nconst popoverSizeMap = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n} as const;\n\n/**\n * Create the state required to render InfoButton.\n *\n * The returned state can be modified with hooks such as useInfoButtonStyles_unstable,\n * before being passed to renderInfoButton_unstable.\n *\n * @param props - props from this instance of InfoButton\n * @param ref - reference to root HTMLElement of InfoButton\n */\nexport const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {\n const { size = 'medium' } = props;\n\n const state: InfoButtonState = {\n size,\n\n components: {\n root: 'button',\n popover: Popover as React.FC<Partial<PopoverProps>>,\n content: PopoverSurface,\n },\n\n root: getNativeElementProps('button', {\n children: infoButtonIconMap[size],\n type: 'button',\n 'aria-label': 'information',\n ...props,\n ref,\n }),\n popover: resolveShorthand(props.popover, {\n required: true,\n defaultProps: {\n positioning: 'above-start',\n size: popoverSizeMap[size],\n withArrow: true,\n },\n }),\n content: resolveShorthand(props.content, {\n required: true,\n defaultProps: {\n role: 'note',\n tabIndex: -1,\n },\n }),\n };\n\n const [popoverOpen, setPopoverOpen] = useControllableState({\n state: state.popover.open,\n defaultState: state.popover.defaultOpen,\n initialState: false,\n });\n\n state.popover.open = popoverOpen;\n state.popover.onOpenChange = mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));\n\n return state;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-infobutton",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.12",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-popover": "^9.4.
|
|
37
|
-
"@fluentui/react-tabster": "^9.
|
|
36
|
+
"@fluentui/react-popover": "^9.4.6",
|
|
37
|
+
"@fluentui/react-tabster": "^9.5.0",
|
|
38
38
|
"@fluentui/react-theme": "^9.1.5",
|
|
39
39
|
"@fluentui/react-utilities": "^9.5.1",
|
|
40
40
|
"@griffel/react": "^1.5.2",
|