@infinite-table/infinite-react 6.1.0-canary.0 → 6.1.0

package/index.dev.mjs

@@ -73,7 +73,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-import * as React70 from "react";
+import * as React71 from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -22984,7 +22984,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.1.0-canary.0"
+      version: "6.1.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -26374,7 +26374,63 @@ function useColumnFilterOperatorMenu() {
 import { useEffect as useEffect35 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
+import * as React68 from "react";
+
+// src/components/InfiniteTable/utils/contextMenuUtils.tsx
 import * as React67 from "react";
+function getMenuItemsAndColumns(menuDefinition) {
+  let items = menuDefinition ? Array.isArray(menuDefinition) ? menuDefinition : menuDefinition.items : null;
+  const columns = menuDefinition && !Array.isArray(menuDefinition) ? menuDefinition.columns : void 0;
+  return {
+    items,
+    columns
+  };
+}
+function getMenuDefaultProps(config) {
+  const onRootMouseDown = (event) => {
+    event.__insideMenu = true;
+  };
+  const onHide = (state) => {
+    state.domRef.current?.parentNode?.removeEventListener(
+      "mousedown",
+      onRootMouseDown
+    );
+  };
+  const menuDefaultProps = {
+    columns: [],
+    items: [],
+    autoFocus: true,
+    onShow: (state) => {
+      state.domRef.current?.parentNode?.addEventListener(
+        "mousedown",
+        onRootMouseDown
+      );
+    },
+    onHide,
+    onHideIntent: (state) => {
+      onHide(state);
+      config.onHideIntent?.();
+    }
+  };
+  return menuDefaultProps;
+}
+function getLazyMenu(menuDefinition, menuDefaultProps, MenuCmp) {
+  if (!menuDefinition) {
+    return null;
+  }
+  const updater = buildSubscriptionCallback();
+  menuDefinition.then((menuDefinition2) => {
+    const { items, columns } = getMenuItemsAndColumns(menuDefinition2);
+    if (items && items.length) {
+      updater(
+        /* @__PURE__ */ React67.createElement(MenuCmp, { ...menuDefaultProps, items: items || [], columns })
+      );
+    }
+  });
+  return /* @__PURE__ */ React67.createElement(AvoidReactDiff, { updater });
+}
+
+// src/components/InfiniteTable/utils/getCellContextMenu.tsx
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   const { columnId, rowIndex, event } = cellLocation;
   const { getComputed, getState } = context;
@@ -26397,42 +26453,25 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
       preventDefault: false
     };
   }
+  const menuDefaultProps = getMenuDefaultProps({
+    onHideIntent
+  });
   const menuDefinition = getCellContextMenuItems(cellContext, context);
-  let items = menuDefinition ? Array.isArray(menuDefinition) ? menuDefinition : menuDefinition.items : null;
-  const menuColumns = menuDefinition && !Array.isArray(menuDefinition) ? menuDefinition.columns : void 0;
-  const onRootMouseDown = (event2) => {
-    event2.__insideMenu = true;
-  };
-  const onHide = (state) => {
-    state.domRef.current?.parentNode?.removeEventListener(
-      "mousedown",
-      onRootMouseDown
-    );
-  };
+  const preventDefault = menuDefinition instanceof Promise ? true : Array.isArray(menuDefinition) ? true : !!(menuDefinition && Array.isArray(menuDefinition.items));
+  if (menuDefinition instanceof Promise) {
+    return {
+      cellContext,
+      menu: getLazyMenu(menuDefinition, menuDefaultProps, MenuCmp),
+      preventDefault
+    };
+  }
+  const { items, columns } = getMenuItemsAndColumns(menuDefinition);
   if (!items || !items.length) {
     return { cellContext, menu: null, preventDefault: Array.isArray(items) };
   }
   return {
-    preventDefault: true,
-    menu: /* @__PURE__ */ React67.createElement(
-      MenuCmp,
-      {
-        columns: menuColumns,
-        autoFocus: true,
-        items,
-        onShow: (state) => {
-          state.domRef.current?.parentNode?.addEventListener(
-            "mousedown",
-            onRootMouseDown
-          );
-        },
-        onHide,
-        onHideIntent: (state) => {
-          onHide(state);
-          onHideIntent?.();
-        }
-      }
-    ),
+    preventDefault,
+    menu: /* @__PURE__ */ React68.createElement(MenuCmp, { ...menuDefaultProps, columns, items }),
     cellContext
   };
 }
