@snack-uikit/table 0.37.30 → 0.37.32

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.37.32 (2026-02-03)</small>
+
+* feat(PDS-3472): add HideToggler appearance mode for disabled rows ([802be3d](https://github.com/cloud-ru-tech/snack-uikit/commit/802be3d))
+
+
+
+
+
+## <small>0.37.31 (2026-01-19)</small>
+
+* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
+* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
+
+
+
+
+
 ## <small>0.37.30 (2026-01-19)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -96,6 +96,10 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
     enable: true, // false выключает выбор всех строк (состояние disabled)
     // или можно передать функцию для вычисления
     // enable: row => !['Pending', 'Loading'].includes(row.original.status),
+
+
+    // appearance: RowAppearance.Disabled, // по умолчанию: серый фон, скрыты actions
+    // appearance: RowAppearance.HideToggler, // обычный фон, видны actions, скрыт только чекбокс
     onChange: handleRowSelection,
   }}
 />

package/dist/cjs/components/Table/hooks/useFilters/useFilters.d.ts

@@ -8,7 +8,6 @@ export declare function useFilters<TData extends object, TFilters extends Record
         onChange: (filter: TFilters) => void;
         visibleFilters: string[];
         onVisibleFiltersChange: import("@tanstack/react-table").OnChangeFn<string[]>;
-        className?: string | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -64,6 +63,7 @@ export declare function useFilters<TData extends object, TFilters extends Record
         "aria-valuetext"?: string | undefined | undefined;
         defaultValue?: Partial<TFilters> | undefined;
         filters: import("@snack-uikit/chips").ChipChoiceRowFilter[];
+        className?: string | undefined;
         showClearButton?: boolean | undefined;
         showAddButton?: boolean | undefined;
         open: boolean;

package/dist/cjs/helperComponents/Cells/RowActionsCell/RowActionsCell.js

@@ -14,6 +14,7 @@ const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
 const icons_1 = require("@snack-uikit/icons");
 const list_1 = require("@snack-uikit/list");
+const types_1 = require("../../../components/types");
 const constants_1 = require("../../../constants");
 const contexts_1 = require("../../contexts");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -24,7 +25,8 @@ function RowActionsCell(_ref) {
   } = _ref;
   const {
     dropListOpened,
-    setDropListOpen
+    setDropListOpen,
+    disabledRowAppearance
   } = (0, contexts_1.useRowContext)();
   const patchItem = (0, react_1.useCallback)((item, cb) => {
     if ((0, list_1.isBaseItemProps)(item)) {
@@ -40,7 +42,8 @@ function RowActionsCell(_ref) {
       items: item.items.map(i => patchItem(i, cb))
     });
   }, []);
-  const disabled = !row.getCanSelect();
+  const canSelect = row.getCanSelect();
+  const shouldShowActions = canSelect || disabledRowAppearance !== types_1.RowAppearance.Disabled;
   const stopPropagationClick = e => {
     e.stopPropagation();
   };
