intelicoreact 1.5.40 → 1.6.0

package/dist/Atomic/UI/Table/TdTypes/TdWeight.js

@@ -1,53 +1,64 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../../../Functions/utils");
-var _Modal = require("../../Modal/Modal");
-require("../Table.scss");
-const TdWeight = _ref => {
-  let {
-    value,
-    percent,
-    onChange,
-    className
-  } = _ref;
-  const [state, setState] = (0, _react.useState)(value);
-  const {
-    isToggled: isEdited,
-    toggleOff: unsetIsEdited,
-    toggleOn: setIsEdited
-  } = (0, _utils.useOutsideToggle)(false);
-  (0, _react.useEffect)(() => {
-    setState(value);
-  }, [value, isEdited]);
-  const handleKeyUp = _ref2 => {
-    let {
-      keyCode,
-      target
-    } = _ref2;
-    if (keyCode === _Modal.KEY_CODE.ENTER) {
-      const newValue = Number(target.value) || 1;
-      onChange(newValue);
-      unsetIsEdited();
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
     }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isEdited ? /*#__PURE__*/React.createElement(Input, {
-    value: state,
-    onChange: e => setState(e),
-    onBlur: unsetIsEdited,
-    onKeyUp: handleKeyUp,
-    autoFocus: true
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)("td-weight", className),
-    onClick: setIsEdited
-  }, /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement("span", {
-    className: "ml2 color--grey-gull"
-  }, "(", percent, "%)")));
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _utils = require("../../../../Functions/utils");
+const _Modal = require("../../Modal/Modal");
+require("../Table.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TdWeight = ({ value, percent, onChange, className })=>{
+    const [state, setState] = (0, _react.useState)(value);
+    const { isToggled: isEdited, toggleOff: unsetIsEdited, toggleOn: setIsEdited } = (0, _utils.useOutsideToggle)(false);
+    (0, _react.useEffect)(()=>{
+        setState(value);
+    }, [
+        value,
+        isEdited
+    ]);
+    const handleKeyUp = ({ keyCode, target })=>{
+        if (keyCode === _Modal.KEY_CODE.ENTER) {
+            const newValue = Number(target.value) || 1;
+            onChange(newValue);
+            unsetIsEdited();
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: isEdited ? /*#__PURE__*/ (0, _jsxruntime.jsx)(Input, {
+            value: state,
+            onChange: (e)=>setState(e),
+            onBlur: unsetIsEdited,
+            onKeyUp: handleKeyUp,
+            autoFocus: true
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)("td-weight", className),
+            onClick: setIsEdited,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    children: value
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                    className: "ml2 color--grey-gull",
+                    children: [
+                        "(",
+                        percent,
+                        "%)"
+                    ]
+                })
+            ]
+        })
+    });
 };
-var _default = exports.default = TdWeight;
+const _default = TdWeight;

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

@@ -1,123 +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 && {}.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 _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 ?? {},
-    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")));
+    (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, 22px);
+  margin-right: var(--tag-margin-right, 4px);
+  padding: var(--tag-padding, 0 6px);
 
   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, 3px);
+  background-color: var(--tag-background-color, #{vars.$color--gray--light});
 
   &__label {
-    font-size: 11px;
+    font-size: var(--tag-label-font-size, 11px);
 
-    color: $color--dark;
+    color: var(--tag-label-color, #{vars.$color--dark});
   }
 
   &__button {
@@ -29,84 +77,93 @@
     justify-content: center;
     align-items: center;
 
-    width: 16px;
-    height: 16px;
-    margin-left: 8px;
+    width: var(--tag-button-width, 16px);
+    height: var(--tag-button-height, 16px);
+    margin-left: var(--tag-button-margin-left, 8px);
 
     cursor: pointer;
 
-    opacity: 0.3;
-    color: #1e1e2d;
+    opacity: var(--tag-button-opacity, 0.3);
+    color: var(--tag-button-color, #1e1e2d);
   }
 
   &-warn {
-    background-color: $color--error-bg;
+    background-color: var(
+      --tag-warn-background-color,
+      #{vars.$color--error-bg}
+    );
 
     .tag__label {
-      color: #b9002c;
+      color: var(--tag-warn-label-color, #b9002c);
     }
   }
 
   &__warn-hint {
     position: absolute;
     z-index: 2;
-    top: 30px;
-    left: 2px;
+    top: var(--tag-warn-hint-top, 30px);
+    left: var(--tag-warn-hint-left, 2px);
 
-    min-width: 80px;
-    max-width: 270px;
-    padding: 8px;
+    min-width: var(--tag-warn-hint-min-width, 80px);
+    max-width: var(--tag-warn-hint-max-width, 270px);
+    padding: var(--tag-warn-hint-padding, 8px);
 
-    font-size: 10px;
-    line-height: 16px;
+    font-size: var(--tag-warn-hint-font-size, 10px);
+    line-height: var(--tag-warn-hint-line-height, 16px);
 
-    color: #fff;
-    border-radius: 4px;
-    background-color: #6b81dd;
+    color: var(--tag-warn-hint-color, #fff);
+    border-radius: var(--tag-warn-hint-border-radius, 4px);
+    background-color: var(--tag-warn-hint-background-color, #6b81dd);
 
     &::before {
       position: absolute;
-      top: -4px;
+      top: var(--tag-warn-hint-before-top, -4px);
 
-      width: 8.5px;
-      height: 8.5px;
+      width: var(--tag-warn-hint-before-width, 8.5px);
+      height: var(--tag-warn-hint-before-height, 8.5px);
 
       content: "";
 
-      background-color: #6b81dd;
+      background-color: var(--tag-warn-hint-before-background-color, #6b81dd);
 
       transform: rotate(45deg);
     }
   }
 
   svg {
-    min-width: 16px;
-    max-width: 16px;
-    min-height: 16px;
-    max-height: 16px;
+    min-width: var(--tag-button-width, 16px);
+    max-width: var(--tag-button-width, 16px);
+    min-height: var(--tag-button-height, 16px);
+    max-height: var(--tag-button-height, 16px);
   }
 }
 
 .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, 9999);
+
   box-sizing: border-box;
-  padding: 8px;
+  width: fit-content;
+  min-width: var(--tag-popup-min-width, 200px);
+  min-height: var(--tag-popup-min-height, 60px);
+  padding: var(--tag-popup-padding, 8px);
+
+  border-radius: var(--tag-popup-border-radius, 4px);
+  background: var(--tag-popup-background, #ffffff);
+  box-shadow: var(--tag-popup-box-shadow, 0px 4px 25px 0px rgba(0, 0, 0, 0.25));
 
   &:before {
-    content: '';
     position: absolute;
-    width: 12px;
-    height: 12px;
-    background: #FFFFFF;
-    top: -6px;
-    right: 15px;
+    top: var(--tag-popup-before-top, -6px);
+    right: var(--tag-popup-before-right, 15px);
+
+    width: var(--tag-popup-before-width, 12px);
+    height: var(--tag-popup-before-height, 12px);
+
+    content: "";
+
+    background: var(--tag-popup-before-background, #ffffff);
+
     transform: rotate(45deg);
   }
 }