@snack-uikit/table 0.20.5 → 0.20.7

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.20.7 (2024-08-02)
+
+
+### Bug Fixes
+
+* **PDS-227:** fix status column ([b906c30](https://github.com/cloud-ru-tech/snack-uikit/commit/b906c30d574a8cec4b70cfc6b309a2443a41a019))
+
+
+
+
+
+## 0.20.6 (2024-07-31)
+
+
+### Bug Fixes
+
+* **FF-3788:** updated typescript to v5 ([89e3338](https://github.com/cloud-ru-tech/snack-uikit/commit/89e3338a3ef4df24e4c20d9a9c8cd16e7934ba63))
+
+
+
+
+
 ## 0.20.5 (2024-07-29)
 
 ### Only dependencies have been changed

package/README.md

@@ -154,9 +154,11 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
 | accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
-| enableSorting | `boolean` | - | Включение/выключение сортировки |
+| enableSorting | `boolean` | true | Включение/выключение сортировки |
 | renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
 | size | `number` | - | Размер ячейки |
+| minSize | `number` | - |  |
+| maxSize | `number` | - |  |
 | header | `ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string))` | - | Заголовок колонки |
 | enableResizing | `boolean` | - | Включение/выключение ресайза колонки |
 ## Table.getRowActionsColumnDef
@@ -172,7 +174,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
-| loading | `boolean` | - | Состояние загрузки |
 | keepPinnedRows | `boolean` | false | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
 | copyPinnedRows | `boolean` | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
@@ -182,6 +183,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
+| loading | `boolean` | - | Состояние загрузки |
 | onRefresh | `() => void` | - | Колбек обновления данных |
 | onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
@@ -224,9 +226,11 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
 | accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
-| enableSorting | `boolean` | - | Включение/выключение сортировки |
+| enableSorting | `boolean` | true | Включение/выключение сортировки |
 | renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
 | size | `number` | - | Размер ячейки |
+| minSize | `number` | - |  |
+| maxSize | `number` | - |  |
 | header | `ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string))` | - | Заголовок колонки |
 | enableResizing | `boolean` | - | Включение/выключение ресайза колонки |
 ## exportToCSV

package/dist/components/ServerTable/ServerTable.d.ts

@@ -2,17 +2,6 @@ import { ServerTableProps } from '../types';
 export declare function ServerTable<TData extends object>({ items, total, limit, offset, onChangePage, search: searchProp, pagination, columnFilters, manualSorting, manualPagination, manualFiltering, ...rest }: ServerTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ServerTable {
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
-    var statusAppearances: {
-        readonly Primary: "primary";
-        readonly Neutral: "neutral";
-        readonly Red: "red";
-        readonly Orange: "orange";
-        readonly Yellow: "yellow";
-        readonly Green: "green";
-        readonly Blue: "blue";
-        readonly Violet: "violet";
-        readonly Pink: "pink";
-        readonly Loading: "loading";
-    };
+    var statusAppearances: Record<string, string>;
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
 }

package/dist/components/ServerTable/utils.d.ts

@@ -1,2 +1 @@
-/// <reference types="lodash" />
 export declare const onSearchDebounced: import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;

package/dist/components/Table/Table.d.ts

@@ -3,17 +3,6 @@ import { TableProps } from '../types';
 export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
-    var statusAppearances: {
-        readonly Primary: "primary";
-        readonly Neutral: "neutral";
-        readonly Red: "red";
-        readonly Orange: "orange";
-        readonly Yellow: "yellow";
-        readonly Green: "green";
-        readonly Blue: "blue";
-        readonly Violet: "violet";
-        readonly Pink: "pink";
-        readonly Loading: "loading";
-    };
+    var statusAppearances: Record<string, string>;
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
 }

package/dist/components/Table/Table.js

@@ -143,22 +143,29 @@ export function Table(_a) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
-            const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
-            const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
-            const prevSize = (_a = columnSizeVarsRef.current) === null || _a === void 0 ? void 0 : _a[sizeKey];
-            let size = initSize;
-            if (header.column.getCanResize()) {
-                const currentSize = header.getSize();
-                const colDefSize = header.column.columnDef.size;
-                size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-                if (prevSize === '100%' && currentSize !== colDefSize) {
-                    const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-                    table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
-                    size = `${realSize}px`;
+            if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
+                const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
+                colSizes[sizeKey] = indicatorSize;
+                colSizes[flexKey] = '100%';
+            }
+            else {
+                const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
+                const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+                const prevSize = (_a = columnSizeVarsRef.current) === null || _a === void 0 ? void 0 : _a[sizeKey];
+                let size = initSize;
+                if (header.column.getCanResize()) {
+                    const currentSize = header.getSize();
+                    const colDefSize = header.column.columnDef.size;
+                    size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+                    if (prevSize === '100%' && currentSize !== colDefSize) {
+                        const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
+                        table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
+                        size = `${realSize}px`;
+                    }
                 }
+                colSizes[sizeKey] = size;
+                colSizes[flexKey] = size === '100%' ? 'unset' : '0';
             }
-            colSizes[sizeKey] = size;
-            colSizes[flexKey] = size === '100%' ? 'unset' : '0';
         }
         return colSizes;
         /*

package/dist/helperComponents/Cells/Cell.d.ts

@@ -10,9 +10,9 @@ export type CellProps = {
 } & DataAttributes;
 export declare const Cell: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
-    onClick?: MouseEventHandler | undefined;
-    onMouseUp?: MouseEventHandler | undefined;
-    className?: string | undefined;
-    style?: CSSProperties | undefined;
-    role?: "cell" | "columnheader" | undefined;
+    onClick?: MouseEventHandler;
+    onMouseUp?: MouseEventHandler;
+    className?: string;
+    style?: CSSProperties;
+    role?: "cell" | "columnheader";
 } & DataAttributes & import("react").RefAttributes<HTMLDivElement>>;

package/dist/helperComponents/Cells/StatusCell/StatusCell.d.ts

@@ -15,6 +15,8 @@ type BaseStatusColumnDef = {
 type StatusColumnDef = BaseStatusColumnDef & {
     renderDescription?: never;
     size?: never;
+    minSize?: never;
+    maxSize?: never;
     header?: never;
     enableResizing?: never;
 };
@@ -23,6 +25,8 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
     renderDescription(cellValue: string): string;
     /** Размер ячейки */
     size: number;
+    minSize?: number;
+    maxSize?: number;
     /** Заголовок колонки */
     header?: ColumnDefinition<TData>['header'];
     /** Включение/выключение ресайза колонки */
@@ -30,4 +34,4 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
 };
 export type StatusColumnDefinitionProps<TData> = StatusColumnDef | StatusColumnDefWithDescription<TData>;
 /** Вспомогательная функция для создания ячейки со статусом */
-export declare function getStatusColumnDef<TData>({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, enableResizing, }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData>;
+export declare function getStatusColumnDef<TData>({ header, accessorKey, mapStatusToAppearance, renderDescription, size, maxSize, minSize, enableSorting, enableResizing, }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData>;

package/dist/helperComponents/Cells/StatusCell/StatusCell.js

@@ -10,7 +10,7 @@ function StatusCell({ appearance, label }) {
     return (_jsxs("div", { className: styles.statusCell, "data-no-label": !label || undefined, children: [_jsx("div", { "data-appearance": isLoading ? undefined : appearance, className: styles.statusCellIndicator, "data-loading": isLoading || undefined, "data-test-id": TEST_IDS.statusIndicator }), label && (_jsx("div", { className: styles.statusCellLabel, "data-test-id": TEST_IDS.statusLabel, children: _jsx(Typography.LightLabelS, { children: _jsx(TruncateString, { text: label }) }) }))] }));
 }
 /** Вспомогательная функция для создания ячейки со статусом */
-export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, enableResizing, }) {
+export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, maxSize, minSize, enableSorting = true, enableResizing, }) {
     const hasDescription = Boolean(renderDescription);
     return {
         id: 'snack_predefined_statusColumn',
@@ -19,7 +19,8 @@ export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance,
         noHeaderCellPadding: !hasDescription,
         noHeaderCellBorderOffset: hasDescription,
         size: hasDescription ? size : MIN_STATUS_CELL_SIZE,
-        minSize: MIN_STATUS_CELL_SIZE,
+        minSize: enableSorting || hasDescription ? Math.max(MIN_STATUS_CELL_SIZE, minSize || 0) : 1,
+        maxSize: maxSize,
         meta: {
             skipOnExport: true,
         },

package/dist/helperComponents/Cells/StatusCell/constants.d.ts

@@ -1,13 +1,2 @@
-export declare const STATUS_APPEARANCE: {
-    readonly Primary: "primary";
-    readonly Neutral: "neutral";
-    readonly Red: "red";
-    readonly Orange: "orange";
-    readonly Yellow: "yellow";
-    readonly Green: "green";
-    readonly Blue: "blue";
-    readonly Violet: "violet";
-    readonly Pink: "pink";
-    readonly Loading: "loading";
-};
+export declare const STATUS_APPEARANCE: Record<string, string>;
 export declare const MIN_STATUS_CELL_SIZE = 16;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.20.5",
+  "version": "0.20.7",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "d1b1ac720c6ea300a6c8cc3b4765609899200af7"
+  "gitHead": "f60fb892054936167d2744544ceed8ae0c988d67"
 }

package/src/components/Table/Table.tsx

@@ -225,29 +225,38 @@ export function Table<TData extends object>({
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const { sizeKey, flexKey } = getColumnStyleVars(header.id);
+
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
-      const originalColumnDefSize = originalColDef?.size;
-      const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
-      const prevSize = columnSizeVarsRef.current?.[sizeKey];
 
-      let size = initSize;
+      if (header.id === 'snack_predefined_statusColumn' && !originalColDef?.header && !originalColDef?.enableSorting) {
+        const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
+
+        colSizes[sizeKey] = indicatorSize;
+        colSizes[flexKey] = '100%';
+      } else {
+        const originalColumnDefSize = originalColDef?.size;
+        const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+        const prevSize = columnSizeVarsRef.current?.[sizeKey];
+
+        let size = initSize;
 
-      if (header.column.getCanResize()) {
-        const currentSize = header.getSize();
-        const colDefSize = header.column.columnDef.size;
+        if (header.column.getCanResize()) {
+          const currentSize = header.getSize();
+          const colDefSize = header.column.columnDef.size;
 
-        size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
 
-        if (prevSize === '100%' && currentSize !== colDefSize) {
-          const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-          table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
+          if (prevSize === '100%' && currentSize !== colDefSize) {
+            const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
+            table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
 
-          size = `${realSize}px`;
+            size = `${realSize}px`;
+          }
         }
-      }
 
-      colSizes[sizeKey] = size;
-      colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        colSizes[sizeKey] = size;
+        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+      }
     }
 
     return colSizes;

package/src/helperComponents/Cells/StatusCell/StatusCell.tsx

@@ -30,6 +30,8 @@ type BaseStatusColumnDef = {
 type StatusColumnDef = BaseStatusColumnDef & {
   renderDescription?: never;
   size?: never;
+  minSize?: never;
+  maxSize?: never;
   header?: never;
   enableResizing?: never;
 };
@@ -39,6 +41,8 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
   renderDescription(cellValue: string): string;
   /** Размер ячейки */
   size: number;
+  minSize?: number;
+  maxSize?: number;
   /** Заголовок колонки */
   header?: ColumnDefinition<TData>['header'];
   /** Включение/выключение ресайза колонки */
@@ -77,7 +81,9 @@ export function getStatusColumnDef<TData>({
   mapStatusToAppearance,
   renderDescription,
   size,
-  enableSorting,
+  maxSize,
+  minSize,
+  enableSorting = true,
   enableResizing,
 }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData> {
   const hasDescription = Boolean(renderDescription);
@@ -89,7 +95,8 @@ export function getStatusColumnDef<TData>({
     noHeaderCellPadding: !hasDescription,
     noHeaderCellBorderOffset: hasDescription,
     size: hasDescription ? (size as number) : MIN_STATUS_CELL_SIZE,
-    minSize: MIN_STATUS_CELL_SIZE,
+    minSize: enableSorting || hasDescription ? Math.max(MIN_STATUS_CELL_SIZE, minSize || 0) : 1,
+    maxSize: maxSize,
     meta: {
       skipOnExport: true,
     },

package/src/helperComponents/Cells/StatusCell/constants.ts

@@ -1,4 +1,4 @@
-export const STATUS_APPEARANCE = {
+export const STATUS_APPEARANCE: Record<string, string> = {
   Primary: 'primary',
   Neutral: 'neutral',
   Red: 'red',