@hh.ru/magritte-ui-tag 5.2.2 → 5.3.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.
Files changed (7) hide show
  1. package/Tag.d.ts +1 -0
  2. package/Tag.js +41 -5
  3. package/Tag.js.map +1 -1
  4. package/index.css +97 -56
  5. package/index.js +1 -1
  6. package/package.json +2 -2
  7. package/types.d.ts +1 -0
package/Tag.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';
2
+ export declare const TAG_HIGHLIGHT_ANIMATION_CYCLE: number;
2
3
  export declare function Tag(props: TagIconProps): React.ReactElement;
3
4
  export declare function Tag(props: TagLabelProps): React.ReactElement;
package/Tag.js CHANGED
@@ -1,13 +1,26 @@
1
1
  import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { cloneElement } from 'react';
3
+ import { useRef, useLayoutEffect, cloneElement } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
6
6
  import { IconDynamic } from '@hh.ru/magritte-ui-icon';
7
7
  import { isIconElement } from '@hh.ru/magritte-ui-icon/types';
8
8
 
9
- var styles = {"tag":"magritte-tag___WdGxk_5-2-2","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-2-2","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-2-2","tag__label":"magritte-tag__label___YHV-o_5-2-2","tagLabel":"magritte-tag__label___YHV-o_5-2-2","icon-color-override":"magritte-icon-color-override___z7Qmm_5-2-2","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-2-2","on-surface":"magritte-on-surface___-0Bc4_5-2-2","onSurface":"magritte-on-surface___-0Bc4_5-2-2","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-2-2","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-2-2","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-2-2","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-2-2","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-2-2","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-2-2","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-2-2","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-2-2","tag_style-special":"magritte-tag_style-special___-IqT-_5-2-2","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-2-2","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-2-2","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-2-2","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-2-2","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-2-2","tag_size-medium":"magritte-tag_size-medium___Splpy_5-2-2","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-2-2","tag__icon":"magritte-tag__icon___Avk97_5-2-2","tagIcon":"magritte-tag__icon___Avk97_5-2-2","tag_size-large":"magritte-tag_size-large___SWuug_5-2-2","tagSizeLarge":"magritte-tag_size-large___SWuug_5-2-2"};
9
+ var styles = {"tag":"magritte-tag___WdGxk_5-3-0","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-3-0","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-3-0","tag__label":"magritte-tag__label___YHV-o_5-3-0","tagLabel":"magritte-tag__label___YHV-o_5-3-0","icon-color-override":"magritte-icon-color-override___z7Qmm_5-3-0","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-3-0","on-surface":"magritte-on-surface___-0Bc4_5-3-0","onSurface":"magritte-on-surface___-0Bc4_5-3-0","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-3-0","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-3-0","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-3-0","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-3-0","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-3-0","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-3-0","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-3-0","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-3-0","tag_style-special":"magritte-tag_style-special___-IqT-_5-3-0","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-3-0","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-3-0","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-3-0","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-3-0","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-3-0","tag_size-medium":"magritte-tag_size-medium___Splpy_5-3-0","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-3-0","tag__icon":"magritte-tag__icon___Avk97_5-3-0","tagIcon":"magritte-tag__icon___Avk97_5-3-0","tag_size-large":"magritte-tag_size-large___SWuug_5-3-0","tagSizeLarge":"magritte-tag_size-large___SWuug_5-3-0","tag_highlight":"magritte-tag_highlight___RmDYp_5-3-0","tagHighlight":"magritte-tag_highlight___RmDYp_5-3-0","tag-highlight-shine":"magritte-tag-highlight-shine___8ZFPr_5-3-0","tagHighlightShine":"magritte-tag-highlight-shine___8ZFPr_5-3-0"};
10
10
 
