intelicoreact 1.5.33 → 1.5.35

package/dist/Atomic/UI/Tag/Tag.js

@@ -1,125 +1,167 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactDom = require("react-dom");
-var _reactFeather = require("react-feather");
-var _Spinner = _interopRequireDefault(require("./../../Layout/Spinner/Spinner"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _Spinner = /*#__PURE__*/ _interop_require_default(require("@/Atomic/Layout/Spinner"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactdom = require("react-dom");
+const _reactfeather = require("react-feather");
 require("./Tag.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Tag = _ref => {
-  var _tagRef$current$getBo, _tagRef$current;
-  let {
-    value,
-    className,
-    style,
-    label,
-    warning,
-    removeItem,
-    name,
-    isPopup,
-    // popupInfo,
-    popupInfoContent,
-    popupClassName,
-    id,
-    isNoDismiss = true,
-    onClick = () => {},
-    testId = "tag"
-  } = _ref;
-  const tagRef = (0, _react.useRef)();
-  const [isTagHover, setIsTagHover] = (0, _react.useState)(false);
-  const [isTagPopupOpened, setIsTagPopupOpened] = (0, _react.useState)(false);
-  const {
-    x,
-    y,
-    height,
-    width
-  } = (_tagRef$current$getBo = tagRef === null || tagRef === void 0 || (_tagRef$current = tagRef.current) === null || _tagRef$current === void 0 ? void 0 : _tagRef$current.getBoundingClientRect()) !== null && _tagRef$current$getBo !== void 0 ? _tagRef$current$getBo : {};
-  const {
-    scrollY
-  } = window;
-  const tagPopupStyles = (0, _react.useMemo)(() => {
-    var _tagRef$current2;
-    if (!isTagPopupOpened || !(tagRef !== null && tagRef !== void 0 && tagRef.current)) return {};
-    const {
-      x,
-      y,
-      height,
-      width
-    } = tagRef === null || tagRef === void 0 || (_tagRef$current2 = tagRef.current) === null || _tagRef$current2 === void 0 ? void 0 : _tagRef$current2.getBoundingClientRect();
-    return {
-      left: "".concat(x, "px"),
-      top: "".concat(y + scrollY, "px"),
-      transform: "translate(calc(-1 * calc(100% - ".concat(width / 2 + 22, "px)), ").concat(height + 10, "px)")
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
     };
-  }, [isTagPopupOpened, x, y, width, height, scrollY]);
-  const handle = {
-    onTagClick: () => {
-      if (isPopup) {
-        setIsTagPopupOpened(!isTagPopupOpened);
-      }
-      onClick(id);
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
     }
-  };
-
-  // закрытие по кликаутсайду
-  const handleClickOutside = () => {
-    setIsTagPopupOpened(false);
-  };
-  (0, _react.useEffect)(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
     };
-  }, []);
-
-  // закрытие по скролу
-  (0, _react.useEffect)(() => {
-    const handleScroll = () => {
-      setIsTagPopupOpened(false);
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const CN = 'tag';
+function defaultOnClick() {}
+const Tag = ({ value, className, style, label, warning, removeItem, name, isPopup, popupInfoContent, popupClassName, id, isNoDismiss = true, onClick = defaultOnClick, testId = CN })=>{
+    var _tagRef_current;
+    const tagRef = (0, _react.useRef)(null);
+    const [isTagHover, setIsTagHover] = (0, _react.useState)(false);
+    const [isTagPopupOpened, setIsTagPopupOpened] = (0, _react.useState)(false);
+    var _tagRef_current_getBoundingClientRect;
+    const { x, y, height, width } = (_tagRef_current_getBoundingClientRect = tagRef === null || tagRef === void 0 ? void 0 : (_tagRef_current = tagRef.current) === null || _tagRef_current === void 0 ? void 0 : _tagRef_current.getBoundingClientRect()) !== null && _tagRef_current_getBoundingClientRect !== void 0 ? _tagRef_current_getBoundingClientRect : {};
+    const { scrollY } = window;
+    const tagPopupStyles = (0, _react.useMemo)(()=>{
+        var _tagRef_current;
+        if (!isTagPopupOpened || !(tagRef === null || tagRef === void 0 ? void 0 : tagRef.current)) return {};
+        const { x, y, height, width } = tagRef === null || tagRef === void 0 ? void 0 : (_tagRef_current = tagRef.current) === null || _tagRef_current === void 0 ? void 0 : _tagRef_current.getBoundingClientRect();
+        return {
+            left: `${x}px`,
+            top: `${y + scrollY}px`,
+            transform: `translate(calc(-1 * calc(100% - ${width / 2 + 22}px)), ${height + 10}px)`
+        };
+    }, [
+        isTagPopupOpened,
+        x,
+        y,
+        width,
+        height,
+        scrollY
+    ]);
+    const handle = {
+        onTagClick: ()=>{
+            if (isPopup) {
+                setIsTagPopupOpened(!isTagPopupOpened);
+            }
+            onClick(id);
+        }
     };
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      window.removeEventListener("scroll", handleScroll, true);
+    const handleClickOutside = ()=>{
+        setIsTagPopupOpened(false);
     };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    onMouseEnter: () => setIsTagHover(true),
-    onMouseLeave: () => setIsTagHover(false),
-    "data-testid": testId,
-    className: (0, _classnames.default)("tag", className, {
-      "tag-warn": warning
-    }),
-    style: style !== null && style !== void 0 ? style : {},
-    onClick: () => handle.onTagClick(),
-    ref: tagRef
-  }, warning && typeof warning === "string" && /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
-    className: "advanced-tags--warning-icon mr5"
-  }), warning && typeof warning === "string" && isTagHover && /*#__PURE__*/_react.default.createElement("div", {
-    className: "tag__warn-hint"
-  }, warning), /*#__PURE__*/_react.default.createElement("span", {
-    className: "tag__label"
-  }, label || name), removeItem && !isNoDismiss && /*#__PURE__*/_react.default.createElement("button", {
-    onClick: e => {
-      e === null || e === void 0 || e.preventDefault();
-      e === null || e === void 0 || e.stopPropagation();
-      removeItem(value);
-    },
-    className: "tag__button"
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
-    className: "color--text"
-  })), isTagPopupOpened && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement("div", {
-    id: "tagPopup".concat(value),
-    className: (0, _classnames.default)("tag__popup", popupClassName),
-    style: tagPopupStyles
-  }, !popupInfoContent ? /*#__PURE__*/_react.default.createElement(_Spinner.default, {
-    size: "small"
-  }) : popupInfoContent), document.getElementById("app")));
+    (0, _react.useEffect)(()=>{
+        document.addEventListener('click', handleClickOutside, true);
+        return ()=>{
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, []);
+    (0, _react.useEffect)(()=>{
+        const handleScroll = ()=>{
+            setIsTagPopupOpened(false);
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        return ()=>{
+            window.removeEventListener('scroll', handleScroll, true);
+        };
+    }, []);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        onMouseEnter: ()=>setIsTagHover(true),
+        onMouseLeave: ()=>setIsTagHover(false),
+        "data-testid": testId,
+        role: "listitem",
+        "aria-label": `Tag: ${label || name}`,
+        className: (0, _classnames.default)(CN, className, {
+            'tag-warn': warning
+        }),
+        style: style !== null && style !== void 0 ? style : {},
+        onClick: ()=>handle.onTagClick(),
+        ref: tagRef,
+        children: [
+            warning && typeof warning === 'string' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.AlertTriangle, {
+                className: "advanced-tags--warning-icon mr5",
+                "aria-label": "Warning"
+            }),
+            warning && typeof warning === 'string' && isTagHover && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "tag__warn-hint",
+                role: "tooltip",
+                children: warning
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "tag__label",
+                children: label || name
+            }),
+            removeItem && !isNoDismiss && /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                type: "button",
+                onClick: (e)=>{
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    e === null || e === void 0 ? void 0 : e.stopPropagation();
+                    removeItem(value);
+                },
+                "aria-label": `Remove ${label || name}`,
+                className: "tag__button",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
+                    className: "color--text"
+                })
+            }),
+            isTagPopupOpened && /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                id: `tagPopup${value}`,
+                className: (0, _classnames.default)('tag__popup', popupClassName),
+                style: tagPopupStyles,
+                children: !popupInfoContent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
+                    size: "small"
+                }) : popupInfoContent
+            }), document.getElementById('app'))
+        ]
+    });
 };
