@snack-uikit/tag 0.12.11 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.13.0 (2025-04-07)
+
+
+### Features
+
+* **PDS-1785:** tag with tooltip ([aafae6a](https://github.com/cloud-ru-tech/snack-uikit/commit/aafae6ae8f3840f4d574e661fb8d11532a1823f3))
+
+
+
+
+
 ## 0.12.11 (2025-03-19)
 
 ### Only dependencies have been changed

package/README.md

@@ -20,6 +20,7 @@
 | tabIndex | `number` | - | tabIndex кнопки удаления |
 | onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
 | target | `string` | - |  |
+| tooltip | `TooltipProps` | - | Тултип над тегом |
 ## Tag
 ### Props
 | name | type | default value | description |
@@ -33,6 +34,7 @@
 | tabIndex | `number` | - | tabIndex кнопки удаления |
 | onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
 | target | `string` | - |  |
+| tooltip | `TooltipProps` | - | Тултип над тегом |
 ## TagRow
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/Tag/Tag.d.ts

@@ -1,5 +1,3 @@
-import { TagBaseProps } from '../TagBase';
-import { TagLinkProps } from '../TagLink';
-export type TagProps = TagBaseProps | TagLinkProps;
+import { TagLinkProps, TagProps } from '../../types';
 export declare function isTagLinkProps(props: TagProps): props is TagLinkProps;
 export declare function Tag(props: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Tag/Tag.js

@@ -6,14 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.isTagLinkProps = isTagLinkProps;
 exports.Tag = Tag;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tooltip_1 = require("@snack-uikit/tooltip");
 const TagBase_1 = require("../TagBase");
 const TagLink_1 = require("../TagLink");
 function isTagLinkProps(props) {
   return 'href' in props && props.href !== undefined;
 }
+function isTagWithTooltip(props) {
+  return 'tooltip' in props && props.tooltip !== undefined;
+}
 function Tag(props) {
-  if (isTagLinkProps(props)) {
-    return (0, jsx_runtime_1.jsx)(TagLink_1.TagLink, Object.assign({}, props));
+  const [restrictOpenTooltip, setRestrictOpenTooltip] = (0, react_1.useState)(false);
+  const isLinkTag = isTagLinkProps(props);
+  if (!isTagWithTooltip(props)) {
+    return isLinkTag ? (0, jsx_runtime_1.jsx)(TagLink_1.TagLink, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(TagBase_1.TagBase, Object.assign({}, props));
   }
-  return (0, jsx_runtime_1.jsx)(TagBase_1.TagBase, Object.assign({}, props));
+  const {
+    tooltip
+  } = props;
+  const tooltipProps = tooltip && Object.assign(Object.assign({}, tooltip), {
+    open: restrictOpenTooltip ? false : tooltip.open
+  });
+  const tagBaseWithTooltipProps = Object.assign(Object.assign({}, props), {
+    changeRestrictTooltipState: setRestrictOpenTooltip
+  });
+  return (0, jsx_runtime_1.jsx)(tooltip_1.WithTooltip, {
+    tooltip: tooltipProps,
+    children: isLinkTag ? (0, jsx_runtime_1.jsx)(TagLink_1.TagLink, Object.assign({}, props)) : (0, jsx_runtime_1.jsx)(TagBase_1.TagBase, Object.assign({}, tagBaseWithTooltipProps))
+  });
 }

package/dist/cjs/components/TagBase/TagBase.d.ts

@@ -1,8 +1,5 @@
-import { MouseEventHandler } from 'react';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { CommonTagProps } from '../../types';
-export type TagBaseProps = WithSupportProps<{
-    /** Коллбэк на удаление */
-    onDelete?: MouseEventHandler<HTMLButtonElement>;
-}> & CommonTagProps;
-export declare function TagBase({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagBaseProps): import("react/jsx-runtime").JSX.Element;
+import { ManageRestrictTooltipProps, TagBaseProps } from '../../types';
+type TagBaseWithTooltip = TagBaseProps & ManageRestrictTooltipProps;
+type TagBaseComponentProps = TagBaseProps | TagBaseWithTooltip;
+export declare function TagBase(props: TagBaseComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/TagBase/TagBase.js

@@ -19,36 +19,63 @@ Object.defineProperty(exports, "__esModule", {
 exports.TagBase = TagBase;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const icons_1 = require("@snack-uikit/icons");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function TagBase(_a) {
-  var {
+function isTagWithTooltip(props) {
+  return 'changeRestrictTooltipState' in props && props.changeRestrictTooltipState !== undefined;
+}
+function TagBase(props) {
+  const {
       label,
       size = constants_1.SIZE.Xs,
       appearance = constants_1.APPEARANCE.Neutral,
       onDelete,
       className,
       tabIndex
-    } = _a,
-    rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+    } = props,
+    rest = __rest(props, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+  const deleteButtonRef = (0, react_1.useRef)(null);
+  const isRemovable = Boolean(onDelete);
+  const handleMouseEvents = isEntering => {
+    if (isRemovable && isTagWithTooltip(props)) {
+      const {
+        changeRestrictTooltipState
+      } = props;
+      changeRestrictTooltipState(isEntering);
+    }
+  };
+  const handleMouseEnter = event => {
+    var _a;
+    if ((_a = deleteButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+      handleMouseEvents(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    handleMouseEvents(false);
+  };
   return (0, jsx_runtime_1.jsxs)("span", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
     className: (0, classnames_1.default)(styles_module_scss_1.default.tag, className),
     "data-size": size,
     "data-appearance": appearance,
-    "data-removable": Boolean(onDelete),
+    "data-removable": isRemovable,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
     children: [(0, jsx_runtime_1.jsx)("span", {
-      title: label,
       className: styles_module_scss_1.default.label,
       children: label
-    }), onDelete && (0, jsx_runtime_1.jsx)("button", {
+    }), isRemovable && (0, jsx_runtime_1.jsx)("button", {
       type: 'button',
       className: styles_module_scss_1.default.tagButton,
       onClick: onDelete,
       "data-test-id": 'tag-remove-button',
       tabIndex: tabIndex,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ref: deleteButtonRef,
       children: size === constants_1.SIZE.Xs ? (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
         size: constants_2.ICON_SIZE[size],
         className: styles_module_scss_1.default.icon

package/dist/cjs/components/TagLink/TagLink.d.ts

@@ -1,9 +1,2 @@
-import { MouseEvent } from 'react';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { CommonTagProps } from '../../types';
-export type TagLinkProps = WithSupportProps<CommonTagProps> & {
-    href: string;
-    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
-    target?: HTMLAnchorElement['target'];
-};
+import { TagLinkProps } from '../../types';
 export declare function TagLink({ label, size, appearance, className, tabIndex, href, onClick, target, ...rest }: TagLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/TagLink/TagLink.js

@@ -43,7 +43,6 @@ function TagLink(_a) {
     target: target,
     onClick: onClick,
     children: (0, jsx_runtime_1.jsx)("span", {
-      title: label,
       className: styles_module_scss_1.default.label,
       children: label
     })

package/dist/cjs/components/TagRow/utils.d.ts

@@ -1,2 +1,2 @@
 import { TagRowItem, TagRowItemInner } from '../../types';
-export declare const mapTagRowItem: ({ label, appearance }: TagRowItem) => TagRowItemInner;
+export declare const mapTagRowItem: ({ appearance, ...props }: TagRowItem) => TagRowItemInner;

package/dist/cjs/components/TagRow/utils.js

@@ -1,24 +1,25 @@
 "use strict";
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.mapTagRowItem = void 0;
 const constants_1 = require("../../constants");
-const mapTagRowItem = _ref => {
-  let {
-    label,
+const mapTagRowItem = _a => {
+  var {
+      appearance = constants_1.APPEARANCE.Neutral
+    } = _a,
+    props = __rest(_a, ["appearance"]);
+  return Object.assign(Object.assign({}, props), {
     appearance
-  } = _ref;
-  if (appearance) {
-    return {
-      label,
-      appearance
-    };
-  }
-  return {
-    label,
-    appearance: constants_1.APPEARANCE.Neutral
-  };
+  });
 };
 exports.mapTagRowItem = mapTagRowItem;

package/dist/cjs/helperComponents/TagList/TagList.js

@@ -18,12 +18,10 @@ function renderTag(size, handleRemoveItem, setRef) {
     return (0, jsx_runtime_1.jsx)("div", {
       ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index),
       className: styles_module_scss_1.default.tagWrapper,
-      children: (0, jsx_runtime_1.jsx)(components_1.Tag, {
-        label: item.label,
-        appearance: item.appearance,
+      children: (0, jsx_runtime_1.jsx)(components_1.Tag, Object.assign({
         size: size,
         onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item)
-      })
+      }, item))
     }, item.label);
   };
 }

package/dist/cjs/index.d.ts

@@ -1,3 +1,3 @@
 export * from './components';
 export * from './constants';
-export type { Appearance, Size, TagRowItem } from './types';
+export type { Appearance, Size, TagRowItem, TagProps } from './types';

package/dist/cjs/types.d.ts

@@ -1,5 +1,6 @@
-import { MouseEvent } from 'react';
-import { ValueOf } from '@snack-uikit/utils';
+import { MouseEvent, MouseEventHandler } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
@@ -8,14 +9,17 @@ export type LinkProps = {
     onClick?(e: MouseEvent<HTMLAnchorElement>): void;
     target?: HTMLAnchorElement['target'];
 };
+export type TagTooltipProps = {
+    /** Тултип над тегом */
+    tooltip?: TooltipProps;
+};
 export type TagRowItem = {
     label: string;
     appearance?: Appearance;
-} & Partial<LinkProps>;
-export type TagRowItemInner = {
-    label: string;
+} & Partial<LinkProps> & TagTooltipProps;
+export type TagRowItemInner = Omit<TagRowItem, 'appearance'> & {
     appearance: Appearance;
-} & Partial<LinkProps>;
+};
 export type CommonTagProps = {
     /** Текст */
     label: string;
@@ -28,3 +32,19 @@ export type CommonTagProps = {
     /** tabIndex кнопки удаления */
     tabIndex?: number;
 };
+export type TagBaseProps = WithSupportProps<{
+    /** Коллбэк на удаление */
+    onDelete?: MouseEventHandler<HTMLButtonElement>;
+}> & CommonTagProps;
+export type TagLinkProps = WithSupportProps<CommonTagProps> & {
+    href: string;
+    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+    target?: HTMLAnchorElement['target'];
+};
+export type ManageRestrictTooltipProps = {
+    changeRestrictTooltipState(state: boolean): void;
+};
+type TagWithoutTooltipProps = TagBaseProps | TagLinkProps;
+export type TagWithTooltipProps = TagWithoutTooltipProps & TagTooltipProps;
+export type TagProps = TagWithoutTooltipProps | TagWithTooltipProps;
+export {};

package/dist/esm/components/Tag/Tag.d.ts

@@ -1,5 +1,3 @@
-import { TagBaseProps } from '../TagBase';
-import { TagLinkProps } from '../TagLink';
-export type TagProps = TagBaseProps | TagLinkProps;
+import { TagLinkProps, TagProps } from '../../types';
 export declare function isTagLinkProps(props: TagProps): props is TagLinkProps;
 export declare function Tag(props: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Tag/Tag.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { WithTooltip } from '@snack-uikit/tooltip';
 import { TagBase } from '../TagBase';
 import { TagLink } from '../TagLink';
 export function isTagLinkProps(props) {
     return 'href' in props && props.href !== undefined;
 }
+function isTagWithTooltip(props) {
+    return 'tooltip' in props && props.tooltip !== undefined;
+}
 export function Tag(props) {
-    if (isTagLinkProps(props)) {
-        return _jsx(TagLink, Object.assign({}, props));
+    const [restrictOpenTooltip, setRestrictOpenTooltip] = useState(false);
+    const isLinkTag = isTagLinkProps(props);
+    if (!isTagWithTooltip(props)) {
+        return isLinkTag ? _jsx(TagLink, Object.assign({}, props)) : _jsx(TagBase, Object.assign({}, props));
     }
-    return _jsx(TagBase, Object.assign({}, props));
+    const { tooltip } = props;
+    const tooltipProps = tooltip && Object.assign(Object.assign({}, tooltip), { open: restrictOpenTooltip ? false : tooltip.open });
+    const tagBaseWithTooltipProps = Object.assign(Object.assign({}, props), { changeRestrictTooltipState: setRestrictOpenTooltip });
+    return (_jsx(WithTooltip, { tooltip: tooltipProps, children: isLinkTag ? _jsx(TagLink, Object.assign({}, props)) : _jsx(TagBase, Object.assign({}, tagBaseWithTooltipProps)) }));
 }

package/dist/esm/components/TagBase/TagBase.d.ts

@@ -1,8 +1,5 @@
-import { MouseEventHandler } from 'react';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { CommonTagProps } from '../../types';
-export type TagBaseProps = WithSupportProps<{
-    /** Коллбэк на удаление */
-    onDelete?: MouseEventHandler<HTMLButtonElement>;
-}> & CommonTagProps;
-export declare function TagBase({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagBaseProps): import("react/jsx-runtime").JSX.Element;
+import { ManageRestrictTooltipProps, TagBaseProps } from '../../types';
+type TagBaseWithTooltip = TagBaseProps & ManageRestrictTooltipProps;
+type TagBaseComponentProps = TagBaseProps | TagBaseWithTooltip;
+export declare function TagBase(props: TagBaseComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/TagBase/TagBase.js

@@ -11,12 +11,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { useRef } from 'react';
 import { CrossSVG } from '@snack-uikit/icons';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE } from '../../constants';
 import { ICON_SIZE } from './constants';
 import styles from './styles.module.css';
-export function TagBase(_a) {
-    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className, tabIndex } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
-    return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": Boolean(onDelete), children: [_jsx("span", { title: label, className: styles.label, children: label }), onDelete && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', tabIndex: tabIndex, children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
+function isTagWithTooltip(props) {
+    return 'changeRestrictTooltipState' in props && props.changeRestrictTooltipState !== undefined;
+}
+export function TagBase(props) {
+    const { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className, tabIndex } = props, rest = __rest(props, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+    const deleteButtonRef = useRef(null);
+    const isRemovable = Boolean(onDelete);
+    const handleMouseEvents = (isEntering) => {
+        if (isRemovable && isTagWithTooltip(props)) {
+            const { changeRestrictTooltipState } = props;
+            changeRestrictTooltipState(isEntering);
+        }
+    };
+    const handleMouseEnter = (event) => {
+        var _a;
+        if ((_a = deleteButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+            handleMouseEvents(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        handleMouseEvents(false);
+    };
+    return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": isRemovable, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("span", { className: styles.label, children: label }), isRemovable && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', tabIndex: tabIndex, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: deleteButtonRef, children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
 }

package/dist/esm/components/TagLink/TagLink.d.ts

@@ -1,9 +1,2 @@
-import { MouseEvent } from 'react';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { CommonTagProps } from '../../types';
-export type TagLinkProps = WithSupportProps<CommonTagProps> & {
-    href: string;
-    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
-    target?: HTMLAnchorElement['target'];
-};
+import { TagLinkProps } from '../../types';
 export declare function TagLink({ label, size, appearance, className, tabIndex, href, onClick, target, ...rest }: TagLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/TagLink/TagLink.js

@@ -16,5 +16,5 @@ import { APPEARANCE, SIZE } from '../../constants';
 import styles from './styles.module.css';
 export function TagLink(_a) {
     var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, className, tabIndex, href, onClick, target } = _a, rest = __rest(_a, ["label", "size", "appearance", "className", "tabIndex", "href", "onClick", "target"]);
-    return (_jsx("a", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, tabIndex: tabIndex, href: href, target: target, onClick: onClick, children: _jsx("span", { title: label, className: styles.label, children: label }) })));
+    return (_jsx("a", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, tabIndex: tabIndex, href: href, target: target, onClick: onClick, children: _jsx("span", { className: styles.label, children: label }) })));
 }

package/dist/esm/components/TagRow/utils.d.ts

@@ -1,2 +1,2 @@
 import { TagRowItem, TagRowItemInner } from '../../types';
-export declare const mapTagRowItem: ({ label, appearance }: TagRowItem) => TagRowItemInner;
+export declare const mapTagRowItem: ({ appearance, ...props }: TagRowItem) => TagRowItemInner;

package/dist/esm/components/TagRow/utils.js

@@ -1,10 +1,16 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { APPEARANCE } from '../../constants';
-export const mapTagRowItem = ({ label, appearance }) => {
-    if (appearance) {
-        return { label, appearance };
-    }
-    return {
-        label,
-        appearance: APPEARANCE.Neutral,
-    };
+export const mapTagRowItem = (_a) => {
+    var { appearance = APPEARANCE.Neutral } = _a, props = __rest(_a, ["appearance"]);
+    return (Object.assign(Object.assign({}, props), { appearance }));
 };

package/dist/esm/helperComponents/TagList/TagList.js

@@ -4,7 +4,7 @@ import { SIZE } from '../../constants';
 import styles from './styles.module.css';
 function renderTag(size, handleRemoveItem, setRef) {
     return function TagRowItem(item, index) {
-        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), className: styles.tagWrapper, children: _jsx(Tag, { label: item.label, appearance: item.appearance, size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }) }, item.label));
+        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), className: styles.tagWrapper, children: _jsx(Tag, Object.assign({ size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }, item)) }, item.label));
     };
 }
 export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef }) {

package/dist/esm/index.d.ts

@@ -1,3 +1,3 @@
 export * from './components';
 export * from './constants';
-export type { Appearance, Size, TagRowItem } from './types';
+export type { Appearance, Size, TagRowItem, TagProps } from './types';

package/dist/esm/types.d.ts

@@ -1,5 +1,6 @@
-import { MouseEvent } from 'react';
-import { ValueOf } from '@snack-uikit/utils';
+import { MouseEvent, MouseEventHandler } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
@@ -8,14 +9,17 @@ export type LinkProps = {
     onClick?(e: MouseEvent<HTMLAnchorElement>): void;
     target?: HTMLAnchorElement['target'];
 };
+export type TagTooltipProps = {
+    /** Тултип над тегом */
+    tooltip?: TooltipProps;
+};
 export type TagRowItem = {
     label: string;
     appearance?: Appearance;
-} & Partial<LinkProps>;
-export type TagRowItemInner = {
-    label: string;
+} & Partial<LinkProps> & TagTooltipProps;
+export type TagRowItemInner = Omit<TagRowItem, 'appearance'> & {
     appearance: Appearance;
-} & Partial<LinkProps>;
+};
 export type CommonTagProps = {
     /** Текст */
     label: string;
@@ -28,3 +32,19 @@ export type CommonTagProps = {
     /** tabIndex кнопки удаления */
     tabIndex?: number;
 };
+export type TagBaseProps = WithSupportProps<{
+    /** Коллбэк на удаление */
+    onDelete?: MouseEventHandler<HTMLButtonElement>;
+}> & CommonTagProps;
+export type TagLinkProps = WithSupportProps<CommonTagProps> & {
+    href: string;
+    onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+    target?: HTMLAnchorElement['target'];
+};
+export type ManageRestrictTooltipProps = {
+    changeRestrictTooltipState(state: boolean): void;
+};
+type TagWithoutTooltipProps = TagBaseProps | TagLinkProps;
+export type TagWithTooltipProps = TagWithoutTooltipProps & TagTooltipProps;
+export type TagProps = TagWithoutTooltipProps | TagWithTooltipProps;
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.12.11",
+  "version": "0.13.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,8 +39,9 @@
     "@snack-uikit/dropdown": "0.4.7",
     "@snack-uikit/icons": "0.26.2",
     "@snack-uikit/scroll": "0.9.5",
+    "@snack-uikit/tooltip": "0.17.1",
     "@snack-uikit/utils": "3.8.1",
     "classnames": "2.5.1"
   },
-  "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
+  "gitHead": "f429c3e85872bce0e7a9b06054840b6f761a546c"
 }

package/src/components/Tag/Tag.tsx

@@ -1,16 +1,38 @@
-import { TagBase, TagBaseProps } from '../TagBase';
-import { TagLink, TagLinkProps } from '../TagLink';
+import { useState } from 'react';
 
-export type TagProps = TagBaseProps | TagLinkProps;
+import { WithTooltip } from '@snack-uikit/tooltip';
+
+import { TagLinkProps, TagProps, TagWithTooltipProps } from '../../types';
+import { TagBase } from '../TagBase';
+import { TagLink } from '../TagLink';
 
 export function isTagLinkProps(props: TagProps): props is TagLinkProps {
   return 'href' in props && props.href !== undefined;
 }
 
+function isTagWithTooltip(props: TagProps): props is TagWithTooltipProps {
+  return 'tooltip' in props && props.tooltip !== undefined;
+}
+
 export function Tag(props: TagProps) {
-  if (isTagLinkProps(props)) {
-    return <TagLink {...props} />;
+  const [restrictOpenTooltip, setRestrictOpenTooltip] = useState(false);
+  const isLinkTag = isTagLinkProps(props);
+
+  if (!isTagWithTooltip(props)) {
+    return isLinkTag ? <TagLink {...props} /> : <TagBase {...props} />;
   }
 
-  return <TagBase {...props} />;
+  const { tooltip } = props;
+  const tooltipProps = tooltip && {
+    ...tooltip,
+    open: restrictOpenTooltip ? false : tooltip.open,
+  };
+
+  const tagBaseWithTooltipProps = { ...props, changeRestrictTooltipState: setRestrictOpenTooltip };
+
+  return (
+    <WithTooltip tooltip={tooltipProps}>
+      {isLinkTag ? <TagLink {...props} /> : <TagBase {...tagBaseWithTooltipProps} />}
+    </WithTooltip>
+  );
 }

package/src/components/TagBase/TagBase.tsx

@@ -1,47 +1,66 @@
 import cn from 'classnames';
-import { MouseEventHandler } from 'react';
+import { MouseEvent, useRef } from 'react';
 
 import { CrossSVG } from '@snack-uikit/icons';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE } from '../../constants';
-import { CommonTagProps } from '../../types';
+import { ManageRestrictTooltipProps, TagBaseProps } from '../../types';
 import { ICON_SIZE } from './constants';
 import styles from './styles.module.scss';
 
-export type TagBaseProps = WithSupportProps<{
-  /** Коллбэк на удаление */
-  onDelete?: MouseEventHandler<HTMLButtonElement>;
-}> &
-  CommonTagProps;
-
-export function TagBase({
-  label,
-  size = SIZE.Xs,
-  appearance = APPEARANCE.Neutral,
-  onDelete,
-  className,
-  tabIndex,
-  ...rest
-}: TagBaseProps) {
+type TagBaseWithTooltip = TagBaseProps & ManageRestrictTooltipProps;
+type TagBaseComponentProps = TagBaseProps | TagBaseWithTooltip;
+
+function isTagWithTooltip(props: TagBaseProps): props is TagBaseWithTooltip {
+  return 'changeRestrictTooltipState' in props && props.changeRestrictTooltipState !== undefined;
+}
+
+export function TagBase(props: TagBaseComponentProps) {
+  const { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className, tabIndex, ...rest } = props;
+
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
+
+  const isRemovable = Boolean(onDelete);
+
+  const handleMouseEvents = (isEntering: boolean) => {
+    if (isRemovable && isTagWithTooltip(props)) {
+      const { changeRestrictTooltipState } = props;
+      changeRestrictTooltipState(isEntering);
+    }
+  };
+
+  const handleMouseEnter = (event: MouseEvent<HTMLButtonElement>) => {
+    if (deleteButtonRef.current?.contains(event.target as Node)) {
+      handleMouseEvents(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    handleMouseEvents(false);
+  };
+
   return (
     <span
       {...extractSupportProps(rest)}
       className={cn(styles.tag, className)}
       data-size={size}
       data-appearance={appearance}
-      data-removable={Boolean(onDelete)}
+      data-removable={isRemovable}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
-      <span title={label} className={styles.label}>
-        {label}
-      </span>
-      {onDelete && (
+      <span className={styles.label}>{label}</span>
+      {isRemovable && (
         <button
           type='button'
           className={styles.tagButton}
           onClick={onDelete}
           data-test-id='tag-remove-button'
           tabIndex={tabIndex}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          ref={deleteButtonRef}
         >
           {size === SIZE.Xs ? (
             <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />

package/src/components/TagLink/TagLink.tsx

@@ -1,18 +1,11 @@
 import cn from 'classnames';
-import { MouseEvent } from 'react';
 
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE } from '../../constants';
-import { CommonTagProps } from '../../types';
+import { TagLinkProps } from '../../types';
 import styles from './styles.module.scss';
 
-export type TagLinkProps = WithSupportProps<CommonTagProps> & {
-  href: string;
-  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
-  target?: HTMLAnchorElement['target'];
-};
-
 export function TagLink({
   label,
   size = SIZE.Xs,
@@ -35,9 +28,7 @@ export function TagLink({
       target={target}
       onClick={onClick}
     >
-      <span title={label} className={styles.label}>
-        {label}
-      </span>
+      <span className={styles.label}>{label}</span>
     </a>
   );
 }

package/src/components/TagRow/utils.ts

@@ -1,13 +1,7 @@
 import { APPEARANCE } from '../../constants';
 import { TagRowItem, TagRowItemInner } from '../../types';
 
-export const mapTagRowItem = ({ label, appearance }: TagRowItem): TagRowItemInner => {
-  if (appearance) {
-    return { label, appearance };
-  }
-
-  return {
-    label,
-    appearance: APPEARANCE.Neutral,
-  };
-};
+export const mapTagRowItem = ({ appearance = APPEARANCE.Neutral, ...props }: TagRowItem): TagRowItemInner => ({
+  ...props,
+  appearance,
+});

package/src/helperComponents/TagList/TagList.tsx

@@ -20,7 +20,7 @@ function renderTag(size: Size, handleRemoveItem?: (item: TagRowItemInner) => OnD
   return function TagRowItem(item: TagRowItemInner, index: number) {
     return (
       <div key={item.label} ref={setRef?.(item, index)} className={styles.tagWrapper}>
-        <Tag label={item.label} appearance={item.appearance} size={size} onDelete={handleRemoveItem?.(item)} />
+        <Tag size={size} onDelete={handleRemoveItem?.(item)} {...item} />
       </div>
     );
   };

package/src/index.ts

@@ -1,3 +1,3 @@
 export * from './components';
 export * from './constants';
-export type { Appearance, Size, TagRowItem } from './types';
+export type { Appearance, Size, TagRowItem, TagProps } from './types';

package/src/types.ts

@@ -1,6 +1,7 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, MouseEventHandler } from 'react';
 
-import { ValueOf } from '@snack-uikit/utils';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE } from './constants';
 
@@ -14,15 +15,20 @@ export type LinkProps = {
   target?: HTMLAnchorElement['target'];
 };
 
+export type TagTooltipProps = {
+  /** Тултип над тегом */
+  tooltip?: TooltipProps;
+};
+
 export type TagRowItem = {
   label: string;
   appearance?: Appearance;
-} & Partial<LinkProps>;
+} & Partial<LinkProps> &
+  TagTooltipProps;
 
-export type TagRowItemInner = {
-  label: string;
+export type TagRowItemInner = Omit<TagRowItem, 'appearance'> & {
   appearance: Appearance;
-} & Partial<LinkProps>;
+};
 
 export type CommonTagProps = {
   /** Текст */
@@ -36,3 +42,24 @@ export type CommonTagProps = {
   /** tabIndex кнопки удаления */
   tabIndex?: number;
 };
+
+export type TagBaseProps = WithSupportProps<{
+  /** Коллбэк на удаление */
+  onDelete?: MouseEventHandler<HTMLButtonElement>;
+}> &
+  CommonTagProps;
+
+export type TagLinkProps = WithSupportProps<CommonTagProps> & {
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+  target?: HTMLAnchorElement['target'];
+};
+
+export type ManageRestrictTooltipProps = {
+  changeRestrictTooltipState(state: boolean): void;
+};
+
+type TagWithoutTooltipProps = TagBaseProps | TagLinkProps;
+export type TagWithTooltipProps = TagWithoutTooltipProps & TagTooltipProps;
+
+export type TagProps = TagWithoutTooltipProps | TagWithTooltipProps;