11
+ const TAG_HIGHLIGHT_MOTION = 1440;
12
+ const TAG_HIGHLIGHT_PAUSE = 2500;
13
+ const TAG_HIGHLIGHT_ANIMATION_CYCLE = TAG_HIGHLIGHT_MOTION + TAG_HIGHLIGHT_PAUSE;
14
+ const TAG_HIGHLIGHT_DELAY_PROPERTY = '--tag-highlight-delay';
15
+ const TAG_HIGHLIGHT_DURATION_PROPERTY = '--tag-highlight-duration';
16
+ const TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE = 'animationSynced';
17
+ const getTagHighlightDelay = () => {
18
+ const phase = Date.now() % TAG_HIGHLIGHT_ANIMATION_CYCLE;
19
+ if (phase === 0) {
20
+ return 0;
21
+ }
22
+ return phase < TAG_HIGHLIGHT_MOTION ? TAG_HIGHLIGHT_ANIMATION_CYCLE - phase : -phase;
23
+ };
11
24
  const SIZE_TO_CSS = {
12
25
  large: styles.tagSizeLarge,
13
26
  medium: styles.tagSizeMedium,
@@ -20,17 +33,40 @@ const STYLE_TO_CSS = {
20
33
  neutral: styles.tagStyleNeutral,
21
34
  accent: styles.tagStyleAccent,
22
35
  };
23
- function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, 'aria-label': ariaLabel, children, onSurface, 'data-qa': dataQa, }) {
36
+ function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, highlight = false, 'aria-label': ariaLabel, children, onSurface, 'data-qa': dataQa, }) {
37
+ const tagRef = useRef(null);
24
38
  const showLabel = !hideLabel && children;
25
39
  const isDisabled = useDisabled() || disabled;
26
40
  const withIcon = isIconElement(icon) && icon.type._size === 16;
27
- return (jsxs("div", { className: classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
41
+ const isHighlightEnabled = highlight && !isDisabled;
42
+ useLayoutEffect(() => {
43
+ const tagEl = tagRef.current;
44
+ if (!isHighlightEnabled || !tagEl) {
45
+ tagEl?.style.removeProperty(TAG_HIGHLIGHT_DELAY_PROPERTY);
46
+ tagEl?.style.removeProperty(TAG_HIGHLIGHT_DURATION_PROPERTY);
47
+ delete tagEl?.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE];
48
+ return undefined;
49
+ }
50
+ tagEl.style.setProperty(TAG_HIGHLIGHT_DURATION_PROPERTY, `${TAG_HIGHLIGHT_ANIMATION_CYCLE}ms`);
51
+ // During hydration, synchronous animation-delay setup via useLayoutEffect
52
+ // does not guarantee proper phase alignment. raf ensures correct timing.
53
+ const animationFrameId = requestAnimationFrame(() => {
54
+ const syncedDelay = getTagHighlightDelay();
55
+ tagEl.style.setProperty(TAG_HIGHLIGHT_DELAY_PROPERTY, `${syncedDelay}ms`);
56
+ tagEl.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE] = 'true';
57
+ });
58
+ return () => {
59
+ cancelAnimationFrame(animationFrameId);
60
+ };
61
+ }, [isHighlightEnabled]);
62
+ return (jsxs("div", { ref: tagRef, className: classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
28
63
  [styles.tagStateDisabled]: isDisabled,
64
+ [styles.tagHighlight]: isHighlightEnabled,
29
65
  [styles.iconColorOverride]: withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),
30
66
  [styles.disabledIconColorOverride]: withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),
31
67
  [styles.onSurface]: onSurface,
32
68
  }), "aria-disabled": isDisabled, "data-qa": dataQa, children: [withIcon && (jsx(DisabledContext.Provider, { value: isDisabled, children: jsx(IconDynamic, { hoverEnabled: false, pressEnabled: false, children: jsx("div", { className: styles.tagIcon, children: cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined }) }) }) })), showLabel && jsx("div", { className: styles.tagLabel, children: children })] }));
33
69
  }
34
70
 
35
- export { Tag };
71
+ export { TAG_HIGHLIGHT_ANIMATION_CYCLE, Tag };
36
72
  //# sourceMappingURL=Tag.js.map
