intelicoreact 1.5.38 → 1.5.41

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

@@ -1,167 +1,123 @@
 "use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-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");
+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"));
 require("./Tag.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
+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 && {}.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 => {
+  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?.getBoundingClientRect() ?? {};
+  const {
+    scrollY
+  } = window;
+  const tagPopupStyles = (0, _react.useMemo)(() => {
+    if (!isTagPopupOpened || !tagRef?.current) return {};
+    const {
+      x,
+      y,
+      height,
+      width
+    } = tagRef?.current?.getBoundingClientRect();
+    return {
+      left: `${x}px`,
+      top: `${y + scrollY}px`,
+      transform: `translate(calc(-1 * calc(100% - ${width / 2 + 22}px)), ${height + 10}px)`
     };
-}
-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
-        };
+  }, [isTagPopupOpened, x, y, width, height, scrollY]);
+  const handle = {
+    onTagClick: () => {
+      if (isPopup) {
+        setIsTagPopupOpened(!isTagPopupOpened);
+      }
+      onClick(id);
     }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
+  };
+
+  // закрытие по кликаутсайду
+  const handleClickOutside = () => {
+    setIsTagPopupOpened(false);
+  };
+  (0, _react.useEffect)(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
     };
-    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);
-        }
+  }, []);
+
+  // закрытие по скролу
+  (0, _react.useEffect)(() => {
+    const handleScroll = () => {
+      setIsTagPopupOpened(false);
     };
-    const handleClickOutside = ()=>{
-        setIsTagPopupOpened(false);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
     };
-    (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'))
-        ]
-    });
+  }, []);
+  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 ?? {},
+    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?.preventDefault();
+      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${value}`,
+    className: (0, _classnames.default)("tag__popup", popupClassName),
+    style: tagPopupStyles
+  }, !popupInfoContent ? /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    size: "small"
+  }) : popupInfoContent), document.getElementById("app")));
 };
-const _default = Tag;
+var _default = exports.default = Tag;

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

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