@@ -26453,42 +26492,25 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   if (!getContextMenuItems) {
     return { cellContext, menu: null, preventDefault: false };
   }
-  let menuDefinition = getContextMenuItems(cellContext, context);
-  let items = menuDefinition ? Array.isArray(menuDefinition) ? menuDefinition : menuDefinition.items : null;
-  const menuColumns = menuDefinition && !Array.isArray(menuDefinition) ? menuDefinition.columns : void 0;
-  const onRootMouseDown = (event) => {
-    event.__insideMenu = true;
-  };
-  const onHide = (state) => {
-    state.domRef.current?.parentNode?.removeEventListener(
-      "mousedown",
-      onRootMouseDown
-    );
-  };
+  const menuDefaultProps = getMenuDefaultProps({
+    onHideIntent
+  });
+  const menuDefinition = getContextMenuItems(cellContext, context);
+  const preventDefault = menuDefinition instanceof Promise ? true : Array.isArray(menuDefinition) ? true : !!(menuDefinition && Array.isArray(menuDefinition.items));
+  if (menuDefinition instanceof Promise) {
+    return {
+      cellContext,
+      menu: getLazyMenu(menuDefinition, menuDefaultProps, MenuCmp),
+      preventDefault
+    };
+  }
+  const { items, columns } = getMenuItemsAndColumns(menuDefinition);
   if (!items || !items.length) {
     return { cellContext, menu: null, preventDefault: Array.isArray(items) };
   }
   return {
-    preventDefault: true,
-    menu: /* @__PURE__ */ React67.createElement(
-      MenuCmp,
-      {
-        columns: menuColumns,
-        autoFocus: true,
-        items,
-        onShow: (state) => {
-          state.domRef.current?.parentNode?.addEventListener(
-            "mousedown",
-            onRootMouseDown
-          );
-        },
-        onHide,
-        onHideIntent: (state) => {
-          onHide(state);
-          onHideIntent?.();
-        }
-      }
-    ),
+    preventDefault,
+    menu: /* @__PURE__ */ React68.createElement(MenuCmp, { ...menuDefaultProps, columns, items }),
     cellContext
   };
 }
