@infinite-table/infinite-react 1.3.21 → 1.3.22

package/index.dev.mjs

@@ -5267,7 +5267,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);
@@ -5275,6 +5278,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);
@@ -6511,7 +6517,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
           });
         }
@@ -10614,6 +10620,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;
@@ -13472,7 +13487,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* () {
@@ -13771,6 +13808,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();
@@ -13791,10 +13831,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;
   }
@@ -13900,29 +13946,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);
@@ -14043,69 +14181,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) {
@@ -14521,7 +14596,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback22, useEffect as useEffect28, useState as useState17 } from "react";
+import { useEffect as useEffect28, useState as useState17 } from "react";
 
 // src/components/InfiniteTable/utils/MultiRowSelector.ts
 function ensureMinMax(start, end) {
@@ -15624,17 +15699,9 @@ function getColumnsWhenGrouping(params) {
   };
 }
 
-// src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
+// src/components/InfiniteTable/hooks/useComputedColumns.ts
 import { useMemo as useMemo10 } from "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 +15748,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 +15792,7 @@ function isGroupColumnSortable(column, fieldsToColumns) {
     return acc && !!colSortable;
   }, true);
 }
-var getComputedVisibleColumns = ({
+var getComputedColumns = ({
   columns,
   bodySize,
   columnMinWidth,
@@ -15740,7 +15807,6 @@ var getComputedVisibleColumns = ({
   filterValue,
   sortable,
   sortInfo,
-  setSortInfo,
   multiSort,
   filterTypes = defaultFilterTypes,
   viewportReservedWidth,
@@ -16030,67 +16096,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 +16186,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 +16200,6 @@ var useComputedVisibleColumns = ({
   draggableColumns,
   sortInfo,
   multiSort,
-  setSortInfo,
   filterValue,
   filterTypes,
   columnOrder,
@@ -16234,7 +16238,7 @@ var useComputedVisibleColumns = ({
     computedColumnsMapInInitialOrder,
     fieldsToColumn
   } = useMemo10(() => {
-    return getComputedVisibleColumns({
+    return getComputedColumns({
       columns,
       scrollbarWidth: scrollbarWidth2,
       bodySize,
@@ -16250,7 +16254,6 @@ var useComputedVisibleColumns = ({
       filterTypes,
       sortable,
       sortInfo,
-      setSortInfo,
       multiSort,
       pinnedEndMaxWidth,
       pinnedStartMaxWidth,
@@ -16275,7 +16278,6 @@ var useComputedVisibleColumns = ({
     scrollbarWidth2,
     sortable,
     sortInfo,
-    setSortInfo,
     multiSort,
     filterValue,
     filterTypes,
@@ -16391,14 +16393,6 @@ function useComputed() {
   const { multiSort, filterValue, filterTypes } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = useCallback22(
-    (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 +16413,7 @@ function useComputed() {
     computedColumnsMap,
     computedColumnsMapInInitialOrder,
     fieldsToColumn
-  } = useComputedVisibleColumns({
+  } = useComputedColumns({
     columns,
     // scrollbarWidth: scrollbars.vertical ? getScrollbarWidth() : 0,
     // #scrollbarverticaltag
@@ -16443,7 +16437,6 @@ function useComputed() {
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
     multiSort,
-    setSortInfo,
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible: true,
@@ -16670,7 +16663,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.21"
+      version: "1.3.22"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -16760,7 +16753,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback23, useMemo as useMemo12, useEffect as useEffect31 } from "react";
+import { useCallback as useCallback22, useMemo as useMemo12, useEffect as useEffect31 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -17491,7 +17484,7 @@ function handleDOMEvents() {
 }
 function subscribeToDOMEvents() {
   const { getState } = useInfiniteTable();
-  const onKeyDown2 = useCallback23((event) => {
+  const onKeyDown2 = useCallback22((event) => {
     getState().keyDown(event);
   }, []);
   return { onKeyDown: onKeyDown2 };
@@ -17507,7 +17500,7 @@ import { useEffect as useEffect35 } from "react";
 // src/components/hooks/useOverlay/index.tsx
 import * as React52 from "react";
 import {
-  useCallback as useCallback24,
+  useCallback as useCallback23,
   useEffect as useEffect33,
   useLayoutEffect as useLayoutEffect12,
   useState as useState18
@@ -17911,7 +17904,7 @@ function OverlayContent(props) {
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
-      ref: useCallback24((node) => {
+      ref: useCallback23((node) => {
         if (node) {
           alignOverlayNode(node, props);
         }
@@ -18013,7 +18006,7 @@ function useOverlay(params) {
   const [handles] = useState18(() => /* @__PURE__ */ new Map());
   const [handleToRealign, setHandleToRealign] = useState18(null);
   const [realignTimestamp, setRealignTimestamp] = useState18(0);
-  const getContentForPortal = useCallback24(() => {
+  const getContentForPortal = useCallback23(() => {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
@@ -18027,7 +18020,7 @@ function useOverlay(params) {
     getContentForPortal(),
     params.portalContainer
   );
-  const showOverlay = useCallback24(
+  const showOverlay = useCallback23(
     (content, params2) => {
       const id = params2.id || getIdForReactOnlyChild(content) || getChangeDetect();
       const key = `${id}`;
@@ -18245,7 +18238,7 @@ var deriveStateFromProps2 = (params) => {
 // src/components/Menu/Menu.tsx
 import * as React55 from "react";
 import {
-  useCallback as useCallback26,
+  useCallback as useCallback25,
   useLayoutEffect as useLayoutEffect13,
   useRef as useRef28,
   useState as useState20
@@ -18476,7 +18469,7 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback25, useEffect as useEffect34, useRef as useRef27 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect34, useRef as useRef27 } from "react";
 function useMounted() {
   let mountedRef = useRef27(true);
   useEffect34(() => {
@@ -18485,7 +18478,7 @@ function useMounted() {
       mountedRef.current = false;
     };
   }, []);
-  const isMounted = useCallback25(() => mountedRef.current, []);
+  const isMounted = useCallback24(() => mountedRef.current, []);
   return isMounted;
 }
 
@@ -18606,8 +18599,8 @@ function useSubmenus({
     }).getHandlers();
   });
   return {
-    onItemEnter: useCallback26(onItemEnter, []),
-    onItemLeave: useCallback26(onItemLeave, [])
+    onItemEnter: useCallback25(onItemEnter, []),
+    onItemLeave: useCallback25(onItemLeave, [])
   };
 }
 function MenuComponent(props) {
@@ -18632,10 +18625,10 @@ function MenuComponent(props) {
     componentActions,
     getState
   } = useMenuContext();
-  const setKeyboardActiveItemKey = useCallback26((key) => {
+  const setKeyboardActiveItemKey = useCallback25((key) => {
     componentActions.keyboardActiveItemKey = key;
   }, []);
-  const setActiveItemKey = useCallback26((key) => {
+  const setActiveItemKey = useCallback25((key) => {
     componentActions.activeItemKey = key;
   }, []);
   const isMounted = useMounted();
@@ -18843,7 +18836,7 @@ function MenuComponent(props) {
   function onMenuBlur() {
     componentActions.focused = false;
   }
-  const onMenuFocus = useCallback26(function() {
+  const onMenuFocus = useCallback25(function() {
     componentActions.focused = true;
     setTimeout(() => {
       var _a, _b;
@@ -18873,7 +18866,7 @@ function MenuComponent(props) {
     };
     return result2;
   });
-  const refCallback = useCallback26((node) => {
+  const refCallback = useCallback25((node) => {
     if (node) {
       domRef.current = node;
       onShow == null ? void 0 : onShow(getState(), api);
@@ -19339,7 +19332,7 @@ function useColumnMenu() {
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
 import * as React59 from "react";
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback26 } from "react";
 var style = {
   width: 0,
   height: 0,
@@ -19359,7 +19352,7 @@ function FocusDetect() {
   } = useInfiniteTable();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const { focusDetectDOMRef } = getState();
-  const onFocus = useCallback27(() => __async(this, null, function* () {
+  const onFocus = useCallback26(() => __async(this, null, function* () {
     const context = {
       getDataSourceState,
       getComputed,