@linzjs/step-ag-grid 16.0.0 → 17.0.0

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

@@ -1,7 +1,3 @@
-import { ReactNode } from "react";
-interface UpdatingContextProviderProps {
-    children: ReactNode;
-}
+import { PropsWithChildren } from "react";
 export type GridUpdatingContextStatus = Record<string, (number | string)[] | undefined>;
-export declare const GridUpdatingContextProvider: (props: UpdatingContextProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const GridUpdatingContextProvider: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lui/ActionButton.d.ts

@@ -1,5 +1,5 @@
 import "./ActionButton.scss";
-import { CSSProperties } from "react";
+import { CSSProperties, ReactElement } from "react";
 import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 export interface ActionButtonProps {
@@ -17,4 +17,4 @@ export interface ActionButtonProps {
     style?: CSSProperties;
     disabled?: boolean;
 }
-export declare const ActionButton: ({ icon, name, inProgressName, disabled, dataTestId, style, className, title, onClick, size, iconPosition, level, "aria-label": ariaLabel, }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ icon, name, inProgressName, disabled, dataTestId, style, className, title, onClick, size, iconPosition, level, "aria-label": ariaLabel, }: ActionButtonProps) => ReactElement;

package/dist/src/lui/FormError.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import "./FormError.scss";
+import { ReactElement } from "react";
 export interface FormErrorProps {
     helpText?: string;
-    error?: JSX.Element | string | boolean | null;
+    error?: ReactElement | string | boolean | null;
 }
 export declare const FormError: (props: FormErrorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lui/TextAreaInput.d.ts

@@ -1,11 +1,11 @@
-import { InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, ReactElement } from "react";
 export declare const useGenerateOrDefaultId: (idFromProps?: string) => string;
 export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
     value: string;
-    label?: JSX.Element | string;
+    label?: ReactElement | string;
     mandatory?: boolean;
     helpText?: string;
-    error?: JSX.Element | string | boolean | null;
+    error?: ReactElement | string | boolean | null;
     allowTabToSave?: boolean;
 }
 export declare const TextAreaInput: (props: LuiTextAreaInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lui/TextInputFormatted.d.ts

@@ -1,10 +1,10 @@
 import "./TextInputFormatted.scss";
-import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { DetailedHTMLProps, InputHTMLAttributes, ReactElement } from "react";
 export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     value: string;
     helpText?: string;
-    error?: JSX.Element | string | boolean | null;
+    error?: ReactElement | string | boolean | null;
     formatted?: string;
     allowTabToSave?: boolean;
 }
-export declare const TextInputFormatted: (props: LuiTextInputProps) => JSX.Element;
+export declare const TextInputFormatted: (props: LuiTextInputProps) => ReactElement;

package/dist/src/react-menu3/components/FocusableItem.d.ts

@@ -1,9 +1,9 @@
-import { LegacyRef } from "react";
+import { LegacyRef, ReactElement } from "react";
 import { BaseProps } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
 export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
     disabled?: boolean;
-    children: (ref: LegacyRef<any>) => JSX.Element;
+    children: (ref: LegacyRef<any>) => ReactElement;
 }
 export declare const FocusableItemFr: ({ className, disabled, children, isHovering, menuItemRef, externalRef, ...restProps }: FocusableItemProps) => import("react/jsx-runtime").JSX.Element;
 export declare const FocusableItem: import("react").ForwardRefExoticComponent<Omit<FocusableItemProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/src/react-menu3/utils/withHovering.d.ts

@@ -1,7 +1,7 @@
-import { MutableRefObject, PropsWithRef } from "react";
+import { MutableRefObject, PropsWithRef, ReactElement } from "react";
 export interface withHoveringResultProps {
     isHovering?: boolean;
     externalRef?: MutableRefObject<any>;
     menuItemRef?: MutableRefObject<HTMLLIElement>;
 }
-export declare const withHovering: <T>(name: string, WrappedComponent: (props: T) => JSX.Element) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<PropsWithRef<T>> & import("react").RefAttributes<unknown>>;
+export declare const withHovering: <T>(name: string, WrappedComponent: (props: T) => ReactElement) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<PropsWithRef<T>> & import("react").RefAttributes<unknown>>;

package/dist/src/utils/textValidator.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { GridBaseRow } from "../components/Grid";
 export interface TextInputValidatorProps<RowType extends GridBaseRow> {
     required?: boolean;
     maxLength?: number;
     maxBytes?: number;
-    invalid?: (value: string, data: RowType, context: any) => JSX.Element | string | null;
+    invalid?: (value: string, data: RowType, context: any) => ReactElement | string | null;
     numberFormat?: {
         precision?: number;
         scale?: number;
@@ -15,4 +15,4 @@ export interface TextInputValidatorProps<RowType extends GridBaseRow> {
         notZero?: boolean;
     };
 }
-export declare const TextInputValidator: <RowType extends GridBaseRow>(props: TextInputValidatorProps<RowType>, value: string | null, data: RowType, context: any) => string | JSX.Element | null;
+export declare const TextInputValidator: <RowType extends GridBaseRow>(props: TextInputValidatorProps<RowType>, value: string | null, data: RowType, context: any) => string | ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -893,6 +893,10 @@ const getEndStatus = (status, unmountOnExit) => {
   }
 };
 const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
