intelicoreact 2.0.17 → 2.0.19

package/dist/es/Atomic/UI/Accordion/AccordionItem.js

@@ -0,0 +1,110 @@
+import '../../../styles/base.css';
+import Status_default from "../Status/index.js";
+import './Accordion.styles.css';/* empty css               */
+import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Icons from "react-feather";
+//#region src/Atomic/UI/Accordion/AccordionItem.tsx
+/**
+* Дефолтная ссылка menu-пунктов — обычный <a href> БЕЗ react-router-dom.
+* AccordionItem обязан оставаться router-free: его использует Table -> TdCell
+* из subpath "ui". SPA-поведение возвращает Accordion (subpath "router-ui"),
+* передавая сюда NavLink через prop linkComponent.
+*/
+var DefaultLink = ({ to, className, children }) => /* @__PURE__ */ jsx("a", {
+	href: to,
+	className,
+	children
+});
+var AccordionItem = ({ item, onClick, isOpen, className, children, noChevron, linkComponent: LinkComponent = DefaultLink, testId = "accordion-item" }) => {
+	const Icon = Icons[item.icon];
+	const [maxHeight, setMaxHeight] = useState(0);
+	const ref = useRef(null);
+	const getItemsHeight = () => {
+		let itemHeight = 0;
+		ref.current?.childNodes.forEach((el) => {
+			itemHeight += el.offsetHeight;
+		});
+		return itemHeight + 20;
+	};
+	useEffect(() => {
+		setMaxHeight(isOpen ? getItemsHeight() : 0);
+	}, [isOpen]);
+	const calculateStatusCount = () => {
+		return item?.rows?.reduce((acc, row) => {
+			const result = row.cols.reduce((accum, col) => ({
+				active: accum.active + (col.status === "active" ? 1 : 0),
+				pause: accum.pause + (col.status === "pause" ? 1 : 0)
+			}), {
+				active: 0,
+				pause: 0
+			});
+			return {
+				active: acc.active + result.active,
+				pause: acc.pause + result.pause
+			};
+		}, {
+			active: 0,
+			pause: 0
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn("accordion--item", className),
+		role: "region",
+		"aria-labelledby": `accordion-title-${item.title}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("accordion--title-box", { "accordion--title-open": isOpen }),
+			onClick: () => onClick(!isOpen),
+			id: `accordion-title-${item.title}`,
+			role: "button",
+			"aria-expanded": isOpen,
+			"aria-controls": `accordion-content-${item.title}`,
+			tabIndex: 0,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "j4 no-wrap",
+				children: [item?.icon && /* @__PURE__ */ jsx(Icon, {
+					className: cn("mr5", item?.className),
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "accordion--title",
+					children: item.title || "Menu Chapter"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "j6 accordion-title__right-box",
+				children: [item.status && /* @__PURE__ */ jsx("div", {
+					className: "mr5",
+					children: /* @__PURE__ */ jsx(Status_default, {
+						type: item?.status.type,
+						value: item?.status.value,
+						status: item?.status.status,
+						active: calculateStatusCount()?.active,
+						pause: calculateStatusCount()?.pause
+					})
+				}), !noChevron && /* @__PURE__ */ jsx(Icons.ChevronRight, {
+					"aria-hidden": "true",
+					className: cn("accordion--title-chevron", { "accordion--title-chevron-open": isOpen })
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref,
+			style: { maxHeight },
+			className: cn("accordion--content", { "accordion--content-is-open": isOpen }),
+			id: `accordion-content-${item.title}`,
+			role: "region",
+			"aria-labelledby": `accordion-title-${item.title}`,
+			children: item.children ? item.children.map((el) => {
+				return /* @__PURE__ */ jsx(LinkComponent, {
+					to: el.link,
+					className: "accordion--content-item accordion--menu-link",
+					children: el?.title || "Menu item"
+				}, el.id);
+			}) : children
+		})]
+	});
+};
+//#endregion
+export { AccordionItem as default };
+
+//# sourceMappingURL=AccordionItem.js.map

package/dist/es/Atomic/UI/Accordion/AccordionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.js","names":[],"sources":["../../../../../src/Atomic/UI/Accordion/AccordionItem.tsx"],"sourcesContent":["import type { AccordionLinkComponent, IAccordionItemProps } from './Accordion.interface';\nimport cn from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport * as Icons from 'react-feather';\n\nimport Status from '../Status';\n\nimport './Accordion.scss';\n\n/**\n * Дефолтная ссылка menu-пунктов — обычный <a href> БЕЗ react-router-dom.\n * AccordionItem обязан оставаться router-free: его использует Table -> TdCell\n * из subpath \"ui\". SPA-поведение возвращает Accordion (subpath \"router-ui\"),\n * передавая сюда NavLink через prop linkComponent.\n */\nconst DefaultLink: AccordionLinkComponent = ({ to, className, children }) => (\n  <a href={to} className={className}>\n    {children}\n  </a>\n);\n\nconst AccordionItem: React.FC<IAccordionItemProps> = ({\n  item,\n  onClick,\n  isOpen,\n  className,\n  children,\n  noChevron,\n  linkComponent: LinkComponent = DefaultLink,\n  testId = 'accordion-item',\n}) => {\n  const Icon = Icons[item.icon as keyof typeof Icons];\n  const [maxHeight, setMaxHeight] = useState<number>(0);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const getItemsHeight = (): number => {\n    let itemHeight = 0;\n    ref.current?.childNodes.forEach((el) => {\n      itemHeight += (el as HTMLElement).offsetHeight;\n    });\n\n    return itemHeight + 20;\n  };\n\n  useEffect(() => {\n    setMaxHeight(isOpen ? getItemsHeight() : 0);\n  }, [isOpen]);\n\n  const calculateStatusCount = (): {\n    active: number;\n    pause: number;\n  } | undefined => {\n    return item?.rows?.reduce(\n      (acc, row) => {\n        const result = row.cols.reduce(\n          (accum, col) => ({\n            active: accum.active + (col.status === 'active' ? 1 : 0),\n            pause: accum.pause + (col.status === 'pause' ? 1 : 0),\n          }),\n          { active: 0, pause: 0 },\n        );\n\n        return {\n          active: acc.active + result.active,\n          pause: acc.pause + result.pause,\n        };\n      },\n      { active: 0, pause: 0 },\n    );\n  };\n\n  return (\n    <div\n      data-testid={testId}\n      className={cn('accordion--item', className)}\n      role=\"region\"\n      aria-labelledby={`accordion-title-${item.title}`}\n    >\n      <div\n        className={cn('accordion--title-box', {\n          'accordion--title-open': isOpen,\n        })}\n        onClick={() => onClick(!isOpen)}\n        id={`accordion-title-${item.title}`}\n        role=\"button\"\n        aria-expanded={isOpen}\n        aria-controls={`accordion-content-${item.title}`}\n        tabIndex={0}\n      >\n        <div className=\"j4 no-wrap\">\n          {item?.icon && <Icon className={cn('mr5', item?.className)} aria-hidden=\"true\" />}\n          <span className=\"accordion--title\">{item.title || 'Menu Chapter'}</span>\n        </div>\n\n        <div className=\"j6 accordion-title__right-box\">\n          {item.status && (\n            <div className=\"mr5\">\n              <Status\n                type={item?.status.type}\n                value={item?.status.value}\n                status={item?.status.status}\n                active={calculateStatusCount()?.active}\n                pause={calculateStatusCount()?.pause}\n              />\n            </div>\n          )}\n\n          {!noChevron && (\n            <Icons.ChevronRight\n              aria-hidden=\"true\"\n              className={cn('accordion--title-chevron', {\n                'accordion--title-chevron-open': isOpen,\n              })}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        ref={ref}\n        style={{ maxHeight }}\n        className={cn('accordion--content', {\n          'accordion--content-is-open': isOpen,\n        })}\n        id={`accordion-content-${item.title}`}\n        role=\"region\"\n        aria-labelledby={`accordion-title-${item.title}`}\n      >\n        {item.children\n          ? item.children.map((el) => {\n              return (\n                <LinkComponent to={el.link} key={el.id} className=\"accordion--content-item accordion--menu-link\">\n                  {el?.title || 'Menu item'}\n                </LinkComponent>\n              );\n            })\n          : children}\n      </div>\n    </div>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,eAAuC,EAAE,IAAI,WAAW,eAC5D,oBAAC,KAAD;CAAG,MAAM;CAAe;CACrB;AACA,CAAA;AAGL,IAAM,iBAAgD,EACpD,MACA,SACA,QACA,WACA,UACA,WACA,eAAe,gBAAgB,aAC/B,SAAS,uBACL;CACJ,MAAM,OAAO,MAAM,KAAK;CACxB,MAAM,CAAC,WAAW,gBAAgB,SAAiB,CAAC;CACpD,MAAM,MAAM,OAAuB,IAAI;CAEvC,MAAM,uBAA+B;EACnC,IAAI,aAAa;EACjB,IAAI,SAAS,WAAW,SAAS,OAAO;GACtC,cAAe,GAAmB;EACpC,CAAC;EAED,OAAO,aAAa;CACtB;CAEA,gBAAgB;EACd,aAAa,SAAS,eAAe,IAAI,CAAC;CAC5C,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,6BAGW;EACf,OAAO,MAAM,MAAM,QAChB,KAAK,QAAQ;GACZ,MAAM,SAAS,IAAI,KAAK,QACrB,OAAO,SAAS;IACf,QAAQ,MAAM,UAAU,IAAI,WAAW,WAAW,IAAI;IACtD,OAAO,MAAM,SAAS,IAAI,WAAW,UAAU,IAAI;GACrD,IACA;IAAE,QAAQ;IAAG,OAAO;GAAE,CACxB;GAEA,OAAO;IACL,QAAQ,IAAI,SAAS,OAAO;IAC5B,OAAO,IAAI,QAAQ,OAAO;GAC5B;EACF,GACA;GAAE,QAAQ;GAAG,OAAO;EAAE,CACxB;CACF;CAEA,OACE,qBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,mBAAmB,SAAS;EAC1C,MAAK;EACL,mBAAiB,mBAAmB,KAAK;YAJ3C,CAME,qBAAC,OAAD;GACE,WAAW,GAAG,wBAAwB,EACpC,yBAAyB,OAC3B,CAAC;GACD,eAAe,QAAQ,CAAC,MAAM;GAC9B,IAAI,mBAAmB,KAAK;GAC5B,MAAK;GACL,iBAAe;GACf,iBAAe,qBAAqB,KAAK;GACzC,UAAU;aATZ,CAWE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,MAAM,QAAQ,oBAAC,MAAD;KAAM,WAAW,GAAG,OAAO,MAAM,SAAS;KAAG,eAAY;IAAQ,CAAA,GAChF,oBAAC,QAAD;KAAM,WAAU;eAAoB,KAAK,SAAS;IAAqB,CAAA,CACpE;OAEL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KAAK,UACJ,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,gBAAD;MACE,MAAM,MAAM,OAAO;MACnB,OAAO,MAAM,OAAO;MACpB,QAAQ,MAAM,OAAO;MACrB,QAAQ,qBAAqB,CAAC,EAAE;MAChC,OAAO,qBAAqB,CAAC,EAAE;KAChC,CAAA;IACE,CAAA,GAGN,CAAC,aACA,oBAAC,MAAM,cAAP;KACE,eAAY;KACZ,WAAW,GAAG,4BAA4B,EACxC,iCAAiC,OACnC,CAAC;IACF,CAAA,CAEA;KACF;MAEL,oBAAC,OAAD;GACO;GACL,OAAO,EAAE,UAAU;GACnB,WAAW,GAAG,sBAAsB,EAClC,8BAA8B,OAChC,CAAC;GACD,IAAI,qBAAqB,KAAK;GAC9B,MAAK;GACL,mBAAiB,mBAAmB,KAAK;aAExC,KAAK,WACF,KAAK,SAAS,KAAK,OAAO;IACxB,OACE,oBAAC,eAAD;KAAe,IAAI,GAAG;KAAkB,WAAU;eAC/C,IAAI,SAAS;IACD,GAFkB,GAAG,EAErB;GAEnB,CAAC,IACD;EACD,CAAA,CACF;;AAET"}

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

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

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

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

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

@@ -0,0 +1,167 @@
+import '../../../styles/base.css';
+import MonoAccordion from "../MonoAccordion/MonoAccordion.js";
+import './AccordionTable.styles.css';/* empty css                    */
+import cn from "classnames";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ChevronDown, Tag } from "react-feather";
+//#region src/Atomic/UI/AccordionTable/AccordionTable.js
+var 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";
+			if (e.target.className?.includes?.("accordion-table") || 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 : /* @__PURE__ */ jsx("div", {
+				style: { flexBasis: `${getHeaderItem(key)?.width}%` },
+				className: cn("accordion-table__td", `accordion-table__td--${key}`, getHeaderItem(key)?.className),
+				children: /* @__PURE__ */ jsx("p", {
+					className: "accordion-table__statistics-td-value",
+					title: typeof value !== "object" ? value : value.value,
+					children: typeof value !== "object" ? value : value.value
+				})
+			}, key);
+		});
+	};
+	const renderTr = (rows) => {
+		return rows?.map((row, index) => {
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("accordion-table__tr", { "accordion-table__tr-with-promo": row.promoDetails || row.cols?.promoDetails }, row.className),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "df w100",
+						children: renderTd(row.cols || row)
+					}),
+					row.promoDetails || row.cols?.promoDetails ? /* @__PURE__ */ jsx("div", {
+						className: "accordion-table__tr-promo-wrapper",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "accordion-table__tr-promo",
+							children: [
+								/* @__PURE__ */ jsx(Tag, {
+									className: "tr-promo-icon",
+									width: 16,
+									height: 16
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "tr-promo-label",
+									children: "PROMOTION"
+								}),
+								row.promoDetails || row.cols?.promoDetails
+							]
+						})
+					}) : null,
+					row.disclosure || row.cols?.disclosure ? /* @__PURE__ */ jsx("div", {
+						className: "accordion-table__tr-promo-wrapper",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "accordion-table__tr-promo accordion-table__tr-promo-disclosure",
+							children: row.disclosure || row.cols?.disclosure
+						})
+					}) : null
+				]
+			}, index);
+		});
+	};
+	const defineAccordionTitle = (row) => {
+		return /* @__PURE__ */ jsxs("div", {
+			onClick: (e) => handle.accordionChange(row.key, e),
+			className: "accordion-table__accordion-label-box",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "accordion-table__accordion-label-wrapper j4",
+				children: [
+					/* @__PURE__ */ jsx(ChevronDown, {
+						width: 8,
+						height: 4,
+						className: cn("accordion-label-box__icon", { "accordion-label-box__icon--open": row.isOpen })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "accordion-label-box__label",
+						children: row.label
+					}),
+					row.statistics && /* @__PURE__ */ jsx("div", {
+						className: cn("accordion-table__tr", row.className),
+						children: Object.entries(row.statistics).map(([key, value]) => {
+							return /* @__PURE__ */ jsx("div", {
+								style: { width: `${getHeaderItem(key)?.width}%` },
+								className: cn("accordion-table__statistics-td", getHeaderItem(key)?.className),
+								children: /* @__PURE__ */ jsx("div", {
+									className: "accordion-table__statistics-td-value-wrapper",
+									children: key === "status" ? /* @__PURE__ */ jsx("div", {
+										className: "accordion-table__statistics-td-value",
+										children: value
+									}) : /* @__PURE__ */ jsx("p", {
+										className: "accordion-table__statistics-td-value",
+										title: value,
+										children: value
+									})
+								})
+							}, key);
+						})
+					})
+				]
+			}), row.titleContent]
+		});
+	};
+	useEffect(() => {
+		setAccordions(items);
+	}, [items]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("accordion-table", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "accordion-table__header",
+			children: header?.map((item) => {
+				return /* @__PURE__ */ jsxs("div", {
+					style: { flexBasis: `${item.width}%` },
+					className: sortedColClassName(item),
+					onClick: () => !item.noSort && handle.setSort(item.key),
+					children: [sortParams && item.key === sortParams.key && sortParams.key !== "actions" && (sortParams.direction === "DESC" ? /* @__PURE__ */ jsx(ArrowDown, { size: 16 }) : /* @__PURE__ */ jsx(ArrowUp, { size: 16 })), item.label]
+				}, item.key);
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "accordion-table__body",
+			children: accordions?.map((accordion) => {
+				return /* @__PURE__ */ jsx(MonoAccordion, {
+					testId,
+					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),
+					children: accordion.children ?? renderTr(accordion.rows)
+				}, accordion.key);
+			})
+		})]
+	});
+};
+//#endregion
+export { AccordionTable as default };
+
+//# sourceMappingURL=AccordionTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTable.js","names":[],"sources":["../../../../../src/Atomic/UI/AccordionTable/AccordionTable.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport cn from \"classnames\";\nimport { ArrowDown, ArrowUp, ChevronDown, Tag } from \"react-feather\";\n\nimport MonoAccordion from \"../MonoAccordion/MonoAccordion\";\n\nimport \"./AccordionTable.scss\";\n\nconst AccordionTable = ({\n  className,\n  header,\n  items,\n  onChange,\n  testId,\n  onSort = () => {},\n  sortParams,\n}) => {\n  const [accordions, setAccordions] = useState(items);\n\n  const sortedColClassName = (item) =>\n    cn(\n      \"accordion-table__header-item\",\n      item.className,\n      {\n        \"accordion-table--sorted-col\":\n          sortParams && sortParams.key === item.key,\n      },\n      { \"accordion-table__header-item-sortable\": !item.noSort },\n    );\n\n  const handle = {\n    accordionChange: (key, e) => {\n      const newArr = accordions?.map((item) => {\n        if (item.key === key) {\n          return {\n            ...item,\n            isOpen: !item.isOpen,\n          };\n        }\n        return item;\n      });\n      const isArrowSvg = e?.target?.tagName === \"svg\";\n      const isAccordionElement =\n        e.target.className?.includes?.(\"accordion-table\");\n      if (isAccordionElement || isArrowSvg) {\n        onChange(newArr);\n        setAccordions(newArr);\n      }\n    },\n\n    setSort: (key) => {\n      let newSorting;\n      if (key !== sortParams.key) newSorting = { key: key, direction: \"DESC\" };\n      else {\n        newSorting = {\n          key,\n          direction: sortParams.direction === \"ASC\" ? \"DESC\" : \"ASC\",\n        };\n      }\n      onSort(newSorting);\n    },\n  };\n\n  const getHeaderItem = (key) => {\n    return header?.find((item) => item.key === key);\n  };\n\n  const renderTd = (tr) => {\n    return Object.entries(tr)?.map(([key, value]) => {\n      return key === \"promoDetails\" || key === \"disclosure\" ? null : (\n        <div\n          key={key}\n          style={{ flexBasis: `${getHeaderItem(key)?.width}%` }}\n          className={cn(\n            \"accordion-table__td\",\n            `accordion-table__td--${key}`,\n            getHeaderItem(key)?.className,\n          )}\n        >\n          <p\n            className=\"accordion-table__statistics-td-value\"\n            title={typeof value !== \"object\" ? value : value.value}\n          >\n            {typeof value !== \"object\" ? value : value.value}\n          </p>\n        </div>\n      );\n    });\n  };\n\n  const renderTr = (rows) => {\n    return rows?.map((row, index) => {\n      return (\n        <div\n          key={index}\n          className={cn(\n            \"accordion-table__tr\",\n            {\n              \"accordion-table__tr-with-promo\":\n                row.promoDetails || row.cols?.promoDetails,\n            },\n            row.className,\n          )}\n        >\n          <div className=\"df w100\">{renderTd(row.cols || row)}</div>\n          {row.promoDetails || row.cols?.promoDetails ? (\n            <div className=\"accordion-table__tr-promo-wrapper\">\n              <div className=\"accordion-table__tr-promo\">\n                <Tag className=\"tr-promo-icon\" width={16} height={16} />\n                <span className=\"tr-promo-label\">PROMOTION</span>\n                {row.promoDetails || row.cols?.promoDetails}\n              </div>\n            </div>\n          ) : null}\n\n          {row.disclosure || row.cols?.disclosure ? (\n            <div className=\"accordion-table__tr-promo-wrapper\">\n              <div className=\"accordion-table__tr-promo accordion-table__tr-promo-disclosure\">\n                {row.disclosure || row.cols?.disclosure}\n              </div>\n            </div>\n          ) : null}\n        </div>\n      );\n    });\n  };\n\n  const defineAccordionTitle = (row) => {\n    return (\n      <div\n        onClick={(e) => handle.accordionChange(row.key, e)}\n        className=\"accordion-table__accordion-label-box\"\n      >\n        <div className=\"accordion-table__accordion-label-wrapper j4\">\n          <ChevronDown\n            width={8}\n            height={4}\n            className={cn(\"accordion-label-box__icon\", {\n              \"accordion-label-box__icon--open\": row.isOpen,\n            })}\n          />\n          <span className=\"accordion-label-box__label\">{row.label}</span>\n          {row.statistics && (\n            <div className={cn(\"accordion-table__tr\", row.className)}>\n              {Object.entries(row.statistics).map(([key, value]) => {\n                return (\n                  <div\n                    key={key}\n                    style={{ width: `${getHeaderItem(key)?.width}%` }}\n                    className={cn(\n                      \"accordion-table__statistics-td\",\n                      getHeaderItem(key)?.className,\n                    )}\n                  >\n                    <div className=\"accordion-table__statistics-td-value-wrapper\">\n                      {key === \"status\" ? (\n                        <div className=\"accordion-table__statistics-td-value\">\n                          {value}\n                        </div>\n                      ) : (\n                        <p\n                          className=\"accordion-table__statistics-td-value\"\n                          title={value}\n                        >\n                          {value}\n                        </p>\n                      )}\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n\n        {row.titleContent}\n      </div>\n    );\n  };\n\n  useEffect(() => {\n    setAccordions(items);\n  }, [items]);\n\n  return (\n    <div className={cn(\"accordion-table\", className)}>\n      <div className=\"accordion-table__header\">\n        {header?.map((item) => {\n          return (\n            <div\n              style={{ flexBasis: `${item.width}%` }}\n              key={item.key}\n              className={sortedColClassName(item)}\n              onClick={() => !item.noSort && handle.setSort(item.key)}\n            >\n              {sortParams &&\n                item.key === sortParams.key &&\n                sortParams.key !== \"actions\" &&\n                (sortParams.direction === \"DESC\" ? (\n                  <ArrowDown size={16} />\n                ) : (\n                  <ArrowUp size={16} />\n                ))}\n\n              {item.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"accordion-table__body\">\n        {accordions?.map((accordion) => {\n          return (\n            <MonoAccordion\n              testId={testId}\n              key={accordion.key}\n              onClick={(e) => handle.accordionChange(accordion.key, e)}\n              isOpen={accordion.isOpen}\n              className={cn(\n                \"accordion-table__body-accordion\",\n                {\n                  \"accordion-table__body-accordion--closed\": !accordion.isOpen,\n                },\n                accordion.className,\n              )}\n              titleJSX={defineAccordionTitle(accordion)}\n            >\n              {accordion.children ?? renderTr(accordion.rows)}\n            </MonoAccordion>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default AccordionTable;\n"],"mappings":"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"}

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

@@ -0,0 +1,228 @@
+.accordion-table {
+  display: flex;
+  overflow-x: auto;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 700px;
+}
+.accordion-table__header {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 32px;
+}
+.accordion-table__header-item {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  user-select: none;
+  white-space: nowrap;
+  text-transform: uppercase;
+  color: #757f8c;
+  background-color: #ebeff2;
+}
+.accordion-table__header-item:first-child {
+  padding-left: 15px;
+  border-top-left-radius: 8px;
+}
+.accordion-table__header-item:last-child {
+  padding-right: 15px;
+  border-top-right-radius: 8px;
+}
+.accordion-table__header-item-sortable {
+  cursor: pointer;
+}
+.accordion-table__header-item-sortable:hover {
+  color: #3b414b;
+}
+.accordion-table__header-item-sortable svg {
+  min-width: 16px;
+}
+.accordion-table__body {
+  width: 100%;
+}
+.accordion-table__body-accordion:not(:first-child) {
+  border-top: 1px solid #ebeff2;
+}
+.accordion-table__body-accordion:last-child .mono-accordion__container {
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.accordion-table__body-accordion--closed .mono-accordion__head {
+  box-shadow: 0 5px 8px rgba(255, 255, 255, 0.12) !important;
+  transition: all 0.3s ease-out;
+}
+.accordion-table__body-accordion--closed .mono-accordion__container {
+  opacity: 0;
+  transition: all 0.3s ease-out;
+}
+.accordion-table__body-accordion--closed:last-child .mono-accordion__head {
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.accordion-table__tr {
+  display: flex;
+  width: 100%;
+}
+.accordion-table__tr:last-child .accordion-table__td {
+  border: none;
+}
+.accordion-table__td {
+  padding: 11.5px 0;
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+  border-bottom: 1px solid #ebeff2;
+}
+.accordion-table__td:first-child {
+  margin-left: 50px;
+}
+.accordion-table__td:last-child {
+  margin-right: 15px;
+}
+.accordion-table__td:not(:first-child, :last-child) {
+  padding-right: 20px;
+}
+.accordion-table__td--name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.accordion-table__accordion-label-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.accordion-table__accordion-label-wrapper {
+  width: 100%;
+  max-height: 19px;
+}
+.accordion-table__accordion-label-wrapper .accordion-table__tr {
+  justify-content: flex-end;
+  background-color: unset !important;
+}
+.accordion-table__accordion-label-wrapper .accordion-table__td:first-child {
+  margin-left: 0;
+}
+.accordion-table__accordion-label-wrapper .accordion-table__td:last-child {
+  margin-right: 0;
+}
+.accordion-table__statistics-td {
+  padding: 15px 0;
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+.accordion-table__statistics-td:not(:last-child) {
+  display: flex;
+  align-items: center;
+  padding-right: 53px;
+}
+.accordion-table__statistics-td-value {
+  overflow: hidden;
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.accordion-table__statistics-td-value-wrapper {
+  display: flex;
+  min-width: 0;
+}
+.accordion-table__tr-promo-wrapper {
+  margin-right: 15px;
+  margin-left: 50px;
+}
+.accordion-table__tr-promo-wrapper:last-child {
+  border-bottom: 1px solid #ebeff2;
+}
+.accordion-table__tr-with-promo {
+  flex-direction: column;
+}
+.accordion-table__tr-with-promo .accordion-table__td {
+  padding: 15px 0 8px;
+  border-bottom: none;
+}
+.accordion-table__tr-with-promo:last-child .accordion-table__tr-promo-wrapper {
+  border-bottom: none;
+}
+.accordion-table__tr-promo {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  min-height: 16px;
+  margin-bottom: 10px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  color: #3b414b;
+  border: 1px solid #ffce9f;
+  border-radius: 8px;
+  background-color: #fff4e5;
+}
+.accordion-table__tr-promo svg {
+  min-width: 16px;
+  max-width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+  margin-right: 8px;
+}
+.accordion-table__tr-promo-disclosure {
+  border: none;
+  background-color: #e8e9ec;
+}
+.accordion-table__status-icon {
+  margin-top: 2px;
+  margin-right: 5px;
+  color: #fa564c;
+}
+.accordion-table .tr-promo-icon {
+  color: #ff7d00;
+}
+.accordion-table .tr-promo-label {
+  margin-right: 8px;
+  font-weight: 600;
+  color: #ff7d00;
+}
+.accordion-table .accordion-label-box__label {
+  margin-left: 15px;
+  user-select: none;
+  white-space: nowrap;
+}
+.accordion-table .accordion-label-box__icon {
+  min-width: 15px;
+  max-width: 15px;
+  min-height: 16px;
+  max-height: 16px;
+  color: #757f8c;
+  transition: all 0.2s ease-out;
+}
+.accordion-table .accordion-label-box__icon--open {
+  transform: rotate(180deg);
+}
+.accordion-table .accordion-label-box__status {
+  font-size: 12px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+.accordion-table .mono-accordion__head {
+  position: relative;
+  z-index: 2;
+  padding: 14.5px 15px 14.5px 20px;
+  background-color: white;
+  box-shadow: 0 5px 8px rgba(39, 73, 113, 0.12);
+}
+.accordion-table .mono-accordion__container {
+  position: relative;
+  flex-direction: row;
+  background-color: white;
+}
+.accordion-table .mono-accordion__content-wrapper {
+  width: 100%;
+  padding: 0;
+}

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

@@ -0,0 +1,47 @@
+import '../../../styles/base.css';
+import './AccordionText.styles.css';/* empty css                   */
+import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "react-feather";
+//#region src/Atomic/UI/AccordionText/AccordionText.js
+var defaultText = /* @__PURE__ */ jsx(Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." });
+var AccordionText = ({ isDefaultOpen = false, isOuterOpen = false, className, text = defaultText, shortText = null }) => {
+	const bodyRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(isDefaultOpen);
+	const [isNeedTrimText, setIsNeedTrimText] = useState(false);
+	useEffect(() => {
+		setIsOpen(isOuterOpen);
+	}, [isOuterOpen]);
+	useEffect(() => {
+		const checkEllipsis = () => {
+			if (bodyRef.current) setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
+		};
+		const resizeObserver = new ResizeObserver(() => {
+			checkEllipsis();
+		});
+		if (bodyRef.current) {
+			resizeObserver.observe(bodyRef.current);
+			checkEllipsis();
+		}
+		return () => {
+			if (bodyRef.current) resizeObserver.unobserve(bodyRef.current);
+		};
+	}, [text]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("accordion-text", className, { "accordion-text--open": isOpen }),
+		onClick: () => setIsOpen((prevIsOpen) => !prevIsOpen),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("accordion-text__body", { "accordion-text__body--trim-text": isNeedTrimText && !isOpen }),
+			ref: bodyRef,
+			children: shortText ? isOpen ? text : shortText : text
+		}), /* @__PURE__ */ jsx("div", {
+			className: "accordion-text__toggle",
+			children: isOpen ? /* @__PURE__ */ jsx(ChevronUp, {}) : /* @__PURE__ */ jsx(ChevronDown, {})
+		})]
+	});
+};
+//#endregion
+export { AccordionText as default };
+
+//# sourceMappingURL=AccordionText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionText.js","names":[],"sources":["../../../../../src/Atomic/UI/AccordionText/AccordionText.js"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport React from \"react\";\nimport cn from \"classnames\";\nimport { ChevronDown, ChevronUp } from \"react-feather\";\nimport \"./AccordionText.scss\";\n\nconst defaultText = <>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n</>\n\nconst AccordionText = ({\n  isDefaultOpen = false,\n  isOuterOpen = false,\n  className,\n  text = defaultText,\n  shortText = null\n}) => {\n  const bodyRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(isDefaultOpen);\n  const [isNeedTrimText, setIsNeedTrimText] = useState(false);\n\n  useEffect(() => {\n    setIsOpen(isOuterOpen);\n  }, [isOuterOpen]);\n\n  useEffect(() => {\n    const checkEllipsis = () => {\n      if (bodyRef.current) {\n        setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(() => {\n      checkEllipsis();\n    });\n\n    if (bodyRef.current) {\n      resizeObserver.observe(bodyRef.current);\n      checkEllipsis();\n    }\n\n    return () => {\n      if (bodyRef.current) {\n        resizeObserver.unobserve(bodyRef.current);\n      }\n    };\n  }, [text]);\n\n  return (\n    <div\n      className={cn(\"accordion-text\", className, {\n        \"accordion-text--open\": isOpen,\n      })}\n      onClick={() => setIsOpen((prevIsOpen) => !prevIsOpen)}\n    >\n      <div\n        className={cn(\"accordion-text__body\", {\n          \"accordion-text__body--trim-text\": isNeedTrimText && !isOpen,\n        })}\n        ref={bodyRef}\n      >\n        {shortText ? (isOpen ? text : shortText) : text}\n      </div>\n      <div className=\"accordion-text__toggle\">\n        {isOpen ? <ChevronUp /> : <ChevronDown />}\n      </div>\n    </div>\n  );\n};\n\nexport default AccordionText;\n"],"mappings":";;;;;;AAMA,IAAM,cAAc,oBAAA,UAAA,EAAE,UAAA,0OAAA,CAEtB;AAEA,IAAM,iBAAiB,EACrB,gBAAgB,OAChB,cAAc,OACd,WACA,OAAO,aACP,YAAY,WACR;CACJ,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAE1D,gBAAgB;EACd,UAAU,WAAW;CACvB,GAAG,CAAC,WAAW,CAAC;CAEhB,gBAAgB;EACd,MAAM,sBAAsB;GAC1B,IAAI,QAAQ,SACV,kBAAkB,QAAQ,QAAQ,cAAc,QAAQ,QAAQ,WAAW;EAE/E;EAEA,MAAM,iBAAiB,IAAI,qBAAqB;GAC9C,cAAc;EAChB,CAAC;EAED,IAAI,QAAQ,SAAS;GACnB,eAAe,QAAQ,QAAQ,OAAO;GACtC,cAAc;EAChB;EAEA,aAAa;GACX,IAAI,QAAQ,SACV,eAAe,UAAU,QAAQ,OAAO;EAE5C;CACF,GAAG,CAAC,IAAI,CAAC;CAET,OACE,qBAAC,OAAA;EACC,WAAW,GAAG,kBAAkB,WAAW,EACzC,wBAAwB,OAC1B,CAAC;EACD,eAAe,WAAW,eAAe,CAAC,UAAU;EAEpD,UAAA,CAAA,oBAAC,OAAA;GACC,WAAW,GAAG,wBAAwB,EACpC,mCAAmC,kBAAkB,CAAC,OACxD,CAAC;GACD,KAAK;GAEJ,UAAA,YAAa,SAAS,OAAO,YAAa;EAAA,CAC7C,GACA,oBAAC,OAAA;GAAI,WAAU;GACZ,UAAA,SAAS,oBAAC,WAAA,CAAA,CAAU,IAAK,oBAAC,aAAA,CAAA,CAAY;EAAA,CACzC,CAAA;CAAA,CACF;AAEJ"}

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

@@ -0,0 +1,48 @@
+.accordion-text {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  height: 25px;
+  padding: 4px 24px 4px 8px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  cursor: pointer;
+  border-radius: 4px;
+  background-color: rgba(48, 57, 91, 0.05);
+}
+.accordion-text--open {
+  height: fit-content;
+  max-height: 100%;
+}
+.accordion-text__body {
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.accordion-text__body--trim-text > * {
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.accordion-text--open .accordion-text__body {
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+}
+.accordion-text__toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  margin: 4px;
+  padding: 2px;
+  pointer-events: none;
+  color: #a0a4b0;
+}