@infinite-table/infinite-react 3.1.0 → 3.1.2

package/index.d.ts

@@ -301,6 +301,7 @@ declare type InfiniteTableColumnRenderParamBase<DATA_TYPE, COL_TYPE = InfiniteTa
     toggleGroupRow: InfiniteTableToggleGroupRowFn;
     toggleCurrentGroupRowSelection: () => void;
     toggleCurrentRowSelection: () => void;
+    rowHasSelectedCells: boolean;
     cellSelected: boolean;
     selectCurrentRow: () => void;
     selectRow: InfiniteTableSelectRowFn;
@@ -345,16 +346,17 @@ declare type InfiniteTableColumnVerticalAlignValues = 'start' | 'center' | 'end'
 declare type InfiniteTableColumnHeader<T> = Renderable | InfiniteTableColumnHeaderRenderFunction<T>;
 declare type InfiniteTableDataTypeNames = 'string' | 'number' | 'date' | string;
 declare type InfiniteTableColumnTypeNames = 'string' | 'number' | 'date' | string;
-declare type InfiniteTableColumnStyleFnParams<T> = {
+declare type InfiniteTableColumnStylingFnParams<T> = {
     value: Renderable;
     column: InfiniteTableComputedColumn<T>;
     inEdit: boolean;
+    rowHasSelectedCells: boolean;
     editError: InfiniteTableColumnRenderParamBase<T>['editError'];
 } & InfiniteTableRowInfoDataDiscriminator<T>;
-declare type InfiniteTableColumnStyleFn<T> = (params: InfiniteTableColumnStyleFnParams<T>) => undefined | React__default.CSSProperties;
+declare type InfiniteTableColumnStyleFn<T> = (params: InfiniteTableColumnStylingFnParams<T>) => undefined | React__default.CSSProperties;
 declare type InfiniteTableColumnHeaderClassNameFn<T> = (params: InfiniteTableColumnHeaderParam<T>) => undefined | string;
 declare type InfiniteTableColumnHeaderStyleFn<T> = (params: InfiniteTableColumnHeaderParam<T>) => undefined | React__default.CSSProperties;
-declare type InfiniteTableColumnClassNameFn<T> = (params: InfiniteTableColumnStyleFnParams<T>) => undefined | string;
+declare type InfiniteTableColumnClassNameFn<T> = (params: InfiniteTableColumnStylingFnParams<T>) => undefined | string;
 declare type InfiniteTableColumnStyle<T> = CSSProperties | InfiniteTableColumnStyleFn<T>;
 declare type InfiniteTableColumnAlign<T> = InfiniteTableColumnAlignValues | InfiniteTableColumnAlignFn<T>;
 declare type InfiniteTableColumnVerticalAlign<T> = InfiniteTableColumnVerticalAlignValues | InfiniteTableColumnVerticalAlignFn<T>;
@@ -362,7 +364,7 @@ declare type InfiniteTableColumnAlignFn<T> = (params: InfiniteTableColumnAlignFn
 declare type InfiniteTableColumnAlignFnParams<T> = XOR<{
     isHeader: true;
     column: InfiniteTableComputedColumn<T>;
-}, InfiniteTableColumnStyleFnParams<T> & {
+}, InfiniteTableColumnStylingFnParams<T> & {
     isHeader: false;
 }>;
 declare type InfiniteTableColumnVerticalAlignFn<T> = (params: InfiniteTableColumnAlignFnParams<T>) => InfiniteTableColumnVerticalAlignValues;
@@ -819,7 +821,16 @@ declare class CellSelectionState {
     private setCellInDeselection;
     private setCellInSelection;
     update(stateObject: CellSelectionStateObject): void;
+    /**
+     * Returns whether there is at least one selected cell in the row
+     *
+     * @param rowId the row id
+     * @param columnIds the columns currently available in the grid
+     * @returns boolean
+     */
+    isCellSelectionInRow(rowId: any, columnIds: string[]): boolean;
     isCellSelected(rowId: any, colId: string): boolean;
+    private isCellSelected_Internal;
     getState(): CellSelectionStateObject;
 }
 
@@ -2027,6 +2038,7 @@ declare type InfiniteTable_RowInfoBase<_T> = {
     indexInAll: number;
     rowSelected: boolean | null;
     isCellSelected: (columnId: string) => boolean;
+    hasSelectedCells: (columnIds: string[]) => boolean;
 };
 declare type InfiniteTable_HasGrouping_RowInfoNormal<T> = {
     dataSourceHasGrouping: true;
@@ -2407,7 +2419,7 @@ declare type MenuProps = {
     onHideIntent?: (state: MenuState) => void;
     bubbleActionsFromSubmenus?: boolean;
     addSubmenuColumnIfNeeded?: boolean;
-    onAction?: (key: string, item: MenuItemObject) => void;
+    onAction?: (param: MenuItemActionContext) => void;
     parentMenuId?: string;
     parentMenuItemKey?: string;
     autoFocus?: boolean;
@@ -2461,11 +2473,14 @@ declare type InfiniteTablePropColumnOrder = InfiniteTablePropColumnOrderNormaliz
 declare type InfiniteTablePropColumnVisibility = Record<string, false>;
 declare type InfiniteTableColumnPinnedValues = false | 'start' | 'end';
 declare type InfiniteTablePropColumnPinning = Record<string, true | 'start' | 'end'>;
-declare type InfiniteTableRowStyleFnParams<T> = {
+declare type InfiniteTableRowStylingFnParams<T> = {
     rowIndex: number;
+    rowHasSelectedCells: boolean;
+    visibleColumnIds: string[];
+    allColumnIds: string[];
 } & InfiniteTableRowInfoDataDiscriminator<T>;
-declare type InfiniteTableRowStyleFn<T> = (params: InfiniteTableRowStyleFnParams<T>) => undefined | React$1.CSSProperties;
-declare type InfiniteTableRowClassNameFn<T> = (params: InfiniteTableRowStyleFnParams<T>) => string | undefined;
+declare type InfiniteTableRowStyleFn<T> = (params: InfiniteTableRowStylingFnParams<T>) => undefined | React$1.CSSProperties;
+declare type InfiniteTableRowClassNameFn<T> = (params: InfiniteTableRowStylingFnParams<T>) => string | undefined;
 declare type InfiniteTableCellClassNameFn<T> = InfiniteTableColumn<T>['className'];
 declare type InfiniteTablePropRowStyle<T> = React$1.CSSProperties | InfiniteTableRowStyleFn<T>;
 declare type InfiniteTablePropCellStyle<T> = InfiniteTableColumn<T>['style'];
@@ -2883,7 +2898,7 @@ interface InfiniteTableProps<T> {
         api: InfiniteTableApi<T>;
         dataSourceApi: DataSourceApi<T>;
     }) => void;
-    rowProps?: React$1.HTMLProps<HTMLDivElement> | ((rowArgs: InfiniteTableRowStyleFnParams<T>) => React$1.HTMLProps<HTMLDivElement>);
+    rowProps?: React$1.HTMLProps<HTMLDivElement> | ((rowArgs: InfiniteTableRowStylingFnParams<T>) => React$1.HTMLProps<HTMLDivElement>);
     licenseKey?: string;
     scrollTopKey?: string | number;
     autoSizeColumnsKey?: InfiniteTablePropAutoSizeColumnsKey;

package/index.dev.js

@@ -7520,7 +7520,7 @@ function getColumnValueToEdit(options) {
 }
 function getColumnRenderingParams(options) {
   var _a, _b;
-  const { column, context, rowInfo } = options;
+  const { column, context, rowInfo, visibleColumnsIds } = options;
   const groupByColumnReference = getGroupByColumnReference({
     rowInfo,
     column,
@@ -7540,10 +7540,16 @@ function getColumnRenderingParams(options) {
   });
   const stylingParam = __spreadProps(__spreadValues({
     column: options.column,
-    inEdit
+    inEdit,
+    rowHasSelectedCells: false
   }, formattedValueContext), {
     editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0
   });
+  Object.defineProperty(stylingParam, "rowHasSelectedCells", {
+    get() {
+      return rowInfo.hasSelectedCells(visibleColumnsIds);
+    }
+  });
   const align2 = typeof column.align === "function" ? column.align(__spreadValues({ isHeader: false }, stylingParam)) : (_a = column.align) != null ? _a : "start";
   const verticalAlign = typeof column.verticalAlign === "function" ? column.verticalAlign(__spreadValues({ isHeader: false }, stylingParam)) : (_b = column.verticalAlign) != null ? _b : "center";
   return {
@@ -7573,6 +7579,7 @@ function getColumnRenderParam(options) {
     rowInfo,
     align: align2,
     verticalAlign,
+    visibleColumnsIds,
     columnsMap,
     fieldsToColumn,
     formattedValueContext
@@ -7597,7 +7604,8 @@ function getColumnRenderParam(options) {
     fieldsToColumn,
     align: align2,
     verticalAlign,
-    cellSelected
+    cellSelected,
+    rowHasSelectedCells: false
   }, formattedValueContext), {
     editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
     groupByColumn,
@@ -7662,6 +7670,11 @@ function getColumnRenderParam(options) {
     rootGroupBy: dataSourceState.groupBy,
     pivotBy: dataSourceState.pivotBy
   });
+  Object.defineProperty(renderParam, "rowHasSelectedCells", {
+    get() {
+      return rowInfo.hasSelectedCells(visibleColumnsIds);
+    }
+  });
   return renderParam;
 }
 function getRawValueForCell(column, rowInfo) {
@@ -7937,10 +7950,12 @@ function InfiniteTableColumnCellFn(props) {
     api: imperativeApi,
     dataSourceApi
   };
+  const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
   const colRenderingParams = getColumnRenderingParams({
     column,
     rowInfo,
     columnsMap,
+    visibleColumnsIds,
     fieldsToColumn,
     context: renderingContext
   });
@@ -8007,105 +8022,119 @@ function InfiniteTableColumnCellFn(props) {
   );
   const EditorComponent = (_b = (_a = column.components) == null ? void 0 : _a.Editor) != null ? _b : InfiniteTableColumnEditor;
   const editor = inEdit ? /* @__PURE__ */ React36.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React36.createElement(EditorComponent, null)) : null;
-  const renderChildren = (0, import_react25.useCallback)(() => {
-    if (hidden) {
-      return null;
-    }
-    if (inEdit) {
-      return null;
-    }
-    if (renderFunctions.renderGroupIcon) {
-      renderParam.renderBag.groupIcon = /* @__PURE__ */ React36.createElement(
-        RenderCellHookComponent,
-        {
-          render: renderFunctions.renderGroupIcon,
-          renderParam: __spreadProps(__spreadValues({}, renderParam), {
-            renderBag: __spreadValues({}, renderParam.renderBag)
-          })
-        }
-      );
-    }
-    if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
-      renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
-        RenderCellHookComponent,
-        {
-          render: defaultRenderSelectionCheckBox,
-          renderParam
-        }
-      );
-      if (renderFunctions.renderSelectionCheckBox !== true) {
-        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+  const renderChildren = (0, import_react25.useCallback)(
+    once(() => {
+      if (hidden) {
+        return null;
+      }
+      if (inEdit) {
+        return null;
+      }
+      if (renderFunctions.renderGroupIcon) {
+        renderParam.renderBag.groupIcon = /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
-            render: renderFunctions.renderSelectionCheckBox,
+            render: renderFunctions.renderGroupIcon,
             renderParam: __spreadProps(__spreadValues({}, renderParam), {
               renderBag: __spreadValues({}, renderParam.renderBag)
             })
           }
         );
       }
-    }
-    if (renderFunctions.renderValue) {
-      renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
-        RenderCellHookComponent,
-        {
-          render: renderFunctions.renderValue,
-          renderParam: __spreadProps(__spreadValues({}, renderParam), {
-            renderBag: __spreadValues({}, renderParam.renderBag)
-          })
-        }
-      );
-    }
-    if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
-      renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
-        RenderCellHookComponent,
-        {
-          render: renderFunctions.renderGroupValue,
-          renderParam: __spreadProps(__spreadValues({}, renderParam), {
-            renderBag: __spreadValues({}, renderParam.renderBag)
-          })
-        }
-      );
-    }
-    if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
-      renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
-        RenderCellHookComponent,
-        {
-          render: renderFunctions.renderLeafValue,
-          renderParam: __spreadProps(__spreadValues({}, renderParam), {
-            renderBag: __spreadValues({}, renderParam.renderBag)
-          })
-        }
-      );
-    }
-    renderParamRef.current = renderParam;
-    let valueToRender = renderParam.renderBag.value;
-    if (valueToRender instanceof Date) {
-      valueToRender = valueToRender.toLocaleDateString();
-    }
-    const all = /* @__PURE__ */ React36.createElement(React36.Fragment, null, align2 !== "end" ? renderParam.renderBag.groupIcon : null, align2 !== "end" ? renderParam.renderBag.selectionCheckBox : null, valueToRender, align2 === "end" ? renderParam.renderBag.selectionCheckBox : null, align2 === "end" ? renderParam.renderBag.groupIcon : null);
-    if (column.render) {
-      return /* @__PURE__ */ React36.createElement(
-        RenderCellHookComponent,
-        {
-          render: column.render,
-          renderParam: __spreadProps(__spreadValues({}, renderParam), {
-            renderBag: __spreadProps(__spreadValues({}, renderParam.renderBag), { all })
-          })
+      if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
+        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+          RenderCellHookComponent,
+          {
+            render: defaultRenderSelectionCheckBox,
+            renderParam
+          }
+        );
+        if (renderFunctions.renderSelectionCheckBox !== true) {
+          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+            RenderCellHookComponent,
+            {
+              render: renderFunctions.renderSelectionCheckBox,
+              renderParam: __spreadProps(__spreadValues({}, renderParam), {
+                renderBag: __spreadValues({}, renderParam.renderBag)
+              })
+            }
+          );
         }
-      );
-    }
-    return all;
-  }, [
-    column,
-    hidden,
-    inEdit,
-    ...objectValuesExcept(renderParam, {
-      renderBag: true
-    })
-  ]);
+      }
+      if (renderFunctions.renderValue) {
+        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+          RenderCellHookComponent,
+          {
+            render: renderFunctions.renderValue,
+            renderParam: __spreadProps(__spreadValues({}, renderParam), {
+              renderBag: __spreadValues({}, renderParam.renderBag)
+            })
+          }
+        );
+      }
+      if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
+        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+          RenderCellHookComponent,
+          {
+            render: renderFunctions.renderGroupValue,
+            renderParam: __spreadProps(__spreadValues({}, renderParam), {
+              renderBag: __spreadValues({}, renderParam.renderBag)
+            })
+          }
+        );
+      }
+      if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
+        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+          RenderCellHookComponent,
+          {
+            render: renderFunctions.renderLeafValue,
+            renderParam: __spreadProps(__spreadValues({}, renderParam), {
+              renderBag: __spreadValues({}, renderParam.renderBag)
+            })
+          }
+        );
+      }
+      renderParamRef.current = renderParam;
+      let valueToRender = renderParam.renderBag.value;
+      if (valueToRender instanceof Date) {
+        valueToRender = valueToRender.toLocaleDateString();
+      }
+      const all = /* @__PURE__ */ React36.createElement(React36.Fragment, null, align2 !== "end" ? renderParam.renderBag.groupIcon : null, align2 !== "end" ? renderParam.renderBag.selectionCheckBox : null, valueToRender, align2 === "end" ? renderParam.renderBag.selectionCheckBox : null, align2 === "end" ? renderParam.renderBag.groupIcon : null);
+      if (column.render) {
+        return /* @__PURE__ */ React36.createElement(
+          RenderCellHookComponent,
+          {
+            render: column.render,
+            renderParam: __spreadProps(__spreadValues({}, renderParam), {
+              renderBag: __spreadProps(__spreadValues({}, renderParam.renderBag), { all })
+            })
+          }
+        );
+      }
+      return all;
+    }),
+    [
+      column,
+      hidden,
+      inEdit,
+      ...objectValuesExcept(renderParam, {
+        renderBag: true
+      })
+    ]
+  );
+  const visibleColumnIds = computed.computedVisibleColumns.map((x) => x.id);
+  const allColumnIds = computed.computedColumnOrder;
   const rowPropsAndStyleArgs = __spreadProps(__spreadValues({}, formattedValueContext), {
-    rowIndex
+    visibleColumnIds,
+    allColumnIds,
+    rowIndex,
+    // we put it as false by default
+    rowHasSelectedCells: false
+  });
+  Object.defineProperty(rowPropsAndStyleArgs, "rowHasSelectedCells", {
+    get() {
+      return rowInfo.hasSelectedCells(visibleColumnIds);
+    }
   });
   const rowComputedClassName = typeof rowClassName === "function" ? rowClassName(rowPropsAndStyleArgs) : rowClassName;
   let colClassName = void 0;
