@snack-uikit/table 0.6.5-preview-85c5f47b.0

package/src/components/TablePagination/TablePagination.tsx

@@ -0,0 +1,70 @@
+import { Table } from '@tanstack/react-table';
+import { useCallback, useMemo } from 'react';
+
+import { ChipChoice } from '@snack-uikit/chips';
+import { Pagination } from '@snack-uikit/pagination';
+
+import styles from './styles.module.scss';
+
+export type TablePaginationProps<TData> = {
+  table: Table<TData>;
+  options?: number[];
+  optionsLabel?: string;
+  pageCount?: number;
+};
+
+export function TablePagination<TData>({
+  table,
+  options: optionsProp,
+  optionsLabel = 'Rows volume: ',
+}: TablePaginationProps<TData>) {
+  const handlePaginationOnChange = useCallback(
+    (pageIndex: number) => {
+      table.setPageIndex(pageIndex - 1);
+    },
+    [table],
+  );
+
+  const handleRowsVolumeOnChange = useCallback(
+    (value: string) => {
+      table.setPageSize(Number(value));
+    },
+    [table],
+  );
+
+  const options = useMemo(
+    () => optionsProp?.sort((a, b) => a - b).map(value => ({ label: String(value), value: String(value) })),
+    [optionsProp],
+  );
+
+  const tablePaginationState = table.getState().pagination;
+
+  if (table.getPageCount() <= 1 && !options) {
+    return null;
+  }
+
+  return (
+    <div className={styles.footer}>
+      {table.getPageCount() > 1 && (
+        <Pagination
+          total={table.getPageCount()}
+          page={tablePaginationState.pageIndex + 1}
+          onChange={handlePaginationOnChange}
+          className={styles.pagination}
+        />
+      )}
+
+      {options && table.getRowModel().rows.length >= Number(options[0].value) && (
+        <ChipChoice.Single
+          value={String(tablePaginationState.pageSize)}
+          onChange={handleRowsVolumeOnChange}
+          placement={ChipChoice.placements.TopEnd}
+          options={options}
+          label={optionsLabel}
+          widthStrategy={ChipChoice.widthStrategies.Auto}
+          showClearButton={false}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/TablePagination/index.ts

@@ -0,0 +1 @@
+export * from './TablePagination';

package/src/components/TablePagination/styles.module.scss

@@ -0,0 +1,13 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+
+.footer {
+  @include composite-var($table-footer);
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pagination {
+  flex: 1;
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Table';

package/src/constants.ts

@@ -0,0 +1,31 @@
+export enum ColumnPinPosition {
+  Left = 'left',
+  Right = 'right',
+}
+
+export enum ColumnAlign {
+  Left = 'left',
+  Right = 'right',
+}
+
+export const TEST_IDS = {
+  headerSortIndicator: 'table__header__sort-indicator',
+  headerRow: 'table__header-row',
+  headerCell: 'table__header-cell',
+  bodyRow: 'table__body-row',
+  bodyCell: 'table__body-cell',
+  pinnedCells: 'table__pinned-cells',
+  rowSelect: 'table__row-select',
+  rowActions: {
+    droplistTrigger: 'table__body-row__droplistTrigger',
+    droplist: 'table__body-row__actions-droplist',
+    option: 'table__body-row__action-option',
+  },
+  statusIndicator: 'table__status-indicator',
+  statusLabel: 'table__status-label',
+};
+
+export enum SortFn {
+  DateTime = 'datetime',
+  AlphaNumeric = 'alphanumeric',
+}

package/src/exportTable.ts

@@ -0,0 +1,82 @@
+import { utils as xlsxUtils, writeFileXLSX } from 'xlsx';
+
+import { ColumnDefinition } from './types';
+
+type ExportTableData<TData> = {
+  data: TData[];
+  columnDefinitions: ColumnDefinition<TData>[];
+  fileName?: string;
+};
+
+function getColumnAccessorKey<TData>(column: ColumnDefinition<TData>): string | undefined {
+  if ('accessorKey' in column && column.accessorKey) {
+    return String(column.accessorKey);
+  }
+}
+
+function getFilteredColumnsIds<TData extends object>(columnDefinitions: ColumnDefinition<TData>[]) {
+  return (columnDefinitions as ColumnDefinition<TData>[])
+    .filter(column => getColumnAccessorKey(column) && !column.meta?.skipOnExport)
+    .map(column => getColumnAccessorKey(column));
+}
+
+function getXlsxFormatTable<TData extends object>({
+  data,
+  columnDefinitions,
+}: {
+  data: TData[];
+  columnDefinitions: ColumnDefinition<TData>[];
+}) {
+  const filteredIds = getFilteredColumnsIds(columnDefinitions);
+  return data.map((line: TData) => {
+    const lineRecord = line as Record<string, string>;
+    const result: string[] = [];
+    filteredIds.forEach(key => {
+      if (!key) {
+        result.push('');
+        return;
+      }
+
+      result.push(lineRecord[key]);
+    });
+    return result;
+  });
+}
+
+export function exportToCSV<TData extends object>({
+  columnDefinitions,
+  fileName = 'Table',
+  data,
+}: ExportTableData<TData>) {
+  const xlsxData = getXlsxFormatTable({ data, columnDefinitions });
+  const filteredIds = getFilteredColumnsIds(columnDefinitions);
+  const table = [filteredIds, ...xlsxData];
+  const csv = table.map(line => line.map(el => `"${el}"`).join(',')).join('\n');
+
+  const blob = new Blob([csv], { type: 'text/csv' });
+  const url = window.URL.createObjectURL(blob);
+  const tempLink = Object.assign(document.createElement('a'), {
+    target: '_blank',
+    href: url,
+    download: fileName,
+  });
+  tempLink.click();
+  tempLink.remove();
+
+  return csv;
+}
+
+export function exportToXLSX<TData extends object>({
+  columnDefinitions,
+  fileName = 'Table',
+  data,
+}: ExportTableData<TData>) {
+  const xlsxData = getXlsxFormatTable({ data, columnDefinitions });
+  const filteredIds = getFilteredColumnsIds(columnDefinitions);
+  const workbook = xlsxUtils.book_new();
+  const worksheet = xlsxUtils.aoa_to_sheet([filteredIds, ...xlsxData]);
+  xlsxUtils.book_append_sheet(workbook, worksheet);
+  writeFileXLSX(workbook, `${fileName}.xlsx`);
+
+  return worksheet;
+}

package/src/helperComponents/Cells/BodyCell/BodyCell.tsx

@@ -0,0 +1,32 @@
+import { Cell as TableCell, flexRender } from '@tanstack/react-table';
+import cn from 'classnames';
+
+import { TEST_IDS } from '../../../constants';
+import { ColumnDefinition } from '../../../types';
+import { useCellSizes } from '../../hooks';
+import { Cell, CellProps } from '../Cell';
+import styles from './styles.module.scss';
+
+type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
+  cell: TableCell<TData, unknown>;
+};
+
+export function BodyCell<TData>({ cell, className, ...props }: BodyCellProps<TData>) {
+  const columnDef: ColumnDefinition<TData> = cell.column.columnDef;
+
+  const style = useCellSizes(cell);
+
+  return (
+    <Cell
+      {...props}
+      style={style}
+      className={cn(styles.tableBodyCell, className, columnDef.cellClassName)}
+      data-align={columnDef.align}
+      data-no-padding={columnDef.noBodyCellPadding || undefined}
+      data-column-id={cell.column.id}
+      data-test-id={TEST_IDS.bodyCell}
+    >
+      {flexRender(columnDef.cell, cell.getContext())}
+    </Cell>
+  );
+}

package/src/helperComponents/Cells/BodyCell/index.ts

@@ -0,0 +1 @@
+export * from './BodyCell';

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

@@ -0,0 +1,15 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+
+.tableBodyCell {
+  @include composite-var($table-cells);
+
+  color: $sys-neutral-text-main;
+
+  &[data-align='right'] {
+    justify-content: flex-end;
+  }
+
+  &[data-no-padding] {
+    padding: 0;
+  }
+}

package/src/helperComponents/Cells/Cell.tsx

@@ -0,0 +1,21 @@
+import cn from 'classnames';
+import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+
+import { DataAttributes } from '../types';
+import styles from './styles.module.scss';
+
+export type CellProps = {
+  children: ReactNode;
+  onClick?: MouseEventHandler;
+  className?: string;
+  style?: CSSProperties;
+} & DataAttributes;
+
+export function Cell({ onClick, className, style, children, ...attributes }: CellProps) {
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    <div role='cell' onClick={onClick} className={cn(styles.tableCell, className)} style={style} {...attributes}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { flexRender, Header } from '@tanstack/react-table';
+import cn from 'classnames';
+
+import { TruncateString } from '@snack-uikit/truncate-string';
+
+import { TEST_IDS } from '../../../constants';
+import { ColumnDefinition } from '../../../types';
+import { useCellSizes } from '../../hooks';
+import { Cell, CellProps } from '../Cell';
+import { getSortingIcon } from './helpers';
+import styles from './styles.module.scss';
+
+type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
+  header: Header<TData, unknown>;
+};
+
+export function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>) {
+  const isSortable = header.column.getCanSort();
+  const sortDirection = isSortable && (header.column.getIsSorted() || undefined);
+  const sortIcon = getSortingIcon(sortDirection);
+
+  const columnDef: ColumnDefinition<TData> = header.column.columnDef;
+
+  const style = useCellSizes(header);
+
+  return (
+    <Cell
+      style={style}
+      onClick={header.column.getToggleSortingHandler()}
+      data-sortable={isSortable || undefined}
+      data-no-padding={columnDef.noHeaderCellPadding || undefined}
+      data-no-offset={columnDef.noHeaderCellBorderOffset || undefined}
+      data-test-id={TEST_IDS.headerCell}
+      className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}
+    >
+      {columnDef.header && (
+        <div className={styles.tableHeaderCellName}>
+          <TruncateString text={flexRender(columnDef.header, header.getContext()) as string} />
+        </div>
+      )}
+
+      {Boolean(sortIcon) && (
+        <div
+          className={styles.tableHeaderSortIcon}
+          data-sort-direction={sortDirection}
+          data-test-id={TEST_IDS.headerSortIndicator}
+        >
+          {sortIcon}
+        </div>
+      )}
+    </Cell>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { SortDirection } from '@tanstack/react-table';
+
+import { ArrowDownSVG, ArrowUpSVG } from '@snack-uikit/icons';
+
+export function getSortingIcon(sort?: SortDirection | false) {
+  switch (sort) {
+    case 'asc':
+      return <ArrowUpSVG size={16} />;
+    case 'desc':
+      return <ArrowDownSVG size={16} />;
+    default:
+      return null;
+  }
+}

package/src/helperComponents/Cells/HeaderCell/index.ts

@@ -0,0 +1 @@
+export * from './HeaderCell';

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

@@ -0,0 +1,74 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.tableHeaderCell {
+  @include composite-var($table-head-column);
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  background-color: inherit;
+
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
+    width: calc(100% - $space-table-head-separator-padding * 2);
+    height: 1px;
+
+    background-color: $sys-neutral-decor-default;
+  }
+
+  &[data-sortable] {
+    cursor: pointer;
+  }
+
+  &[data-no-offset] {
+    &::after {
+      left: 0;
+      transform: none;
+      width: calc(100% - $space-table-head-separator-padding);
+    }
+  }
+
+  &[data-no-padding] {
+    padding: 0;
+
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+.tableHeaderCellName {
+  @include composite-var($table-head-name-layout);
+
+  display: inline-flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  min-width: 0;
+
+  color: simple-var($sys-neutral-text-light);
+}
+
+.tableHeaderSortIcon {
+  display: flex;
+  box-sizing: border-box;
+  color: simple-var($sys-neutral-text-light);
+
+  svg {
+    width: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
+    height: simple-var($icon-xs) !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

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

@@ -0,0 +1,118 @@
+import { CellContext, Row } from '@tanstack/react-table';
+import { MouseEvent } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
+import { MoreSVG } from '@snack-uikit/icons';
+
+import { ColumnPinPosition, 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<
+  ItemSingleProps,
+  'option' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'
+> & {
+  id?: string;
+  onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;
+};
+
+type RowActionsCellProps<TData> = {
+  actions: RowActionProps<TData>[];
+  row: Row<TData>;
+};
+
+function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
+  const { droplistOpened, setDroplistOpen } = useRowContext();
+
+  const {
+    triggerElementRef,
+    handleDroplistFocusLeave,
+    handleDroplistItemKeyDown,
+    handleTriggerKeyDown,
+    handleDroplistItemClick,
+    firstElementRefCallback,
+  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({ setDroplistOpen });
+
+  const handleItemClick = (item: RowActionProps<TData>) => (e: MouseEvent<HTMLButtonElement>) => {
+    item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
+  };
+
+  const disabled = !row.getCanSelect();
+
+  const stopPropagationClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  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) && (
+        <Droplist
+          open={droplistOpened}
+          onOpenChange={setDroplistOpen}
+          placement={Droplist.placements.BottomEnd}
+          firstElementRefCallback={firstElementRefCallback}
+          onFocusLeave={handleDroplistFocusLeave}
+          triggerElement={
+            <span>
+              <ButtonFunction
+                icon={<MoreSVG size={24} />}
+                data-test-id={TEST_IDS.rowActions.droplistTrigger}
+                onKeyDown={handleTriggerKeyDown}
+                ref={triggerElementRef}
+              />
+            </span>
+          }
+          triggerClassName={styles.rowActionsCellTrigger}
+          size={Droplist.sizes.S}
+          data-test-id={TEST_IDS.rowActions.droplist}
+        >
+          {actions.map(item => (
+            <Droplist.ItemSingle
+              {...item}
+              key={`${row.id}-${item.id || item.option}`}
+              onClick={e => handleDroplistItemClick(e, handleItemClick(item))}
+              data-test-id={TEST_IDS.rowActions.option}
+              onKeyDown={handleDroplistItemKeyDown}
+            />
+          ))}
+        </Droplist>
+      )}
+    </div>
+  );
+}
+
+export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => RowActionProps<TData>[];
+
+export type RowActionsColumnDefProps<TData> = {
+  /** Действия для строки */
+  actionsGenerator: ActionsGenerator<TData>;
+  /** Закрепление колонки справа в таблице */
+  pinned?: boolean;
+};
+
+/** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
+export function getRowActionsColumnDef<TData>({
+  actionsGenerator,
+  pinned,
+}: RowActionsColumnDefProps<TData>): ColumnDefinition<TData> {
+  return {
+    id: 'rowActions',
+    pinned: pinned ? ColumnPinPosition.Right : (undefined as never),
+    size: 40,
+    meta: {
+      skipOnExport: true,
+    },
+    noBodyCellPadding: true,
+    cellClassName: styles.rowActionsCell,
+    cell: cell => <RowActionsCell row={cell.row} actions={actionsGenerator(cell)} />,
+  };
+}

package/src/helperComponents/Cells/RowActionsCell/index.ts

@@ -0,0 +1 @@
+export * from './RowActionsCell';

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

@@ -0,0 +1,44 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+
+.rowActionsCell {
+  position: relative;
+  border-color: inherit;
+
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: calc(0px - $border-width-table);
+    bottom: calc(0px - $border-width-table);
+    left: 0;
+
+    box-sizing: border-box;
+    width: 100%;
+
+    /* stylelint-disable */
+    border-left: $border-width-table solid;
+    border-color: inherit;
+    /* stylelint-enable */
+  }
+}
+
+.rowActionsCellWrap {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.rowActionsCellTrigger {
+  @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/Cells/SelectionCell/SelectionCell.tsx

@@ -0,0 +1,54 @@
+import { MouseEvent } from 'react';
+
+import { Checkbox, Radio } from '@snack-uikit/toggles';
+
+import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import { ColumnDefinition } from '../../../types';
+import styles from './styles.module.scss';
+
+type SelectionCellProps = {
+  checked: boolean;
+  onChange(checked: boolean): void;
+  isMulti?: boolean;
+};
+
+function SelectionCell({ isMulti, onChange, ...props }: SelectionCellProps) {
+  const handleCellClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+
+    onChange(props.checked);
+  };
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onClick={handleCellClick} className={styles.selectionCell} data-test-id={TEST_IDS.rowSelect}>
+      {isMulti ? <Checkbox {...props} size={Checkbox.sizes.S} /> : <Radio {...props} size={Radio.sizes.S} />}
+    </div>
+  );
+}
+
+export function getSelectionCellColumnDef<TData>(): ColumnDefinition<TData> {
+  return {
+    id: 'selectionCell',
+    pinned: ColumnPinPosition.Left,
+    noBodyCellPadding: true,
+    size: 40,
+    headerClassName: styles.selectionCellHeader,
+    cell: ({ row, table }) => {
+      const disabled = !row.getCanSelect();
+
+      if (disabled) return null;
+
+      const { enableMultiRowSelection } = table.options;
+
+      const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
+
+      return (
+        <SelectionCell isMulti={isMulti} checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />
+      );
+    },
+    meta: {
+      skipOnExport: true,
+    },
+  };
+}

package/src/helperComponents/Cells/SelectionCell/index.ts

@@ -0,0 +1 @@
+export * from './SelectionCell';

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

@@ -0,0 +1,18 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+
+.selectionCell {
+  @include composite-var($table-cell-check);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.selectionCellHeader {
+  padding: 0;
+}