@snack-uikit/tag 0.12.11-preview-53302b98.0 → 0.12.11

package/CHANGELOG.md

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

package/README.md

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

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

@@ -1,45 +1,19 @@
 "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 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));
+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));
 }

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

@@ -1,3 +1,8 @@
-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;
+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;

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

@@ -19,7 +19,6 @@ 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");
@@ -32,46 +31,24 @@ function TagBase(_a) {
       appearance = constants_1.APPEARANCE.Neutral,
       onDelete,
       className,
-      tabIndex,
-      changeRestrictTooltipState
+      tabIndex
     } = _a,
-    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);
-  };
+    rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
   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": isRemovable,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
+    "data-removable": Boolean(onDelete),
     children: [(0, jsx_runtime_1.jsx)("span", {
+      title: label,
       className: styles_module_scss_1.default.label,
       children: label
-    }), isRemovable && (0, jsx_runtime_1.jsx)("button", {
+    }), onDelete && (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,3 +1,9 @@
-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;
+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;

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

@@ -43,6 +43,7 @@ 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: ({ appearance, ...props }: TagRowItem) => TagRowItemInner;
+export declare const mapTagRowItem: ({ label, appearance }: TagRowItem) => TagRowItemInner;

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

@@ -1,25 +1,24 @@
 "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 = _a => {
-  var {
-      appearance = constants_1.APPEARANCE.Neutral
-    } = _a,
-    props = __rest(_a, ["appearance"]);
-  return Object.assign(Object.assign({}, props), {
+const mapTagRowItem = _ref => {
+  let {
+    label,
     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,10 +18,12 @@ 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, Object.assign({
+      children: (0, jsx_runtime_1.jsx)(components_1.Tag, {
+        label: item.label,
+        appearance: item.appearance,
         size: size,
         onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item)
-      }, item))
+      })
     }, item.label);
   };
 }

package/dist/cjs/types.d.ts

@@ -1,6 +1,5 @@
-import { MouseEvent, MouseEventHandler } from 'react';
-import { TooltipProps } from '@snack-uikit/tooltip';
-import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { MouseEvent } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
@@ -9,17 +8,14 @@ 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> & TagTooltipProps;
-export type TagRowItemInner = Omit<TagRowItem, 'appearance'> & {
+} & Partial<LinkProps>;
+export type TagRowItemInner = {
+    label: string;
     appearance: Appearance;
-};
+} & Partial<LinkProps>;
 export type CommonTagProps = {
     /** Текст */
     label: string;
@@ -32,15 +28,3 @@ 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 ManageRestrictPopoverProps = {
-    changeRestrictTooltipState: (state: boolean) => void;
-};

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

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

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

@@ -1,34 +1,12 @@
-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;
 }
-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));
+export function Tag(props) {
+    if (isTagLinkProps(props)) {
+        return _jsx(TagLink, Object.assign({}, props));
+    }
+    return _jsx(TagBase, Object.assign({}, props));
 }

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

@@ -1,3 +1,8 @@
-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;
+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;

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

@@ -11,30 +11,12 @@ 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, 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 })) }))] })));
+    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 })) }))] })));
 }

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

@@ -1,3 +1,9 @@
-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;
+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;

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", { 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", { title: label, 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: ({ appearance, ...props }: TagRowItem) => TagRowItemInner;
+export declare const mapTagRowItem: ({ label, appearance }: TagRowItem) => TagRowItemInner;

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

@@ -1,16 +1,10 @@
-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 = (_a) => {
-    var { appearance = APPEARANCE.Neutral } = _a, props = __rest(_a, ["appearance"]);
-    return (Object.assign(Object.assign({}, props), { appearance }));
+export const mapTagRowItem = ({ label, appearance }) => {
+    if (appearance) {
+        return { label, appearance };
+    }
+    return {
+        label,
+        appearance: APPEARANCE.Neutral,
+    };
 };

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, Object.assign({ size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }, item)) }, item.label));
+        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));
     };
 }
 export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef }) {

package/dist/esm/types.d.ts

@@ -1,6 +1,5 @@
-import { MouseEvent, MouseEventHandler } from 'react';
-import { TooltipProps } from '@snack-uikit/tooltip';
-import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { MouseEvent } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
@@ -9,17 +8,14 @@ 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> & TagTooltipProps;
-export type TagRowItemInner = Omit<TagRowItem, 'appearance'> & {
+} & Partial<LinkProps>;
+export type TagRowItemInner = {
+    label: string;
     appearance: Appearance;
-};
+} & Partial<LinkProps>;
 export type CommonTagProps = {
     /** Текст */
     label: string;
@@ -32,15 +28,3 @@ 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 ManageRestrictPopoverProps = {
-    changeRestrictTooltipState: (state: boolean) => void;
-};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.12.11-preview-53302b98.0",
+  "version": "0.12.11",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,11 +37,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/dropdown": "0.4.7",
-    "@snack-uikit/icons": "0.26.1",
+    "@snack-uikit/icons": "0.26.2",
     "@snack-uikit/scroll": "0.9.5",
-    "@snack-uikit/tooltip": "0.17.0",
     "@snack-uikit/utils": "3.8.1",
     "classnames": "2.5.1"
   },