@@ -10311,6 +10340,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     collapsed: false,
     dataSourceHasGrouping: true,
     isCellSelected: returnFalse,
+    hasSelectedCells: returnFalse,
     selfLoaded,
     error: options.error,
     parents,
@@ -10447,6 +10477,7 @@ function enhancedFlatten(param) {
                 id: itemId,
                 data: item,
                 isCellSelected: returnFalse,
+                hasSelectedCells: returnFalse,
                 dataSourceHasGrouping: true,
                 isGroupRow: false,
                 selfLoaded: !!item,
@@ -11741,6 +11772,7 @@ function getRowSelectionApi(param) {
 }
 
 // src/components/DataSource/CellSelectionState.ts
+var debug4 = dbg("CellSelectionState");
 var WILDCARD = "*";
 var CellSelectionState = class {
   constructor(clone) {
@@ -11783,7 +11815,7 @@ var CellSelectionState = class {
   setCellSelected(rowId, colId, selected) {
     const wildcardRow = rowId === this.wildcard;
     const wildcardColumn = colId === this.wildcard;
-    const isSelected = this.isCellSelected(rowId, colId);
+    const isSelected = this.isCellSelected_Internal(rowId, colId);
     if (isSelected === selected) {
       return;
     }
@@ -11961,7 +11993,54 @@ var CellSelectionState = class {
     }
     this.defaultSelection = stateObject.defaultSelection;
   }
+  /**
+   * Returns whether there is at least one selected cell in the row
+   *
+   * @param rowId the row id
+   * @param columnIds the columns currently available in the grid
+   * @returns boolean
+   */
+  isCellSelectionInRow(rowId, columnIds) {
+    if (this.defaultSelection) {
+      const cols2 = this.deselectedRowsToColumns.get(rowId);
+      if (cols2) {
+        if (cols2.has(this.wildcard)) {
+          const explicitlySelectedCols = this.selectedRowsToColumns.get(rowId);
+          return explicitlySelectedCols && explicitlySelectedCols.size > 0 ? columnIds.some((colId) => explicitlySelectedCols.has(colId)) : false;
+        }
+        return columnIds.some((colId) => !cols2.has(colId));
+      }
+      return true;
+    }
+    const cols = this.selectedRowsToColumns.get(rowId);
+    if (cols) {
+      if (cols.has(this.wildcard)) {
+        const explicitlyDeselectedCols = this.deselectedRowsToColumns.get(rowId);
+        if (explicitlyDeselectedCols && explicitlyDeselectedCols.size > 0) {
+          const allDeselected = columnIds.every(
+            (colId) => explicitlyDeselectedCols.has(colId)
+          );
+          return !allDeselected;
+        }
+        return true;
+      }
+      return columnIds ? columnIds.some((colId) => cols.has(colId)) : false;
+    }
+    return false;
+  }
   isCellSelected(rowId, colId) {
+    if (rowId === this.wildcard || colId === this.wildcard) {
+      console.error(
+        `CellSelectionState.isCellSelected should not be called with wildcard`
+      );
+      debug4(
+        `CellSelectionState.isCellSelected should not be called with wildcard`
+      );
+      return false;
+    }
+    return this.isCellSelected_Internal(rowId, colId);
+  }
+  isCellSelected_Internal(rowId, colId) {
     var _a, _b;
     const cacheKey = [rowId, colId];
     const { cache } = this;
@@ -12609,7 +12688,8 @@ function toRowInfo(data, id, index, isRowSelected, cellSelectionState) {
     isGroupRow: false,
     selfLoaded: true,
     rowSelected: false,
-    isCellSelected: returnFalse2
+    isCellSelected: returnFalse2,
+    hasSelectedCells: returnFalse2
   };
   if (isRowSelected) {
     rowInfo.rowSelected = isRowSelected(rowInfo);
@@ -12618,6 +12698,9 @@ function toRowInfo(data, id, index, isRowSelected, cellSelectionState) {
     rowInfo.isCellSelected = (colId) => {
       return cellSelectionState.isCellSelected(rowInfo.id, colId);
     };
+    rowInfo.hasSelectedCells = (columnIds) => {
+      return cellSelectionState.isCellSelectionInRow(rowInfo.id, columnIds);
+    };
   }
   return rowInfo;
 }
@@ -12748,6 +12831,7 @@ function concludeReducer(params) {
   const shouldGroup = groupBy.length > 0 || !!pivotBy;
   const selectionDepsChanged = haveDepsChanged(previousState, state, [
     "rowSelection",
+    "cellSelection",
     "isRowSelected",
     "originalLazyGroupDataChangeDetect"
   ]);
@@ -15879,13 +15963,13 @@ function useColumnRowspan(computedVisibleColumns) {
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
 var import_react42 = require("react");
-var debug4 = dbg("useColumnSizeFn");
+var debug5 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
   const columnSize = (0, import_react42.useCallback)(
     (index) => {
       const column = columns[index];
       if (false) {
-        debug4("cannot find column at index", index, columns);
+        debug5("cannot find column at index", index, columns);
       }
       return column ? column.computedWidth : 0;
     },
@@ -17260,7 +17344,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react50.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.1.0"
+      version: "3.1.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19327,15 +19411,16 @@ function MenuComponent(props) {
     if (item.originalMenuItem.onClick) {
       item.originalMenuItem.onClick(event);
     }
+    const onActionParam = {
+      key: item.key,
+      item: item.originalMenuItem,
+      hideMenu: hideAll
+    };
     if (item.originalMenuItem.onAction) {
-      item.originalMenuItem.onAction({
-        key: item.key,
-        item: item.originalMenuItem,
-        hideMenu: hideAll
-      });
+      item.originalMenuItem.onAction(onActionParam);
     }
     if (onAction) {
-      onAction(item.key, item.originalMenuItem);
+      onAction(onActionParam);
     }
     if (item.originalMenuItem.hideMenuOnAction) {
       hideAll();