@sberbusiness/triplex-next 1.43.0 → 1.45.0

package/components/Table/MasterTable.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import React__default, { useState, useMemo } from "react";
 import { MasterTableContext } from "./MasterTableContext.js";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { NoColumns } from "./NoColumns.js";
@@ -15,40 +15,39 @@ import "./TableFooter/components/TableFooterSummaryAmount.js";
 import "./TableFooter/components/TableFooterSummarySelectAllButton.js";
 import "./TableFooter/components/TableFooterSummarySelectedCount.js";
 import "./TableBasicSettings/components/ColumnSettingsSortableListItem.js";
-const masterTable = "masterTable__48937b88";
+const masterTable = "masterTable__b9573e43";
 const styles = {
   masterTable
 };
-const MasterTable = ({ children, className, loading = false, ...htmlDivAttributes }) => {
-  const [columns, setColumns] = useState([]);
-  return /* @__PURE__ */ jsx(
-    MasterTableContext.Provider,
-    {
-      value: {
-        columns,
-        loading,
-        setColumns
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx(styles.masterTable, className),
-          ...htmlDivAttributes,
-          "data-tx": "1.43.0",
-          children
-        }
-      )
-    }
-  );
-};
+const MasterTable = Object.assign(
+  React__default.forwardRef(function MasterTable2({ children, className, loading = false, ...htmlDivAttributes }, ref) {
+    const [columns, setColumns] = useState([]);
+    const contextValue = useMemo(
+      () => ({ columns, loading, setColumns }),
+      [columns, loading]
+    );
+    return /* @__PURE__ */ jsx(MasterTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(styles.masterTable, className),
+        ...htmlDivAttributes,
+        "data-tx": "1.45.0",
+        ref,
+        children
+      }
+    ) });
+  }),
+  {
+    NoColumns,
+    FilterPanel,
+    ChipPanel,
+    TableBasic,
+    TableBasicSettings,
+    TableFooter,
+    PaginationPanel
+  }
+);
 MasterTable.displayName = "MasterTable";
-MasterTable.NoColumns = NoColumns;
-MasterTable.FilterPanel = FilterPanel;
-MasterTable.ChipPanel = ChipPanel;
-MasterTable.TableBasic = TableBasic;
-MasterTable.TableBasicSettings = TableBasicSettings;
-MasterTable.TableFooter = TableFooter;
-MasterTable.PaginationPanel = PaginationPanel;
 export {
   MasterTable
 };

package/components/Table/MasterTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasterTable.js","sources":["../../../src/components/Table/MasterTable.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { MasterTableContext } from \"@sberbusiness/triplex-next/components/Table/MasterTableContext\";\nimport styles from \"./styles/MasterTable.module.less\";\nimport { clsx } from \"clsx\";\nimport { NoColumns } from \"@sberbusiness/triplex-next/components/Table/NoColumns\";\nimport { IMasterTableProps, ITableBasicColumn } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { FilterPanel } from \"@sberbusiness/triplex-next/components/Table/FilterPanel\";\nimport { ChipPanel } from \"@sberbusiness/triplex-next/components/Table/ChipPanel\";\nimport { TableBasic } from \"@sberbusiness/triplex-next/components/Table/TableBasic/TableBasic\";\nimport { TableBasicSettings } from \"@sberbusiness/triplex-next/components/Table/TableBasicSettings/TableBasicSettings\";\nimport { TableFooter } from \"@sberbusiness/triplex-next/components/Table/TableFooter/TableFooter\";\nimport { PaginationPanel } from \"@sberbusiness/triplex-next/components/Table/PaginationPanel\";\n\ninterface IMasterTableFC extends React.FC<IMasterTableProps> {\n    NoColumns: typeof NoColumns;\n    FilterPanel: typeof FilterPanel;\n    ChipPanel: typeof ChipPanel;\n    TableBasic: typeof TableBasic;\n    TableBasicSettings: typeof TableBasicSettings;\n    TableFooter: typeof TableFooter;\n    PaginationPanel: typeof PaginationPanel;\n}\n\nexport const MasterTable: IMasterTableFC = ({ children, className, loading = false, ...htmlDivAttributes }) => {\n    const [columns, setColumns] = useState<ITableBasicColumn[]>([]);\n\n    return (\n        <MasterTableContext.Provider\n            value={{\n                columns,\n                loading,\n                setColumns,\n            }}\n        >\n            <div\n                className={clsx(styles.masterTable, className)}\n                {...htmlDivAttributes}\n                data-tx={process.env.npm_package_version}\n            >\n                {children}\n            </div>\n        </MasterTableContext.Provider>\n    );\n};\n\nMasterTable.displayName = \"MasterTable\";\nMasterTable.NoColumns = NoColumns;\nMasterTable.FilterPanel = FilterPanel;\nMasterTable.ChipPanel = ChipPanel;\nMasterTable.TableBasic = TableBasic;\nMasterTable.TableBasicSettings = TableBasicSettings;\nMasterTable.TableFooter = TableFooter;\nMasterTable.PaginationPanel = PaginationPanel;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,cAA8B,CAAC,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,wBAAwB;AAC3G,QAAM,CAAC,SAAS,UAAU,IAAI,SAA8B,CAAA,CAAE;AAE9D,SACI;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACG,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,UAC5C,GAAG;AAAA,UACJ,WAAS;AAAA,UAER;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;AAEA,YAAY,cAAc;AAC1B,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,YAAY,YAAY;AACxB,YAAY,aAAa;AACzB,YAAY,qBAAqB;AACjC,YAAY,cAAc;AAC1B,YAAY,kBAAkB;"}
+{"version":3,"file":"MasterTable.js","sources":["../../../src/components/Table/MasterTable.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport {\n    IMasterTableContextContext,\n    MasterTableContext,\n} from \"@sberbusiness/triplex-next/components/Table/MasterTableContext\";\nimport styles from \"./styles/MasterTable.module.less\";\nimport { clsx } from \"clsx\";\nimport { NoColumns } from \"@sberbusiness/triplex-next/components/Table/NoColumns\";\nimport { IMasterTableProps, ITableBasicColumn } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { FilterPanel } from \"@sberbusiness/triplex-next/components/Table/FilterPanel\";\nimport { ChipPanel } from \"@sberbusiness/triplex-next/components/Table/ChipPanel\";\nimport { TableBasic } from \"@sberbusiness/triplex-next/components/Table/TableBasic/TableBasic\";\nimport { TableBasicSettings } from \"@sberbusiness/triplex-next/components/Table/TableBasicSettings/TableBasicSettings\";\nimport { TableFooter } from \"@sberbusiness/triplex-next/components/Table/TableFooter/TableFooter\";\nimport { PaginationPanel } from \"@sberbusiness/triplex-next/components/Table/PaginationPanel\";\n\n/**\n * Статические субкомпоненты MasterTable. Тип задан через typeof-запросы, а не выведен:\n * TableBasicSettings и TableFooter типизированы неэкспортируемыми интерфейсами, и выведенный\n * тип Object.assign невозможно сгенерировать в d.ts (TS4023) — declaration emit падает.\n *\n * Явная аннотация снимает проверку лишних свойств у Object.assign, поэтому при добавлении\n * или удалении статики этот интерфейс нужно править синхронно: иначе новая статика окажется\n * в рантайме, но не попадёт в публичный тип, и TypeScript промолчит.\n */\ninterface IMasterTableStatics {\n    NoColumns: typeof NoColumns;\n    FilterPanel: typeof FilterPanel;\n    ChipPanel: typeof ChipPanel;\n    TableBasic: typeof TableBasic;\n    TableBasicSettings: typeof TableBasicSettings;\n    TableFooter: typeof TableFooter;\n    PaginationPanel: typeof PaginationPanel;\n}\n\n/**\n * Контейнер таблицы. Объединяет панели фильтров, саму таблицу, подвал и пагинацию,\n * раздавая им общее состояние (колонки и признак загрузки) через MasterTableContext.\n */\nexport const MasterTable: React.ForwardRefExoticComponent<IMasterTableProps & React.RefAttributes<HTMLDivElement>> &\n    IMasterTableStatics = Object.assign(\n    React.forwardRef<HTMLDivElement, IMasterTableProps>(function MasterTable(\n        { children, className, loading = false, ...htmlDivAttributes },\n        ref,\n    ) {\n        const [columns, setColumns] = useState<ITableBasicColumn[]>([]);\n\n        const contextValue = useMemo<IMasterTableContextContext>(\n            () => ({ columns, loading, setColumns }),\n            [columns, loading],\n        );\n\n        return (\n            <MasterTableContext.Provider value={contextValue}>\n                <div\n                    className={clsx(styles.masterTable, className)}\n                    {...htmlDivAttributes}\n                    data-tx={process.env.npm_package_version}\n                    ref={ref}\n                >\n                    {children}\n                </div>\n            </MasterTableContext.Provider>\n        );\n    }),\n    {\n        NoColumns,\n        FilterPanel,\n        ChipPanel,\n        TableBasic,\n        TableBasicSettings,\n        TableFooter,\n        PaginationPanel,\n    },\n);\n\nMasterTable.displayName = \"MasterTable\";\n"],"names":["React","MasterTable"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,cACa,OAAO;AAAA,EAC7BA,eAAM,WAA8C,SAASC,aACzD,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,kBAAA,GAC3C,KACF;AACE,UAAM,CAAC,SAAS,UAAU,IAAI,SAA8B,CAAA,CAAE;AAE9D,UAAM,eAAe;AAAA,MACjB,OAAO,EAAE,SAAS,SAAS;MAC3B,CAAC,SAAS,OAAO;AAAA,IAAA;AAGrB,+BACK,mBAAmB,UAAnB,EAA4B,OAAO,cAChC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,aAAa,SAAS;AAAA,QAC5C,GAAG;AAAA,QACJ,WAAS;AAAA,QACT;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER,CAAC;AAAA,EACD;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAER;AAEA,YAAY,cAAc;"}

package/components/Table/NoColumns.js

@@ -1,18 +1,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { Gap } from "../Gap/Gap.js";
 import { ServicesetupSysIcon96 } from "@sberbusiness/icons-next";
-const noColumns = "noColumns__38bcabf8";
-const content = "content__fde27fa9";
+const noColumns = "noColumns__43e460c7";
+const content = "content__439a3764";
 const styles = {
   noColumns,
   content
 };
-const NoColumns = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.noColumns, className), ...htmlDivAttributes, children: [
-  /* @__PURE__ */ jsx(ServicesetupSysIcon96, {}),
-  /* @__PURE__ */ jsx(Gap, { size: 8 }),
-  /* @__PURE__ */ jsx("div", { className: styles.content, children })
-] });
+const NoColumns = React__default.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(styles.noColumns, className), ...htmlDivAttributes, ref, children: [
+    /* @__PURE__ */ jsx(ServicesetupSysIcon96, {}),
+    /* @__PURE__ */ jsx(Gap, { size: 8 }),
+    /* @__PURE__ */ jsx("div", { className: styles.content, children })
+  ] })
+);
 NoColumns.displayName = "NoColumns";
 export {
   NoColumns

package/components/Table/NoColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoColumns.js","sources":["../../../src/components/Table/NoColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport { INoColumnsProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { Gap } from \"@sberbusiness/triplex-next/components/Gap\";\nimport styles from \"./styles/NoColumns.module.less\";\nimport { ServicesetupSysIcon96 } from \"@sberbusiness/icons-next\";\n\n/** Компонент отображающий информацию, когда скрыты все колонки таблицы. */\nexport const NoColumns: React.FC<INoColumnsProps> = ({ children, className, ...htmlDivAttributes }) => (\n    <div className={clsx(styles.noColumns, className)} {...htmlDivAttributes}>\n        <ServicesetupSysIcon96 />\n        <Gap size={8} />\n        <div className={styles.content}>{children}</div>\n    </div>\n);\n\nNoColumns.displayName = \"NoColumns\";\n"],"names":[],"mappings":";;;;;;;;;;AAQO,MAAM,YAAuC,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,MAC3E,qBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,mBACnD,UAAA;AAAA,EAAA,oBAAC,uBAAA,EAAsB;AAAA,EACvB,oBAAC,KAAA,EAAI,MAAM,EAAA,CAAG;AAAA,EACd,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,EAAA,CAC9C;AAGJ,UAAU,cAAc;"}
+{"version":3,"file":"NoColumns.js","sources":["../../../src/components/Table/NoColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport { INoColumnsProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { Gap } from \"@sberbusiness/triplex-next/components/Gap\";\nimport styles from \"./styles/NoColumns.module.less\";\nimport { ServicesetupSysIcon96 } from \"@sberbusiness/icons-next\";\n\n/** Компонент отображающий информацию, когда скрыты все колонки таблицы. */\nexport const NoColumns = React.forwardRef<HTMLDivElement, INoColumnsProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => (\n        <div className={clsx(styles.noColumns, className)} {...htmlDivAttributes} ref={ref}>\n            <ServicesetupSysIcon96 />\n            <Gap size={8} />\n            <div className={styles.content}>{children}</div>\n        </div>\n    ),\n);\n\nNoColumns.displayName = \"NoColumns\";\n"],"names":["React"],"mappings":";;;;;;;;;;;AAQO,MAAM,YAAYA,eAAM;AAAA,EAC3B,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAC5C,qBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,mBAAmB,KACtE,UAAA;AAAA,IAAA,oBAAC,uBAAA,EAAsB;AAAA,IACvB,oBAAC,KAAA,EAAI,MAAM,EAAA,CAAG;AAAA,IACd,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,EAAA,EAAA,CAC9C;AAER;AAEA,UAAU,cAAc;"}