+const nextTick = (transitState, status) => setTimeout(() => {
+  // Reading document.body.offsetTop can force browser to repaint before transition to the next state
+  isNaN(document.body.offsetTop) || transitState(status + 1);
+}, 0);
 
 const updateState = (status, setState, latestState, timeoutId, onChange) => {
   clearTimeout(timeoutId.current);
@@ -934,7 +938,7 @@ const useTransition = ({
           break;
         case PRE_ENTER:
         case PRE_EXIT:
-          timeoutId.current = setTimeout(() => transitState(status + 1), 0);
+          timeoutId.current = nextTick(transitState, status);
           break;
       }
     };
@@ -2337,13 +2341,14 @@ 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-alpine", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, ...params }) => {
+const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, ...params }) => {
     const { gridReady, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = 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);
+    const [autoSized, setAutoSized] = React.useState(false);
     const postSortRows = usePostSortRowsHook({ setStaleGrid });
     /**
      * onContentSize should only be called at maximum twice.
@@ -2385,6 +2390,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         if (sizeColumns !== "none") {
             sizeColumnsToFit();
         }
+        setAutoSized(true);
         needsAutoSize.current = false;
     }, [autoSizeColumns, params, sizeColumns, sizeColumnsToFit]);
     const lastOwnerDocumentRef = React.useRef();
@@ -2727,7 +2733,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         }
     }, [sizeColumns, sizeColumnsToFit]);
     /**
-     * Set of column Id's that are prevented from auto-sizing as they are user set
+     * Set of column I'd's that are prevented from auto-sizing as they are user set
      */
     const userSizedColIds = React.useRef(new Set());
     /**
@@ -2749,9 +2755,9 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: params.rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsxRuntime.jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsxRuntime.jsx(agGridReact.AgGridReact, { rowHeight: params.rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
                         setInitialContentSize();
-                    }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...lodashEs.omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: (event) => {
+                    }, 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: params.rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsxRuntime.jsx(GridNoRowsOverlay, { rowCount: rowCount, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText }));
@@ -3065,7 +3071,7 @@ const GridFilterQuick = ({ quickFilterPlaceholder, defaultValue }) => {
             } }) }));
 };
 
-const GridFilters = ({ children }) => jsxRuntime.jsx("div", { className: "Grid-container-filters", children: children });
+const GridFilters = ({ children }) => (jsxRuntime.jsx("div", { className: "Grid-container-filters", children: children }));
 
 /**
  * Defers state change up to a minimum time since last state change.
@@ -4441,7 +4447,7 @@ const GridPopoverEditDropDown = (colDef, props) => GridCell(colDef, {
 });
 
 const GridPopoverMessage = (colDef, props) => GridCell({
-    resizable: false,
+    resizable: true,
     ...colDef,
     cellRendererParams: {
         singleClickEdit: true,
@@ -4626,7 +4632,13 @@ const GridContextProvider = (props) => {
             const gridHasNotUpdated = gridRowIdsNotUpdatedYet || gridRowIdsNotChangedYet;
             // After retry count expires we give-up and deselect all rows, then select any subset of rows that have updated
             if (gridHasNotUpdated && retryCount > 0) {
-                lodashEs.delay(() => _selectRowsWithOptionalFlash({ rowIds, select, flash, ifNoCellFocused, retryCount: retryCount - 1 }), 250);
+                lodashEs.delay(() => _selectRowsWithOptionalFlash({
+                    rowIds,
+                    select,
+                    flash,
+                    ifNoCellFocused,
+                    retryCount: retryCount - 1,
+                }), 250);
                 return;
             }
             const rowsThatNeedSelecting = lodashEs.sortBy(rowNodes.filter((node) => !node.isSelected()), (node) => node.data.id);
@@ -4727,13 +4739,14 @@ const GridContextProvider = (props) => {
     const autoSizeColumns = React.useCallback(({ skipHeader, colIds, userSizedColIds } = {}) => {
         if (!columnApi)
             return null;
-        const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds ?? []);
-        columnApi.getColumnState().forEach((col) => {
-            const colId = col.colId;
-            if ((lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId)) {
-                columnApi.autoSizeColumn(colId, skipHeader);
-            }
+        const colIdsSet = colIds instanceof Set ? colIds : new Set(colIds);
+        const colsToResize = columnApi.getColumnState().filter((colState) => {
+            const colId = colState.colId;
+            return (lodashEs.isEmpty(colIdsSet) || colIdsSet.has(colId)) && !userSizedColIds?.has(colId) && !colState.flex;
         });
+        if (!lodashEs.isEmpty(colsToResize)) {
+            columnApi.autoSizeColumns(colsToResize.map((colState) => colState.colId), skipHeader);
+        }
         return {
             width: lodashEs.sumBy(columnApi.getColumnState().filter((col) => !col.hide), "width"),
         };
@@ -4742,7 +4755,7 @@ const GridContextProvider = (props) => {
      * Resize columns to fit container
      */
     const sizeColumnsToFit = React.useCallback(() => {
-        gridApi && gridApi.sizeColumnsToFit();
+        gridApi?.sizeColumnsToFit();
     }, [gridApi]);
     const stopEditing = React.useCallback(() => {
         if (!gridApi)
@@ -25511,6 +25524,9 @@ const countRows = async (within) => {
     return getAllQuick({ tagName: `div[row-id]:not(:empty)` }, within).length;
 };
 const findRow = async (rowId, within) => {
+    await waitForWrapper(async () => {
+        expect(getAllQuick({ classes: ".ag-row" }).length > 0).toBe(true);
+    });
     return await findQuick({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
 };
 const queryRow = async (rowId, within) => {