@infinite-table/infinite-react 1.3.20 → 1.3.22

package/index.d.ts

@@ -492,9 +492,6 @@ declare type InfiniteTableComputedColumnBase<T> = {
     computedFirst: boolean;
     computedLast: boolean;
     computedEditable: NonUndefined<InfiniteTableColumn<T>['defaultEditable']>;
-    toggleSort: (params?: {
-        multiSortBehavior: InfiniteTablePropMultiSortBehavior;
-    }) => void;
     colType: InfiniteTableColumnType<T>;
     id: string;
 };
@@ -1222,6 +1219,7 @@ interface InfiniteTableMappedState<T> {
     showSeparatePivotColumnForSingleAggregation: NonUndefined<InfiniteTableProps<T>['showSeparatePivotColumnForSingleAggregation']>;
     domProps: InfiniteTableProps<T>['domProps'];
     editable: InfiniteTableProps<T>['editable'];
+    columnMenuRealignDelay: NonUndefined<InfiniteTableProps<T>['columnMenuRealignDelay']>;
     columnDefaultEditable: InfiniteTableProps<T>['columnDefaultEditable'];
     columnDefaultFilterable: InfiniteTableProps<T>['columnDefaultFilterable'];
     rowStyle: InfiniteTableProps<T>['rowStyle'];
@@ -1654,6 +1652,7 @@ interface DataSourceApi<T> {
     addDataArray(data: T[], options?: DataSourceCRUDParam): Promise<any>;
     insertData(data: T, options: DataSourceInsertParam): Promise<any>;
     insertDataArray(data: T[], options: DataSourceInsertParam): Promise<any>;
+    setSortInfo(sortInfo: null | DataSourceSingleSortInfo<T>[]): void;
 }
 declare type DataSourcePropRowInfoReducers<T> = Record<string, DataSourceRowInfoReducer<T>>;
 declare type DataSourceRowInfoReducer<T> = DataSourceRawReducer<InfiniteTableRowInfo<T>, any>;
@@ -2370,9 +2369,11 @@ declare type InfiniteTableColumnApi<_T> = {
     toggleFilterOperatorMenu: (target: EventTarget | HTMLElement) => void;
     hideFilterOperatorMenu: () => void;
     isVisible: () => boolean;
-    toggleSort: () => void;
+    getSortInfo: () => DataSourceSingleSortInfo<_T> | null;
+    getSortDir(): SortDir | null;
+    toggleSort: (options?: MultiSortBehaviorOptions) => void;
     clearSort: () => void;
-    setSort: (sort: SortDir | null) => void;
+    setSort: (sort: SortDir | null, options?: MultiSortBehaviorOptions) => void;
     setFilter: (value: any) => void;
     clearFilter: (value: any) => void;
     getCellValuesByPrimaryKey: (id: any) => null | ColumnCellValues;
@@ -2406,10 +2407,14 @@ declare type InfiniteTableApiStopEditPromiseResolveType = {
     reject: Error;
     value: any;
 } | boolean;
+declare type MultiSortBehaviorOptions = {
+    multiSortBehavior?: InfiniteTablePropMultiSortBehavior;
+};
 interface InfiniteTableApi<T> {
     get selectionApi(): InfiniteTableSelectionApi;
     setColumnOrder: (columnOrder: InfiniteTablePropColumnOrder) => void;
     setColumnVisibility: (columnVisibility: InfiniteTablePropColumnVisibility) => void;
+    isDestroyed: () => boolean;
     clearEditInfo: () => void;
     hideContextMenu: () => void;
     realignColumnContextMenu: () => void;
@@ -2441,12 +2446,16 @@ interface InfiniteTableApi<T> {
     collapseGroupRow: (groupKeys: any[]) => boolean;
     expandGroupRow: (groupKeys: any[]) => boolean;
     setSortInfoForColumn: (columnId: string, sortInfo: DataSourceSingleSortInfo<T> | null) => void;
+    getSortInfoForColumn: (columnId: string) => DataSourceSingleSortInfo<T> | null;
+    getSortTypeForColumn: (columnId: string) => string | null;
+    toggleSortingForColumn: (columnId: string, options?: MultiSortBehaviorOptions) => void;
     setColumnFilter: (columnId: string, filterValue: any) => void;
     setColumnFilterOperator: (columnId: string, operator: string) => void;
     clearColumnFilter: (columnId: string) => void;
     setFilterValueForColumn: (columnId: string, filterValue: DataSourceFilterValueItem<T>) => void;
     setPinningForColumn: (columnId: string, pinning: InfiniteTableColumnPinnedValues) => void;
     setSortingForColumn: (columnId: string, dir: SortDir | null) => void;
+    getSortingForColumn: (columnId: string) => SortDir | null;
     getColumnApi: (columnId: string) => InfiniteTableColumnApi<T> | null;
     setVisibilityForColumn: (columnId: string, visible: boolean) => void;
     getVisibleColumnsCount: () => number;
@@ -2655,6 +2664,14 @@ interface InfiniteTableProps<T> {
     onSelfBlur?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
     onFocusWithin?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
     onBlurWithin?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * When a column is hidden by using the column menu, the column menu will stay open,
+     * so it needs (generally) to be realigned to the correct location. This prop
+     * configures the delay in milliseconds before the column menu is realigned.
+     *
+     * @default 50
+     */
+    columnMenuRealignDelay?: number;
     onScrollToTop?: () => void;
     onScrollToBottom?: () => void;
     scrollStopDelay?: number;

package/index.dev.js

@@ -5281,7 +5281,10 @@ function getColumnApiForColumn(colOrColId, param) {
     toggleSort(params = {
       multiSortBehavior: "replace"
     }) {
-      column.toggleSort(params);
+      return api.toggleSortingForColumn(column.id, params);
+    },
+    getSortDir() {
+      return api.getSortingForColumn(column.id);
     },
     setFilter(value) {
       return api.setColumnFilter(column.id, value);
@@ -5289,6 +5292,9 @@ function getColumnApiForColumn(colOrColId, param) {
     clearFilter() {
       return api.clearColumnFilter(column.id);
     },
+    getSortInfo() {
+      return api.getSortInfoForColumn(column.id);
+    },
     setSort(sort) {
       if (!sort) {
         api.setSortInfoForColumn(column.id, null);
@@ -6525,7 +6531,7 @@ var useColumnPointerEvents = ({
         target2.removeEventListener("pointerup", onPointerUp);
         setProxyPosition(null);
         if (!didDragAtLeastOnce && dragColumn.computedSortable) {
-          dragColumn.toggleSort({
+          api.toggleSortingForColumn(dragColumn.id, {
             multiSortBehavior: multiSortBehavior === "replace" && (e2.ctrlKey || e2.metaKey) ? "append" : multiSortBehavior
           });
         }
@@ -10628,6 +10634,15 @@ var DataSourceApiImpl = class {
     }
     return result;
   }
+  setSortInfo(sortInfo) {
+    const multiSort = this.getState().multiSort;
+    if (Array.isArray(sortInfo)) {
+      this.actions.sortInfo = sortInfo.length ? multiSort ? sortInfo : sortInfo[0] : null;
+      return;
+    }
+    this.actions.sortInfo = sortInfo;
+    return;
+  }
 };
 function getCacheAffectedParts(state) {
   const cache = state.cache;
@@ -13486,7 +13501,29 @@ function realignColumnContextMenu(param) {
   return colId;
 }
 
+// src/components/InfiniteTable/types/Utility.ts
+function notNullable(value) {
+  if (value === null || value === void 0)
+    return false;
+  const testDummyForCompileError = value;
+  return true;
+}
+
 // src/components/InfiniteTable/api/getImperativeApi.ts
+function isSortInfoForColumn(sortInfo, col) {
+  if (sortInfo.id) {
+    if (sortInfo.id === col.id) {
+      return true;
+    }
+    return false;
+  }
+  if (sortInfo.field) {
+    if (sortInfo.field === col.field) {
+      return true;
+    }
+  }
+  return false;
+}
 var InfiniteTableApiImpl = class {
   constructor(context) {
     this.persistEdit = (arg) => __async(this, null, function* () {
@@ -13785,6 +13822,9 @@ var InfiniteTableApiImpl = class {
   get dataSourceActions() {
     return this.context.dataSourceActions;
   }
+  get dataSourceApi() {
+    return this.context.dataSourceApi;
+  }
   focus() {
     var _a;
     (_a = this.getState().scrollerDOMRef.current) == null ? void 0 : _a.focus();
@@ -13793,12 +13833,27 @@ var InfiniteTableApiImpl = class {
     this.actions.contextMenuVisibleFor = null;
     this.actions.cellContextMenuVisibleFor = null;
   }
-  realignColumnContextMenu() {
-    realignColumnContextMenu({
+  realignColumnContextMenu(callback) {
+    const param = {
       actions: this.actions,
       getState: this.getState,
       getComputed: this.getComputed
-    });
+    };
+    const delay = this.getState().columnMenuRealignDelay;
+    if (!delay || delay < 0) {
+      realignColumnContextMenu(param);
+      callback == null ? void 0 : callback();
+    }
+    setTimeout(() => {
+      if (this.isDestroyed()) {
+        return;
+      }
+      realignColumnContextMenu(param);
+      callback == null ? void 0 : callback();
+    }, delay);
+  }
+  isDestroyed() {
+    return !this.getState().domRef.current;
   }
   getColumnOrder() {
     return this.getComputed().computedColumnOrder;
@@ -13905,29 +13960,121 @@ var InfiniteTableApiImpl = class {
       }
     }
   }
-  setSortingForColumn(columnId, dir, options) {
+  toggleSortingForColumn(columnId, options) {
     const col = this.getComputed().computedColumnsMap.get(columnId);
     if (!col) {
       return;
     }
+    let dir = this.getSortingForColumn(columnId);
+    if (dir === null) {
+      dir = 1;
+    } else {
+      dir = dir === 1 ? -1 : null;
+    }
+    this.setSortingForColumn(columnId, dir, options);
+  }
+  setSortingForColumn(columnId, dir, options) {
+    const c = this.getComputed().computedColumnsMap.get(columnId);
+    if (!c) {
+      return;
+    }
+    const currentSorting = this.getSortingForColumn(columnId);
+    if (currentSorting === dir) {
+      if (this.getDataSourceState().multiSort === false) {
+        return;
+      }
+    }
     if (dir === null) {
       this.setSortInfoForColumn(columnId, null, options);
       return;
     }
-    const sortInfo = {
-      dir
+    const groupByForColumn = c.groupByForColumn;
+    let field = c.field;
+    const groupByForCol = groupByForColumn ? Array.isArray(groupByForColumn) ? groupByForColumn : [groupByForColumn] : [];
+    const fieldArr = groupByForCol.map((c2) => {
+      var _a;
+      return c2.valueGetter ? (item) => c2.valueGetter({ data: item, field: c2.field }) : c2.field ? c2.field : (_a = c2.groupField) != null ? _a : void 0;
+    }).filter(notNullable);
+    if (fieldArr.length) {
+      field = fieldArr;
+    }
+    const computedSortType = c.computedSortType;
+    const newColumnSortInfo = {
+      dir,
+      id: c.id,
+      field,
+      type: computedSortType
     };
-    const field = col.groupByForColumn ? col.groupByForColumn : col.field;
-    if (field) {
-      sortInfo.field = field;
+    if (c.valueGetter) {
+      newColumnSortInfo.valueGetter = (data) => c.valueGetter({ data, field: c.field });
+    }
+    this.setSortInfoForColumn(columnId, newColumnSortInfo, options);
+  }
+  setSortInfoForColumn(columnId, columnSortInfo, options) {
+    var _a, _b, _c;
+    const dataSourceState = this.getDataSourceState();
+    const col = this.getComputed().computedColumnsMap.get(columnId);
+    if (!col) {
+      return;
+    }
+    if (!dataSourceState.multiSort) {
+      this.dataSourceApi.setSortInfo(columnSortInfo ? [columnSortInfo] : null);
+      return;
+    }
+    const colField = col.field;
+    const colInfo = {
+      id: columnId,
+      field: colField
+    };
+    let newSortInfo = (_b = (_a = dataSourceState.sortInfo) == null ? void 0 : _a.slice()) != null ? _b : [];
+    if (columnSortInfo === null) {
+      newSortInfo = newSortInfo.filter(
+        (sortInfo) => !isSortInfoForColumn(sortInfo, colInfo)
+      );
+      this.dataSourceApi.setSortInfo(newSortInfo);
+      return;
+    }
+    let matched = false;
+    const multiSortBehavior = (_c = options == null ? void 0 : options.multiSortBehavior) != null ? _c : this.getState().multiSortBehavior;
+    if (multiSortBehavior === "replace") {
+      this.dataSourceApi.setSortInfo([columnSortInfo]);
+      return;
+    }
+    newSortInfo = newSortInfo.map((sortInfo) => {
+      if (matched) {
+        return sortInfo;
+      }
+      if (isSortInfoForColumn(sortInfo, colInfo)) {
+        matched = true;
+        return columnSortInfo;
+      }
+      return sortInfo;
+    });
+    if (!matched) {
+      newSortInfo.push(columnSortInfo);
+    }
+    this.dataSourceApi.setSortInfo(newSortInfo);
+  }
+  getSortTypeForColumn(columnId) {
+    const col = this.getComputed().computedColumnsMap.get(columnId);
+    if (!col) {
+      return null;
     }
-    if (col.computedSortType) {
-      sortInfo.type = col.computedSortType;
+    return col.computedSortType;
+  }
+  getSortInfoForColumn(columnId) {
+    const col = this.getComputed().computedColumnsMap.get(columnId);
+    if (!col) {
+      return null;
     }
-    if (col.valueGetter) {
-      sortInfo.valueGetter = (data) => col.valueGetter({ data, field: col.field });
+    return col.computedSortInfo;
+  }
+  getSortingForColumn(columnId) {
+    const sortInfo = this.getSortInfoForColumn(columnId);
+    if (!sortInfo) {
+      return null;
     }
-    this.setSortInfoForColumn(columnId, sortInfo, options);
+    return sortInfo.dir;
   }
   setPinningForColumn(columnId, pinning) {
     const columnPinning = __spreadValues({}, this.getState().columnPinning);
@@ -14048,69 +14195,6 @@ var InfiniteTableApiImpl = class {
       this.dataSourceActions.filterValue = newFilterValue;
     }
   }
-  setSortInfoForColumn(columnId, columnSortInfo, options) {
-    var _a, _b, _c;
-    const dataSourceState = this.getDataSourceState();
-    const col = this.getComputed().computedColumnsMap.get(columnId);
-    if (!col) {
-      return;
-    }
-    if (!dataSourceState.multiSort) {
-      this.dataSourceActions.sortInfo = columnSortInfo ? [columnSortInfo] : null;
-      return;
-    }
-    const colField = col.field;
-    let newSortInfo = (_b = (_a = dataSourceState.sortInfo) == null ? void 0 : _a.slice()) != null ? _b : [];
-    if (columnSortInfo === null) {
-      newSortInfo = newSortInfo.filter((sortInfo) => {
-        if (sortInfo.id) {
-          if (sortInfo.id === columnId) {
-            return false;
-          }
-          return true;
-        }
-        if (sortInfo.field) {
-          if (sortInfo.field === colField) {
-            return false;
-          }
-          return true;
-        }
-        return true;
-      });
-      this.dataSourceActions.sortInfo = newSortInfo.length ? newSortInfo : null;
-      return;
-    }
-    let matched = false;
-    const multiSortBehavior = (_c = options == null ? void 0 : options.multiSortBehavior) != null ? _c : this.getState().multiSortBehavior;
-    if (multiSortBehavior === "replace") {
-      this.dataSourceActions.sortInfo = [columnSortInfo];
-    } else {
-      newSortInfo = newSortInfo.map((sortInfo) => {
-        if (matched) {
-          return sortInfo;
-        }
-        if (sortInfo.id) {
-          if (sortInfo.id === columnId) {
-            matched = true;
-            return columnSortInfo;
-          }
-          return sortInfo;
-        }
-        if (sortInfo.field) {
-          if (sortInfo.field === colField) {
-            matched = true;
-            return columnSortInfo;
-          }
-          return sortInfo;
-        }
-        return sortInfo;
-      });
-      if (!matched) {
-        newSortInfo.push(columnSortInfo);
-      }
-      this.dataSourceActions.sortInfo = newSortInfo.length ? newSortInfo : null;
-    }
-  }
   setVisibilityForColumn(columnId, visible) {
     const columnVisibility = __spreadValues({}, this.getState().columnVisibility);
     if (visible) {
@@ -14968,6 +15052,7 @@ var forwardProps4 = (setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
@@ -15624,17 +15709,9 @@ function getColumnsWhenGrouping(params) {
   };
 }
 
-// src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
+// src/components/InfiniteTable/hooks/useComputedColumns.ts
 var import_react46 = require("react");
 
-// src/components/InfiniteTable/types/Utility.ts
-function notNullable(value) {
-  if (value === null || value === void 0)
-    return false;
-  const testDummyForCompileError = value;
-  return true;
-}
-
 // src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
 var order = ["start", void 0, "end"];
 var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
@@ -15681,7 +15758,7 @@ function getColumnComputedType(column, columnTypes) {
   );
 }
 
-// src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
+// src/components/InfiniteTable/utils/getComputedColumns.ts
 var logError = err("getComputedVisibleColumns");
 var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
   return columnVisibility[colId] !== false;
@@ -15725,7 +15802,7 @@ function isGroupColumnSortable(column, fieldsToColumns) {
     return acc && !!colSortable;
   }, true);
 }
-var getComputedVisibleColumns = ({
+var getComputedColumns = ({
   columns,
   bodySize,
   columnMinWidth,
@@ -15740,7 +15817,6 @@ var getComputedVisibleColumns = ({
   filterValue,
   sortable,
   sortInfo,
-  setSortInfo,
   multiSort,
   filterTypes = defaultFilterTypes,
   viewportReservedWidth,
@@ -16030,67 +16106,6 @@ var getComputedVisibleColumns = ({
       computedLastInCategory,
       computedFirst: theComputedVisibleIndex === 0,
       computedLast,
-      toggleSort: ({
-        multiSortBehavior
-      } = {
-        multiSortBehavior: "replace"
-      }) => {
-        const currentSortInfo = computedSortInfo;
-        let newColumnSortInfo;
-        const groupByForColumn = result2.groupByForColumn;
-        let field2 = c.field;
-        const groupByForCol = groupByForColumn ? Array.isArray(groupByForColumn) ? groupByForColumn : [groupByForColumn] : [];
-        const fieldArr = groupByForCol.map((c2) => {
-          return c2.valueGetter ? (item) => c2.valueGetter({ data: item, field: c2.field }) : c2.field ? c2.field : void 0;
-        }).filter(notNullable);
-        if (fieldArr.length) {
-          field2 = fieldArr;
-        }
-        if (!currentSortInfo) {
-          newColumnSortInfo = {
-            dir: 1,
-            id,
-            field: field2,
-            type: computedSortType
-          };
-        } else {
-          if (computedSortedDesc) {
-            newColumnSortInfo = null;
-          } else {
-            newColumnSortInfo = __spreadProps(__spreadValues({}, computedSortInfo), {
-              dir: -1
-            });
-          }
-        }
-        if (field2 && newColumnSortInfo && !newColumnSortInfo.field) {
-          newColumnSortInfo.field = field2;
-        }
-        if (c.valueGetter && newColumnSortInfo && !newColumnSortInfo.valueGetter) {
-          newColumnSortInfo.valueGetter = (data) => c.valueGetter({ data, field: c.field });
-        }
-        let finalSortInfo = sortInfo ? [...sortInfo] : [];
-        if (multiSort) {
-          if (multiSortBehavior === "append") {
-            if (computedSortIndex === -1) {
-              if (newColumnSortInfo) {
-                finalSortInfo.push(newColumnSortInfo);
-              }
-            } else {
-              finalSortInfo = finalSortInfo.map((info, index) => {
-                if (index === computedSortIndex) {
-                  return newColumnSortInfo;
-                }
-                return info;
-              }).filter((x) => x != null);
-            }
-          } else {
-            finalSortInfo = newColumnSortInfo ? [newColumnSortInfo] : [];
-          }
-        } else {
-          finalSortInfo = newColumnSortInfo ? [newColumnSortInfo] : [];
-        }
-        setSortInfo(finalSortInfo);
-      },
       id,
       header: (_B = (_A = (_z = c.header) != null ? _z : colType.header) != null ? _A : c.name) != null ? _B : c.field
     });
@@ -16181,8 +16196,8 @@ var useRerenderOnKeyChange = (map2) => {
   return renderId;
 };
 
-// src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-var useComputedVisibleColumns = ({
+// src/components/InfiniteTable/hooks/useComputedColumns.ts
+var useComputedColumns = ({
   columns,
   bodySize,
   columnMinWidth,
@@ -16195,7 +16210,6 @@ var useComputedVisibleColumns = ({
   draggableColumns,
   sortInfo,
   multiSort,
-  setSortInfo,
   filterValue,
   filterTypes,
   columnOrder,
@@ -16234,7 +16248,7 @@ var useComputedVisibleColumns = ({
     computedColumnsMapInInitialOrder,
     fieldsToColumn
   } = (0, import_react46.useMemo)(() => {
-    return getComputedVisibleColumns({
+    return getComputedColumns({
       columns,
       scrollbarWidth: scrollbarWidth2,
       bodySize,
@@ -16250,7 +16264,6 @@ var useComputedVisibleColumns = ({
       filterTypes,
       sortable,
       sortInfo,
-      setSortInfo,
       multiSort,
       pinnedEndMaxWidth,
       pinnedStartMaxWidth,
@@ -16275,7 +16288,6 @@ var useComputedVisibleColumns = ({
     scrollbarWidth2,
     sortable,
     sortInfo,
-    setSortInfo,
     multiSort,
     filterValue,
     filterTypes,
@@ -16391,14 +16403,6 @@ function useComputed() {
   const { multiSort, filterValue, filterTypes } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = (0, import_react48.useCallback)(
-    (sortInfo) => {
-      var _a2;
-      const newSortInfo = getDataSourceState().multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
-      dataSourceActions.sortInfo = newSortInfo;
-    },
-    [getDataSourceState]
-  );
   const columns = componentState.computedColumns;
   const {
     computedColumnOrder,
@@ -16419,7 +16423,7 @@ function useComputed() {
     computedColumnsMap,
     computedColumnsMapInInitialOrder,
     fieldsToColumn
-  } = useComputedVisibleColumns({
+  } = useComputedColumns({
     columns,
     // scrollbarWidth: scrollbars.vertical ? getScrollbarWidth() : 0,
     // #scrollbarverticaltag
@@ -16443,7 +16447,6 @@ function useComputed() {
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
     multiSort,
-    setSortInfo,
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible: true,
@@ -16670,7 +16673,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react49.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.20"
+      version: "1.3.22"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;