package/components/Table/PaginationPanel.js

@@ -1,17 +1,21 @@
 import { jsx } from "react/jsx-runtime";
+import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const paginationPanel = "paginationPanel__63ec5cad";
+const paginationPanel = "paginationPanel__767256d6";
 const styles = {
   paginationPanel
 };
-const PaginationPanel = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: clsx(styles.paginationPanel, className),
-    ...htmlDivAttributes,
-    "data-tx": "1.43.0",
-    children
-  }
+const PaginationPanel = React__default.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(styles.paginationPanel, className),
+      ...htmlDivAttributes,
+      "data-tx": "1.45.0",
+      ref,
+      children
+    }
+  )
 );
 PaginationPanel.displayName = "PaginationPanel";
 export {

package/components/Table/PaginationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPanel.js","sources":["../../../src/components/Table/PaginationPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/PaginationPanel.module.less\";\nimport { IPaginationPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Компонент панели под элементы пагинации таблицы. */\nexport const PaginationPanel: React.FC<IPaginationPanelProps> = ({ children, className, ...htmlDivAttributes }) => (\n    <div\n        className={clsx(styles.paginationPanel, className)}\n        {...htmlDivAttributes}\n        data-tx={process.env.npm_package_version}\n    >\n        {children}\n    </div>\n);\n\nPaginationPanel.displayName = \"PaginationPanel\";\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,kBAAmD,CAAC,EAAE,UAAU,WAAW,GAAG,wBACvF;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,KAAK,OAAO,iBAAiB,SAAS;AAAA,IAChD,GAAG;AAAA,IACJ,WAAS;AAAA,IAER;AAAA,EAAA;AACL;AAGJ,gBAAgB,cAAc;"}
+{"version":3,"file":"PaginationPanel.js","sources":["../../../src/components/Table/PaginationPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport styles from \"./styles/PaginationPanel.module.less\";\nimport { IPaginationPanelProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\n\n/** Компонент панели под элементы пагинации таблицы. */\nexport const PaginationPanel = React.forwardRef<HTMLDivElement, IPaginationPanelProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => (\n        <div\n            className={clsx(styles.paginationPanel, className)}\n            {...htmlDivAttributes}\n            data-tx={process.env.npm_package_version}\n            ref={ref}\n        >\n            {children}\n        </div>\n    ),\n);\n\nPaginationPanel.displayName = \"PaginationPanel\";\n"],"names":["React"],"mappings":";;;;;;;AAMO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAC5C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,iBAAiB,SAAS;AAAA,MAChD,GAAG;AAAA,MACJ,WAAS;AAAA,MACT;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;AAEA,gBAAgB,cAAc;"}

package/components/Table/TableBasic/TableBasic.js

@@ -1,69 +1,69 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useContext, useEffect } from "react";
+import React__default, { useContext, useEffect } from "react";
 import { i as isEqual } from "../../../chunks/vendor-D4wvHis9.js";
 import { MasterTableContext } from "../MasterTableContext.js";
-import { s as styles } from "../../../chunks/utils-B25Ic6iq.js";
+import { s as styles } from "../../../chunks/utils-CRgskx0c.js";
 import { TableBasicHeader } from "./components/TableBasicHeader.js";
 import { TableBasicBody } from "./components/TableBasicBody.js";
 import { LoaderMiddle } from "../../Loader/LoaderMiddle/LoaderMiddle.js";
 import { LoaderScreen } from "../../LoaderScreen/LoaderScreen.js";
