intelicoreact 2.0.18 → 2.0.19

package/dist/es/Atomic/UI/Table/Table.styles.css

@@ -0,0 +1,63 @@
+.table-header--weight-actions {
+  width: 3%;
+}
+
+.table--icon {
+  min-width: 16px;
+  min-height: 16px;
+  padding: 5px;
+  cursor: pointer;
+  color: #9aa0b9;
+  border-radius: 5px;
+}
+.table--icon:hover {
+  background-color: #f3f3f3;
+}
+
+.simple-table {
+  overflow-x: auto;
+  width: 100%;
+  color: #1e1e2d;
+}
+.simple-table table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.simple-table table thead {
+  font-size: 10px;
+  white-space: nowrap;
+  text-transform: uppercase;
+  color: #9aa0b9;
+  background-color: #ebeff2;
+}
+.simple-table table thead th {
+  padding: 10px 15px;
+  font-weight: 400;
+}
+.simple-table table thead th:last-child {
+  text-align: right;
+}
+.simple-table table tbody {
+  font-size: 13px;
+}
+.simple-table table tbody tr {
+  border-bottom: 1px solid #f1f1f1;
+}
+.simple-table table tbody td {
+  padding: 7.5px 15px;
+  background-color: white;
+}
+
+.accordion--table {
+  overflow: visible;
+}
+.accordion--table tr {
+  border: none !important;
+}
+.accordion--table td {
+  padding: 3px 15px !important;
+  font-size: 10px;
+  border: none !important;
+  background-color: #f7fafc !important;
+}

package/dist/es/Atomic/UI/Table/TdTypes/TdActions.js

@@ -0,0 +1,56 @@
+import '../../../../styles/base.css';
+import Switcher from "../../../FormElements/Switcher/Switcher.js";
+import './TdTypes.styles.css';/* empty css             */
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as Icons from "react-feather";
+//#region src/Atomic/UI/Table/TdTypes/TdActions.js
+var TdActions = ({ actions, onChange, onActionClick, rowItem }) => {
+	if (!actions) return false;
+	const [state, setState] = useState(actions);
+	const handleArrayChange = (value, index, prop) => {
+		state[index][prop] = value;
+		setState([...state]);
+		onChange(state);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "j6",
+		children: actions?.map((action, index) => {
+			switch (action.type) {
+				case "download": return /* @__PURE__ */ jsx("div", {
+					className: "td-actions--item td-actions--download",
+					onClick: () => {},
+					children: /* @__PURE__ */ jsx(Icons.Download, {})
+				}, index);
+				case "edit": return /* @__PURE__ */ jsx("div", {
+					className: "td-actions--item td-actions--edit",
+					onClick: () => {},
+					children: /* @__PURE__ */ jsx(Icons.Edit3, {})
+				}, index);
+				case "delete": return /* @__PURE__ */ jsx("div", {
+					className: "td-actions--item td-actions--delete",
+					onClick: () => onActionClick("delete", rowItem),
+					children: /* @__PURE__ */ jsx(Icons.Trash2, {})
+				}, index);
+				case "undo": return /* @__PURE__ */ jsx("div", {
+					className: "td-actions--item td-actions--undo",
+					onClick: () => onActionClick("undo", rowItem),
+					children: /* @__PURE__ */ jsx(Icons.RotateCcw, {})
+				}, index);
+				case "switcher": return /* @__PURE__ */ jsx("div", {
+					className: "df",
+					children: /* @__PURE__ */ jsx(Switcher, {
+						label: action.label || null,
+						isActive: action?.value,
+						onChange: (e) => handleArrayChange(e, index, "value")
+					})
+				}, index);
+				default: return null;
+			}
+		})
+	});
+};
+//#endregion
+export { TdActions };
+
+//# sourceMappingURL=TdActions.js.map

