intelicoreact 1.6.19 → 1.6.20

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

@@ -1 +1,53 @@
-function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var n=0,e=Array(t);n<t;n++)e[n]=r[n];return e}import{jsx as t,jsxs as n,Fragment as e}from"react/jsx-runtime";import{useEffect as o,useState as a}from"react";import l from"classnames";import{useOutsideToggle as i}from"../../../../Functions/utils";import{KEY_CODE as u}from"../../Modal/Modal";import"../Table.scss";export default function(c){var s,f=c.value,m=c.percent,p=c.onChange,y=c.className,d=(s=a(f),function(r){if(Array.isArray(r))return r}(s)||function(r,t){var n,e,o=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=o){var a=[],l=!0,i=!1;try{for(o=o.call(r);!(l=(n=o.next()).done)&&(a.push(n.value),a.length!==t);l=!0);}catch(r){i=!0,e=r}finally{try{l||null==o.return||o.return()}finally{if(i)throw e}}return a}}(s,2)||function(t,n){if(t){if("string"==typeof t)return r(t,2);var e=Object.prototype.toString.call(t).slice(8,-1);if("Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return r(t,n)}}(s,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),g=d[0],h=d[1],v=i(!1),b=v.isToggled,j=v.toggleOff,A=v.toggleOn;return o(function(){h(f)},[f,b]),t(e,{children:b?t(Input,{value:g,onChange:function(r){return h(r)},onBlur:j,onKeyUp:function(r){var t=r.keyCode,n=r.target;t===u.ENTER&&(p(Number(n.value)||1),j())},autoFocus:!0}):n("div",{className:l("td-weight",y),onClick:A,children:[t("span",{children:f}),n("span",{className:"ml2 color--grey-gull",children:["(",m,"%)"]})]})})}
+import { useEffect, useState } from "react";
+
+import cn from "classnames";
+
+import { useOutsideToggle } from "../../../../Functions/utils";
+import { KEY_CODE } from "../../Modal/Modal";
+
+import "../Table.scss";
+
+const 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.js

@@ -1 +1,160 @@
-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=[],l=!0,u=!1;try{for(o=o.call(e);!(l=(n=o.next()).done)&&(a.push(n.value),!t||a.length!==t);l=!0);}catch(e){u=!0,r=e}finally{try{l||null==o.return||o.return()}finally{if(u)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=i(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 l=o?Object.getOwnPropertyDescriptor(e,a):null;l&&(l.get||l.set)?Object.defineProperty(r,a,l):r[a]=e[a]}return r.default=e,n&&n.set(e,r),r}(require("react")),a=require("react-dom"),l=require("react-feather"),u=i(require("../../Layout/Spinner"));function i(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 i,c,f=e.value,d=e.className,p=e.style,m=e.label,y=e.warning,v=e.removeItem,g=e.name,b=e.isPopup,h=e.popupInfoContent,j=e.popupClassName,w=e.id,x=e.isNoDismiss,_=e.onClick,O=void 0===_?s:_,P=e.testId,M=(0,o.useRef)(null),N=t((0,o.useState)(!1),2),S=N[0],E=N[1],k=t((0,o.useState)(!1),2),C=k[0],q=k[1],A=null!=(c=null==M||null==(i=M.current)?void 0:i.getBoundingClientRect())?c:{},I=A.x,L=A.y,D=A.height,R=A.width,T=window.scrollY,W=(0,o.useMemo)(function(){if(!C||!(null==M?void 0:M.current))return{};var e,t=null==M||null==(e=M.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)")}},[C,I,L,R,D,T]),B=function(){b&&q(!C),O(w)},z=function(){q(!1)};return(0,o.useEffect)(function(){return document.addEventListener("click",z,!0),function(){document.removeEventListener("click",z,!0)}},[]),(0,o.useEffect)(function(){var e=function(){q(!1)};return window.addEventListener("scroll",e,!0),function(){window.removeEventListener("scroll",e,!0)}},[]),(0,n.jsxs)("div",{onMouseEnter:function(){return E(!0)},onMouseLeave:function(){return E(!1)},"data-testid":void 0===P?"tag":P,role:"listitem","aria-label":"Tag: ".concat(m||g),className:(0,r.default)("tag",d,{"tag-warn":y}),style:null!=p?p:{},onClick:function(){return B()},ref:M,children:[y&&"string"==typeof y&&(0,n.jsx)(l.AlertTriangle,{className:"advanced-tags--warning-icon mr5","aria-label":"Warning"}),y&&"string"==typeof y&&S&&(0,n.jsx)("div",{className:"tag__warn-hint",role:"tooltip",children:y}),(0,n.jsx)("span",{className:"tag__label",children:m||g}),v&&!(void 0===x||x)&&(0,n.jsx)("button",{type:"button",onClick:function(e){null==e||e.preventDefault(),null==e||e.stopPropagation(),v(f)},"aria-label":"Remove ".concat(m||g),className:"tag__button",children:(0,n.jsx)(l.X,{className:"color--text"})}),C&&(0,a.createPortal)((0,n.jsx)("div",{id:"tagPopup".concat(f),className:(0,r.default)("tag__popup",j),style:W,children:h||(0,n.jsx)(u.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 = [], l = !0, u = !1;
+            try {
+                for(o = o.call(e); !(l = (n = o.next()).done) && (a.push(n.value), !t || a.length !== t); l = !0);
+            } catch (e) {
+                u = !0, r = e;
+            } finally{
+                try {
+                    l || null == o.return || o.return();
+                } finally{
+                    if (u) 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 = i(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 l = o ? Object.getOwnPropertyDescriptor(e, a) : null;
+        l && (l.get || l.set) ? Object.defineProperty(r, a, l) : r[a] = e[a];
+    }
+    return r.default = e, n && n.set(e, r), r;
+}(require("react")), a = require("react-dom"), l = require("react-feather"), u = i(require("../../Layout/Spinner"));
+function i(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 i, c, f = e.value, d = e.className, p = e.style, m = e.label, y = e.warning, v = e.removeItem, g = e.name, b = e.isPopup, h = e.popupInfoContent, j = e.popupClassName, w = e.id, x = e.isNoDismiss, _ = e.onClick, O = void 0 === _ ? s : _, P = e.testId, M = (0, o.useRef)(null), N = t((0, o.useState)(!1), 2), S = N[0], E = N[1], k = t((0, o.useState)(!1), 2), C = k[0], q = k[1], A = null != (c = null == M || null == (i = M.current) ? void 0 : i.getBoundingClientRect()) ? c : {}, I = A.x, L = A.y, D = A.height, R = A.width, T = window.scrollY, W = (0, o.useMemo)(function() {
+        if (!C || !(null == M ? void 0 : M.current)) return {};
+        var e, t = null == M || null == (e = M.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)")
+        };
+    }, [
+        C,
+        I,
+        L,
+        R,
+        D,
+        T
+    ]), B = function() {
+        b && q(!C), O(w);
+    }, z = function() {
+        q(!1);
+    };
+    return (0, o.useEffect)(function() {
+        return document.addEventListener('click', z, !0), function() {
+            document.removeEventListener('click', z, !0);
+        };
+    }, []), (0, o.useEffect)(function() {
+        var e = function() {
+            q(!1);
+        };
+        return window.addEventListener('scroll', e, !0), function() {
+            window.removeEventListener('scroll', e, !0);
+        };
+    }, []), (0, n.jsxs)("div", {
+        onMouseEnter: function() {
+            return E(!0);
+        },
+        onMouseLeave: function() {
+            return E(!1);
+        },
+        "data-testid": void 0 === P ? 'tag' : P,
+        role: "listitem",
+        "aria-label": "Tag: ".concat(m || g),
+        className: (0, r.default)('tag', d, {
+            'tag-warn': y
+        }),
+        style: null != p ? p : {},
+        onClick: function() {
+            return B();
+        },
+        ref: M,
+        children: [
+            y && 'string' == typeof y && (0, n.jsx)(l.AlertTriangle, {
+                className: "advanced-tags--warning-icon mr5",
+                "aria-label": "Warning"
+            }),
+            y && 'string' == typeof y && S && (0, n.jsx)("div", {
+                className: "tag__warn-hint",
+                role: "tooltip",
+                children: y
+            }),
+            (0, n.jsx)("span", {
+                className: "tag__label",
+                children: m || g
+            }),
+            v && !(void 0 === x || x) && (0, n.jsx)("button", {
+                type: "button",
+                onClick: function(e) {
+                    null == e || e.preventDefault(), null == e || e.stopPropagation(), v(f);
+                },
+                "aria-label": "Remove ".concat(m || g),
+                className: "tag__button",
+                children: (0, n.jsx)(l.X, {
+                    className: "color--text"
+                })
+            }),
+            C && (0, a.createPortal)((0, n.jsx)("div", {
+                id: "tagPopup".concat(f),
+                className: (0, r.default)('tag__popup', j),
+                style: W,
+                children: h || (0, n.jsx)(u.default, {
+                    size: "small"
+                })
+            }), document.getElementById('app'))
+        ]
+    });
+};

package/dist/Atomic/UI/TagList/TagList.js

@@ -1 +1,251 @@
-function t(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=Array(n);e<n;e++)r[e]=t[e];return r}function n(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.forEach(function(n){var r;r=e[n],n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r})}return t}function e(t,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e})(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}),t}function r(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,n){var e,r,i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var l=[],o=!0,u=!1;try{for(i=i.call(t);!(o=(e=i.next()).done)&&(l.push(e.value),!n||l.length!==n);o=!0);}catch(t){u=!0,r=t}finally{try{o||null==i.return||i.return()}finally{if(u)throw r}}return l}}(t,n)||i(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.")}()}function i(n,e){if(n){if("string"==typeof n)return t(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);if("Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return t(n,e)}}import{jsx as l,jsxs as o}from"react/jsx-runtime";import{createRef as u,useEffect as a,useLayoutEffect as c,useRef as s,useState as d}from"react";import f from"classnames";import{Edit3 as p}from"react-feather";import{checkedRef as m}from"../../../Functions/utils";import v from"../Tag/Tag";import"./TagList.scss";export default function(g){var y,b,h,w=g.disabled,O=g.className,j=g.onTagClick,I=g.removeItem,S=void 0===I?null:I,_=g.items,P=void 0===_?[]:_,C=g.withToggle,N=void 0===C||C,k=g.disableShowMore,A=void 0!==k&&k,x=g.shownItemsCount,T=void 0===x?"auto":x,R=(g.testId,g.refProp),D=g.renderOrder,E=g.onEditClick,B=g.onToggleRenderAll,L=s(null),M=r(d([]),2),z=M[0],F=M[1],U=r(d(-1),2),W=U[0],$=U[1],q=r(d(-1),2),G=q[0],H=q[1],J=r(d(!N),2),K=J[0],Q=J[1],V=null!=(h=null==L||null==(b=L.current)||null==(y=b.getBoundingClientRect())?void 0:y.width)?h:-1,X=function(t){Q(t),null==B||B(t)},Y=function(n){if("number"==typeof T)return T;var e,r="function"==typeof E?60:32,l=z.reduce(function(e,l,o){var u,a,c,s=l.itemRef;if(e.skip)return e;var d=(null==s?void 0:s.current)&&window.getComputedStyle(s.current),f=[parseInt(null==(c=s.current)||null==(a=c.getBoundingClientRect())?void 0:a.width,10),parseInt(null==d?void 0:d.marginLeft,10),parseInt(null==d?void 0:d.marginRight,10)].reduce(function(t,n){return isNaN(n)||(t+=n),t},0);return!isNaN(f)&&f>0&&f+e.width<n-r||0===o?e={count:e.count+1,width:e.width+f,items:((function(n){if(Array.isArray(n))return t(n)})(u=e.items)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(u)||i(u)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).concat([{w:f,r:null==s?void 0:s.current}])}:e.skip=!0,e},{count:0,width:0,items:[],skip:!1});return(null==l||null==(e=l.items)?void 0:e.length)===1&&z.length>1&&(l.items[0].r.style.maxWidth="".concat(n-r-8,"px")),null==l?void 0:l.count},Z=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(){};null==t||t.preventDefault(),null==t||t.stopPropagation(),n(t)};return a(function(){$(-1),H(-1),X(!1),F(P.map(function(t){return e(n({},t),{itemRef:u()})}))},[P]),c(function(){if(N&&-1!==V&&-1===W){var t,n=V;0===n&&(n=parseInt((null==L?void 0:L.current)?null==(t=window.getComputedStyle(null==L?void 0:L.current))?void 0:t.width:0)),isNaN(n)||$(Y(n))}},[z,V,null==L?void 0:L.current]),c(function(){H(W)},[W]),a(function(){H(K?null==z?void 0:z.length:W)},[K]),a(function(){(null==L?void 0:L.current)&&R&&(R.current=null==L?void 0:L.current)},[null==L?void 0:L.current]),o("div",{className:f("tag-list_wrapper","".concat(G===(null==z?void 0:z.length)&&N&&-1!==W&&W!==(null==z?void 0:z.length)?"tag-list_wrapper--all-items":"tag-list_wrapper--only-static-items"),O,{"tag-list_wrapper--disabled":w}),style:{visibility:-1===W?"hidden":"visible",zIndex:-1===W?"-1":"auto"},ref:L,children:[(null!=D?D:z.map(function(t){var n=t.value,e=t.id;return null!=n?n:e})).map(function(t,r){var i,o,u=z.find(function(n){var e=n.value,r=n.id;return(null!=e?e:r)===t});if(!u)return null;var a=-1!==G&&-1!==W&&r>=G;return l("div",{className:"tag-list_wrapper_item ".concat(a?"tag-list_wrapper_item--hidden":""),ref:m(null==u?void 0:u.itemRef),children:l(v,e(n({testId:"test-taglist-item-".concat(null!=(i=null==u?void 0:u.id)?i:null==u?void 0:u.value)},u),{onClick:j,removeItem:S}))},"tag-list-item-".concat(null!=(o=null==u?void 0:u.id)?o:null==u?void 0:u.value))}),function(){if((null==z?void 0:z.length)<T||!(null==z?void 0:z.length)||A)return null;var t=z.length-G;return 0!==t&&N&&-1!==W?l(v,{label:"+".concat(t),className:"tag-list_wrapper_render-more",onClick:A?function(){}:function(t){return Z(t,function(){return X(!0)})}}):null}(),G===(null==z?void 0:z.length)&&N&&-1!==W&&W!==(null==z?void 0:z.length)?l(v,{label:"...",className:"tag-list_wrapper_hide-more",onClick:function(t){return Z(t,function(){return X(!1)})}}):null,"function"==typeof E&&l("div",{className:"tag-list__edit-trigger",children:l(p,{onClick:E})})]})}
+import React, {
+  createRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+import cn from "classnames";
+import { Edit3 } from "react-feather";
+
+import { checkedRef } from "../../../Functions/utils";
+import Tag from "../Tag/Tag";
+
+import "./TagList.scss";
+
+const 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 = [
+          parseInt(itemRef.current?.getBoundingClientRect()?.width, 10),
+          parseInt(itemStyle?.marginLeft, 10),
+          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 }) => (value ?? id) === v);
+
+      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);
+    setTagList(items.map((item) => ({ ...item, itemRef: createRef() })));
+  }, [items]);
+
+  // Count Row Tags
+  useLayoutEffect(() => {
+    if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
+      let computedWidth = wrapperWidth;
+
+      if (computedWidth === 0) {
+        computedWidth = 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(() => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    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;

package/dist/Atomic/UI/UserBox/UserBox.js

@@ -1 +1,73 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return o}});var e=require("react/jsx-runtime"),r=l(require("classnames"));require("react");var a=require("../../../Functions/utils"),s=l(require("../../FormElements/Label/Label")),t=l(require("../Button/Button"));function l(e){return e&&e.__esModule?e:{default:e}}require("./UserBox.scss");var o=function(l){var o=l.name,n=void 0===o?"Username":o,d=l.role,i=l.id,u=l.onClick,c=l.isModal,x=l.className,b=l.colors,m=l.testId,v=n.charAt(0).toUpperCase();return(0,e.jsx)("div",{"data-testid":void 0===m?"userbox":m,className:(0,r.default)("td-user-box",x),role:"region","aria-label":"User box for ".concat(n),children:c?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{style:{backgroundColor:(0,a.getColorById)(i,b)},className:"td-user-box__avatar",children:v}),(0,e.jsxs)("div",{className:"td-user-box__user-data",children:[(0,e.jsx)(t.default,{className:"p0 no-shadow",onClick:u,label:n,variant:"link"}),d&&(0,e.jsx)("span",{children:d})]})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{style:{backgroundColor:(0,a.getColorById)(i)},className:"td-user-box__avatar",children:v}),(0,e.jsxs)("div",{className:"td-user-box__user-data",children:[(0,e.jsx)(s.default,{label:n}),d&&(0,e.jsx)("span",{"aria-label":"User role: ".concat(d),children:d})]})]})})};
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), Object.defineProperty(exports, "default", {
+    enumerable: !0,
+    get: function() {
+        return o;
+    }
+});
+var e = require("react/jsx-runtime"), r = l(require("classnames"));
+require("react");
+var a = require("../../../Functions/utils"), s = l(require("../../FormElements/Label/Label")), t = l(require("../Button/Button"));
+function l(e) {
+    return e && e.__esModule ? e : {
+        default: e
+    };
+}
+require("./UserBox.scss");
+var o = function(l) {
+    var o = l.name, n = void 0 === o ? 'Username' : o, d = l.role, i = l.id, u = l.onClick, c = l.isModal, x = l.className, b = l.colors, m = l.testId, v = n.charAt(0).toUpperCase();
+    return (0, e.jsx)("div", {
+        "data-testid": void 0 === m ? 'userbox' : m,
+        className: (0, r.default)('td-user-box', x),
+        role: "region",
+        "aria-label": "User box for ".concat(n),
+        children: c ? (0, e.jsxs)(e.Fragment, {
+            children: [
+                (0, e.jsx)("div", {
+                    style: {
+                        backgroundColor: (0, a.getColorById)(i, b)
+                    },
+                    className: "td-user-box__avatar",
+                    children: v
+                }),
+                (0, e.jsxs)("div", {
+                    className: "td-user-box__user-data",
+                    children: [
+                        (0, e.jsx)(t.default, {
+                            className: "p0 no-shadow",
+                            onClick: u,
+                            label: n,
+                            variant: "link"
+                        }),
+                        d && (0, e.jsx)("span", {
+                            children: d
+                        })
+                    ]
+                })
+            ]
+        }) : (0, e.jsxs)(e.Fragment, {
+            children: [
+                (0, e.jsx)("div", {
+                    style: {
+                        backgroundColor: (0, a.getColorById)(i)
+                    },
+                    className: "td-user-box__avatar",
+                    children: v
+                }),
+                (0, e.jsxs)("div", {
+                    className: "td-user-box__user-data",
+                    children: [
+                        (0, e.jsx)(s.default, {
+                            label: n
+                        }),
+                        d && (0, e.jsx)("span", {
+                            "aria-label": "User role: ".concat(d),
+                            children: d
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/Atomic/UI/WizardStepper/constructor.js

@@ -1 +1,84 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import i from"../Status/Status";export var WIZARD_STEP_VARIANTS=Object.freeze({DEFAULT:"default",DONE:"done",ACTIVE:"active"});export var mockData=[{key:"businessInfo",label:"Provide Business Info",description:"This information will help us to evaluate your application",isFinished:!0},{key:"principal",label:"Add Principal Information",description:"A principal is essentially another name for a company owner. At some corporations, the principal is also the founder, CEO, or even the chief investor",isFinished:!0,isOptional:!0},{key:"coOwners",label:"Add Co-Owners",description:"{merchantName} will receive that amount from {lenderNmae}",isActive:!0,titleSlot:e("span",{className:"custom-title-slot",children:"$15,001"}),contentSlot:e(function(){var i={fontSize:"14px",fontWeight:400,lineHeight:"20px",letterSpacing:"0.2px"};return[{title:"Requested Amont",value:"$15,000"},{title:"Repayment Amount",value:"$15,001"},{title:"Repayment Date",value:"12/12/2021"}].map(function(a){return t("div",{style:{display:"flex",justifyContent:"space-between",maxWidth:"250px"},children:[e("span",{style:i,children:a.title}),e("span",{style:i,children:a.value})]})})},{})},{key:"bankAccount",label:"Add a Bank Account",description:"Your bank account information will be used to securely and automatically transfer the funds",titleSlot:e(i,{label:"Some JSX",status:"draft"})},{key:"documents",label:"Upload Documents",description:"Please upload the required documents"},{key:"review",label:"Review & Submit",description:"Please review the information and submit your application"},{key:"success",label:"Success",description:"Your application has been submitted successfully"},{key:"failure",label:"Failure",description:"Your application has been failed"},{key:"pending",label:"Pending",description:"Your application is under review"}];
+import React from 'react';
+import Status from '../Status/Status';
+export const WIZARD_STEP_VARIANTS = Object.freeze({
+  DEFAULT: 'default',
+  DONE: 'done',
+  ACTIVE: 'active',
+});
+
+const JSXMockComponent = () => {
+  const arr = [
+    { title: 'Requested Amont', value: '$15,000' },
+    { title: 'Repayment Amount', value: '$15,001' },
+    { title: 'Repayment Date', value: '12/12/2021' },
+  ]
+
+  const textStyles = {
+  fontSize: '14px',
+  fontWeight: 400,
+  lineHeight: '20px',
+  letterSpacing: '0.2px'
+  };
+
+  return arr.map(row => {
+    return <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '250px'}}>
+      <span style={textStyles}>{row.title}</span>
+      <span style={textStyles}>{row.value}</span>
+    </div>
+  });
+}
+
+export const mockData = [
+  {
+    key: 'businessInfo',
+    label: 'Provide Business Info',
+    description: 'This information will help us to evaluate your application',
+    isFinished: true,
+  },
+  {
+    key: 'principal',
+    label: 'Add Principal Information',
+    description: 'A principal is essentially another name for a company owner. At some corporations, the principal is also the founder, CEO, or even the chief investor',
+    isFinished: true,
+    isOptional: true,
+  },
+  {
+    key: 'coOwners',
+    label: 'Add Co-Owners',
+    description: '{merchantName} will receive that amount from {lenderNmae}',
+    isActive: true,
+    titleSlot: <span className='custom-title-slot'>$15,001</span>,
+    contentSlot: <JSXMockComponent />,
+  },
+  {
+    key: 'bankAccount',
+    label: 'Add a Bank Account',
+    description: 'Your bank account information will be used to securely and automatically transfer the funds',
+    titleSlot:  <Status label="Some JSX" status="draft" />,
+  },
+  {
+    key: 'documents',
+    label: 'Upload Documents',
+    description: 'Please upload the required documents',
+  },
+  {
+    key: 'review',
+    label: 'Review & Submit',
+    description: 'Please review the information and submit your application',
+  },
+  {
+    key: 'success',
+    label: 'Success',
+    description: 'Your application has been submitted successfully',
+  },
+  {
+    key: 'failure',
+    label: 'Failure',
+    description: 'Your application has been failed',
+  },
+  {
+    key: 'pending',
+    label: 'Pending',
+    description: 'Your application is under review',
+  },
+]

package/dist/Atomic/UI/WizardStepper/index.js

@@ -1 +1,3 @@
-import o from"./ui";export default o;
+import WizardStepper from './ui';
+
+export default WizardStepper;