@@ -26680,7 +26702,7 @@ function useTableContextMenu() {
 
 // src/components/InfiniteTable/components/HScrollSyncContent.tsx
 import { useRef as useRef30 } from "react";
-import * as React68 from "react";
+import * as React69 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
 import { useCallback as useCallback28, useEffect as useEffect36 } from "react";
@@ -26726,7 +26748,7 @@ function HScrollSyncContent(props) {
   } else if (maxWidth === "viewport") {
     style2.maxWidth = ThemeVars.runtime.bodyWidth;
   }
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "div",
     {
       ref: domRef,
@@ -26827,7 +26849,7 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-import * as React69 from "react";
+import * as React70 from "react";
 var logWarning = once(() => {
   console.warn(
     `It appears you have not loaded the CSS file for InfiniteTable.
@@ -26841,7 +26863,7 @@ import '@infinite-table/infinite-react/index.css'
 var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
 function useDebugMode() {
   const { getState } = useInfiniteTable();
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     runDebugMode(getState);
   }, []);
 }
@@ -26897,7 +26919,7 @@ function InfiniteTableHeader2() {
   const { state: componentState, getComputed } = context;
   const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
   const { scrollbars } = getComputed();
-  return header ? /* @__PURE__ */ React70.createElement(
+  return header ? /* @__PURE__ */ React71.createElement(
     TableHeaderWrapper,
     {
       wrapRowsHorizontally: !!wrapRowsHorizontally,
@@ -26914,7 +26936,7 @@ var InfiniteTableBodyCls = join(
   transformTranslateZero
 );
 function InfiniteTableBodyContainer(props) {
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(
     "div",
     {
       ...props,
@@ -26951,7 +26973,7 @@ function InfiniteTableBody() {
   const {
     componentState: { loading }
   } = useDataSourceContextValue();
-  const onContextMenu = React70.useCallback((event) => {
+  const onContextMenu = React71.useCallback((event) => {
     const state = context.getState();
     const target = event.target;
     if (!masterContext && event._from_row_detail) {
@@ -26997,7 +27019,7 @@ function InfiniteTableBody() {
   });
   const { autoFocus, tabIndex } = domProps ?? {};
   useToggleWrapRowsHorizontally();
-  return /* @__PURE__ */ React70.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React71.createElement(
     HeadlessTable,
     {
       forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
@@ -27018,9 +27040,9 @@ function InfiniteTableBody() {
       cellHoverClassNames: showHoverRows ? HOVERED_CLASS_NAMES : void 0,
       scrollerDOMRef
     }
-  ), /* @__PURE__ */ React70.createElement(LoadMaskCmp, { visible: loading }, loadingText));
+  ), /* @__PURE__ */ React71.createElement(LoadMaskCmp, { visible: loading }, loadingText));
 }
-var InfiniteTableComponent = React70.memo(
+var InfiniteTableComponent = React71.memo(
   function InfiniteTableComponent2() {
     const context = useInfiniteTable();
     const masterContext = useMasterDetailContext();
@@ -27052,7 +27074,7 @@ var InfiniteTableComponent = React70.memo(
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -27075,7 +27097,7 @@ var InfiniteTableComponent = React70.memo(
       ...initialDOMProps
     } = componentState.domProps ?? {};
     const domProps = useDOMProps(initialDOMProps);
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -27086,7 +27108,7 @@ var InfiniteTableComponent = React70.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -27100,13 +27122,13 @@ var InfiniteTableComponent = React70.memo(
       }
     }, [componentState.ready]);
     useDebugMode();
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (masterContext) {
         portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
       }
     }, []);
-    const children = initialChildren ?? /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React70.createElement(InfiniteTableBody, null));
-    return /* @__PURE__ */ React70.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React70.createElement(
+    const children = initialChildren ?? /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React71.createElement(InfiniteTableBody, null));
+    return /* @__PURE__ */ React71.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React71.createElement(
       "div",
       {
         ref: portalDOMRef,
@@ -27122,14 +27144,14 @@ var InfiniteTableComponent = React70.memo(
       cellContextMenuPortal,
       tableContextMenuPortal,
       filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+    ), rowHeightCSSVar ? /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "row-height",
         varName: rowHeightCSSVar,
         onChange: onRowHeightCSSVarChange
       }
-    ) : null, /* @__PURE__ */ React70.createElement(
+    ) : null, /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "flashing-duration",
@@ -27137,21 +27159,21 @@ var InfiniteTableComponent = React70.memo(
         varName: ThemeVars.components.Cell.flashingDuration,
         onChange: onFlashingDurationCSSVarChange
       }
-    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "row-detail-height",
         varName: rowDetailHeightCSSVar,
         onChange: onRowDetailHeightCSSVarChange
       }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "column-header-height",
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
-    ) : null, licenseValid ? null : /* @__PURE__ */ React70.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React70.createElement(FocusDetect, null));
+    ) : null, licenseValid ? null : /* @__PURE__ */ React71.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React71.createElement(FocusDetect, null));
   }
 );
 function InfiniteTableContextProvider({
@@ -27175,7 +27197,7 @@ function InfiniteTableContextProvider({
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React70.useState(() => {
+  const [imperativeApi] = React71.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -27211,20 +27233,20 @@ function InfiniteTableContextProvider({
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React70.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React70.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React71.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React71.createElement(InfiniteTableComponent, null));
 }
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
 var InfiniteTable = function(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React71.createElement(
       InfiniteTableRoot,
       {
         repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
@@ -27232,30 +27254,30 @@ var InfiniteTable = function(props) {
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
         ...props
       },
-      /* @__PURE__ */ React70.createElement(InfiniteTableContextProvider, { children: props.children })
+      /* @__PURE__ */ React71.createElement(InfiniteTableContextProvider, { children: props.children })
     )
   );
   if (false) {
-    return /* @__PURE__ */ React70.createElement(React70.StrictMode, null, table);
+    return /* @__PURE__ */ React71.createElement(React71.StrictMode, null, table);
   }
   return table;
 };
 InfiniteTable.Header = InfiniteTableHeader2;
 InfiniteTable.Body = InfiniteTableBody;
 InfiniteTable.HScrollSyncContent = HScrollSyncContent;
-InfiniteTable.Footer = () => /* @__PURE__ */ React70.createElement(InfiniteTableFooter, null);
+InfiniteTable.Footer = () => /* @__PURE__ */ React71.createElement(InfiniteTableFooter, null);
 
 // src/components/TreeGrid/TreeDataSource.tsx
-import * as React71 from "react";
+import * as React72 from "react";
 function TreeDataSource(props) {
   const { DataSource: DataSourceComponent } = useDataSourceInternal({ nodesKey: "children", ...props });
-  return /* @__PURE__ */ React71.createElement(DataSourceComponent, null, props.children ?? null);
+  return /* @__PURE__ */ React72.createElement(DataSourceComponent, null, props.children ?? null);
 }
 
 // src/components/TreeGrid/TreeGrid.tsx
-import * as React72 from "react";
+import * as React73 from "react";
 function TreeGrid(props) {
-  return /* @__PURE__ */ React72.createElement(InfiniteTable, { ...props });
+  return /* @__PURE__ */ React73.createElement(InfiniteTable, { ...props });
 }
 
 // src/components/DataSource/DataLoader/DataQuery.ts
@@ -27722,12 +27744,12 @@ var useEffectWhen = (callback, options) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
-import * as React73 from "react";
+import * as React74 from "react";
 var currentFlashingDurationVar = stripVar(
   InternalVars.currentFlashingDuration
 );
 var defaultRender = ({ children }) => {
-  return /* @__PURE__ */ React73.createElement(React73.Fragment, null, children);
+  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, children);
 };
 var DEFAULT_FLASH_DURATION = 1e3;
 var INTERNAL_FLASH_CLS_FOR_DIRECTION = {
@@ -27749,7 +27771,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
     // fadeClassName,
     render = defaultRender
   } = options;
-  const FlashingColumnCell2 = React73.forwardRef(
+  const FlashingColumnCell2 = React74.forwardRef(
     (props, _ref) => {
       const cellContext = useInfiniteColumnCell();
       const {
@@ -27759,13 +27781,13 @@ var createFlashingColumnCellComponent = (options = {}) => {
       const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
       const rowId = rowInfo.id;
       const columnId = column.id;
-      const initialRef = React73.useRef(true);
-      const oldValueRef = React73.useRef(value);
+      const initialRef = React74.useRef(true);
+      const oldValueRef = React74.useRef(value);
       const oldValue = initialRef.current ? null : oldValueRef.current;
       initialRef.current = false;
-      const flashTimeoutIdRef = React73.useRef();
-      const flashDirectionRef = React73.useRef();
-      const fadeTimeoutIdRef = React73.useRef();
+      const flashTimeoutIdRef = React74.useRef();
+      const flashDirectionRef = React74.useRef();
+      const fadeTimeoutIdRef = React74.useRef();
       useEffectWhen(
         () => {
           if (value === oldValueRef.current) {
@@ -27812,7 +27834,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
           different: [value]
         }
       );
-      return /* @__PURE__ */ React73.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
+      return /* @__PURE__ */ React74.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
     }
   );
   return FlashingColumnCell2;