-var _default = exports.default = Tag;
+const _default = Tag;

package/dist/Atomic/UI/Tag/Tag.scss

@@ -1,27 +1,75 @@
-@import "../../../scss/vars";
+@use '../../../scss/vars';
 
 .tag {
+  --tag-height: 22px;
+  --tag-margin-right: 4px;
+  --tag-padding: 0 6px;
+  --tag-border-radius: 3px;
+  --tag-background-color: #{vars.$color--gray--light};
+
+  --tag-label-font-size: 11px;
+  --tag-label-color: #{vars.$color--dark};
+
+  --tag-button-width: 16px;
+  --tag-button-height: 16px;
+  --tag-button-margin-left: 8px;
+  --tag-button-opacity: 0.3;
+  --tag-button-color: #1e1e2d;
+
+  --tag-warn-background-color: #{vars.$color--error-bg};
+  --tag-warn-label-color: #b9002c;
+
+  --tag-warn-hint-top: 30px;
+  --tag-warn-hint-left: 2px;
+  --tag-warn-hint-min-width: 80px;
+  --tag-warn-hint-max-width: 270px;
+  --tag-warn-hint-padding: 8px;
+  --tag-warn-hint-font-size: 10px;
+  --tag-warn-hint-line-height: 16px;
+  --tag-warn-hint-color: #fff;
+  --tag-warn-hint-background-color: #6b81dd;
+  --tag-warn-hint-border-radius: 4px;
+
+  --tag-warn-hint-before-top: -4px;
+  --tag-warn-hint-before-width: 8.5px;
+  --tag-warn-hint-before-height: 8.5px;
+  --tag-warn-hint-before-background-color: #6b81dd;
+
+  --tag-popup-z-index: 9999;
+  --tag-popup-min-width: 200px;
+  --tag-popup-min-height: 60px;
+  --tag-popup-padding: 8px;
+  --tag-popup-border-radius: 4px;
+  --tag-popup-background: #ffffff;
+  --tag-popup-box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
+
+  --tag-popup-before-top: -6px;
+  --tag-popup-before-right: 15px;
+  --tag-popup-before-width: 12px;
+  --tag-popup-before-height: 12px;
+  --tag-popup-before-background: #ffffff;
+
   position: relative;
 
   display: inline-flex;
   align-items: center;
 
-  height: 22px;
-  margin-right: 4px;
-  padding: 0 6px;
+  height: var(--tag-height);
+  margin-right: var(--tag-margin-right);
+  padding: var(--tag-padding);
 
   cursor: pointer;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
 
-  border-radius: 3px;
-  background-color: $color--gray--light;
+  border-radius: var(--tag-border-radius);
+  background-color: var(--tag-background-color);
 
   &__label {
-    font-size: 11px;
+    font-size: var(--tag-label-font-size);
 
-    color: $color--dark;
+    color: var(--tag-label-color);
   }
 
   &__button {
@@ -29,84 +77,90 @@
     justify-content: center;
     align-items: center;
 
-    width: 16px;
-    height: 16px;
-    margin-left: 8px;
+    width: var(--tag-button-width);
+    height: var(--tag-button-height);
+    margin-left: var(--tag-button-margin-left);
 
     cursor: pointer;
 
-    opacity: 0.3;
-    color: #1e1e2d;
+    opacity: var(--tag-button-opacity);
+    color: var(--tag-button-color);
   }
 
   &-warn {
-    background-color: $color--error-bg;
+    background-color: var(--tag-warn-background-color);
 
     .tag__label {
-      color: #b9002c;
+      color: var(--tag-warn-label-color);
     }
   }
 
   &__warn-hint {
     position: absolute;
     z-index: 2;
-    top: 30px;
-    left: 2px;
+    top: var(--tag-warn-hint-top);
+    left: var(--tag-warn-hint-left);
 
-    min-width: 80px;
-    max-width: 270px;
-    padding: 8px;
+    min-width: var(--tag-warn-hint-min-width);
+    max-width: var(--tag-warn-hint-max-width);
+    padding: var(--tag-warn-hint-padding);
 
-    font-size: 10px;
-    line-height: 16px;
+    font-size: var(--tag-warn-hint-font-size);
+    line-height: var(--tag-warn-hint-line-height);
 
-    color: #fff;
-    border-radius: 4px;
-    background-color: #6b81dd;
+    color: var(--tag-warn-hint-color);
+    border-radius: var(--tag-warn-hint-border-radius);
+    background-color: var(--tag-warn-hint-background-color);
 
     &::before {
       position: absolute;
-      top: -4px;
+      top: var(--tag-warn-hint-before-top);
 
-      width: 8.5px;
-      height: 8.5px;
+      width: var(--tag-warn-hint-before-width);
+      height: var(--tag-warn-hint-before-height);
 
-      content: "";
+      content: '';
 
-      background-color: #6b81dd;
+      background-color: var(--tag-warn-hint-before-background-color);
 
       transform: rotate(45deg);
     }
   }
 
   svg {
-    min-width: 16px;
-    max-width: 16px;
-    min-height: 16px;
-    max-height: 16px;
+    min-width: var(--tag-button-width);
+    max-width: var(--tag-button-width);
+    min-height: var(--tag-button-height);
+    max-height: var(--tag-button-height);
   }
 }
 
 .tag__popup {
   position: absolute;
-  background: #FFFFFF;
-  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
-  z-index: 9999;
-  border-radius: 4px;
-  min-height: 60px;
-  min-width: 200px;
-  width: fit-content;
+  z-index: var(--tag-popup-z-index);
+
   box-sizing: border-box;
-  padding: 8px;
+  width: fit-content;
+  min-width: var(--tag-popup-min-width);
+  min-height: var(--tag-popup-min-height);
+  padding: var(--tag-popup-padding);
+
+  border-radius: var(--tag-popup-border-radius);
+  background: var(--tag-popup-background);
+  box-shadow: var(--tag-popup-box-shadow);
 
   &:before {
-    content: '';
     position: absolute;
-    width: 12px;
-    height: 12px;
-    background: #FFFFFF;
-    top: -6px;
-    right: 15px;
+    top: var(--tag-popup-before-top);
+    right: var(--tag-popup-before-right);
+
+    width: var(--tag-popup-before-width);
+    height: var(--tag-popup-before-height);
+
+    content: '';
+
+    background: var(--tag-popup-before-background);
+
     transform: rotate(45deg);
   }
 }

