@hh.ru/magritte-ui-link 4.3.22 → 5.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/CustomElementExample.d.ts +2 -3
- package/CustomElementExample.js +5 -3
- package/CustomElementExample.js.map +1 -1
- package/Link.js +19 -8
- package/Link.js.map +1 -1
- package/VerticallyCenteredIcon.d.ts +2 -3
- package/VerticallyCenteredIcon.js +5 -3
- package/VerticallyCenteredIcon.js.map +1 -1
- package/index.css +1281 -536
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +6 -6
- package/types.d.ts +6 -3
- package/types.js.map +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
declare const CustomElementExample: FC<{
|
|
1
|
+
declare const CustomElementExample: import("react").ForwardRefExoticComponent<{
|
|
3
2
|
customElementTitle?: string;
|
|
4
|
-
}
|
|
3
|
+
} & import("react").RefAttributes<HTMLSpanElement>>;
|
|
5
4
|
export default CustomElementExample;
|
package/CustomElementExample.js
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
3
4
|
|
|
4
|
-
const CustomElementExample = ({ customElementTitle, ...props }) => {
|
|
5
|
+
const CustomElementExample = forwardRef(({ customElementTitle, ...props }, ref) => {
|
|
5
6
|
const handleClick = () => {
|
|
6
7
|
// custom follow logic
|
|
7
8
|
};
|
|
8
|
-
return jsx("span", { title: customElementTitle, onClick: handleClick, ...props });
|
|
9
|
-
};
|
|
9
|
+
return jsx("span", { title: customElementTitle, onClick: handleClick, ...props, ref: ref });
|
|
10
|
+
});
|
|
11
|
+
CustomElementExample.displayName = 'CustomElementExample';
|
|
10
12
|
|
|
11
13
|
export { CustomElementExample as default };
|
|
12
14
|
//# sourceMappingURL=CustomElementExample.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomElementExample.js","sources":["../src/CustomElementExample.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CustomElementExample.js","sources":["../src/CustomElementExample.tsx"],"sourcesContent":["import { MouseEventHandler, forwardRef } from 'react';\n\nconst CustomElementExample = forwardRef<HTMLSpanElement, { customElementTitle?: string }>(\n ({ customElementTitle, ...props }, ref) => {\n const handleClick: MouseEventHandler = () => {\n // custom follow logic\n };\n return <span title={customElementTitle} onClick={handleClick} {...props} ref={ref} />;\n }\n);\n\nCustomElementExample.displayName = 'CustomElementExample';\n\nexport default CustomElementExample;\n"],"names":["_jsx"],"mappings":";;;AAEA,MAAM,oBAAoB,GAAG,UAAU,CACnC,CAAC,EAAE,kBAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACtC,MAAM,WAAW,GAAsB,MAAK;;AAE5C,KAAC,CAAC;AACF,IAAA,OAAOA,GAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,WAAW,EAAA,GAAM,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AAC1F,CAAC,EACH;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB;;;;"}
|
package/Link.js
CHANGED
|
@@ -3,23 +3,30 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef, useRef } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
6
|
-
import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
|
|
6
|
+
import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
|
|
7
|
+
import { isIconComponent, IconDynamic } from '@hh.ru/magritte-ui-icon';
|
|
7
8
|
import VerticallyCenteredIcon from './VerticallyCenteredIcon.js';
|
|
8
9
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
9
10
|
|
|
10
|
-
var styles = {"link":"magritte-
|
|
11
|
+
var styles = {"link":"magritte-link___b4rEM_5-0-0","link_enable-visited":"magritte-link_enable-visited___Biyib_5-0-0","linkEnableVisited":"magritte-link_enable-visited___Biyib_5-0-0","link_block":"magritte-link_block___Lk0iO_5-0-0","linkBlock":"magritte-link_block___Lk0iO_5-0-0","link__icon-left":"magritte-link__icon-left___1v4WO_5-0-0","linkIconLeft":"magritte-link__icon-left___1v4WO_5-0-0","link__icon-right":"magritte-link__icon-right___VVZpb_5-0-0","linkIconRight":"magritte-link__icon-right___VVZpb_5-0-0","link_big-icon":"magritte-link_big-icon___Z485G_5-0-0","linkBigIcon":"magritte-link_big-icon___Z485G_5-0-0","link_mode_primary":"magritte-link_mode_primary___l6una_5-0-0","linkModePrimary":"magritte-link_mode_primary___l6una_5-0-0","link_style_neutral":"magritte-link_style_neutral___iqoW0_5-0-0","linkStyleNeutral":"magritte-link_style_neutral___iqoW0_5-0-0","icon-without-color":"magritte-icon-without-color___P5ivQ_5-0-0","iconWithoutColor":"magritte-icon-without-color___P5ivQ_5-0-0","link_underlined":"magritte-link_underlined___OBHqe_5-0-0","linkUnderlined":"magritte-link_underlined___OBHqe_5-0-0","link_disabled":"magritte-link_disabled___sbFrN_5-0-0","linkDisabled":"magritte-link_disabled___sbFrN_5-0-0","text":"magritte-text___tkzIl_5-0-0","link_mode_secondary":"magritte-link_mode_secondary___91WgT_5-0-0","linkModeSecondary":"magritte-link_mode_secondary___91WgT_5-0-0","link_mode_tertiary":"magritte-link_mode_tertiary___5IWmJ_5-0-0","linkModeTertiary":"magritte-link_mode_tertiary___5IWmJ_5-0-0","link_style_accent":"magritte-link_style_accent___r-MW4_5-0-0","linkStyleAccent":"magritte-link_style_accent___r-MW4_5-0-0","link_style_positive":"magritte-link_style_positive___LF2So_5-0-0","linkStylePositive":"magritte-link_style_positive___LF2So_5-0-0","link_style_negative":"magritte-link_style_negative___BFuGj_5-0-0","linkStyleNegative":"magritte-link_style_negative___BFuGj_5-0-0","link_style_warning":"magritte-link_style_warning___pYAyP_5-0-0","linkStyleWarning":"magritte-link_style_warning___pYAyP_5-0-0","link_style_contrast":"magritte-link_style_contrast___Qty1T_5-0-0","linkStyleContrast":"magritte-link_style_contrast___Qty1T_5-0-0"};
|
|
11
12
|
|
|
12
13
|
const TYPOGRAPHY_WITH_ICON = ['subtitle-1-semibold', 'label-2-regular', 'label-3-regular'];
|
|
13
14
|
const TYPOGRAPHY_WITH_BIG_ICON = ['subtitle-1-semibold'];
|
|
14
15
|
const LinkForwardRefRenderFunc = (props, ref) => {
|
|
15
|
-
const { Element = 'a', children, style = 'accent', inline = false, disabled = false, iconLeft
|
|
16
|
+
const { Element = 'a', children, mode = 'primary', style: _style = 'accent', inline = false, disabled = false, iconLeft, iconRight, href, typography = 'label-2-regular', enableVisited = false, underlined = false, 'data-qa': dataQa = 'link', 'aria-label': ariaLabel, ...otherProps } = props;
|
|
16
17
|
const textRef = useRef(null);
|
|
17
|
-
const IconLeftComponent = iconLeft;
|
|
18
|
-
const IconRightComponent = iconRight;
|
|
19
18
|
const forceDisabled = useDisabled();
|
|
20
19
|
const isComponentDisabled = forceDisabled || disabled;
|
|
21
20
|
const withIcon = TYPOGRAPHY_WITH_ICON.includes(typography);
|
|
22
21
|
const withBigIcon = TYPOGRAPHY_WITH_BIG_ICON.includes(typography);
|
|
22
|
+
// Для mode 'tertiary' доступен только style 'neutral'
|
|
23
|
+
const style = mode === 'tertiary' ? 'neutral' : _style;
|
|
24
|
+
const iconLeftWithColor = iconLeft &&
|
|
25
|
+
isIconComponent(iconLeft) &&
|
|
26
|
+
(!!iconLeft.props.initial || !!iconLeft.props.highlighted || !!iconLeft.props.disabled);
|
|
27
|
+
const iconRightWithColor = iconRight &&
|
|
28
|
+
isIconComponent(iconRight) &&
|
|
29
|
+
(!!iconRight.props.initial || !!iconRight.props.highlighted || !!iconRight.props.disabled);
|
|
23
30
|
let additionalAttributes;
|
|
24
31
|
if (Element === 'button') {
|
|
25
32
|
additionalAttributes = {
|
|
@@ -44,14 +51,18 @@ const LinkForwardRefRenderFunc = (props, ref) => {
|
|
|
44
51
|
e.preventDefault();
|
|
45
52
|
}
|
|
46
53
|
};
|
|
47
|
-
const renderTextAndRightIcon = () => (jsxs(Fragment, { children: [jsx("span", { ref: textRef, "data-qa": `${dataQa}-text`, className: styles.text, children: children }), withIcon &&
|
|
48
|
-
|
|
54
|
+
const renderTextAndRightIcon = () => (jsxs(Fragment, { children: [jsx("span", { ref: textRef, "data-qa": `${dataQa}-text`, className: styles.text, children: children }), withIcon && iconRight && (jsx("span", { className: classnames(styles.linkIconRight, {
|
|
55
|
+
[styles.iconWithoutColor]: !iconRightWithColor,
|
|
56
|
+
}), children: jsx(VerticallyCenteredIcon, { icon: iconRight, "data-qa": `${dataQa}-icon-external` }) }))] }));
|
|
57
|
+
const render = () => (jsx(Element, { className: classnames(styles.link, styles[`link_mode_${mode}`], styles[`link_style_${style}`], {
|
|
49
58
|
[styles.link_disabled]: isComponentDisabled,
|
|
50
59
|
[styles.linkBigIcon]: withBigIcon,
|
|
51
60
|
[styles.linkBlock]: !inline,
|
|
52
61
|
[styles.linkEnableVisited]: enableVisited,
|
|
53
62
|
[styles.linkUnderlined]: underlined,
|
|
54
|
-
}), "data-qa": dataQa, disabled: isComponentDisabled, "aria-label": ariaLabel, onKeyDown: handleKeyDown, ...additionalAttributes, ...otherProps, children: jsx(Text, { Element: "span", typography: typography, children: withIcon &&
|
|
63
|
+
}), "data-qa": dataQa, disabled: isComponentDisabled, "aria-label": ariaLabel, onKeyDown: handleKeyDown, ...additionalAttributes, ...otherProps, children: jsx(DisabledContext.Provider, { value: isComponentDisabled, children: jsx(IconDynamic, { children: jsx(Text, { Element: "span", typography: typography, children: withIcon && iconLeft ? (jsxs(Fragment, { children: [jsx("span", { className: classnames(styles.linkIconLeft, {
|
|
64
|
+
[styles.iconWithoutColor]: !iconLeftWithColor,
|
|
65
|
+
}), children: jsx(VerticallyCenteredIcon, { icon: iconLeft, "data-qa": `${dataQa}-icon-left` }) }), jsx("span", { children: renderTextAndRightIcon() })] })) : (renderTextAndRightIcon()) }) }) }) }));
|
|
55
66
|
return inline ? render() : jsx("div", { children: render() });
|
|
56
67
|
};
|
|
57
68
|
const Link = forwardRef(LinkForwardRefRenderFunc);
|
package/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../src/Link.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport VerticallyCenteredIcon from '@hh.ru/magritte-ui-link/VerticallyCenteredIcon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './link.less';\n\nconst TYPOGRAPHY_WITH_ICON = ['subtitle-1-semibold', 'label-2-regular', 'label-3-regular'];\n\nconst TYPOGRAPHY_WITH_BIG_ICON = ['subtitle-1-semibold'];\n\nexport const LinkForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<LinkProps, 'a'> = (props, ref) => {\n const {\n Element = 'a',\n children,\n style = 'accent',\n inline = false,\n disabled = false,\n iconLeft
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../src/Link.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { IconDynamic, isIconComponent } from '@hh.ru/magritte-ui-icon';\nimport VerticallyCenteredIcon from '@hh.ru/magritte-ui-link/VerticallyCenteredIcon';\nimport type { LinkProps } from '@hh.ru/magritte-ui-link/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './link.less';\n\nconst TYPOGRAPHY_WITH_ICON = ['subtitle-1-semibold', 'label-2-regular', 'label-3-regular'];\n\nconst TYPOGRAPHY_WITH_BIG_ICON = ['subtitle-1-semibold'];\n\nexport const LinkForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<LinkProps, 'a'> = (props, ref) => {\n const {\n Element = 'a',\n children,\n mode = 'primary',\n style: _style = 'accent',\n inline = false,\n disabled = false,\n iconLeft,\n iconRight,\n href,\n typography = 'label-2-regular',\n enableVisited = false,\n underlined = false,\n 'data-qa': dataQa = 'link',\n 'aria-label': ariaLabel,\n ...otherProps\n } = props;\n\n const textRef = useRef<HTMLSpanElement>(null);\n const forceDisabled = useDisabled();\n const isComponentDisabled = forceDisabled || disabled;\n const withIcon = TYPOGRAPHY_WITH_ICON.includes(typography);\n const withBigIcon = TYPOGRAPHY_WITH_BIG_ICON.includes(typography);\n // Для mode 'tertiary' доступен только style 'neutral'\n const style = mode === 'tertiary' ? 'neutral' : _style;\n const iconLeftWithColor =\n iconLeft &&\n isIconComponent(iconLeft) &&\n (!!iconLeft.props.initial || !!iconLeft.props.highlighted || !!iconLeft.props.disabled);\n\n const iconRightWithColor =\n iconRight &&\n isIconComponent(iconRight) &&\n (!!iconRight.props.initial || !!iconRight.props.highlighted || !!iconRight.props.disabled);\n\n let additionalAttributes: Record<string, unknown>;\n\n if (Element === 'button') {\n additionalAttributes = {\n type: 'button',\n };\n } else {\n additionalAttributes = {\n tabIndex: isComponentDisabled ? -1 : 0,\n href,\n };\n }\n\n if (ref) {\n additionalAttributes.ref = ref;\n }\n\n const handleKeyDown: React.KeyboardEventHandler = (e) => {\n // Поддержка перехода по ссылке при нажатии Enter в случае кастомного элемента\n if (keyboardMatch(e.nativeEvent, keyboardKeys.Enter)) {\n // Кликаю не по кастомному элементу, а внутри него, тк кастомный может не поддерживать ни ref, ни onClick\n textRef.current?.click();\n e.stopPropagation();\n e.preventDefault();\n }\n };\n\n const renderTextAndRightIcon = () => (\n <>\n <span ref={textRef} data-qa={`${dataQa}-text`} className={styles.text}>\n {children}\n </span>\n {withIcon && iconRight && (\n <span\n className={classnames(styles.linkIconRight, {\n [styles.iconWithoutColor]: !iconRightWithColor,\n })}\n >\n <VerticallyCenteredIcon icon={iconRight} data-qa={`${dataQa}-icon-external`} />\n </span>\n )}\n </>\n );\n\n const render = () => (\n <Element\n className={classnames(styles.link, styles[`link_mode_${mode}`], styles[`link_style_${style}`], {\n [styles.link_disabled]: isComponentDisabled,\n [styles.linkBigIcon]: withBigIcon,\n [styles.linkBlock]: !inline,\n [styles.linkEnableVisited]: enableVisited,\n [styles.linkUnderlined]: underlined,\n })}\n data-qa={dataQa}\n disabled={isComponentDisabled}\n aria-label={ariaLabel}\n onKeyDown={handleKeyDown}\n {...additionalAttributes}\n {...otherProps}\n >\n <DisabledContext.Provider value={isComponentDisabled}>\n <IconDynamic>\n <Text Element=\"span\" typography={typography}>\n {withIcon && iconLeft ? (\n <>\n <span\n className={classnames(styles.linkIconLeft, {\n [styles.iconWithoutColor]: !iconLeftWithColor,\n })}\n >\n <VerticallyCenteredIcon icon={iconLeft} data-qa={`${dataQa}-icon-left`} />\n </span>\n <span>{renderTextAndRightIcon()}</span>\n </>\n ) : (\n renderTextAndRightIcon()\n )}\n </Text>\n </IconDynamic>\n </DisabledContext.Provider>\n </Element>\n );\n\n return inline ? render() : <div>{render()}</div>;\n};\n\nexport const Link: PolymorphicComponentWithRef<LinkProps, 'a'> = forwardRef(LinkForwardRefRenderFunc);\nconst LinkWithFlag = Link as typeof Link & { isLink: true };\nLinkWithFlag.isLink = true;\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { IconWrapperComponent } from '@hh.ru/magritte-ui-icon/src/iconTypes';
|
|
1
|
+
import { FC, ReactElement } from 'react';
|
|
3
2
|
interface VerticallyCenteredIconProps {
|
|
4
|
-
icon:
|
|
3
|
+
icon: ReactElement;
|
|
5
4
|
'data-qa'?: string;
|
|
6
5
|
}
|
|
7
6
|
declare const VerticallyCenteredIcon: FC<VerticallyCenteredIconProps>;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
3
4
|
|
|
4
|
-
var styles = {"vertically-centered-icon":"magritte-vertically-centered-
|
|
5
|
+
var styles = {"vertically-centered-icon":"magritte-vertically-centered-icon___Zstk8_5-0-0","verticallyCenteredIcon":"magritte-vertically-centered-icon___Zstk8_5-0-0"};
|
|
5
6
|
|
|
6
7
|
const VerticallyCenteredIcon = ({ icon, 'data-qa': dataQa }) => {
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
return (jsx("span", { className: styles.verticallyCenteredIcon, children: React.cloneElement(icon, {
|
|
9
|
+
'data-qa': dataQa,
|
|
10
|
+
}) }));
|
|
9
11
|
};
|
|
10
12
|
|
|
11
13
|
export { VerticallyCenteredIcon as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticallyCenteredIcon.js","sources":["../src/VerticallyCenteredIcon.tsx"],"sourcesContent":["import { FC } from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"VerticallyCenteredIcon.js","sources":["../src/VerticallyCenteredIcon.tsx"],"sourcesContent":["import React, { FC, ReactElement } from 'react';\n\nimport styles from './vertically-centered-icon.less';\n\ninterface VerticallyCenteredIconProps {\n icon: ReactElement;\n 'data-qa'?: string;\n}\n\nconst VerticallyCenteredIcon: FC<VerticallyCenteredIconProps> = ({ icon, 'data-qa': dataQa }) => {\n return (\n <span className={styles.verticallyCenteredIcon}>\n {React.cloneElement(icon, {\n 'data-qa': dataQa,\n })}\n </span>\n );\n};\nexport default VerticallyCenteredIcon;\n"],"names":["_jsx"],"mappings":";;;;;AASM,MAAA,sBAAsB,GAAoC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAI;AAC5F,IAAA,QACIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,EAAA,QAAA,EACzC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACtB,YAAA,SAAS,EAAE,MAAM;SACpB,CAAC,EAAA,CACC,EACT;AACN;;;;"}
|