intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/UI/Table/TdTypes/TdRange.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const TdRange = ({ item })=>{
+    if (!item) return false;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: item.from
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: " - "
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: item.to
+            })
+        ]
+    });
+};
+const _default = TdRange;

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+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,
+                        "%)"
+                    ]
+                })
+            ]
+        })
+    });
+};
+const _default = TdWeight;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    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");
+require("./Tag.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    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);
+        }
+    };
+    const handleClickOutside = ()=>{
+        setIsTagPopupOpened(false);
+    };
+    (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'))
+        ]
+    });
+};
+const _default = Tag;

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

@@ -0,0 +1,166 @@
+@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: 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: var(--tag-border-radius);
+  background-color: var(--tag-background-color);
+
+  &__label {
+    font-size: var(--tag-label-font-size);
+
+    color: var(--tag-label-color);
+  }
+
+  &__button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: var(--tag-button-width);
+    height: var(--tag-button-height);
+    margin-left: var(--tag-button-margin-left);
+
+    cursor: pointer;
+
+    opacity: var(--tag-button-opacity);
+    color: var(--tag-button-color);
+  }
+
+  &-warn {
+    background-color: var(--tag-warn-background-color);
+
+    .tag__label {
+      color: var(--tag-warn-label-color);
+    }
+  }
+
+  &__warn-hint {
+    position: absolute;
+    z-index: 2;
+    top: var(--tag-warn-hint-top);
+    left: var(--tag-warn-hint-left);
+
+    min-width: var(--tag-warn-hint-min-width);
+    max-width: var(--tag-warn-hint-max-width);
+    padding: var(--tag-warn-hint-padding);
+
+    font-size: var(--tag-warn-hint-font-size);
+    line-height: var(--tag-warn-hint-line-height);
+
+    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: var(--tag-warn-hint-before-top);
+
+      width: var(--tag-warn-hint-before-width);
+      height: var(--tag-warn-hint-before-height);
+
+      content: '';
+
+      background-color: var(--tag-warn-hint-before-background-color);
+
+      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);
+  }
+}
+
+.tag__popup {
+  position: absolute;
+  z-index: var(--tag-popup-z-index);
+
+  box-sizing: border-box;
+  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 {
+    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);
+
+    transform: rotate(45deg);
+  }
+}

package/dist/src/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/src/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');
+    });
+});

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _Tag = /*#__PURE__*/ _interop_require_default(require("./Tag"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _Tag.default;