package/dist/es/Atomic/UI/Table/TdTypes/TdActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TdActions.js","names":[],"sources":["../../../../../../src/Atomic/UI/Table/TdTypes/TdActions.js"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport * as Icons from \"react-feather\";\n\nimport Switcher from \"../../../FormElements/Switcher/Switcher\";\n\nimport \"./TdTypes.scss\";\n\nexport const TdActions = ({ actions, onChange, onActionClick, rowItem }) => {\n  if (!actions) return false;\n\n  const [state, setState] = useState(actions);\n\n  const handleArrayChange = (value, index, prop) => {\n    state[index][prop] = value;\n    setState([...state]);\n    onChange(state);\n  };\n\n  return (\n    <div className=\"j6\">\n      {actions?.map((action, index) => {\n        switch (action.type) {\n          case \"download\":\n            return (\n              <div\n                key={index}\n                className=\"td-actions--item td-actions--download\"\n                onClick={() => {}}\n              >\n                <Icons.Download />\n              </div>\n            );\n          case \"edit\":\n            return (\n              <div\n                key={index}\n                className=\"td-actions--item td-actions--edit\"\n                onClick={() => {}}\n              >\n                <Icons.Edit3 />\n              </div>\n            );\n          case \"delete\":\n            return (\n              <div\n                key={index}\n                className=\"td-actions--item td-actions--delete\"\n                onClick={() => onActionClick(\"delete\", rowItem)}\n              >\n                <Icons.Trash2 />\n              </div>\n            );\n          case \"undo\":\n            return (\n              <div\n                key={index}\n                className=\"td-actions--item td-actions--undo\"\n                onClick={() => onActionClick(\"undo\", rowItem)}\n              >\n                <Icons.RotateCcw />\n              </div>\n            );\n          case \"switcher\":\n            return (\n              <div key={index} className=\"df\">\n                <Switcher\n                  label={action.label || null}\n                  isActive={action?.value}\n                  onChange={(e) => handleArrayChange(e, index, \"value\")}\n                />\n              </div>\n            );\n          default:\n            return null;\n        }\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAQO,IAAM,aAAa,EAAE,SAAS,UAAU,eAAe,cAAc;CAC1E,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,CAAC,OAAO,YAAY,SAAS,OAAO;CAE1C,MAAM,qBAAqB,OAAO,OAAO,SAAS;EAChD,MAAM,MAAK,CAAE,QAAQ;EACrB,SAAS,CAAC,GAAG,KAAK,CAAC;EACnB,SAAS,KAAK;CAChB;CAEA,OACE,oBAAC,OAAA;EAAI,WAAU;EACZ,UAAA,SAAS,KAAK,QAAQ,UAAU;GAC/B,QAAQ,OAAO,MAAf;IACE,KAAK,YACH,OACE,oBAAC,OAAA;KAEC,WAAU;KACV,eAAe,CAAC;KAEhB,UAAA,oBAAC,MAAM,UAAN,CAAA,CAAe;IAAA,GAJX,KAKP;IAEJ,KAAK,QACH,OACE,oBAAC,OAAA;KAEC,WAAU;KACV,eAAe,CAAC;KAEhB,UAAA,oBAAC,MAAM,OAAN,CAAA,CAAY;IAAA,GAJR,KAKP;IAEJ,KAAK,UACH,OACE,oBAAC,OAAA;KAEC,WAAU;KACV,eAAe,cAAc,UAAU,OAAO;KAE9C,UAAA,oBAAC,MAAM,QAAN,CAAA,CAAa;IAAA,GAJT,KAKP;IAEJ,KAAK,QACH,OACE,oBAAC,OAAA;KAEC,WAAU;KACV,eAAe,cAAc,QAAQ,OAAO;KAE5C,UAAA,oBAAC,MAAM,WAAN,CAAA,CAAgB;IAAA,GAJZ,KAKP;IAEJ,KAAK,YACH,OACE,oBAAC,OAAA;KAAgB,WAAU;KACzB,UAAA,oBAAC,UAAA;MACC,OAAO,OAAO,SAAS;MACvB,UAAU,QAAQ;MAClB,WAAW,MAAM,kBAAkB,GAAG,OAAO,OAAO;KAAA,CACtD;IAAA,GALQ,KAMV;IAEJ,SACE,OAAO;GACX;EACF,CAAC;CAAA,CACH;AAEJ"}

package/dist/es/Atomic/UI/Table/TdTypes/TdPriority.js

