@linzjs/step-ag-grid 29.1.1 → 29.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.1.1",
+  "version": "29.1.2",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridPopoverHook.tsx

@@ -20,8 +20,13 @@ export interface GridPopoverHookProps<TData> {
   dontSaveOnExternalClick?: boolean;
 }
 
-export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopoverHookProps<TData>) => {
-  const { onBulkEditingComplete } = useGridContext<TData>();
+export const useGridPopoverHook = <TData extends GridBaseRow>({
+  className,
+  save,
+  invalid,
+  dontSaveOnExternalClick,
+}: GridPopoverHookProps<TData>) => {
+  const { onBulkEditingComplete, redrawRows } = useGridContext<TData>();
   const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext<TData>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setOpen] = useState(false);
@@ -35,30 +40,30 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
       if (reason == CloseReason.CANCEL) {
         stopEditing();
         onBulkEditingComplete();
+        redrawRows();
         return;
       }
-      if (props?.invalid?.()) {
+      if (invalid?.()) {
         // Don't close, don't do anything it's invalid
         return;
       }
 
-      if (!props.save) {
+      if (!save) {
         // No save method so just close
         stopEditing();
         onBulkEditingComplete();
+        redrawRows();
         return;
       }
 
       if (
-        await updateValue(
-          props.save,
-          reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0,
-        )
+        await updateValue(save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)
       ) {
         stopEditing();
+        redrawRows();
       }
     },
-    [onBulkEditingComplete, props, stopEditing, updateValue],
+    [invalid, onBulkEditingComplete, redrawRows, save, stopEditing, updateValue],
   );
 
   const popoverWrapper = useCallback(
@@ -82,7 +87,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
               }}
               viewScroll={'auto'}
               dontShrinkIfDirectionIsTop={true}
