intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/UI/Table/Partials/TdRow.jsx

@@ -0,0 +1,103 @@
+import cn from 'classnames';
+
+import { useState } from 'react';
+
+import { handleObjectChange } from '../../../../Functions/utils';
+import Modal from '../../Modal/Modal';
+import TdRange from '../TdTypes/TdRange';
+
+import TdCell from './TdCell';
+
+import '../Table.scss';
+
+function TdRow({
+  item,
+  onChange,
+  rowIndex,
+  cardStatus,
+  range,
+  type,
+  rowSpan,
+  colSpan,
+  cardLength,
+  changePriority,
+  getAdviceWeight,
+  onActionClick,
+  isDeleted,
+  testId = 'td-row',
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleChange = handleObjectChange(item, () => onChange({ ...item }));
+
+  return (
+    <>
+      <tr data-testid={testId}>
+        {type && rowSpan && (
+          <td className="rel" rowSpan={rowSpan + 1}>
+            <span
+              className={cn(
+                type && `cards-table__score cards-table__score-${cardStatus}`,
+              )}
+            >
+              <TdRange item={range} />
+            </span>
+          </td>
+        )}
+
+        {Object.entries(item).map(([key, value]) =>
+          key === 'id' || key === 'isDeleted'
+            ? null
+            : (
+                <td
+                  key={key}
+                  className={cn('cards-table__body-item', {
+                    'cards-table__accordion': value.type === 'accordion',
+                  })}
+                >
+                  <TdCell
+                    onActionClick={onActionClick}
+                    changePriority={changePriority}
+                    cardLength={cardLength}
+                    rowIndex={rowIndex}
+                    rowItem={item}
+                    type={key}
+                    item={value}
+                    onChange={newValue => handleChange(newValue, key)}
+                    getAdviceWeight={getAdviceWeight}
+                    isDeleted={isDeleted}
+                  />
+                </td>
+              ),
+        )}
+      </tr>
+
+      {type && colSpan
+        ? (
+            <tr>
+              <td />
+              <td colSpan={colSpan}>
+                <span
+                  className="cards-table__title-select-lender-btn"
+                  onClick={() => setIsOpen(true)}
+                >
+                  Select Lender
+                </span>
+
+                <Modal
+                  closeModal={() => setIsOpen(false)}
+                  isOpen={isOpen}
+                  title="Choose Lender"
+                  size="420"
+                >
+                  test
+                </Modal>
+              </td>
+            </tr>
+          )
+        : null}
+    </>
+  );
+}
+
+export default TdRow;

package/dist/Atomic/UI/Table/Partials/TdTitle.jsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+
+import Langs from '../../../../../Langs';
+import Modal from '../../Modal/Modal';
+import Tag from '../../Tag/Tag';
+
+import '../Table.scss';
+
+function TdTitle({ locations, title }) {
+  const txt = Langs[globalThis.lng];
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="cards-table__title-box">
+      <div className="cards-table__title-box--left">
+        <div className="cards-table__title-box--title">
+          {txt.titles[title] || title}
+        </div>
+        <div className="cards-table__title-box--tags">
+          <span className="mr5">
+            {txt.labels.locations.toUpperCase()}
+            :
+          </span>
+          {locations?.map((tag, index) => (
+            <Tag key={index} label={tag.label} />
+          ))}
+        </div>
+      </div>
+
+      <div className="cards-table__title-box--right">
+        <span
+          onClick={() => setIsOpen(true)}
+          className="cards-table__title-edit-btn mr5"
+        >
+          {txt.buttons.edit}
+        </span>
+
+        <Modal
+          mode="edit"
+          closeModal={() => setIsOpen(false)}
+          isOpen={isOpen}
+          title={txt.titles.pingTree}
+          size="420"
+        >
+          test
+        </Modal>
+        <span className="cards-table__title-delete-btn">
+          {txt.buttons.deletePingTree}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default TdTitle;

package/dist/Atomic/UI/Table/Table.jsx

@@ -0,0 +1,63 @@
+import cn from 'classnames';
+
+import TdHeader from './Partials/TdHeader';
+import TdRow from './Partials/TdRow';
+
+import './Table.scss';
+
+function Table({
+  rows,
+  onChange,
+  className,
+  header,
+  onActionClick,
+  testId = 'table',
+}) {
+  const handleArrayChange = (value, index) => {
+    rows[index] = value;
+    onChange({ header: [...header], rows: [...rows] });
+  };
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn('simple-table', {
+        [`simple-table--${className}`]: className,
+      })}
+    >
+      <table>
+        <thead>
+          <tr>
+            {header?.map(item => (
+              <TdHeader item={item} key={item.key} />
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows && rows?.length
+            ? (
+                rows?.map((row, index) => (
+                  <TdRow
+                    onActionClick={onActionClick}
+                    rowIndex={index}
+                    key={typeof row.id === 'object' ? row.id.value : row.id}
+                    item={row}
+                    header={header}
+                    onChange={value => handleArrayChange(value, index)}
+                  />
+                ))
+              )
+            : (
+                <tr>
+                  <td className="row--not-found" colSpan={header?.length}>
+                    Not set
+                  </td>
+                </tr>
+              )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

package/dist/Atomic/UI/Table/TdTypes/TdActions.jsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+
+import * as Icons from 'react-feather';
+
+import Switcher from '../../../FormElements/Switcher/Switcher';
+
+import './TdTypes.scss';
+
+export function 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 (
+    <div className="j6">
+      {actions?.map((action, index) => {
+        switch (action.type) {
+          case 'download':
+            return (
+              <div
+                key={index}
+                className="td-actions--item td-actions--download"
+                onClick={() => {}}
+              >
+                <Icons.Download />
+              </div>
+            );
+          case 'edit':
+            return (
+              <div
+                key={index}
+                className="td-actions--item td-actions--edit"
+                onClick={() => {}}
+              >
+                <Icons.Edit3 />
+              </div>
+            );
+          case 'delete':
+            return (
+              <div
+                key={index}
+                className="td-actions--item td-actions--delete"
+                onClick={() => onActionClick('delete', rowItem)}
+              >
+                <Icons.Trash2 />
+              </div>
+            );
+          case 'undo':
+            return (
+              <div
+                key={index}
+                className="td-actions--item td-actions--undo"
+                onClick={() => onActionClick('undo', rowItem)}
+              >
+                <Icons.RotateCcw />
+              </div>
+            );
+          case 'switcher':
+            return (
+              <div key={index} className="df">
+                <Switcher
+                  label={action.label || null}
+                  isActive={action?.value}
+                  onChange={e => handleArrayChange(e, index, 'value')}
+                />
+              </div>
+            );
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}

package/dist/Atomic/UI/Table/TdTypes/TdPriority.jsx

@@ -0,0 +1,26 @@
+import cn from 'classnames';
+import { ArrowDown, ArrowUp } from 'react-feather';
+
+import '../Table.scss';
+
+function TdPriority({ onClick, rowIndex, cardLength }) {
+  return (
+    <div className="cards-table__priority">
+      <span className="mr5">{rowIndex + 1}</span>
+      <div className="df">
+        <ArrowDown
+          onClick={() => onClick(rowIndex)}
+          className={cn('table--icon', {
+            disabled: rowIndex + 1 === cardLength,
+          })}
+        />
+        <ArrowUp
+          onClick={() => onClick(rowIndex, true)}
+          className={cn('table--icon', { disabled: rowIndex === 0 })}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default TdPriority;

package/dist/Atomic/UI/Table/TdTypes/TdRange.jsx

@@ -0,0 +1,13 @@
+function TdRange({ item }) {
+  if (!item) return false;
+
+  return (
+    <div>
+      <span>{item.from}</span>
+      <span> - </span>
+      <span>{item.to}</span>
+    </div>
+  );
+}
+
+export default TdRange;

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

@@ -0,0 +1,56 @@
+import cn from 'classnames';
+
+import { useEffect, useState } from 'react';
+
+import { useOutsideToggle } from '../../../../Functions/utils';
+import { KEY_CODE } from '../../Modal/Modal';
+
+import '../Table.scss';
+
+function 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) {
+      const newValue = Number(target.value) || 1;
+      onChange(newValue);
+      unsetIsEdited();
+    }
+  };
+
+  return (
+    <>
+      {isEdited
+        ? (
+            <Input
+              value={state}
+              onChange={e => setState(e)}
+              onBlur={unsetIsEdited}
+              onKeyUp={handleKeyUp}
+              autoFocus
+            />
+          )
+        : (
+            <div className={cn('td-weight', className)} onClick={setIsEdited}>
+              <span>{value}</span>
+              <span className="ml2 color--grey-gull">
+                (
+                {percent}
+                %)
+              </span>
+            </div>
+          )}
+    </>
+  );
+}
+
+export default TdWeight;

package/dist/Atomic/UI/Tag/Tag.interface.ts

@@ -20,4 +20,5 @@ export interface ITagProps extends IUniProps {
   isNoDismiss?: boolean;
   onClick?: (id?: string) => void;
   isFreezed?: boolean;
+  readOnly?: boolean;
 }

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

@@ -1 +1 @@
-function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function t(t,n){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n,r,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var a=[],i=!0,l=!1;try{for(o=o.call(e);!(i=(n=o.next()).done)&&(a.push(n.value),!t||a.length!==t);i=!0);}catch(e){l=!0,r=e}finally{try{i||null==o.return||o.return()}finally{if(l)throw r}}return a}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if("Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return e(t,n)}}(t,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return f}});var n=require("react/jsx-runtime"),r=u(require("classnames")),o=function(e,t){if(e&&e.__esModule)return e;if(null===e||(void 0===e?"undefined":e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e)!="object"&&"function"!=typeof e)return{default:e};var n=c(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=o?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(r,a,i):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(require("react")),a=require("react-dom"),i=require("react-feather"),l=u(require("../../Layout/Spinner"));function u(e){return e&&e.__esModule?e:{default:e}}function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(c=function(e){return e?n:t})(e)}function s(){}require("./Tag.scss");var f=function(e){var u,c,f=e.value,d=e.className,p=e.style,m=e.label,y=e.warning,v=e.isWarningHint,g=e.removeItem,b=e.name,h=e.isPopup,j=e.popupInfoContent,w=e.popupClassName,x=e.id,_=e.isNoDismiss,O=e.onClick,P=void 0===O?s:O,M=e.testId,N=(0,o.useRef)(null),S=t((0,o.useState)(!1),2),E=S[0],k=S[1],C=t((0,o.useState)(!1),2),q=C[0],A=C[1],I=null!=(c=null==N||null==(u=N.current)?void 0:u.getBoundingClientRect())?c:{},L=I.x,W=I.y,D=I.height,R=I.width,T=window.scrollY,B=(0,o.useMemo)(function(){if(!q||!(null==N?void 0:N.current))return{};var e,t=null==N||null==(e=N.current)?void 0:e.getBoundingClientRect(),n=t.x,r=t.y,o=t.height,a=t.width;return{left:"".concat(n,"px"),top:"".concat(r+T,"px"),transform:"translate(calc(-1 * calc(100% - ".concat(a/2+22,"px)), ").concat(o+10,"px)")}},[q,L,W,R,D,T]),z=function(){h&&A(!q),P(x)},H=function(){A(!1)};return(0,o.useEffect)(function(){return document.addEventListener("click",H,!0),function(){document.removeEventListener("click",H,!0)}},[]),(0,o.useEffect)(function(){var e=function(){A(!1)};return window.addEventListener("scroll",e,!0),function(){window.removeEventListener("scroll",e,!0)}},[]),(0,n.jsxs)("div",{onMouseEnter:function(){return k(!0)},onMouseLeave:function(){return k(!1)},"data-testid":void 0===M?"tag":M,role:"listitem","aria-label":"Tag: ".concat(m||b),className:(0,r.default)("tag",d,{"tag-warn":y}),style:null!=p?p:{},onClick:function(){return z()},ref:N,children:[y&&"string"==typeof y&&(0,n.jsx)(i.AlertTriangle,{className:"advanced-tags--warning-icon mr5","aria-label":"Warning"}),y&&"string"==typeof y&&E&&(void 0===v||v)&&(0,n.jsx)("div",{className:"tag__warn-hint",role:"tooltip",children:y}),(0,n.jsx)("span",{className:"tag__label",children:m||b}),g&&!(void 0===_||_)&&(0,n.jsx)("button",{type:"button",onClick:function(e){null==e||e.preventDefault(),null==e||e.stopPropagation(),g(f)},"aria-label":"Remove ".concat(m||b),className:"tag__button",children:(0,n.jsx)(i.X,{className:"color--text"})}),q&&(0,a.createPortal)((0,n.jsx)("div",{id:"tagPopup".concat(f),className:(0,r.default)("tag__popup",w),style:B,children:j||(0,n.jsx)(l.default,{size:"small"})}),document.getElementById("app"))]})};
+function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function t(t,n){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n,r,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var a=[],i=!0,l=!1;try{for(o=o.call(e);!(i=(n=o.next()).done)&&(a.push(n.value),!t||a.length!==t);i=!0);}catch(e){l=!0,r=e}finally{try{i||null==o.return||o.return()}finally{if(l)throw r}}return a}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if("Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return e(t,n)}}(t,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return f}});var n=require("react/jsx-runtime"),r=u(require("classnames")),o=function(e,t){if(e&&e.__esModule)return e;if(null===e||(void 0===e?"undefined":e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e)!="object"&&"function"!=typeof e)return{default:e};var n=c(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var a in e)if("default"!==a&&Object.prototype.hasOwnProperty.call(e,a)){var i=o?Object.getOwnPropertyDescriptor(e,a):null;i&&(i.get||i.set)?Object.defineProperty(r,a,i):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(require("react")),a=require("react-dom"),i=require("react-feather"),l=u(require("../../Layout/Spinner"));function u(e){return e&&e.__esModule?e:{default:e}}function c(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(c=function(e){return e?n:t})(e)}function s(){}require("./Tag.scss");var f=function(e){var u,c,f=e.value,d=e.className,p=e.style,m=e.label,y=e.warning,v=e.isWarningHint,g=e.removeItem,b=e.name,h=e.isPopup,j=e.popupInfoContent,w=e.popupClassName,x=e.id,_=e.isNoDismiss,O=e.onClick,P=void 0===O?s:O,M=e.testId,N=(0,o.useRef)(null),S=t((0,o.useState)(!1),2),E=S[0],k=S[1],C=t((0,o.useState)(!1),2),q=C[0],A=C[1],I=null!=(c=null==N||null==(u=N.current)?void 0:u.getBoundingClientRect())?c:{},L=I.x,W=I.y,D=I.height,R=I.width,T=window.scrollY,B=(0,o.useMemo)(function(){if(!q||!(null==N?void 0:N.current))return{};var e,t=null==N||null==(e=N.current)?void 0:e.getBoundingClientRect(),n=t.x,r=t.y,o=t.height,a=t.width;return{left:"".concat(n,"px"),top:"".concat(r+T,"px"),transform:"translate(calc(-1 * calc(100% - ".concat(a/2+22,"px)), ").concat(o+10,"px)")}},[q,L,W,R,D,T]),z=function(){h&&A(!q),P(x)},H=function(){A(!1)};return(0,o.useEffect)(function(){return document.addEventListener("click",H,!0),function(){document.removeEventListener("click",H,!0)}},[]),(0,o.useEffect)(function(){var e=function(){A(!1)};return window.addEventListener("scroll",e,!0),function(){window.removeEventListener("scroll",e,!0)}},[]),(0,n.jsxs)("div",{onMouseEnter:function(){return k(!0)},onMouseLeave:function(){return k(!1)},"data-testid":void 0===M?"tag":M,role:"listitem","aria-label":"Tag: ".concat(m||b),className:(0,r.default)("tag",d,{"tag-warn":y}),style:null!=p?p:{},onClick:function(){return z()},ref:N,children:[y&&"string"==typeof y&&(0,n.jsx)(i.AlertTriangle,{className:"advanced-tags--warning-icon mr5","aria-label":"Warning"}),y&&"string"==typeof y&&E&&(void 0===v||v)&&(0,n.jsx)("div",{className:"tag__warn-hint",role:"tooltip",children:y}),(0,n.jsx)("span",{className:"tag__label",children:m||b}),g&&!(void 0===_||_)&&(0,n.jsx)("button",{type:"button",onClick:function(e){null==e||e.preventDefault(),null==e||e.stopPropagation(),g(f)},"aria-label":"Remove ".concat(m||b),className:"tag__button",children:(0,n.jsx)(i.X,{className:"color--text"})}),q&&(0,a.createPortal)((0,n.jsx)("div",{id:"tagPopup".concat(f),className:(0,r.default)("tag__popup",w),style:B,children:j||(0,n.jsx)(l.default,{size:"small"})}),document.getElementById("root"))]})};

package/dist/Atomic/UI/TagList/TagList.jsx

@@ -0,0 +1,256 @@
+import cn from 'classnames';
+
+import {
+  createRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Edit3 } from 'react-feather';
+
+import { checkedRef } from '../../../Functions/utils';
+import Tag from '../Tag/Tag';
+
+import './TagList.scss';
+
+function TagList({
+  disabled,
+  className,
+  onTagClick,
+  removeItem = null,
+  items = [],
+  withToggle = true,
+  disableShowMore = false,
+  shownItemsCount = 'auto',
+  testId = 'test-taglist',
+  refProp,
+
+  renderOrder,
+
+  onEditClick,
+  onToggleRenderAll,
+}) {
+  const wrapperRef = useRef(null);
+  const [tagList, setTagList] = useState([]);
+
+  const [staticTagsCount, setStaticTagsCount] = useState(-1);
+  const [renderItemsCount, setRenderItemsCount] = useState(-1);
+  const [renderAll, setRenderAll] = useState(!withToggle);
+
+  const wrapperWidth
+    = wrapperRef?.current?.getBoundingClientRect()?.width ?? -1;
+
+  const setRenderAllInterceptor = (v) => {
+    setRenderAll(v);
+    onToggleRenderAll?.(v);
+  };
+
+  const getStaticTagsCount = (computedWidth) => {
+    if (typeof shownItemsCount === 'number') return shownItemsCount;
+
+    const delta = typeof onEditClick === 'function' ? 60 : 32;
+    const result = tagList.reduce(
+      (result, { itemRef }, index) => {
+        if (result.skip) return result;
+
+        const itemStyle
+          = itemRef?.current && window.getComputedStyle(itemRef.current);
+
+        const itemWidth = [
+          Number.parseInt(itemRef.current?.getBoundingClientRect()?.width, 10),
+          Number.parseInt(itemStyle?.marginLeft, 10),
+          Number.parseInt(itemStyle?.marginRight, 10),
+        ].reduce((result, item) => {
+          if (!isNaN(item)) result += item;
+          return result;
+        }, 0);
+
+        if (
+          (!isNaN(itemWidth)
+            && itemWidth > 0
+            && itemWidth + result.width < computedWidth - delta)
+          || index === 0
+        ) {
+          result = {
+            count: result.count + 1,
+            width: result.width + itemWidth,
+            items: [...result.items, { w: itemWidth, r: itemRef?.current }],
+          };
+        }
+        else {
+          result.skip = true;
+        }
+
+        return result;
+      },
+      { count: 0, width: 0, items: [], skip: false },
+    );
+    if (result?.items?.length === 1 && tagList.length > 1) {
+      result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;
+    }
+
+    return result?.count;
+  };
+
+  const cancelDefault = (e, cb = () => {}) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+
+    cb(e);
+  };
+
+  const renderTags = () => {
+    const tagsRenderOrder
+      = renderOrder ?? tagList.map(({ value, id }) => value ?? id);
+
+    return tagsRenderOrder.map((v, i) => {
+      const item = tagList.find(({ value, id }) => {
+        if (id) return id === v; // сначала ищем по id
+        if (value) return value === v; // потом по value
+        return false;
+      });
+
+      if (!item) return null;
+
+      const isHidden
+        = renderItemsCount !== -1 && staticTagsCount !== -1
+          ? i >= renderItemsCount
+          : false;
+
+      return (
+        <div
+          className={`tag-list_wrapper_item ${isHidden ? 'tag-list_wrapper_item--hidden' : ''}`}
+          key={`tag-list-item-${item?.id ?? item?.value}`}
+          ref={checkedRef(item?.itemRef)}
+        >
+          <Tag
+            testId={`test-taglist-item-${item?.id ?? item?.value}`}
+            {...item}
+            onClick={onTagClick}
+            removeItem={removeItem}
+          />
+        </div>
+      );
+    });
+  };
+
+  const renderMoreTags = () => {
+    if (
+      tagList?.length < shownItemsCount
+      || !tagList?.length
+      || disableShowMore
+    ) {
+      return null;
+    }
+    const restItems = tagList.length - renderItemsCount;
+
+    if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
+
+    return (
+      <Tag
+        label={`+${restItems}`}
+        className="tag-list_wrapper_render-more"
+        onClick={
+          disableShowMore
+            ? () => {}
+            : e => cancelDefault(e, () => setRenderAllInterceptor(true))
+        }
+      />
+    );
+  };
+  const renderHideTags = () => {
+    if (
+      renderItemsCount !== tagList?.length
+      || !withToggle
+      || staticTagsCount === -1
+      || staticTagsCount === tagList?.length
+    ) {
+      return null;
+    }
+
+    return (
+      <Tag
+        label="..."
+        className="tag-list_wrapper_hide-more"
+        onClick={e => cancelDefault(e, () => setRenderAllInterceptor(false))}
+      />
+    );
+  };
+
+  // Set TagList Items
+  useEffect(() => {
+    setStaticTagsCount(-1);
+    setRenderItemsCount(-1);
+    setRenderAllInterceptor(false);
+    const itemsWithRef = items.map(item => ({ ...item, itemRef: createRef() }));
+    setTagList(itemsWithRef);
+  }, [items]);
+
+  // Count Row Tags
+  useLayoutEffect(() => {
+    if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
+      let computedWidth = wrapperWidth;
+
+      if (computedWidth === 0) {
+        computedWidth = Number.parseInt(
+          wrapperRef?.current
+            ? window.getComputedStyle(wrapperRef?.current)?.width
+            : 0,
+        );
+      }
+
+      if (!isNaN(computedWidth)) {
+        setStaticTagsCount(getStaticTagsCount(computedWidth));
+      }
+    }
+  }, [tagList, wrapperWidth, wrapperRef?.current]);
+
+  //
+  useLayoutEffect(() => {
+    setRenderItemsCount(staticTagsCount);
+  }, [staticTagsCount]);
+
+  // Toggle Show/Hide More Tags
+  useEffect(() => {
+    setRenderItemsCount(renderAll ? tagList?.length : staticTagsCount);
+  }, [renderAll]);
+
+  useEffect(() => {
+    if (wrapperRef?.current && refProp) refProp.current = wrapperRef?.current;
+  }, [wrapperRef?.current]);
+
+  return (
+    <div
+      className={cn(
+        'tag-list_wrapper',
+        `${
+          renderItemsCount !== tagList?.length
+          || !withToggle
+          || staticTagsCount === -1
+          || staticTagsCount === tagList?.length
+            ? 'tag-list_wrapper--only-static-items'
+            : 'tag-list_wrapper--all-items'
+        }`,
+        className,
+        { 'tag-list_wrapper--disabled': disabled },
+      )}
+      style={{
+        visibility: staticTagsCount === -1 ? 'hidden' : 'visible',
+        zIndex: staticTagsCount === -1 ? '-1' : 'auto',
+      }}
+      ref={wrapperRef}
+    >
+      {renderTags()}
+      {renderMoreTags()}
+      {renderHideTags()}
+      {typeof onEditClick === 'function' && (
+        <div className="tag-list__edit-trigger">
+          <Edit3 onClick={onEditClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TagList;