@hh.ru/magritte-ui-form-label 6.1.42 → 7.0.0
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.js +10 -10
- package/FormLabel.js.map +1 -1
- package/index.css +156 -561
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +6 -6
- package/types.d.ts +5 -3
package/FormLabel.js
CHANGED
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import { jsxs, Fragment
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useState, useRef, useCallback } from 'react';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
import '@hh.ru/magritte-common-focus-visible';
|
|
6
6
|
import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
7
7
|
import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
|
|
8
8
|
import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
|
|
9
|
+
import { isIconComponent, IconDynamic } from '@hh.ru/magritte-ui-icon';
|
|
9
10
|
import { QuestionCircleOutlinedSize16, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
10
11
|
import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
|
|
11
12
|
import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
12
13
|
import { Tooltip } from '@hh.ru/magritte-ui-tooltip';
|
|
13
14
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
14
15
|
|
|
15
|
-
var styles = {"form-label":"magritte-form-
|
|
16
|
+
var styles = {"form-label":"magritte-form-label___Yzcxs_7-0-0","formLabel":"magritte-form-label___Yzcxs_7-0-0","content":"magritte-content___o4wkg_7-0-0","postfix":"magritte-postfix___UBcl3_7-0-0","icon":"magritte-icon___nwksH_7-0-0","style-text__primary":"magritte-style-text__primary___O5HzE_7-0-0","styleTextPrimary":"magritte-style-text__primary___O5HzE_7-0-0","form-label_disabled":"magritte-form-label_disabled___rq0Rq_7-0-0","formLabelDisabled":"magritte-form-label_disabled___rq0Rq_7-0-0","style-text__secondary":"magritte-style-text__secondary___Uc8qw_7-0-0","styleTextSecondary":"magritte-style-text__secondary___Uc8qw_7-0-0","style-text__tertiary":"magritte-style-text__tertiary___4Tv0c_7-0-0","styleTextTertiary":"magritte-style-text__tertiary___4Tv0c_7-0-0","style-text__accent":"magritte-style-text__accent___DO4-g_7-0-0","styleTextAccent":"magritte-style-text__accent___DO4-g_7-0-0","style-text__accent-secondary":"magritte-style-text__accent-secondary___vZP4l_7-0-0","styleTextAccentSecondary":"magritte-style-text__accent-secondary___vZP4l_7-0-0","style-text__positive":"magritte-style-text__positive___A7nAW_7-0-0","styleTextPositive":"magritte-style-text__positive___A7nAW_7-0-0","style-text__positive-secondary":"magritte-style-text__positive-secondary___BVzsp_7-0-0","styleTextPositiveSecondary":"magritte-style-text__positive-secondary___BVzsp_7-0-0","style-text__negative":"magritte-style-text__negative___bfQGc_7-0-0","styleTextNegative":"magritte-style-text__negative___bfQGc_7-0-0","style-text__negative-secondary":"magritte-style-text__negative-secondary___dwdIU_7-0-0","styleTextNegativeSecondary":"magritte-style-text__negative-secondary___dwdIU_7-0-0","style-text__warning":"magritte-style-text__warning___LMwJL_7-0-0","styleTextWarning":"magritte-style-text__warning___LMwJL_7-0-0","style-text__warning-secondary":"magritte-style-text__warning-secondary___00jFu_7-0-0","styleTextWarningSecondary":"magritte-style-text__warning-secondary___00jFu_7-0-0","style-text__special":"magritte-style-text__special___dM5OC_7-0-0","styleTextSpecial":"magritte-style-text__special___dM5OC_7-0-0","style-text__special-secondary":"magritte-style-text__special-secondary___TW9M0_7-0-0","styleTextSpecialSecondary":"magritte-style-text__special-secondary___TW9M0_7-0-0","style-text__contrast":"magritte-style-text__contrast___gdVqp_7-0-0","styleTextContrast":"magritte-style-text__contrast___gdVqp_7-0-0","style-text__contrast-secondary":"magritte-style-text__contrast-secondary___Vg7J2_7-0-0","styleTextContrastSecondary":"magritte-style-text__contrast-secondary___Vg7J2_7-0-0","style-postfix__primary":"magritte-style-postfix__primary___SZze8_7-0-0","stylePostfixPrimary":"magritte-style-postfix__primary___SZze8_7-0-0","style-postfix__secondary":"magritte-style-postfix__secondary___62v6C_7-0-0","stylePostfixSecondary":"magritte-style-postfix__secondary___62v6C_7-0-0","style-postfix__tertiary":"magritte-style-postfix__tertiary___ETf7E_7-0-0","stylePostfixTertiary":"magritte-style-postfix__tertiary___ETf7E_7-0-0","style-postfix__accent":"magritte-style-postfix__accent___qZ4eI_7-0-0","stylePostfixAccent":"magritte-style-postfix__accent___qZ4eI_7-0-0","style-postfix__accent-secondary":"magritte-style-postfix__accent-secondary___X20G-_7-0-0","stylePostfixAccentSecondary":"magritte-style-postfix__accent-secondary___X20G-_7-0-0","style-postfix__positive":"magritte-style-postfix__positive___X1KrC_7-0-0","stylePostfixPositive":"magritte-style-postfix__positive___X1KrC_7-0-0","style-postfix__positive-secondary":"magritte-style-postfix__positive-secondary___mcQO2_7-0-0","stylePostfixPositiveSecondary":"magritte-style-postfix__positive-secondary___mcQO2_7-0-0","style-postfix__negative":"magritte-style-postfix__negative___FTrS7_7-0-0","stylePostfixNegative":"magritte-style-postfix__negative___FTrS7_7-0-0","style-postfix__negative-secondary":"magritte-style-postfix__negative-secondary___Z3jnL_7-0-0","stylePostfixNegativeSecondary":"magritte-style-postfix__negative-secondary___Z3jnL_7-0-0","style-postfix__warning":"magritte-style-postfix__warning___WvGdQ_7-0-0","stylePostfixWarning":"magritte-style-postfix__warning___WvGdQ_7-0-0","style-postfix__warning-secondary":"magritte-style-postfix__warning-secondary___bGMil_7-0-0","stylePostfixWarningSecondary":"magritte-style-postfix__warning-secondary___bGMil_7-0-0","style-postfix__special":"magritte-style-postfix__special___lBEXe_7-0-0","stylePostfixSpecial":"magritte-style-postfix__special___lBEXe_7-0-0","style-postfix__special-secondary":"magritte-style-postfix__special-secondary___oTEbd_7-0-0","stylePostfixSpecialSecondary":"magritte-style-postfix__special-secondary___oTEbd_7-0-0","style-postfix__contrast":"magritte-style-postfix__contrast___BrIfF_7-0-0","stylePostfixContrast":"magritte-style-postfix__contrast___BrIfF_7-0-0","style-postfix__contrast-secondary":"magritte-style-postfix__contrast-secondary___bcpSX_7-0-0","stylePostfixContrastSecondary":"magritte-style-postfix__contrast-secondary___bcpSX_7-0-0"};
|
|
16
17
|
|
|
17
|
-
const FormLabel = (props) => {
|
|
18
|
+
const FormLabel = ({ children, info, postfix, styleText = 'secondary', stylePostfix = 'tertiary', icon: _icon, 'data-qa': dataQa = 'form-label', ...props }) => {
|
|
18
19
|
const disabled = useDisabled();
|
|
19
20
|
const [showBottomSheet, setShowBottomSheet] = useState(false);
|
|
20
21
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
21
22
|
const activatorRef = useRef(null);
|
|
22
|
-
const
|
|
23
|
+
const icon = isIconComponent(_icon) && _icon.type._size === 16 ? (_icon) : (jsx(QuestionCircleOutlinedSize16, { initialColor: "secondary", highlightedColor: "secondary", disabledColor: "secondary" }));
|
|
23
24
|
const onClick = useCallback((event) => {
|
|
24
25
|
if (info) {
|
|
25
26
|
event.preventDefault();
|
|
@@ -48,12 +49,11 @@ const FormLabel = (props) => {
|
|
|
48
49
|
onBlur: () => setShowTooltip(false),
|
|
49
50
|
}
|
|
50
51
|
: {};
|
|
51
|
-
return (jsxs(Fragment, { children: [jsxs("label", { className: classNames(styles.formLabel, {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
[styles
|
|
56
|
-
}), "data-qa": dataQa, ...propsForInfo, ...restProps, 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: jsx(QuestionCircleOutlinedSize16, {}) }))] }), 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: () => {
|
|
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
57
|
setShowBottomSheet(false);
|
|
58
58
|
}, header: jsx(NavigationBar, { title: children, right: jsx(CrossOutlinedSize24, { onClick: () => setShowBottomSheet(false) }), showDivider: "always" }), "data-qa": "form-label-bottom-sheet", children: [jsx(Text, { typography: "label-2-regular", children: info }), jsx(VSpacing, { default: 16 })] })] }))] }));
|
|
59
59
|
};
|
package/FormLabel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../src/FormLabel.tsx"],"sourcesContent":["import { FC,
|
|
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, isIconComponent } from '@hh.ru/magritte-ui-icon';\nimport { QuestionCircleOutlinedSize16, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { NavigationBar } from '@hh.ru/magritte-ui-navigation-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 isIconComponent(_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 <NavigationBar\n title={children}\n right={<CrossOutlinedSize24 onClick={() => setShowBottomSheet(false)} />}\n showDivider=\"always\"\n />\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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|