@fluentui/react-infobutton 9.0.0-beta.4 → 9.0.0-beta.5
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 +60 -1
- package/CHANGELOG.md +16 -2
- package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib/components/InfoButton/InfoButton.js +0 -1
- package/lib/components/InfoButton/InfoButton.js.map +1 -1
- package/lib/components/InfoButton/renderInfoButton.js +6 -4
- package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButton.js +0 -1
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.js +122 -126
- package/lib/components/InfoButton/useInfoButtonStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/InfoButton.js +0 -2
- package/lib-commonjs/InfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js +0 -2
- package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.js +0 -6
- package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib-commonjs/components/InfoButton/index.js +0 -6
- package/lib-commonjs/components/InfoButton/index.js.map +1 -1
- package/lib-commonjs/components/InfoButton/renderInfoButton.js +6 -9
- package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +0 -8
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js +122 -132
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
- package/Spec.md +0 -143
|
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.InfoButton = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const renderInfoButton_1 = /*#__PURE__*/require("./renderInfoButton");
|
|
11
|
-
|
|
12
9
|
const useInfoButton_1 = /*#__PURE__*/require("./useInfoButton");
|
|
13
|
-
|
|
14
10
|
const useInfoButtonStyles_1 = /*#__PURE__*/require("./useInfoButtonStyles");
|
|
15
11
|
/**
|
|
16
12
|
* InfoButtons provide a way to display additional information about a form field or an area in the UI.
|
|
17
13
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
14
|
exports.InfoButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
21
15
|
const state = useInfoButton_1.useInfoButton_unstable(props, ref);
|
|
22
16
|
useInfoButtonStyles_1.useInfoButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAGA;;;AAGaA,kBAAU,gBAAyCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,sCAAsB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEhDG,kDAA4B,CAACF,KAAK,CAAC;EACnC,OAAOG,4CAAyB,CAACH,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFL,kBAAU,CAACS,WAAW,GAAG,YAAY","names":["exports","React","forwardRef","props","ref","state","useInfoButton_1","useInfoButtonStyles_1","renderInfoButton_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { renderInfoButton_unstable } from './renderInfoButton';\nimport { useInfoButton_unstable } from './useInfoButton';\nimport { useInfoButtonStyles_unstable } from './useInfoButtonStyles';\nimport type { InfoButtonProps } from './InfoButton.types';\n\n/**\n * InfoButtons provide a way to display additional information about a form field or an area in the UI.\n */\nexport const InfoButton: ForwardRefComponent<InfoButtonProps> = React.forwardRef((props, ref) => {\n const state = useInfoButton_unstable(props, ref);\n\n useInfoButtonStyles_unstable(state);\n return renderInfoButton_unstable(state);\n});\n\nInfoButton.displayName = 'InfoButton';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -3,16 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./InfoButton"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./InfoButton.types"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./renderInfoButton"), exports);
|
|
14
|
-
|
|
15
10
|
tslib_1.__exportStar(require("./useInfoButton"), exports);
|
|
16
|
-
|
|
17
11
|
tslib_1.__exportStar(require("./useInfoButtonStyles"), exports);
|
|
18
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-infobutton/src/components/InfoButton/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/index.ts"],"sourcesContent":["export * from './InfoButton';\nexport * from './InfoButton.types';\nexport * from './renderInfoButton';\nexport * from './useInfoButton';\nexport * from './useInfoButtonStyles';\n"]}
|
|
@@ -4,27 +4,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.renderInfoButton_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
-
|
|
12
9
|
const react_popover_1 = /*#__PURE__*/require("@fluentui/react-popover");
|
|
13
10
|
/**
|
|
14
11
|
* Render the final JSX of InfoButton
|
|
15
12
|
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
13
|
const renderInfoButton_unstable = state => {
|
|
19
14
|
const {
|
|
20
15
|
slots,
|
|
21
16
|
slotProps
|
|
22
17
|
} = react_utilities_1.getSlots(state);
|
|
23
|
-
return React.createElement(slots.popover, {
|
|
24
|
-
|
|
25
|
-
}
|
|
18
|
+
return React.createElement(slots.popover, {
|
|
19
|
+
...slotProps.popover
|
|
20
|
+
}, React.createElement(react_popover_1.PopoverTrigger, null, React.createElement(slots.root, {
|
|
21
|
+
...slotProps.root
|
|
22
|
+
})), React.createElement(slots.content, {
|
|
23
|
+
...slotProps.content
|
|
26
24
|
}));
|
|
27
25
|
};
|
|
28
|
-
|
|
29
26
|
exports.renderInfoButton_unstable = renderInfoButton_unstable;
|
|
30
27
|
//# sourceMappingURL=renderInfoButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIA;;;AAGO,MAAMA,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAkBH,KAAK,CAAC;EAE7D,OACEI,oBAACH,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAwB,GACpDD,oBAACE,8BAAc,QACbF,oBAACH,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CACnB,EACjBH,oBAACH,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,EAAI,CAC1B;AAEpB,CAAC;AAXYC,iCAAyB","names":["renderInfoButton_unstable","state","slots","slotProps","react_utilities_1","React","popover","react_popover_1","root","content","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/components/InfoButton/renderInfoButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverTrigger } from '@fluentui/react-popover';\nimport type { PopoverProps } from '@fluentui/react-popover';\nimport type { InfoButtonState, InfoButtonSlots } from './InfoButton.types';\n\n/**\n * Render the final JSX of InfoButton\n */\nexport const renderInfoButton_unstable = (state: InfoButtonState) => {\n const { slots, slotProps } = getSlots<InfoButtonSlots>(state);\n\n return (\n <slots.popover {...(slotProps.popover as PopoverProps)}>\n <PopoverTrigger>\n <slots.root {...slotProps.root} />\n </PopoverTrigger>\n <slots.content {...slotProps.content} />\n </slots.popover>\n );\n};\n"]}
|
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useInfoButton_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const DefaultInfoButtonIcons_1 = /*#__PURE__*/require("./DefaultInfoButtonIcons");
|
|
11
|
-
|
|
12
9
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
13
|
-
|
|
14
10
|
const react_popover_1 = /*#__PURE__*/require("@fluentui/react-popover");
|
|
15
|
-
|
|
16
11
|
const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
17
|
-
|
|
18
12
|
const infoButtonIconMap = {
|
|
19
13
|
small: /*#__PURE__*/React.createElement(DefaultInfoButtonIcons_1.DefaultInfoButtonIcon12, null),
|
|
20
14
|
medium: /*#__PURE__*/React.createElement(DefaultInfoButtonIcons_1.DefaultInfoButtonIcon16, null),
|
|
@@ -34,7 +28,6 @@ const popoverSizeMap = {
|
|
|
34
28
|
* @param props - props from this instance of InfoButton
|
|
35
29
|
* @param ref - reference to root HTMLElement of InfoButton
|
|
36
30
|
*/
|
|
37
|
-
|
|
38
31
|
const useInfoButton_unstable = (props, ref) => {
|
|
39
32
|
const {
|
|
40
33
|
size = 'medium'
|
|
@@ -77,6 +70,5 @@ const useInfoButton_unstable = (props, ref) => {
|
|
|
77
70
|
state.popover.onOpenChange = react_utilities_1.mergeCallbacks(state.popover.onOpenChange, (e, data) => setPopoverOpen(data.open));
|
|
78
71
|
return state;
|
|
79
72
|
};
|
|
80
|
-
|
|
81
73
|
exports.useInfoButton_unstable = useInfoButton_unstable;
|
|
82
74
|
//# sourceMappingURL=useInfoButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAGA,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,uBAAO;MAChBC,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;QACZH,QAAQ,EAAEhB,yCAAK;QACfoB,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;AA7CYwB,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';\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,\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 children: <></>,\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: 'dialog',\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"]}
|
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useInfoButtonStyles_unstable = exports.infoButtonClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
9
|
-
|
|
10
8
|
const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
11
|
-
|
|
12
9
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
13
|
-
|
|
14
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
15
|
-
|
|
16
11
|
exports.infoButtonClassNames = {
|
|
17
12
|
root: 'fui-InfoButton',
|
|
18
13
|
// this className won't be used, but it's needed to satisfy the type checker
|
|
@@ -22,166 +17,162 @@ exports.infoButtonClassNames = {
|
|
|
22
17
|
/**
|
|
23
18
|
* Styles for the root slot
|
|
24
19
|
*/
|
|
25
|
-
|
|
26
20
|
const useButtonStyles = /*#__PURE__*/react_1.__styles({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
21
|
+
base: {
|
|
22
|
+
Bt984gj: "f122n59",
|
|
23
|
+
B7ck84d: "f1ewtqcl",
|
|
24
|
+
mc9l5x: "ftuwxu6",
|
|
25
|
+
Brf1p80: "f4d9j23",
|
|
26
|
+
w71qe1: "f1iuv45f",
|
|
27
|
+
ha4doy: "fmrv4ls",
|
|
28
|
+
De3pzq: "f1c21dwh",
|
|
29
|
+
sj55zd: "fkfq4zb",
|
|
30
|
+
B68tc82: "f1p9o1ba",
|
|
31
|
+
Bmxbyg5: "f1sil6mw",
|
|
32
|
+
B4j52fo: "f192inf7",
|
|
33
|
+
Bekrc4i: ["f5tn483", "f1ojsxk5"],
|
|
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"],
|
|
44
|
+
Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
|
|
45
|
+
Beyfa6y: ["f16jpd5f", "f1aa9q02"],
|
|
46
|
+
B7oj6ja: ["f1jar5jt", "fyu767a"],
|
|
47
|
+
Btl43ni: ["fyu767a", "f1jar5jt"],
|
|
48
|
+
B6of3ja: "f1hu3pq6",
|
|
49
|
+
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
50
|
+
jrapky: "f19f4twv",
|
|
51
|
+
Frg6f3: ["f1tyq0we", "f11qmguv"],
|
|
52
|
+
z8tnut: "f1ywm7hm",
|
|
53
|
+
z189sj: ["f7x41pl", "fruq291"],
|
|
54
|
+
Byoj8tv: "f14wxoun",
|
|
55
|
+
uwmqm3: ["fruq291", "f7x41pl"],
|
|
56
|
+
D0sxk3: "f16u1re",
|
|
57
|
+
t6yez3: "f1rw4040",
|
|
58
|
+
Jwef8y: "fjxutwb",
|
|
59
|
+
Bi91k9c: "f139oj5f",
|
|
60
|
+
Bk3fhr4: "f1jpd6y0",
|
|
61
|
+
Bmfj8id: "fuxngvv",
|
|
62
|
+
iro3zm: "fwiml72",
|
|
63
|
+
B2d53fq: "f1fg1p5m"
|
|
70
64
|
},
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
65
|
+
selected: {
|
|
66
|
+
De3pzq: "f1q9pm1r",
|
|
67
|
+
sj55zd: "f1qj7y59",
|
|
68
|
+
D0sxk3: "fgzdkf0",
|
|
69
|
+
t6yez3: "f15q0o9g",
|
|
70
|
+
Bsw6fvg: "f1rirnrt",
|
|
71
|
+
Bjwas2f: "f14pvji2",
|
|
72
|
+
Bn1d65q: ["f1xeojaw", "f1hodmrf"],
|
|
73
|
+
Bxeuatn: "fcbbwn3",
|
|
74
|
+
n51gp8: ["f1hodmrf", "f1xeojaw"],
|
|
75
|
+
Bbusuzp: "f1cg6951"
|
|
82
76
|
},
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
77
|
+
highContrast: {
|
|
78
|
+
Bjwas2f: "f14pvji2",
|
|
79
|
+
Bn1d65q: ["f1xeojaw", "f1hodmrf"],
|
|
80
|
+
Bxeuatn: "fcbbwn3",
|
|
81
|
+
n51gp8: ["f1hodmrf", "f1xeojaw"],
|
|
82
|
+
Bbusuzp: "fn0tkbb",
|
|
83
|
+
w76p1f: "f18rpr9v",
|
|
84
|
+
B3sm7at: "f5mt1fw",
|
|
85
|
+
fe9h6n: "f17188ff",
|
|
86
|
+
Bmhq1k7: ["fzyms9j", "f12bfk5t"],
|
|
87
|
+
E428ku: "f1ucftwv",
|
|
88
|
+
Bipfp3: ["f12bfk5t", "fzyms9j"],
|
|
89
|
+
nrfbsj: "f10s0nbj"
|
|
96
90
|
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
91
|
+
focusIndicator: {
|
|
92
|
+
Brovlpu: "ftqa4ok",
|
|
93
|
+
B486eqv: "f2hkw1w",
|
|
94
|
+
kdpuga: ["f1o2ludy", "f1kjnpwc"],
|
|
95
|
+
Bw81rd7: ["f1kjnpwc", "f1o2ludy"],
|
|
96
|
+
B6xbmo0: ["fxmnebo", "f1witrsb"],
|
|
97
|
+
dm238s: ["f1witrsb", "fxmnebo"],
|
|
98
|
+
B8q5s1w: "f1rzxaq5",
|
|
99
|
+
Bci5o5g: ["fipsau9", "f6jszy8"],
|
|
100
|
+
n8qw10: "f1emqxbc",
|
|
101
|
+
Bdrgwmp: ["f6jszy8", "fipsau9"],
|
|
102
|
+
Bfpq7zp: "fr1u5pk",
|
|
103
|
+
Bn4voq9: "f1p7hgxw",
|
|
104
|
+
g9k6zt: "f9znhxp",
|
|
105
|
+
j6ew2k: ["fvbipq7", "fvbipq7"],
|
|
106
|
+
Bhxq17a: "f1vjpng2"
|
|
113
107
|
},
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
108
|
+
large: {
|
|
109
|
+
z8tnut: "fclwglc",
|
|
110
|
+
z189sj: ["f1w3695s", "f1b0r8ql"],
|
|
111
|
+
Byoj8tv: "fywfov9",
|
|
112
|
+
uwmqm3: ["f1b0r8ql", "f1w3695s"]
|
|
119
113
|
}
|
|
120
114
|
}, {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
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;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".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;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1rzxaq5[data-fui-focus-visible]{border-top-color:var(--colorTransparentStroke);}", ".fipsau9[data-fui-focus-visible]{border-right-color:var(--colorTransparentStroke);}", ".f6jszy8[data-fui-focus-visible]{border-left-color:var(--colorTransparentStroke);}", ".f1emqxbc[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStroke);}", ".fr1u5pk[data-fui-focus-visible]{outline-color:var(--colorTransparentStroke);}", ".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fvbipq7[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", ".f1vjpng2[data-fui-focus-visible]{z-index:1;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".f1w3695s{padding-right:var(--spacingVerticalXXS);}", ".f1b0r8ql{padding-left:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}"],
|
|
116
|
+
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
|
+
m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
|
|
118
|
+
m: "(forced-colors: active)"
|
|
125
119
|
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
126
|
-
|
|
120
|
+
m: "(forced-colors: active)"
|
|
127
121
|
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
128
|
-
|
|
122
|
+
m: "(forced-colors: active)"
|
|
129
123
|
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
130
|
-
|
|
124
|
+
m: "(forced-colors: active)"
|
|
131
125
|
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
132
|
-
|
|
126
|
+
m: "(forced-colors: active)"
|
|
133
127
|
}], ["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
|
|
134
|
-
|
|
128
|
+
m: "(forced-colors: active)"
|
|
135
129
|
}], ["@media (forced-colors: active){.f14pvji2{border-top-color:Canvas;}}", {
|
|
136
|
-
|
|
130
|
+
m: "(forced-colors: active)"
|
|
137
131
|
}], ["@media (forced-colors: active){.f1xeojaw{border-right-color:Canvas;}.f1hodmrf{border-left-color:Canvas;}}", {
|
|
138
|
-
|
|
132
|
+
m: "(forced-colors: active)"
|
|
139
133
|
}], ["@media (forced-colors: active){.fcbbwn3{border-bottom-color:Canvas;}}", {
|
|
140
|
-
|
|
134
|
+
m: "(forced-colors: active)"
|
|
141
135
|
}], ["@media (forced-colors: active){.f1hodmrf{border-left-color:Canvas;}.f1xeojaw{border-right-color:Canvas;}}", {
|
|
142
|
-
|
|
136
|
+
m: "(forced-colors: active)"
|
|
143
137
|
}], ["@media (forced-colors: active){.fn0tkbb{color:CanvasText;}}", {
|
|
144
|
-
|
|
138
|
+
m: "(forced-colors: active)"
|
|
145
139
|
}], ["@media (forced-colors: active){.f18rpr9v:hover,.f18rpr9v :hover:active{forced-color-adjust:none;}}", {
|
|
146
|
-
|
|
140
|
+
m: "(forced-colors: active)"
|
|
147
141
|
}], ["@media (forced-colors: active){.f5mt1fw:hover,.f5mt1fw :hover:active{background-color:Highlight;}}", {
|
|
148
|
-
|
|
142
|
+
m: "(forced-colors: active)"
|
|
149
143
|
}], ["@media (forced-colors: active){.f17188ff:hover,.f17188ff :hover:active{border-top-color:Canvas;}}", {
|
|
150
|
-
|
|
144
|
+
m: "(forced-colors: active)"
|
|
151
145
|
}], ["@media (forced-colors: active){.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}}", {
|
|
152
|
-
|
|
146
|
+
m: "(forced-colors: active)"
|
|
153
147
|
}], ["@media (forced-colors: active){.f1ucftwv:hover,.f1ucftwv :hover:active{border-bottom-color:Canvas;}}", {
|
|
154
|
-
|
|
148
|
+
m: "(forced-colors: active)"
|
|
155
149
|
}], ["@media (forced-colors: active){.f12bfk5t:hover,.f12bfk5t :hover:active{border-left-color:Canvas;}.fzyms9j:hover,.fzyms9j :hover:active{border-right-color:Canvas;}}", {
|
|
156
|
-
|
|
150
|
+
m: "(forced-colors: active)"
|
|
157
151
|
}], ["@media (forced-colors: active){.f10s0nbj:hover,.f10s0nbj :hover:active{color:Canvas;}}", {
|
|
158
|
-
|
|
152
|
+
m: "(forced-colors: active)"
|
|
159
153
|
}]],
|
|
160
|
-
|
|
161
|
-
|
|
154
|
+
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
155
|
+
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
162
156
|
});
|
|
163
|
-
|
|
164
157
|
const usePopoverSurfaceStyles = /*#__PURE__*/react_1.__styles({
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
158
|
+
smallMedium: {
|
|
159
|
+
Bahqtrf: "fk6fouc",
|
|
160
|
+
Be2twd7: "fy9rknc",
|
|
161
|
+
Bhrd7zp: "figsok6",
|
|
162
|
+
Bg96gwp: "fwrc4pm"
|
|
170
163
|
},
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
164
|
+
large: {
|
|
165
|
+
Bahqtrf: "fk6fouc",
|
|
166
|
+
Be2twd7: "fkhj508",
|
|
167
|
+
Bhrd7zp: "figsok6",
|
|
168
|
+
Bg96gwp: "f1i3iumi"
|
|
176
169
|
}
|
|
177
170
|
}, {
|
|
178
|
-
|
|
171
|
+
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
|
|
179
172
|
});
|
|
180
173
|
/**
|
|
181
174
|
* Apply styling to the InfoButton slots based on the state
|
|
182
175
|
*/
|
|
183
|
-
|
|
184
|
-
|
|
185
176
|
const useInfoButtonStyles_unstable = state => {
|
|
186
177
|
const {
|
|
187
178
|
size
|
|
@@ -195,6 +186,5 @@ const useInfoButtonStyles_unstable = state => {
|
|
|
195
186
|
state.root.className = react_1.mergeClasses(exports.infoButtonClassNames.root, buttonStyles.base, buttonStyles.highContrast, buttonStyles.focusIndicator, open && buttonStyles.selected, size === 'large' && buttonStyles.large, state.root.className);
|
|
196
187
|
return state;
|
|
197
188
|
};
|
|
198
|
-
|
|
199
189
|
exports.useInfoButtonStyles_unstable = useInfoButtonStyles_unstable;
|
|
200
190
|
//# sourceMappingURL=useInfoButtonStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;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;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;EAAA;AAAA,EA0FhC;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 { createCustomFocusIndicatorStyle } 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\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground2,\n\n ...shorthands.overflow('hidden'),\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\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 ...shorthands.borderColor('Canvas'),\n color: 'Canvas',\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Canvas'),\n color: 'CanvasText',\n\n ':hover, :hover:active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Canvas'),\n color: 'Canvas',\n },\n },\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n outlineColor: tokens.colorTransparentStroke,\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\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/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useInfoButton_unstable = exports.useInfoButtonStyles_unstable = exports.renderInfoButton_unstable = exports.infoButtonClassNames = exports.InfoButton = void 0;
|
|
7
|
-
|
|
8
7
|
var InfoButton_1 = /*#__PURE__*/require("./InfoButton");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "InfoButton", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,8BAAU;EAAA;AAAA;AACVF;EAAAC;EAAAC;IAAA,wCAAoB;EAAA;AAAA;AACpBF;EAAAC;EAAAC;IAAA,6CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,gDAA4B;EAAA;AAAA;AAC5BF;EAAAC;EAAAC;IAAA,0CAAsB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-infobutton/src/index.ts"],"sourcesContent":["export {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\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.5",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
-
"@fluentui/scripts": "
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
31
|
+
"@fluentui/scripts": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-popover": "^9.3.
|
|
36
|
-
"@fluentui/react-tabster": "^9.3.
|
|
35
|
+
"@fluentui/react-popover": "^9.3.6",
|
|
36
|
+
"@fluentui/react-tabster": "^9.3.5",
|
|
37
37
|
"@fluentui/react-theme": "^9.1.5",
|
|
38
|
-
"@fluentui/react-utilities": "^9.3.
|
|
39
|
-
"@griffel/react": "^1.
|
|
38
|
+
"@fluentui/react-utilities": "^9.3.1",
|
|
39
|
+
"@griffel/react": "^1.5.2",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|