-const TableBasic = ({
-  columns,
-  data,
-  highlightRowOnHover,
-  onOrderBy,
-  onClickRow,
-  renderNoColumns,
-  renderNoData,
-  headless,
-  ...htmlTableAttributes
-}) => {
-  const context = useContext(MasterTableContext);
-  const isEmptyData = data.length === 0;
-  useEffect(() => {
-    if (!isEqual(columns, context.columns)) {
-      context.setColumns(columns);
-    }
-  }, [columns, context]);
-  const renderTable = () => {
-    if (columns.every((c) => c.hidden) && renderNoColumns) {
-      return renderNoColumns();
-    }
-    return /* @__PURE__ */ jsxs("table", { ...htmlTableAttributes, children: [
-      headless || /* @__PURE__ */ jsx(TableBasicHeader, { columns, onOrderBy }),
-      /* @__PURE__ */ jsx(
-        TableBasicBody,
-        {
-          columns,
-          data,
-          onClickRow,
-          highlightRowOnHover
-        }
-      )
-    ] }, "table");
-  };
-  const renderFooter = (isEmptyData2) => {
-    const { loading } = context;
-    if (loading && isEmptyData2) {
-      return renderFooterEmptyData(renderNoDataLoading());
-    } else if (!loading && isEmptyData2) {
-      return renderFooterEmptyData(renderNoData());
-    } else if (loading && !isEmptyData2) {
-      return /* @__PURE__ */ jsx("div", { className: styles.spinnerWrapper, children: /* @__PURE__ */ jsx(LoaderScreen, { type: "middle", className: styles.tableLoaderScreen }) });
-    } else {
+const TableBasic = React__default.forwardRef(
+  ({
+    columns,
+    data,
+    highlightRowOnHover,
+    onOrderBy,
+    onClickRow,
+    renderNoColumns,
+    renderNoData,
+    headless,
+    ...htmlTableAttributes
+  }, ref) => {
+    const { columns: contextColumns, loading, setColumns } = useContext(MasterTableContext);
+    const isEmptyData = data.length === 0;
+    useEffect(() => {
+      if (!isEqual(columns, contextColumns)) {
+        setColumns(columns);
+      }
+    }, [columns, contextColumns, setColumns]);
+    const renderTable = () => {
+      if (columns.every((column) => column.hidden) && renderNoColumns) {
+        return renderNoColumns();
+      }
+      return /* @__PURE__ */ jsxs("table", { ...htmlTableAttributes, ref, children: [
+        headless || /* @__PURE__ */ jsx(TableBasicHeader, { columns, onOrderBy }),
+        /* @__PURE__ */ jsx(
+          TableBasicBody,
+          {
+            columns,
+            data,
+            onClickRow,
+            highlightRowOnHover
+          }
+        )
+      ] });
+    };
+    const renderFooter = () => {
+      if (loading && isEmptyData) {
+        return /* @__PURE__ */ jsxs("div", { className: styles.footerEmptyData, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.overlayCover }),
+          /* @__PURE__ */ jsx(LoaderMiddle, {})
+        ] });
+      }
+      if (isEmptyData) {
+        return /* @__PURE__ */ jsx("div", { className: styles.footerEmptyData, children: renderNoData() });
+      }
+      if (loading) {
+        return /* @__PURE__ */ jsx("div", { className: styles.spinnerWrapper, children: /* @__PURE__ */ jsx(LoaderScreen, { type: "middle", className: styles.tableLoaderScreen }) });
+      }
       return null;
-    }
-  };
-  const renderFooterEmptyData = (content) => /* @__PURE__ */ jsx("div", { className: styles.footerEmptyData, children: content });
-  const renderNoDataLoading = () => [
-    /* @__PURE__ */ jsx("div", { className: styles.overlayCover }, "overlay"),
-    /* @__PURE__ */ jsx(LoaderMiddle, {}, "spinner")
-  ];
-  return /* @__PURE__ */ jsxs("div", { className: styles.tableBasic, children: [
-    renderTable(),
-    renderFooter(isEmptyData)
-  ] });
-};
+    };
+    return /* @__PURE__ */ jsxs("div", { className: styles.tableBasic, children: [
+      renderTable(),
+      renderFooter()
+    ] });
+  }
+);
 TableBasic.displayName = "TableBasic";
 export {
   TableBasic

package/components/Table/TableBasic/TableBasic.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBasic.js","sources":["../../../../src/components/Table/TableBasic/TableBasic.tsx"],"sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport isEqual from \"lodash-es/isEqual\";\nimport { MasterTableContext } from \"@sberbusiness/triplex-next/components/Table/MasterTableContext\";\nimport styles from \"./styles/TableBasic.module.less\";\nimport { TableBasicHeader } from \"@sberbusiness/triplex-next/components/Table/TableBasic/components/TableBasicHeader\";\nimport { TableBasicBody } from \"@sberbusiness/triplex-next/components/Table/TableBasic/components/TableBasicBody\";\nimport { ITableBasicProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { LoaderMiddle } from \"@sberbusiness/triplex-next/components/Loader/LoaderMiddle/LoaderMiddle\";\nimport { LoaderScreen } from \"@sberbusiness/triplex-next/components/LoaderScreen/LoaderScreen\";\n\n/** Компонент обычной таблицы. */\nexport const TableBasic = ({\n    columns,\n    data,\n    highlightRowOnHover,\n    onOrderBy,\n    onClickRow,\n    renderNoColumns,\n    renderNoData,\n    headless,\n    ...htmlTableAttributes\n}: ITableBasicProps) => {\n    const context = useContext(MasterTableContext);\n    const isEmptyData = data.length === 0;\n\n    useEffect(() => {\n        if (!isEqual(columns, context.columns)) {\n            context.setColumns(columns);\n        }\n    }, [columns, context]);\n\n    const renderTable = () => {\n        if (columns.every((c) => c.hidden) && renderNoColumns) {\n            return renderNoColumns();\n        }\n\n        return (\n            <table key=\"table\" {...htmlTableAttributes}>\n                {headless || <TableBasicHeader columns={columns} onOrderBy={onOrderBy} />}\n                <TableBasicBody\n                    columns={columns}\n                    data={data}\n                    onClickRow={onClickRow}\n                    highlightRowOnHover={highlightRowOnHover}\n                />\n            </table>\n        );\n    };\n\n    const renderFooter = (isEmptyData: boolean) => {\n        const { loading } = context;\n\n        if (loading && isEmptyData) {\n            return renderFooterEmptyData(renderNoDataLoading());\n        } else if (!loading && isEmptyData) {\n            return renderFooterEmptyData(renderNoData());\n        } else if (loading && !isEmptyData) {\n            return (\n                <div className={styles.spinnerWrapper}>\n                    <LoaderScreen type=\"middle\" className={styles.tableLoaderScreen} />\n                </div>\n            );\n        } else {\n            return null;\n        }\n    };\n\n    const renderFooterEmptyData = (content: React.JSX.Element | React.JSX.Element[]) => (\n        <div className={styles.footerEmptyData}>{content}</div>\n    );\n    const renderNoDataLoading = () => [\n        <div className={styles.overlayCover} key=\"overlay\" />,\n        <LoaderMiddle key=\"spinner\" />,\n    ];\n\n    return (\n        <div className={styles.tableBasic}>\n            {renderTable()}\n            {renderFooter(isEmptyData)}\n        </div>\n    );\n};\n\nTableBasic.displayName = \"TableBasic\";\n"],"names":["isEmptyData"],"mappings":";;;;;;;;;AAWO,MAAM,aAAa,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAwB;AACpB,QAAM,UAAU,WAAW,kBAAkB;AAC7C,QAAM,cAAc,KAAK,WAAW;AAEpC,YAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,SAAS,QAAQ,OAAO,GAAG;AACpC,cAAQ,WAAW,OAAO;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,QAAM,cAAc,MAAM;AACtB,QAAI,QAAQ,MAAM,CAAC,MAAM,EAAE,MAAM,KAAK,iBAAiB;AACnD,aAAO,gBAAA;AAAA,IACX;AAEA,WACI,qBAAC,SAAA,EAAmB,GAAG,qBAClB,UAAA;AAAA,MAAA,YAAY,oBAAC,kBAAA,EAAiB,SAAkB,UAAA,CAAsB;AAAA,MACvE;AAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,EAAA,GAPO,OAQX;AAAA,EAER;AAEA,QAAM,eAAe,CAACA,iBAAyB;AAC3C,UAAM,EAAE,YAAY;AAEpB,QAAI,WAAWA,cAAa;AACxB,aAAO,sBAAsB,qBAAqB;AAAA,IACtD,WAAW,CAAC,WAAWA,cAAa;AAChC,aAAO,sBAAsB,cAAc;AAAA,IAC/C,WAAW,WAAW,CAACA,cAAa;AAChC,aACI,oBAAC,OAAA,EAAI,WAAW,OAAO,gBACnB,UAAA,oBAAC,cAAA,EAAa,MAAK,UAAS,WAAW,OAAO,kBAAA,CAAmB,GACrE;AAAA,IAER,OAAO;AACH,aAAO;AAAA,IACX;AAAA,EACJ;AAEA,QAAM,wBAAwB,CAAC,YAC3B,oBAAC,SAAI,WAAW,OAAO,iBAAkB,UAAA,QAAA,CAAQ;AAErD,QAAM,sBAAsB,MAAM;AAAA,IAC9B,oBAAC,OAAA,EAAI,WAAW,OAAO,gBAAkB,SAAU;AAAA,IACnD,oBAAC,kBAAiB,SAAU;AAAA,EAAA;AAGhC,SACI,qBAAC,OAAA,EAAI,WAAW,OAAO,YAClB,UAAA;AAAA,IAAA,YAAA;AAAA,IACA,aAAa,WAAW;AAAA,EAAA,GAC7B;AAER;AAEA,WAAW,cAAc;"}
+{"version":3,"file":"TableBasic.js","sources":["../../../../src/components/Table/TableBasic/TableBasic.tsx"],"sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport isEqual from \"lodash-es/isEqual\";\nimport { MasterTableContext } from \"@sberbusiness/triplex-next/components/Table/MasterTableContext\";\nimport styles from \"./styles/TableBasic.module.less\";\nimport { TableBasicHeader } from \"@sberbusiness/triplex-next/components/Table/TableBasic/components/TableBasicHeader\";\nimport { TableBasicBody } from \"@sberbusiness/triplex-next/components/Table/TableBasic/components/TableBasicBody\";\nimport { ITableBasicProps } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { LoaderMiddle } from \"@sberbusiness/triplex-next/components/Loader/LoaderMiddle/LoaderMiddle\";\nimport { LoaderScreen } from \"@sberbusiness/triplex-next/components/LoaderScreen/LoaderScreen\";\n\n/**\n * Компонент обычной таблицы.\n * Состояние загрузки и общий для таблицы набор колонок берутся из контекста MasterTable.\n * Ref пробрасывается на элемент table — туда же, куда попадают остальные HTML-атрибуты.\n * Если все колонки скрыты и задан renderNoColumns, вместо таблицы рендерится заглушка,\n * и ref остаётся пустым — элемента table в этот момент нет.\n */\nexport const TableBasic = React.forwardRef<HTMLTableElement, ITableBasicProps>(\n    (\n        {\n            columns,\n            data,\n            highlightRowOnHover,\n            onOrderBy,\n            onClickRow,\n            renderNoColumns,\n            renderNoData,\n            headless,\n            ...htmlTableAttributes\n        },\n        ref,\n    ) => {\n        const { columns: contextColumns, loading, setColumns } = useContext(MasterTableContext);\n        const isEmptyData = data.length === 0;\n\n        useEffect(() => {\n            if (!isEqual(columns, contextColumns)) {\n                setColumns(columns);\n            }\n        }, [columns, contextColumns, setColumns]);\n\n        /** Рендер таблицы или заглушки, если пользователь скрыл все колонки. */\n        const renderTable = () => {\n            if (columns.every((column) => column.hidden) && renderNoColumns) {\n                return renderNoColumns();\n            }\n\n            return (\n                <table {...htmlTableAttributes} ref={ref}>\n                    {headless || <TableBasicHeader columns={columns} onOrderBy={onOrderBy} />}\n                    <TableBasicBody\n                        columns={columns}\n                        data={data}\n                        onClickRow={onClickRow}\n                        highlightRowOnHover={highlightRowOnHover}\n                    />\n                </table>\n            );\n        };\n\n        /** Рендер подвала: заглушка при отсутствии данных и индикаторы загрузки. */\n        const renderFooter = () => {\n            if (loading && isEmptyData) {\n                return (\n                    <div className={styles.footerEmptyData}>\n                        <div className={styles.overlayCover} />\n                        <LoaderMiddle />\n                    </div>\n                );\n            }\n\n            if (isEmptyData) {\n                return <div className={styles.footerEmptyData}>{renderNoData()}</div>;\n            }\n\n            if (loading) {\n                return (\n                    <div className={styles.spinnerWrapper}>\n                        <LoaderScreen type=\"middle\" className={styles.tableLoaderScreen} />\n                    </div>\n                );\n            }\n\n            return null;\n        };\n\n        return (\n            <div className={styles.tableBasic}>\n                {renderTable()}\n                {renderFooter()}\n            </div>\n        );\n    },\n);\n\nTableBasic.displayName = \"TableBasic\";\n"],"names":["React"],"mappings":";;;;;;;;;AAiBO,MAAM,aAAaA,eAAM;AAAA,EAC5B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,EAAE,SAAS,gBAAgB,SAAS,WAAA,IAAe,WAAW,kBAAkB;AACtF,UAAM,cAAc,KAAK,WAAW;AAEpC,cAAU,MAAM;AACZ,UAAI,CAAC,QAAQ,SAAS,cAAc,GAAG;AACnC,mBAAW,OAAO;AAAA,MACtB;AAAA,IACJ,GAAG,CAAC,SAAS,gBAAgB,UAAU,CAAC;AAGxC,UAAM,cAAc,MAAM;AACtB,UAAI,QAAQ,MAAM,CAAC,WAAW,OAAO,MAAM,KAAK,iBAAiB;AAC7D,eAAO,gBAAA;AAAA,MACX;AAEA,aACI,qBAAC,SAAA,EAAO,GAAG,qBAAqB,KAC3B,UAAA;AAAA,QAAA,YAAY,oBAAC,kBAAA,EAAiB,SAAkB,UAAA,CAAsB;AAAA,QACvE;AAAA,UAAC;AAAA,UAAA;AAAA,YACG;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ,GACJ;AAAA,IAER;AAGA,UAAM,eAAe,MAAM;AACvB,UAAI,WAAW,aAAa;AACxB,eACI,qBAAC,OAAA,EAAI,WAAW,OAAO,iBACnB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAA,CAAc;AAAA,8BACpC,cAAA,CAAA,CAAa;AAAA,QAAA,GAClB;AAAA,MAER;AAEA,UAAI,aAAa;AACb,mCAAQ,OAAA,EAAI,WAAW,OAAO,iBAAkB,0BAAe;AAAA,MACnE;AAEA,UAAI,SAAS;AACT,eACI,oBAAC,OAAA,EAAI,WAAW,OAAO,gBACnB,UAAA,oBAAC,cAAA,EAAa,MAAK,UAAS,WAAW,OAAO,kBAAA,CAAmB,GACrE;AAAA,MAER;AAEA,aAAO;AAAA,IACX;AAEA,WACI,qBAAC,OAAA,EAAI,WAAW,OAAO,YAClB,UAAA;AAAA,MAAA,YAAA;AAAA,MACA,aAAA;AAAA,IAAa,GAClB;AAAA,EAER;AACJ;AAEA,WAAW,cAAc;"}

