@infinite-table/infinite-react 6.0.14 → 6.0.16

package/index.dev.mjs

@@ -2631,15 +2631,22 @@ var MatrixBrain = class extends Logger {
     if (size <= 0) {
       return 0;
     }
+    const fixedStart = direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart;
+    const fixedEnd = direction === "horizontal" ? this.fixedColsEnd : this.fixedRowsEnd;
     if (typeof itemSize === "function") {
       const sizes = [];
-      for (let i = 0; i < count; i++) {
+      let start = 0;
+      let end = count;
+      start += fixedStart;
+      end -= fixedEnd;
+      for (let i = start; i < end; i++) {
         sizes.push(this.getItemSize(i, direction));
       }
       renderCount = getGreatestCountVisibleInSize(size, sizes);
     } else {
       renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
     }
+    renderCount += fixedStart + fixedEnd;
     renderCount = Math.min(count, renderCount);
     return renderCount;
   }
@@ -4633,7 +4640,7 @@ var ActiveRowIndicatorFn = (props) => {
       setInfiniteVarsOnNode(
         {
           scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
-          scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
+          scrollLeftForActiveRowWhenHorizontalLayout: brain.isHorizontalLayoutBrain ? `${-scrollPosition.scrollLeft}px` : "0px"
         },
         domRef.current
       );
@@ -5372,7 +5379,7 @@ var Icon = (props) => {
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
 import * as React17 from "react";
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
+  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
@@ -13929,6 +13936,19 @@ var Indexer = class {
                     item = { ...item, ...info.data };
                     arr2[i] = item;
                   }
+                  if (info.type === "update-children" && !deleted) {
+                    const children = info.children(
+                      item[nodesKey],
+                      item
+                    );
+                    item = { ...item };
+                    if (children !== void 0) {
+                      item[nodesKey] = children;
+                    } else {
+                      delete item[nodesKey];
+                    }
+                    arr2[i] = item;
+                  }
                   if (info.type === "insert") {
                     if (info.position === "before") {
                       arr2.splice(i, 0, info.data);
@@ -14228,7 +14248,7 @@ function getPivotColumnsAndColumnGroups({
 // src/components/DataSource/DataSourceCache.ts
 var CLEAR_SYMBOL = Symbol("CLEAR");
 var DataSourceCache = class {
-  constructor() {
+  constructor(options) {
     this.affectedFields = /* @__PURE__ */ new Set();
     this.allFieldsAffected = false;
     this.primaryKeyToData = /* @__PURE__ */ new Map();
@@ -14291,8 +14311,12 @@ var DataSourceCache = class {
     };
     this.update = (primaryKey, data, originalData, metadata) => {
       if (!this.allFieldsAffected) {
-        const keys = Object.keys(data);
-        keys.forEach((key) => this.affectedFields.add(key));
+        if (this.nodesKey && Array.isArray(data[this.nodesKey])) {
+          this.allFieldsAffected = true;
+        } else {
+          const keys = Object.keys(data);
+          keys.forEach((key) => this.affectedFields.add(key));
+        }
       }
       const pk = primaryKey;
       const value = this.primaryKeyToData.get(pk) || [];
@@ -14307,8 +14331,12 @@ var DataSourceCache = class {
     };
     this.updateNodePath = (nodePath, data, originalData, metadata) => {
       if (!this.allFieldsAffected) {
-        const keys = Object.keys(data);
-        keys.forEach((key) => this.affectedFields.add(key));
+        if (this.nodesKey && Array.isArray(data[this.nodesKey])) {
+          this.allFieldsAffected = true;
+        } else {
+          const keys = Object.keys(data);
+          keys.forEach((key) => this.affectedFields.add(key));
+        }
       }
       const value = this.nodePathToData.get(nodePath) || [];
       value.push({
@@ -14320,6 +14348,18 @@ var DataSourceCache = class {
       });
       this.nodePathToData.set(nodePath, value);
     };
+    this.updateChildren = (nodePath, children, originalData, metadata) => {
+      this.allFieldsAffected = true;
+      const value = this.nodePathToData.get(nodePath) || [];
+      value.push({
+        type: "update-children",
+        nodePath,
+        children,
+        originalData,
+        metadata
+      });
+      this.nodePathToData.set(nodePath, value);
+    };
     this.resetDataSource = (metadata) => {
       this.clear();
       this.allFieldsAffected = true;
@@ -14372,9 +14412,12 @@ var DataSourceCache = class {
     this.getTreeMutationsArray = () => {
       return Array.from(this.nodePathToData.values()).flat();
     };
+    this.nodesKey = options.nodesKey;
   }
   static clone(cache, { light = false } = {}) {
-    const clone = new DataSourceCache();
+    const clone = new DataSourceCache({
+      nodesKey: cache.nodesKey
+    });
     clone.allFieldsAffected = cache.allFieldsAffected;
     clone.affectedFields = new Set(cache.affectedFields);
     clone.primaryKeyToData = light ? cache.primaryKeyToData : new Map(
@@ -15250,6 +15293,7 @@ var RowDisabledState = class extends BooleanCollectionState {
 };
 
 // src/components/DataSource/getDataSourceApi.ts
+var DEFAULT_NODE_PATH_WAIT_TIMEOUT = 1e3;
 function getDataSourceApi(param) {
   return new DataSourceApiImpl(param);
 }
@@ -15313,15 +15357,20 @@ var DataSourceApiImpl = class {
       const { indexer } = this.getState();
       return indexer.getDataForPrimaryKey(id) ?? null;
     };
+    this.isNodePathAvailable = (nodePath) => {
+      return this.getState().indexer.getDataForNodePath(nodePath) !== void 0;
+    };
     this.getDataByNodePath = (nodePath) => {
       const { indexer } = this.getState();
       const data = indexer.getDataForNodePath(nodePath);
       if (!data) {
-        console.warn(
-          `getDataByNodePath: no data found for nodePath: "${nodePath.join(
-            " / "
-          )}"`
-        );
+        if (false) {
+          console.warn(
+            `getDataByNodePath: no data found for nodePath: "${nodePath.join(
+              " / "
+            )}"`
+          );
+        }
         return null;
       }
       return data;
@@ -15381,25 +15430,84 @@ var DataSourceApiImpl = class {
       }
       return result;
     };
+    this.withWaitForNode = (nodePath, fn, options) => {
+      const waitForNode = options?.waitForNode ?? true;
+      if (waitForNode === true || typeof waitForNode === "number") {
+        let timeout = waitForNode === true ? DEFAULT_NODE_PATH_WAIT_TIMEOUT : waitForNode;
+        if (!isNaN(timeout)) {
+          timeout = DEFAULT_NODE_PATH_WAIT_TIMEOUT;
+        }
+        return this.waitForNodePath(nodePath, { timeout }).then((okay) => {
+          if (!okay) {
+            const error2 = `Cannot find node path "${nodePath.join(
+              "/"
+            )}" (we waited for it ${timeout}ms)`;
+            console.error(error2);
+            return fn({
+              error: error2,
+              resolved: false
+            });
+          }
+          return fn({
+            resolved: true
+          });
+        });
+      }
+      const result = fn({
+        resolved: void 0
+      });
+      return result instanceof Promise ? result : Promise.resolve(result);
+    };
     this.updateChildrenByNodePath = (childrenOrFn, nodePath, options) => {
-      const data = this.getDataByNodePath(nodePath);
-      if (data == null) {
-        return Promise.resolve(null);
-      }
-      const nodesKey = this.getState().nodesKey;
-      const dataChildren = data[nodesKey];
-      const children = typeof childrenOrFn === "function" ? childrenOrFn(dataChildren, data) : childrenOrFn;
-      return this.updateDataByNodePath(
-        {
-          ...data,
-          [nodesKey]: children
-        },
+      return this.withWaitForNode(
         nodePath,
+        ({ error: error2 }) => {
+          if (error2) {
+            return false;
+          }
+          return this.updateChildrenByNodePath_Internal(
+            childrenOrFn,
+            nodePath,
+            options
+          );
+        },
+        options
+      );
+    };
+    this.updateChildrenByNodePath_Internal = (childrenOrFn, nodePath, options) => {
+      const children = typeof childrenOrFn === "function" ? childrenOrFn : () => childrenOrFn;
+      return this.updateDataArrayByNodePath_Internal(
+        [
+          {
+            nodePath,
+            children
+          }
+        ],
         options
       );
     };
     this.updateDataByNodePath = (data, nodePath, options) => {
-      return this.updateDataArrayByNodePath(
+      if (!this.isNodePathAvailable(nodePath)) {
+        return this.withWaitForNode(
+          nodePath,
+          ({ error: error2 }) => {
+            if (error2) {
+              return false;
+            }
+            return this.updateDataArrayByNodePath_Internal(
+              [
+                {
+                  data,
+                  nodePath
+                }
+              ],
+              options
+            );
+          },
+          options
+        );
+      }
+      return this.updateDataArrayByNodePath_Internal(
         [
           {
             data,
@@ -15410,10 +15518,31 @@ var DataSourceApiImpl = class {
       );
     };
     this.updateDataArrayByNodePath = (updateInfo, options) => {
+      if (options && typeof options.waitForNode !== "undefined" && !options.waitForNode) {
+        return this.updateDataArrayByNodePath_Internal(updateInfo, options);
+      }
+      const allNodePaths = updateInfo.map((info) => info.nodePath);
+      const promiseWithAll = Promise.allSettled(
+        allNodePaths.map((nodePath) => {
+          return this.withWaitForNode(nodePath, ({ error: error2 }) => !error2, options);
+        })
+      );
+      return promiseWithAll.then((allGood) => {
+        if (!allGood.every(Boolean)) {
+          return false;
+        }
+        return this.updateDataArrayByNodePath_Internal(updateInfo, options);
+      });
+    };
+    this.updateDataArrayByNodePath_Internal = (updateInfo, options) => {
       const data = [];
       const nodePaths = [];
       updateInfo.forEach((info) => {
-        data.push(info.data);
+        if (info.data) {
+          data.push(info.data);
+        } else if (info.children) {
+          data.push(info.children);
+        }
         nodePaths.push(info.nodePath);
       });
       const result = this.batchOperation({
@@ -15443,67 +15572,39 @@ var DataSourceApiImpl = class {
       return result;
     };
     this.removeDataByNodePath = (nodePath, options) => {
-      const result = this.batchOperation({
-        type: "delete",
-        nodePaths: [nodePath],
-        metadata: options?.metadata
-      });
-      if (options?.flush) {
-        this.commit();
-      }
-      return result;
+      return this.batchDeleteNodePaths([nodePath], options);
     };
     this.removeData = (data, options) => {
       const isTree = this.getState().isTree;
-      let primaryKeys = !isTree ? [this.toPrimaryKey(data)] : void 0;
-      const nodePath = isTree ? this.getNodePathById(this.toPrimaryKey(data)) : null;
-      let nodePaths = isTree && nodePath ? [nodePath] : void 0;
-      const result = primaryKeys ? this.batchOperation({
-        type: "delete",
-        primaryKeys,
-        metadata: options?.metadata
-      }) : this.batchOperation({
-        type: "delete",
-        nodePaths: nodePaths || [],
-        metadata: options?.metadata
-      });
-      if (options?.flush) {
-        this.commit();
+      if (isTree) {
+        const nodePath = this.getNodePathById(this.toPrimaryKey(data));
+        return this.removeDataByNodePath(nodePath, options);
       }
-      return result;
+      return this.batchDeletePrimaryKeys([this.toPrimaryKey(data)], options);
     };
     this.removeDataArrayByPrimaryKeys = (ids, options) => {
       const isTree = this.getState().isTree;
-      const nodePaths = isTree ? ids.map((id) => {
-        return this.getNodePathById(id) || [];
-      }) : null;
-      const result = isTree ? this.batchOperation({
+      if (isTree) {
+        const nodePaths = ids.map((id) => this.getNodePathById(id) || []);
+        return this.batchDeleteNodePaths(nodePaths, options);
+      }
+      return this.batchDeletePrimaryKeys(ids, options);
+    };
+    this.batchDeleteNodePaths = (nodePaths, options) => {
+      const result = this.batchOperation({
         type: "delete",
         nodePaths: nodePaths || [],
         metadata: options?.metadata
-      }) : this.batchOperation({
-        type: "delete",
-        primaryKeys: ids,
-        metadata: options?.metadata
       });
       if (options?.flush) {
         this.commit();
       }
       return result;
     };
-    this.removeDataArray = (data, options) => {
-      const isTree = this.getState().isTree;
-      const nodePaths = isTree ? data.map((d) => {
-        return this.getNodePathById(this.toPrimaryKey(d)) || [];
-      }) : null;
-      const primaryKeys = !isTree ? data.map(this.toPrimaryKey) : void 0;
-      const result = isTree ? this.batchOperation({
-        type: "delete",
-        nodePaths: nodePaths || [],
-        metadata: options?.metadata
-      }) : this.batchOperation({
+    this.batchDeletePrimaryKeys = (primaryKeys, options) => {
+      const result = this.batchOperation({
         type: "delete",
-        primaryKeys: primaryKeys || [],
+        primaryKeys,
         metadata: options?.metadata
       });
       if (options?.flush) {
@@ -15511,6 +15612,17 @@ var DataSourceApiImpl = class {
       }
       return result;
     };
+    this.removeDataArray = (data, options) => {
+      const isTree = this.getState().isTree;
+      if (isTree) {
+        const nodePaths = data.map((d) => {
+          return this.getNodePathById(this.toPrimaryKey(d)) || [];
+        });
+        return this.batchDeleteNodePaths(nodePaths, options);
+      }
+      const primaryKeys = data.map(this.toPrimaryKey);
+      return this.batchDeletePrimaryKeys(primaryKeys, options);
+    };
     this.addData = (data, options) => {
       return this.addDataArray([data], options);
     };
@@ -15524,9 +15636,33 @@ var DataSourceApiImpl = class {
       return this.insertDataArray([data], options);
     };
     this.insertDataArray = (data, options) => {
+      const isTree = this.getState().isTree;
       let position2 = "before";
       let primaryKey = void 0;
       let nodePath = options.nodePath;
+      if (isTree && nodePath?.length) {
+        return this.withWaitForNode(
+          nodePath,
+          ({ error: error2 }) => {
+            if (error2) {
+              return false;
+            }
+            if (options.position === "before" || options.position === "after") {
+              return this.batchTreeInsert(
+                data,
+                options.position,
+                nodePath,
+                options
+              );
+            }
+            const newChildren = (childrenOfNode) => {
+              return options.position === "start" ? [...data, ...childrenOfNode || []] : [...childrenOfNode || [], ...data];
+            };
+            return this.updateChildrenByNodePath(newChildren, nodePath, options);
+          },
+          options
+        );
+      }
       if (options.position === "before" || options.position === "after") {
         position2 = options.position;
         primaryKey = options.primaryKey;
@@ -15534,13 +15670,20 @@ var DataSourceApiImpl = class {
         const arr = this.getOriginalDataArray();
         if (options.position === "start") {
           position2 = "before";
-          primaryKey = !arr.length ? void 0 : this.toPrimaryKey(arr[0]);
+          if (!arr.length) {
+            primaryKey = void 0;
+          } else {
+            primaryKey = this.toPrimaryKey(arr[0]);
+          }
         } else {
           position2 = "after";
-          primaryKey = !arr.length ? void 0 : this.toPrimaryKey(arr[arr.length - 1]);
+          if (!arr.length) {
+            primaryKey = void 0;
+          } else {
+            primaryKey = this.toPrimaryKey(arr[arr.length - 1]);
+          }
         }
       }
-      const isTree = this.getState().isTree;
       const result = isTree ? this.batchOperation({
         type: "insert",
         array: data,
@@ -15560,6 +15703,41 @@ var DataSourceApiImpl = class {
       }
       return result;
     };
+    this.batchTreeInsert = (data, position2, nodePath, options) => {
+      if (nodePath.length && !this.isNodePathAvailable(nodePath)) {
+        return this.withWaitForNode(
+          nodePath,
+          ({ error: error2 }) => {
+            if (error2) {
+              return false;
+            }
+            const result2 = this.batchOperation({
+              type: "insert",
+              array: data,
+              position: position2,
+              metadata: options?.metadata,
+              nodePath
+            });
+            if (options?.flush) {
+              this.commit();
+            }
+            return result2;
+          },
+          options
+        );
+      }
+      const result = this.batchOperation({
+        type: "insert",
+        array: data,
+        position: position2,
+        metadata: options?.metadata,
+        nodePath
+      });
+      if (options?.flush) {
+        this.commit();
+      }
+      return result;
+    };
     this.setSortInfo = (sortInfo) => {
       const multiSort = this.getState().multiSort;
       if (Array.isArray(sortInfo)) {
@@ -15636,6 +15814,9 @@ var DataSourceApiImpl = class {
     this.actions = param.actions;
     this.treeApi = new TreeApiImpl({ ...param, dataSourceApi: this });
   }
+  getPendingOperationPromise() {
+    return this.pendingPromise;
+  }
   batchOperation(operation) {
     if (!this.pendingPromise) {
       this.pendingPromise = new Promise((resolve) => {
@@ -15665,7 +15846,8 @@ var DataSourceApiImpl = class {
       return;
     }
     const currentCache = this.getState().cache;
-    let cache = currentCache ? DataSourceCache.clone(currentCache, { light: true }) : new DataSourceCache();
+    const { isTree, nodesKey } = this.getState();
+    let cache = currentCache ? DataSourceCache.clone(currentCache, { light: true }) : new DataSourceCache({ nodesKey: isTree ? nodesKey : void 0 });
     operations.forEach((operation) => {
       switch (operation.type) {
         case "update":
@@ -15686,12 +15868,21 @@ var DataSourceApiImpl = class {
                 operation.nodePaths[index]
               );
               if (originalData) {
-                cache.updateNodePath(
-                  operation.nodePaths[index],
-                  data,
-                  originalData,
-                  operation.metadata
-                );
+                if (typeof data === "function") {
+                  cache.updateChildren(
+                    operation.nodePaths[index],
+                    data,
+                    originalData,
+                    operation.metadata
+                  );
+                } else {
+                  cache.updateNodePath(
+                    operation.nodePaths[index],
+                    data,
+                    originalData,
+                    operation.metadata
+                  );
+                }
               }
             }
           });
@@ -15724,7 +15915,7 @@ var DataSourceApiImpl = class {
           if (nodePath) {
             operation.array.forEach((data) => {
               cache.insertNodePath(
-                nodePath,
+                [...nodePath],
                 data,
                 position2,
                 operation.metadata
@@ -15752,6 +15943,41 @@ var DataSourceApiImpl = class {
   flush() {
     return this.commit();
   }
+  waitForNodePath(nodePath, options) {
+    const state = this.getState();
+    if (this.isNodePathAvailable(nodePath)) {
+      return Promise.resolve(true);
+    }
+    const timeout = options?.timeout ?? DEFAULT_NODE_PATH_WAIT_TIMEOUT;
+    const result = state.waitForNodePathPromises.get(nodePath);
+    if (result) {
+      return result.promise;
+    }
+    const timestamp = Date.now();
+    let resolve = () => {
+    };
+    const promise = new Promise((res) => {
+      let resolved;
+      let timeoutId;
+      resolve = (value) => {
+        clearTimeout(timeoutId);
+        resolved = value;
+        state.waitForNodePathPromises.delete(nodePath);
+        res(value);
+      };
+      timeoutId = setTimeout(() => {
+        if (resolved === void 0) {
+          resolve(false);
+        }
+      }, timeout);
+    });
+    state.waitForNodePathPromises.set(nodePath, {
+      timestamp,
+      promise,
+      resolve
+    });
+    return promise;
+  }
   commit() {
     this.commitOperations(this.pendingOperations);
     this.pendingOperations.length = 0;
@@ -16070,6 +16296,7 @@ function concludeReducer(params) {
   }
   const toPrimaryKey = state.toPrimaryKey;
   const nodesKey = state.nodesKey;
+  const isTree = state.isTree;
   const getNodeChildren = nodesKey ? (node) => {
     return node[nodesKey];
   } : void 0;
@@ -16094,6 +16321,16 @@ function concludeReducer(params) {
           nodesKey
         }
       );
+      if (isTree) {
+        state.waitForNodePathPromises.visit(({ value }, keys) => {
+          if (!value) {
+            return;
+          }
+          if (state.indexer.getDataForNodePath(keys) !== void 0) {
+            value.resolve(true);
+          }
+        });
+      }
     }
   }
   if (cache) {
@@ -16115,7 +16352,6 @@ function concludeReducer(params) {
   const shouldSortAgain = shouldSort && (sortDepsChanged || !state.lastSortDataArray || cacheAffectedParts.sortInfo);
   const groupBy = state.groupBy;
   const pivotBy = state.pivotBy;
-  const isTree = state.isTree;
   const shouldGroup = !isTree && (groupBy.length > 0 || !!pivotBy);
   const shouldTree = isTree;
   const rowDisabledStateDepsChanged = haveDepsChanged(previousState, state, [
@@ -17198,6 +17434,7 @@ function initSetupState() {
     idToIndexMap: /* @__PURE__ */ new Map(),
     idToPathMap: /* @__PURE__ */ new Map(),
     pathToIndexMap: new DeepMap(),
+    waitForNodePathPromises: new DeepMap(),
     getDataSourceMasterContextRef: { current: () => void 0 },
     // TODO: cleanup cache on unmount
     cache: void 0,
@@ -17270,6 +17507,7 @@ var cleanupDataSource = (state) => {
   };
   state.treeExpandState?.destroy();
   state.treePaths?.clear();
+  state.waitForNodePathPromises.clear();
   state.pathToIndexMap?.clear();
   state.rowDisabledState?.destroy();
   state.groupRowsState?.destroy();
@@ -22226,7 +22464,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.14"
+      version: "6.0.16"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;