@linzjs/step-ag-grid 17.8.0 → 17.10.0

package/dist/src/components/Grid.d.ts

@@ -68,6 +68,7 @@ export interface GridProps {
      * Defaults to false.
      */
     singleClickEdit?: boolean;
+    loading?: boolean;
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.

package/dist/src/components/gridForm/GridFormPopoverMenu.d.ts

@@ -19,6 +19,7 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
 }
 export interface MenuOption<RowType extends GridBaseRow> {
     label: ReactElement | string | MenuSeparatorType;
+    subMenu?: () => ReactElement;
     action?: (props: {
         selectedRows: RowType[];
         menuOption: SelectedMenuOptionResult<RowType>;

package/dist/src/contexts/GridContext.d.ts

@@ -61,6 +61,7 @@ export interface GridContextType<RowType extends GridBaseRow> {
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;
     setOnCellEditingComplete: (callback: (() => void) | undefined) => void;
+    showNoRowsOverlay: () => void;
 }
 export declare const GridContext: import("react").Context<GridContextType<any>>;
 export declare const useGridContext: <RowType extends GridBaseRow>() => GridContextType<RowType>;

package/dist/step-ag-grid.cjs.js

@@ -224,6 +224,9 @@ const GridContext = React.createContext({
     setOnCellEditingComplete: () => {
         console.error("no context provider for setOnCellEditingComplete");
     },
+    showNoRowsOverlay: () => {
+        console.error("no context provider for showLoadingOverlay");
+    },
 });
 const useGridContext = () => React.useContext(GridContext);
 
@@ -2360,9 +2363,8 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
  * Wrapper for AgGrid to add commonly used functionality.
  */
 const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : 40, ...params }) => {
-    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = React.useContext(GridContext);
+    const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, stopEditing, } = React.useContext(GridContext);
     const { checkUpdating, updatedDep, updatingCols } = React.useContext(GridUpdatingContext);
-    const { prePopupOps } = React.useContext(GridContext);
     const gridDivRef = React.useRef(null);
     const lastSelectedIds = React.useRef([]);
     const [staleGrid, setStaleGrid] = React.useState(false);
@@ -2529,7 +2531,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     const columnDefs = React.useMemo(() => {
         const adjustColDefs = params.columnDefs.map((colDef) => {
             const colDefEditable = colDef.editable;
-            const editable = combineEditables(params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
+            const editable = combineEditables(params.loading !== true && params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
             return {
                 ...colDef,
                 editable,
@@ -2576,6 +2578,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         params.columnDefs,
         params.selectable,
         params.onRowDragEnd,
+        params.loading,
         params.readOnly,
         params.defaultColDef?.editable,
         selectColumnPinned,
@@ -2739,6 +2742,15 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
             });
         }
     }, [autoSizeColumns, getColDef, sizeColumns, updatedDep, updatingCols]);
+    const prevLoading = React.useRef(false);
+    React.useEffect(() => {
+        const newLoading = !rowData || params.loading === true;
+        if (newLoading && !prevLoading.current) {
+            stopEditing();
+            showNoRowsOverlay();
+        }
+        prevLoading.current = newLoading;
+    }, [params.loading, rowData, showNoRowsOverlay, stopEditing]);
     /**
      * Resize columns to fit if required on window/container resize
      */
@@ -2813,7 +2825,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                     }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
-                        return (jsxRuntime.jsx(GridNoRowsOverlay, { loading: !rowData, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
+                        return (jsxRuntime.jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
                     }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave }) })] }));
 };
 
@@ -4233,7 +4245,7 @@ const GridFormPopoverMenu = (props) => {
         invalid: () => subComponentSelected && !subComponentIsValid.current,
         save,
     });
-    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormPopupMenu", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: lodashEs.isEmpty(options) ? (jsxRuntime.jsx(MenuItem, { className: "GridPopoverMenu-noOptions", disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === "__isMenuSeparator__" ? (jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(MenuItem, { onClick: (e) => onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: item.label }, `${item.label}`), item.subComponent && subComponentSelected === item && (jsxRuntime.jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
+    return popoverWrapper(jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormPopupMenu", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: lodashEs.isEmpty(options) ? (jsxRuntime.jsx(MenuItem, { className: "GridPopoverMenu-noOptions", disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === "__isMenuSeparator__" ? (jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxRuntime.jsxs(React.Fragment, { children: [item.subMenu ? (jsxRuntime.jsx(SubMenu, { disabled: !!item.disabled, label: item.label, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: jsxRuntime.jsx(item.subMenu, {}) }, `${item.label}`)) : (jsxRuntime.jsx(MenuItem, { onClick: (e) => onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: item.label }, `${item.label}`)), item.subComponent && subComponentSelected === item && (jsxRuntime.jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
                                 context: {},
                                 data,
                                 value: subSelectedValue,
@@ -5046,6 +5058,9 @@ const GridContextProvider = (props) => {
     const isExternalFilterPresent = () => !lodashEs.isEmpty(externalFilters.current);
     const doesExternalFilterPass = (node) => externalFilters.current.every((filter) => filter(node.data, node));
     const getColDef = React.useCallback((colId) => (!!colId && gridApi?.getColumnDef(colId)) || undefined, [gridApi]);
+    const showNoRowsOverlay = React.useCallback(() => {
+        gridApi?.showNoRowsOverlay();
+    }, [gridApi]);
     /**
      * Apply column visibility
      */
@@ -5131,6 +5146,7 @@ const GridContextProvider = (props) => {
             doesExternalFilterPass,
             downloadCsv,
             setOnCellEditingComplete,
+            showNoRowsOverlay,
         }, children: props.children }));
 };
 /**