package/components/Table/TableBasic/components/TableBasicBody.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { TableBasicRow } from "./TableBasicRow.js";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
-import { s as styles } from "../../../../chunks/utils-B25Ic6iq.js";
+import { s as styles } from "../../../../chunks/utils-CRgskx0c.js";
 const TableBasicBody = ({ columns, data, highlightRowOnHover, onClickRow }) => {
   if (data.length === 0) {
     return null;
@@ -12,8 +12,7 @@ const TableBasicBody = ({ columns, data, highlightRowOnHover, onClickRow }) => {
     [styles.clickable]: clickEnabled,
     [styles.hoverable]: hoverable
   });
-  const rows = data.map((rowData) => /* @__PURE__ */ jsx(TableBasicRow, { columns, data: rowData, onClickRow }, rowData.rowKey));
-  return /* @__PURE__ */ jsx("tbody", { className, children: rows });
+  return /* @__PURE__ */ jsx("tbody", { className, children: data.map((rowData) => /* @__PURE__ */ jsx(TableBasicRow, { columns, data: rowData, onClickRow }, rowData.rowKey)) });
 };
 TableBasicBody.displayName = "TableBasicBody";
 export {

package/components/Table/TableBasic/components/TableBasicBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBasicBody.js","sources":["../../../../../src/components/Table/TableBasic/components/TableBasicBody.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITableBasicColumn, ITableBasicRow } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { TableBasicRow } from \"@sberbusiness/triplex-next/components/Table/TableBasic/components/TableBasicRow\";\nimport { clsx } from \"clsx\";\nimport styles from \"../styles/TableBasic.module.less\";\n\n/**\n * @prop {ITableBasicColumn} columns Структура заголовков таблицы.\n * @prop {ITableBasicRow[]} data Массив значений для вывода в теле таблицы.\n * @prop {boolean} [highlightRowOnHover] Подсветка строк при наведении мышки.\n * @prop {Function} [onClickRow] Функция обработки клика по строке таблицы.\n */\nexport interface ITableBasicBodyProps {\n    columns: ITableBasicColumn[];\n    data: ITableBasicRow[];\n    highlightRowOnHover?: boolean;\n    onClickRow?: (rowKey: string) => void;\n}\n\n/** Компонент тела таблицы. */\nexport const TableBasicBody = ({ columns, data, highlightRowOnHover, onClickRow }: ITableBasicBodyProps) => {\n    if (data.length === 0) {\n        return null;\n    }\n\n    const clickEnabled = Boolean(onClickRow);\n    const hoverable = clickEnabled || Boolean(highlightRowOnHover);\n    const className = clsx({\n        [styles.clickable]: clickEnabled,\n        [styles.hoverable]: hoverable,\n    });\n\n    const rows = data.map((rowData) => (\n        <TableBasicRow columns={columns} data={rowData} onClickRow={onClickRow} key={rowData.rowKey} />\n    ));\n    return <tbody className={className}>{rows}</tbody>;\n};\n\nTableBasicBody.displayName = \"TableBasicBody\";\n"],"names":[],"mappings":";;;;AAoBO,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAM,qBAAqB,iBAAuC;AACxG,MAAI,KAAK,WAAW,GAAG;AACnB,WAAO;AAAA,EACX;AAEA,QAAM,eAAe,QAAQ,UAAU;AACvC,QAAM,YAAY,gBAAgB,QAAQ,mBAAmB;AAC7D,QAAM,YAAY,KAAK;AAAA,IACnB,CAAC,OAAO,SAAS,GAAG;AAAA,IACpB,CAAC,OAAO,SAAS,GAAG;AAAA,EAAA,CACvB;AAED,QAAM,OAAO,KAAK,IAAI,CAAC,YACnB,oBAAC,eAAA,EAAc,SAAkB,MAAM,SAAS,WAAA,GAA6B,QAAQ,MAAQ,CAChG;AACD,SAAO,oBAAC,SAAA,EAAM,WAAuB,UAAA,KAAA,CAAK;AAC9C;AAEA,eAAe,cAAc;"}
+{"version":3,"file":"TableBasicBody.js","sources":["../../../../../src/components/Table/TableBasic/components/TableBasicBody.tsx"],"sourcesContent":["import React from \"react\";\nimport { ITableBasicColumn, ITableBasicRow } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { TableBasicRow } from \"@sberbusiness/triplex-next/components/Table/TableBasic/components/TableBasicRow\";\nimport { clsx } from \"clsx\";\nimport styles from \"../styles/TableBasic.module.less\";\n\n/** Свойства компонента TableBasicBody. */\nexport interface ITableBasicBodyProps {\n    /** Структура заголовков таблицы. */\n    columns: ITableBasicColumn[];\n    /** Массив значений для вывода в теле таблицы. */\n    data: ITableBasicRow[];\n    /** Подсветка строк при наведении мышки. */\n    highlightRowOnHover?: boolean;\n    /** Функция обработки клика по строке таблицы. */\n    onClickRow?: (rowKey: string) => void;\n}\n\n/** Компонент тела таблицы. */\nexport const TableBasicBody = ({ columns, data, highlightRowOnHover, onClickRow }: ITableBasicBodyProps) => {\n    if (data.length === 0) {\n        return null;\n    }\n\n    const clickEnabled = Boolean(onClickRow);\n    // Кликабельные строки подсвечиваются при наведении всегда, без отдельного highlightRowOnHover.\n    const hoverable = clickEnabled || Boolean(highlightRowOnHover);\n    const className = clsx({\n        [styles.clickable]: clickEnabled,\n        [styles.hoverable]: hoverable,\n    });\n\n    return (\n        <tbody className={className}>\n            {data.map((rowData) => (\n                <TableBasicRow columns={columns} data={rowData} onClickRow={onClickRow} key={rowData.rowKey} />\n            ))}\n        </tbody>\n    );\n};\n\nTableBasicBody.displayName = \"TableBasicBody\";\n"],"names":[],"mappings":";;;;AAmBO,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAM,qBAAqB,iBAAuC;AACxG,MAAI,KAAK,WAAW,GAAG;AACnB,WAAO;AAAA,EACX;AAEA,QAAM,eAAe,QAAQ,UAAU;AAEvC,QAAM,YAAY,gBAAgB,QAAQ,mBAAmB;AAC7D,QAAM,YAAY,KAAK;AAAA,IACnB,CAAC,OAAO,SAAS,GAAG;AAAA,IACpB,CAAC,OAAO,SAAS,GAAG;AAAA,EAAA,CACvB;AAED,6BACK,SAAA,EAAM,WACF,UAAA,KAAK,IAAI,CAAC,YACP,oBAAC,eAAA,EAAc,SAAkB,MAAM,SAAS,WAAA,GAA6B,QAAQ,MAAQ,CAChG,GACL;AAER;AAEA,eAAe,cAAc;"}