package/Tag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { type IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon/types';\nimport type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';\n\nimport styles from './tag.less';\n\nconst SIZE_TO_CSS = {\n large: styles.tagSizeLarge,\n medium: styles.tagSizeMedium,\n};\n\nconst STYLE_TO_CSS = {\n special: styles.tagStyleSpecial,\n warning: styles.tagStyleWarning,\n positive: styles.tagStylePositive,\n negative: styles.tagStyleNegative,\n neutral: styles.tagStyleNeutral,\n accent: styles.tagStyleAccent,\n};\n\nexport function Tag(props: TagIconProps): React.ReactElement;\nexport function Tag(props: TagLabelProps): React.ReactElement;\n\nexport function Tag({\n style = 'neutral',\n size = 'medium',\n disabled = false,\n hideLabel,\n icon,\n 'aria-label': ariaLabel,\n children,\n onSurface,\n 'data-qa': dataQa,\n}: TagIconProps | TagLabelProps): React.ReactElement {\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n return (\n <div\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\n [styles.iconColorOverride]:\n withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),\n [styles.disabledIconColorOverride]:\n withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),\n [styles.onSurface]: onSurface,\n })}\n aria-disabled={isDisabled}\n data-qa={dataQa}\n >\n {withIcon && (\n <DisabledContext.Provider value={isDisabled}>\n <IconDynamic hoverEnabled={false} pressEnabled={false}>\n <div className={styles.tagIcon}>\n {cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined })}\n </div>\n </IconDynamic>\n </DisabledContext.Provider>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAUA,MAAM,WAAW,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC,YAAY;IAC1B,MAAM,EAAE,MAAM,CAAC,aAAa;CAC/B,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,MAAM,EAAE,MAAM,CAAC,cAAc;CAChC,CAAC;AAKc,SAAA,GAAG,CAAC,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,SAAS,EAAE,MAAM,GACU,EAAA;AAC3B,IAAA,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;AACzC,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,IAAI,QAAQ,CAAC;AAC7C,IAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,IAAmC,CAAC,KAAK,KAAK,EAAE,CAAC;AAC/F,IAAA,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE;AACtE,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,UAAU;YACrC,CAAC,MAAM,CAAC,iBAAiB,GACrB,QAAQ,IAAI,CAAC,UAAU,IAAI,EAAE,cAAc,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YACrF,CAAC,MAAM,CAAC,yBAAyB,GAC7B,QAAQ,IAAI,UAAU,IAAI,EAAE,eAAe,IAAI,IAAI,CAAC,KAAK,IAAI,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC;AAC7F,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;AAChC,SAAA,CAAC,EACa,eAAA,EAAA,UAAU,EAChB,SAAA,EAAA,MAAM,aAEd,QAAQ,KACLC,GAAA,CAAC,eAAe,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,UAAU,EAAA,QAAA,EACvCA,GAAC,CAAA,WAAW,EAAC,EAAA,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAA,QAAA,EACjDA,aAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,QAAA,EAAA,YAAY,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS,EAAE,CAAC,EAAA,CACvE,EACI,CAAA,EAAA,CACS,CAC9B,EACA,SAAS,IAAIA,aAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,CAAA,EAAA,CAC7D,EACR;AACN;;;;"}
1
+ {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement, useLayoutEffect, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { type IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon/types';\nimport type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';\n\nimport styles from './tag.less';\n\nconst TAG_HIGHLIGHT_MOTION = 1440;\nconst TAG_HIGHLIGHT_PAUSE = 2500;\nexport const TAG_HIGHLIGHT_ANIMATION_CYCLE = TAG_HIGHLIGHT_MOTION + TAG_HIGHLIGHT_PAUSE;\n\nconst TAG_HIGHLIGHT_DELAY_PROPERTY = '--tag-highlight-delay';\nconst TAG_HIGHLIGHT_DURATION_PROPERTY = '--tag-highlight-duration';\nconst TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE = 'animationSynced';\n\nconst getTagHighlightDelay = (): number => {\n const phase = Date.now() % TAG_HIGHLIGHT_ANIMATION_CYCLE;\n\n if (phase === 0) {\n return 0;\n }\n\n return phase < TAG_HIGHLIGHT_MOTION ? TAG_HIGHLIGHT_ANIMATION_CYCLE - phase : -phase;\n};\n\nconst SIZE_TO_CSS = {\n large: styles.tagSizeLarge,\n medium: styles.tagSizeMedium,\n};\n\nconst STYLE_TO_CSS = {\n special: styles.tagStyleSpecial,\n warning: styles.tagStyleWarning,\n positive: styles.tagStylePositive,\n negative: styles.tagStyleNegative,\n neutral: styles.tagStyleNeutral,\n accent: styles.tagStyleAccent,\n};\n\nexport function Tag(props: TagIconProps): React.ReactElement;\nexport function Tag(props: TagLabelProps): React.ReactElement;\n\nexport function Tag({\n style = 'neutral',\n size = 'medium',\n disabled = false,\n hideLabel,\n icon,\n highlight = false,\n 'aria-label': ariaLabel,\n children,\n onSurface,\n 'data-qa': dataQa,\n}: TagIconProps | TagLabelProps): React.ReactElement {\n const tagRef = useRef<HTMLDivElement>(null);\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n const isHighlightEnabled = highlight && !isDisabled;\n\n useLayoutEffect(() => {\n const tagEl = tagRef.current;\n if (!isHighlightEnabled || !tagEl) {\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DELAY_PROPERTY);\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DURATION_PROPERTY);\n delete tagEl?.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE];\n return undefined;\n }\n tagEl.style.setProperty(TAG_HIGHLIGHT_DURATION_PROPERTY, `${TAG_HIGHLIGHT_ANIMATION_CYCLE}ms`);\n // During hydration, synchronous animation-delay setup via useLayoutEffect\n // does not guarantee proper phase alignment. raf ensures correct timing.\n const animationFrameId = requestAnimationFrame(() => {\n const syncedDelay = getTagHighlightDelay();\n tagEl.style.setProperty(TAG_HIGHLIGHT_DELAY_PROPERTY, `${syncedDelay}ms`);\n tagEl.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE] = 'true';\n });\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, [isHighlightEnabled]);\n\n return (\n <div\n ref={tagRef}\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\n [styles.tagHighlight]: isHighlightEnabled,\n [styles.iconColorOverride]:\n withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),\n [styles.disabledIconColorOverride]:\n withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),\n [styles.onSurface]: onSurface,\n })}\n aria-disabled={isDisabled}\n data-qa={dataQa}\n >\n {withIcon && (\n <DisabledContext.Provider value={isDisabled}>\n <IconDynamic hoverEnabled={false} pressEnabled={false}>\n <div className={styles.tagIcon}>\n {cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined })}\n </div>\n </IconDynamic>\n </DisabledContext.Provider>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/index.css CHANGED
@@ -109,156 +109,159 @@
109
109
  --magritte-color-component-tag-icon-state-warning-disabled-v24-6-0:#ac66007a;
110
110
  --magritte-color-component-tag-icon-state-accent-disabled-v24-6-0:#B1C5D3;
111
111
  }
112
- .magritte-tag___WdGxk_5-2-2{
112
+ .magritte-tag___WdGxk_5-3-0{
113
113
  display:inline-flex;
114
114
  align-items:center;
115
115
  justify-content:center;
116
+ position:relative;
117
+ overflow:hidden;
118
+ isolation:isolate;
116
119
  }
117
- .magritte-tag_style-neutral___cw1Bt_5-2-2{
120
+ .magritte-tag_style-neutral___cw1Bt_5-3-0{
118
121
  background-color:var(--magritte-color-component-tag-background-neutral-v24-6-0);
119
122
  }
120
- .magritte-tag_style-neutral___cw1Bt_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
123
+ .magritte-tag_style-neutral___cw1Bt_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
121
124
  color:var(--magritte-color-component-tag-text-neutral-v24-6-0);
122
125
  }
123
- .magritte-tag_style-neutral___cw1Bt_5-2-2.magritte-icon-color-override___z7Qmm_5-2-2{
126
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
124
127
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v24-6-0);
125
128
  }
126
- .magritte-tag_style-neutral___cw1Bt_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
129
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
127
130
  background-color:var(--magritte-color-component-tag-background-on-surface-neutral-v24-6-0);
128
131
  }