@@ -51,7 +54,7 @@ function RowActionsCell(_ref) {
       onClick: stopPropagationClick,
       className: styles_module_scss_1.default.rowActionsCellWrap,
       "data-open": dropListOpened || undefined,
-      children: !disabled && Boolean(actions.length) && (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+      children: shouldShowActions && Boolean(actions.length) && (0, jsx_runtime_1.jsx)(list_1.Droplist, {
         trigger: 'click',
         open: dropListOpened,
         onOpenChange: setDropListOpen,

package/dist/cjs/helperComponents/Rows/BodyRow.js

@@ -40,7 +40,7 @@ function BodyRow(_ref) {
     getRowBackgroundColor
   } = (0, contexts_1.useTableContext)();
   const handleRowClick = e => {
-    if (disabled) return;
+    if (disabled && disabledRowAppearance === components_1.RowAppearance.Disabled) return;
     onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(e, {
       id: row.id,
       data: row.original,
@@ -53,7 +53,8 @@ function BodyRow(_ref) {
   return (0, jsx_runtime_1.jsx)(contexts_1.RowContext.Provider, {
     value: {
       dropListOpened,
-      setDropListOpen
+      setDropListOpen,
+      disabledRowAppearance
     },
     children: (0, jsx_runtime_1.jsxs)(Row_1.Row, {
       onClick: handleRowClick,

package/dist/cjs/helperComponents/contexts.d.ts

@@ -1,10 +1,12 @@
 import { Table } from '@tanstack/react-table';
 import { Dispatch, SetStateAction } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
+import { RowAppearance } from '../components/types';
 import { TABLE_ROW_COLOR } from '../constants';
 type RowContext = {
     dropListOpened: boolean;
     setDropListOpen: Dispatch<SetStateAction<boolean>>;
+    disabledRowAppearance: RowAppearance;
 };
 export declare const RowContext: import("react").Context<RowContext>;
 export declare const useRowContext: () => RowContext;

package/dist/cjs/helperComponents/contexts.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTableContext = exports.TableContext = exports.useRowContext = exports.RowContext = void 0;
 const react_1 = require("react");
+const types_1 = require("../components/types");
 exports.RowContext = (0, react_1.createContext)({
   dropListOpened: false,
-  setDropListOpen() {}
+  setDropListOpen() {},
+  disabledRowAppearance: types_1.RowAppearance.Disabled
 });
 const useRowContext = () => (0, react_1.useContext)(exports.RowContext);
 exports.useRowContext = useRowContext;

package/dist/esm/components/Table/hooks/useFilters/useFilters.d.ts

@@ -8,7 +8,6 @@ export declare function useFilters<TData extends object, TFilters extends Record
         onChange: (filter: TFilters) => void;
         visibleFilters: string[];
         onVisibleFiltersChange: import("@tanstack/react-table").OnChangeFn<string[]>;
-        className?: string | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -64,6 +63,7 @@ export declare function useFilters<TData extends object, TFilters extends Record
         "aria-valuetext"?: string | undefined | undefined;
         defaultValue?: Partial<TFilters> | undefined;
         filters: import("@snack-uikit/chips").ChipChoiceRowFilter[];
+        className?: string | undefined;
         showClearButton?: boolean | undefined;
         showAddButton?: boolean | undefined;
         open: boolean;

package/dist/esm/helperComponents/Cells/RowActionsCell/RowActionsCell.js

@@ -3,11 +3,12 @@ import { useCallback, useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { MoreSVG } from '@snack-uikit/icons';
 import { Droplist, isBaseItemProps } from '@snack-uikit/list';
+import { RowAppearance } from '../../../components/types';
 import { COLUMN_PIN_POSITION, DefaultColumns, TEST_IDS } from '../../../constants';
 import { useRowContext } from '../../contexts';
 import styles from './styles.module.css';
 function RowActionsCell({ row, actions }) {
-    const { dropListOpened, setDropListOpen } = useRowContext();
+    const { dropListOpened, setDropListOpen, disabledRowAppearance } = useRowContext();
     const patchItem = useCallback((item, cb) => {
         if (isBaseItemProps(item)) {
             return Object.assign(Object.assign({}, item), { onClick(e) {
@@ -18,14 +19,15 @@ function RowActionsCell({ row, actions }) {
         }
         return Object.assign(Object.assign({}, item), { items: item.items.map(i => patchItem(i, cb)) });
     }, []);
-    const disabled = !row.getCanSelect();
+    const canSelect = row.getCanSelect();
+    const shouldShowActions = canSelect || disabledRowAppearance !== RowAppearance.Disabled;
     const stopPropagationClick = (e) => {
         e.stopPropagation();
     };
     const patchedItems = useMemo(() => actions.map(item => patchItem(item, () => setDropListOpen(false))), [actions, patchItem, setDropListOpen]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": dropListOpened || undefined, children: !disabled && Boolean(actions.length) && (_jsx(Droplist, { trigger: 'click', open: dropListOpened, onOpenChange: setDropListOpen, placement: 'bottom-end', size: 'm', "data-test-id": TEST_IDS.rowActions.droplist, items: patchedItems, children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger }) })) }));
+    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": dropListOpened || undefined, children: shouldShowActions && Boolean(actions.length) && (_jsx(Droplist, { trigger: 'click', open: dropListOpened, onOpenChange: setDropListOpen, placement: 'bottom-end', size: 'm', "data-test-id": TEST_IDS.rowActions.droplist, items: patchedItems, children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger }) })) }));
 }
 /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
 export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {

package/dist/esm/helperComponents/Rows/BodyRow.js

@@ -15,7 +15,7 @@ export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableCol
     const disabled = !row.getCanSelect();
     const { getRowBackgroundColor } = useTableContext();
     const handleRowClick = (e) => {
-        if (disabled)
+        if (disabled && disabledRowAppearance === RowAppearance.Disabled)
             return;
         onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(e, {
             id: row.id,
@@ -26,5 +26,5 @@ export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableCol
     };
     const isSelected = row.getIsSelected() || (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded());
     const rowBackgroundColor = getRowBackgroundColor === null || getRowBackgroundColor === void 0 ? void 0 : getRowBackgroundColor(row.original);
-    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-row-appearance": disabled ? disabledRowAppearance : undefined, "data-selected": isSelected || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, "data-row-bg-appearance": rowBackgroundColor && !disabled && !isSelected ? rowBackgroundColor : undefined, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id))) }))] }) }));
+    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen, disabledRowAppearance }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-row-appearance": disabled ? disabledRowAppearance : undefined, "data-selected": isSelected || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, "data-row-bg-appearance": rowBackgroundColor && !disabled && !isSelected ? rowBackgroundColor : undefined, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id))) }))] }) }));
 }

package/dist/esm/helperComponents/contexts.d.ts

@@ -1,10 +1,12 @@
 import { Table } from '@tanstack/react-table';
 import { Dispatch, SetStateAction } from 'react';
 import { ValueOf } from '@snack-uikit/utils';
+import { RowAppearance } from '../components/types';
 import { TABLE_ROW_COLOR } from '../constants';
 type RowContext = {
     dropListOpened: boolean;
     setDropListOpen: Dispatch<SetStateAction<boolean>>;
+    disabledRowAppearance: RowAppearance;
 };
 export declare const RowContext: import("react").Context<RowContext>;
 export declare const useRowContext: () => RowContext;

package/dist/esm/helperComponents/contexts.js

@@ -1,7 +1,9 @@
 import { createContext, useContext } from 'react';
+import { RowAppearance } from '../components/types';
 export const RowContext = createContext({
     dropListOpened: false,
     setDropListOpen() { },
+    disabledRowAppearance: RowAppearance.Disabled,
 });
 export const useRowContext = () => useContext(RowContext);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.30",
+  "version": "0.37.32",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,19 +41,19 @@
     "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/chips": "0.28.12",
-    "@snack-uikit/icons": "0.27.4",
-    "@snack-uikit/info-block": "0.6.35",
-    "@snack-uikit/list": "0.32.11",
-    "@snack-uikit/pagination": "0.10.21",
-    "@snack-uikit/scroll": "0.10.5",
-    "@snack-uikit/skeleton": "0.6.9",
-    "@snack-uikit/toggles": "0.13.23",
-    "@snack-uikit/toolbar": "0.14.16",
-    "@snack-uikit/truncate-string": "0.7.6",
-    "@snack-uikit/typography": "0.8.11",
-    "@snack-uikit/utils": "4.0.0",
+    "@snack-uikit/button": "0.19.17",
+    "@snack-uikit/chips": "0.28.13",
+    "@snack-uikit/icons": "0.27.5",
+    "@snack-uikit/info-block": "0.6.36",
+    "@snack-uikit/list": "0.32.12",
+    "@snack-uikit/pagination": "0.10.22",
+    "@snack-uikit/scroll": "0.10.6",
+    "@snack-uikit/skeleton": "0.6.10",
+    "@snack-uikit/toggles": "0.13.24",
+    "@snack-uikit/toolbar": "0.14.17",
+    "@snack-uikit/truncate-string": "0.7.7",
+    "@snack-uikit/typography": "0.8.12",
+    "@snack-uikit/utils": "4.0.1",
     "@tanstack/match-sorter-utils": "8.11.8",
     "@tanstack/react-table": "8.12.0",
     "classnames": "2.5.1",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "2baa589b36417cff3006e42bee78144c8ec5e83a"
+  "gitHead": "ea7d4bcae5db6d2c049f9b7ecd04537dec0a014a"
 }

package/src/helperComponents/Cells/RowActionsCell/RowActionsCell.tsx

@@ -5,6 +5,7 @@ import { ButtonFunction } from '@snack-uikit/button';
 import { MoreSVG } from '@snack-uikit/icons';
 import { Droplist, DroplistProps, isBaseItemProps, ItemProps } from '@snack-uikit/list';
 
+import { RowAppearance } from '../../../components/types';
 import { COLUMN_PIN_POSITION, DefaultColumns, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
 import { useRowContext } from '../../contexts';
@@ -16,7 +17,7 @@ type RowActionsCellProps<TData> = {
 };
 
 function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
-  const { dropListOpened, setDropListOpen } = useRowContext();
+  const { dropListOpened, setDropListOpen, disabledRowAppearance } = useRowContext();
 
   const patchItem = useCallback((item: ItemProps, cb: MouseEventHandler): ItemProps => {
     if (isBaseItemProps(item)) {
@@ -32,7 +33,8 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
     return { ...item, items: item.items.map(i => patchItem(i, cb)) };
   }, []);
 
-  const disabled = !row.getCanSelect();
+  const canSelect = row.getCanSelect();
+  const shouldShowActions = canSelect || disabledRowAppearance !== RowAppearance.Disabled;
 
   const stopPropagationClick = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
@@ -46,7 +48,7 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={dropListOpened || undefined}>
-      {!disabled && Boolean(actions.length) && (
+      {shouldShowActions && Boolean(actions.length) && (
         <Droplist
           trigger='click'
           open={dropListOpened}

package/src/helperComponents/Rows/BodyRow.tsx

@@ -46,7 +46,7 @@ export function BodyRow<TData>({
   const { getRowBackgroundColor } = useTableContext();
 
   const handleRowClick = (e: MouseEvent<HTMLDivElement>) => {
-    if (disabled) return;
+    if (disabled && disabledRowAppearance === RowAppearance.Disabled) return;
 
     onRowClick?.(e, {
       id: row.id,
@@ -62,7 +62,7 @@ export function BodyRow<TData>({
   const rowBackgroundColor = getRowBackgroundColor?.(row.original);
 
   return (
-    <RowContext.Provider value={{ dropListOpened, setDropListOpen }}>
+    <RowContext.Provider value={{ dropListOpened, setDropListOpen, disabledRowAppearance }}>
       <Row
         onClick={handleRowClick}
         data-clickable={Boolean(onRowClick) || undefined}

package/src/helperComponents/contexts.ts

@@ -3,16 +3,19 @@ import { createContext, Dispatch, SetStateAction, useContext } from 'react';
 
 import { ValueOf } from '@snack-uikit/utils';
 
+import { RowAppearance } from '../components/types';
 import { TABLE_ROW_COLOR } from '../constants';
 
 type RowContext = {
   dropListOpened: boolean;
   setDropListOpen: Dispatch<SetStateAction<boolean>>;
+  disabledRowAppearance: RowAppearance;
 };
 
 export const RowContext = createContext<RowContext>({
   dropListOpened: false,
   setDropListOpen() {},
+  disabledRowAppearance: RowAppearance.Disabled,
 });
 
 export const useRowContext = () => useContext(RowContext);