@snack-uikit/table 0.8.4 → 0.8.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.5 (2023-12-25)
+
+
+### Bug Fixes
+
+* **FF-4014:** fix infinite width without limits & export some types ([4dc82d3](https://github.com/cloud-ru-tech/snack-uikit/commit/4dc82d334f1cbb0b604d31687e60cfe338c4e679))
+
+
+
+
+
 ## 0.8.4 (2023-12-25)
 
 

package/dist/components/Table/Table.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import cn from 'classnames';
 import { useCallback, useMemo } from 'react';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
@@ -113,7 +114,7 @@ export function Table(_a) {
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;
-    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: className }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) }) }) }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) }) }) }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/components/Table/styles.module.css

@@ -43,4 +43,8 @@
 
 .skeleton{
   padding:0 var(--dimension-1m, 8px);
+}
+
+.wrapper{
+  max-width:100%;
 }

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

@@ -9,6 +9,7 @@ export type RowActionInfo<TData> = {
 };
 export type RowActionProps<TData> = Pick<ItemSingleProps, 'option' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'> & {
     id?: string;
+    hidden?: boolean;
     onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;
 };
 export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => RowActionProps<TData>[];

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { Droplist } from '@snack-uikit/droplist';
 import { MoreSVG } from '@snack-uikit/icons';
@@ -16,9 +17,10 @@ function RowActionsCell({ row, actions }) {
     const stopPropagationClick = (e) => {
         e.stopPropagation();
     };
+    const visibleActions = useMemo(() => actions.filter(item => !(item === null || item === void 0 ? void 0 : item.hidden)), [actions]);
     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, { open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerElement: _jsx("span", { children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, onKeyDown: handleTriggerKeyDown, ref: triggerElementRef }) }), triggerClassName: styles.rowActionsCellTrigger, size: 's', "data-test-id": TEST_IDS.rowActions.droplist, children: actions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: `${row.id}-${item.id || item.option}`, onClick: e => handleDroplistItemClick(e, handleItemClick(item)), "data-test-id": TEST_IDS.rowActions.option, onKeyDown: handleDroplistItemKeyDown })))) })) }));
+    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined, children: !disabled && Boolean(visibleActions.length) && (_jsx(Droplist, { open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerElement: _jsx("span", { children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, onKeyDown: handleTriggerKeyDown, ref: triggerElementRef }) }), triggerClassName: styles.rowActionsCellTrigger, size: 's', "data-test-id": TEST_IDS.rowActions.droplist, children: actions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: `${row.id}-${item.id || item.option}`, onClick: e => handleDroplistItemClick(e, handleItemClick(item)), "data-test-id": TEST_IDS.rowActions.option, onKeyDown: handleDroplistItemKeyDown })))) })) }));
 }
 /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
 export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {

package/dist/types.d.ts

@@ -37,5 +37,5 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
-export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, } from './helperComponents';
+export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, } from './helperComponents';
 export type { PaginationState, SortingState, RowSelectionState, RowSelectionOptions, TableEmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -55,5 +55,5 @@
     "uncontrollable": "8.0.0",
     "xlsx": "file:vendor/xlsx-0.20.1.tgz"
   },
-  "gitHead": "d3de26e379c9becabbf2f2e4d0ca8ad0160be6fa"
+  "gitHead": "d37c0e8836f2c384fb4044cca33450359a4d940e"
 }

package/src/components/Table/Table.tsx

@@ -11,6 +11,7 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table';
+import cn from 'classnames';
 import { ReactNode, useCallback, useMemo } from 'react';
 
 import { Scroll } from '@snack-uikit/scroll';
@@ -303,7 +304,7 @@ export function Table<TData extends object>({
     <>
       <div
         style={{ '--page-size': !suppressPagination ? tablePagination?.pageSize : pageSize }}
-        className={className}
+        className={cn(styles.wrapper, className)}
         {...extractSupportProps(rest)}
       >
         {!suppressToolbar && (

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

@@ -52,4 +52,8 @@
 
 .skeleton {
   padding: 0 $dimension-1m;
+}
+
+.wrapper {
+  max-width: 100%;
 }

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

@@ -1,5 +1,5 @@
 import { CellContext, Row } from '@tanstack/react-table';
-import { MouseEvent } from 'react';
+import { MouseEvent, useMemo } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
@@ -21,6 +21,7 @@ export type RowActionProps<TData> = Pick<
   'option' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'
 > & {
   id?: string;
+  hidden?: boolean;
   onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;
 };
 
@@ -51,10 +52,12 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
     e.stopPropagation();
   };
 
+  const visibleActions: RowActionProps<TData>[] = useMemo(() => actions.filter(item => !item?.hidden), [actions]);
+
   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) && (
+      {!disabled && Boolean(visibleActions.length) && (
         <Droplist
           open={droplistOpened}
           onOpenChange={setDroplistOpen}

package/src/types.ts

@@ -71,6 +71,7 @@ export type {
   StatusColumnDefinitionProps,
   RowInfo,
   RowClickHandler,
+  ActionsGenerator,
 } from './helperComponents';
 
 export type {