@sberbusiness/triplex-next 1.43.0 → 1.44.0

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-BL5AUOKS.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":"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"}
+{"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;"}

package/components/Table/TableBasic/components/TableBasicRow.js

@@ -3,16 +3,24 @@ import { getAriaHTMLAttributes } from "../../../../utils/html/AriaAttributes.js"
 import { getDataHTMLAttributes } from "../../../../utils/html/DataAttributes.js";
 import { DataTestId } from "../../../../consts/DataTestId.js";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
-import { s as styles, a as mapVerticalAlignToClassName, m as mapHorizontalAlignToClassName, b as mapCellTypeToClassName } from "../../../../chunks/utils-B25Ic6iq.js";
+import { s as styles, a as mapVerticalAlignToClassName, m as mapHorizontalAlignToClassName, b as mapCellTypeToClassName } from "../../../../chunks/utils-BL5AUOKS.js";
 import { ECellType, EVerticalAlign } from "../enums.js";
 import { ETextSize } from "../../../Typography/enums.js";
 import { Text } from "../../../Typography/Text.js";
+const renderCellContent = (cellNode, cellType) => {
+  if (!cellNode) {
+    return /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, tag: "div", children: "---" });
+  }
+  if (cellType === ECellType.CHECKBOX || cellType === ECellType.COMPONENTS) {
+    return cellNode;
+  }
+  return /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, tag: "div", children: cellNode });
+};
 const TableBasicRow = ({ columns, data, onClickRow }) => {
   const { rowKey, rowData, rowLayout, ariaAttributes, dataAttributes, selected = false } = data;
   const classNameTr = clsx({ [styles.selected]: selected, selected });
-  const onClick = onClickRow ? () => onClickRow(rowKey) : void 0;
-  const dataTestId = dataAttributes ? dataAttributes["test-id"] : void 0;
-  const renderTd = (column, value, spanProps, dataTestId2) => {
+  const dataTestId = dataAttributes == null ? void 0 : dataAttributes["test-id"];
+  const renderTd = (column, value, spanProps) => {
     if (column.hidden) {
       return null;
     }
@@ -24,42 +32,31 @@ const TableBasicRow = ({ columns, data, onClickRow }) => {
       mapHorizontalAlignToClassName(column.horizontalAlign),
       mapVerticalAlignToClassName(verticalAlign)
     );
-    const style = column.width ? { width: column.width } : void 0;
-    const renderContent = () => {
-      if (!cellNode) {
-        return /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, tag: "div", children: "---" });
-      }
-      if (cellType === ECellType.CHECKBOX || cellType === ECellType.COMPONENTS) {
-        return cellNode;
-      }
-      return /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, tag: "div", children: cellNode });
-    };
     return /* @__PURE__ */ jsx(
       "td",
       {
         className: classNames,
         ...spanProps,
-        "data-test-id": dataTestId2 && `${dataTestId2}__${column.fieldKey}${DataTestId.Table.TableBasic.td}`,
-        style,
-        children: renderContent()
+        "data-test-id": dataTestId && `${dataTestId}__${column.fieldKey}${DataTestId.Table.TableBasic.td}`,
+        style: column.width ? { width: column.width } : void 0,
+        children: renderCellContent(cellNode, cellType)
       },
       column.fieldKey
     );
   };
