@fluentui/react-infobutton 9.0.0-beta.11 → 9.0.0-beta.13

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 CHANGED
@@ -2,7 +2,67 @@
2
2
  "name": "@fluentui/react-infobutton",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 31 Jan 2023 19:50:42 GMT",
5
+ "date": "Fri, 10 Feb 2023 08:46:47 GMT",
6
+ "tag": "@fluentui/react-infobutton_v9.0.0-beta.13",
7
+ "version": "9.0.0-beta.13",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-infobutton",
13
+ "comment": "Bump @fluentui/react-popover to v9.4.7",
14
+ "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-infobutton",
19
+ "comment": "Bump @fluentui/react-tabster to v9.5.1",
20
+ "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-infobutton",
25
+ "comment": "Bump @fluentui/react-utilities to v9.5.2",
26
+ "commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Tue, 07 Feb 2023 14:13:05 GMT",
33
+ "tag": "@fluentui/react-infobutton_v9.0.0-beta.12",
34
+ "version": "9.0.0-beta.12",
35
+ "comments": {
36
+ "prerelease": [
37
+ {
38
+ "author": "esteban.230@hotmail.com",
39
+ "package": "@fluentui/react-infobutton",
40
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746",
41
+ "comment": "chore: Add aria-label to InfoButton's button and add a11y guidance for using InfoButton with a label."
42
+ },
43
+ {
44
+ "author": "esteban.230@hotmail.com",
45
+ "package": "@fluentui/react-infobutton",
46
+ "commit": "34514e3502e2830d81f9de25956be8b624cd3c20",
47
+ "comment": "chore: Making the content focusable and updating example's text."
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-infobutton",
52
+ "comment": "Bump @fluentui/react-popover to v9.4.6",
53
+ "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-infobutton",
58
+ "comment": "Bump @fluentui/react-tabster to v9.5.0",
59
+ "commit": "8a1405562b3328c408f15e3bf511d3eb6a0c0e66"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "date": "Tue, 31 Jan 2023 19:53:58 GMT",
6
66
  "tag": "@fluentui/react-infobutton_v9.0.0-beta.11",
7
67
  "version": "9.0.0-beta.11",
8
68
  "comments": {
@@ -11,19 +71,19 @@
11
71
  "author": "beachball",
12
72
  "package": "@fluentui/react-infobutton",
13
73
  "comment": "Bump @fluentui/react-popover to v9.4.5",
14
- "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
74
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
15
75
  },
16
76
  {
17
77
  "author": "beachball",
18
78
  "package": "@fluentui/react-infobutton",
19
79
  "comment": "Bump @fluentui/react-tabster to v9.4.2",
20
- "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
80
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
21
81
  },
22
82
  {
23
83
  "author": "beachball",
24
84
  "package": "@fluentui/react-infobutton",
25
85
  "comment": "Bump @fluentui/react-utilities to v9.5.1",
26
- "commit": "22477ef4202cd24add6ebf823196b5888c9d8083"
86
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
27
87
  }
28
88
  ]
29
89
  }
package/CHANGELOG.md CHANGED
@@ -1,19 +1,42 @@
1
1
  # Change Log - @fluentui/react-infobutton
2
2
 
3
- This log was last generated on Tue, 31 Jan 2023 19:50:42 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 10 Feb 2023 08:46:47 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.13)
8
+
9
+ Fri, 10 Feb 2023 08:46:47 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.12..@fluentui/react-infobutton_v9.0.0-beta.13)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-popover to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
15
+ - Bump @fluentui/react-tabster to v9.5.1 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
17
+
18
+ ## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.12)
19
+
20
+ Tue, 07 Feb 2023 14:13:05 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.11..@fluentui/react-infobutton_v9.0.0-beta.12)
22
+
23
+ ### Changes
24
+
25
+ - 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)
26
+ - chore: Making the content focusable and updating example's text. ([PR #26596](https://github.com/microsoft/fluentui/pull/26596) by esteban.230@hotmail.com)
27
+ - Bump @fluentui/react-popover to v9.4.6 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
28
+ - Bump @fluentui/react-tabster to v9.5.0 ([PR #26732](https://github.com/microsoft/fluentui/pull/26732) by beachball)
29
+
7
30
  ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.11)
8
31
 
9
- Tue, 31 Jan 2023 19:50:42 GMT
32
+ Tue, 31 Jan 2023 19:53:58 GMT
10
33
  [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
34
 
12
35
  ### Changes
13
36
 
14
- - Bump @fluentui/react-popover to v9.4.5 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
15
- - Bump @fluentui/react-tabster to v9.4.2 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
16
- - Bump @fluentui/react-utilities to v9.5.1 ([PR #26491](https://github.com/microsoft/fluentui/pull/26491) by beachball)
37
+ - Bump @fluentui/react-popover to v9.4.5 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
38
+ - Bump @fluentui/react-tabster to v9.4.2 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
39
+ - Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
17
40
 
18
41
  ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.10)
19
42
 
@@ -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;;KAET;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGvB,oBAAoB,CAAC;IACzDU,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACW,IAAI;IACzBC,YAAY,EAAEf,KAAK,CAACG,OAAO,CAACa,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFjB,KAAK,CAACG,OAAO,CAACW,IAAI,GAAGF,WAAW;EAChCZ,KAAK,CAACG,OAAO,CAACe,YAAY,GAAGhC,cAAc,CAACc,KAAK,CAACG,OAAO,CAACe,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKP,cAAc,CAACO,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOd,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","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 ...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 },\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"]}
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;;KAET;GACF;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,sCAAoB,CAAC;IACzDhB,KAAK,EAAEA,KAAK,CAACG,OAAO,CAACc,IAAI;IACzBC,YAAY,EAAElB,KAAK,CAACG,OAAO,CAACgB,WAAW;IACvCC,YAAY,EAAE;GACf,CAAC;EAEFpB,KAAK,CAACG,OAAO,CAACc,IAAI,GAAGH,WAAW;EAChCd,KAAK,CAACG,OAAO,CAACkB,YAAY,GAAGf,gCAAc,CAACN,KAAK,CAACG,OAAO,CAACkB,YAAY,EAAE,CAACC,CAAC,EAAEC,IAAI,KAAKR,cAAc,CAACQ,IAAI,CAACN,IAAI,CAAC,CAAC;EAE/G,OAAOjB,KAAK;AACd,CAAC;AA5CYwB,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","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 ...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 },\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"]}
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.11",
3
+ "version": "9.0.0-beta.13",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,10 +33,10 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.175",
36
- "@fluentui/react-popover": "^9.4.5",
37
- "@fluentui/react-tabster": "^9.4.2",
36
+ "@fluentui/react-popover": "^9.4.7",
37
+ "@fluentui/react-tabster": "^9.5.1",
38
38
  "@fluentui/react-theme": "^9.1.5",
39
- "@fluentui/react-utilities": "^9.5.1",
39
+ "@fluentui/react-utilities": "^9.5.2",
40
40
  "@griffel/react": "^1.5.2",
41
41
  "tslib": "^2.1.0"
42
42
  },