@hh.ru/magritte-ui-form-label 8.1.116 → 8.1.118
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/FormLabel.d.ts +1 -1
- package/FormLabel.js +108 -40
- package/FormLabel.js.map +1 -1
- package/index.css +663 -663
- package/index.d.ts +2 -2
- package/index.mock.d.ts +1 -1
- package/index.mock.js +2 -2
- package/index.mock.js.map +1 -1
- package/package.json +16 -15
package/FormLabel.d.ts
CHANGED
package/FormLabel.js
CHANGED
|
@@ -13,49 +13,117 @@ import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
|
13
13
|
import { Tooltip } from '@hh.ru/magritte-ui-tooltip';
|
|
14
14
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
15
15
|
|
|
16
|
-
var styles = {"form-label":"magritte-form-label___Yzcxs_8-1-
|
|
16
|
+
var styles = {"form-label":"magritte-form-label___Yzcxs_8-1-118","formLabel":"magritte-form-label___Yzcxs_8-1-118","content":"magritte-content___o4wkg_8-1-118","postfix":"magritte-postfix___UBcl3_8-1-118","icon":"magritte-icon___nwksH_8-1-118","style-text__primary":"magritte-style-text__primary___O5HzE_8-1-118","styleTextPrimary":"magritte-style-text__primary___O5HzE_8-1-118","form-label_disabled":"magritte-form-label_disabled___rq0Rq_8-1-118","formLabelDisabled":"magritte-form-label_disabled___rq0Rq_8-1-118","style-text__secondary":"magritte-style-text__secondary___Uc8qw_8-1-118","styleTextSecondary":"magritte-style-text__secondary___Uc8qw_8-1-118","style-text__tertiary":"magritte-style-text__tertiary___4Tv0c_8-1-118","styleTextTertiary":"magritte-style-text__tertiary___4Tv0c_8-1-118","style-text__dense":"magritte-style-text__dense___Dv3D5_8-1-118","styleTextDense":"magritte-style-text__dense___Dv3D5_8-1-118","style-text__accent":"magritte-style-text__accent___DO4-g_8-1-118","styleTextAccent":"magritte-style-text__accent___DO4-g_8-1-118","style-text__accent-secondary":"magritte-style-text__accent-secondary___vZP4l_8-1-118","styleTextAccentSecondary":"magritte-style-text__accent-secondary___vZP4l_8-1-118","style-text__positive":"magritte-style-text__positive___A7nAW_8-1-118","styleTextPositive":"magritte-style-text__positive___A7nAW_8-1-118","style-text__positive-secondary":"magritte-style-text__positive-secondary___BVzsp_8-1-118","styleTextPositiveSecondary":"magritte-style-text__positive-secondary___BVzsp_8-1-118","style-text__negative":"magritte-style-text__negative___bfQGc_8-1-118","styleTextNegative":"magritte-style-text__negative___bfQGc_8-1-118","style-text__negative-secondary":"magritte-style-text__negative-secondary___dwdIU_8-1-118","styleTextNegativeSecondary":"magritte-style-text__negative-secondary___dwdIU_8-1-118","style-text__warning":"magritte-style-text__warning___LMwJL_8-1-118","styleTextWarning":"magritte-style-text__warning___LMwJL_8-1-118","style-text__warning-secondary":"magritte-style-text__warning-secondary___00jFu_8-1-118","styleTextWarningSecondary":"magritte-style-text__warning-secondary___00jFu_8-1-118","style-text__special":"magritte-style-text__special___dM5OC_8-1-118","styleTextSpecial":"magritte-style-text__special___dM5OC_8-1-118","style-text__special-secondary":"magritte-style-text__special-secondary___TW9M0_8-1-118","styleTextSpecialSecondary":"magritte-style-text__special-secondary___TW9M0_8-1-118","style-text__constant":"magritte-style-text__constant___tboP8_8-1-118","styleTextConstant":"magritte-style-text__constant___tboP8_8-1-118","style-text__constant-secondary":"magritte-style-text__constant-secondary___9iw3m_8-1-118","styleTextConstantSecondary":"magritte-style-text__constant-secondary___9iw3m_8-1-118","style-text__inverse":"magritte-style-text__inverse___8Zssm_8-1-118","styleTextInverse":"magritte-style-text__inverse___8Zssm_8-1-118","style-text__inverse-secondary":"magritte-style-text__inverse-secondary___TvLYn_8-1-118","styleTextInverseSecondary":"magritte-style-text__inverse-secondary___TvLYn_8-1-118","style-text__lovely":"magritte-style-text__lovely___TMBMe_8-1-118","styleTextLovely":"magritte-style-text__lovely___TMBMe_8-1-118","style-text__lovely-secondary":"magritte-style-text__lovely-secondary___wA5wM_8-1-118","styleTextLovelySecondary":"magritte-style-text__lovely-secondary___wA5wM_8-1-118","style-text__dreamy":"magritte-style-text__dreamy___gJgIh_8-1-118","styleTextDreamy":"magritte-style-text__dreamy___gJgIh_8-1-118","style-text__dreamy-secondary":"magritte-style-text__dreamy-secondary___vTUQP_8-1-118","styleTextDreamySecondary":"magritte-style-text__dreamy-secondary___vTUQP_8-1-118","style-text__vivid":"magritte-style-text__vivid___t99Ay_8-1-118","styleTextVivid":"magritte-style-text__vivid___t99Ay_8-1-118","style-text__vivid-secondary":"magritte-style-text__vivid-secondary___vo9DS_8-1-118","styleTextVividSecondary":"magritte-style-text__vivid-secondary___vo9DS_8-1-118","style-postfix__primary":"magritte-style-postfix__primary___SZze8_8-1-118","stylePostfixPrimary":"magritte-style-postfix__primary___SZze8_8-1-118","style-postfix__secondary":"magritte-style-postfix__secondary___62v6C_8-1-118","stylePostfixSecondary":"magritte-style-postfix__secondary___62v6C_8-1-118","style-postfix__tertiary":"magritte-style-postfix__tertiary___ETf7E_8-1-118","stylePostfixTertiary":"magritte-style-postfix__tertiary___ETf7E_8-1-118","style-postfix__dense":"magritte-style-postfix__dense___o-t55_8-1-118","stylePostfixDense":"magritte-style-postfix__dense___o-t55_8-1-118","style-postfix__accent":"magritte-style-postfix__accent___qZ4eI_8-1-118","stylePostfixAccent":"magritte-style-postfix__accent___qZ4eI_8-1-118","style-postfix__accent-secondary":"magritte-style-postfix__accent-secondary___X20G-_8-1-118","stylePostfixAccentSecondary":"magritte-style-postfix__accent-secondary___X20G-_8-1-118","style-postfix__positive":"magritte-style-postfix__positive___X1KrC_8-1-118","stylePostfixPositive":"magritte-style-postfix__positive___X1KrC_8-1-118","style-postfix__positive-secondary":"magritte-style-postfix__positive-secondary___mcQO2_8-1-118","stylePostfixPositiveSecondary":"magritte-style-postfix__positive-secondary___mcQO2_8-1-118","style-postfix__negative":"magritte-style-postfix__negative___FTrS7_8-1-118","stylePostfixNegative":"magritte-style-postfix__negative___FTrS7_8-1-118","style-postfix__negative-secondary":"magritte-style-postfix__negative-secondary___Z3jnL_8-1-118","stylePostfixNegativeSecondary":"magritte-style-postfix__negative-secondary___Z3jnL_8-1-118","style-postfix__warning":"magritte-style-postfix__warning___WvGdQ_8-1-118","stylePostfixWarning":"magritte-style-postfix__warning___WvGdQ_8-1-118","style-postfix__warning-secondary":"magritte-style-postfix__warning-secondary___bGMil_8-1-118","stylePostfixWarningSecondary":"magritte-style-postfix__warning-secondary___bGMil_8-1-118","style-postfix__special":"magritte-style-postfix__special___lBEXe_8-1-118","stylePostfixSpecial":"magritte-style-postfix__special___lBEXe_8-1-118","style-postfix__special-secondary":"magritte-style-postfix__special-secondary___oTEbd_8-1-118","stylePostfixSpecialSecondary":"magritte-style-postfix__special-secondary___oTEbd_8-1-118","style-postfix__constant":"magritte-style-postfix__constant___eeHt8_8-1-118","stylePostfixConstant":"magritte-style-postfix__constant___eeHt8_8-1-118","style-postfix__constant-secondary":"magritte-style-postfix__constant-secondary___DKZgI_8-1-118","stylePostfixConstantSecondary":"magritte-style-postfix__constant-secondary___DKZgI_8-1-118","style-postfix__inverse":"magritte-style-postfix__inverse___WtzhO_8-1-118","stylePostfixInverse":"magritte-style-postfix__inverse___WtzhO_8-1-118","style-postfix__inverse-secondary":"magritte-style-postfix__inverse-secondary___mxTiB_8-1-118","stylePostfixInverseSecondary":"magritte-style-postfix__inverse-secondary___mxTiB_8-1-118","style-postfix__lovely":"magritte-style-postfix__lovely___Qnru8_8-1-118","stylePostfixLovely":"magritte-style-postfix__lovely___Qnru8_8-1-118","style-postfix__lovely-secondary":"magritte-style-postfix__lovely-secondary___wZ-gk_8-1-118","stylePostfixLovelySecondary":"magritte-style-postfix__lovely-secondary___wZ-gk_8-1-118","style-postfix__dreamy":"magritte-style-postfix__dreamy___Hitus_8-1-118","stylePostfixDreamy":"magritte-style-postfix__dreamy___Hitus_8-1-118","style-postfix__dreamy-secondary":"magritte-style-postfix__dreamy-secondary___OjY8n_8-1-118","stylePostfixDreamySecondary":"magritte-style-postfix__dreamy-secondary___OjY8n_8-1-118","style-postfix__vivid":"magritte-style-postfix__vivid___3aPcQ_8-1-118","stylePostfixVivid":"magritte-style-postfix__vivid___3aPcQ_8-1-118","style-postfix__vivid-secondary":"magritte-style-postfix__vivid-secondary___YiIwk_8-1-118","stylePostfixVividSecondary":"magritte-style-postfix__vivid-secondary___YiIwk_8-1-118"};
|
|
17
17
|
|
|
18
|
-
const FormLabel = ({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
const FormLabel = ({
|
|
19
|
+
children,
|
|
20
|
+
info,
|
|
21
|
+
postfix,
|
|
22
|
+
styleText = "secondary",
|
|
23
|
+
stylePostfix = "tertiary",
|
|
24
|
+
icon: _icon,
|
|
25
|
+
"data-qa": dataQa = "form-label",
|
|
26
|
+
...props
|
|
27
|
+
}) => {
|
|
28
|
+
const disabled = useDisabled();
|
|
29
|
+
const [showBottomSheet, setShowBottomSheet] = useState(false);
|
|
30
|
+
const [showTooltip, setShowTooltip] = useState(false);
|
|
31
|
+
const activatorRef = useRef(null);
|
|
32
|
+
const icon = isIconElement(_icon) && _icon.type._size === 16 ? _icon : /* @__PURE__ */ jsx(
|
|
33
|
+
QuestionCircleOutlinedSize16,
|
|
34
|
+
{
|
|
35
|
+
initialColor: "secondary",
|
|
36
|
+
highlightedColor: "secondary",
|
|
37
|
+
disabledColor: "secondary"
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
const onClick = useCallback(
|
|
41
|
+
(event) => {
|
|
42
|
+
if (info) {
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
}
|
|
45
|
+
if (!disabled) {
|
|
46
|
+
setShowBottomSheet(true);
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
[disabled, info]
|
|
50
|
+
);
|
|
51
|
+
const onKeyDown = useCallback(
|
|
52
|
+
(event) => {
|
|
53
|
+
if (disabled || !onClick) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
|
|
57
|
+
onClick(event);
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
[onClick, disabled]
|
|
61
|
+
);
|
|
62
|
+
const propsForInfo = info ? {
|
|
63
|
+
tabIndex: disabled ? -1 : 0,
|
|
64
|
+
role: "button",
|
|
65
|
+
onKeyDown,
|
|
66
|
+
onClick,
|
|
67
|
+
onMouseEnter: () => setShowTooltip(true),
|
|
68
|
+
onMouseLeave: () => setShowTooltip(false),
|
|
69
|
+
onFocus: () => setShowTooltip(true),
|
|
70
|
+
onBlur: () => setShowTooltip(false)
|
|
71
|
+
} : {};
|
|
72
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
73
|
+
/* @__PURE__ */ jsx(IconDynamic, { children: /* @__PURE__ */ jsxs(
|
|
74
|
+
"label",
|
|
75
|
+
{
|
|
76
|
+
className: classNames(styles.formLabel, {
|
|
77
|
+
[styles.formLabelDisabled]: disabled,
|
|
78
|
+
[styles[`style-postfix__${stylePostfix}`]]: stylePostfix,
|
|
79
|
+
[styles[`style-text__${styleText}`]]: styleText
|
|
80
|
+
}),
|
|
81
|
+
"data-qa": dataQa,
|
|
82
|
+
...propsForInfo,
|
|
83
|
+
...props,
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ jsx("span", { className: styles.content, children }),
|
|
86
|
+
postfix && /* @__PURE__ */ jsx("span", { className: styles.postfix, "data-qa": "form-label-postfix", children: postfix }),
|
|
87
|
+
info && /* @__PURE__ */ jsx("span", { "data-qa": "form-label-info-icon", className: styles.icon, ref: activatorRef, children: icon })
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
) }),
|
|
91
|
+
info && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
92
|
+
/* @__PURE__ */ jsx(
|
|
93
|
+
Tooltip,
|
|
94
|
+
{
|
|
95
|
+
maxWidth: 300,
|
|
96
|
+
visible: showTooltip,
|
|
97
|
+
activatorRef,
|
|
98
|
+
placement: "top-center",
|
|
99
|
+
"data-qa": "form-label-tooltip",
|
|
100
|
+
children: info
|
|
27
101
|
}
|
|
28
|
-
|
|
29
|
-
|
|
102
|
+
),
|
|
103
|
+
/* @__PURE__ */ jsxs(
|
|
104
|
+
BottomSheet,
|
|
105
|
+
{
|
|
106
|
+
visible: showBottomSheet,
|
|
107
|
+
onClose: () => {
|
|
108
|
+
setShowBottomSheet(false);
|
|
109
|
+
},
|
|
110
|
+
header: /* @__PURE__ */ jsx(NavBar, { showDivider: "always", children: /* @__PURE__ */ jsx(
|
|
111
|
+
NavBar.Actions,
|
|
112
|
+
{
|
|
113
|
+
centered: true,
|
|
114
|
+
right: /* @__PURE__ */ jsx(CrossOutlinedSize24, { onClick: () => setShowBottomSheet(false) }),
|
|
115
|
+
children: /* @__PURE__ */ jsx(NavBar.TitleContainer, { centered: true, title: children })
|
|
116
|
+
}
|
|
117
|
+
) }),
|
|
118
|
+
"data-qa": "form-label-bottom-sheet",
|
|
119
|
+
children: [
|
|
120
|
+
/* @__PURE__ */ jsx(Text, { typography: "label-2-regular", children: info }),
|
|
121
|
+
/* @__PURE__ */ jsx(VSpacing, { default: 16 })
|
|
122
|
+
]
|
|
30
123
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {
|
|
37
|
-
onClick(event);
|
|
38
|
-
}
|
|
39
|
-
}, [onClick, disabled]);
|
|
40
|
-
const propsForInfo = info
|
|
41
|
-
? {
|
|
42
|
-
tabIndex: disabled ? -1 : 0,
|
|
43
|
-
role: 'button',
|
|
44
|
-
onKeyDown,
|
|
45
|
-
onClick,
|
|
46
|
-
onMouseEnter: () => setShowTooltip(true),
|
|
47
|
-
onMouseLeave: () => setShowTooltip(false),
|
|
48
|
-
onFocus: () => setShowTooltip(true),
|
|
49
|
-
onBlur: () => setShowTooltip(false),
|
|
50
|
-
}
|
|
51
|
-
: {};
|
|
52
|
-
return (jsxs(Fragment, { children: [jsx(IconDynamic, { children: jsxs("label", { className: classNames(styles.formLabel, {
|
|
53
|
-
[styles.formLabelDisabled]: disabled,
|
|
54
|
-
[styles[`style-postfix__${stylePostfix}`]]: stylePostfix,
|
|
55
|
-
[styles[`style-text__${styleText}`]]: styleText,
|
|
56
|
-
}), "data-qa": dataQa, ...propsForInfo, ...props, children: [jsx("span", { className: styles.content, children: children }), postfix && (jsx("span", { className: styles.postfix, "data-qa": "form-label-postfix", children: postfix })), info && (jsx("span", { "data-qa": "form-label-info-icon", className: styles.icon, ref: activatorRef, children: icon }))] }) }), info && (jsxs(Fragment, { children: [jsx(Tooltip, { maxWidth: 300, visible: showTooltip, activatorRef: activatorRef, placement: "top-center", "data-qa": "form-label-tooltip", children: info }), jsxs(BottomSheet, { visible: showBottomSheet, onClose: () => {
|
|
57
|
-
setShowBottomSheet(false);
|
|
58
|
-
}, header: jsx(NavBar, { showDivider: "always", children: jsx(NavBar.Actions, { centered: true, right: jsx(CrossOutlinedSize24, { onClick: () => setShowBottomSheet(false) }), children: jsx(NavBar.TitleContainer, { centered: true, title: children }) }) }), "data-qa": "form-label-bottom-sheet", children: [jsx(Text, { typography: "label-2-regular", children: info }), jsx(VSpacing, { default: 16 })] })] }))] }));
|
|
124
|
+
)
|
|
125
|
+
] })
|
|
126
|
+
] });
|
|
59
127
|
};
|
|
60
128
|
|
|
61
129
|
export { FormLabel };
|
package/FormLabel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["src/FormLabel.tsx"],"sourcesContent":["import { FC, KeyboardEvent, MouseEvent, useCallback, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport '@hh.ru/magritte-common-focus-visible';\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { FormLabelProps } from '@hh.ru/magritte-ui-form-label/types';\nimport { IconDynamic, IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon';\nimport { QuestionCircleOutlinedSize16, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Tooltip } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './form-label.less';\n\nexport const FormLabel: FC<FormLabelProps> = ({\n children,\n info,\n postfix,\n styleText = 'secondary',\n stylePostfix = 'tertiary',\n icon: _icon,\n 'data-qa': dataQa = 'form-label',\n ...props\n}) => {\n const disabled = useDisabled();\n const [showBottomSheet, setShowBottomSheet] = useState<boolean>(false);\n const [showTooltip, setShowTooltip] = useState<boolean>(false);\n const activatorRef = useRef<HTMLSpanElement | null>(null);\n\n const icon =\n isIconElement(_icon) && (_icon.type as IconWrapperComponentSize16)._size === 16 ? (\n _icon\n ) : (\n <QuestionCircleOutlinedSize16\n initialColor=\"secondary\"\n highlightedColor=\"secondary\"\n disabledColor=\"secondary\"\n />\n );\n\n const onClick = useCallback(\n (event: MouseEvent) => {\n if (info) {\n event.preventDefault();\n }\n\n if (!disabled) {\n setShowBottomSheet(true);\n }\n },\n [disabled, info]\n );\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLabelElement>) => {\n if (disabled || !onClick) {\n return;\n }\n\n if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n onClick(event as unknown as MouseEvent<HTMLLabelElement>);\n }\n },\n [onClick, disabled]\n );\n\n const propsForInfo = info\n ? {\n tabIndex: disabled ? -1 : 0,\n role: 'button',\n onKeyDown,\n onClick,\n onMouseEnter: () => setShowTooltip(true),\n onMouseLeave: () => setShowTooltip(false),\n onFocus: () => setShowTooltip(true),\n onBlur: () => setShowTooltip(false),\n }\n : {};\n\n return (\n <>\n <IconDynamic>\n <label\n className={classNames(styles.formLabel, {\n [styles.formLabelDisabled]: disabled,\n [styles[`style-postfix__${stylePostfix}`]]: stylePostfix,\n [styles[`style-text__${styleText}`]]: styleText,\n })}\n data-qa={dataQa}\n {...propsForInfo}\n {...props}\n >\n <span className={styles.content}>{children}</span>\n {postfix && (\n <span className={styles.postfix} data-qa=\"form-label-postfix\">\n {postfix}\n </span>\n )}\n {info && (\n <span data-qa=\"form-label-info-icon\" className={styles.icon} ref={activatorRef}>\n {icon}\n </span>\n )}\n </label>\n </IconDynamic>\n {info && (\n <>\n <Tooltip\n maxWidth={300}\n visible={showTooltip}\n activatorRef={activatorRef}\n placement=\"top-center\"\n data-qa=\"form-label-tooltip\"\n >\n {info}\n </Tooltip>\n <BottomSheet\n visible={showBottomSheet}\n onClose={() => {\n setShowBottomSheet(false);\n }}\n header={\n <NavBar showDivider=\"always\">\n <NavBar.Actions\n centered\n right={<CrossOutlinedSize24 onClick={() => setShowBottomSheet(false)} />}\n >\n <NavBar.TitleContainer centered title={children} />\n </NavBar.Actions>\n </NavBar>\n }\n data-qa=\"form-label-bottom-sheet\"\n >\n <Text typography=\"label-2-regular\">{info}</Text>\n <VSpacing default={16} />\n </BottomSheet>\n </>\n )}\n </>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["src/FormLabel.tsx"],"sourcesContent":["import { FC, KeyboardEvent, MouseEvent, useCallback, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nimport '@hh.ru/magritte-common-focus-visible';\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport { FormLabelProps } from '@hh.ru/magritte-ui-form-label/types';\nimport { IconDynamic, IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon';\nimport { QuestionCircleOutlinedSize16, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { NavBar } from '@hh.ru/magritte-ui-nav-bar';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Tooltip } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './form-label.less';\n\nexport const FormLabel: FC<FormLabelProps> = ({\n children,\n info,\n postfix,\n styleText = 'secondary',\n stylePostfix = 'tertiary',\n icon: _icon,\n 'data-qa': dataQa = 'form-label',\n ...props\n}) => {\n const disabled = useDisabled();\n const [showBottomSheet, setShowBottomSheet] = useState<boolean>(false);\n const [showTooltip, setShowTooltip] = useState<boolean>(false);\n const activatorRef = useRef<HTMLSpanElement | null>(null);\n\n const icon =\n isIconElement(_icon) && (_icon.type as IconWrapperComponentSize16)._size === 16 ? (\n _icon\n ) : (\n <QuestionCircleOutlinedSize16\n initialColor=\"secondary\"\n highlightedColor=\"secondary\"\n disabledColor=\"secondary\"\n />\n );\n\n const onClick = useCallback(\n (event: MouseEvent) => {\n if (info) {\n event.preventDefault();\n }\n\n if (!disabled) {\n setShowBottomSheet(true);\n }\n },\n [disabled, info]\n );\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLabelElement>) => {\n if (disabled || !onClick) {\n return;\n }\n\n if (keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space])) {\n onClick(event as unknown as MouseEvent<HTMLLabelElement>);\n }\n },\n [onClick, disabled]\n );\n\n const propsForInfo = info\n ? {\n tabIndex: disabled ? -1 : 0,\n role: 'button',\n onKeyDown,\n onClick,\n onMouseEnter: () => setShowTooltip(true),\n onMouseLeave: () => setShowTooltip(false),\n onFocus: () => setShowTooltip(true),\n onBlur: () => setShowTooltip(false),\n }\n : {};\n\n return (\n <>\n <IconDynamic>\n <label\n className={classNames(styles.formLabel, {\n [styles.formLabelDisabled]: disabled,\n [styles[`style-postfix__${stylePostfix}`]]: stylePostfix,\n [styles[`style-text__${styleText}`]]: styleText,\n })}\n data-qa={dataQa}\n {...propsForInfo}\n {...props}\n >\n <span className={styles.content}>{children}</span>\n {postfix && (\n <span className={styles.postfix} data-qa=\"form-label-postfix\">\n {postfix}\n </span>\n )}\n {info && (\n <span data-qa=\"form-label-info-icon\" className={styles.icon} ref={activatorRef}>\n {icon}\n </span>\n )}\n </label>\n </IconDynamic>\n {info && (\n <>\n <Tooltip\n maxWidth={300}\n visible={showTooltip}\n activatorRef={activatorRef}\n placement=\"top-center\"\n data-qa=\"form-label-tooltip\"\n >\n {info}\n </Tooltip>\n <BottomSheet\n visible={showBottomSheet}\n onClose={() => {\n setShowBottomSheet(false);\n }}\n header={\n <NavBar showDivider=\"always\">\n <NavBar.Actions\n centered\n right={<CrossOutlinedSize24 onClick={() => setShowBottomSheet(false)} />}\n >\n <NavBar.TitleContainer centered title={children} />\n </NavBar.Actions>\n </NavBar>\n }\n data-qa=\"form-label-bottom-sheet\"\n >\n <Text typography=\"label-2-regular\">{info}</Text>\n <VSpacing default={16} />\n </BottomSheet>\n </>\n )}\n </>\n );\n};\n"],"names":[],"mappings":"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"}
|