@redis-ui/table 2.23.2 → 3.3.2

package/dist/Table/plugins/RowSelectionPlugin.cjs

@@ -1,14 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index = require("../../node_modules/@radix-ui/react-use-controllable-state/dist/index.cjs");
+const ClickableRowPlugin = require("./ClickableRowPlugin.cjs");
 const DEFAULT_ROW_SELECTION = {};
 const useRowSelectionPlugin = ({
   rowSelection,
   defaultRowSelection,
   onRowSelectionChange,
   rowSelectionMode,
-  getRowCanSelect
+  getRowCanSelect,
+  selectRowOnClick
 }) => {
+  const clickablePluginData = ClickableRowPlugin.useClickableRowPlugin({
+    getCanRowClick: (row) => !!(selectRowOnClick && row.getCanSelect()),
+    onRowClick: (row) => row.toggleSelected(),
+    shouldClickOnEnter: true
+  });
   const [rowSelectionState = DEFAULT_ROW_SELECTION, setRowSelectionState] = index.useControllableState({
     prop: rowSelection,
     defaultProp: defaultRowSelection,
@@ -22,6 +29,9 @@ const useRowSelectionPlugin = ({
       enableRowSelection: getRowCanSelect ?? true,
       enableMultiRowSelection: rowSelectionMode === "multiple",
       onRowSelectionChange: setRowSelectionState
+    },
+    context: {
+      ...selectRowOnClick ? clickablePluginData == null ? void 0 : clickablePluginData.context : null
     }
   };
 };

package/dist/Table/plugins/RowSelectionPlugin.d.ts

@@ -8,5 +8,7 @@ export interface TableRowSelectionParams<T extends object> {
     rowSelectionMode?: 'single' | 'multiple';
     /** Allows individual rows to be selectable */
     getRowCanSelect?: (row: Row<T>) => boolean;
+    /** Allows selecting row by Click on whole row and by pressing Enter, when row is focused */
+    selectRowOnClick?: boolean;
 }
-export declare const useRowSelectionPlugin: <T extends object>({ rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect }: TableRowSelectionParams<T>) => TablePluginData<T>;
+export declare const useRowSelectionPlugin: <T extends object>({ rowSelection, defaultRowSelection, onRowSelectionChange, rowSelectionMode, getRowCanSelect, selectRowOnClick }: TableRowSelectionParams<T>) => TablePluginData<T>;

package/dist/Table/plugins/RowSelectionPlugin.js

@@ -1,12 +1,19 @@
 import { useControllableState } from "../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
+import { useClickableRowPlugin } from "./ClickableRowPlugin.js";
 const DEFAULT_ROW_SELECTION = {};
 const useRowSelectionPlugin = ({
   rowSelection,
   defaultRowSelection,
   onRowSelectionChange,
   rowSelectionMode,
-  getRowCanSelect
+  getRowCanSelect,
+  selectRowOnClick
 }) => {
+  const clickablePluginData = useClickableRowPlugin({
+    getCanRowClick: (row) => !!(selectRowOnClick && row.getCanSelect()),
+    onRowClick: (row) => row.toggleSelected(),
+    shouldClickOnEnter: true
+  });
   const [rowSelectionState = DEFAULT_ROW_SELECTION, setRowSelectionState] = useControllableState({
     prop: rowSelection,
     defaultProp: defaultRowSelection,
@@ -20,6 +27,9 @@ const useRowSelectionPlugin = ({
       enableRowSelection: getRowCanSelect ?? true,
       enableMultiRowSelection: rowSelectionMode === "multiple",
       onRowSelectionChange: setRowSelectionState
+    },
+    context: {
+      ...selectRowOnClick ? clickablePluginData == null ? void 0 : clickablePluginData.context : null
     }
   };
 };

package/dist/Table/tanStackExtendedTypes.d.ts

@@ -1,19 +1,19 @@
 import '@tanstack/table-core';
 import { Cell, Header } from '@tanstack/react-table';
 import { HTMLAttributes } from 'react';
+import { ColumnSizeUnit } from './Table.types';
 declare module '@tanstack/table-core' {
-    type CellSizingUnits = 'fraction' | 'px' | 'rem';
     interface StringHeaderIdentifier {
         isHeaderHidden?: boolean;
         isHeaderCustom?: boolean;
-        sizeUnit?: CellSizingUnits;
+        sizeUnit?: ColumnSizeUnit;
         getHeaderCellProps?: VoidFunction;
         getCellProps?: VoidFunction;
     }
     interface IdIdentifier<TData, TValue> {
         isHeaderHidden?: boolean;
         isHeaderCustom?: boolean;
-        sizeUnit?: CellSizingUnits;
+        sizeUnit?: ColumnSizeUnit;
         getHeaderCellProps?: (header: Header<TData, unknown>) => HTMLAttributes<HTMLTableCellElement> & Record<string, unknown>;
         getCellProps?: (data: TData, cell: Cell<TData, unknown>) => HTMLAttributes<HTMLTableCellElement> & Record<string, unknown>;
     }

package/dist/Table/utils/plugin.utils.cjs

@@ -17,9 +17,9 @@ const mergeObjects = (key, container1, container2) => {
     }
   } : null;
 };
-const mergePluginsData = (plugins) => {
+const mergePluginsData = (plugins, tableOptions) => {
   const merged = {
-    tableOptions: {},
+    tableOptions: tableOptions ?? {},
     context: {}
   };
   if (!(plugins == null ? void 0 : plugins.length)) {
@@ -45,5 +45,20 @@ const mergePluginsData = (plugins) => {
 const buildPluginContext = (key, context) => ({
   [key]: context
 });
+const normalizeColumns = (columns) => columns.map((column) => {
+  const {
+    size,
+    minSize,
+    sizeUnit
+  } = column;
+  const sizeFix = !minSize && sizeUnit && sizeUnit !== "fraction" && typeof size === "number" && size < 20 ? {
+    minSize: size
+  } : {};
+  return {
+    ...column,
+    ...sizeFix
+  };
+});
 exports.buildPluginContext = buildPluginContext;
 exports.mergePluginsData = mergePluginsData;
+exports.normalizeColumns = normalizeColumns;

package/dist/Table/utils/plugin.utils.d.ts

@@ -1,6 +1,8 @@
 import { TableOptions } from '@tanstack/table-core';
-import { RowData } from '@tanstack/react-table';
+import { ColumnDef, RowData } from '@tanstack/react-table';
+import { SetOptional } from 'type-fest';
 export type PartialTableOptions<T extends RowData> = Partial<Omit<TableOptions<T>, 'columns' | 'data' | 'getRowId' | 'onStateChange' | 'getCoreRowModel' | 'defaultColumn' | 'debugTable' | 'debugRows' | 'debugHeaders' | 'debugColumns' | 'debugCells' | 'debugAll' | 'autoResetAll' | 'meta'>>;
+export type UserTableOptions<T extends RowData> = Omit<SetOptional<TableOptions<T>, 'getCoreRowModel'>, 'data' | 'columns'>;
 export type TablePluginData<T extends RowData> = {
     /** Partial table options that will be smartly merged with other table options */
     tableOptions: PartialTableOptions<T>;
@@ -13,5 +15,6 @@ export type TableMergedData<T extends RowData> = {
     tableOptions: PartialTableOptions<T>;
     context?: Record<string, Record<string, unknown>>;
 };
-export declare const mergePluginsData: <T extends unknown>(plugins?: TablePluginData<T>[] | undefined) => TableMergedData<T>;
+export declare const mergePluginsData: <T extends unknown>(plugins?: TablePluginData<T>[] | undefined, tableOptions?: UserTableOptions<T> | undefined) => TableMergedData<T>;
 export declare const buildPluginContext: (key: string, context: Record<string, unknown>) => Record<string, Record<string, unknown>>;
+export declare const normalizeColumns: <T extends object>(columns: ColumnDef<T, unknown>[]) => ColumnDef<T, unknown>[];

package/dist/Table/utils/plugin.utils.js

@@ -15,9 +15,9 @@ const mergeObjects = (key, container1, container2) => {
     }
   } : null;
 };
-const mergePluginsData = (plugins) => {
+const mergePluginsData = (plugins, tableOptions) => {
   const merged = {
-    tableOptions: {},
+    tableOptions: tableOptions ?? {},
     context: {}
   };
   if (!(plugins == null ? void 0 : plugins.length)) {
@@ -43,7 +43,22 @@ const mergePluginsData = (plugins) => {
 const buildPluginContext = (key, context) => ({
   [key]: context
 });
+const normalizeColumns = (columns) => columns.map((column) => {
+  const {
+    size,
+    minSize,
+    sizeUnit
+  } = column;
+  const sizeFix = !minSize && sizeUnit && sizeUnit !== "fraction" && typeof size === "number" && size < 20 ? {
+    minSize: size
+  } : {};
+  return {
+    ...column,
+    ...sizeFix
+  };
+});
 export {
   buildPluginContext,
-  mergePluginsData
+  mergePluginsData,
+  normalizeColumns
 };

package/dist/Table/utils/table.utils.cjs

@@ -10,4 +10,17 @@ const getWidth = (column) => {
   const unit = !sizeUnit || sizeUnit === "fraction" ? "%" : sizeUnit;
   return `${size}${unit}`;
 };
+const calcTableMinSize = (columns) => {
+  if (!(columns == null ? void 0 : columns.length)) return "0";
+  const sums = columns.reduce((acc, {
+    sizeUnit,
+    size = 150
+  }) => {
+    const unit = !sizeUnit || sizeUnit === "fraction" ? "px" : sizeUnit;
+    acc[unit] = (acc[unit] || 0) + size;
+    return acc;
+  }, {});
+  return `calc(${Object.entries(sums).map(([sizeUnit, size]) => `${size}${sizeUnit}`).join(" + ")})`;
+};
+exports.calcTableMinSize = calcTableMinSize;
 exports.getWidth = getWidth;

package/dist/Table/utils/table.utils.d.ts

@@ -1,2 +1,14 @@
 import { Column } from '@tanstack/react-table';
+import type { ColumnSizeUnit } from '../Table.types';
 export declare const getWidth: <T extends object>(column: Column<T, unknown>) => string | number;
+export type SizeParams = {
+    size?: number;
+    sizeUnit?: ColumnSizeUnit;
+};
+/**
+ * Calculates expected minimal table size, using column definition size and sizeUnit fields.
+ * Fractional size is accepted as absolute value in pixels, other units as is.
+ * Summary string is CSS-only value (`calc(...)`),
+ * that can be used for styling or can be passed to the minWidth prop of the table
+ */
+export declare const calcTableMinSize: (columns: SizeParams[]) => string;

package/dist/Table/utils/table.utils.js

@@ -8,6 +8,19 @@ const getWidth = (column) => {
   const unit = !sizeUnit || sizeUnit === "fraction" ? "%" : sizeUnit;
   return `${size}${unit}`;
 };
+const calcTableMinSize = (columns) => {
+  if (!(columns == null ? void 0 : columns.length)) return "0";
+  const sums = columns.reduce((acc, {
+    sizeUnit,
+    size = 150
+  }) => {
+    const unit = !sizeUnit || sizeUnit === "fraction" ? "px" : sizeUnit;
+    acc[unit] = (acc[unit] || 0) + size;
+    return acc;
+  }, {});
+  return `calc(${Object.entries(sums).map(([sizeUnit, size]) => `${size}${sizeUnit}`).join(" + ")})`;
+};
 export {
+  calcTableMinSize,
   getWidth
 };

package/dist/index.cjs

@@ -5,6 +5,7 @@ const ShowOnRowHover_style = require("./Table/components/ShowOnRowHover/ShowOnRo
 const index = require("./node_modules/@tanstack/react-table/build/lib/index.cjs");
 const Table_context = require("./Table/Table.context.cjs");
 const plugin_utils = require("./Table/utils/plugin.utils.cjs");
+const table_utils = require("./Table/utils/table.utils.cjs");
 const index$1 = require("./node_modules/@tanstack/table-core/build/lib/index.cjs");
 exports.Table = Table.default;
 exports.ShowOnRowHover = ShowOnRowHover_style.ShowOnRowHover;
@@ -15,6 +16,7 @@ exports.useComposeContext = Table_context.useComposeContext;
 exports.usePluginContext = Table_context.usePluginContext;
 exports.useTableContext = Table_context.useTableContext;
 exports.buildPluginContext = plugin_utils.buildPluginContext;
+exports.calcTableMinSize = table_utils.calcTableMinSize;
 exports.ColumnFaceting = index$1.ColumnFaceting;
 exports.ColumnFiltering = index$1.ColumnFiltering;
 exports.ColumnGrouping = index$1.ColumnGrouping;

package/dist/index.js

@@ -3,6 +3,7 @@ import { ShowOnRowHover } from "./Table/components/ShowOnRowHover/ShowOnRowHover
 import { flexRender, useReactTable } from "./node_modules/@tanstack/react-table/build/lib/index.js";
 import { TableContextProvider, useComposeContext, usePluginContext, useTableContext } from "./Table/Table.context.js";
 import { buildPluginContext } from "./Table/utils/plugin.utils.js";
+import { calcTableMinSize } from "./Table/utils/table.utils.js";
 import { ColumnFaceting, ColumnFiltering, ColumnGrouping, ColumnOrdering, ColumnPinning, ColumnSizing, ColumnVisibility, GlobalFaceting, GlobalFiltering, Headers, RowExpanding, RowPagination, RowPinning, RowSelection, RowSorting, _getVisibleLeafColumns, aggregationFns, buildHeaderGroups, createCell, createColumn, createColumnHelper, createRow, createTable, defaultColumnSizing, expandRows, filterFns, flattenBy, functionalUpdate, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, isFunction, isNumberArray, isRowSelected, isSubRowSelected, makeStateUpdater, memo, noop, orderColumns, passiveEventSupported, reSplitAlphaNumeric, selectRowsFn, shouldAutoRemoveFilter, sortingFns } from "./node_modules/@tanstack/table-core/build/lib/index.js";
 export {
   ColumnFaceting,
@@ -27,6 +28,7 @@ export {
   aggregationFns,
   buildHeaderGroups,
   buildPluginContext,
+  calcTableMinSize,
   createCell,
   createColumn,
   createColumnHelper,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/table",
   "license": "UNLICENSED",
-  "version": "2.23.2",
+  "version": "3.3.2",
   "type": "module",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
@@ -29,11 +29,11 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0",
-    "@redis-ui/styles": "^13.1.10"
+    "@redis-ui/styles": "^14.4.2"
   },
   "dependencies": {
-    "@redis-ui/components": "^41.2.9",
-    "@redis-ui/icons": "^6.3.11",
+    "@redis-ui/components": "^41.5.0",
+    "@redis-ui/icons": "^6.6.0",
     "@tanstack/react-table": "^8.9.8",
     "type-fest": "^3.13.1"
   },