@@ -0,0 +1,29 @@
+import '../../../../styles/base.css';
+import '../Table.styles.css';/* empty css            */
+import cn from "classnames";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from "react-feather";
+//#region src/Atomic/UI/Table/TdTypes/TdPriority.js
+var TdPriority = ({ onClick, rowIndex, cardLength }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "cards-table__priority",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "mr5",
+			children: rowIndex + 1
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "df",
+			children: [/* @__PURE__ */ jsx(ArrowDown, {
+				onClick: () => onClick(rowIndex),
+				className: cn("table--icon", { disabled: rowIndex + 1 === cardLength })
+			}), /* @__PURE__ */ jsx(ArrowUp, {
+				onClick: () => onClick(rowIndex, true),
+				className: cn("table--icon", { disabled: rowIndex === 0 })
+			})]
+		})]
+	});
+};
+//#endregion
+export { TdPriority as default };
+
+//# sourceMappingURL=TdPriority.js.map

package/dist/es/Atomic/UI/Table/TdTypes/TdPriority.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TdPriority.js","names":[],"sources":["../../../../../../src/Atomic/UI/Table/TdTypes/TdPriority.js"],"sourcesContent":["import React from \"react\";\n\nimport cn from \"classnames\";\nimport { ArrowDown, ArrowUp } from \"react-feather\";\n\nimport \"../Table.scss\";\n\nconst TdPriority = ({ onClick, rowIndex, cardLength }) => {\n  return (\n    <div className=\"cards-table__priority\">\n      <span className=\"mr5\">{rowIndex + 1}</span>\n      <div className=\"df\">\n        <ArrowDown\n          onClick={() => onClick(rowIndex)}\n          className={cn(\"table--icon\", {\n            disabled: rowIndex + 1 === cardLength,\n          })}\n        />\n        <ArrowUp\n          onClick={() => onClick(rowIndex, true)}\n          className={cn(\"table--icon\", { disabled: rowIndex === 0 })}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default TdPriority;\n"],"mappings":";;;;;;AAOA,IAAM,cAAc,EAAE,SAAS,UAAU,iBAAiB;CACxD,OACE,qBAAC,OAAA;EAAI,WAAU;EACb,UAAA,CAAA,oBAAC,QAAA;GAAK,WAAU;GAAO,UAAA,WAAW;EAAA,CAAE,GACpC,qBAAC,OAAA;GAAI,WAAU;GACb,UAAA,CAAA,oBAAC,WAAA;IACC,eAAe,QAAQ,QAAQ;IAC/B,WAAW,GAAG,eAAe,EAC3B,UAAU,WAAW,MAAM,WAC7B,CAAC;GAAA,CACH,GACA,oBAAC,SAAA;IACC,eAAe,QAAQ,UAAU,IAAI;IACrC,WAAW,GAAG,eAAe,EAAE,UAAU,aAAa,EAAE,CAAC;GAAA,CAC3D,CAAA;EAAA,CACF,CAAA;CAAA,CACF;AAEJ"}

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

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/Table/TdTypes/TdRange.js
+var TdRange = ({ item }) => {
+	if (!item) return false;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("span", { children: item.from }),
+		/* @__PURE__ */ jsx("span", { children: " - " }),
+		/* @__PURE__ */ jsx("span", { children: item.to })
+	] });
+};
+//#endregion
+export { TdRange as default };
+
+//# sourceMappingURL=TdRange.js.map

package/dist/es/Atomic/UI/Table/TdTypes/TdRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TdRange.js","names":[],"sources":["../../../../../../src/Atomic/UI/Table/TdTypes/TdRange.js"],"sourcesContent":["const TdRange = ({ item }) => {\n  if (!item) return false;\n\n  return (\n    <div>\n      <span>{item.from}</span>\n      <span> - </span>\n      <span>{item.to}</span>\n    </div>\n  );\n};\n\nexport default TdRange;\n"],"mappings":";;AAAA,IAAM,WAAW,EAAE,WAAW;CAC5B,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,qBAAC,OAAA,EACC,UAAA;EAAA,oBAAC,QAAA,EAAM,UAAA,KAAK,KAAA,CAAK;EACjB,oBAAC,QAAA,EAAK,UAAA,MAAA,CAAG;EACT,oBAAC,QAAA,EAAM,UAAA,KAAK,GAAA,CAAG;CAAA,EAAA,CACjB;AAEJ"}