129
- .magritte-tag_style-neutral___cw1Bt_5-2-2.magritte-tag_state-disabled___2su23_5-2-2{
132
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
130
133
  background-color:var(--magritte-color-component-tag-background-state-neutral-disabled-v24-6-0);
131
134
  }
132
- .magritte-tag_style-neutral___cw1Bt_5-2-2.magritte-tag_state-disabled___2su23_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
135
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
133
136
  color:var(--magritte-color-component-tag-text-state-neutral-disabled-v24-6-0);
134
137
  }
135
- .magritte-tag_style-neutral___cw1Bt_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-disabled-icon-color-override___E6mEW_5-2-2{
138
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
136
139
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v24-6-0);
137
140
  }
138
- .magritte-tag_style-neutral___cw1Bt_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
141
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
139
142
  background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-6-0);
140
143
  }
141
- .magritte-tag_style-positive___o2Zfe_5-2-2{
144
+ .magritte-tag_style-positive___o2Zfe_5-3-0{
142
145
  background-color:var(--magritte-color-component-tag-background-positive-v24-6-0);
143
146
  }
144
- .magritte-tag_style-positive___o2Zfe_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
147
+ .magritte-tag_style-positive___o2Zfe_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
145
148
  color:var(--magritte-color-component-tag-text-positive-v24-6-0);
146
149
  }
