@snack-uikit/tag 0.12.9 → 0.12.11-preview-bb8e00d0.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.12.10 (2025-03-17)
+
+### Only dependencies have been changed
+* [@snack-uikit/dropdown@0.4.7](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/dropdown/CHANGELOG.md)
+* [@snack-uikit/icons@0.26.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/scroll@0.9.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
+* [@snack-uikit/utils@3.8.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
 ## 0.12.9 (2025-03-14)
 
 ### Only dependencies have been changed

package/README.md

@@ -18,6 +18,7 @@
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Внешний вид |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | tabIndex кнопки удаления |
+| tooltip | `TooltipProps` | - | Тултип над тегом |
 | onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
 | target | `string` | - |  |
 ## Tag
@@ -31,6 +32,7 @@
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Внешний вид |
 | className | `string` | - | CSS-класс |
 | tabIndex | `number` | - | tabIndex кнопки удаления |
+| tooltip | `TooltipProps` | - | Тултип над тегом |
 | onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
 | target | `string` | - |  |
 ## TagRow

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

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

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

@@ -1,19 +1,45 @@
 "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.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 Tag(props) {
-  if (isTagLinkProps(props)) {
-    return (0, jsx_runtime_1.jsx)(TagLink_1.TagLink, Object.assign({}, props));
-  }
-  return (0, jsx_runtime_1.jsx)(TagBase_1.TagBase, Object.assign({}, props));
+function isRemovable(props) {
+  return 'onDelete' in props && props.onDelete !== undefined;
+}
+function Tag(_a) {
+  var {
+      tooltip
+    } = _a,
+    props = __rest(_a, ["tooltip"]);
+  const [restrictOpenTooltip, setRestrictOpenTooltip] = (0, react_1.useState)(false);
+  const removable = isRemovable(props);
+  const TagComponent = isTagLinkProps(props) ? TagLink_1.TagLink : TagBase_1.TagBase;
+  const TagWithTooltip = (0, tooltip_1.useElementWithTooltip)({
+    Element: TagComponent,
+    tooltip: tooltip && Object.assign(Object.assign({}, tooltip), {
+      open: removable && restrictOpenTooltip ? false : tooltip.open
+    })
+  });
+  const tagProps = Object.assign(Object.assign({}, props), {
+    changeRestrictTooltipState: setRestrictOpenTooltip
+  });
+  return (0, jsx_runtime_1.jsx)(TagWithTooltip, Object.assign({}, tagProps));
 }

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

@@ -1,8 +1,3 @@
-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 { ManageRestrictPopoverProps, TagBaseProps } from '../../types';
+export type TagBaseComponentProps = TagBaseProps & ManageRestrictPopoverProps;
+export declare function TagBase({ label, size, appearance, onDelete, className, tabIndex, changeRestrictTooltipState, ...rest }: TagBaseComponentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -19,6 +19,7 @@ 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");
@@ -31,24 +32,46 @@ function TagBase(_a) {
       appearance = constants_1.APPEARANCE.Neutral,
       onDelete,
       className,
-      tabIndex
+      tabIndex,
+      changeRestrictTooltipState
     } = _a,
-    rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+    rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex", "changeRestrictTooltipState"]);
+  const deleteButtonRef = (0, react_1.useRef)(null);
+  const isRemovable = Boolean(onDelete);
+  const handleMouseEnter = event => {
+    var _a;
+    if (!isRemovable) {
+      return;
+    }
+    if ((_a = deleteButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+      changeRestrictTooltipState(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (!isRemovable) {
+      return;
+    }
+    changeRestrictTooltipState(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,3 @@
-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'];
-};
-export declare function TagLink({ label, size, appearance, className, tabIndex, href, onClick, target, ...rest }: TagLinkProps): import("react/jsx-runtime").JSX.Element;
+import { ManageRestrictPopoverProps, TagLinkProps } from '../../types';
+export type TagLinkComponentProps = TagLinkProps & ManageRestrictPopoverProps;
+export declare function TagLink({ label, size, appearance, className, tabIndex, href, onClick, target, ...rest }: TagLinkComponentProps): 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/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>;
@@ -28,3 +29,19 @@ export type CommonTagProps = {
     /** tabIndex кнопки удаления */
     tabIndex?: number;
 };
+export type TagTooltipProps = {
+    /** Тултип над тегом */
+    tooltip?: TooltipProps;
+};
+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 ManageRestrictPopoverProps = {
+    changeRestrictTooltipState: (state: boolean) => void;
+};

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

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

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

@@ -1,12 +1,34 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useElementWithTooltip } from '@snack-uikit/tooltip';
 import { TagBase } from '../TagBase';
 import { TagLink } from '../TagLink';
 export function isTagLinkProps(props) {
     return 'href' in props && props.href !== undefined;
 }
-export function Tag(props) {
-    if (isTagLinkProps(props)) {
-        return _jsx(TagLink, Object.assign({}, props));
-    }
-    return _jsx(TagBase, Object.assign({}, props));
+function isRemovable(props) {
+    return 'onDelete' in props && props.onDelete !== undefined;
+}
+export function Tag(_a) {
+    var { tooltip } = _a, props = __rest(_a, ["tooltip"]);
+    const [restrictOpenTooltip, setRestrictOpenTooltip] = useState(false);
+    const removable = isRemovable(props);
+    const TagComponent = isTagLinkProps(props) ? TagLink : TagBase;
+    const TagWithTooltip = useElementWithTooltip({
+        Element: TagComponent,
+        tooltip: tooltip && Object.assign(Object.assign({}, tooltip), { open: removable && restrictOpenTooltip ? false : tooltip.open }),
+    });
+    const tagProps = Object.assign(Object.assign({}, props), { changeRestrictTooltipState: setRestrictOpenTooltip });
+    return _jsx(TagWithTooltip, Object.assign({}, tagProps));
 }

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

@@ -1,8 +1,3 @@
-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 { ManageRestrictPopoverProps, TagBaseProps } from '../../types';
+export type TagBaseComponentProps = TagBaseProps & ManageRestrictPopoverProps;
+export declare function TagBase({ label, size, appearance, onDelete, className, tabIndex, changeRestrictTooltipState, ...rest }: TagBaseComponentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,12 +11,30 @@ 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 })) }))] })));
+    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className, tabIndex, changeRestrictTooltipState } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex", "changeRestrictTooltipState"]);
+    const deleteButtonRef = useRef(null);
+    const isRemovable = Boolean(onDelete);
+    const handleMouseEnter = (event) => {
+        var _a;
+        if (!isRemovable) {
+            return;
+        }
+        if ((_a = deleteButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+            changeRestrictTooltipState(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (!isRemovable) {
+            return;
+        }
+        changeRestrictTooltipState(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,3 @@
-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'];
-};
-export declare function TagLink({ label, size, appearance, className, tabIndex, href, onClick, target, ...rest }: TagLinkProps): import("react/jsx-runtime").JSX.Element;
+import { ManageRestrictPopoverProps, TagLinkProps } from '../../types';
+export type TagLinkComponentProps = TagLinkProps & ManageRestrictPopoverProps;
+export declare function TagLink({ label, size, appearance, className, tabIndex, href, onClick, target, ...rest }: TagLinkComponentProps): 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/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>;
@@ -28,3 +29,19 @@ export type CommonTagProps = {
     /** tabIndex кнопки удаления */
     tabIndex?: number;
 };
+export type TagTooltipProps = {
+    /** Тултип над тегом */
+    tooltip?: TooltipProps;
+};
+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 ManageRestrictPopoverProps = {
+    changeRestrictTooltipState: (state: boolean) => void;
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.12.9",
+  "version": "0.12.11-preview-bb8e00d0.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/dropdown": "0.4.6",
-    "@snack-uikit/icons": "0.26.0",
-    "@snack-uikit/scroll": "0.9.4",
-    "@snack-uikit/utils": "3.8.0",
+    "@snack-uikit/dropdown": "0.4.7",
+    "@snack-uikit/icons": "0.26.1",
+    "@snack-uikit/scroll": "0.9.5",
+    "@snack-uikit/tooltip": "0.17.0",
+    "@snack-uikit/utils": "3.8.1",
     "classnames": "2.5.1"
   },
-  "gitHead": "b27699a7db8812f2d06c49346d1b4ab6d0d8c24e"
+  "gitHead": "6b680ebf8141ff9a3f2f060c983839ce9d8c4d3a"
 }

package/src/components/Tag/Tag.tsx

@@ -1,16 +1,38 @@
-import { TagBase, TagBaseProps } from '../TagBase';
-import { TagLink, TagLinkProps } from '../TagLink';
+import { JSXElementConstructor, useState } from 'react';
 
-export type TagProps = TagBaseProps | TagLinkProps;
+import { useElementWithTooltip } from '@snack-uikit/tooltip';
+
+import { TagBaseProps, TagLinkProps, TagTooltipProps } from '../../types';
+import { TagBase } from '../TagBase';
+import { TagLink } from '../TagLink';
+
+export type TagProps = (TagBaseProps | TagLinkProps) & TagTooltipProps;
+
+type ExtractTagProps<T> = T extends JSXElementConstructor<infer P> | ((props: infer P) => JSX.Element) ? P : never;
 
 export function isTagLinkProps(props: TagProps): props is TagLinkProps {
   return 'href' in props && props.href !== undefined;
 }
 
-export function Tag(props: TagProps) {
-  if (isTagLinkProps(props)) {
-    return <TagLink {...props} />;
-  }
+function isRemovable(props: TagProps): props is TagLinkProps {
+  return 'onDelete' in props && props.onDelete !== undefined;
+}
+
+export function Tag({ tooltip, ...props }: TagProps) {
+  const [restrictOpenTooltip, setRestrictOpenTooltip] = useState(false);
+  const removable = isRemovable(props);
+
+  const TagComponent = isTagLinkProps(props) ? TagLink : TagBase;
+  const TagWithTooltip = useElementWithTooltip({
+    Element: TagComponent,
+    tooltip: tooltip && {
+      ...tooltip,
+      open: removable && restrictOpenTooltip ? false : tooltip.open,
+    },
+  });
 
-  return <TagBase {...props} />;
+  const tagProps = { ...props, changeRestrictTooltipState: setRestrictOpenTooltip } as ExtractTagProps<
+    typeof TagWithTooltip
+  >;
+  return <TagWithTooltip {...tagProps} />;
 }

package/src/components/TagBase/TagBase.tsx

@@ -1,19 +1,15 @@
 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 { ManageRestrictPopoverProps, TagBaseProps } from '../../types';
 import { ICON_SIZE } from './constants';
 import styles from './styles.module.scss';
 
-export type TagBaseProps = WithSupportProps<{
-  /** Коллбэк на удаление */
-  onDelete?: MouseEventHandler<HTMLButtonElement>;
-}> &
-  CommonTagProps;
+export type TagBaseComponentProps = TagBaseProps & ManageRestrictPopoverProps;
 
 export function TagBase({
   label,
@@ -22,26 +18,52 @@ export function TagBase({
   onDelete,
   className,
   tabIndex,
+  changeRestrictTooltipState,
   ...rest
-}: TagBaseProps) {
+}: TagBaseComponentProps) {
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
+
+  const isRemovable = Boolean(onDelete);
+
+  const handleMouseEnter = (event: MouseEvent<HTMLButtonElement>) => {
+    if (!isRemovable) {
+      return;
+    }
+
+    if (deleteButtonRef.current?.contains(event.target as Node)) {
+      changeRestrictTooltipState(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (!isRemovable) {
+      return;
+    }
+
+    changeRestrictTooltipState(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,17 +1,12 @@
 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 { ManageRestrictPopoverProps, 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 type TagLinkComponentProps = TagLinkProps & ManageRestrictPopoverProps;
 
 export function TagLink({
   label,
@@ -23,7 +18,7 @@ export function TagLink({
   onClick,
   target,
   ...rest
-}: TagLinkProps) {
+}: TagLinkComponentProps) {
   return (
     <a
       {...extractSupportProps(rest)}
@@ -35,9 +30,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/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';
 
@@ -36,3 +37,24 @@ export type CommonTagProps = {
   /** tabIndex кнопки удаления */
   tabIndex?: number;
 };
+
+export type TagTooltipProps = {
+  /** Тултип над тегом */
+  tooltip?: TooltipProps;
+};
+
+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 ManageRestrictPopoverProps = {
+  changeRestrictTooltipState: (state: boolean) => void;
+};