package/dist/Atomic/UI/Tag/Tag.stories.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TagTemplate: function() {
+        return TagTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _Tag = /*#__PURE__*/ _interop_require_default(require("./Tag"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'UI/Tag',
+    component: _Tag.default,
+    args: {
+        value: 'check',
+        label: 'Label test',
+        warning: 'Hint text',
+        removeItem: ()=>{},
+        name: 'name',
+        isPopup: false,
+        popupInfoContent: 'Popup content',
+        popupClassName: '',
+        id: '1',
+        isNoDismiss: true,
+        onClick: ()=>{}
+    }
+};
+function Template(args) {
+    const [tags, setTags] = (0, _react.useState)([
+        {
+            id: '1',
+            label: 'Label test 1',
+            value: 'check1',
+            warning: 'Hint text',
+            isNoDismiss: false
+        },
+        {
+            id: '2',
+            label: 'Label test 2',
+            value: 'check2'
+        },
+        {
+            id: '3',
+            label: 'Label test 3',
+            value: 'check3',
+            isNoDismiss: false
+        },
+        {
+            id: '4',
+            label: 'Label test 1',
+            value: 'check1',
+            warning: true,
+            isNoDismiss: true
+        }
+    ]);
+    const removeTagHandler = (value)=>{
+        const newArray = tags.filter((item)=>item.value !== value);
+        setTags(newArray);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            rowGap: '2rem'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        children: "single"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                        ...args
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        children: "multiple"
+                    }),
+                    tags.map((item)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                            ...item,
+                            removeItem: (value)=>removeTagHandler(value)
+                        }, item.id))
+                ]
+            })
+        ]
+    });
+}
+const TagTemplate = Template.bind({});