package/components/Table/TableBasic/components/TableBasicHeader.js

@@ -1,96 +1,79 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { SortdecreaseStrokeSrvIcon16, SortincreaseStrokeSrvIcon16, SortStrokeSrvIcon16 } from "@sberbusiness/icons-next";
-import { isNullOrUndefined } from "../../../../utils/isNullOrUndefined.js";
 import { getAriaHTMLAttributes } from "../../../../utils/html/AriaAttributes.js";
 import { getDataHTMLAttributes } from "../../../../utils/html/DataAttributes.js";
 import { ECellType, EHorizontalAlign, EOrderDirection } from "../enums.js";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
-import { s as styles, m as mapHorizontalAlignToClassName } from "../../../../chunks/utils-B25Ic6iq.js";
+import { s as styles, m as mapHorizontalAlignToClassName } from "../../../../chunks/utils-CRgskx0c.js";
 import { Text } from "../../../Typography/Text.js";
 import { ETextSize } from "../../../Typography/enums.js";
+const getNextOrderDirection = (currentDirection) => {
+  switch (currentDirection) {
+    case EOrderDirection.NONE:
+      return EOrderDirection.ASC;
+    case EOrderDirection.ASC:
+      return EOrderDirection.DESC;
+    case EOrderDirection.DESC:
+      return EOrderDirection.NONE;
+  }
+};
+const getOrderIcon = (orderDirection) => {
+  switch (orderDirection) {
+    case EOrderDirection.NONE:
+      return /* @__PURE__ */ jsx(SortStrokeSrvIcon16, { paletteIndex: 5 });
+    case EOrderDirection.ASC:
+      return /* @__PURE__ */ jsx(SortincreaseStrokeSrvIcon16, { paletteIndex: 5 });
+    case EOrderDirection.DESC:
+      return /* @__PURE__ */ jsx(SortdecreaseStrokeSrvIcon16, { paletteIndex: 5 });
+  }
+};
 const TableBasicHeader = ({ columns, onOrderBy }) => {
-  const hasOrderFunc = !isNullOrUndefined(onOrderBy);
-  const renderOrderIcon = (c) => {
-    let icon;
-    switch (c.orderDirection) {
-      case EOrderDirection.NONE: {
-        icon = /* @__PURE__ */ jsx(SortStrokeSrvIcon16, { paletteIndex: 5 });
-        break;
-      }
-      case EOrderDirection.ASC: {
-        icon = /* @__PURE__ */ jsx(SortincreaseStrokeSrvIcon16, { paletteIndex: 5 });
-        break;
-      }
-      case EOrderDirection.DESC: {
-        icon = /* @__PURE__ */ jsx(SortdecreaseStrokeSrvIcon16, { paletteIndex: 5 });
-        break;
-      }
-    }
+  const hasOrderFunc = onOrderBy != null;
+  const handleClickOrder = (fieldKey, currentDirection) => {
+    onOrderBy == null ? void 0 : onOrderBy({ direction: getNextOrderDirection(currentDirection), fieldKey });
+  };
+  const renderOrderButton = (column, orderDirection) => {
     const orderButtonClassName = clsx(styles.orderButton, {
-      [styles.alignLeft]: c.horizontalAlign === EHorizontalAlign.RIGHT,
-      [styles.alignRight]: c.horizontalAlign !== EHorizontalAlign.RIGHT,
-      [styles.sorted]: c.orderDirection !== EOrderDirection.NONE
+      [styles.alignLeft]: column.horizontalAlign === EHorizontalAlign.RIGHT,
+      [styles.alignRight]: column.horizontalAlign !== EHorizontalAlign.RIGHT,
+      [styles.sorted]: orderDirection !== EOrderDirection.NONE
     });
-    return /* @__PURE__ */ jsx("span", { className: orderButtonClassName, children: icon });
+    return /* @__PURE__ */ jsx("span", { className: orderButtonClassName, children: getOrderIcon(orderDirection) });
   };
-  const renderTh = (c, hasOrderFunc2) => {
-    if (c.hidden) {
+  const renderTh = (column) => {
+    if (column.hidden) {
       return null;
     }
-    const styleTh = c.width ? { maxWidth: c.width, minWidth: c.width, width: c.width } : void 0;
-    const orderEnabled = hasOrderFunc2 && !isNullOrUndefined(c.orderDirection);
-    const handleClickOrderFunc = orderEnabled ? () => {
-      handleClickOrder(c.fieldKey, c.orderDirection);
-    } : void 0;
-    const orderIcon = orderEnabled && renderOrderIcon(c);
-    const classNameTh = clsx(mapHorizontalAlignToClassName(c.horizontalAlign), {
-      [styles.checkboxType]: c.cellType === ECellType.CHECKBOX
+    const { ariaAttributes, cellType, dataAttributes, fieldKey, horizontalAlign, label, orderDirection, title } = column;
+    const styleTh = column.width ? { maxWidth: column.width, minWidth: column.width, width: column.width } : void 0;
+    const orderEnabled = hasOrderFunc && orderDirection != null;
+    const classNameTh = clsx(mapHorizontalAlignToClassName(horizontalAlign), {
+      [styles.checkboxType]: cellType === ECellType.CHECKBOX
     });
     const classNameThBlock = clsx(styles.thBlock, "hoverable", {
       [styles.order]: orderEnabled
     });
-    const labelElement = [ECellType.TEXT, void 0].includes(c.cellType) ? /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, children: c.label }) : c.label;
-    const content = c.horizontalAlign === EHorizontalAlign.RIGHT ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      orderIcon,
+    const labelElement = [ECellType.TEXT, void 0].includes(cellType) ? /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, children: label }) : label;
+    const orderButton = orderEnabled ? renderOrderButton(column, orderDirection) : null;
+    const content = horizontalAlign === EHorizontalAlign.RIGHT ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      orderButton,
       labelElement
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       labelElement,
-      orderIcon
+      orderButton
     ] });
