@infinite-table/infinite-react 6.0.17 → 6.0.19

package/index.dev.js

@@ -4117,6 +4117,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     }
     const visitedCells = /* @__PURE__ */ new Map();
     const visitedRows = /* @__PURE__ */ new Map();
+    const elementsRenderedOnTheFly = /* @__PURE__ */ new Set();
     ranges.forEach((range2) => {
       const { start: start2, end: end2 } = range2;
       const [startRow, startCol] = start2;
@@ -4157,8 +4158,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
           );
           if (elementIndex == null) {
             for (let i = this.itemDOMElements.length; i <= this.itemDOMRefs.length; i++) {
-              if (!this.itemDOMElements[i] && this.itemDOMRefs[i]) {
+              if (!this.itemDOMElements[i] && this.itemDOMRefs[i] && !elementsRenderedOnTheFly.has(i)) {
                 elementIndex = i;
+                elementsRenderedOnTheFly.add(i);
+                if (false) {
+                  this.debug(
+                    `Last-moment recovery of element ${elementIndex} to render cell ${row}:${col}`
+                  );
+                }
                 break;
               }
             }
@@ -16259,12 +16266,82 @@ function toRowInfo(data, id, index, isRowSelected, isRowDisabled, cellSelectionS
   }
   return rowInfo;
 }
+var warnIncorrectTreeFilterOnce = once(() => {
+  console.warn(`Your "treeFilterFunction" should NOT MUTATE the data object. You're probably mutating the node children.
+
+Your filtering function probably looks like this:
+
+function treeFilterFunction({ data }) {
+  data.children = data.children.filter(...) // <-- THIS MUTATION IS NOT SUPPORTED!
+  return data
+}
+
+Make sure you avoid mutations.
+
+`);
+});
+function filterTreeDataSource(params) {
+  const {
+    dataArray,
+    treeFilterFunction,
+    toPrimaryKey,
+    getNodeChildren,
+    isLeafNode,
+    nodesKey
+  } = params;
+  let treeDataArray = [];
+  const filterTreeNode = (data) => {
+    const children = getNodeChildren(data);
+    if (isLeafNode(data) || !Array.isArray(children)) {
+      return data;
+    }
+    const newChildren = filterTreeDataSource({
+      ...params,
+      dataArray: children
+    });
+    if (newChildren.length === 0) {
+      return false;
+    }
+    data = {
+      ...data,
+      [nodesKey]: newChildren
+    };
+    return data;
+  };
+  for (let i = 0, len = dataArray.length; i < len; i++) {
+    const data = dataArray[i];
+    const initialChildren = getNodeChildren(data);
+    let res = treeFilterFunction({
+      data,
+      index: i,
+      dataArray,
+      primaryKey: toPrimaryKey(data, i),
+      filterTreeNode
+    });
+    if (!res) {
+      continue;
+    }
+    if (res === true) {
+      res = data;
+    } else if (typeof res === "object") {
+      if (res === data && initialChildren !== getNodeChildren(res)) {
+        warnIncorrectTreeFilterOnce();
+      }
+    }
+    treeDataArray.push(res);
+  }
+  return treeDataArray;
+}
 function filterDataSource(params) {
   const {
     filterTypes,
     operatorsByFilterType,
     filterFunction,
-    toPrimaryKey
+    toPrimaryKey,
+    treeFilterFunction,
+    getNodeChildren,
+    nodesKey,
+    isLeafNode
   } = params;
   let { dataArray } = params;
   if (filterFunction) {
@@ -16277,6 +16354,15 @@ function filterDataSource(params) {
       })
     );
   }
+  if (treeFilterFunction) {
+    dataArray = filterTreeDataSource({
+      ...params,
+      treeFilterFunction,
+      getNodeChildren,
+      nodesKey,
+      isLeafNode
+    });
+  }
   const filterValueArray = cleanupEmptyFilterValues(params.filterValue, filterTypes) || [];
   if (filterValueArray && filterValueArray.length) {
     return dataArray.filter((data, index, arr) => {
@@ -16391,11 +16477,18 @@ function concludeReducer(params) {
     cache.clear();
     state.cache = void 0;
   }
-  const { filterFunction, filterValue, filterTypes, operatorsByFilterType } = state;
-  const shouldFilter = !!filterFunction || Array.isArray(filterValue) && filterValue.length;
+  const {
+    filterFunction,
+    treeFilterFunction,
+    filterValue,
+    filterTypes,
+    operatorsByFilterType
+  } = state;
+  const shouldFilter = !!filterFunction || !!treeFilterFunction || Array.isArray(filterValue) && filterValue.length;
   const shouldFilterClientSide = shouldFilter && state.filterMode === "local";
   const filterDepsChanged = haveDepsChanged(previousState, state, [
     "filterFunction",
+    "treeFilterFunction",
     "filterValue",
     "filterTypes"
   ]);
@@ -16461,6 +16554,12 @@ function concludeReducer(params) {
   if (shouldFilterClientSide) {
     state.unfilteredCount = dataArray.length;
     dataArray = shouldFilterAgain ? filterDataSource({
+      // tree-related stuff
+      getNodeChildren,
+      isLeafNode,
+      nodesKey,
+      treeFilterFunction,
+      // ---
       dataArray,
       toPrimaryKey,
       filterTypes,
@@ -17587,6 +17686,7 @@ var forwardProps3 = (setupState, props) => {
     treeSelection: 1,
     refetchKey: (refetchKey) => refetchKey ?? "",
     filterFunction: 1,
+    treeFilterFunction: 1,
     filterValue: 1,
     useGroupKeysForMultiRowSelection: (useGroupKeysForMultiRowSelection) => useGroupKeysForMultiRowSelection ?? false,
     filterDelay: (filterDelay) => filterDelay ?? 200,
@@ -17874,7 +17974,7 @@ function deriveStateFromProps(params) {
   }
   const groupMode = typeof props.data === "function" ? propsGroupMode ?? "local" : "local";
   const sortMode = props.sortFunction ? "local" : propsSortMode ?? (controlledSort ? "remote" : "local");
-  const filterMode = typeof props.filterFunction === "function" ? "local" : propsFilterMode ?? (typeof props.data === "function" ? "remote" : "local");
+  const filterMode = typeof props.filterFunction === "function" || typeof props.treeFilterFunction === "function" ? "local" : propsFilterMode ?? (typeof props.data === "function" ? "remote" : "local");
   const pivotMode = shouldReloadData.pivotBy ? "remote" : "local";
   const rowDisabledState = state.rowDisabledState;
   let isRowDisabled = props.isRowDisabled;
@@ -21101,6 +21201,7 @@ var forwardProps4 = (_setupState) => {
     debugMode: 1,
     onKeyDown: 1,
     onCellClick: 1,
+    onCellDoubleClick: 1,
     focusedClassName: 1,
     focusedWithinClassName: 1,
     focusedStyle: 1,
@@ -22509,7 +22610,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.17"
+      version: "6.0.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -22610,7 +22711,20 @@ function onCellClick(context, event) {
   }
   context.getState().onCellClick?.(context, event);
 }
-function onCellDoubleClick(context, _event) {
+function onCellDoubleClick(context, event) {
+  const { onCellDoubleClick: onCellDoubleClick2 } = context.getState();
+  let dblClickResult = {
+    preventEdit: false
+  };
+  if (onCellDoubleClick2) {
+    const result = onCellDoubleClick2(context, event);
+    if (result && typeof result === "object") {
+      dblClickResult = { ...dblClickResult, ...result };
+    }
+  }
+  if (dblClickResult.preventEdit) {
+    return;
+  }
   const computed = context.getComputed();
   const column = computed.computedVisibleColumns[context.colIndex];
   context.api.startEdit({
@@ -23488,7 +23602,21 @@ async function onKeyDown(context, event) {
       return cloneTreeSelection(treeSelection2, context.getDataSourceState);
     }
   };
-  if (handleKeyboardSelection(keyboardHandlerContext, event)) {
+  const { onKeyDown: onKeyDownProp } = context.getState();
+  let keyDownResult = {
+    preventEdit: false,
+    preventEditStop: false,
+    preventDefaultForTabKeyWhenEditing: true,
+    preventSelection: false,
+    preventNavigation: false
+  };
+  if (onKeyDownProp) {
+    const result = onKeyDownProp(context, event);
+    if (result && typeof result === "object") {
+      keyDownResult = { ...keyDownResult, ...result };
+    }
+  }
+  if (!keyDownResult.preventSelection && handleKeyboardSelection(keyboardHandlerContext, event)) {
     event.preventDefault();
   }
   if (handleBrowserFocusChangeOnKeyboardNavigation(keyboardHandlerContext, event)) {
@@ -23498,7 +23626,7 @@ async function onKeyDown(context, event) {
       event.preventDefault();
     }
   }
-  if (event.key === "Enter" && !context.api.isEditInProgress()) {
+  if (!keyDownResult.preventEdit && event.key === "Enter" && !context.api.isEditInProgress()) {
     const { activeCellIndex } = context.getState();
     if (activeCellIndex) {
       const [rowIndex, colIndex] = activeCellIndex;
@@ -23512,14 +23640,13 @@ async function onKeyDown(context, event) {
     }
   }
   if (context.api.isEditInProgress()) {
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && !keyDownResult.preventEditStop) {
       context.api.stopEdit({ cancel: true });
     }
-    if (event.key === "Tab") {
+    if (event.key === "Tab" && keyDownResult.preventDefaultForTabKeyWhenEditing) {
       event.preventDefault();
     }
   }
-  context.getState().onKeyDown?.(context, event);
   const { keyboardShortcuts: keyboardShortcuts2 } = context.getState();
   if (keyboardShortcuts2) {
     for await (const shortcut of keyboardShortcuts2) {

package/index.dev.mjs

@@ -4058,6 +4058,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     }
     const visitedCells = /* @__PURE__ */ new Map();
     const visitedRows = /* @__PURE__ */ new Map();
+    const elementsRenderedOnTheFly = /* @__PURE__ */ new Set();
     ranges.forEach((range2) => {
       const { start: start2, end: end2 } = range2;
       const [startRow, startCol] = start2;
@@ -4098,8 +4099,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
           );
           if (elementIndex == null) {
             for (let i = this.itemDOMElements.length; i <= this.itemDOMRefs.length; i++) {
-              if (!this.itemDOMElements[i] && this.itemDOMRefs[i]) {
+              if (!this.itemDOMElements[i] && this.itemDOMRefs[i] && !elementsRenderedOnTheFly.has(i)) {
                 elementIndex = i;
+                elementsRenderedOnTheFly.add(i);
+                if (false) {
+                  this.debug(
+                    `Last-moment recovery of element ${elementIndex} to render cell ${row}:${col}`
+                  );
+                }
                 break;
               }
             }
@@ -16208,12 +16215,82 @@ function toRowInfo(data, id, index, isRowSelected, isRowDisabled, cellSelectionS
   }
   return rowInfo;
 }
+var warnIncorrectTreeFilterOnce = once(() => {
+  console.warn(`Your "treeFilterFunction" should NOT MUTATE the data object. You're probably mutating the node children.
+
+Your filtering function probably looks like this:
+
+function treeFilterFunction({ data }) {
+  data.children = data.children.filter(...) // <-- THIS MUTATION IS NOT SUPPORTED!
+  return data
+}
+
+Make sure you avoid mutations.
+
+`);
+});
+function filterTreeDataSource(params) {
+  const {
+    dataArray,
+    treeFilterFunction,
+    toPrimaryKey,
+    getNodeChildren,
+    isLeafNode,
+    nodesKey
+  } = params;
+  let treeDataArray = [];
+  const filterTreeNode = (data) => {
+    const children = getNodeChildren(data);
+    if (isLeafNode(data) || !Array.isArray(children)) {
+      return data;
+    }
+    const newChildren = filterTreeDataSource({
+      ...params,
+      dataArray: children
+    });
+    if (newChildren.length === 0) {
+      return false;
+    }
+    data = {
+      ...data,
+      [nodesKey]: newChildren
+    };
+    return data;
+  };
+  for (let i = 0, len = dataArray.length; i < len; i++) {
+    const data = dataArray[i];
+    const initialChildren = getNodeChildren(data);
+    let res = treeFilterFunction({
+      data,
+      index: i,
+      dataArray,
+      primaryKey: toPrimaryKey(data, i),
+      filterTreeNode
+    });
+    if (!res) {
+      continue;
+    }
+    if (res === true) {
+      res = data;
+    } else if (typeof res === "object") {
+      if (res === data && initialChildren !== getNodeChildren(res)) {
+        warnIncorrectTreeFilterOnce();
+      }
+    }
+    treeDataArray.push(res);
+  }
+  return treeDataArray;
+}
 function filterDataSource(params) {
   const {
     filterTypes,
     operatorsByFilterType,
     filterFunction,
-    toPrimaryKey
+    toPrimaryKey,
+    treeFilterFunction,
+    getNodeChildren,
+    nodesKey,
+    isLeafNode
   } = params;
   let { dataArray } = params;
   if (filterFunction) {
@@ -16226,6 +16303,15 @@ function filterDataSource(params) {
       })
     );
   }
+  if (treeFilterFunction) {
+    dataArray = filterTreeDataSource({
+      ...params,
+      treeFilterFunction,
+      getNodeChildren,
+      nodesKey,
+      isLeafNode
+    });
+  }
   const filterValueArray = cleanupEmptyFilterValues(params.filterValue, filterTypes) || [];
   if (filterValueArray && filterValueArray.length) {
     return dataArray.filter((data, index, arr) => {
@@ -16340,11 +16426,18 @@ function concludeReducer(params) {
     cache.clear();
     state.cache = void 0;
   }
-  const { filterFunction, filterValue, filterTypes, operatorsByFilterType } = state;
-  const shouldFilter = !!filterFunction || Array.isArray(filterValue) && filterValue.length;
+  const {
+    filterFunction,
+    treeFilterFunction,
+    filterValue,
+    filterTypes,
+    operatorsByFilterType
+  } = state;
+  const shouldFilter = !!filterFunction || !!treeFilterFunction || Array.isArray(filterValue) && filterValue.length;
   const shouldFilterClientSide = shouldFilter && state.filterMode === "local";
   const filterDepsChanged = haveDepsChanged(previousState, state, [
     "filterFunction",
+    "treeFilterFunction",
     "filterValue",
     "filterTypes"
   ]);
@@ -16410,6 +16503,12 @@ function concludeReducer(params) {
   if (shouldFilterClientSide) {
     state.unfilteredCount = dataArray.length;
     dataArray = shouldFilterAgain ? filterDataSource({
+      // tree-related stuff
+      getNodeChildren,
+      isLeafNode,
+      nodesKey,
+      treeFilterFunction,
+      // ---
       dataArray,
       toPrimaryKey,
       filterTypes,
@@ -17536,6 +17635,7 @@ var forwardProps3 = (setupState, props) => {
     treeSelection: 1,
     refetchKey: (refetchKey) => refetchKey ?? "",
     filterFunction: 1,
+    treeFilterFunction: 1,
     filterValue: 1,
     useGroupKeysForMultiRowSelection: (useGroupKeysForMultiRowSelection) => useGroupKeysForMultiRowSelection ?? false,
     filterDelay: (filterDelay) => filterDelay ?? 200,
@@ -17823,7 +17923,7 @@ function deriveStateFromProps(params) {
   }
   const groupMode = typeof props.data === "function" ? propsGroupMode ?? "local" : "local";
   const sortMode = props.sortFunction ? "local" : propsSortMode ?? (controlledSort ? "remote" : "local");
-  const filterMode = typeof props.filterFunction === "function" ? "local" : propsFilterMode ?? (typeof props.data === "function" ? "remote" : "local");
+  const filterMode = typeof props.filterFunction === "function" || typeof props.treeFilterFunction === "function" ? "local" : propsFilterMode ?? (typeof props.data === "function" ? "remote" : "local");
   const pivotMode = shouldReloadData.pivotBy ? "remote" : "local";
   const rowDisabledState = state.rowDisabledState;
   let isRowDisabled = props.isRowDisabled;
@@ -21059,6 +21159,7 @@ var forwardProps4 = (_setupState) => {
     debugMode: 1,
     onKeyDown: 1,
     onCellClick: 1,
+    onCellDoubleClick: 1,
     focusedClassName: 1,
     focusedWithinClassName: 1,
     focusedStyle: 1,
@@ -22467,7 +22568,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.17"
+      version: "6.0.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -22568,7 +22669,20 @@ function onCellClick(context, event) {
   }
   context.getState().onCellClick?.(context, event);
 }
-function onCellDoubleClick(context, _event) {
+function onCellDoubleClick(context, event) {
+  const { onCellDoubleClick: onCellDoubleClick2 } = context.getState();
+  let dblClickResult = {
+    preventEdit: false
+  };
+  if (onCellDoubleClick2) {
+    const result = onCellDoubleClick2(context, event);
+    if (result && typeof result === "object") {
+      dblClickResult = { ...dblClickResult, ...result };
+    }
+  }
+  if (dblClickResult.preventEdit) {
+    return;
+  }
   const computed = context.getComputed();
   const column = computed.computedVisibleColumns[context.colIndex];
   context.api.startEdit({
@@ -23446,7 +23560,21 @@ async function onKeyDown(context, event) {
       return cloneTreeSelection(treeSelection2, context.getDataSourceState);
     }
   };
-  if (handleKeyboardSelection(keyboardHandlerContext, event)) {
+  const { onKeyDown: onKeyDownProp } = context.getState();
+  let keyDownResult = {
+    preventEdit: false,
+    preventEditStop: false,
+    preventDefaultForTabKeyWhenEditing: true,
+    preventSelection: false,
+    preventNavigation: false
+  };
+  if (onKeyDownProp) {
+    const result = onKeyDownProp(context, event);
+    if (result && typeof result === "object") {
+      keyDownResult = { ...keyDownResult, ...result };
+    }
+  }
+  if (!keyDownResult.preventSelection && handleKeyboardSelection(keyboardHandlerContext, event)) {
     event.preventDefault();
   }
   if (handleBrowserFocusChangeOnKeyboardNavigation(keyboardHandlerContext, event)) {
@@ -23456,7 +23584,7 @@ async function onKeyDown(context, event) {
       event.preventDefault();
     }
   }
-  if (event.key === "Enter" && !context.api.isEditInProgress()) {
+  if (!keyDownResult.preventEdit && event.key === "Enter" && !context.api.isEditInProgress()) {
     const { activeCellIndex } = context.getState();
     if (activeCellIndex) {
       const [rowIndex, colIndex] = activeCellIndex;
@@ -23470,14 +23598,13 @@ async function onKeyDown(context, event) {
     }
   }
   if (context.api.isEditInProgress()) {
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && !keyDownResult.preventEditStop) {
       context.api.stopEdit({ cancel: true });
     }
-    if (event.key === "Tab") {
+    if (event.key === "Tab" && keyDownResult.preventDefaultForTabKeyWhenEditing) {
       event.preventDefault();
     }
   }
-  context.getState().onKeyDown?.(context, event);
   const { keyboardShortcuts: keyboardShortcuts2 } = context.getState();
   if (keyboardShortcuts2) {
     for await (const shortcut of keyboardShortcuts2) {