intelicoreact 1.8.8 → 1.8.10

package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.jsx

@@ -1 +1,115 @@
-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(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),a.forEach(function(n){t(e,n,r[n])})}return e}function r(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n})(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}import{jsx as a,jsxs as c}from"react/jsx-runtime";import o from"classnames";import"./WidgetWithSwitchableRows.scss";var i="widget-with-switchable-rows";export default function(l){var s,d=l||{},u=d.className,m=d.title,b=d.rightHeaderContent,y=d.nullContentData,f=d.columns,p=void 0===f?[]:f,h=d.rows,v=d.CellComponent,_=d.CellComponentProps,w=d.onChange,g=d.isNoHeader,O=[r(n({},p[0]),{key:"isActive",type:"switcher"})].concat(function(t){if(Array.isArray(t))return e(t)}(s=p.slice(1))||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(s)||function(t,n){if(t){if("string"==typeof t)return e(t,void 0);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)}}(s)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}());return c("div",{className:o(i,u),children:[!(void 0!==g&&g)&&c("div",{className:o("".concat(i,"__header")),children:[a("div",{className:o("".concat(i,"__title-block")),children:m}),a("div",{className:o("".concat(i,"__right-header-content-block")),children:b})]}),c("div",{className:o("".concat(i,"__body"),t({},"".concat(i,"__body_no-content"),!(null==h?void 0:h.length))),children:[!!(null==h?void 0:h.length)&&a("div",{className:o("".concat(i,"__thead")),children:O.map(function(e){return a("div",{className:o("".concat(i,"__thead-cell"),e.theadCellClassName,e.columnClassName,t({},"".concat(i,"__thead-cell_reqiured"),e.isRequired)),"data-key":e.key,children:e.label},"thead-".concat(e.key))})}),a("div",{className:o("".concat(i,"__table")),children:(null==h?void 0:h.length)?h.map(function(e){return a("div",{className:o("".concat(i,"__row")),"data-id":e.id,children:O.map(function(t){return a("div",{className:o("".concat(i,"__cell"),t.cellClassName,t.columnClassName),children:a(v,r(n({},_),{field:n(r(n({},t),{value:e[t.key],rowData:e}),"isActive"===t.key?{disabled:t.disabled,label:e.label,isActive:e.isActive}:{disabled:!e.isActive,label:t.label}),onChange:function(n,r,a,c,o){return w({value:r,additional:o,propName:a,innerFieldKey:c,key:t.key||n,rowId:e.id})}}))},"row-".concat(e.id,"-cell-").concat(t.key))})},"row-".concat(e.id))}):a("div",{className:o("".concat(i,"__row")),"data-id":"empty-row",children:a("span",{className:o("".concat(i,"__no-data-content")),children:null!=y?y:"No data"})})})]})]})}
+import cn from 'classnames';
+
+import './WidgetWithSwitchableRows.scss';
+
+const RC = 'widget-with-switchable-rows';
+
+function WidgetWithSwitchableRows(props) {
+  const {
+    className,
+    title,
+    rightHeaderContent,
+    nullContentData,
+
+    columns = [],
+    rows,
+    CellComponent,
+    CellComponentProps,
+    onChange,
+    isNoHeader = false,
+  } = props || {};
+
+  const preperedColumns = [
+    { ...columns[0], key: 'isActive', type: 'switcher' },
+    ...columns.slice(1),
+  ];
+
+  return (
+    <div className={cn(RC, className)}>
+      {!isNoHeader && (
+        <div className={cn(`${RC}__header`)}>
+          <div className={cn(`${RC}__title-block`)}>{title}</div>
+          <div className={cn(`${RC}__right-header-content-block`)}>
+            {rightHeaderContent}
+          </div>
+        </div>
+      )}
+      <div
+        className={cn(`${RC}__body`, {
+          [`${RC}__body_no-content`]: !rows?.length,
+        })}
+      >
+        {Boolean(rows?.length) && (
+          <div className={cn(`${RC}__thead`)}>
+            {preperedColumns.map(field => (
+              <div
+                key={`thead-${field.key}`}
+                className={cn(
+                  `${RC}__thead-cell`,
+                  field.theadCellClassName,
+                  field.columnClassName,
+                  {
+                    [`${RC}__thead-cell_reqiured`]: field.isRequired,
+                  },
+                )}
+                data-key={field.key}
+              >
+                {field.label}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className={cn(`${RC}__table`)}>
+          {rows?.length
+            ? (
+                rows.map(row => (
+                  <div
+                    key={`row-${row.id}`}
+                    className={cn(`${RC}__row`)}
+                    data-id={row.id}
+                  >
+                    {preperedColumns.map(cell => (
+                      <div
+                        key={`row-${row.id}-cell-${cell.key}`}
+                        className={cn(
+                          `${RC}__cell`,
+                          cell.cellClassName,
+                          cell.columnClassName,
+                        )}
+                      >
+                        <CellComponent
+                          {...CellComponentProps}
+                          field={{
+                            ...cell,
+                            value: row[cell.key],
+                            rowData: row,
+                            ...(cell.key === 'isActive'
+                              ? {
+                                  disabled: cell.disabled,
+                                  label: row.label,
+                                  isActive: row.isActive,
+                                }
+                              : { disabled: !row.isActive, label: cell.label }),
+                          }}
+                          onChange={(key, value, propName, innerFieldKey, additional) => onChange({ value, additional, propName, innerFieldKey, key: cell.key || key, rowId: row.id })}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                ))
+              )
+            : (
+                <div className={cn(`${RC}__row`)} data-id="empty-row">
+                  <span className={cn(`${RC}__no-data-content`)}>
+                    {nullContentData ?? 'No data'}
+                  </span>
+                </div>
+              )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default WidgetWithSwitchableRows;

package/dist/Atomic/Layout/Header/Header.jsx

@@ -1 +1,86 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}import{jsx as r,jsxs as t}from"react/jsx-runtime";import n from"classnames";import{useRef as a,useState as i}from"react";import{Bell as o,ChevronRight as l,Power as s}from"react-feather";import c from"../../UI/Hint/Hint";import"./Header.scss";export default function(u){var m,d=u.className,f=u.name,h=u.surname,v=u.status,p=u.img,g=u.hintLabel,y=u.hintText,N=(m=i(!1),function(e){if(Array.isArray(e))return e}(m)||function(e,r){var t,n,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var i=[],o=!0,l=!1;try{for(a=a.call(e);!(o=(t=a.next()).done)&&(i.push(t.value),i.length!==r);o=!0);}catch(e){l=!0,n=e}finally{try{o||null==a.return||a.return()}finally{if(l)throw n}}return i}}(m,2)||function(r,t){if(r){if("string"==typeof r)return e(r,2);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(r,t)}}(m,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.")}()),b=N[0],j=N[1],x=a(null),A={toggleMenu:function(){b||j(!b)},closeMenu:function(){setTimeout(function(){return j(!1)},50)},logout:function(){A.toggleMenu()}};return t("header",{className:n("header",d),children:[r("div",{className:"df",children:r(c,{side:"bottom",hint:void 0===y?"Hint text":y,className:"header__hint",label:void 0===g?"Help":g,iconOutline:!0})}),t("div",{className:"j6 user-menu",children:[t("div",{onClick:function(){},className:"header--bell",children:[r(o,{className:"header--bell-icon"}),r("div",{className:"header--bell-notification-icon"})]}),r("div",{className:"header--user-ava",children:r("img",{src:void 0===p?"":p,alt:""})}),t("div",{className:"dfc mr10",children:[t("span",{className:"header--user-name",children:[void 0===f?"John":f," ",void 0===h?"Silver":h]}),r("span",{className:"header--user-status",children:void 0===v?"admin":v})]}),r(l,{onClick:A.toggleMenu,className:n("accordion--title-chevron",{"accordion--title-chevron-open":b})}),b&&r("div",{className:"user-menu__dropdown",ref:x,children:t("div",{className:"user-menu__item",onClick:A.logout,children:[r(s,{className:"mr10"})," ","Logout"]})})]})]})}
+import cn from 'classnames';
+
+import { useRef, useState } from 'react';
+import { Bell, ChevronRight, Power } from 'react-feather';
+
+import Hint from '../../UI/Hint/Hint';
+
+import './Header.scss';
+
+function Header({
+  className,
+  name = 'John',
+  surname = 'Silver',
+  status = 'admin',
+  img = '',
+  hintLabel = 'Help',
+  hintText = 'Hint text',
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const userMenu = useRef(null);
+
+  const handle = {
+    toggleMenu: () => {
+      if (!isOpen) setIsOpen(!isOpen);
+    },
+    closeMenu: () => {
+      setTimeout(() => setIsOpen(false), 50);
+    },
+    logout: () => {
+      handle.toggleMenu();
+    },
+  };
+
+  return (
+    <header className={cn('header', className)}>
+      <div className="df">
+        <Hint
+          side="bottom"
+          hint={hintText}
+          className="header__hint"
+          label={hintLabel}
+          iconOutline
+        />
+      </div>
+
+      <div className="j6 user-menu">
+        <div onClick={() => {}} className="header--bell">
+          <Bell className="header--bell-icon" />
+          <div className="header--bell-notification-icon" />
+        </div>
+
+        <div className="header--user-ava">
+          <img src={img} alt="" />
+        </div>
+
+        <div className="dfc mr10">
+          <span className="header--user-name">
+            {name}
+            {' '}
+            {surname}
+          </span>
+          <span className="header--user-status">{status}</span>
+        </div>
+
+        <ChevronRight
+          onClick={handle.toggleMenu}
+          className={cn('accordion--title-chevron', {
+            'accordion--title-chevron-open': isOpen,
+          })}
+        />
+        {isOpen && (
+          <div className="user-menu__dropdown" ref={userMenu}>
+            <div className="user-menu__item" onClick={handle.logout}>
+              <Power className="mr10" />
+              {' '}
+              Logout
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
+
+export default Header;

package/dist/Atomic/Layout/MainMenu/MainMenu.jsx

@@ -1 +1,164 @@
-function n(n,e){(null==e||e>n.length)&&(e=n.length);for(var i=0,r=Array(e);i<e;i++)r[i]=n[i];return r}function e(e,i){return function(n){if(Array.isArray(n))return n}(e)||function(n,e){var i,r,t=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=t){var a=[],o=!0,s=!1;try{for(t=t.call(n);!(o=(i=t.next()).done)&&(a.push(i.value),!e||a.length!==e);o=!0);}catch(n){s=!0,r=n}finally{try{o||null==t.return||t.return()}finally{if(s)throw r}}return a}}(e,i)||function(e,i){if(e){if("string"==typeof e)return n(e,i);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(e,i)}}(e,i)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as i,jsxs as r}from"react/jsx-runtime";import t from"classnames";import{useState as a}from"react";import*as o from"react-feather";import{NavLink as s}from"react-router-dom";import c from"../../../Langs";import m from"../../UI/Accordion/Accordion";import"./MainMenu.scss";export default function(n){var l=n.items,u=n.className,d=c[globalThis.lng],f=e(a(!0),2),h=f[0],p=f[1],v=e(a(!1),2),N=v[0],b=v[1],y=e(a(!1),2),M=y[0],g=y[1],x=t("main-menu--items-box-chapter",{"main-menu--items-box-chapter-hidden":!h&&!N}),O=t("main-menu--accordion",{"main-menu--accordion-hidden":!h&&!N}),E=t("main-menu--items-box",{"main-menu--items-box-closed":!h&&!N}),A=t("main-menu",u,{"main-menu--closed":!h&&!N}),j=function(){h||(b(!N),l.mainMenu.forEach(function(n){n.isOpen=!1}),l.partners.forEach(function(n){n.isOpen=!1}),l.other.forEach(function(n){n.isOpen=!1}))},k=function(){p(!h),l.mainMenu.forEach(function(n){n.isOpen=!1}),l.partners.forEach(function(n){n.isOpen=!1}),l.other.forEach(function(n){n.isOpen=!1})};return r("div",{className:A,onMouseEnter:function(){return j()},onMouseLeave:function(){return b(!1)},children:[r("div",{className:t("main-menu--header",{"main-menu--header-closed":!h&&!N}),children:[i("div",{className:t("main-menu--logo",{"main-menu--logo-none":!h&&!N})}),i("div",{className:"main-menu--header-btn",onClick:function(){return k()},children:i("div",{className:"j5",onMouseEnter:function(){return g(!0)},onMouseLeave:function(){return g(!1)},children:h&&!M?i(o.Menu,{}):h&&M?i(o.ChevronLeft,{}):!h&&N?i(o.ChevronRight,{}):h?null:i("div",{className:"main-menu--logo-close"})})})]}),r("div",{className:E,children:[i("div",{className:t("main-menu--items-box-main"),children:l.main.map(function(n,e){var a=o[n.icon];return n.link?i(s,{to:n.link,className:t("main-menu--items-box-title"),children:r("div",{className:"main-menu--item",children:[i("div",{className:"df",children:i(a,{className:t("mr5",n.className)})}),i("span",{className:t({hidden:!h&&!N}),children:(null==n?void 0:n.title)||"Link"})]})},e):i("span",{className:t("main-menu--items-box-title",{hidden:!h&&!N}),children:null==d?void 0:d.titles[null==n?void 0:n.title]},e)})}),i("div",{className:x,children:i("span",{children:"Main menu"})}),i(m,{className:O,items:l.mainMenu,onClick:function(){}}),i("div",{className:x,children:i("span",{children:"Partners"})}),i(m,{isOpen:h,isMenuHovered:N,className:O,items:l.partners,onClick:function(){}}),i("div",{className:x,children:i("span",{children:"Other"})}),i(m,{className:O,isOpen:h,isMenuHovered:N,items:l.other,onClick:function(){}})]})]})}
+import cn from 'classnames';
+
+import { useState } from 'react';
+import * as Icons from 'react-feather';
+import { NavLink } from 'react-router-dom';
+
+import Langs from '../../../Langs';
+import Accordion from '../../UI/Accordion/Accordion';
+
+import './MainMenu.scss';
+
+function MainMenu(props) {
+  const { items, className } = props;
+  const txt = Langs[globalThis.lng];
+  const [isOpen, setIsOpen] = useState(true);
+  const [isMenuHovered, setIsMenuHovered] = useState(false);
+  const [isMenuIconHovered, setIsMenuIconHovered] = useState(false);
+
+  const chapterClass = cn('main-menu--items-box-chapter', {
+    'main-menu--items-box-chapter-hidden': !isOpen && !isMenuHovered,
+  });
+  const accordionClass = cn('main-menu--accordion', {
+    'main-menu--accordion-hidden': !isOpen && !isMenuHovered,
+  });
+  const itemsBoxClass = cn('main-menu--items-box', {
+    'main-menu--items-box-closed': !isOpen && !isMenuHovered,
+  });
+  const mainMenuClass = cn('main-menu', className, {
+    'main-menu--closed': !isOpen && !isMenuHovered,
+  });
+
+  const onMenuHover = () => {
+    if (!isOpen) {
+      setIsMenuHovered(!isMenuHovered);
+      items.mainMenu.forEach((item) => {
+        item.isOpen = false;
+      });
+      items.partners.forEach((item) => {
+        item.isOpen = false;
+      });
+      items.other.forEach((item) => {
+        item.isOpen = false;
+      });
+    }
+  };
+
+  const onCloseMenu = () => {
+    setIsOpen(!isOpen);
+    items.mainMenu.forEach((item) => {
+      item.isOpen = false;
+    });
+    items.partners.forEach((item) => {
+      item.isOpen = false;
+    });
+    items.other.forEach((item) => {
+      item.isOpen = false;
+    });
+  };
+
+  const changeMenuIcon = () => {
+    if (isOpen && !isMenuIconHovered) return <Icons.Menu />;
+    if (isOpen && isMenuIconHovered) return <Icons.ChevronLeft />;
+    if (!isOpen && isMenuHovered) return <Icons.ChevronRight />;
+    if (!isOpen) return <div className="main-menu--logo-close" />;
+    return null;
+  };
+
+  return (
+    <div
+      className={mainMenuClass}
+      onMouseEnter={() => onMenuHover()}
+      onMouseLeave={() => setIsMenuHovered(false)}
+    >
+      <div
+        className={cn('main-menu--header', {
+          'main-menu--header-closed': !isOpen && !isMenuHovered,
+        })}
+      >
+        <div
+          className={cn('main-menu--logo', {
+            'main-menu--logo-none': !isOpen && !isMenuHovered,
+          })}
+        />
+        <div className="main-menu--header-btn" onClick={() => onCloseMenu()}>
+          <div
+            className="j5"
+            onMouseEnter={() => setIsMenuIconHovered(true)}
+            onMouseLeave={() => setIsMenuIconHovered(false)}
+          >
+            {changeMenuIcon()}
+          </div>
+        </div>
+      </div>
+
+      <div className={itemsBoxClass}>
+        <div className={cn('main-menu--items-box-main')}>
+          {items.main.map((item, index) => {
+            const Icon = Icons[item.icon];
+            return item.link
+              ? (
+                  <NavLink
+                    to={item.link}
+                    key={index}
+                    className={cn('main-menu--items-box-title')}
+                  >
+                    <div className="main-menu--item">
+                      <div className="df">
+                        <Icon className={cn('mr5', item.className)} />
+                      </div>
+                      <span className={cn({ hidden: !isOpen && !isMenuHovered })}>
+                        {item?.title || 'Link'}
+                      </span>
+                    </div>
+                  </NavLink>
+                )
+              : (
+                  <span
+                    key={index}
+                    className={cn('main-menu--items-box-title', {
+                      hidden: !isOpen && !isMenuHovered,
+                    })}
+                  >
+                    {txt?.titles[item?.title]}
+                  </span>
+                );
+          })}
+        </div>
+
+        <div className={chapterClass}>
+          <span>Main menu</span>
+        </div>
+        <Accordion
+          className={accordionClass}
+          items={items.mainMenu}
+          onClick={() => {}}
+        />
+
+        <div className={chapterClass}>
+          <span>Partners</span>
+        </div>
+        <Accordion
+          isOpen={isOpen}
+          isMenuHovered={isMenuHovered}
+          className={accordionClass}
+          items={items.partners}
+          onClick={() => {}}
+        />
+
+        <div className={chapterClass}>
+          <span>Other</span>
+        </div>
+        <Accordion
+          className={accordionClass}
+          isOpen={isOpen}
+          isMenuHovered={isMenuHovered}
+          items={items.other}
+          onClick={() => {}}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default MainMenu;

package/dist/Atomic/UI/AccordionTable/AccordionTable.jsx

@@ -1 +1,250 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=Array(r);t<r;t++)o[t]=e[t];return o}function r(r,t){return function(e){if(Array.isArray(e))return e}(r)||function(e,r){var t,o,n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(t=n.next()).done)&&(a.push(t.value),!r||a.length!==r);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return a}}(r,t)||function(r,t){if(r){if("string"==typeof r)return e(r,t);var o=Object.prototype.toString.call(r).slice(8,-1);if("Object"===o&&r.constructor&&(o=r.constructor.name),"Map"===o||"Set"===o)return Array.from(o);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return e(r,t)}}(r,t)||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 t(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}import{jsx as o,jsxs as n}from"react/jsx-runtime";import a from"classnames";import{useEffect as c,useState as i}from"react";import{ArrowDown as l,ArrowUp as s,ChevronDown as d,Tag as u}from"react-feather";import m from"../MonoAccordion/MonoAccordion";import"./AccordionTable.scss";export default function(e){var b=e.className,p=e.header,f=e.items,v=e.onChange,y=e.testId,h=e.onSort,_=void 0===h?function(){}:h,O=e.sortParams,N=r(i(f),2),g=N[0],j=N[1],w={accordionChange:function(e,r){var t,o,n,a=null==g?void 0:g.map(function(r){if(r.key===e){var t,o;return t=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.forEach(function(r){var o;o=t[r],r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o})}return e}({},r),o=o={isOpen:!r.isOpen},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):(function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t.push.apply(t,o)}return t})(Object(o)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}),t}return r}),c=(null==r||null==(t=r.target)?void 0:t.tagName)==="svg";((null==(n=r.target.className)||null==(o=n.includes)?void 0:o.call(n,"accordion-table"))||c)&&(v(a),j(a))},setSort:function(e){var r;_(e!==O.key?{key:e,direction:"DESC"}:{key:e,direction:"ASC"===O.direction?"DESC":"ASC"})}},S=function(e){return null==p?void 0:p.find(function(r){return r.key===e})},k=function(e){var n;return null==(n=Object.entries(e))?void 0:n.map(function(e){var n,c,i=r(e,2),l=i[0],s=i[1];return"promoDetails"===l||"disclosure"===l?null:o("div",{style:{flexBasis:"".concat(null==(n=S(l))?void 0:n.width,"%")},className:a("accordion-table__td","accordion-table__td--".concat(l),null==(c=S(l))?void 0:c.className),children:o("p",{className:"accordion-table__statistics-td-value",title:(void 0===s?"undefined":t(s))!=="object"?s:s.value,children:(void 0===s?"undefined":t(s))!=="object"?s:s.value})},l)})};return c(function(){j(f)},[f]),n("div",{className:a("accordion-table",b),children:[o("div",{className:"accordion-table__header",children:null==p?void 0:p.map(function(e){return n("div",{style:{flexBasis:"".concat(e.width,"%")},className:a("accordion-table__header-item",e.className,{"accordion-table--sorted-col":O&&O.key===e.key},{"accordion-table__header-item-sortable":!e.noSort}),onClick:function(){return!e.noSort&&w.setSort(e.key)},children:[O&&e.key===O.key&&"actions"!==O.key&&("DESC"===O.direction?o(l,{size:16}):o(s,{size:16})),e.label]},e.key)})}),o("div",{className:"accordion-table__body",children:null==g?void 0:g.map(function(e){var t,c,i;return o(m,{testId:y,onClick:function(r){return w.accordionChange(e.key,r)},isOpen:e.isOpen,className:a("accordion-table__body-accordion",{"accordion-table__body-accordion--closed":!e.isOpen},e.className),titleJSX:n("div",{onClick:function(e){return w.accordionChange(c.key,e)},className:"accordion-table__accordion-label-box",children:[n("div",{className:"accordion-table__accordion-label-wrapper j4",children:[o(d,{width:8,height:4,className:a("accordion-label-box__icon",{"accordion-label-box__icon--open":(c=e).isOpen})}),o("span",{className:"accordion-label-box__label",children:c.label}),c.statistics&&o("div",{className:a("accordion-table__tr",c.className),children:Object.entries(c.statistics).map(function(e){var t,n,c=r(e,2),i=c[0],l=c[1];return o("div",{style:{width:"".concat(null==(t=S(i))?void 0:t.width,"%")},className:a("accordion-table__statistics-td",null==(n=S(i))?void 0:n.className),children:o("div",{className:"accordion-table__statistics-td-value-wrapper",children:"status"===i?o("div",{className:"accordion-table__statistics-td-value",children:l}):o("p",{className:"accordion-table__statistics-td-value",title:l,children:l})})},i)})})]}),c.titleContent]}),children:null!=(t=e.children)?t:null==(i=e.rows)?void 0:i.map(function(e,r){var t,c,i,l,s;return n("div",{className:a("accordion-table__tr",{"accordion-table__tr-with-promo":e.promoDetails||(null==(t=e.cols)?void 0:t.promoDetails)},e.className),children:[o("div",{className:"df w100",children:k(e.cols||e)}),e.promoDetails||(null==(c=e.cols)?void 0:c.promoDetails)?o("div",{className:"accordion-table__tr-promo-wrapper",children:n("div",{className:"accordion-table__tr-promo",children:[o(u,{className:"tr-promo-icon",width:16,height:16}),o("span",{className:"tr-promo-label",children:"PROMOTION"}),e.promoDetails||(null==(i=e.cols)?void 0:i.promoDetails)]})}):null,e.disclosure||(null==(l=e.cols)?void 0:l.disclosure)?o("div",{className:"accordion-table__tr-promo-wrapper",children:o("div",{className:"accordion-table__tr-promo accordion-table__tr-promo-disclosure",children:e.disclosure||(null==(s=e.cols)?void 0:s.disclosure)})}):null]},r)})},e.key)})})]})}
+import cn from 'classnames';
+
+import { useEffect, useState } from 'react';
+import { ArrowDown, ArrowUp, ChevronDown, Tag } from 'react-feather';
+
+import MonoAccordion from '../MonoAccordion/MonoAccordion';
+
+import './AccordionTable.scss';
+
+function AccordionTable({
+  className,
+  header,
+  items,
+  onChange,
+  testId,
+  onSort = () => {},
+  sortParams,
+}) {
+  const [accordions, setAccordions] = useState(items);
+
+  const sortedColClassName = item =>
+    cn(
+      'accordion-table__header-item',
+      item.className,
+      {
+        'accordion-table--sorted-col':
+          sortParams && sortParams.key === item.key,
+      },
+      { 'accordion-table__header-item-sortable': !item.noSort },
+    );
+
+  const handle = {
+    accordionChange: (key, e) => {
+      const newArr = accordions?.map((item) => {
+        if (item.key === key) {
+          return {
+            ...item,
+            isOpen: !item.isOpen,
+          };
+        }
+        return item;
+      });
+      const isArrowSvg = e?.target?.tagName === 'svg';
+      const isAccordionElement
+        = e.target.className?.includes?.('accordion-table');
+      if (isAccordionElement || isArrowSvg) {
+        onChange(newArr);
+        setAccordions(newArr);
+      }
+    },
+
+    setSort: (key) => {
+      let newSorting;
+      if (key !== sortParams.key) {
+        newSorting = { key, direction: 'DESC' };
+      }
+      else {
+        newSorting = {
+          key,
+          direction: sortParams.direction === 'ASC' ? 'DESC' : 'ASC',
+        };
+      }
+      onSort(newSorting);
+    },
+  };
+
+  const getHeaderItem = (key) => {
+    return header?.find(item => item.key === key);
+  };
+
+  const renderTd = (tr) => {
+    return Object.entries(tr)?.map(([key, value]) => {
+      return key === 'promoDetails' || key === 'disclosure'
+        ? null
+        : (
+            <div
+              key={key}
+              style={{ flexBasis: `${getHeaderItem(key)?.width}%` }}
+              className={cn(
+                'accordion-table__td',
+                `accordion-table__td--${key}`,
+                getHeaderItem(key)?.className,
+              )}
+            >
+              <p
+                className="accordion-table__statistics-td-value"
+                title={typeof value !== 'object' ? value : value.value}
+              >
+                {typeof value !== 'object' ? value : value.value}
+              </p>
+            </div>
+          );
+    });
+  };
+
+  const renderTr = (rows) => {
+    return rows?.map((row, index) => {
+      return (
+        <div
+          key={index}
+          className={cn(
+            'accordion-table__tr',
+            {
+              'accordion-table__tr-with-promo':
+                row.promoDetails || row.cols?.promoDetails,
+            },
+            row.className,
+          )}
+        >
+          <div className="df w100">{renderTd(row.cols || row)}</div>
+          {row.promoDetails || row.cols?.promoDetails
+            ? (
+                <div className="accordion-table__tr-promo-wrapper">
+                  <div className="accordion-table__tr-promo">
+                    <Tag className="tr-promo-icon" width={16} height={16} />
+                    <span className="tr-promo-label">PROMOTION</span>
+                    {row.promoDetails || row.cols?.promoDetails}
+                  </div>
+                </div>
+              )
+            : null}
+
+          {row.disclosure || row.cols?.disclosure
+            ? (
+                <div className="accordion-table__tr-promo-wrapper">
+                  <div className="accordion-table__tr-promo accordion-table__tr-promo-disclosure">
+                    {row.disclosure || row.cols?.disclosure}
+                  </div>
+                </div>
+              )
+            : null}
+        </div>
+      );
+    });
+  };
+
+  const defineAccordionTitle = (row) => {
+    return (
+      <div
+        onClick={e => handle.accordionChange(row.key, e)}
+        className="accordion-table__accordion-label-box"
+      >
+        <div className="accordion-table__accordion-label-wrapper j4">
+          <ChevronDown
+            width={8}
+            height={4}
+            className={cn('accordion-label-box__icon', {
+              'accordion-label-box__icon--open': row.isOpen,
+            })}
+          />
+          <span className="accordion-label-box__label">{row.label}</span>
+          {row.statistics && (
+            <div className={cn('accordion-table__tr', row.className)}>
+              {Object.entries(row.statistics).map(([key, value]) => {
+                return (
+                  <div
+                    key={key}
+                    style={{ width: `${getHeaderItem(key)?.width}%` }}
+                    className={cn(
+                      'accordion-table__statistics-td',
+                      getHeaderItem(key)?.className,
+                    )}
+                  >
+                    <div className="accordion-table__statistics-td-value-wrapper">
+                      {key === 'status'
+                        ? (
+                            <div className="accordion-table__statistics-td-value">
+                              {value}
+                            </div>
+                          )
+                        : (
+                            <p
+                              className="accordion-table__statistics-td-value"
+                              title={value}
+                            >
+                              {value}
+                            </p>
+                          )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {row.titleContent}
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    setAccordions(items);
+  }, [items]);
+
+  return (
+    <div className={cn('accordion-table', className)}>
+      <div className="accordion-table__header">
+        {header?.map((item) => {
+          return (
+            <div
+              style={{ flexBasis: `${item.width}%` }}
+              key={item.key}
+              className={sortedColClassName(item)}
+              onClick={() => !item.noSort && handle.setSort(item.key)}
+            >
+              {sortParams
+                && item.key === sortParams.key
+                && sortParams.key !== 'actions'
+                && (sortParams.direction === 'DESC'
+                  ? (
+                      <ArrowDown size={16} />
+                    )
+                  : (
+                      <ArrowUp size={16} />
+                    ))}
+
+              {item.label}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="accordion-table__body">
+        {accordions?.map((accordion) => {
+          return (
+            <MonoAccordion
+              testId={testId}
+              key={accordion.key}
+              onClick={e => handle.accordionChange(accordion.key, e)}
+              isOpen={accordion.isOpen}
+              className={cn(
+                'accordion-table__body-accordion',
+                {
+                  'accordion-table__body-accordion--closed': !accordion.isOpen,
+                },
+                accordion.className,
+              )}
+              titleJSX={defineAccordionTitle(accordion)}
+            >
+              {accordion.children ?? renderTr(accordion.rows)}
+            </MonoAccordion>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default AccordionTable;