@fluentui/react-infobutton 9.0.0-beta.6 → 9.0.0-beta.8
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 +66 -4
- package/CHANGELOG.md +27 -5
- package/dist/index.d.ts +1 -1
- package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib/components/InfoButton/useInfoButton.js +1 -2
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.js +41 -71
- package/lib/components/InfoButton/useInfoButtonStyles.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +1 -2
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js +40 -70
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js.map +1 -1
- package/package.json +5 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,69 @@
|
|
|
2
2
|
"name": "@fluentui/react-infobutton",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 18 Jan 2023 16:30:58 GMT",
|
|
6
|
+
"tag": "@fluentui/react-infobutton_v9.0.0-beta.8",
|
|
7
|
+
"version": "9.0.0-beta.8",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-infobutton",
|
|
13
|
+
"comment": "Bump @fluentui/react-popover to v9.4.2",
|
|
14
|
+
"commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-infobutton",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.4.0",
|
|
20
|
+
"commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Mon, 16 Jan 2023 08:39:02 GMT",
|
|
27
|
+
"tag": "@fluentui/react-infobutton_v9.0.0-beta.7",
|
|
28
|
+
"version": "9.0.0-beta.7",
|
|
29
|
+
"comments": {
|
|
30
|
+
"prerelease": [
|
|
31
|
+
{
|
|
32
|
+
"author": "esteban.230@hotmail.com",
|
|
33
|
+
"package": "@fluentui/react-infobutton",
|
|
34
|
+
"commit": "4aa7a43c0c302dc151d6446abfde95fe9637edb0",
|
|
35
|
+
"comment": "fix: Update border for Teams HCM to be transparent."
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "esteban.230@hotmail.com",
|
|
39
|
+
"package": "@fluentui/react-infobutton",
|
|
40
|
+
"commit": "b326546752a1df3cf4d626dee2d5c47b59ba00ae",
|
|
41
|
+
"comment": "fix: Update PopoverSurface's role to note and remove need to cast props passed to popover slot."
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-infobutton",
|
|
46
|
+
"comment": "Bump @fluentui/react-popover to v9.4.1",
|
|
47
|
+
"commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-infobutton",
|
|
52
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.7",
|
|
53
|
+
"commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
|
|
54
|
+
}
|
|
55
|
+
],
|
|
56
|
+
"none": [
|
|
57
|
+
{
|
|
58
|
+
"author": "martinhochel@microsoft.com",
|
|
59
|
+
"package": "@fluentui/react-infobutton",
|
|
60
|
+
"commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
|
|
61
|
+
"comment": "chore: migrate to packaged scripts"
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"date": "Mon, 09 Jan 2023 14:35:02 GMT",
|
|
6
68
|
"tag": "@fluentui/react-infobutton_v9.0.0-beta.6",
|
|
7
69
|
"version": "9.0.0-beta.6",
|
|
8
70
|
"comments": {
|
|
@@ -11,19 +73,19 @@
|
|
|
11
73
|
"author": "beachball",
|
|
12
74
|
"package": "@fluentui/react-infobutton",
|
|
13
75
|
"comment": "Bump @fluentui/react-popover to v9.4.0",
|
|
14
|
-
"commit": "
|
|
76
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
15
77
|
},
|
|
16
78
|
{
|
|
17
79
|
"author": "beachball",
|
|
18
80
|
"package": "@fluentui/react-infobutton",
|
|
19
81
|
"comment": "Bump @fluentui/react-tabster to v9.3.6",
|
|
20
|
-
"commit": "
|
|
82
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
21
83
|
},
|
|
22
84
|
{
|
|
23
85
|
"author": "beachball",
|
|
24
86
|
"package": "@fluentui/react-infobutton",
|
|
25
87
|
"comment": "Bump @fluentui/react-utilities to v9.4.0",
|
|
26
|
-
"commit": "
|
|
88
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
27
89
|
}
|
|
28
90
|
]
|
|
29
91
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,41 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-infobutton
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 18 Jan 2023 16:30:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.8)
|
|
8
|
+
|
|
9
|
+
Wed, 18 Jan 2023 16:30:58 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.7..@fluentui/react-infobutton_v9.0.0-beta.8)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-popover to v9.4.2 ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by beachball)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.4.0 ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.7)
|
|
18
|
+
|
|
19
|
+
Mon, 16 Jan 2023 08:39:02 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.6..@fluentui/react-infobutton_v9.0.0-beta.7)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- fix: Update border for Teams HCM to be transparent. ([PR #26305](https://github.com/microsoft/fluentui/pull/26305) by esteban.230@hotmail.com)
|
|
25
|
+
- fix: Update PopoverSurface's role to note and remove need to cast props passed to popover slot. ([PR #26300](https://github.com/microsoft/fluentui/pull/26300) by esteban.230@hotmail.com)
|
|
26
|
+
- Bump @fluentui/react-popover to v9.4.1 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.3.7 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.6)
|
|
8
30
|
|
|
9
|
-
Mon, 09 Jan 2023 14:
|
|
31
|
+
Mon, 09 Jan 2023 14:35:02 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-infobutton_v9.0.0-beta.5..@fluentui/react-infobutton_v9.0.0-beta.6)
|
|
11
33
|
|
|
12
34
|
### Changes
|
|
13
35
|
|
|
14
|
-
- Bump @fluentui/react-popover to v9.4.0 ([PR #
|
|
15
|
-
- Bump @fluentui/react-tabster to v9.3.6 ([PR #
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.4.0 ([PR #
|
|
36
|
+
- Bump @fluentui/react-popover to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
37
|
+
- Bump @fluentui/react-tabster to v9.3.6 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
38
|
+
- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
17
39
|
|
|
18
40
|
## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-infobutton_v9.0.0-beta.5)
|
|
19
41
|
|
package/dist/index.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export declare type InfoButtonSlots = {
|
|
|
33
33
|
/**
|
|
34
34
|
* The Popover element that wraps the content and root. Use this slot to pass props to the Popover.
|
|
35
35
|
*/
|
|
36
|
-
popover: NonNullable<Slot<PopoverProps
|
|
36
|
+
popover: NonNullable<Slot<Partial<PopoverProps>>>;
|
|
37
37
|
/**
|
|
38
38
|
* The content to be displayed in the PopoverSurface when the button is pressed.
|
|
39
39
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the content and root. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<PopoverProps
|
|
1
|
+
{"version":3,"file":"InfoButton.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverProps, PopoverSurface } from '@fluentui/react-popover';\n\nexport type InfoButtonSlots = {\n root: NonNullable<Slot<'button'>>;\n\n /**\n * The Popover element that wraps the content and root. Use this slot to pass props to the Popover.\n */\n popover: NonNullable<Slot<Partial<PopoverProps>>>;\n\n /**\n * The content to be displayed in the PopoverSurface when the button is pressed.\n */\n content: NonNullable<Slot<typeof PopoverSurface>>;\n};\n\n/**\n * InfoButton Props\n */\nexport type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {\n /**\n * Size of the InfoButton.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering InfoButton\n */\nexport type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;\n"]}
|
|
@@ -42,7 +42,6 @@ export const useInfoButton_unstable = (props, ref) => {
|
|
|
42
42
|
popover: resolveShorthand(props.popover, {
|
|
43
43
|
required: true,
|
|
44
44
|
defaultProps: {
|
|
45
|
-
children: /*#__PURE__*/React.createElement(React.Fragment, null),
|
|
46
45
|
positioning: 'above-start',
|
|
47
46
|
size: popoverSizeMap[size],
|
|
48
47
|
withArrow: true
|
|
@@ -51,7 +50,7 @@ export const useInfoButton_unstable = (props, ref) => {
|
|
|
51
50
|
content: resolveShorthand(props.content, {
|
|
52
51
|
required: true,
|
|
53
52
|
defaultProps: {
|
|
54
|
-
role: '
|
|
53
|
+
role: 'note'
|
|
55
54
|
}
|
|
56
55
|
})
|
|
57
56
|
};
|
|
@@ -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;
|
|
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,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
2
|
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
|
|
3
3
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
4
4
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
@@ -19,22 +19,13 @@ const useButtonStyles = /*#__PURE__*/__styles({
|
|
|
19
19
|
Brf1p80: "f4d9j23",
|
|
20
20
|
w71qe1: "f1iuv45f",
|
|
21
21
|
ha4doy: "fmrv4ls",
|
|
22
|
+
qhf8xq: "f10pi13n",
|
|
22
23
|
De3pzq: "f1c21dwh",
|
|
23
24
|
sj55zd: "fkfq4zb",
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Bn0qgzm: "f1vxd6vx",
|
|
29
|
-
ibv6hh: ["f1ojsxk5", "f5tn483"],
|
|
30
|
-
icvyot: "fzkkow9",
|
|
31
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
32
|
-
oivjwe: "fg706s2",
|
|
33
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
34
|
-
g2u3we: "fghlq4f",
|
|
35
|
-
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
36
|
-
B9xav0g: "fb073pr",
|
|
37
|
-
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
25
|
+
icvyot: "f1ern45e",
|
|
26
|
+
vrafjx: ["f1n71otn", "f1deefiw"],
|
|
27
|
+
oivjwe: "f1h8hb77",
|
|
28
|
+
wvpqe5: ["f1deefiw", "f1n71otn"],
|
|
38
29
|
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
39
30
|
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
40
31
|
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
@@ -62,42 +53,45 @@ const useButtonStyles = /*#__PURE__*/__styles({
|
|
|
62
53
|
D0sxk3: "fgzdkf0",
|
|
63
54
|
t6yez3: "f15q0o9g",
|
|
64
55
|
Bsw6fvg: "f1rirnrt",
|
|
65
|
-
Bjwas2f: "f14pvji2",
|
|
66
|
-
Bn1d65q: ["f1xeojaw", "f1hodmrf"],
|
|
67
|
-
Bxeuatn: "fcbbwn3",
|
|
68
|
-
n51gp8: ["f1hodmrf", "f1xeojaw"],
|
|
69
56
|
Bbusuzp: "f1cg6951"
|
|
70
57
|
},
|
|
71
58
|
highContrast: {
|
|
72
|
-
Bjwas2f: "f14pvji2",
|
|
73
|
-
Bn1d65q: ["f1xeojaw", "f1hodmrf"],
|
|
74
|
-
Bxeuatn: "fcbbwn3",
|
|
75
|
-
n51gp8: ["f1hodmrf", "f1xeojaw"],
|
|
76
59
|
Bbusuzp: "fn0tkbb",
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
Bmhq1k7: ["fzyms9j", "f12bfk5t"],
|
|
81
|
-
E428ku: "f1ucftwv",
|
|
82
|
-
Bipfp3: ["f12bfk5t", "fzyms9j"],
|
|
83
|
-
nrfbsj: "f10s0nbj"
|
|
60
|
+
Bs6v0vm: "f1rp3av6",
|
|
61
|
+
B46dtvo: "f1u7gwqv",
|
|
62
|
+
gh1jta: "fl6kagl"
|
|
84
63
|
},
|
|
85
64
|
focusIndicator: {
|
|
86
65
|
Brovlpu: "ftqa4ok",
|
|
87
66
|
B486eqv: "f2hkw1w",
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
67
|
+
B8q5s1w: "f8hki3x",
|
|
68
|
+
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
69
|
+
n8qw10: "f1bjia2o",
|
|
70
|
+
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
71
|
+
Bm4h7ae: "f15bsgw9",
|
|
72
|
+
B7ys5i9: "f14e48fq",
|
|
73
|
+
Busjfv9: "f18yb2kv",
|
|
74
|
+
Bhk32uz: "fd6o370",
|
|
75
|
+
Bf4ptjt: "fh1cnn4",
|
|
76
|
+
kclons: ["fy7oxxb", "f184ne2d"],
|
|
77
|
+
Bhdgwq3: "fpukqih",
|
|
78
|
+
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
79
|
+
Bqtpl0w: "frrh606",
|
|
80
|
+
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
81
|
+
hgwjuy: "ful5kiu",
|
|
82
|
+
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
83
|
+
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
84
|
+
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
85
|
+
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
86
|
+
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
87
|
+
B6dhp37: "f1dvezut",
|
|
88
|
+
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
89
|
+
Boxcth7: "fjvm52t",
|
|
90
|
+
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
91
|
+
J0r882: "fdiulkx",
|
|
92
|
+
Bjwuhne: "f1yalx80",
|
|
93
|
+
Ghsupd: ["fq22d5a", "f1jw7pan"],
|
|
94
|
+
Bule8hv: ["f1jw7pan", "fq22d5a"]
|
|
101
95
|
},
|
|
102
96
|
large: {
|
|
103
97
|
z8tnut: "fclwglc",
|
|
@@ -106,43 +100,19 @@ const useButtonStyles = /*#__PURE__*/__styles({
|
|
|
106
100
|
uwmqm3: ["f1b0r8ql", "f1w3695s"]
|
|
107
101
|
}
|
|
108
102
|
}, {
|
|
109
|
-
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".
|
|
103
|
+
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
|
|
110
104
|
h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1jpd6y0:hover .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
|
|
111
105
|
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
|
|
112
106
|
m: "(forced-colors: active)"
|
|
113
|
-
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
114
|
-
m: "(forced-colors: active)"
|
|
115
|
-
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
116
|
-
m: "(forced-colors: active)"
|
|
117
|
-
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
118
|
-
m: "(forced-colors: active)"
|
|
119
|
-
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
120
|
-
m: "(forced-colors: active)"
|
|
121
107
|
}], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
|
|
122
108
|
m: "(forced-colors: active)"
|
|
123
|
-
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
124
|
-
m: "(forced-colors: active)"
|
|
125
|
-
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
126
|
-
m: "(forced-colors: active)"
|
|
127
|
-
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
128
|
-
m: "(forced-colors: active)"
|
|
129
|
-
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
130
|
-
m: "(forced-colors: active)"
|
|
131
109
|
}], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
|
|
132
110
|
m: "(forced-colors: active)"
|
|
133
|
-
}], ["@media (forced-colors: active){.
|
|
134
|
-
m: "(forced-colors: active)"
|
|
135
|
-
}], ["@media (forced-colors: active){.f5mt1fw:hover,.f5mt1fw :hover:active{background-color:Highlight;}}", {
|
|
136
|
-
m: "(forced-colors: active)"
|
|
137
|
-
}], ["@media (forced-colors: active){.f17188ff:hover,.f17188ff :hover:active{border-top-color:Canvas;}}", {
|
|
138
|
-
m: "(forced-colors: active)"
|
|
139
|
-
}], ["@media (forced-colors: active){.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}}", {
|
|
140
|
-
m: "(forced-colors: active)"
|
|
141
|
-
}], ["@media (forced-colors: active){.f1ucftwv:hover,.f1ucftwv :hover:active{border-bottom-color:Canvas;}}", {
|
|
111
|
+
}], ["@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}", {
|
|
142
112
|
m: "(forced-colors: active)"
|
|
143
|
-
}], ["@media (forced-colors: active){.
|
|
113
|
+
}], ["@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}", {
|
|
144
114
|
m: "(forced-colors: active)"
|
|
145
|
-
}], ["@media (forced-colors: active){.
|
|
115
|
+
}], ["@media (forced-colors: active){.fl6kagl:hover,.fl6kagl:hover:active{color:Canvas;}}", {
|
|
146
116
|
m: "(forced-colors: active)"
|
|
147
117
|
}]],
|
|
148
118
|
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,eAAe,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;AAAA,EA4EtB;AAEF,MAAMC,uBAAuB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAG9B;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAM;IAAEC;EAAI,CAAE,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAI,CAAE,GAAGF,KAAK,CAACL,OAAO;EAC9B,MAAMQ,YAAY,GAAGN,eAAe,EAAE;EACtC,MAAMO,oBAAoB,GAAGN,uBAAuB,EAAE;EAEtDE,KAAK,CAACJ,OAAO,CAACS,SAAS,GAAGhB,YAAY,CACpCI,oBAAoB,CAACG,OAAO,EAC5BK,IAAI,KAAK,OAAO,IAAIG,oBAAoB,CAACE,KAAK,EAC9CN,KAAK,CAACJ,OAAO,CAACS,SAAS,CACxB;EAEDL,KAAK,CAACN,IAAI,CAACW,SAAS,GAAGhB,YAAY,CACjCI,oBAAoB,CAACC,IAAI,EACzBS,YAAY,CAACI,IAAI,EACjBJ,YAAY,CAACK,YAAY,EACzBL,YAAY,CAACM,cAAc,EAC3BP,IAAI,IAAIC,YAAY,CAACO,QAAQ,EAC7BT,IAAI,KAAK,OAAO,IAAIE,YAAY,CAACG,KAAK,EACtCN,KAAK,CAACN,IAAI,CAACW,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC","names":["createFocusOutlineStyle","iconFilledClassName","iconRegularClassName","mergeClasses","shorthands","tokens","typographyStyles","infoButtonClassNames","root","popover","content","useButtonStyles","usePopoverSurfaceStyles","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className","large","base","highContrast","focusIndicator","selected"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n content: 'fui-InfoButton__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n\n ...shorthands.borderStyle('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.margin(0),\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex',\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createFocusOutlineStyle(),\n\n large: {\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n state.content.className = mergeClasses(\n infoButtonClassNames.content,\n size === 'large' && popoverSurfaceStyles.large,\n state.content.className,\n );\n\n state.root.className = mergeClasses(\n infoButtonClassNames.root,\n buttonStyles.base,\n buttonStyles.highContrast,\n buttonStyles.focusIndicator,\n open && buttonStyles.selected,\n size === 'large' && buttonStyles.large,\n state.root.className,\n );\n\n return state;\n};\n"]}
|
|
@@ -48,7 +48,6 @@ const useInfoButton_unstable = (props, ref) => {
|
|
|
48
48
|
popover: react_utilities_1.resolveShorthand(props.popover, {
|
|
49
49
|
required: true,
|
|
50
50
|
defaultProps: {
|
|
51
|
-
children: React.createElement(React.Fragment, null),
|
|
52
51
|
positioning: 'above-start',
|
|
53
52
|
size: popoverSizeMap[size],
|
|
54
53
|
withArrow: true
|
|
@@ -57,7 +56,7 @@ const useInfoButton_unstable = (props, ref) => {
|
|
|
57
56
|
content: react_utilities_1.resolveShorthand(props.content, {
|
|
58
57
|
required: true,
|
|
59
58
|
defaultProps: {
|
|
60
|
-
role: '
|
|
59
|
+
role: 'note'
|
|
61
60
|
}
|
|
62
61
|
})
|
|
63
62
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;
|
|
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"]}
|
|
@@ -25,22 +25,13 @@ const useButtonStyles = /*#__PURE__*/react_1.__styles({
|
|
|
25
25
|
Brf1p80: "f4d9j23",
|
|
26
26
|
w71qe1: "f1iuv45f",
|
|
27
27
|
ha4doy: "fmrv4ls",
|
|
28
|
+
qhf8xq: "f10pi13n",
|
|
28
29
|
De3pzq: "f1c21dwh",
|
|
29
30
|
sj55zd: "fkfq4zb",
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
Bn0qgzm: "f1vxd6vx",
|
|
35
|
-
ibv6hh: ["f1ojsxk5", "f5tn483"],
|
|
36
|
-
icvyot: "fzkkow9",
|
|
37
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
38
|
-
oivjwe: "fg706s2",
|
|
39
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
40
|
-
g2u3we: "fghlq4f",
|
|
41
|
-
h3c5rm: ["f1gn591s", "fjscplz"],
|
|
42
|
-
B9xav0g: "fb073pr",
|
|
43
|
-
zhjwy3: ["fjscplz", "f1gn591s"],
|
|
31
|
+
icvyot: "f1ern45e",
|
|
32
|
+
vrafjx: ["f1n71otn", "f1deefiw"],
|
|
33
|
+
oivjwe: "f1h8hb77",
|
|
34
|
+
wvpqe5: ["f1deefiw", "f1n71otn"],
|
|
44
35
|
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
45
36
|
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
46
37
|
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
@@ -68,42 +59,45 @@ const useButtonStyles = /*#__PURE__*/react_1.__styles({
|
|
|
68
59
|
D0sxk3: "fgzdkf0",
|
|
69
60
|
t6yez3: "f15q0o9g",
|
|
70
61
|
Bsw6fvg: "f1rirnrt",
|
|
71
|
-
Bjwas2f: "f14pvji2",
|
|
72
|
-
Bn1d65q: ["f1xeojaw", "f1hodmrf"],
|
|
73
|
-
Bxeuatn: "fcbbwn3",
|
|
74
|
-
n51gp8: ["f1hodmrf", "f1xeojaw"],
|
|
75
62
|
Bbusuzp: "f1cg6951"
|
|
76
63
|
},
|
|
77
64
|
highContrast: {
|
|
78
|
-
Bjwas2f: "f14pvji2",
|
|
79
|
-
Bn1d65q: ["f1xeojaw", "f1hodmrf"],
|
|
80
|
-
Bxeuatn: "fcbbwn3",
|
|
81
|
-
n51gp8: ["f1hodmrf", "f1xeojaw"],
|
|
82
65
|
Bbusuzp: "fn0tkbb",
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
Bmhq1k7: ["fzyms9j", "f12bfk5t"],
|
|
87
|
-
E428ku: "f1ucftwv",
|
|
88
|
-
Bipfp3: ["f12bfk5t", "fzyms9j"],
|
|
89
|
-
nrfbsj: "f10s0nbj"
|
|
66
|
+
Bs6v0vm: "f1rp3av6",
|
|
67
|
+
B46dtvo: "f1u7gwqv",
|
|
68
|
+
gh1jta: "fl6kagl"
|
|
90
69
|
},
|
|
91
70
|
focusIndicator: {
|
|
92
71
|
Brovlpu: "ftqa4ok",
|
|
93
72
|
B486eqv: "f2hkw1w",
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
73
|
+
B8q5s1w: "f8hki3x",
|
|
74
|
+
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
|
75
|
+
n8qw10: "f1bjia2o",
|
|
76
|
+
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
|
77
|
+
Bm4h7ae: "f15bsgw9",
|
|
78
|
+
B7ys5i9: "f14e48fq",
|
|
79
|
+
Busjfv9: "f18yb2kv",
|
|
80
|
+
Bhk32uz: "fd6o370",
|
|
81
|
+
Bf4ptjt: "fh1cnn4",
|
|
82
|
+
kclons: ["fy7oxxb", "f184ne2d"],
|
|
83
|
+
Bhdgwq3: "fpukqih",
|
|
84
|
+
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
|
85
|
+
Bqtpl0w: "frrh606",
|
|
86
|
+
clg4pj: ["f1v5zibi", "fo2hd23"],
|
|
87
|
+
hgwjuy: "ful5kiu",
|
|
88
|
+
Bonggc9: ["fo2hd23", "f1v5zibi"],
|
|
89
|
+
B1tsrr9: ["f1jqcqds", "ftffrms"],
|
|
90
|
+
Dah5zi: ["ftffrms", "f1jqcqds"],
|
|
91
|
+
Bkh64rk: ["f2e7qr6", "fsr1zz6"],
|
|
92
|
+
qqdqy8: ["fsr1zz6", "f2e7qr6"],
|
|
93
|
+
B6dhp37: "f1dvezut",
|
|
94
|
+
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
|
95
|
+
Boxcth7: "fjvm52t",
|
|
96
|
+
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
|
97
|
+
J0r882: "fdiulkx",
|
|
98
|
+
Bjwuhne: "f1yalx80",
|
|
99
|
+
Ghsupd: ["fq22d5a", "f1jw7pan"],
|
|
100
|
+
Bule8hv: ["f1jw7pan", "fq22d5a"]
|
|
107
101
|
},
|
|
108
102
|
large: {
|
|
109
103
|
z8tnut: "fclwglc",
|
|
@@ -112,43 +106,19 @@ const useButtonStyles = /*#__PURE__*/react_1.__styles({
|
|
|
112
106
|
uwmqm3: ["f1b0r8ql", "f1w3695s"]
|
|
113
107
|
}
|
|
114
108
|
}, {
|
|
115
|
-
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".
|
|
109
|
+
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1iuv45f{text-decoration-line:none;}", ".fmrv4ls{vertical-align:middle;}", ".f10pi13n{position:relative;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f16u1re .fui-Icon-filled{display:none;}", ".f1rw4040 .fui-Icon-regular{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}", ".fgzdkf0 .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fdiulkx[data-fui-focus-visible]::after{top:-2px;}", ".f1yalx80[data-fui-focus-visible]::after{bottom:-2px;}", ".fq22d5a[data-fui-focus-visible]::after{left:-2px;}", ".f1jw7pan[data-fui-focus-visible]::after{right:-2px;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
|
|
116
110
|
h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1jpd6y0:hover .fui-Icon-filled{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
|
|
117
111
|
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
|
|
118
112
|
m: "(forced-colors: active)"
|
|
119
|
-
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
120
|
-
m: "(forced-colors: active)"
|
|
121
|
-
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
122
|
-
m: "(forced-colors: active)"
|
|
123
|
-
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
124
|
-
m: "(forced-colors: active)"
|
|
125
|
-
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
126
|
-
m: "(forced-colors: active)"
|
|
127
113
|
}], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
|
|
128
114
|
m: "(forced-colors: active)"
|
|
129
|
-
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
130
|
-
m: "(forced-colors: active)"
|
|
131
|
-
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
132
|
-
m: "(forced-colors: active)"
|
|
133
|
-
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
134
|
-
m: "(forced-colors: active)"
|
|
135
|
-
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
136
|
-
m: "(forced-colors: active)"
|
|
137
115
|
}], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
|
|
138
116
|
m: "(forced-colors: active)"
|
|
139
|
-
}], ["@media (forced-colors: active){.
|
|
140
|
-
m: "(forced-colors: active)"
|
|
141
|
-
}], ["@media (forced-colors: active){.f5mt1fw:hover,.f5mt1fw :hover:active{background-color:Highlight;}}", {
|
|
142
|
-
m: "(forced-colors: active)"
|
|
143
|
-
}], ["@media (forced-colors: active){.f17188ff:hover,.f17188ff :hover:active{border-top-color:Canvas;}}", {
|
|
144
|
-
m: "(forced-colors: active)"
|
|
145
|
-
}], ["@media (forced-colors: active){.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}}", {
|
|
146
|
-
m: "(forced-colors: active)"
|
|
147
|
-
}], ["@media (forced-colors: active){.f1ucftwv:hover,.f1ucftwv :hover:active{border-bottom-color:Canvas;}}", {
|
|
117
|
+
}], ["@media (forced-colors: active){.f1rp3av6:hover,.f1rp3av6:hover:active{forced-color-adjust:none;}}", {
|
|
148
118
|
m: "(forced-colors: active)"
|
|
149
|
-
}], ["@media (forced-colors: active){.
|
|
119
|
+
}], ["@media (forced-colors: active){.f1u7gwqv:hover,.f1u7gwqv:hover:active{background-color:Highlight;}}", {
|
|
150
120
|
m: "(forced-colors: active)"
|
|
151
|
-
}], ["@media (forced-colors: active){.
|
|
121
|
+
}], ["@media (forced-colors: active){.fl6kagl:hover,.fl6kagl:hover:active{color:Canvas;}}", {
|
|
152
122
|
m: "(forced-colors: active)"
|
|
153
123
|
}]],
|
|
154
124
|
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIaA,4BAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtB;EACAC,OAAO,EAAE,yBAAyB;EAClCC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;AAAA,EA4EhC;AAEF,MAAMC,uBAAuB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAGxC;AAEF;;;AAGO,MAAME,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAM;IAAEC;EAAI,CAAE,GAAGD,KAAK;EACtB,MAAM;IAAEE;EAAI,CAAE,GAAGF,KAAK,CAACN,OAAO;EAC9B,MAAMS,YAAY,GAAGP,eAAe,EAAE;EACtC,MAAMQ,oBAAoB,GAAGN,uBAAuB,EAAE;EAEtDE,KAAK,CAACL,OAAO,CAACU,SAAS,GAAGR,oBAAY,CACpCL,4BAAoB,CAACG,OAAO,EAC5BM,IAAI,KAAK,OAAO,IAAIG,oBAAoB,CAACE,KAAK,EAC9CN,KAAK,CAACL,OAAO,CAACU,SAAS,CACxB;EAEDL,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGR,oBAAY,CACjCL,4BAAoB,CAACC,IAAI,EACzBU,YAAY,CAACI,IAAI,EACjBJ,YAAY,CAACK,YAAY,EACzBL,YAAY,CAACM,cAAc,EAC3BP,IAAI,IAAIC,YAAY,CAACO,QAAQ,EAC7BT,IAAI,KAAK,OAAO,IAAIE,YAAY,CAACG,KAAK,EACtCN,KAAK,CAACP,IAAI,CAACY,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAvBYR,oCAA4B","names":["exports","root","popover","content","useButtonStyles","react_1","usePopoverSurfaceStyles","useInfoButtonStyles_unstable","state","size","open","buttonStyles","popoverSurfaceStyles","className","large","base","highContrast","focusIndicator","selected"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/useInfoButtonStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InfoButtonSlots, InfoButtonState } from './InfoButton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const infoButtonClassNames: SlotClassNames<InfoButtonSlots> = {\n root: 'fui-InfoButton',\n // this className won't be used, but it's needed to satisfy the type checker\n popover: 'fui-InfoButton__popover',\n content: 'fui-InfoButton__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useButtonStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n position: 'relative',\n\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n\n ...shorthands.borderStyle('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.margin(0),\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline-flex',\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n selected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline-flex',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n\n ':hover,:hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createFocusOutlineStyle(),\n\n large: {\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingVerticalXXS),\n },\n});\n\nconst usePopoverSurfaceStyles = makeStyles({\n smallMedium: typographyStyles.caption1,\n large: typographyStyles.body1,\n});\n\n/**\n * Apply styling to the InfoButton slots based on the state\n */\nexport const useInfoButtonStyles_unstable = (state: InfoButtonState): InfoButtonState => {\n const { size } = state;\n const { open } = state.popover;\n const buttonStyles = useButtonStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n\n state.content.className = mergeClasses(\n infoButtonClassNames.content,\n size === 'large' && popoverSurfaceStyles.large,\n state.content.className,\n );\n\n state.root.className = mergeClasses(\n infoButtonClassNames.root,\n buttonStyles.base,\n buttonStyles.highContrast,\n buttonStyles.focusIndicator,\n open && buttonStyles.selected,\n size === 'large' && buttonStyles.large,\n state.root.className,\n );\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.8",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,12 +28,13 @@
|
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
30
|
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
31
|
-
"@fluentui/scripts": "*"
|
|
31
|
+
"@fluentui/scripts-api-extractor": "*",
|
|
32
|
+
"@fluentui/scripts-tasks": "*"
|
|
32
33
|
},
|
|
33
34
|
"dependencies": {
|
|
34
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-popover": "^9.4.
|
|
36
|
-
"@fluentui/react-tabster": "^9.
|
|
36
|
+
"@fluentui/react-popover": "^9.4.2",
|
|
37
|
+
"@fluentui/react-tabster": "^9.4.0",
|
|
37
38
|
"@fluentui/react-theme": "^9.1.5",
|
|
38
39
|
"@fluentui/react-utilities": "^9.4.0",
|
|
39
40
|
"@griffel/react": "^1.5.2",
|