-              className={props.className}
+              className={className}
             >
               {saving && ( // This is the overlay that prevents editing when the editor is saving
                 <div className={'ComponentLoadingWrapper-saveOverlay'} />
@@ -93,7 +98,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
                 data-reason={''}
                 onClick={(e) => {
                   let reason = e.currentTarget.getAttribute('data-reason') ?? undefined;
-                  if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
+                  if (dontSaveOnExternalClick && reason === CloseReason.BLUR) {
                     reason = CloseReason.CANCEL;
                   }
                   void triggerSave(reason);
@@ -105,7 +110,7 @@ export const useGridPopoverHook = <TData extends GridBaseRow>(props: GridPopover
         </>
       );
     },
-    [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave],
+    [anchorRef, isOpen, className, dontSaveOnExternalClick, saving, triggerSave],
   );
 
   return {

package/src/contexts/GridContextProvider.tsx

@@ -1,5 +1,12 @@
-import { CellPosition, ColDef, GridApi, IRowNode, RowNode } from 'ag-grid-community';
-import { CsvExportParams, ProcessCellForExportParams } from 'ag-grid-community';
+import {
+  CellPosition,
+  ColDef,
+  CsvExportParams,
+  GridApi,
+  IRowNode,
+  ProcessCellForExportParams,
+  RowNode,
+} from 'ag-grid-community';
 import debounce from 'debounce-promise';
 import { compact, defer, delay, difference, filter, isEmpty, last, pull, remove, sortBy, sumBy } from 'lodash-es';
 import { PropsWithChildren, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -8,6 +15,7 @@ import { ColDefT, GridBaseRow } from '../components';
 import { GridCellFillerColId, isGridCellFiller } from '../components/GridCellFiller';
 import { getColId, isFlexColumn } from '../components/gridUtil';
 import { fnOrVar, isNotEmpty, sanitiseFileName, wait } from '../utils/util';
+import { waitForCondition } from '../utils/waitForCondition';
 import { AutoSizeColumnsProps, AutoSizeColumnsResult, GridContext, GridFilterExternal } from './GridContext';
 import { GridUpdatingContext } from './GridUpdatingContext';
 
@@ -909,15 +917,3 @@ export const downloadCsvUseValueFormattersProcessCellCallback = (params: Process
   // We add an extra encodeToString here just in case valueFormatter is returning non string values
   return encodeToString(result);
 };
-
-const waitForCondition = async (condition: () => boolean, timeoutMs: number): Promise<boolean> => {
-  const endTime = Date.now() + timeoutMs;
-  while (Date.now() < endTime) {
-    if (condition()) {
-      return true;
-    }
-    await wait(100);
-  }
-  console.warn('waitForCondition failed');
-  return false;
-};

package/src/index.ts

@@ -17,3 +17,4 @@ export * from './utils/deferredPromise';
 export * from './utils/textMatcher';
 export * from './utils/textValidator';
 export * from './utils/util';
+export * from './utils/waitForCondition';

package/src/stories/grid/gridFormInteraction/GridFormDropDownInteraction.stories.tsx

@@ -10,8 +10,7 @@ import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
   GridBaseRow,
-  GridContext,
-  GridContextType,
+  GridContextProvider,
   GridFormDropDown,
   GridFormDropDownProps,
   GridFormSubComponentTextInput,
@@ -51,14 +50,7 @@ const Template: StoryFn<typeof GridFormDropDown<GridBaseRow, number>> = (
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as unknown as GridContextType<GridBaseRow>
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -77,7 +69,7 @@ const Template: StoryFn<typeof GridFormDropDown<GridBaseRow, number>> = (
         >
           <GridFormDropDown {...props} {...config} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  GridContextProvider,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingCorrectionEditorParams,
@@ -28,14 +28,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -54,7 +47,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/stories/grid/gridFormInteraction/GridFormEditBearingInteraction.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  GridContextProvider,
   GridFormEditBearing,
   GridFormEditBearingProps,
   GridPopoverEditBearingEditorParams,
@@ -28,14 +28,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -54,7 +47,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectGridInteraction.stories.tsx

@@ -8,7 +8,12 @@ import { GridPopoverContext } from 'contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
-import { GridContext, GridFormMultiSelectGrid, GridFormMultiSelectGridProps, MultiSelectGridOption } from '../../..';
+import {
+  GridContextProvider,
+  GridFormMultiSelectGrid,
+  GridFormMultiSelectGridProps,
+  MultiSelectGridOption,
+} from '../../..';
 
 export default {
   title: 'GridForm / Interactions',
@@ -42,14 +47,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -68,7 +66,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
         >
           <GridFormMultiSelectGrid {...props} {...config} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  GridContextProvider,
   GridFormMultiSelect,
   GridFormMultiSelectProps,
   GridFormSubComponentTextInput,
@@ -53,14 +53,7 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -79,7 +72,7 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
         >
           <GridFormMultiSelect {...props} {...config} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -10,7 +10,7 @@ import * as test from 'storybook/test';
 import { expect, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  GridContextProvider,
   GridFormPopoverMenu,
   GridFormPopoverMenuProps,
   GridFormSubComponentTextArea,
@@ -37,14 +37,7 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -85,7 +78,7 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
             ]}
           />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.stories.tsx

@@ -8,7 +8,7 @@ import { GridPopoverContext } from 'contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import { GridContext, GridFormTextArea, GridFormTextAreaProps } from '../../..';
+import { GridContextProvider, GridFormTextArea, GridFormTextAreaProps } from '../../..';
 
 export default {
   title: 'GridForm / Interactions',
@@ -23,14 +23,7 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -49,7 +42,7 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
         >
           <GridFormTextArea {...props} required={true} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/stories/grid/gridFormInteraction/GridFormTextInputInteraction.stories.tsx

@@ -8,7 +8,7 @@ import { GridPopoverContext } from 'contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import { GridContext, GridFormTextInput, GridFormTextInputProps } from '../../..';
+import { GridContextProvider, GridFormTextInput, GridFormTextInputProps } from '../../..';
 
 export default {
   title: 'GridForm / Interactions',
@@ -23,14 +23,7 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -49,7 +42,7 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
         >
           <GridFormTextInput {...props} required={true} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };

package/src/utils/waitForCondition.tsx

@@ -0,0 +1,13 @@
+import { wait } from '../utils/util';
+
+export const waitForCondition = async (condition: () => boolean, timeoutMs: number): Promise<boolean> => {
+  const endTime = Date.now() + timeoutMs;
+  while (Date.now() < endTime) {
+    if (condition()) {
+      return true;
+    }
+    await wait(100);
+  }
+  console.warn('waitForCondition failed');
+  return false;
+};