package/dist/es/Atomic/UI/Table/TdTypes/TdTypes.styles.css

@@ -0,0 +1,29 @@
+.td-actions--item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 28px;
+  min-height: 28px;
+  margin-left: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 5px;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.15);
+}
+.td-actions--delete {
+  color: #f06d8d !important;
+}
+.td-actions--undo {
+  color: #f06d8d !important;
+}
+.td-actions--edit {
+  color: #6b81dd !important;
+}
+.td-actions--download {
+  color: #6b81dd;
+}
+
+.td-weight {
+  cursor: pointer;
+}

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

@@ -0,0 +1,43 @@
+import '../../../../styles/base.css';
+import { useOutsideToggle } from "../../../../Functions/utils.js";
+import { KEY_CODE } from "../../Modal/Modal.js";
+import '../Table.styles.css';/* empty css            */
+import cn from "classnames";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/UI/Table/TdTypes/TdWeight.js
+var TdWeight = ({ value, percent, onChange, className }) => {
+	const [state, setState] = useState(value);
+	const { isToggled: isEdited, toggleOff: unsetIsEdited, toggleOn: setIsEdited } = useOutsideToggle(false);
+	useEffect(() => {
+		setState(value);
+	}, [value, isEdited]);
+	const handleKeyUp = ({ keyCode, target }) => {
+		if (keyCode === KEY_CODE.ENTER) {
+			onChange(Number(target.value) || 1);
+			unsetIsEdited();
+		}
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: isEdited ? /* @__PURE__ */ jsx(Input, {
+		value: state,
+		onChange: (e) => setState(e),
+		onBlur: unsetIsEdited,
+		onKeyUp: handleKeyUp,
+		autoFocus: true
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: cn("td-weight", className),
+		onClick: setIsEdited,
+		children: [/* @__PURE__ */ jsx("span", { children: value }), /* @__PURE__ */ jsxs("span", {
+			className: "ml2 color--grey-gull",
+			children: [
+				"(",
+				percent,
+				"%)"
+			]
+		})]
+	}) });
+};
+//#endregion
+export { TdWeight as default };
+
+//# sourceMappingURL=TdWeight.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TdWeight.js","names":[],"sources":["../../../../../../src/Atomic/UI/Table/TdTypes/TdWeight.js"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport cn from \"classnames\";\n\nimport { useOutsideToggle } from \"../../../../Functions/utils\";\nimport { KEY_CODE } from \"../../Modal/Modal\";\n\nimport \"../Table.scss\";\n\nconst TdWeight = ({ value, percent, onChange, className }) => {\n  const [state, setState] = useState(value);\n  const {\n    isToggled: isEdited,\n    toggleOff: unsetIsEdited,\n    toggleOn: setIsEdited,\n  } = useOutsideToggle(false);\n\n  useEffect(() => {\n    setState(value);\n  }, [value, isEdited]);\n\n  const handleKeyUp = ({ keyCode, target }) => {\n    if (keyCode === KEY_CODE.ENTER) {\n      const newValue = Number(target.value) || 1;\n      onChange(newValue);\n      unsetIsEdited();\n    }\n  };\n\n  return (\n    <>\n      {isEdited ? (\n        <Input\n          value={state}\n          onChange={(e) => setState(e)}\n          onBlur={unsetIsEdited}\n          onKeyUp={handleKeyUp}\n          autoFocus\n        />\n      ) : (\n        <div className={cn(\"td-weight\", className)} onClick={setIsEdited}>\n          <span>{value}</span>\n          <span className=\"ml2 color--grey-gull\">\n            ({percent}\n            %)\n          </span>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default TdWeight;\n"],"mappings":";;;;;;;AASA,IAAM,YAAY,EAAE,OAAO,SAAS,UAAU,gBAAgB;CAC5D,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,EACJ,WAAW,UACX,WAAW,eACX,UAAU,gBACR,iBAAiB,KAAK;CAE1B,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,eAAe,EAAE,SAAS,aAAa;EAC3C,IAAI,YAAY,SAAS,OAAO;GAE9B,SADiB,OAAO,OAAO,KAAK,KAAK,CACxB;GACjB,cAAc;EAChB;CACF;CAEA,OACE,oBAAA,UAAA,EACG,UAAA,WACC,oBAAC,OAAA;EACC,OAAO;EACP,WAAW,MAAM,SAAS,CAAC;EAC3B,QAAQ;EACR,SAAS;EACT,WAAS;CAAA,CACX,IAEA,qBAAC,OAAA;EAAI,WAAW,GAAG,aAAa,SAAS;EAAG,SAAS;EACnD,UAAA,CAAA,oBAAC,QAAA,EAAM,UAAA,MAAA,CAAM,GACb,qBAAC,QAAA;GAAK,WAAU;GAAuB,UAAA;IAAA;IACnC;IAAQ;GAAA;EAAA,CAEZ,CAAA;CAAA,CACF,EAAA,CAEJ;AAEJ"}

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