-  "gitHead": "9d18560580db8881f7ed7f229e75e017c939f514"
+  "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
 }

package/src/components/Tag/Tag.tsx

@@ -1,38 +1,16 @@
-import { JSXElementConstructor, useState } from 'react';
+import { TagBase, TagBaseProps } from '../TagBase';
+import { TagLink, TagLinkProps } from '../TagLink';
 
-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 type TagProps = TagBaseProps | TagLinkProps;
 
 export function isTagLinkProps(props: TagProps): props is TagLinkProps {
   return 'href' in props && props.href !== undefined;
 }
 
-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,
-    },
-  });
+export function Tag(props: TagProps) {
+  if (isTagLinkProps(props)) {
+    return <TagLink {...props} />;
+  }
 
-  const tagProps = { ...props, changeRestrictTooltipState: setRestrictOpenTooltip } as ExtractTagProps<
-    typeof TagWithTooltip
-  >;
-  return <TagWithTooltip {...tagProps} />;
+  return <TagBase {...props} />;
 }

package/src/components/TagBase/TagBase.tsx

@@ -1,15 +1,19 @@
 import cn from 'classnames';
-import { MouseEvent, useRef } from 'react';
+import { MouseEventHandler } from 'react';
 
 import { CrossSVG } from '@snack-uikit/icons';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE } from '../../constants';
-import { ManageRestrictPopoverProps, TagBaseProps } from '../../types';
+import { CommonTagProps } from '../../types';
 import { ICON_SIZE } from './constants';
 import styles from './styles.module.scss';
 
-export type TagBaseComponentProps = TagBaseProps & ManageRestrictPopoverProps;
+export type TagBaseProps = WithSupportProps<{
+  /** Коллбэк на удаление */
+  onDelete?: MouseEventHandler<HTMLButtonElement>;
+}> &
+  CommonTagProps;
 
 export function TagBase({
   label,
@@ -18,52 +22,26 @@ export function TagBase({
   onDelete,
   className,
   tabIndex,
-  changeRestrictTooltipState,
   ...rest
-}: 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);
-  };
-
+}: TagBaseProps) {
   return (
     <span
       {...extractSupportProps(rest)}
       className={cn(styles.tag, className)}
       data-size={size}
       data-appearance={appearance}
-      data-removable={isRemovable}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+      data-removable={Boolean(onDelete)}
     >
-      <span className={styles.label}>{label}</span>
-      {isRemovable && (
+      <span title={label} className={styles.label}>
+        {label}
+      </span>
+      {onDelete && (
         <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,12 +1,17 @@
 import cn from 'classnames';
+import { MouseEvent } from 'react';
 
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE } from '../../constants';
-import { ManageRestrictPopoverProps, TagLinkProps } from '../../types';
+import { CommonTagProps } from '../../types';
 import styles from './styles.module.scss';
 
-export type TagLinkComponentProps = TagLinkProps & ManageRestrictPopoverProps;
+export type TagLinkProps = WithSupportProps<CommonTagProps> & {
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+  target?: HTMLAnchorElement['target'];
+};
 
 export function TagLink({
   label,
@@ -18,7 +23,7 @@ export function TagLink({
   onClick,
   target,
   ...rest
-}: TagLinkComponentProps) {
+}: TagLinkProps) {
   return (
     <a
       {...extractSupportProps(rest)}
@@ -30,7 +35,9 @@ export function TagLink({
       target={target}
       onClick={onClick}
     >
-      <span className={styles.label}>{label}</span>
+      <span title={label} className={styles.label}>
+        {label}
+      </span>
     </a>
   );
 }

package/src/components/TagRow/utils.ts

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

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 size={size} onDelete={handleRemoveItem?.(item)} {...item} />
+        <Tag label={item.label} appearance={item.appearance} size={size} onDelete={handleRemoveItem?.(item)} />
       </div>
     );
   };

package/src/types.ts

@@ -1,7 +1,6 @@
-import { MouseEvent, MouseEventHandler } from 'react';
+import { MouseEvent } from 'react';
 
-import { TooltipProps } from '@snack-uikit/tooltip';
-import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { ValueOf } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE } from './constants';
 
@@ -15,20 +14,15 @@ export type LinkProps = {
   target?: HTMLAnchorElement['target'];
 };
 
-export type TagTooltipProps = {
-  /** Тултип над тегом */
-  tooltip?: TooltipProps;
-};
-
 export type TagRowItem = {
   label: string;
   appearance?: Appearance;
-} & Partial<LinkProps> &
-  TagTooltipProps;
+} & Partial<LinkProps>;
 
-export type TagRowItemInner = Omit<TagRowItem, 'appearance'> & {
+export type TagRowItemInner = {
+  label: string;
   appearance: Appearance;
-};
+} & Partial<LinkProps>;
 
 export type CommonTagProps = {
   /** Текст */
@@ -42,19 +36,3 @@ 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 ManageRestrictPopoverProps = {
-  changeRestrictTooltipState: (state: boolean) => void;
-};