@snack-uikit/table 0.39.6 → 0.39.7-preview-d42155c3.0

package/README.md

@@ -117,7 +117,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | columnSettings* | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - |  |
-| savedState* | `Pick<ToolbarPersistConfig<Record<string, unknown>>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - |  |
+| savedState* | `Pick<ToolbarPersistConfig<TFilters>, "serializer" \| "parser"> & { id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - |  |
 | tableColumns* | `ColumnDefinition<TData>[]` | - |  |
 ## useColumnSettings
 ### Props
@@ -168,8 +168,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| filter | `FiltersState` | - |  |
-| search | `string` | - |  |
 | pagination | `PaginationState \| PaginationParams` | - |  |
 | sorting | `SortingState` | - |  |
 ## Table

package/dist/cjs/helperComponents/Cells/TreeCell/TreeCell.d.ts

@@ -2,7 +2,7 @@ import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import { RowAppearance } from '../../../components';
 import { ColumnDefinition } from '../../../types';
-type BaseTreeColumnDef = {
+type BaseTreeColumnDef<TData> = {
     /** Имя ключа соответствующее полю в data */
     accessorKey: string;
     /** Иконка элемента-родителя в открытом состоянии */
@@ -10,23 +10,23 @@ type BaseTreeColumnDef = {
     /** Иконка элемента-родителя в закрытом состоянии */
     collapsedIcon?: ReactNode;
     /** Иконка дочернего */
-    icon?: ReactNode;
+    icon?: (ctx: CellContext<TData, unknown>) => ReactNode;
     /** Иконка дочернего элемента */
     showToggle?: boolean;
     /** Минимальный размер ячейки */
     minSize?: number;
 };
-type TreeColumnDef = BaseTreeColumnDef & {
+type TreeColumnDef<TData> = BaseTreeColumnDef<TData> & {
     header?: never;
     cell?: never;
 };
-type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
+type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef<TData> & {
     /** Заголовок колонки */
     cell?(ctx: CellContext<TData, unknown>): ReactNode;
     /** Рендер функция заголовка колонки */
     header?: ColumnDefinition<TData>['header'];
 };
-export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
+export type TreeColumnDefinitionProps<TData> = TreeColumnDef<TData> | TreeColumnDefWithDescription<TData>;
 type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
     enableSelection?: boolean;
     rowSelectionAppearance?: RowAppearance;

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

@@ -26,7 +26,7 @@ function getTreeColumnDef(_ref) {
   let _ref$showToggle = _ref.showToggle,
     showToggle = _ref$showToggle === void 0 ? false : _ref$showToggle,
     _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? (0, jsx_runtime_1.jsx)(icons_1.FileSVG, {
+    icon = _ref$icon === void 0 ? () => (0, jsx_runtime_1.jsx)(icons_1.FileSVG, {
       size: 24
     }) : _ref$icon,
     _ref$expandedIcon = _ref.expandedIcon,
@@ -167,7 +167,7 @@ function getTreeColumnDef(_ref) {
           }), (0, jsx_runtime_1.jsxs)("div", {
             role: 'presentation',
             className: styles_module_scss_1.default.userContent,
-            children: [!isExpandable && icon, renderCell ? renderCell(ctx) : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+            children: [!isExpandable && (icon === null || icon === void 0 ? void 0 : icon(ctx)), renderCell ? renderCell(ctx) : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
               text: value
             })]
           })]

package/dist/esm/helperComponents/Cells/TreeCell/TreeCell.d.ts

@@ -2,7 +2,7 @@ import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import { RowAppearance } from '../../../components';
 import { ColumnDefinition } from '../../../types';
-type BaseTreeColumnDef = {
+type BaseTreeColumnDef<TData> = {
     /** Имя ключа соответствующее полю в data */
     accessorKey: string;
     /** Иконка элемента-родителя в открытом состоянии */
@@ -10,23 +10,23 @@ type BaseTreeColumnDef = {
     /** Иконка элемента-родителя в закрытом состоянии */
     collapsedIcon?: ReactNode;
     /** Иконка дочернего */
-    icon?: ReactNode;
+    icon?: (ctx: CellContext<TData, unknown>) => ReactNode;
     /** Иконка дочернего элемента */
     showToggle?: boolean;
     /** Минимальный размер ячейки */
     minSize?: number;
 };
-type TreeColumnDef = BaseTreeColumnDef & {
+type TreeColumnDef<TData> = BaseTreeColumnDef<TData> & {
     header?: never;
     cell?: never;
 };
-type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
+type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef<TData> & {
     /** Заголовок колонки */
     cell?(ctx: CellContext<TData, unknown>): ReactNode;
     /** Рендер функция заголовка колонки */
     header?: ColumnDefinition<TData>['header'];
 };
-export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
+export type TreeColumnDefinitionProps<TData> = TreeColumnDef<TData> | TreeColumnDefWithDescription<TData>;
 type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
     enableSelection?: boolean;
     rowSelectionAppearance?: RowAppearance;

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

@@ -11,7 +11,7 @@ import { TREE_CELL_ID } from './constants';
 import styles from './styles.module.css';
 import { TreeLine } from './TreeLine';
 /** Вспомогательная функция для создания ячейки со статусом */
-export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), header, accessorKey, cell: renderCell, enableSelection, rowSelectionAppearance, minSize, }) {
+export function getTreeColumnDef({ showToggle = false, icon = () => _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), header, accessorKey, cell: renderCell, enableSelection, rowSelectionAppearance, minSize, }) {
     const cell = function TreeCell(ctx) {
         var _a;
         const { row, cell } = ctx;
@@ -84,7 +84,7 @@ export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { si
                 // @ts-ignore
                 cell.row.original[accessorKey]
             : cell.getValue();
-        return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, "data-disabled": !isRowsSelectionEnabled || undefined, "data-selected": isRowSelected || undefined, "data-multiselect": isMultiSelect || undefined, children: [showToggle && !isToggleHidden && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && icon, renderCell ? renderCell(ctx) : _jsx(TruncateString, { text: value })] })] })] }) }));
+        return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, "data-disabled": !isRowsSelectionEnabled || undefined, "data-selected": isRowSelected || undefined, "data-multiselect": isMultiSelect || undefined, children: [showToggle && !isToggleHidden && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && (icon === null || icon === void 0 ? void 0 : icon(ctx)), renderCell ? renderCell(ctx) : _jsx(TruncateString, { text: value })] })] })] }) }));
     };
     return {
         id: TREE_CELL_ID,

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.39.6",
+  "version": "0.39.7-preview-d42155c3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "9e6abdd71a846caf1f1252b9504560a3b796942f"
+  "gitHead": "2a708df60414ebeaeea543ae0dcfb6ed4863a479"
 }