-  const tdList = columns.map((column) => {
-    const { fieldKey } = column;
-    if (Object.keys(rowData).indexOf(fieldKey) !== -1) {
-      return renderTd(column, rowData[fieldKey], rowLayout == null ? void 0 : rowLayout[fieldKey], dataTestId);
-    }
-  });
   return /* @__PURE__ */ jsx(
     "tr",
     {
       className: classNameTr,
-      onClick,
-      ...Boolean(ariaAttributes) && getAriaHTMLAttributes(ariaAttributes),
-      ...Boolean(dataAttributes) && getDataHTMLAttributes(dataAttributes),
-      children: tdList
+      onClick: onClickRow ? () => onClickRow(rowKey) : void 0,
+      ...ariaAttributes && getAriaHTMLAttributes(ariaAttributes),
+      ...dataAttributes && getDataHTMLAttributes(dataAttributes),
+      children: columns.map(
+        (column) => (
+          // Ячейка рендерится, только если в данных строки есть соответствующий ключ.
+          Object.keys(rowData).includes(column.fieldKey) ? renderTd(column, rowData[column.fieldKey], rowLayout == null ? void 0 : rowLayout[column.fieldKey]) : null
+        )
+      )
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TableBasicRow.js","sources":["../../../../../src/components/Table/TableBasic/components/TableBasicRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { getAriaHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/AriaAttributes\";\nimport { getDataHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/DataAttributes\";\nimport { DataTestId } from \"@sberbusiness/triplex-next/consts/DataTestId\";\nimport { clsx } from \"clsx\";\nimport styles from \"./../styles/TableBasic.module.less\";\nimport {\n    mapCellTypeToClassName,\n    mapHorizontalAlignToClassName,\n    mapVerticalAlignToClassName,\n} from \"@sberbusiness/triplex-next/components/Table/utils\";\nimport {\n    ITableBasicColumn,\n    ITableBasicRow,\n    ITableRowCellSpanProps,\n} from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { ECellType, EVerticalAlign } from \"@sberbusiness/triplex-next/components/Table/TableBasic/enums\";\nimport { ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\n\n/** Свойства TableBasicRow. */\ninterface ITableBasicRowProps {\n    /** Структура заголовков таблицы. */\n    columns: ITableBasicColumn[];\n    /** Значение для вывода в строке. */\n    data: ITableBasicRow;\n    /** Функция обработки клика по строке таблицы. */\n    onClickRow?: (rowKey: string) => void;\n}\n\n/** Компонент строки в теле таблицы. */\nexport const TableBasicRow = ({ columns, data, onClickRow }: ITableBasicRowProps) => {\n    const { rowKey, rowData, rowLayout, ariaAttributes, dataAttributes, selected = false } = data;\n\n    const classNameTr = clsx({ [styles.selected]: selected, selected });\n    const onClick = onClickRow ? () => onClickRow(rowKey) : undefined;\n    const dataTestId = dataAttributes ? dataAttributes[\"test-id\"] : undefined;\n\n    const renderTd = (\n        column: ITableBasicColumn,\n        value: React.ReactNode,\n        spanProps?: ITableRowCellSpanProps,\n        dataTestId?: string,\n    ) => {\n        // Столбец скрыт.\n        if (column.hidden) {\n            return null;\n        }\n\n        const cellNode: React.ReactNode = column.renderCell ? column.renderCell(value) : value;\n        const cellType = column.cellType ?? ECellType.TEXT;\n        const verticalAlign =\n            column.verticalAlign ?? (cellType === ECellType.TEXT ? EVerticalAlign.BASELINE : EVerticalAlign.TOP);\n        const classNames = clsx(\n            mapCellTypeToClassName(cellType),\n            mapHorizontalAlignToClassName(column.horizontalAlign),\n            mapVerticalAlignToClassName(verticalAlign),\n        );\n        const style = column.width ? { width: column.width } : undefined;\n\n        const renderContent = () => {\n            if (!cellNode) {\n                return (\n                    <Text size={ETextSize.B3} tag=\"div\">\n                        ---\n                    </Text>\n                );\n            }\n\n            if (cellType === ECellType.CHECKBOX || cellType === ECellType.COMPONENTS) {\n                return cellNode;\n            }\n\n            return (\n                <Text size={ETextSize.B3} tag=\"div\">\n                    {cellNode}\n                </Text>\n            );\n        };\n\n        return (\n            <td\n                key={column.fieldKey}\n                className={classNames}\n                {...spanProps}\n                data-test-id={dataTestId && `${dataTestId}__${column.fieldKey}${DataTestId.Table.TableBasic.td}`}\n                style={style}\n            >\n                {renderContent()}\n            </td>\n        );\n    };\n\n    const tdList = columns.map((column) => {\n        const { fieldKey } = column;\n\n        if (Object.keys(rowData).indexOf(fieldKey) !== -1) {\n            return renderTd(column, rowData[fieldKey], rowLayout?.[fieldKey], dataTestId);\n        }\n    });\n\n    return (\n        <tr\n            className={classNameTr}\n            onClick={onClick}\n            {...(Boolean(ariaAttributes) && getAriaHTMLAttributes(ariaAttributes!))}\n            {...(Boolean(dataAttributes) && getDataHTMLAttributes(dataAttributes!))}\n        >\n            {tdList}\n        </tr>\n    );\n};\n\nTableBasicRow.displayName = \"TableBasicRow\";\n"],"names":["dataTestId"],"mappings":";;;;;;;;;AA+BO,MAAM,gBAAgB,CAAC,EAAE,SAAS,MAAM,iBAAsC;AACjF,QAAM,EAAE,QAAQ,SAAS,WAAW,gBAAgB,gBAAgB,WAAW,UAAU;AAEzF,QAAM,cAAc,KAAK,EAAE,CAAC,OAAO,QAAQ,GAAG,UAAU,UAAU;AAClE,QAAM,UAAU,aAAa,MAAM,WAAW,MAAM,IAAI;AACxD,QAAM,aAAa,iBAAiB,eAAe,SAAS,IAAI;AAEhE,QAAM,WAAW,CACb,QACA,OACA,WACAA,gBACC;AAED,QAAI,OAAO,QAAQ;AACf,aAAO;AAAA,IACX;AAEA,UAAM,WAA4B,OAAO,aAAa,OAAO,WAAW,KAAK,IAAI;AACjF,UAAM,WAAW,OAAO,YAAY,UAAU;AAC9C,UAAM,gBACF,OAAO,kBAAkB,aAAa,UAAU,OAAO,eAAe,WAAW,eAAe;AACpG,UAAM,aAAa;AAAA,MACf,uBAAuB,QAAQ;AAAA,MAC/B,8BAA8B,OAAO,eAAe;AAAA,MACpD,4BAA4B,aAAa;AAAA,IAAA;AAE7C,UAAM,QAAQ,OAAO,QAAQ,EAAE,OAAO,OAAO,UAAU;AAEvD,UAAM,gBAAgB,MAAM;AACxB,UAAI,CAAC,UAAU;AACX,mCACK,MAAA,EAAK,MAAM,UAAU,IAAI,KAAI,OAAM,UAAA,OAEpC;AAAA,MAER;AAEA,UAAI,aAAa,UAAU,YAAY,aAAa,UAAU,YAAY;AACtE,eAAO;AAAA,MACX;AAEA,iCACK,MAAA,EAAK,MAAM,UAAU,IAAI,KAAI,OACzB,UAAA,UACL;AAAA,IAER;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAW;AAAA,QACV,GAAG;AAAA,QACJ,gBAAcA,eAAc,GAAGA,WAAU,KAAK,OAAO,QAAQ,GAAG,WAAW,MAAM,WAAW,EAAE;AAAA,QAC9F;AAAA,QAEC,UAAA,cAAA;AAAA,MAAc;AAAA,MANV,OAAO;AAAA,IAAA;AAAA,EASxB;AAEA,QAAM,SAAS,QAAQ,IAAI,CAAC,WAAW;AACnC,UAAM,EAAE,aAAa;AAErB,QAAI,OAAO,KAAK,OAAO,EAAE,QAAQ,QAAQ,MAAM,IAAI;AAC/C,aAAO,SAAS,QAAQ,QAAQ,QAAQ,GAAG,uCAAY,WAAW,UAAU;AAAA,IAChF;AAAA,EACJ,CAAC;AAED,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACC,GAAI,QAAQ,cAAc,KAAK,sBAAsB,cAAe;AAAA,MACpE,GAAI,QAAQ,cAAc,KAAK,sBAAsB,cAAe;AAAA,MAEpE,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"TableBasicRow.js","sources":["../../../../../src/components/Table/TableBasic/components/TableBasicRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { getAriaHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/AriaAttributes\";\nimport { getDataHTMLAttributes } from \"@sberbusiness/triplex-next/utils/html/DataAttributes\";\nimport { DataTestId } from \"@sberbusiness/triplex-next/consts/DataTestId\";\nimport { clsx } from \"clsx\";\nimport styles from \"../styles/TableBasic.module.less\";\nimport {\n    mapCellTypeToClassName,\n    mapHorizontalAlignToClassName,\n    mapVerticalAlignToClassName,\n} from \"@sberbusiness/triplex-next/components/Table/utils\";\nimport {\n    ITableBasicColumn,\n    ITableBasicRow,\n    ITableRowCellSpanProps,\n} from \"@sberbusiness/triplex-next/components/Table/TableBasic/types\";\nimport { ECellType, EVerticalAlign } from \"@sberbusiness/triplex-next/components/Table/TableBasic/enums\";\nimport { ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\n\n/** Свойства компонента TableBasicRow. */\ninterface ITableBasicRowProps {\n    /** Структура заголовков таблицы. */\n    columns: ITableBasicColumn[];\n    /** Значение для вывода в строке. */\n    data: ITableBasicRow;\n    /** Функция обработки клика по строке таблицы. */\n    onClickRow?: (rowKey: string) => void;\n}\n\n/** Рендер содержимого ячейки: типы CHECKBOX и COMPONENTS выводятся как есть, остальные оборачиваются в Text. */\nconst renderCellContent = (cellNode: React.ReactNode, cellType: ECellType) => {\n    if (!cellNode) {\n        return (\n            <Text size={ETextSize.B3} tag=\"div\">\n                ---\n            </Text>\n        );\n    }\n\n    if (cellType === ECellType.CHECKBOX || cellType === ECellType.COMPONENTS) {\n        return cellNode;\n    }\n\n    return (\n        <Text size={ETextSize.B3} tag=\"div\">\n            {cellNode}\n        </Text>\n    );\n};\n\n/** Компонент строки в теле таблицы. */\nexport const TableBasicRow = ({ columns, data, onClickRow }: ITableBasicRowProps) => {\n    const { rowKey, rowData, rowLayout, ariaAttributes, dataAttributes, selected = false } = data;\n\n    const classNameTr = clsx({ [styles.selected]: selected, selected });\n    const dataTestId = dataAttributes?.[\"test-id\"];\n\n    const renderTd = (column: ITableBasicColumn, value: React.ReactNode, spanProps?: ITableRowCellSpanProps) => {\n        // Столбец скрыт.\n        if (column.hidden) {\n            return null;\n        }\n\n        const cellNode: React.ReactNode = column.renderCell ? column.renderCell(value) : value;\n        const cellType = column.cellType ?? ECellType.TEXT;\n        // Текст выравнивается по базовой линии, произвольная разметка — по верхнему краю ячейки.\n        const verticalAlign =\n            column.verticalAlign ?? (cellType === ECellType.TEXT ? EVerticalAlign.BASELINE : EVerticalAlign.TOP);\n        const classNames = clsx(\n            mapCellTypeToClassName(cellType),\n            mapHorizontalAlignToClassName(column.horizontalAlign),\n            mapVerticalAlignToClassName(verticalAlign),\n        );\n\n        return (\n            <td\n                key={column.fieldKey}\n                className={classNames}\n                {...spanProps}\n                data-test-id={dataTestId && `${dataTestId}__${column.fieldKey}${DataTestId.Table.TableBasic.td}`}\n                style={column.width ? { width: column.width } : undefined}\n            >\n                {renderCellContent(cellNode, cellType)}\n            </td>\n        );\n    };\n\n    return (\n        <tr\n            className={classNameTr}\n            onClick={onClickRow ? () => onClickRow(rowKey) : undefined}\n            {...(ariaAttributes && getAriaHTMLAttributes(ariaAttributes))}\n            {...(dataAttributes && getDataHTMLAttributes(dataAttributes))}\n        >\n            {columns.map((column) =>\n                // Ячейка рендерится, только если в данных строки есть соответствующий ключ.\n                Object.keys(rowData).includes(column.fieldKey)\n                    ? renderTd(column, rowData[column.fieldKey], rowLayout?.[column.fieldKey])\n                    : null,\n            )}\n        </tr>\n    );\n};\n\nTableBasicRow.displayName = \"TableBasicRow\";\n"],"names":[],"mappings":";;;;;;;;;AA+BA,MAAM,oBAAoB,CAAC,UAA2B,aAAwB;AAC1E,MAAI,CAAC,UAAU;AACX,+BACK,MAAA,EAAK,MAAM,UAAU,IAAI,KAAI,OAAM,UAAA,OAEpC;AAAA,EAER;AAEA,MAAI,aAAa,UAAU,YAAY,aAAa,UAAU,YAAY;AACtE,WAAO;AAAA,EACX;AAEA,6BACK,MAAA,EAAK,MAAM,UAAU,IAAI,KAAI,OACzB,UAAA,UACL;AAER;AAGO,MAAM,gBAAgB,CAAC,EAAE,SAAS,MAAM,iBAAsC;AACjF,QAAM,EAAE,QAAQ,SAAS,WAAW,gBAAgB,gBAAgB,WAAW,UAAU;AAEzF,QAAM,cAAc,KAAK,EAAE,CAAC,OAAO,QAAQ,GAAG,UAAU,UAAU;AAClE,QAAM,aAAa,iDAAiB;AAEpC,QAAM,WAAW,CAAC,QAA2B,OAAwB,cAAuC;AAExG,QAAI,OAAO,QAAQ;AACf,aAAO;AAAA,IACX;AAEA,UAAM,WAA4B,OAAO,aAAa,OAAO,WAAW,KAAK,IAAI;AACjF,UAAM,WAAW,OAAO,YAAY,UAAU;AAE9C,UAAM,gBACF,OAAO,kBAAkB,aAAa,UAAU,OAAO,eAAe,WAAW,eAAe;AACpG,UAAM,aAAa;AAAA,MACf,uBAAuB,QAAQ;AAAA,MAC/B,8BAA8B,OAAO,eAAe;AAAA,MACpD,4BAA4B,aAAa;AAAA,IAAA;AAG7C,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAW;AAAA,QACV,GAAG;AAAA,QACJ,gBAAc,cAAc,GAAG,UAAU,KAAK,OAAO,QAAQ,GAAG,WAAW,MAAM,WAAW,EAAE;AAAA,QAC9F,OAAO,OAAO,QAAQ,EAAE,OAAO,OAAO,UAAU;AAAA,QAE/C,UAAA,kBAAkB,UAAU,QAAQ;AAAA,MAAA;AAAA,MANhC,OAAO;AAAA,IAAA;AAAA,EASxB;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,MACX,SAAS,aAAa,MAAM,WAAW,MAAM,IAAI;AAAA,MAChD,GAAI,kBAAkB,sBAAsB,cAAc;AAAA,MAC1D,GAAI,kBAAkB,sBAAsB,cAAc;AAAA,MAE1D,UAAA,QAAQ;AAAA,QAAI,CAAC;AAAA;AAAA,UAEV,OAAO,KAAK,OAAO,EAAE,SAAS,OAAO,QAAQ,IACvC,SAAS,QAAQ,QAAQ,OAAO,QAAQ,GAAG,uCAAY,OAAO,SAAS,IACvE;AAAA;AAAA,MAAA;AAAA,IACV;AAAA,EAAA;AAGZ;AAEA,cAAc,cAAc;"}

package/components/Table/TableBasicSettings/TableBasicSettings.js

@@ -7,8 +7,8 @@ import { ColumnSettings } from "./components/ColumnSettings.js";
 import { TableBasicSettingsFooter } from "./components/TableBasicSettingsFooter.js";
 import { TableBasicSettingsHeader } from "./components/TableBasicSettingsHeader.js";
 import { Link } from "../../Link/Link.js";
-const tableSettingsLink = "tableSettingsLink__a951189d";
-const tableSettingsDropdown = "tableSettingsDropdown__17d52501";
+const tableSettingsLink = "tableSettingsLink__3a5427a8";
+const tableSettingsDropdown = "tableSettingsDropdown__7e5b3fa1";
 const styles = {
   tableSettingsLink,
   tableSettingsDropdown

package/components/Table/TableBasicSettings/components/ColumnSettingsSortableListItemTarget.js

@@ -3,8 +3,8 @@ import React__default from "react";
 import { ListSortableItemTarget } from "../../../List/components/ListSortableItemTarget.js";
 import { ListSortableItemControls } from "../../../List/components/ListSortableItemControls.js";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
-const columnSettingsSortableListItemTarget = "columnSettingsSortableListItemTarget__f1588e01";
-const dragging = "dragging__1424776f";
+const columnSettingsSortableListItemTarget = "columnSettingsSortableListItemTarget__6f5e611f";
+const dragging = "dragging__67b40f12";
 const styles = {
   columnSettingsSortableListItemTarget,
   dragging

package/components/Table/TableBasicSettings/components/ColumnSettingsStaticListItem.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
 import { ListItem } from "../../../List/components/ListItem.js";
-const columnSettingsStaticListItem = "columnSettingsStaticListItem__05d6902d";
+const columnSettingsStaticListItem = "columnSettingsStaticListItem__d425fe5b";
 const styles = {
   columnSettingsStaticListItem
 };

package/components/Table/TableBasicSettings/components/TableBasicSettingsBody.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
-const tableBasicSettingsBody = "tableBasicSettingsBody__21e4cb66";
+const tableBasicSettingsBody = "tableBasicSettingsBody__5e7c0486";
 const styles = {
   tableBasicSettingsBody
 };

package/components/Table/TableBasicSettings/components/TableBasicSettingsFooter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
-const tableBasicSettingsFooter = "tableBasicSettingsFooter__62fab6d0";
+const tableBasicSettingsFooter = "tableBasicSettingsFooter__f14cb154";
 const styles = {
   tableBasicSettingsFooter
 };

package/components/Table/TableBasicSettings/components/TableBasicSettingsHeader.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
 import { Text } from "../../../Typography/Text.js";
 import { EFontWeightText, ETextSize } from "../../../Typography/enums.js";
-const tableBasicSettingsHeader = "tableBasicSettingsHeader__7ee2eb68";
+const tableBasicSettingsHeader = "tableBasicSettingsHeader__b36bfd76";
 const styles = {
   tableBasicSettingsHeader
 };

package/components/Table/TableFooter/TableFooter.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
-import { s as styles } from "../../../chunks/TableFooter.module-BNzWbmoH.js";
+import { s as styles } from "../../../chunks/TableFooter.module-DRlxkZoa.js";
 import { FooterDescription } from "../../Footer/components/FooterDescription.js";
 import { FooterDescriptionControls } from "../../Footer/components/FooterDescriptionControls.js";
 import { TableFooterSummary } from "./components/TableFooterSummary.js";

package/components/Table/TableFooter/components/TableFooterSummary.js

@@ -3,7 +3,7 @@ import { FooterDescription } from "../../../Footer/components/FooterDescription.
 import { TableFooterSummaryAmount } from "./TableFooterSummaryAmount.js";
 import { TableFooterSummarySelectedCount } from "./TableFooterSummarySelectedCount.js";
 import { TableFooterSummarySelectAllButton } from "./TableFooterSummarySelectAllButton.js";
-import { s as styles } from "../../../../chunks/TableFooter.module-BNzWbmoH.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.js";
 const TableFooterSummary = Object.assign(
   ({ children, ...htmlDivAttributes }) => {
     return /* @__PURE__ */ jsx(FooterDescription.Content, { ...htmlDivAttributes, children: /* @__PURE__ */ jsx("div", { className: styles.tableFooterSummary, children }) });

package/components/Table/TableFooter/components/TableFooterSummaryAmount.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../../chunks/TableFooter.module-BNzWbmoH.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.js";
 import { Amount } from "../../../Amount/Amount.js";
 import { Text } from "../../../Typography/Text.js";
 import { ETextSize } from "../../../Typography/enums.js";

package/components/Table/TableFooter/components/TableFooterSummarySelectAllButton.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../../chunks/TableFooter.module-BNzWbmoH.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.js";
 import { ETextSize } from "../../../Typography/enums.js";
 import { Link } from "../../../Link/Link.js";
 import { Text } from "../../../Typography/Text.js";

package/components/Table/TableFooter/components/TableFooterSummarySelectedCount.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../../chunks/TableFooter.module-BNzWbmoH.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.js";
 const TableFooterSummarySelectedCount = ({ children }) => /* @__PURE__ */ jsx("span", { className: styles.tableFooterSummarySelectedCount, children });
 TableFooterSummarySelectedCount.displayName = "TableFooterSummarySelectedCount";
 export {

package/components/Table/utils.js

@@ -1,5 +1,5 @@
 import "./TableBasic/enums.js";
-import { b, m, a } from "../../chunks/utils-B25Ic6iq.js";
+import { b, m, a } from "../../chunks/utils-BL5AUOKS.js";
 export {
   b as mapCellTypeToClassName,
   m as mapHorizontalAlignToClassName,

package/components/Tabs/Tabs.js

@@ -16,22 +16,32 @@ import { EButtonDotsTheme } from "../Button/enums.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { isKey } from "../../utils/keyboard.js";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-const tabsContent = "tabsContent__de384ab8";
-const tabButtonDropdown = "tabButtonDropdown__f43febba";
-const sm = "sm__457f6d53";
-const md = "md__9cfb9fdb";
-const lg = "lg__82ea6954";
+const tabsContent = "tabsContent__ceca8d6d";
+const tabButtonDropdown = "tabButtonDropdown__5141c364";
+const sm = "sm__f4531671";
+const md = "md__13d3c926";
+const lg = "lg__e6c615e3";
+const selected = "selected__38950414";
+const type1 = "type1__70ec5c57";
+const type2 = "type2__3545bee7";
 const styles = {
   tabsContent,
   tabButtonDropdown,
   sm,
   md,
-  lg
+  lg,
+  selected,
+  type1,
+  type2
 };
 const TYPE_TO_BUTTON_DOTS_THEME_MAP = {
   [ETabsExtendedType.TYPE_1]: EButtonDotsTheme.DOTS_SECONDARY,
   [ETabsExtendedType.TYPE_2]: EButtonDotsTheme.DOTS_SECONDARY_LIGHT
 };
+const TYPE_TO_CLASS_NAME_MAP = {
+  [ETabsExtendedType.TYPE_1]: styles.type1,
+  [ETabsExtendedType.TYPE_2]: styles.type2
+};
 const Tabs = ({
   buttonDropdownAttributes,
   selectedId,
@@ -48,7 +58,7 @@ const Tabs = ({
   const nextTabRef = useRef(null);
   const getDropdownOptions = ({ dropdownItemsIds, onSelectTab: onSelectTab2 }) => tabs.filter((tab) => dropdownItemsIds.includes(tab.id)).map((tab) => ({ ...tab, onSelect: () => onSelectTab2(tab.id) }));
   const renderTab = (item, index) => {
-    return /* @__PURE__ */ jsx(TabsExtended.Content.Tab, { ...item, children: ({ selected, isFirstInlineTab, isLastInlineTab }) => {
+    return /* @__PURE__ */ jsx(TabsExtended.Content.Tab, { ...item, children: ({ selected: selected2, isFirstInlineTab, isLastInlineTab }) => {
       const tabIndex = availableToFocusTabId === item.id ? 0 : -1;
       const getRef = () => {
         let ref = void 0;
@@ -62,7 +72,7 @@ const Tabs = ({
       return /* @__PURE__ */ jsx(
         TabsExtended.Content.TabButton,
         {
-          selected,
+          selected: selected2,
           tabIndex,
           ref: getRef(),
           size,
@@ -104,7 +114,13 @@ const Tabs = ({
         selected: tabs.filter((tab) => tab.id === selectedId)[0],
         buttonAttributes: {
           ...buttonDropdownAttributes,
-          className: clsx(styles.tabButtonDropdown, styles[size])
+          className: clsx(
+            styles.tabButtonDropdown,
+            styles[size],
+            TYPE_TO_CLASS_NAME_MAP[type],
+            { [styles.selected]: dropdownItemsIds.includes(selectedId) },
+            buttonDropdownAttributes == null ? void 0 : buttonDropdownAttributes.className
+          )
         }
       }
     ) })

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { ETabsExtendedType, TabsExtended } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { ITabsExtendedDropdownWrapperProvideProps } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { ButtonDropdown } from \"@sberbusiness/triplex-next/components/Button\";\nimport { EButtonDotsTheme } from \"@sberbusiness/triplex-next/components/Button\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ITabsExtendedTabProps, ITabsExtendedProps } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport styles from \"./styles/Tabs.module.less\";\nimport clsx from \"clsx\";\n\nexport interface ITabsItem extends Omit<ITabsExtendedTabProps, \"children\" | \"onSelect\"> {\n    label: React.ReactNode;\n    showNotificationIcon?: boolean;\n}\n\nexport interface ITabsProps extends ITabsExtendedProps {\n    /** HTML-атрибуты dropdown-кнопки. */\n    buttonDropdownAttributes?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n    children?: never;\n    /** Обработчик выбора таба. */\n    onSelectTab: (selectedId: string) => void;\n    /** Размер компонента. */\n    size?: EComponentSize;\n    /** Массив табов. */\n    tabs: Array<ITabsItem>;\n}\n\nconst TYPE_TO_BUTTON_DOTS_THEME_MAP: Record<ETabsExtendedType, EButtonDotsTheme> = {\n    [ETabsExtendedType.TYPE_1]: EButtonDotsTheme.DOTS_SECONDARY,\n    [ETabsExtendedType.TYPE_2]: EButtonDotsTheme.DOTS_SECONDARY_LIGHT,\n};\n\n/** Компонент Tabs. */\nexport const Tabs: React.FC<ITabsProps> = ({\n    buttonDropdownAttributes,\n    selectedId,\n    onSelectTab,\n    size = EComponentSize.MD,\n    tabs,\n    type = ETabsExtendedType.TYPE_1,\n    ...props\n}) => {\n    // Id таба с tabIndex = 0;\n    const [availableToFocusTabId, setAvailableToFocusTabId] = useState(selectedId || tabs[0].id);\n    // Id таба, предшествующий табу с tabIndex = 0;\n    const [prevAvailableToFocusTabId, setPrevAvailableToFocusTabId] = useState(\"\");\n    // Id таба, следующего за табом с tabIndex = 0;\n    const [nextAvailableToFocusTabId, setNextAvailableToFocusTabId] = useState(\"\");\n    // Ref таба, предшествующий табу с tabIndex = 0;\n    const prevTabRef = useRef<HTMLButtonElement>(null);\n    // Ref таба, следующего за табом с tabIndex = 0;\n    const nextTabRef = useRef<HTMLButtonElement>(null);\n\n    const getDropdownOptions = ({ dropdownItemsIds, onSelectTab }: ITabsExtendedDropdownWrapperProvideProps) =>\n        tabs\n            .filter((tab) => dropdownItemsIds.includes(tab.id))\n            .map((tab) => ({ ...tab, onSelect: () => onSelectTab(tab.id) }));\n\n    const renderTab = (item: ITabsItem, index: number) => {\n        return (\n            <TabsExtended.Content.Tab key={index} {...item}>\n                {({ selected, isFirstInlineTab, isLastInlineTab }) => {\n                    const tabIndex = availableToFocusTabId === item.id ? 0 : -1;\n\n                    const getRef = () => {\n                        let ref = undefined;\n\n                        if (prevAvailableToFocusTabId === item.id) {\n                            ref = prevTabRef;\n                        } else if (nextAvailableToFocusTabId === item.id) {\n                            ref = nextTabRef;\n                        }\n\n                        return ref;\n                    };\n\n                    return (\n                        <TabsExtended.Content.TabButton\n                            selected={selected}\n                            tabIndex={tabIndex}\n                            /* Установка ref для предыдущего или следующего за фокусируемым табом элемента, */\n                            ref={getRef()}\n                            size={size}\n                            showNotificationIcon={item.showNotificationIcon}\n                            onFocus={() => {\n                                setPrevAvailableToFocusTabId(tabs[index - 1] ? tabs[index - 1].id : \"\");\n                                setNextAvailableToFocusTabId(tabs[index + 1] ? tabs[index + 1].id : \"\");\n                            }}\n                            onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n                                const { key } = event;\n\n                                if (isKey(key, \"ARROW_LEFT\")) {\n                                    // Не первый таб.\n                                    if (!isFirstInlineTab) {\n                                        setAvailableToFocusTabId(tabs[index - 1].id);\n                                        prevTabRef.current?.focus();\n                                    }\n\n                                    // Предотвращение скролла.\n                                    event.preventDefault();\n                                } else if (isKey(key, \"ARROW_RIGHT\")) {\n                                    // Не последний таб в строке.\n                                    if (!isLastInlineTab) {\n                                        setAvailableToFocusTabId(tabs[index + 1].id);\n                                        nextTabRef.current?.focus();\n                                    }\n\n                                    // Предотвращение скролла.\n                                    event.preventDefault();\n                                }\n                            }}\n                        >\n                            {item.label}\n                        </TabsExtended.Content.TabButton>\n                    );\n                }}\n            </TabsExtended.Content.Tab>\n        );\n    };\n\n    return (\n        <TabsExtended {...props} selectedId={selectedId} onSelectTab={onSelectTab} type={type}>\n            <TabsExtended.Content className={styles.tabsContent} size={size}>\n                <TabsExtended.Content.TabsWrapper>{tabs.map(renderTab)}</TabsExtended.Content.TabsWrapper>\n\n                <TabsExtended.Content.DropdownWrapper>\n                    {({ dropdownItemsIds, onSelectTab }) => (\n                        <ButtonDropdown\n                            theme={TYPE_TO_BUTTON_DOTS_THEME_MAP[type]}\n                            size={size}\n                            options={getDropdownOptions({ dropdownItemsIds, onSelectTab })}\n                            selected={tabs.filter((tab) => tab.id === selectedId)[0]}\n                            buttonAttributes={{\n                                ...buttonDropdownAttributes,\n                                className: clsx(styles.tabButtonDropdown, styles[size]),\n                            }}\n                        />\n                    )}\n                </TabsExtended.Content.DropdownWrapper>\n            </TabsExtended.Content>\n        </TabsExtended>\n    );\n};\n"],"names":["onSelectTab"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { ETabsExtendedType, TabsExtended } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { ITabsExtendedDropdownWrapperProvideProps } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { ButtonDropdown } from \"@sberbusiness/triplex-next/components/Button\";\nimport { EButtonDotsTheme } from \"@sberbusiness/triplex-next/components/Button\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ITabsExtendedTabProps, ITabsExtendedProps } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport styles from \"./styles/Tabs.module.less\";\nimport clsx from \"clsx\";\n\nexport interface ITabsItem extends Omit<ITabsExtendedTabProps, \"children\" | \"onSelect\"> {\n    label: React.ReactNode;\n    showNotificationIcon?: boolean;\n}\n\nexport interface ITabsProps extends ITabsExtendedProps {\n    /** HTML-атрибуты dropdown-кнопки. */\n    buttonDropdownAttributes?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n    children?: never;\n    /** Обработчик выбора таба. */\n    onSelectTab: (selectedId: string) => void;\n    /** Размер компонента. */\n    size?: EComponentSize;\n    /** Массив табов. */\n    tabs: Array<ITabsItem>;\n}\n\nconst TYPE_TO_BUTTON_DOTS_THEME_MAP: Record<ETabsExtendedType, EButtonDotsTheme> = {\n    [ETabsExtendedType.TYPE_1]: EButtonDotsTheme.DOTS_SECONDARY,\n    [ETabsExtendedType.TYPE_2]: EButtonDotsTheme.DOTS_SECONDARY_LIGHT,\n};\n\nconst TYPE_TO_CLASS_NAME_MAP: Record<ETabsExtendedType, string> = {\n    [ETabsExtendedType.TYPE_1]: styles.type1,\n    [ETabsExtendedType.TYPE_2]: styles.type2,\n};\n\n/** Компонент Tabs. */\nexport const Tabs: React.FC<ITabsProps> = ({\n    buttonDropdownAttributes,\n    selectedId,\n    onSelectTab,\n    size = EComponentSize.MD,\n    tabs,\n    type = ETabsExtendedType.TYPE_1,\n    ...props\n}) => {\n    // Id таба с tabIndex = 0;\n    const [availableToFocusTabId, setAvailableToFocusTabId] = useState(selectedId || tabs[0].id);\n    // Id таба, предшествующий табу с tabIndex = 0;\n    const [prevAvailableToFocusTabId, setPrevAvailableToFocusTabId] = useState(\"\");\n    // Id таба, следующего за табом с tabIndex = 0;\n    const [nextAvailableToFocusTabId, setNextAvailableToFocusTabId] = useState(\"\");\n    // Ref таба, предшествующий табу с tabIndex = 0;\n    const prevTabRef = useRef<HTMLButtonElement>(null);\n    // Ref таба, следующего за табом с tabIndex = 0;\n    const nextTabRef = useRef<HTMLButtonElement>(null);\n\n    const getDropdownOptions = ({ dropdownItemsIds, onSelectTab }: ITabsExtendedDropdownWrapperProvideProps) =>\n        tabs\n            .filter((tab) => dropdownItemsIds.includes(tab.id))\n            .map((tab) => ({ ...tab, onSelect: () => onSelectTab(tab.id) }));\n\n    const renderTab = (item: ITabsItem, index: number) => {\n        return (\n            <TabsExtended.Content.Tab key={index} {...item}>\n                {({ selected, isFirstInlineTab, isLastInlineTab }) => {\n                    const tabIndex = availableToFocusTabId === item.id ? 0 : -1;\n\n                    const getRef = () => {\n                        let ref = undefined;\n\n                        if (prevAvailableToFocusTabId === item.id) {\n                            ref = prevTabRef;\n                        } else if (nextAvailableToFocusTabId === item.id) {\n                            ref = nextTabRef;\n                        }\n\n                        return ref;\n                    };\n\n                    return (\n                        <TabsExtended.Content.TabButton\n                            selected={selected}\n                            tabIndex={tabIndex}\n                            /* Установка ref для предыдущего или следующего за фокусируемым табом элемента, */\n                            ref={getRef()}\n                            size={size}\n                            showNotificationIcon={item.showNotificationIcon}\n                            onFocus={() => {\n                                setPrevAvailableToFocusTabId(tabs[index - 1] ? tabs[index - 1].id : \"\");\n                                setNextAvailableToFocusTabId(tabs[index + 1] ? tabs[index + 1].id : \"\");\n                            }}\n                            onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n                                const { key } = event;\n\n                                if (isKey(key, \"ARROW_LEFT\")) {\n                                    // Не первый таб.\n                                    if (!isFirstInlineTab) {\n                                        setAvailableToFocusTabId(tabs[index - 1].id);\n                                        prevTabRef.current?.focus();\n                                    }\n\n                                    // Предотвращение скролла.\n                                    event.preventDefault();\n                                } else if (isKey(key, \"ARROW_RIGHT\")) {\n                                    // Не последний таб в строке.\n                                    if (!isLastInlineTab) {\n                                        setAvailableToFocusTabId(tabs[index + 1].id);\n                                        nextTabRef.current?.focus();\n                                    }\n\n                                    // Предотвращение скролла.\n                                    event.preventDefault();\n                                }\n                            }}\n                        >\n                            {item.label}\n                        </TabsExtended.Content.TabButton>\n                    );\n                }}\n            </TabsExtended.Content.Tab>\n        );\n    };\n\n    return (\n        <TabsExtended {...props} selectedId={selectedId} onSelectTab={onSelectTab} type={type}>\n            <TabsExtended.Content className={styles.tabsContent} size={size}>\n                <TabsExtended.Content.TabsWrapper>{tabs.map(renderTab)}</TabsExtended.Content.TabsWrapper>\n\n                <TabsExtended.Content.DropdownWrapper>\n                    {({ dropdownItemsIds, onSelectTab }) => (\n                        <ButtonDropdown\n                            theme={TYPE_TO_BUTTON_DOTS_THEME_MAP[type]}\n                            size={size}\n                            options={getDropdownOptions({ dropdownItemsIds, onSelectTab })}\n                            selected={tabs.filter((tab) => tab.id === selectedId)[0]}\n                            buttonAttributes={{\n                                ...buttonDropdownAttributes,\n                                className: clsx(\n                                    styles.tabButtonDropdown,\n                                    styles[size],\n                                    TYPE_TO_CLASS_NAME_MAP[type],\n                                    { [styles.selected]: dropdownItemsIds.includes(selectedId) },\n                                    buttonDropdownAttributes?.className,\n                                ),\n                            }}\n                        />\n                    )}\n                </TabsExtended.Content.DropdownWrapper>\n            </TabsExtended.Content>\n        </TabsExtended>\n    );\n};\n"],"names":["onSelectTab","selected"],"mappings":"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"}

package/components/TabsExtended/TabsExtended.js

@@ -4,8 +4,8 @@ import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { TabsExtendedContext } from "./TabsExtendedContext.js";
 import { TabsExtendedContent } from "./components/TabsExtendedContent.js";
 import { ETabsExtendedType } from "./enums.js";
-import { T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/utils-Cc9JBJpf.js";
-import { s as styles } from "../../chunks/TabsExtended.module-X9j6lOjE.js";
+import { T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/utils-CTCsYynd.js";
+import { s as styles } from "../../chunks/TabsExtended.module-DJH-YNzW.js";
 import "./components/TabsExtendedDropdownWrapper.js";
 import "./components/TabsExtendedTab.js";
 import "./components/TabsExtendedTabButton.js";

package/components/TabsExtended/components/TabsExtendedContent.js

@@ -7,7 +7,7 @@ import { TabsExtendedTabButton } from "./TabsExtendedTabButton.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { TabsExtendedDropdownWrapper } from "./TabsExtendedDropdownWrapper.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-X9j6lOjE.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-DJH-YNzW.js";
 import "./TabsExtendedTabContext.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const TabsExtendedContent = Object.assign(

package/components/TabsExtended/components/TabsExtendedDropdownWrapper.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default, { useContext, useCallback } from "react";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-X9j6lOjE.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-DJH-YNzW.js";
 const TabsExtendedDropdownWrapper = React__default.forwardRef(
   ({ children, className, ...htmlDivAttributes }, ref) => {
     const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);

package/components/TabsExtended/components/TabsExtendedTab.js

@@ -3,7 +3,7 @@ import React__default, { useContext } from "react";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-X9j6lOjE.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-DJH-YNzW.js";
 const TabsExtendedTab = React__default.forwardRef(
   ({ children, id, className, onClick, ...htmlSpanAttributes }, ref) => {
     const { dropdownItemsIds, inlineItemsIds, selectedId, onSelectTab } = useContext(TabsExtendedContext);

package/components/TabsExtended/components/TabsExtendedTabButton.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useContext } from "react";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
-import { s as styles, T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP, a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP } from "../../../chunks/utils-Cc9JBJpf.js";
+import { s as styles, T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP, a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP } from "../../../chunks/utils-CTCsYynd.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";