@@ -0,0 +1,110 @@
+import '../../../styles/base.css';
+import Spinner_default from "../../Layout/Spinner/index.js";
+import './Tag.styles.css';/* empty css         */
+import cn from "classnames";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, X } from "react-feather";
+import { createPortal } from "react-dom";
+//#region src/Atomic/UI/Tag/Tag.tsx
+var CN = "tag";
+function defaultOnClick() {}
+var Tag$1 = ({ value, className, style, label, warning, isWarningHint = true, removeItem, name, isPopup, popupInfoContent, popupClassName, id, isUseInTable, isNoDismiss = true, onClick = defaultOnClick, testId = CN }) => {
+	const tagRef = useRef(null);
+	const [isTagHover, setIsTagHover] = useState(false);
+	const [isTagPopupOpened, setIsTagPopupOpened] = useState(false);
+	const { x, y, height, width } = tagRef?.current?.getBoundingClientRect() ?? {};
+	const { scrollY } = window;
+	const tagPopupStyles = 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)`
+		};
+	}, [
+		isTagPopupOpened,
+		x,
+		y,
+		width,
+		height,
+		scrollY
+	]);
+	const tagLabelStyle = useMemo(() => {
+		const styleObj = {};
+		if ((style?.backgroundColor ?? style?.background) === "#242424") styleObj.color = "#fff";
+		return styleObj;
+	}, [style]);
+	const handle = { onTagClick: (event) => {
+		if (isUseInTable) event.stopPropagation();
+		if (isPopup) setIsTagPopupOpened(!isTagPopupOpened);
+		onClick(id, event);
+	} };
+	const handleClickOutside = () => {
+		setIsTagPopupOpened(false);
+	};
+	useEffect(() => {
+		document.addEventListener("click", handleClickOutside, true);
+		return () => {
+			document.removeEventListener("click", handleClickOutside, true);
+		};
+	}, []);
+	useEffect(() => {
+		const handleScroll = () => {
+			setIsTagPopupOpened(false);
+		};
+		window.addEventListener("scroll", handleScroll, true);
+		return () => {
+			window.removeEventListener("scroll", handleScroll, true);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		onMouseEnter: () => setIsTagHover(true),
+		onMouseLeave: () => setIsTagHover(false),
+		"data-testid": testId,
+		role: "listitem",
+		"aria-label": `Tag: ${label || name}`,
+		className: cn(CN, className, { "tag-warn": warning }),
+		style: style ?? {},
+		onClick: (event) => handle.onTagClick(event),
+		ref: tagRef,
+		children: [
+			warning && typeof warning === "string" && /* @__PURE__ */ jsx(AlertTriangle, {
+				className: "advanced-tags--warning-icon mr5",
+				"aria-label": "Warning"
+			}),
+			warning && typeof warning === "string" && isTagHover && isWarningHint && /* @__PURE__ */ jsx("div", {
+				className: "tag__warn-hint",
+				role: "tooltip",
+				children: warning
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tag__label",
+				style: tagLabelStyle,
+				children: label || name
+			}),
+			removeItem && !isNoDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e?.preventDefault();
+					e?.stopPropagation();
+					removeItem(value);
+				},
+				"aria-label": `Remove ${label || name}`,
+				className: "tag__button",
+				children: /* @__PURE__ */ jsx(X, { className: "color--text" })
+			}),
+			isTagPopupOpened && createPortal(/* @__PURE__ */ jsx("div", {
+				id: `tagPopup${value}`,
+				className: cn("tag__popup", popupClassName),
+				style: tagPopupStyles,
+				children: !popupInfoContent ? /* @__PURE__ */ jsx(Spinner_default, { size: "small" }) : popupInfoContent
+			}), document.getElementById("root"))
+		]
+	});
+};
+//#endregion
+export { Tag$1 as default };
+
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","names":[],"sources":["../../../../../src/Atomic/UI/Tag/Tag.tsx"],"sourcesContent":["import type { ITagProps } from './Tag.interface';\nimport cn from 'classnames';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { AlertTriangle, X } from 'react-feather';\nimport Spinner from '../../Layout/Spinner';\n\nimport './Tag.scss';\n\nconst CN = 'tag';\n\nfunction defaultOnClick(): void {}\n\nconst Tag: React.FC<ITagProps> = ({\n  value,\n  className,\n  style,\n  label,\n  warning,\n  isWarningHint = true,\n  removeItem,\n  name,\n  isPopup,\n  popupInfoContent,\n  popupClassName,\n  id,\n  isUseInTable,\n  isNoDismiss = true,\n  onClick = defaultOnClick,\n  testId = CN,\n}) => {\n  const tagRef = useRef<HTMLDivElement>(null);\n\n  const [isTagHover, setIsTagHover] = useState<boolean>(false);\n  const [isTagPopupOpened, setIsTagPopupOpened] = useState<boolean>(false);\n\n  const { x, y, height, width } = tagRef?.current?.getBoundingClientRect() ?? {};\n  const { scrollY } = window;\n\n  const tagPopupStyles = useMemo(() => {\n    if (!isTagPopupOpened || !tagRef?.current) return {};\n\n    const { x, y, height, width } = tagRef?.current?.getBoundingClientRect();\n\n    return {\n      left: `${x}px`,\n      top: `${y + scrollY}px`,\n      transform: `translate(calc(-1 * calc(100% - ${width / 2 + 22}px)), ${height + 10}px)`,\n    };\n  }, [isTagPopupOpened, x, y, width, height, scrollY]);\n\n  const tagLabelStyle = useMemo(() => {\n    const styleObj: React.CSSProperties = {};\n\n    const bgColor = style?.backgroundColor ?? style?.background;\n\n    if (bgColor === '#242424') {\n      styleObj.color = '#fff';\n    }\n\n    return styleObj;\n  }, [style]);\n\n  const handle = {\n    onTagClick: (event: React.MouseEvent<HTMLDivElement>) => {\n      if (isUseInTable) {\n        event.stopPropagation();\n      }\n      if (isPopup) {\n        setIsTagPopupOpened(!isTagPopupOpened);\n      }\n      onClick(id, event);\n    },\n  };\n\n  const handleClickOutside = (): void => {\n    setIsTagPopupOpened(false);\n  };\n\n  useEffect(() => {\n    document.addEventListener('click', handleClickOutside, true);\n    return () => {\n      document.removeEventListener('click', handleClickOutside, true);\n    };\n  }, []);\n\n  useEffect(() => {\n    const handleScroll = (): void => {\n      setIsTagPopupOpened(false);\n    };\n\n    window.addEventListener('scroll', handleScroll, true);\n    return () => {\n      window.removeEventListener('scroll', handleScroll, true);\n    };\n  }, []);\n\n  return (\n    <div\n      onMouseEnter={() => setIsTagHover(true)}\n      onMouseLeave={() => setIsTagHover(false)}\n      data-testid={testId}\n      role=\"listitem\"\n      aria-label={`Tag: ${label || name}`}\n      className={cn(CN, className, { 'tag-warn': warning })}\n      style={style ?? {}}\n      onClick={event => handle.onTagClick(event)}\n      ref={tagRef}\n    >\n      {warning && typeof warning === 'string' && (\n        <AlertTriangle className=\"advanced-tags--warning-icon mr5\" aria-label=\"Warning\" />\n      )}\n      {warning && typeof warning === 'string' && isTagHover && isWarningHint && (\n        <div className=\"tag__warn-hint\" role=\"tooltip\">\n          {warning}\n        </div>\n      )}\n      <span className=\"tag__label\" style={tagLabelStyle}>{label || name}</span>\n\n      {removeItem && !isNoDismiss && (\n        <button\n          type=\"button\"\n          onClick={(e) => {\n            e?.preventDefault();\n            e?.stopPropagation();\n            removeItem(value);\n          }}\n          aria-label={`Remove ${label || name}`}\n          className=\"tag__button\"\n        >\n          <X className=\"color--text\" />\n        </button>\n      )}\n\n      {isTagPopupOpened\n        && createPortal(\n          <div id={`tagPopup${value}`} className={cn('tag__popup', popupClassName)} style={tagPopupStyles}>\n            {!popupInfoContent ? <Spinner size=\"small\" /> : popupInfoContent}\n          </div>,\n          document.getElementById('root')!,\n        )}\n    </div>\n  );\n};\n\nexport default Tag;\n"],"mappings":"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"}

package/dist/es/Atomic/UI/Tag/Tag.styles.css

@@ -0,0 +1,148 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.tag {
+  --tag-height: 22px;
+  --tag-margin-right: 4px;
+  --tag-padding: 0 6px;
+  --tag-border-radius: 3px;
+  --tag-background-color: #e2e5ec;
+  --tag-label-font-size: 11px;
+  --tag-label-color: #1e1e2d;
+  --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: #fce2e8;
+  --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, 22px);
+  margin-right: var(--tag-margin-right, 4px);
+  padding: var(--tag-padding);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  border-radius: var(--tag-border-radius, 3px);
+  background-color: var(--tag-background-color, #e2e5ec);
+}
+.tag__label {
+  font-size: var(--tag-label-font-size, 11px);
+  color: var(--tag-label-color, #1e1e2d);
+}
+.tag__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--tag-button-width, 16px);
+  height: var(--tag-button-height, 16px);
+  margin-left: var(--tag-button-margin-left, 8px);
+  cursor: pointer;
+  opacity: var(--tag-button-opacity, 0.3);
+  color: var(--tag-button-color, #1e1e2d);
+}
+.tag-warn {
+  background-color: var(--tag-warn-background-color, #fce2e8);
+}
+.tag-warn .tag__label {
+  color: var(--tag-warn-label-color, #b9002c);
+}
+.tag__warn-hint {
+  position: absolute;
+  z-index: 2;
+  top: var(--tag-warn-hint-top, 30px);
+  left: var(--tag-warn-hint-left, 2px);
+  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: var(--tag-warn-hint-font-size, 10px);
+  line-height: var(--tag-warn-hint-line-height, 16px);
+  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);
+}
+.tag__warn-hint::before {
+  position: absolute;
+  top: var(--tag-warn-hint-before-top, -4px);
+  width: var(--tag-warn-hint-before-width, 8.5px);
+  height: var(--tag-warn-hint-before-height, 8.5px);
+  content: "";
+  background-color: var(--tag-warn-hint-before-background-color, #6b81dd);
+  transform: rotate(45deg);
+}
+.tag svg {
+  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;
+  z-index: var(--tag-popup-z-index, 9999);
+  box-sizing: border-box;
+  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));
+}
+.tag__popup:before {
+  position: absolute;
+  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);
+}

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

@@ -0,0 +1,7 @@
+import Tag from "./Tag.js";
+//#region src/Atomic/UI/Tag/index.ts
+var Tag_default = Tag;
+//#endregion
+export { Tag_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/UI/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/UI/Tag/index.ts"],"sourcesContent":["import Tag from './Tag';\n\nexport default Tag;\nexport type { ITagProps } from './Tag.interface';\n"],"mappings":";;AAEA,IAAA,cAAe"}