@fluentui/react-infobutton 9.0.0-beta.11 → 9.0.0-beta.110
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.md +1224 -5
- package/README.md +3 -24
- package/dist/index.d.ts +115 -9
- package/lib/InfoButton.js +1 -2
- package/lib/InfoButton.js.map +1 -1
- package/lib/InfoLabel.js +1 -0
- package/lib/InfoLabel.js.map +1 -0
- package/lib/components/InfoButton/DefaultInfoButtonIcons.js +3 -4
- package/lib/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib/components/InfoButton/InfoButton.js +8 -7
- package/lib/components/InfoButton/InfoButton.js.map +1 -1
- package/lib/components/InfoButton/InfoButton.types.js +5 -2
- package/lib/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib/components/InfoButton/index.js +4 -6
- package/lib/components/InfoButton/index.js.map +1 -1
- package/lib/components/InfoButton/renderInfoButton.js +14 -16
- package/lib/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButton.js +71 -50
- package/lib/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib/components/InfoButton/useInfoButtonStyles.styles.js +181 -0
- package/lib/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -0
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js +99 -0
- package/lib/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/InfoLabel/InfoLabel.js +15 -0
- package/lib/components/InfoLabel/InfoLabel.js.map +1 -0
- package/lib/components/InfoLabel/InfoLabel.types.js +5 -0
- package/lib/components/InfoLabel/InfoLabel.types.js.map +1 -0
- package/lib/components/InfoLabel/index.js +4 -0
- package/lib/components/InfoLabel/index.js.map +1 -0
- package/lib/components/InfoLabel/renderInfoLabel.js +15 -0
- package/lib/components/InfoLabel/renderInfoLabel.js.map +1 -0
- package/lib/components/InfoLabel/useInfoLabel.js +80 -0
- package/lib/components/InfoLabel/useInfoLabel.js.map +1 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.js +50 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js +45 -0
- package/lib/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/InfoButton.js +26 -6
- package/lib-commonjs/InfoButton.js.map +1 -1
- package/lib-commonjs/InfoLabel.js +28 -0
- package/lib-commonjs/InfoLabel.js.map +1 -0
- package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js +22 -8
- package/lib-commonjs/components/InfoButton/DefaultInfoButtonIcons.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.js +18 -16
- package/lib-commonjs/components/InfoButton/InfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/InfoButton.types.js +6 -4
- package/lib-commonjs/components/InfoButton/InfoButton.types.js.map +1 -1
- package/lib-commonjs/components/InfoButton/index.js +29 -10
- package/lib-commonjs/components/InfoButton/index.js.map +1 -1
- package/lib-commonjs/components/InfoButton/renderInfoButton.js +21 -24
- package/lib-commonjs/components/InfoButton/renderInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButton.js +80 -65
- package/lib-commonjs/components/InfoButton/useInfoButton.js.map +1 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js +350 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.js.map +1 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js +113 -0
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/InfoLabel.js +22 -0
- package/lib-commonjs/components/InfoLabel/InfoLabel.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/InfoLabel.types.js +8 -0
- package/lib-commonjs/components/InfoLabel/InfoLabel.types.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/index.js +31 -0
- package/lib-commonjs/components/InfoLabel/index.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/renderInfoLabel.js +21 -0
- package/lib-commonjs/components/InfoLabel/renderInfoLabel.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabel.js +81 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabel.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js +68 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.js.map +1 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js +57 -0
- package/lib-commonjs/components/InfoLabel/useInfoLabelStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/index.js +41 -35
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +22 -33
- package/CHANGELOG.json +0 -342
- package/lib/components/InfoButton/useInfoButtonStyles.js +0 -153
- package/lib/components/InfoButton/useInfoButtonStyles.js.map +0 -1
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js +0 -160
- package/lib-commonjs/components/InfoButton/useInfoButtonStyles.js.map +0 -1
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "useInfoLabel_unstable", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function() {
|
|
9
|
+
return useInfoLabel_unstable;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
+
const _reactlabel = require("@fluentui/react-label");
|
|
15
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
|
+
const _InfoButton = require("../InfoButton/InfoButton");
|
|
17
|
+
const useInfoLabel_unstable = (props, ref)=>{
|
|
18
|
+
const { root: rootShorthand, label: labelShorthand, infoButton: infoButtonShorthand, info, size, className, style, ...labelProps } = props;
|
|
19
|
+
const baseId = (0, _reactutilities.useId)('infolabel-');
|
|
20
|
+
const [open, setOpen] = _react.useState(false);
|
|
21
|
+
const root = _reactutilities.slot.always(rootShorthand, {
|
|
22
|
+
defaultProps: {
|
|
23
|
+
className,
|
|
24
|
+
style
|
|
25
|
+
},
|
|
26
|
+
elementType: 'span'
|
|
27
|
+
});
|
|
28
|
+
const label = _reactutilities.slot.always(labelShorthand, {
|
|
29
|
+
defaultProps: {
|
|
30
|
+
id: baseId + '__label',
|
|
31
|
+
ref,
|
|
32
|
+
size,
|
|
33
|
+
...labelProps
|
|
34
|
+
},
|
|
35
|
+
elementType: _reactlabel.Label
|
|
36
|
+
});
|
|
37
|
+
const infoButton = _reactutilities.slot.optional(infoButtonShorthand, {
|
|
38
|
+
renderByDefault: !!info,
|
|
39
|
+
defaultProps: {
|
|
40
|
+
id: baseId + '__infoButton',
|
|
41
|
+
size,
|
|
42
|
+
info
|
|
43
|
+
},
|
|
44
|
+
elementType: _InfoButton.InfoButton
|
|
45
|
+
});
|
|
46
|
+
const infoButtonPopover = _reactutilities.slot.always(infoButton === null || infoButton === void 0 ? void 0 : infoButton.popover, {
|
|
47
|
+
elementType: 'div'
|
|
48
|
+
});
|
|
49
|
+
infoButtonPopover.onOpenChange = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(infoButtonPopover.onOpenChange, (e, data)=>{
|
|
50
|
+
setOpen(data.open);
|
|
51
|
+
}));
|
|
52
|
+
if (infoButton) {
|
|
53
|
+
var _infoButton, _arialabelledby;
|
|
54
|
+
infoButton.popover = infoButtonPopover;
|
|
55
|
+
infoButton.info = _reactutilities.slot.optional(infoButton === null || infoButton === void 0 ? void 0 : infoButton.info, {
|
|
56
|
+
defaultProps: {
|
|
57
|
+
id: baseId + '__info'
|
|
58
|
+
},
|
|
59
|
+
elementType: 'div'
|
|
60
|
+
});
|
|
61
|
+
var _;
|
|
62
|
+
(_ = (_infoButton = infoButton)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _infoButton[_arialabelledby] = `${label.id} ${infoButton.id}`;
|
|
63
|
+
if (open) {
|
|
64
|
+
var _infoButton_info;
|
|
65
|
+
var _root, _ariaowns;
|
|
66
|
+
var _1;
|
|
67
|
+
(_1 = (_root = root)[_ariaowns = 'aria-owns']) !== null && _1 !== void 0 ? _1 : _root[_ariaowns] = (_infoButton_info = infoButton.info) === null || _infoButton_info === void 0 ? void 0 : _infoButton_info.id;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
return {
|
|
71
|
+
size,
|
|
72
|
+
components: {
|
|
73
|
+
root: 'span',
|
|
74
|
+
label: _reactlabel.Label,
|
|
75
|
+
infoButton: _InfoButton.InfoButton
|
|
76
|
+
},
|
|
77
|
+
root,
|
|
78
|
+
label,
|
|
79
|
+
infoButton
|
|
80
|
+
};
|
|
81
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabel.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport * as React from 'react';\n\nimport { Label } from '@fluentui/react-label';\nimport { mergeCallbacks, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { InfoButton } from '../InfoButton/InfoButton';\nimport type { InfoLabelProps, InfoLabelState } from './InfoLabel.types';\n\n/**\n * Create the state required to render InfoLabel.\n *\n * The returned state can be modified with hooks such as useInfoLabelStyles_unstable,\n * before being passed to renderInfoLabel_unstable.\n *\n * @param props - props from this instance of InfoLabel\n * @param ref - reference to label element of InfoLabel\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref<HTMLLabelElement>): InfoLabelState => {\n const {\n root: rootShorthand,\n label: labelShorthand,\n infoButton: infoButtonShorthand,\n info,\n size,\n className,\n style,\n ...labelProps\n } = props;\n const baseId = useId('infolabel-');\n const [open, setOpen] = React.useState(false);\n\n const root = slot.always(rootShorthand, {\n defaultProps: {\n className,\n style,\n },\n elementType: 'span',\n });\n\n const label = slot.always(labelShorthand, {\n defaultProps: {\n id: baseId + '__label',\n ref,\n size,\n ...labelProps,\n },\n elementType: Label,\n });\n\n const infoButton = slot.optional(infoButtonShorthand, {\n renderByDefault: !!info,\n defaultProps: {\n id: baseId + '__infoButton',\n size,\n info,\n },\n elementType: InfoButton,\n });\n\n const infoButtonPopover = slot.always(infoButton?.popover, {\n elementType: 'div',\n });\n infoButtonPopover.onOpenChange = useEventCallback(\n mergeCallbacks(infoButtonPopover.onOpenChange, (e, data) => {\n setOpen(data.open);\n }),\n );\n\n if (infoButton) {\n infoButton.popover = infoButtonPopover;\n infoButton.info = slot.optional(infoButton?.info, {\n defaultProps: {\n id: baseId + '__info',\n },\n elementType: 'div',\n });\n\n infoButton['aria-labelledby'] ??= `${label.id} ${infoButton.id}`;\n\n if (open) {\n root['aria-owns'] ??= infoButton.info?.id;\n }\n }\n\n return {\n size,\n components: {\n root: 'span',\n label: Label,\n infoButton: InfoButton,\n },\n root,\n label,\n infoButton,\n };\n};\n"],"names":["React","Label","mergeCallbacks","useEventCallback","useId","slot","InfoButton","useInfoLabel_unstable","props","ref","root","rootShorthand","label","labelShorthand","infoButton","infoButtonShorthand","info","size","className","style","labelProps","baseId","open","setOpen","useState","always","defaultProps","elementType","id","optional","renderByDefault","infoButtonPopover","popover","onOpenChange","e","data","components"],"mappings":"AAAA,mDAAmD,GAEnD;;;;;+BAoBaO;;;;;;;iEAlBU,QAAQ;4BAET,wBAAwB;gCACgB,4BAA4B;4BAC/D,2BAA2B;AAc/C,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EACJC,MAAMC,aAAa,EACnBC,OAAOC,cAAc,EACrBC,YAAYC,mBAAmB,EAC/BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,KAAK,EACL,GAAGC,YACJ,GAAGZ;IACJ,MAAMa,aAASjB,qBAAAA,EAAM;IACrB,MAAM,CAACkB,MAAMC,QAAQ,GAAGvB,OAAMwB,QAAQ,CAAC;IAEvC,MAAMd,OAAOL,oBAAAA,CAAKoB,MAAM,CAACd,eAAe;QACtCe,cAAc;YACZR;YACAC;QACF;QACAQ,aAAa;IACf;IAEA,MAAMf,QAAQP,oBAAAA,CAAKoB,MAAM,CAACZ,gBAAgB;QACxCa,cAAc;YACZE,IAAIP,SAAS;YACbZ;YACAQ;YACA,GAAGG,UAAU;QACf;QACAO,aAAa1B,iBAAAA;IACf;IAEA,MAAMa,aAAaT,oBAAAA,CAAKwB,QAAQ,CAACd,qBAAqB;QACpDe,iBAAiB,CAAC,CAACd;QACnBU,cAAc;YACZE,IAAIP,SAAS;YACbJ;YACAD;QACF;QACAW,aAAarB,sBAAAA;IACf;IAEA,MAAMyB,oBAAoB1B,oBAAAA,CAAKoB,MAAM,CAACX,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYkB,OAAO,EAAE;QACzDL,aAAa;IACf;IACAI,kBAAkBE,YAAY,OAAG9B,gCAAAA,MAC/BD,8BAAAA,EAAe6B,kBAAkBE,YAAY,EAAE,CAACC,GAAGC;QACjDZ,QAAQY,KAAKb,IAAI;IACnB;IAGF,IAAIR,YAAY;YASdA,aAAW;QARXA,WAAWkB,OAAO,GAAGD;QACrBjB,WAAWE,IAAI,GAAGX,oBAAAA,CAAKwB,QAAQ,CAACf,eAAAA,QAAAA,eAAAA,KAAAA,IAAAA,KAAAA,IAAAA,WAAYE,IAAI,EAAE;YAChDU,cAAc;gBACZE,IAAIP,SAAS;YACf;YACAM,aAAa;QACf;;QAEAb,CAAAA,IAAAA,CAAAA,cAAAA,UAAAA,CAAU,CAAC,kBAAA,kBAAA,AAAkB,MAAA,QAAA,MAAA,KAAA,IAAA,IAA7BA,WAAU,CAAC,gBAAkB,GAAK,GAAGF,MAAMgB,EAAE,CAAC,CAAC,EAAEd,WAAWc,EAAE,EAAE;QAEhE,IAAIN,MAAM;gBACcR;gBAAtBJ,OAAK;;YAALA,CAAAA,KAAAA,CAAAA,QAAAA,IAAAA,CAAI,CAAC,YAAA,YAAA,AAAY,MAAA,QAAA,OAAA,KAAA,IAAA,KAAjBA,KAAI,CAAC,UAAY,GAAA,CAAKI,mBAAAA,WAAWE,IAAAA,AAAI,MAAA,QAAfF,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBc,EAAE;QAC3C;IACF;IAEA,OAAO;QACLX;QACAmB,YAAY;YACV1B,MAAM;YACNE,OAAOX,iBAAAA;YACPa,YAAYR,sBAAAA;QACd;QACAI;QACAE;QACAE;IACF;AACF,EAAE"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
infoLabelClassNames: function() {
|
|
14
|
+
return infoLabelClassNames;
|
|
15
|
+
},
|
|
16
|
+
useInfoLabelStyles_unstable: function() {
|
|
17
|
+
return useInfoLabelStyles_unstable;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
const _react = require("@griffel/react");
|
|
21
|
+
const infoLabelClassNames = {
|
|
22
|
+
root: 'fui-InfoLabel',
|
|
23
|
+
label: 'fui-InfoLabel__label',
|
|
24
|
+
infoButton: 'fui-InfoLabel__infoButton'
|
|
25
|
+
};
|
|
26
|
+
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
27
|
+
base: {
|
|
28
|
+
ha4doy: "f12kltsn",
|
|
29
|
+
Bceei9c: "fpo1scq",
|
|
30
|
+
sj55zd: "f1ym3bx4"
|
|
31
|
+
}
|
|
32
|
+
}, {
|
|
33
|
+
d: [
|
|
34
|
+
".f12kltsn{vertical-align:top;}",
|
|
35
|
+
".fpo1scq{cursor:inherit;}",
|
|
36
|
+
".f1ym3bx4{color:inherit;}"
|
|
37
|
+
]
|
|
38
|
+
});
|
|
39
|
+
const useInfoButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
40
|
+
base: {
|
|
41
|
+
ha4doy: "f12kltsn",
|
|
42
|
+
B6of3ja: "f1bmzb36",
|
|
43
|
+
jrapky: "f1nyzk09"
|
|
44
|
+
},
|
|
45
|
+
large: {
|
|
46
|
+
B6of3ja: "fkrn0sh",
|
|
47
|
+
jrapky: "fmxx68s"
|
|
48
|
+
}
|
|
49
|
+
}, {
|
|
50
|
+
d: [
|
|
51
|
+
".f12kltsn{vertical-align:top;}",
|
|
52
|
+
".f1bmzb36{margin-top:calc(0px - var(--spacingVerticalXXS));}",
|
|
53
|
+
".f1nyzk09{margin-bottom:calc(0px - var(--spacingVerticalXXS));}",
|
|
54
|
+
".fkrn0sh{margin-top:-1px;}",
|
|
55
|
+
".fmxx68s{margin-bottom:-1px;}"
|
|
56
|
+
]
|
|
57
|
+
});
|
|
58
|
+
const useInfoLabelStyles_unstable = (state)=>{
|
|
59
|
+
// eslint-disable-next-line react-compiler/react-compiler
|
|
60
|
+
state.root.className = (0, _react.mergeClasses)(infoLabelClassNames.root, state.root.className);
|
|
61
|
+
const labelStyles = useLabelStyles();
|
|
62
|
+
state.label.className = (0, _react.mergeClasses)(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
63
|
+
const infoButtonStyles = useInfoButtonStyles();
|
|
64
|
+
if (state.infoButton) {
|
|
65
|
+
state.infoButton.className = (0, _react.mergeClasses)(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
66
|
+
}
|
|
67
|
+
return state;
|
|
68
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useInfoLabelStyles.styles.js"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const infoLabelClassNames = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton'\n};\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit'\n }\n});\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`\n },\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px'\n }\n});\n/**\n * Apply styling to the InfoLabel slots based on the state\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */ export const useInfoLabelStyles_unstable = (state)=>{\n // eslint-disable-next-line react-compiler/react-compiler\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);\n }\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","ha4doy","Bceei9c","sj55zd","d","useInfoButtonStyles","B6of3ja","jrapky","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA,mDAAA,GAAsD,YAAY;;;;;;;;;;;;uBAK9B;;;+BA6BQ;eAA3BiB;;;uBAhCwB,gBAAgB;AAG9C,MAAMd,sBAAsB;IACnCC,IAAI,EAAE,eAAe;IACrBC,KAAK,EAAE,sBAAsB;IAC7BC,UAAU,EAAE;AAChB,CAAC;AACD,MAAMC,cAAc,GAAA,WAAA,GAAGN,mBAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAMtB,CAAC;AACF,MAAMC,mBAAmB,GAAA,WAAA,OAAGZ,eAAA,EAAA;IAAAO,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAH,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY3B,CAAC;AAKS,qCAAqCM,KAAK,IAAG;IACpD,yDAAA;IACAA,KAAK,CAACd,IAAI,CAACe,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACC,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACe,SAAS,CAAC;IACnF,MAAMC,WAAW,GAAGb,cAAc,CAAC,CAAC;IACpCW,KAAK,CAACb,KAAK,CAACc,SAAS,GAAGjB,uBAAY,EAACC,mBAAmB,CAACE,KAAK,EAAEe,WAAW,CAACZ,IAAI,EAAEU,KAAK,CAACb,KAAK,CAACc,SAAS,CAAC;IACxG,MAAME,gBAAgB,GAAGR,mBAAmB,CAAC,CAAC;IAC9C,IAAIK,KAAK,CAACZ,UAAU,EAAE;QAClBY,KAAK,CAACZ,UAAU,CAACa,SAAS,OAAGjB,mBAAY,EAACC,mBAAmB,CAACG,UAAU,EAAEe,gBAAgB,CAACb,IAAI,EAAEU,KAAK,CAACI,IAAI,KAAK,OAAO,IAAID,gBAAgB,CAACL,KAAK,EAAEE,KAAK,CAACZ,UAAU,CAACa,SAAS,CAAC;IAClL;IACA,OAAOD,KAAK;AAChB,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ 'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
infoLabelClassNames: function() {
|
|
14
|
+
return infoLabelClassNames;
|
|
15
|
+
},
|
|
16
|
+
useInfoLabelStyles_unstable: function() {
|
|
17
|
+
return useInfoLabelStyles_unstable;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
+
const _react = require("@griffel/react");
|
|
22
|
+
const infoLabelClassNames = {
|
|
23
|
+
root: 'fui-InfoLabel',
|
|
24
|
+
label: 'fui-InfoLabel__label',
|
|
25
|
+
infoButton: 'fui-InfoLabel__infoButton'
|
|
26
|
+
};
|
|
27
|
+
const useLabelStyles = (0, _react.makeStyles)({
|
|
28
|
+
base: {
|
|
29
|
+
verticalAlign: 'top',
|
|
30
|
+
cursor: 'inherit',
|
|
31
|
+
color: 'inherit'
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
const useInfoButtonStyles = (0, _react.makeStyles)({
|
|
35
|
+
base: {
|
|
36
|
+
verticalAlign: 'top',
|
|
37
|
+
// Negative margin to align with the text
|
|
38
|
+
marginTop: `calc(0px - ${_reacttheme.tokens.spacingVerticalXXS})`,
|
|
39
|
+
marginBottom: `calc(0px - ${_reacttheme.tokens.spacingVerticalXXS})`
|
|
40
|
+
},
|
|
41
|
+
large: {
|
|
42
|
+
// Negative margin to align with the text
|
|
43
|
+
marginTop: '-1px',
|
|
44
|
+
marginBottom: '-1px'
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
const useInfoLabelStyles_unstable = (state)=>{
|
|
48
|
+
// eslint-disable-next-line react-compiler/react-compiler
|
|
49
|
+
state.root.className = (0, _react.mergeClasses)(infoLabelClassNames.root, state.root.className);
|
|
50
|
+
const labelStyles = useLabelStyles();
|
|
51
|
+
state.label.className = (0, _react.mergeClasses)(infoLabelClassNames.label, labelStyles.base, state.label.className);
|
|
52
|
+
const infoButtonStyles = useInfoButtonStyles();
|
|
53
|
+
if (state.infoButton) {
|
|
54
|
+
state.infoButton.className = (0, _react.mergeClasses)(infoLabelClassNames.infoButton, infoButtonStyles.base, state.size === 'large' && infoButtonStyles.large, state.infoButton.className);
|
|
55
|
+
}
|
|
56
|
+
return state;
|
|
57
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/InfoLabel/useInfoLabelStyles.styles.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\n\n'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InfoLabelSlots, InfoLabelState } from './InfoLabel.types';\n\n/**\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const infoLabelClassNames: SlotClassNames<InfoLabelSlots> = {\n root: 'fui-InfoLabel',\n label: 'fui-InfoLabel__label',\n infoButton: 'fui-InfoLabel__infoButton',\n};\n\nconst useLabelStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n cursor: 'inherit',\n color: 'inherit',\n },\n});\n\nconst useInfoButtonStyles = makeStyles({\n base: {\n verticalAlign: 'top',\n\n // Negative margin to align with the text\n marginTop: `calc(0px - ${tokens.spacingVerticalXXS})`,\n marginBottom: `calc(0px - ${tokens.spacingVerticalXXS})`,\n },\n\n large: {\n // Negative margin to align with the text\n marginTop: '-1px',\n marginBottom: '-1px',\n },\n});\n\n/**\n * Apply styling to the InfoLabel slots based on the state\n *\n * @deprecated use {@link @fluentui/react-components#InfoLabel} from `\\@fluentui/react-components` or `\\@fluentui/react-infolabel` instead\n */\nexport const useInfoLabelStyles_unstable = (state: InfoLabelState): InfoLabelState => {\n // eslint-disable-next-line react-compiler/react-compiler\n state.root.className = mergeClasses(infoLabelClassNames.root, state.root.className);\n\n const labelStyles = useLabelStyles();\n state.label.className = mergeClasses(infoLabelClassNames.label, labelStyles.base, state.label.className);\n\n const infoButtonStyles = useInfoButtonStyles();\n if (state.infoButton) {\n state.infoButton.className = mergeClasses(\n infoLabelClassNames.infoButton,\n infoButtonStyles.base,\n state.size === 'large' && infoButtonStyles.large,\n state.infoButton.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","infoLabelClassNames","root","label","infoButton","useLabelStyles","base","verticalAlign","cursor","color","useInfoButtonStyles","marginTop","spacingVerticalXXS","marginBottom","large","useInfoLabelStyles_unstable","state","className","labelStyles","infoButtonStyles","size"],"mappings":"AAAA,mDAAmD,GAEnD;;;;;;;;;;;;uBAUaG;;;+BAmCAc;eAAAA;;;4BA3CU,wBAAwB;uBAEN,iBAAiB;AAMnD,MAAMd,sBAAsD;IACjEC,MAAM;IACNC,OAAO;IACPC,YAAY;AACd,EAAE;AAEF,MAAMC,qBAAiBN,iBAAAA,EAAW;IAChCO,MAAM;QACJC,eAAe;QACfC,QAAQ;QACRC,OAAO;IACT;AACF;AAEA,MAAMC,0BAAsBX,iBAAAA,EAAW;IACrCO,MAAM;QACJC,eAAe;QAEf,yCAAyC;QACzCI,WAAW,CAAC,WAAW,EAAEb,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;QACrDC,cAAc,CAAC,WAAW,EAAEf,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;IAC1D;IAEAE,OAAO;QACL,yCAAyC;QACzCH,WAAW;QACXE,cAAc;IAChB;AACF;AAOO,oCAAoC,CAACG;IAC1C,yDAAyD;IACzDA,MAAMd,IAAI,CAACe,SAAS,OAAGjB,mBAAAA,EAAaC,oBAAoBC,IAAI,EAAEc,MAAMd,IAAI,CAACe,SAAS;IAElF,MAAMC,cAAcb;IACpBW,MAAMb,KAAK,CAACc,SAAS,OAAGjB,mBAAAA,EAAaC,oBAAoBE,KAAK,EAAEe,YAAYZ,IAAI,EAAEU,MAAMb,KAAK,CAACc,SAAS;IAEvG,MAAME,mBAAmBT;IACzB,IAAIM,MAAMZ,UAAU,EAAE;QACpBY,MAAMZ,UAAU,CAACa,SAAS,OAAGjB,mBAAAA,EAC3BC,oBAAoBG,UAAU,EAC9Be,iBAAiBb,IAAI,EACrBU,MAAMI,IAAI,KAAK,WAAWD,iBAAiBL,KAAK,EAChDE,MAAMZ,UAAU,CAACa,SAAS;IAE9B;IAEA,OAAOD;AACT,EAAE"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,38 +1,44 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-deprecated */ "use strict";
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
InfoButton: function() {
|
|
13
|
+
return _InfoButton.InfoButton;
|
|
14
|
+
},
|
|
15
|
+
InfoLabel: function() {
|
|
16
|
+
return _InfoLabel.InfoLabel;
|
|
17
|
+
},
|
|
18
|
+
infoButtonClassNames: function() {
|
|
19
|
+
return _InfoButton.infoButtonClassNames;
|
|
20
|
+
},
|
|
21
|
+
infoLabelClassNames: function() {
|
|
22
|
+
return _InfoLabel.infoLabelClassNames;
|
|
23
|
+
},
|
|
24
|
+
renderInfoButton_unstable: function() {
|
|
25
|
+
return _InfoButton.renderInfoButton_unstable;
|
|
26
|
+
},
|
|
27
|
+
renderInfoLabel_unstable: function() {
|
|
28
|
+
return _InfoLabel.renderInfoLabel_unstable;
|
|
29
|
+
},
|
|
30
|
+
useInfoButtonStyles_unstable: function() {
|
|
31
|
+
return _InfoButton.useInfoButtonStyles_unstable;
|
|
32
|
+
},
|
|
33
|
+
useInfoButton_unstable: function() {
|
|
34
|
+
return _InfoButton.useInfoButton_unstable;
|
|
35
|
+
},
|
|
36
|
+
useInfoLabelStyles_unstable: function() {
|
|
37
|
+
return _InfoLabel.useInfoLabelStyles_unstable;
|
|
38
|
+
},
|
|
39
|
+
useInfoLabel_unstable: function() {
|
|
40
|
+
return _InfoLabel.useInfoLabel_unstable;
|
|
41
|
+
}
|
|
13
42
|
});
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
get: function () {
|
|
17
|
-
return InfoButton_1.infoButtonClassNames;
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
Object.defineProperty(exports, "renderInfoButton_unstable", {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function () {
|
|
23
|
-
return InfoButton_1.renderInfoButton_unstable;
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
Object.defineProperty(exports, "useInfoButtonStyles_unstable", {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () {
|
|
29
|
-
return InfoButton_1.useInfoButtonStyles_unstable;
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
Object.defineProperty(exports, "useInfoButton_unstable", {
|
|
33
|
-
enumerable: true,
|
|
34
|
-
get: function () {
|
|
35
|
-
return InfoButton_1.useInfoButton_unstable;
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
//# sourceMappingURL=index.js.map
|
|
43
|
+
const _InfoButton = require("./InfoButton");
|
|
44
|
+
const _InfoLabel = require("./InfoLabel");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nexport {\n InfoButton,\n infoButtonClassNames,\n renderInfoButton_unstable,\n useInfoButtonStyles_unstable,\n useInfoButton_unstable,\n} from './InfoButton';\nexport type { InfoButtonProps, InfoButtonSlots, InfoButtonState } from './InfoButton';\nexport {\n InfoLabel,\n infoLabelClassNames,\n renderInfoLabel_unstable,\n useInfoLabelStyles_unstable,\n useInfoLabel_unstable,\n} from './InfoLabel';\nexport type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from './InfoLabel';\n"],"names":["InfoButton","infoButtonClassNames","renderInfoButton_unstable","useInfoButtonStyles_unstable","useInfoButton_unstable","InfoLabel","infoLabelClassNames","renderInfoLabel_unstable","useInfoLabelStyles_unstable","useInfoLabel_unstable"],"mappings":"AAAA,mDAAmD,GACnD;;;;;;;;;;;;eACEA,sBAAU;;IAQVK;mCAAS;;;eAPTJ,gCAAoB;;uBAQD;eAAnBK;;IAPAJ;oDAAyB;;;eAQzBK,mCAAwB;;;eAPxBJ,wCAA4B;;;eAC5BC,kCAAsB;;;eAOtBI,sCAA2B;;;eAC3BC,gCAAqB;;;4BAPhB,eAAe;2BAQf,cAAc"}
|
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.110",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -11,40 +11,22 @@
|
|
|
11
11
|
"url": "https://github.com/microsoft/fluentui"
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
|
-
"scripts": {
|
|
15
|
-
"build": "just-scripts build",
|
|
16
|
-
"bundle-size": "bundle-size measure",
|
|
17
|
-
"clean": "just-scripts clean",
|
|
18
|
-
"code-style": "just-scripts code-style",
|
|
19
|
-
"just": "just-scripts",
|
|
20
|
-
"lint": "just-scripts lint",
|
|
21
|
-
"test": "jest --passWithNoTests",
|
|
22
|
-
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
|
|
23
|
-
"type-check": "tsc -b tsconfig.json",
|
|
24
|
-
"storybook": "start-storybook",
|
|
25
|
-
"start": "yarn storybook"
|
|
26
|
-
},
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"@fluentui/eslint-plugin": "*",
|
|
29
|
-
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
31
|
-
"@fluentui/scripts-api-extractor": "*",
|
|
32
|
-
"@fluentui/scripts-tasks": "*"
|
|
33
|
-
},
|
|
34
14
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-icons": "^2.0.
|
|
36
|
-
"@fluentui/react-
|
|
37
|
-
"@fluentui/react-
|
|
38
|
-
"@fluentui/react-
|
|
39
|
-
"@fluentui/react-
|
|
40
|
-
"@
|
|
41
|
-
"
|
|
15
|
+
"@fluentui/react-icons": "^2.0.237",
|
|
16
|
+
"@fluentui/react-label": "^9.3.14",
|
|
17
|
+
"@fluentui/react-popover": "^9.13.1",
|
|
18
|
+
"@fluentui/react-tabster": "^9.26.12",
|
|
19
|
+
"@fluentui/react-theme": "^9.2.1",
|
|
20
|
+
"@fluentui/react-utilities": "^9.26.1",
|
|
21
|
+
"@fluentui/react-jsx-runtime": "^9.4.0",
|
|
22
|
+
"@griffel/react": "^1.5.32",
|
|
23
|
+
"@swc/helpers": "^0.5.1"
|
|
42
24
|
},
|
|
43
25
|
"peerDependencies": {
|
|
44
|
-
"@types/react": ">=16.
|
|
45
|
-
"@types/react-dom": ">=16.
|
|
46
|
-
"react": ">=16.
|
|
47
|
-
"react-dom": ">=16.
|
|
26
|
+
"@types/react": ">=16.14.0 <20.0.0",
|
|
27
|
+
"@types/react-dom": ">=16.9.0 <20.0.0",
|
|
28
|
+
"react": ">=16.14.0 <20.0.0",
|
|
29
|
+
"react-dom": ">=16.14.0 <20.0.0"
|
|
48
30
|
},
|
|
49
31
|
"beachball": {
|
|
50
32
|
"disallowedChangeTypes": [
|
|
@@ -56,9 +38,16 @@
|
|
|
56
38
|
"exports": {
|
|
57
39
|
".": {
|
|
58
40
|
"types": "./dist/index.d.ts",
|
|
41
|
+
"node": "./lib-commonjs/index.js",
|
|
59
42
|
"import": "./lib/index.js",
|
|
60
43
|
"require": "./lib-commonjs/index.js"
|
|
61
44
|
},
|
|
62
45
|
"./package.json": "./package.json"
|
|
63
|
-
}
|
|
46
|
+
},
|
|
47
|
+
"files": [
|
|
48
|
+
"*.md",
|
|
49
|
+
"dist/*.d.ts",
|
|
50
|
+
"lib",
|
|
51
|
+
"lib-commonjs"
|
|
52
|
+
]
|
|
64
53
|
}
|