147
- .magritte-tag_style-positive___o2Zfe_5-2-2.magritte-icon-color-override___z7Qmm_5-2-2{
150
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
148
151
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v24-6-0);
149
152
  }
150
- .magritte-tag_style-positive___o2Zfe_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
153
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
151
154
  background-color:var(--magritte-color-component-tag-background-on-surface-positive-v24-6-0);
152
155
  }
153
- .magritte-tag_style-positive___o2Zfe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2{
156
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
154
157
  background-color:var(--magritte-color-component-tag-background-state-positive-disabled-v24-6-0);
155
158
  }
156
- .magritte-tag_style-positive___o2Zfe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
159
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
157
160
  color:var(--magritte-color-component-tag-text-state-positive-disabled-v24-6-0);
158
161
  }
159
- .magritte-tag_style-positive___o2Zfe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-disabled-icon-color-override___E6mEW_5-2-2{
162
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
160
163
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v24-6-0);
161
164
  }
162
- .magritte-tag_style-positive___o2Zfe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
165
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
163
166
  background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-6-0);
164
167
  }
165
- .magritte-tag_style-negative___-HbQe_5-2-2{
168
+ .magritte-tag_style-negative___-HbQe_5-3-0{
166
169
  background-color:var(--magritte-color-component-tag-background-negative-v24-6-0);
167
170
  }
168
- .magritte-tag_style-negative___-HbQe_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
171
+ .magritte-tag_style-negative___-HbQe_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
169
172
  color:var(--magritte-color-component-tag-text-negative-v24-6-0);
170
173
  }
171
- .magritte-tag_style-negative___-HbQe_5-2-2.magritte-icon-color-override___z7Qmm_5-2-2{
174
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
172
175
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v24-6-0);
173
176
  }
174
- .magritte-tag_style-negative___-HbQe_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
177
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
175
178
  background-color:var(--magritte-color-component-tag-background-on-surface-negative-v24-6-0);
176
179
  }
177
- .magritte-tag_style-negative___-HbQe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2{
180
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
178
181
  background-color:var(--magritte-color-component-tag-background-state-negative-disabled-v24-6-0);
179
182
  }
180
- .magritte-tag_style-negative___-HbQe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
183
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
181
184
  color:var(--magritte-color-component-tag-text-state-negative-disabled-v24-6-0);
182
185
  }
183
- .magritte-tag_style-negative___-HbQe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-disabled-icon-color-override___E6mEW_5-2-2{
186
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
184
187
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v24-6-0);
185
188
  }
186
- .magritte-tag_style-negative___-HbQe_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
189
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
187
190
  background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-6-0);
188
191
  }
189
- .magritte-tag_style-special___-IqT-_5-2-2{
192
+ .magritte-tag_style-special___-IqT-_5-3-0{
190
193
  background-color:var(--magritte-color-component-tag-background-special-v24-6-0);
191
194
  }
192
- .magritte-tag_style-special___-IqT-_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
195
+ .magritte-tag_style-special___-IqT-_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
193
196
  color:var(--magritte-color-component-tag-text-special-v24-6-0);
194
197
  }
195
- .magritte-tag_style-special___-IqT-_5-2-2.magritte-icon-color-override___z7Qmm_5-2-2{
198
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
196
199
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v24-6-0);
197
200
  }
198
- .magritte-tag_style-special___-IqT-_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
201
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
199
202
  background-color:var(--magritte-color-component-tag-background-on-surface-special-v24-6-0);
200
203
  }
201
- .magritte-tag_style-special___-IqT-_5-2-2.magritte-tag_state-disabled___2su23_5-2-2{
204
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
202
205
  background-color:var(--magritte-color-component-tag-background-state-special-disabled-v24-6-0);
203
206
  }
204
- .magritte-tag_style-special___-IqT-_5-2-2.magritte-tag_state-disabled___2su23_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
207
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
205
208
  color:var(--magritte-color-component-tag-text-state-special-disabled-v24-6-0);
206
209
  }
207
- .magritte-tag_style-special___-IqT-_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-disabled-icon-color-override___E6mEW_5-2-2{
210
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
208
211
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v24-6-0);
209
212
  }