package/src/helperComponents/Cells/TreeCell/TreeCell.tsx

@@ -14,7 +14,7 @@ import { TREE_CELL_ID } from './constants';
 import styles from './styles.module.scss';
 import { TreeLine } from './TreeLine';
 
-type BaseTreeColumnDef = {
+type BaseTreeColumnDef<TData> = {
   /** Имя ключа соответствующее полю в data */
   accessorKey: string;
   /** Иконка элемента-родителя в открытом состоянии */
@@ -22,26 +22,26 @@ type BaseTreeColumnDef = {
   /** Иконка элемента-родителя в закрытом состоянии */
   collapsedIcon?: ReactNode;
   /** Иконка дочернего */
-  icon?: ReactNode;
+  icon?: (ctx: CellContext<TData, unknown>) => ReactNode;
   /** Иконка дочернего элемента */
   showToggle?: boolean;
   /** Минимальный размер ячейки */
   minSize?: number;
 };
 
-type TreeColumnDef = BaseTreeColumnDef & {
+type TreeColumnDef<TData> = BaseTreeColumnDef<TData> & {
   header?: never;
   cell?: never;
 };
 
-type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
+type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef<TData> & {
   /** Заголовок колонки */
   cell?(ctx: CellContext<TData, unknown>): ReactNode;
   /** Рендер функция заголовка колонки */
   header?: ColumnDefinition<TData>['header'];
 };
 
-export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
+export type TreeColumnDefinitionProps<TData> = TreeColumnDef<TData> | TreeColumnDefWithDescription<TData>;
 
 type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
   enableSelection?: boolean;
@@ -51,7 +51,7 @@ type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
 /** Вспомогательная функция для создания ячейки со статусом */
 export function getTreeColumnDef<TData>({
   showToggle = false,
-  icon = <FileSVG size={24} />,
+  icon = () => <FileSVG size={24} />,
   expandedIcon = <FolderOpenSVG size={24} />,
   collapsedIcon = <FolderSVG size={24} />,
   header,
@@ -214,7 +214,7 @@ export function getTreeColumnDef<TData>({
               {isExpandable && !isExpanded && collapsedIcon}
             </div>
             <div role='presentation' className={styles.userContent}>
-              {!isExpandable && icon}
+              {!isExpandable && icon?.(ctx)}
 
               {renderCell ? renderCell(ctx) : <TruncateString text={value} />}
             </div>