@fluentui/react-infobutton 9.0.0-beta.10 → 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 CHANGED
@@ -2,7 +2,67 @@
2
2
  "name": "@fluentui/react-infobutton",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 26 Jan 2023 13:27:53 GMT",
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",
39
+ "tag": "@fluentui/react-infobutton_v9.0.0-beta.11",
40
+ "version": "9.0.0-beta.11",
41
+ "comments": {
42
+ "prerelease": [
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-infobutton",
46
+ "comment": "Bump @fluentui/react-popover to v9.4.5",
47
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-infobutton",
52
+ "comment": "Bump @fluentui/react-tabster to v9.4.2",
53
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-infobutton",
58
+ "comment": "Bump @fluentui/react-utilities to v9.5.1",
59
+ "commit": "794d9e845cb952f597ba786e70cd8d248be62746"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "date": "Thu, 26 Jan 2023 13:31:03 GMT",
6
66
  "tag": "@fluentui/react-infobutton_v9.0.0-beta.10",
7
67
  "version": "9.0.0-beta.10",
8
68
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,35 @@
1
1
  # Change Log - @fluentui/react-infobutton
2
2
 
3
- This log was last generated on Thu, 26 Jan 2023 13:27:53 GMT and should not be manually modified.
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
+
19
+ ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.11)
20
+
21
+ Tue, 31 Jan 2023 19:53:58 GMT
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)
23
+
24
+ ### Changes
25
+
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)
29
+
7
30
  ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.10)
8
31
 
9
- Thu, 26 Jan 2023 13:27:53 GMT
32
+ Thu, 26 Jan 2023 13:31:03 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.9..@fluentui/react-infobutton_v9.0.0-beta.10)
11
34
 
12
35
  ### Changes
@@ -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.10",
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,10 +33,10 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-icons": "^2.0.175",
36
- "@fluentui/react-popover": "^9.4.4",
37
- "@fluentui/react-tabster": "^9.4.1",
36
+ "@fluentui/react-popover": "^9.4.6",
37
+ "@fluentui/react-tabster": "^9.5.0",
38
38
  "@fluentui/react-theme": "^9.1.5",
39
- "@fluentui/react-utilities": "^9.5.0",
39
+ "@fluentui/react-utilities": "^9.5.1",
40
40
  "@griffel/react": "^1.5.2",
41
41
  "tslib": "^2.1.0"
42
42
  },