package/dist/Atomic/UI/Tag/Tag.test.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _Tag = /*#__PURE__*/ _interop_require_default(require("./Tag"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('tag', ()=>{
+    const defaultProps = {
+        value: 'test',
+        label: 'Test Label',
+        id: '1',
+        onClick: jest.fn()
+    };
+    it('renders with default props', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            ...defaultProps
+        }));
+        expect(_react.screen.getByTestId('tag')).toBeInTheDocument();
+        expect(_react.screen.getByText('Test Label')).toBeInTheDocument();
+    });
+    it('renders with warning', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            ...defaultProps,
+            warning: "Warning message"
+        }));
+        _react.fireEvent.mouseEnter(_react.screen.getByTestId('tag'));
+        expect(_react.screen.getByText('Warning message')).toBeInTheDocument();
+    });
+    it('calls onClick when tag is clicked', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            ...defaultProps
+        }));
+        _react.fireEvent.click(_react.screen.getByTestId('tag'));
+        expect(defaultProps.onClick).toHaveBeenCalledWith('1');
+    });
+    it('renders remove button and calls removeItem when clicked', ()=>{
+        const removeItem = jest.fn();
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            ...defaultProps,
+            removeItem: removeItem,
+            isNoDismiss: false
+        }));
+        _react.fireEvent.click(_react.screen.getByRole('button'));
+        expect(removeItem).toHaveBeenCalledWith('test');
+    });
+    it('opens and closes popup on click', ()=>{
+        const appDiv = document.createElement('div');
+        appDiv.setAttribute('id', 'app');
+        document.body.appendChild(appDiv);
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            ...defaultProps,
+            isPopup: true,
+            popupInfoContent: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                children: "Popup Content"
+            })
+        }));
+        _react.fireEvent.click(_react.screen.getByTestId('tag'));
+        expect(_react.screen.getByText('Popup Content')).toBeInTheDocument();
+        _react.fireEvent.click(document);
+        expect(_react.screen.queryByText('Popup Content')).not.toBeInTheDocument();
+    });
+    it('applies custom className', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+            ...defaultProps,
+            className: "custom-class"
+        }));
+        expect(_react.screen.getByTestId('tag')).toHaveClass('custom-class');
+    });
+});