-    return /* @__PURE__ */ jsx("th", { className: classNameTh, title: c.title, style: styleTh, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("th", { className: classNameTh, title, style: styleTh, children: /* @__PURE__ */ jsx(
       "span",
       {
         className: classNameThBlock,
-        onClick: handleClickOrderFunc,
-        ...Boolean(c.ariaAttributes) && getAriaHTMLAttributes(c.ariaAttributes),
-        ...Boolean(c.dataAttributes) && getDataHTMLAttributes(c.dataAttributes),
+        onClick: orderEnabled ? () => handleClickOrder(fieldKey, orderDirection) : void 0,
+        ...ariaAttributes && getAriaHTMLAttributes(ariaAttributes),
+        ...dataAttributes && getDataHTMLAttributes(dataAttributes),
         children: content
       }
-    ) }, c.fieldKey);
-  };
-  const handleClickOrder = (fieldKey, currentDirection) => {
-    let nextDirection;
-    switch (currentDirection) {
-      case EOrderDirection.NONE: {
-        nextDirection = EOrderDirection.ASC;
-        break;
-      }
-      case EOrderDirection.ASC: {
-        nextDirection = EOrderDirection.DESC;
-        break;
-      }
-      case EOrderDirection.DESC: {
-        nextDirection = EOrderDirection.NONE;
-        break;
-      }
-    }
-    if (onOrderBy) {
-      const OrderObj = { direction: nextDirection, fieldKey };
-      onOrderBy(OrderObj);
-    }
+    ) }, fieldKey);
   };
