@snack-uikit/table 0.16.8 → 0.17.1

package/src/components/Table/Table.tsx

@@ -11,7 +11,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import cn from 'classnames';
-import { RefObject, useCallback, useEffect, useMemo } from 'react';
+import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
@@ -38,9 +38,9 @@ import {
 import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
-import { useLoadingTable } from './hooks';
-import { useStateControl } from './hooks/useStateControl';
+import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.scss';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth } from './utils';
 
 /** Компонент таблицы */
 export function Table<TData extends object>({
@@ -76,7 +76,7 @@ export function Table<TData extends object>({
   scrollRef,
   scrollContainerRef,
   getRowId,
-
+  enableFuzzySearch,
   ...rest
 }: TableProps<TData>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -99,6 +99,12 @@ export function Table<TData extends object>({
   );
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
+  useEffect(() => {
+    if (pagination.pageIndex >= data.length / pagination.pageSize) {
+      onPaginationChange({ ...pagination, pageIndex: 0 });
+    }
+  }, [data.length, onPaginationChange, pagination]);
+
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
     let cols: ColumnDefinition<TData>[] = columnDefinitions;
     if (enableSelection) {
@@ -106,6 +112,7 @@ export function Table<TData extends object>({
     }
     return cols;
   }, [columnDefinitions, enableSelection]);
+
   const columnPinning = useMemo(() => {
     const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
     for (const col of tableColumns) {
@@ -139,7 +146,7 @@ export function Table<TData extends object>({
     manualPagination,
     manualFiltering,
 
-    globalFilterFn: fuzzyFilter,
+    globalFilterFn: enableFuzzySearch ? fuzzyFilter : undefined,
     onGlobalFilterChange,
 
     getRowId,
@@ -154,9 +161,9 @@ export function Table<TData extends object>({
     onSortingChange,
     getSortedRowModel: getSortedRowModel(),
     onPaginationChange,
+    autoResetPageIndex: false,
     getPaginationRowModel: getPaginationRowModel(),
     getCoreRowModel: getCoreRowModel(),
-
     columnResizeMode: 'onEnd',
   });
 
@@ -189,18 +196,20 @@ export function Table<TData extends object>({
     }
   }, [loading, rowSelectionProp?.multiRow, table]);
 
-  useEffect(() => {}, []);
+  const columnSizeVarsRef = useRef<Record<string, string>>();
+  const headers = table.getFlatHeaders();
 
   const columnSizeVars = useMemo(() => {
     const originalColumnDefs = table._getColumnDefs();
-    const headers = table.getFlatHeaders();
-    const colSizes: { [key: string]: string } = {};
+    const colSizes: Record<string, string> = {};
 
     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;
 
@@ -209,17 +218,34 @@ export function Table<TData extends object>({
         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 => ({ ...old, [header.id]: realSize }));
+
+          size = `${realSize}px`;
+        }
       }
 
-      colSizes[`--table-column-${header.id}-size`] = size;
-      colSizes[`--table-column-${header.id}-flex`] = size === '100%' ? 'unset' : '0';
+      colSizes[sizeKey] = size;
+      colSizes[flexKey] = size === '100%' ? 'unset' : '0';
     }
 
     return colSizes;
-    /* effect must be called only on columnSizingInfo.isResizingColumn changes
-      to reduce unnecessary recalculations */
+    /*
+      effect must be called only on columnSizingInfo.isResizingColumn changes
+      to reduce unnecessary recalculations
+
+      headers ids can also change, so they also should present here
+
+      table.getTotalSize() will trigger re-render after double-click size reset
+    */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table.getState().columnSizingInfo.isResizingColumn]);
+  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
+
+  useEffect(() => {
+    columnSizeVarsRef.current = columnSizeVars;
+  }, [columnSizeVars]);
 
   const tableRows = table.getRowModel().rows;
   const loadingTableRows = loadingTable.getRowModel().rows;

package/src/components/Table/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useLoadingTable';
+export * from './useStateControl';

package/src/components/Table/utils.ts

@@ -0,0 +1,21 @@
+export function getCurrentlyConfiguredHeaderWidth(id: string) {
+  const cell = document.querySelector<HTMLDivElement>(`[data-header-id="${id}"]`);
+  const resizeHandler = cell?.querySelector<HTMLDivElement>(
+    '[data-test-id="table__header-cell-resize-handle-moving-part"]',
+  );
+
+  if (cell && resizeHandler) {
+    const { width } = cell.getBoundingClientRect();
+    const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+    return width + offset;
+  }
+
+  return 0;
+}
+
+export function getColumnStyleVars(id: string) {
+  return {
+    sizeKey: `--table-column-${id}-size`,
+    flexKey: `--table-column-${id}-flex`,
+  };
+}

package/src/components/types.ts

@@ -52,6 +52,9 @@ export type TableProps<TData extends object> = WithSupportProps<{
     onChange?(value: string): void;
   };
 
+  /** Включить нечеткий поиск  */
+  enableFuzzySearch?: boolean;
+
   /** Максимальное кол-во строк на страницу @default 10 */
   pageSize?: number;
 

package/src/constants.ts

@@ -19,7 +19,7 @@ export const TEST_IDS = {
   rowActions: {
     droplistTrigger: 'table__body-row__droplistTrigger',
     droplist: 'table__body-row__actions-droplist',
-    option: 'table__body-row__action-option',
+    option: 'list__base-item-option',
   },
   statusIndicator: 'table__status-indicator',
   statusLabel: 'table__status-label',

package/src/helperComponents/Cells/CopyCell/styles.module.scss

@@ -10,11 +10,14 @@
   width: 100%;
   min-width: 0;
   max-width: 100%;
+
   .copyButton {
     display: none;
   }
 
   &:hover {
+    margin-right: calc(0px - calc($dimension-4m + $dimension-050m));
+
     .copyButton {
       display: inline-flex;
     }

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -5,7 +5,7 @@ import { MouseEvent, useRef } from 'react';
 import { TruncateString } from '@snack-uikit/truncate-string';
 
 import { TEST_IDS } from '../../../constants';
-import { ColumnDefinition } from '../../../types';
+import { ColumnDefinition, ColumnPinPosition } from '../../../types';
 import { useCellSizes } from '../../hooks';
 import { Cell, CellProps } from '../Cell';
 import { getSortingIcon } from './helpers';
@@ -14,9 +14,10 @@ import styles from './styles.module.scss';
 
 type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
   header: Header<TData, unknown>;
+  pinPosition?: ColumnPinPosition;
 };
 
-export function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>) {
+export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCellProps<TData>) {
   const cellRef = useRef<HTMLDivElement>(null);
   const isSortable = header.column.getCanSort();
   const isResizable = header.column.getCanResize();
@@ -46,7 +47,10 @@ export function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>)
       data-no-padding={columnDef.noHeaderCellPadding || undefined}
       data-no-offset={columnDef.noHeaderCellBorderOffset || undefined}
       data-test-id={TEST_IDS.headerCell}
+      data-align={columnDef.headerAlign || undefined}
+      data-header-id={header.id}
       data-resizing={isResizing || undefined}
+      data-pin-position={pinPosition || undefined}
       role='columnheader'
       className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}
       ref={cellRef}

package/src/helperComponents/Cells/HeaderCell/ResizeHandle.tsx

@@ -1,7 +1,8 @@
 import { Header } from '@tanstack/react-table';
 import cn from 'classnames';
-import { RefObject } from 'react';
+import { MouseEventHandler, RefObject } from 'react';
 
+import { stopEventPropagation } from './helpers';
 import styles from './styles.module.scss';
 
 type ResizeHandleProps<TData> = {
@@ -38,23 +39,35 @@ export function ResizeHandle<TData>({ header, cellRef }: ResizeHandleProps<TData
   const isResizing = header.column.getIsResizing();
   const resizeHandler = header.getResizeHandler();
 
+  const handleMouseDown: MouseEventHandler = event => {
+    if (event.detail === 2) {
+      header.column.resetSize();
+      return;
+    }
+
+    resizeHandler(event);
+  };
+
   const offset = isResizing ? getResizeIndicatorOffset({ header, cellRef }) : 0;
 
   return (
     <>
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
+        role='button'
+        tabIndex={0}
         className={cn(styles.tableHeaderIcon, styles.tableHeaderResizeHandle)}
         data-resizing={isResizing || undefined}
-        onMouseDown={resizeHandler}
+        onMouseDown={handleMouseDown}
         onTouchStart={resizeHandler}
+        onMouseUp={stopEventPropagation}
       />
 
       {isResizing && (
         <div
+          data-test-id='table__header-cell-resize-handle-moving-part'
           className={styles.tableHeaderResizeIndicator}
           style={{
-            transform: `translateX(${offset}px)`,
+            '--offset': `${offset}px`,
           }}
         />
       )}

package/src/helperComponents/Cells/HeaderCell/helpers.tsx

@@ -1,4 +1,5 @@
 import { SortDirection } from '@tanstack/react-table';
+import { MouseEventHandler } from 'react';
 
 import { ArrowDownSVG, ArrowUpSVG } from '@snack-uikit/icons';
 
@@ -12,3 +13,7 @@ export function getSortingIcon(sort?: SortDirection | false) {
       return null;
   }
 }
+
+export const stopEventPropagation: MouseEventHandler = e => {
+  e.stopPropagation();
+};

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -34,6 +34,33 @@
   }
 }
 
+.tableHeaderResizeIndicator {
+  cursor: col-resize;
+
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  transform: translateX(var(--offset));
+
+  width: 1px;
+  height: 100%;
+
+  background-color: $sys-neutral-decor-activated;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateX(-50%);
+
+    width: calc(100% + $dimension-4m);
+    height: 100%;
+  }
+}
+
 .tableHeaderCell {
   @include composite-var($table-head-column);
 
@@ -92,6 +119,25 @@
   &[data-resizing] {
     user-select: none;
   }
+
+  &[data-align='right'] {
+    justify-content: flex-end;
+  }
+
+  &[data-pin-position='right'] {
+    &:last-child {
+      overflow: hidden;
+
+      .tableHeaderResizeHandle {
+        right: 0;
+        transform: none;
+      }
+
+      .tableHeaderResizeIndicator {
+        right: calc($dimension-1m / 2);
+      }
+    }
+  }
 }
 
 .tableHeaderCellMain {
@@ -125,29 +171,3 @@
     height: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
-
-.tableHeaderResizeIndicator {
-  cursor: col-resize;
-
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  right: 0;
-
-  width: 1px;
-  height: 100%;
-
-  background-color: $sys-neutral-decor-activated;
-
-  &::after {
-    content: '';
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translateX(-50%);
-
-    width: calc(100% + $dimension-4m);
-    height: 100%;
-  }
-}

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

@@ -1,42 +1,36 @@
 import { CellContext, Row } from '@tanstack/react-table';
-import { MouseEvent, ReactElement, useMemo, useRef } from 'react';
+import { MouseEvent, MouseEventHandler, useCallback, useMemo } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { MoreSVG } from '@snack-uikit/icons';
-import { BaseItemProps, Droplist } from '@snack-uikit/list';
-import { Tag } from '@snack-uikit/tag';
+import { Droplist, DroplistProps, isBaseItemProps, ItemProps } from '@snack-uikit/list';
 
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
 import { useRowContext } from '../../contexts';
 import styles from './styles.module.scss';
 
-export type RowActionInfo<TData> = {
-  rowId: string;
-  data: TData;
-  itemId?: string;
-};
-
-export type RowActionProps<TData> = Pick<BaseItemProps, 'content' | 'disabled' | 'data-test-id'> & {
-  icon?: ReactElement;
-  tagLabel?: string;
-  id?: string;
-  hidden?: boolean;
-  onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLElement>): void;
-};
-
 type RowActionsCellProps<TData> = {
-  actions: RowActionProps<TData>[];
+  actions: DroplistProps['items'];
   row: Row<TData>;
 };
 
 function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
-  const { droplistOpened, setDroplistOpen } = useRowContext();
-  const triggerRef = useRef(null);
+  const { dropListOpened, setDropListOpen } = useRowContext();
 
-  const handleItemClick = (item: RowActionProps<TData>) => (e: MouseEvent<HTMLElement>) => {
-    item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
-  };
+  const patchItem = useCallback((item: ItemProps, cb: MouseEventHandler): ItemProps => {
+    if (isBaseItemProps(item)) {
+      return {
+        ...item,
+        onClick(e) {
+          item.onClick?.(e);
+          cb(e);
+        },
+      };
+    }
+
+    return { ...item, items: item.items.map(i => patchItem(i, cb)) };
+  }, []);
 
   const disabled = !row.getCanSelect();
 
@@ -44,49 +38,32 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
     e.stopPropagation();
   };
 
-  const visibleActions: RowActionProps<TData>[] = useMemo(() => actions.filter(item => !item?.hidden), [actions]);
+  const patchedItems = useMemo(
+    () => actions.map(item => patchItem(item, () => setDropListOpen(false))),
+    [actions, patchItem, setDropListOpen],
+  );
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={droplistOpened || undefined}>
-      {!disabled && Boolean(visibleActions.length) && (
+    <div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={dropListOpened || undefined}>
+      {!disabled && Boolean(actions.length) && (
         <Droplist
           trigger='clickAndFocusVisible'
-          open={droplistOpened}
-          onOpenChange={setDroplistOpen}
+          open={dropListOpened}
+          onOpenChange={setDropListOpen}
           placement='bottom-end'
           size='m'
           data-test-id={TEST_IDS.rowActions.droplist}
-          triggerElemRef={triggerRef}
-          items={actions
-            .filter(item => !item?.hidden)
-            .map(item => ({
-              id: item.id,
-              onClick: e => {
-                handleItemClick(item)(e);
-                setDroplistOpen(false);
-              },
-              disabled: item.disabled,
-              content: item.content,
-              beforeContent: item.icon,
-              afterContent: item.tagLabel ? <Tag label={item.tagLabel} /> : undefined,
-              'data-test-id': item['data-test-id'] || TEST_IDS.rowActions.option,
-            }))}
+          items={patchedItems}
         >
-          <span className={styles.rowActionsCellTrigger}>
-            <ButtonFunction
-              icon={<MoreSVG size={24} />}
-              data-test-id={TEST_IDS.rowActions.droplistTrigger}
-              ref={triggerRef}
-            />
-          </span>
+          <ButtonFunction icon={<MoreSVG size={24} />} data-test-id={TEST_IDS.rowActions.droplistTrigger} />
         </Droplist>
       )}
     </div>
   );
 }
 
-export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => RowActionProps<TData>[];
+export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => DroplistProps['items'];
 
 export type RowActionsColumnDefProps<TData> = {
   /** Действия для строки */

package/src/helperComponents/Cells/RowActionsCell/styles.module.scss

@@ -24,24 +24,15 @@
 }
 
 .rowActionsCellWrap {
+  --offset: 0px;
+  cursor: pointer;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-}
-
-.rowActionsCellTrigger {
-  --offset: 0px;
 
   @include composite-var($table-cells-action);
-  
-
-  cursor: pointer;
 
   display: flex;
   align-items: center;
   justify-content: center;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
 }

package/src/helperComponents/Rows/BodyRow.tsx

@@ -26,7 +26,7 @@ type BodyRowProps<TData> = {
 export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
   const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
 
-  const [droplistOpened, setDroplistOpen] = useState(false);
+  const [dropListOpened, setDropListOpen] = useState(false);
 
   const disabled = !row.getCanSelect();
 
@@ -42,13 +42,13 @@ export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
   };
 
   return (
-    <RowContext.Provider value={{ droplistOpened, setDroplistOpen }}>
+    <RowContext.Provider value={{ dropListOpened, setDropListOpen }}>
       <Row
         onClick={handleRowClick}
         data-clickable={Boolean(onRowClick) || undefined}
         data-disabled={disabled || undefined}
         data-selected={row.getIsSelected() || undefined}
-        data-actions-opened={droplistOpened || undefined}
+        data-actions-opened={dropListOpened || undefined}
         data-test-id={TEST_IDS.bodyRow}
         data-row-id={row.id}
         className={styles.bodyRow}

package/src/helperComponents/Rows/HeaderRow.tsx

@@ -26,7 +26,9 @@ export function HeaderRow() {
         <PinnedCells position={COLUMN_PIN_POSITION.Right}>
           {rightPinned.map(headerGroup =>
             headerGroup.headers.map(header =>
-              header.isPlaceholder ? null : <HeaderCell key={header.id} header={header} />,
+              header.isPlaceholder ? null : (
+                <HeaderCell key={header.id} header={header} pinPosition={COLUMN_PIN_POSITION.Right} />
+              ),
             ),
           )}
         </PinnedCells>

package/src/helperComponents/Rows/styles.module.scss

@@ -61,6 +61,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
 
   &[data-position='right'] {
     right: 0;
+    margin-left: auto;
 
     &::after {
       left: 0;

package/src/helperComponents/contexts.ts

@@ -2,13 +2,13 @@ import { Table } from '@tanstack/react-table';
 import { createContext, Dispatch, SetStateAction, useContext } from 'react';
 
 type RowContext = {
-  droplistOpened: boolean;
-  setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+  dropListOpened: boolean;
+  setDropListOpen: Dispatch<SetStateAction<boolean>>;
 };
 
 export const RowContext = createContext<RowContext>({
-  droplistOpened: false,
-  setDroplistOpen() {},
+  dropListOpened: false,
+  setDropListOpen() {},
 });
 
 export const useRowContext = () => useContext(RowContext);

package/src/types.ts

@@ -33,6 +33,8 @@ type BaseColumnDefinition<TData> = Except<
 > & {
   /** Заголовок колонки */
   header?: string | ((ctx: HeaderContext<TData, unknown>) => string);
+  /** Позиционирование заголовка колонки */
+  headerAlign?: ColumnAlign;
   /** Позиционирование контента ячейки в теле таблицы */
   align?: ColumnAlign;
   /** Отключить паддинг у ячейки в теле таблицы */
@@ -64,8 +66,6 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
 
 export type {
-  RowActionInfo,
-  RowActionProps,
   RowActionsColumnDefProps,
   StatusColumnDefinitionProps,
   RowInfo,
@@ -76,6 +76,7 @@ export type {
 } from './helperComponents';
 
 export type {
+  ColumnPinPosition,
   PaginationState,
   SortingState,
   RowSelectionState,