210
- .magritte-tag_style-special___-IqT-_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
213
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
211
214
  background-color:var(--magritte-color-component-tag-background-state-on-surface-special-disabled-v24-6-0);
212
215
  }
213
- .magritte-tag_style-warning___4xBGB_5-2-2{
216
+ .magritte-tag_style-warning___4xBGB_5-3-0{
214
217
  background-color:var(--magritte-color-component-tag-background-warning-v24-6-0);
215
218
  }
216
- .magritte-tag_style-warning___4xBGB_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
219
+ .magritte-tag_style-warning___4xBGB_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
217
220
  color:var(--magritte-color-component-tag-text-warning-v24-6-0);
218
221
  }
219
- .magritte-tag_style-warning___4xBGB_5-2-2.magritte-icon-color-override___z7Qmm_5-2-2{
222
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
220
223
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v24-6-0);
221
224
  }
222
- .magritte-tag_style-warning___4xBGB_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
225
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
223
226
  background-color:var(--magritte-color-component-tag-background-on-surface-warning-v24-6-0);
224
227
  }
225
- .magritte-tag_style-warning___4xBGB_5-2-2.magritte-tag_state-disabled___2su23_5-2-2{
228
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
226
229
  background-color:var(--magritte-color-component-tag-background-state-warning-disabled-v24-6-0);
227
230
  }
228
- .magritte-tag_style-warning___4xBGB_5-2-2.magritte-tag_state-disabled___2su23_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
231
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
229
232
  color:var(--magritte-color-component-tag-text-state-warning-disabled-v24-6-0);
230
233
  }
231
- .magritte-tag_style-warning___4xBGB_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-disabled-icon-color-override___E6mEW_5-2-2{
234
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
232
235
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v24-6-0);
233
236
  }
234
- .magritte-tag_style-warning___4xBGB_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
237
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
235
238
  background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-6-0);
236
239
  }
237
- .magritte-tag_style-accent___WCqKw_5-2-2{
240
+ .magritte-tag_style-accent___WCqKw_5-3-0{
238
241
  background-color:var(--magritte-color-component-tag-background-accent-v24-6-0);
239
242
  }
240
- .magritte-tag_style-accent___WCqKw_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
243
+ .magritte-tag_style-accent___WCqKw_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
241
244
  color:var(--magritte-color-component-tag-text-accent-v24-6-0);
242
245
  }
243
- .magritte-tag_style-accent___WCqKw_5-2-2.magritte-icon-color-override___z7Qmm_5-2-2{
246
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
244
247
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-accent-v24-6-0);
245
248
  }
246
- .magritte-tag_style-accent___WCqKw_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
249
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
247
250
  background-color:var(--magritte-color-component-tag-background-on-surface-accent-v24-6-0);
248
251
  }
249
- .magritte-tag_style-accent___WCqKw_5-2-2.magritte-tag_state-disabled___2su23_5-2-2{
252
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
250
253
  background-color:var(--magritte-color-component-tag-background-state-accent-disabled-v24-6-0);
251
254
  }
252
- .magritte-tag_style-accent___WCqKw_5-2-2.magritte-tag_state-disabled___2su23_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
255
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
253
256
  color:var(--magritte-color-component-tag-text-state-accent-disabled-v24-6-0);
254
257
  }
255
- .magritte-tag_style-accent___WCqKw_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-disabled-icon-color-override___E6mEW_5-2-2{
258
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
256
259
  --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-accent-disabled-v24-6-0);
257
260
  }
258
- .magritte-tag_style-accent___WCqKw_5-2-2.magritte-tag_state-disabled___2su23_5-2-2.magritte-on-surface___-0Bc4_5-2-2{
261
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
259
262
  background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-6-0);
260
263
  }