-  const thList = columns.map((c) => renderTh(c, hasOrderFunc));
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: thList }) });
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => renderTh(column)) }) });
 };
 TableBasicHeader.displayName = "TableBasicHeader";
 export {

package/components/Table/TableBasic/components/TableBasicHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBasicHeader.js","sources":["../../../../../src/components/Table/TableBasic/components/TableBasicHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    SortdecreaseStrokeSrvIcon16,\n    SortincreaseStrokeSrvIcon16,\n    SortStrokeSrvIcon16,\n} from \"@sberbusiness/icons-next\";\nimport { isNullOrUndefined } from \"@sberbusiness/triplex-next/utils/isNullOrUndefined\";\nimport { getAriaHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/AriaAttributes\";\nimport { getDataHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/DataAttributes\";\nimport {\n    ECellType,\n    EHorizontalAlign,\n    EOrderDirection,\n} from \"@sberbusiness/triplex-next/components/Table/TableBasic/enums\";\nimport { clsx } from \"clsx\";\nimport styles from \"../styles/TableBasic.module.less\";\nimport { ISortOrder, ITableBasicColumn } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { mapHorizontalAlignToClassName } from \"@sberbusiness/triplex-next/components/Table/utils\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\n\nexport interface ITableBasicHeaderProps {\n    /** Структура заголовков таблицы. */\n    columns: ITableBasicColumn[];\n    /** Обработчик сортировки. */\n    onOrderBy?: (order: ISortOrder) => void;\n}\n\n/** Компонент заголовка таблицы. */\nexport const TableBasicHeader = ({ columns, onOrderBy }: ITableBasicHeaderProps) => {\n    const hasOrderFunc = !isNullOrUndefined(onOrderBy);\n\n    const renderOrderIcon = (c: ITableBasicColumn) => {\n        let icon;\n        switch (c.orderDirection) {\n            case EOrderDirection.NONE: {\n                icon = <SortStrokeSrvIcon16 paletteIndex={5} />;\n                break;\n            }\n            case EOrderDirection.ASC: {\n                icon = <SortincreaseStrokeSrvIcon16 paletteIndex={5} />;\n                break;\n            }\n            case EOrderDirection.DESC: {\n                icon = <SortdecreaseStrokeSrvIcon16 paletteIndex={5} />;\n                break;\n            }\n        }\n\n        const orderButtonClassName = clsx(styles.orderButton, {\n            [styles.alignLeft]: c.horizontalAlign === EHorizontalAlign.RIGHT,\n            [styles.alignRight]: c.horizontalAlign !== EHorizontalAlign.RIGHT,\n            [styles.sorted]: c.orderDirection !== EOrderDirection.NONE,\n        });\n\n        return <span className={orderButtonClassName}>{icon}</span>;\n    };\n\n    /** Рендер заголовка таблицы. */\n    const renderTh = (c: ITableBasicColumn, hasOrderFunc: boolean) => {\n        // Столбец скрыт.\n        if (c.hidden) {\n            return null;\n        }\n\n        const styleTh = c.width ? { maxWidth: c.width, minWidth: c.width, width: c.width } : undefined;\n        const orderEnabled = hasOrderFunc && !isNullOrUndefined(c.orderDirection);\n        const handleClickOrderFunc = orderEnabled\n            ? () => {\n                  handleClickOrder(c.fieldKey, c.orderDirection!);\n              }\n            : undefined;\n        const orderIcon = orderEnabled && renderOrderIcon(c);\n        const classNameTh = clsx(mapHorizontalAlignToClassName(c.horizontalAlign), {\n            [styles.checkboxType]: c.cellType === ECellType.CHECKBOX,\n        });\n        const classNameThBlock = clsx(styles.thBlock, \"hoverable\", {\n            [styles.order]: orderEnabled,\n        });\n\n        const labelElement = [ECellType.TEXT, undefined].includes(c.cellType) ? (\n            <Text size={ETextSize.B3}>{c.label}</Text>\n        ) : (\n            c.label\n        );\n\n        const content =\n            c.horizontalAlign === EHorizontalAlign.RIGHT ? (\n                <>\n                    {orderIcon}\n                    {labelElement}\n                </>\n            ) : (\n                <>\n                    {labelElement}\n                    {orderIcon}\n                </>\n            );\n\n        return (\n            <th className={classNameTh} title={c.title} key={c.fieldKey} style={styleTh}>\n                <span\n                    className={classNameThBlock}\n                    onClick={handleClickOrderFunc}\n                    {...(Boolean(c.ariaAttributes) && getAriaHTMLAttributes(c.ariaAttributes!))}\n                    {...(Boolean(c.dataAttributes) && getDataHTMLAttributes(c.dataAttributes!))}\n                >\n                    {content}\n                </span>\n            </th>\n        );\n    };\n\n    /** Обработчик клика сортировки столбца. */\n    const handleClickOrder = (fieldKey: string, currentDirection: EOrderDirection) => {\n        let nextDirection;\n        switch (currentDirection) {\n            case EOrderDirection.NONE: {\n                nextDirection = EOrderDirection.ASC;\n                break;\n            }\n            case EOrderDirection.ASC: {\n                nextDirection = EOrderDirection.DESC;\n                break;\n            }\n            case EOrderDirection.DESC: {\n                nextDirection = EOrderDirection.NONE;\n                break;\n            }\n        }\n\n        if (onOrderBy) {\n            const OrderObj: ISortOrder = { direction: nextDirection, fieldKey };\n            onOrderBy(OrderObj);\n        }\n    };\n\n    const thList = columns.map((c) => renderTh(c, hasOrderFunc));\n\n    return (\n        <thead>\n            <tr>{thList}</tr>\n        </thead>\n    );\n};\n\nTableBasicHeader.displayName = \"TableBasicHeader\";\n"],"names":["hasOrderFunc"],"mappings":";;;;;;;;;;AA6BO,MAAM,mBAAmB,CAAC,EAAE,SAAS,gBAAwC;AAChF,QAAM,eAAe,CAAC,kBAAkB,SAAS;AAEjD,QAAM,kBAAkB,CAAC,MAAyB;AAC9C,QAAI;AACJ,YAAQ,EAAE,gBAAA;AAAA,MACN,KAAK,gBAAgB,MAAM;AACvB,eAAO,oBAAC,qBAAA,EAAoB,cAAc,EAAA,CAAG;AAC7C;AAAA,MACJ;AAAA,MACA,KAAK,gBAAgB,KAAK;AACtB,eAAO,oBAAC,6BAAA,EAA4B,cAAc,EAAA,CAAG;AACrD;AAAA,MACJ;AAAA,MACA,KAAK,gBAAgB,MAAM;AACvB,eAAO,oBAAC,6BAAA,EAA4B,cAAc,EAAA,CAAG;AACrD;AAAA,MACJ;AAAA,IAAA;AAGJ,UAAM,uBAAuB,KAAK,OAAO,aAAa;AAAA,MAClD,CAAC,OAAO,SAAS,GAAG,EAAE,oBAAoB,iBAAiB;AAAA,MAC3D,CAAC,OAAO,UAAU,GAAG,EAAE,oBAAoB,iBAAiB;AAAA,MAC5D,CAAC,OAAO,MAAM,GAAG,EAAE,mBAAmB,gBAAgB;AAAA,IAAA,CACzD;AAED,WAAO,oBAAC,QAAA,EAAK,WAAW,sBAAuB,UAAA,MAAK;AAAA,EACxD;AAGA,QAAM,WAAW,CAAC,GAAsBA,kBAA0B;AAE9D,QAAI,EAAE,QAAQ;AACV,aAAO;AAAA,IACX;AAEA,UAAM,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,UAAU,EAAE,OAAO,OAAO,EAAE,UAAU;AACrF,UAAM,eAAeA,iBAAgB,CAAC,kBAAkB,EAAE,cAAc;AACxE,UAAM,uBAAuB,eACvB,MAAM;AACF,uBAAiB,EAAE,UAAU,EAAE,cAAe;AAAA,IAClD,IACA;AACN,UAAM,YAAY,gBAAgB,gBAAgB,CAAC;AACnD,UAAM,cAAc,KAAK,8BAA8B,EAAE,eAAe,GAAG;AAAA,MACvE,CAAC,OAAO,YAAY,GAAG,EAAE,aAAa,UAAU;AAAA,IAAA,CACnD;AACD,UAAM,mBAAmB,KAAK,OAAO,SAAS,aAAa;AAAA,MACvD,CAAC,OAAO,KAAK,GAAG;AAAA,IAAA,CACnB;AAED,UAAM,eAAe,CAAC,UAAU,MAAM,MAAS,EAAE,SAAS,EAAE,QAAQ,IAChE,oBAAC,QAAK,MAAM,UAAU,IAAK,UAAA,EAAE,MAAA,CAAM,IAEnC,EAAE;AAGN,UAAM,UACF,EAAE,oBAAoB,iBAAiB,QACnC,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACL,IAEA,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACL;AAGR,WACI,oBAAC,QAAG,WAAW,aAAa,OAAO,EAAE,OAAwB,OAAO,SAChE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,QACX,SAAS;AAAA,QACR,GAAI,QAAQ,EAAE,cAAc,KAAK,sBAAsB,EAAE,cAAe;AAAA,QACxE,GAAI,QAAQ,EAAE,cAAc,KAAK,sBAAsB,EAAE,cAAe;AAAA,QAExE,UAAA;AAAA,MAAA;AAAA,IAAA,EACL,GAR6C,EAAE,QASnD;AAAA,EAER;AAGA,QAAM,mBAAmB,CAAC,UAAkB,qBAAsC;AAC9E,QAAI;AACJ,YAAQ,kBAAA;AAAA,MACJ,KAAK,gBAAgB,MAAM;AACvB,wBAAgB,gBAAgB;AAChC;AAAA,MACJ;AAAA,MACA,KAAK,gBAAgB,KAAK;AACtB,wBAAgB,gBAAgB;AAChC;AAAA,MACJ;AAAA,MACA,KAAK,gBAAgB,MAAM;AACvB,wBAAgB,gBAAgB;AAChC;AAAA,MACJ;AAAA,IAAA;AAGJ,QAAI,WAAW;AACX,YAAM,WAAuB,EAAE,WAAW,eAAe,SAAA;AACzD,gBAAU,QAAQ;AAAA,IACtB;AAAA,EACJ;AAEA,QAAM,SAAS,QAAQ,IAAI,CAAC,MAAM,SAAS,GAAG,YAAY,CAAC;AAE3D,SACI,oBAAC,SAAA,EACG,UAAA,oBAAC,MAAA,EAAI,kBAAO,GAChB;AAER;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"TableBasicHeader.js","sources":["../../../../../src/components/Table/TableBasic/components/TableBasicHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    SortdecreaseStrokeSrvIcon16,\n    SortincreaseStrokeSrvIcon16,\n    SortStrokeSrvIcon16,\n} from \"@sberbusiness/icons-next\";\nimport { getAriaHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/AriaAttributes\";\nimport { getDataHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/DataAttributes\";\nimport {\n    ECellType,\n    EHorizontalAlign,\n    EOrderDirection,\n} from \"@sberbusiness/triplex-next/components/Table/TableBasic/enums\";\nimport { clsx } from \"clsx\";\nimport styles from \"../styles/TableBasic.module.less\";\nimport { ISortOrder, ITableBasicColumn } from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { mapHorizontalAlignToClassName } from \"@sberbusiness/triplex-next/components/Table/utils\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\n\n/** Свойства компонента TableBasicHeader. */\nexport interface ITableBasicHeaderProps {\n    /** Структура заголовков таблицы. */\n    columns: ITableBasicColumn[];\n    /** Обработчик сортировки. */\n    onOrderBy?: (order: ISortOrder) => void;\n}\n\n/** Следующее направление сортировки при клике по заголовку: none → asc → desc → none. */\nconst getNextOrderDirection = (currentDirection: EOrderDirection): EOrderDirection => {\n    switch (currentDirection) {\n        case EOrderDirection.NONE:\n            return EOrderDirection.ASC;\n        case EOrderDirection.ASC:\n            return EOrderDirection.DESC;\n        case EOrderDirection.DESC:\n            return EOrderDirection.NONE;\n    }\n};\n\n/** Иконка, соответствующая текущему направлению сортировки. */\nconst getOrderIcon = (orderDirection: EOrderDirection): React.JSX.Element => {\n    switch (orderDirection) {\n        case EOrderDirection.NONE:\n            return <SortStrokeSrvIcon16 paletteIndex={5} />;\n        case EOrderDirection.ASC:\n            return <SortincreaseStrokeSrvIcon16 paletteIndex={5} />;\n        case EOrderDirection.DESC:\n            return <SortdecreaseStrokeSrvIcon16 paletteIndex={5} />;\n    }\n};\n\n/** Компонент заголовка таблицы. */\nexport const TableBasicHeader = ({ columns, onOrderBy }: ITableBasicHeaderProps) => {\n    const hasOrderFunc = onOrderBy != null;\n\n    /** Обработчик клика сортировки столбца. */\n    const handleClickOrder = (fieldKey: string, currentDirection: EOrderDirection) => {\n        onOrderBy?.({ direction: getNextOrderDirection(currentDirection), fieldKey });\n    };\n\n    /** Рендер кнопки сортировки столбца. */\n    const renderOrderButton = (column: ITableBasicColumn, orderDirection: EOrderDirection) => {\n        const orderButtonClassName = clsx(styles.orderButton, {\n            [styles.alignLeft]: column.horizontalAlign === EHorizontalAlign.RIGHT,\n            [styles.alignRight]: column.horizontalAlign !== EHorizontalAlign.RIGHT,\n            [styles.sorted]: orderDirection !== EOrderDirection.NONE,\n        });\n\n        return <span className={orderButtonClassName}>{getOrderIcon(orderDirection)}</span>;\n    };\n\n    /** Рендер заголовка столбца. */\n    const renderTh = (column: ITableBasicColumn) => {\n        // Столбец скрыт.\n        if (column.hidden) {\n            return null;\n        }\n\n        const { ariaAttributes, cellType, dataAttributes, fieldKey, horizontalAlign, label, orderDirection, title } =\n            column;\n        const styleTh = column.width\n            ? { maxWidth: column.width, minWidth: column.width, width: column.width }\n            : undefined;\n        // Сортировка доступна, только если задан обработчик и у столбца есть текущее направление сортировки.\n        const orderEnabled = hasOrderFunc && orderDirection != null;\n        const classNameTh = clsx(mapHorizontalAlignToClassName(horizontalAlign), {\n            [styles.checkboxType]: cellType === ECellType.CHECKBOX,\n        });\n        const classNameThBlock = clsx(styles.thBlock, \"hoverable\", {\n            [styles.order]: orderEnabled,\n        });\n\n        const labelElement = [ECellType.TEXT, undefined].includes(cellType) ? (\n            <Text size={ETextSize.B3}>{label}</Text>\n        ) : (\n            label\n        );\n        const orderButton = orderEnabled ? renderOrderButton(column, orderDirection) : null;\n\n        const content =\n            horizontalAlign === EHorizontalAlign.RIGHT ? (\n                <>\n                    {orderButton}\n                    {labelElement}\n                </>\n            ) : (\n                <>\n                    {labelElement}\n                    {orderButton}\n                </>\n            );\n\n        return (\n            <th className={classNameTh} title={title} key={fieldKey} style={styleTh}>\n                <span\n                    className={classNameThBlock}\n                    onClick={orderEnabled ? () => handleClickOrder(fieldKey, orderDirection) : undefined}\n                    {...(ariaAttributes && getAriaHTMLAttributes(ariaAttributes))}\n                    {...(dataAttributes && getDataHTMLAttributes(dataAttributes))}\n                >\n                    {content}\n                </span>\n            </th>\n        );\n    };\n\n    return (\n        <thead>\n            <tr>{columns.map((column) => renderTh(column))}</tr>\n        </thead>\n    );\n};\n\nTableBasicHeader.displayName = \"TableBasicHeader\";\n"],"names":[],"mappings":";;;;;;;;;AA6BA,MAAM,wBAAwB,CAAC,qBAAuD;AAClF,UAAQ,kBAAA;AAAA,IACJ,KAAK,gBAAgB;AACjB,aAAO,gBAAgB;AAAA,IAC3B,KAAK,gBAAgB;AACjB,aAAO,gBAAgB;AAAA,IAC3B,KAAK,gBAAgB;AACjB,aAAO,gBAAgB;AAAA,EAAA;AAEnC;AAGA,MAAM,eAAe,CAAC,mBAAuD;AACzE,UAAQ,gBAAA;AAAA,IACJ,KAAK,gBAAgB;AACjB,aAAO,oBAAC,qBAAA,EAAoB,cAAc,EAAA,CAAG;AAAA,IACjD,KAAK,gBAAgB;AACjB,aAAO,oBAAC,6BAAA,EAA4B,cAAc,EAAA,CAAG;AAAA,IACzD,KAAK,gBAAgB;AACjB,aAAO,oBAAC,6BAAA,EAA4B,cAAc,EAAA,CAAG;AAAA,EAAA;AAEjE;AAGO,MAAM,mBAAmB,CAAC,EAAE,SAAS,gBAAwC;AAChF,QAAM,eAAe,aAAa;AAGlC,QAAM,mBAAmB,CAAC,UAAkB,qBAAsC;AAC9E,2CAAY,EAAE,WAAW,sBAAsB,gBAAgB,GAAG;EACtE;AAGA,QAAM,oBAAoB,CAAC,QAA2B,mBAAoC;AACtF,UAAM,uBAAuB,KAAK,OAAO,aAAa;AAAA,MAClD,CAAC,OAAO,SAAS,GAAG,OAAO,oBAAoB,iBAAiB;AAAA,MAChE,CAAC,OAAO,UAAU,GAAG,OAAO,oBAAoB,iBAAiB;AAAA,MACjE,CAAC,OAAO,MAAM,GAAG,mBAAmB,gBAAgB;AAAA,IAAA,CACvD;AAED,+BAAQ,QAAA,EAAK,WAAW,sBAAuB,UAAA,aAAa,cAAc,GAAE;AAAA,EAChF;AAGA,QAAM,WAAW,CAAC,WAA8B;AAE5C,QAAI,OAAO,QAAQ;AACf,aAAO;AAAA,IACX;AAEA,UAAM,EAAE,gBAAgB,UAAU,gBAAgB,UAAU,iBAAiB,OAAO,gBAAgB,MAAA,IAChG;AACJ,UAAM,UAAU,OAAO,QACjB,EAAE,UAAU,OAAO,OAAO,UAAU,OAAO,OAAO,OAAO,OAAO,UAChE;AAEN,UAAM,eAAe,gBAAgB,kBAAkB;AACvD,UAAM,cAAc,KAAK,8BAA8B,eAAe,GAAG;AAAA,MACrE,CAAC,OAAO,YAAY,GAAG,aAAa,UAAU;AAAA,IAAA,CACjD;AACD,UAAM,mBAAmB,KAAK,OAAO,SAAS,aAAa;AAAA,MACvD,CAAC,OAAO,KAAK,GAAG;AAAA,IAAA,CACnB;AAED,UAAM,eAAe,CAAC,UAAU,MAAM,MAAS,EAAE,SAAS,QAAQ,wBAC7D,MAAA,EAAK,MAAM,UAAU,IAAK,iBAAM,IAEjC;AAEJ,UAAM,cAAc,eAAe,kBAAkB,QAAQ,cAAc,IAAI;AAE/E,UAAM,UACF,oBAAoB,iBAAiB,QACjC,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,EAAA,CACL,IAEA,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACL;AAGR,+BACK,MAAA,EAAG,WAAW,aAAa,OAA6B,OAAO,SAC5D,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,QACX,SAAS,eAAe,MAAM,iBAAiB,UAAU,cAAc,IAAI;AAAA,QAC1E,GAAI,kBAAkB,sBAAsB,cAAc;AAAA,QAC1D,GAAI,kBAAkB,sBAAsB,cAAc;AAAA,QAE1D,UAAA;AAAA,MAAA;AAAA,IAAA,KAPsC,QAS/C;AAAA,EAER;AAEA,SACI,oBAAC,SAAA,EACG,UAAA,oBAAC,MAAA,EAAI,UAAA,QAAQ,IAAI,CAAC,WAAW,SAAS,MAAM,CAAC,EAAA,CAAE,GACnD;AAER;AAEA,iBAAiB,cAAc;"}