@infinite-table/infinite-react 1.3.21 → 1.3.23

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;
@@ -11079,7 +11094,7 @@ function getPivotColumnsAndColumnGroups({
         columnGroups.set(
           parentColumnGroupId,
           prepareColumnGroup({
-            header: pivotGroupKey,
+            header: `${pivotGroupKey}`,
             columnGroup: columnGroupId,
             pivotBy,
             pivotGroupKeys: keys,
@@ -11090,7 +11105,7 @@ function getPivotColumnsAndColumnGroups({
         );
       }
       aggregationReducers.forEach((reducer, index) => {
-        const header = isSingleAggregationColumn ? keys[keys.length - 1] : reducer.name || reducer.id;
+        const header = isSingleAggregationColumn ? `${keys[keys.length - 1]}` : reducer.name || reducer.id;
         const computedPivotColumn = prepareColumn({
           pivotBy,
           pivotColumn: true,
@@ -11122,7 +11137,7 @@ function getPivotColumnsAndColumnGroups({
         colGroupId,
         prepareColumnGroup({
           columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
-          header: keys[keys.length - 1],
+          header: `${keys[keys.length - 1]}`,
           pivotBy,
           pivotGroupKeys: keys,
           pivotIndex: keys.length - 1,
@@ -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();
@@ -13805,10 +13845,16 @@ var InfiniteTableApiImpl = class {
       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;
   }
@@ -13914,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);
@@ -14057,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) {
@@ -15634,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) => {
@@ -15691,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;
@@ -15735,7 +15802,7 @@ function isGroupColumnSortable(column, fieldsToColumns) {
     return acc && !!colSortable;
   }, true);
 }
-var getComputedVisibleColumns = ({
+var getComputedColumns = ({
   columns,
   bodySize,
   columnMinWidth,
@@ -15750,7 +15817,6 @@ var getComputedVisibleColumns = ({
   filterValue,
   sortable,
   sortInfo,
-  setSortInfo,
   multiSort,
   filterTypes = defaultFilterTypes,
   viewportReservedWidth,
@@ -16040,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
     });
@@ -16191,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,
@@ -16205,7 +16210,6 @@ var useComputedVisibleColumns = ({
   draggableColumns,
   sortInfo,
   multiSort,
-  setSortInfo,
   filterValue,
   filterTypes,
   columnOrder,
@@ -16244,7 +16248,7 @@ var useComputedVisibleColumns = ({
     computedColumnsMapInInitialOrder,
     fieldsToColumn
   } = (0, import_react46.useMemo)(() => {
-    return getComputedVisibleColumns({
+    return getComputedColumns({
       columns,
       scrollbarWidth: scrollbarWidth2,
       bodySize,
@@ -16260,7 +16264,6 @@ var useComputedVisibleColumns = ({
       filterTypes,
       sortable,
       sortInfo,
-      setSortInfo,
       multiSort,
       pinnedEndMaxWidth,
       pinnedStartMaxWidth,
@@ -16285,7 +16288,6 @@ var useComputedVisibleColumns = ({
     scrollbarWidth2,
     sortable,
     sortInfo,
-    setSortInfo,
     multiSort,
     filterValue,
     filterTypes,
@@ -16401,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,
@@ -16429,7 +16423,7 @@ function useComputed() {
     computedColumnsMap,
     computedColumnsMapInInitialOrder,
     fieldsToColumn
-  } = useComputedVisibleColumns({
+  } = useComputedColumns({
     columns,
     // scrollbarWidth: scrollbars.vertical ? getScrollbarWidth() : 0,
     // #scrollbarverticaltag
@@ -16453,7 +16447,6 @@ function useComputed() {
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
     multiSort,
-    setSortInfo,
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible: true,
@@ -16680,7 +16673,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react49.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.21"
+      version: "1.3.23"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;