261
- .magritte-tag_size-medium___Splpy_5-2-2{
264
+ .magritte-tag_size-medium___Splpy_5-3-0{
262
265
  border-radius:8px;
263
266
  padding:4px 8px;
264
267
  gap:4px;
@@ -266,10 +269,10 @@
266
269
  max-width:min(100%, 288px);
267
270
  box-sizing:border-box;
268
271
  }
269
- .magritte-tag_size-medium___Splpy_5-2-2 .magritte-tag__icon___Avk97_5-2-2{
272
+ .magritte-tag_size-medium___Splpy_5-3-0 .magritte-tag__icon___Avk97_5-3-0{
270
273
  padding:2px 0;
271
274
  }
272
- .magritte-tag_size-large___SWuug_5-2-2{
275
+ .magritte-tag_size-large___SWuug_5-3-0{
273
276
  border-radius:18px;
274
277
  padding:6px 10px;
275
278
  gap:2px;
@@ -277,7 +280,7 @@
277
280
  max-width:min(100%, 288px);
278
281
  box-sizing:border-box;
279
282
  }
280
- .magritte-tag_size-large___SWuug_5-2-2 .magritte-tag__label___YHV-o_5-2-2{
283
+ .magritte-tag_size-large___SWuug_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
281
284
  font-family:"hh sans";
282
285
  font-weight:500;
283
286
  line-height:22px;
@@ -288,10 +291,10 @@
288
291
  text-decoration:none;
289
292
  padding:1px 2px;
290
293
  }
291
- .magritte-tag_size-large___SWuug_5-2-2 .magritte-tag__icon___Avk97_5-2-2{
294
+ .magritte-tag_size-large___SWuug_5-3-0 .magritte-tag__icon___Avk97_5-3-0{
292
295
  padding:4px 0;
293
296
  }
294
- .magritte-tag__label___YHV-o_5-2-2{
297
+ .magritte-tag__label___YHV-o_5-3-0{
295
298
  font-family:"hh sans";
296
299
  font-weight:400;
297
300
  line-height:20px;
@@ -304,7 +307,45 @@
304
307
  overflow:hidden;
305
308
  white-space:nowrap;
306
309
  }
307
- .magritte-tag__icon___Avk97_5-2-2{
310
+ .magritte-tag__icon___Avk97_5-3-0{
308
311
  display:flex;
309
312
  flex-shrink:0;
310
313
  }
314
+ .magritte-tag_highlight___RmDYp_5-3-0::after{
315
+ content:'';
316
+ position:absolute;
317
+ top:0;
318
+ bottom:0;
319
+ left:0;
320
+ z-index:1;
321
+ width:50px;
322
+ pointer-events:none;
323
+ transform:translateX(-50px);
324
+ background:linear-gradient(292deg, rgba(255, 255, 255, 0) 29.2%, rgba(255, 255, 255, 0.8) 49.55%, rgba(255, 255, 255, 0) 69.9%);
325
+ opacity:0.8;
326
+ animation-name:magritte-tag-highlight-shine___8ZFPr_5-3-0;
327
+ animation-duration:var(--tag-highlight-duration);
328
+ animation-timing-function:linear;
329
+ animation-iteration-count:infinite;
330
+ animation-play-state:paused;
331
+ }
332
+ .magritte-tag_highlight___RmDYp_5-3-0[data-animation-synced='true'].magritte-tag_highlight___RmDYp_5-3-0::after{
333
+ animation-play-state:running;
334
+ animation-delay:var(--tag-highlight-delay, 0ms);
335
+ }
336
+ @media (prefers-reduced-motion: reduce){
337
+ .magritte-tag_highlight___RmDYp_5-3-0::after{
338
+ animation:none;
339
+ }
340
+ }
341
+ @keyframes magritte-tag-highlight-shine___8ZFPr_5-3-0{
342
+ 0%{
343
+ transform:translateX(-50px);
344
+ }
345
+ 36.5%{
346
+ transform:translateX(288px);
347
+ }
348
+ 100%{
349
+ transform:translateX(288px);
350
+ }
351
+ }
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import './index.css';
2
- export { Tag } from './Tag.js';
2
+ export { TAG_HIGHLIGHT_ANIMATION_CYCLE, Tag } from './Tag.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
5
5
  import 'classnames';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-tag",
3
- "version": "5.2.2",
3
+ "version": "5.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -31,5 +31,5 @@
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "ace8e156de2c5d2d5a3c2a7f1a66a49ca5a04817"
34
+ "gitHead": "f24f228ced9838279360783637ffa0cfad9886e9"
35
35
  }
package/types.d.ts CHANGED
@@ -5,6 +5,7 @@ type CommonTagProps = {
5
5
  size?: TagSize;
6
6
  disabled?: boolean;
7
7
  onSurface?: boolean;
8
+ highlight?: boolean;
8
9
  'data-qa'?: string;
9
10
  };
10
11
  export interface TagLabelProps extends CommonTagProps {