@linzjs/step-ag-grid 28.5.1 → 29.0.1

package/src/lui/reactUtils.tsx

@@ -12,3 +12,27 @@ export const usePrevious = <T,>(value: T): T | undefined => {
   }, [value]);
   return ref.current;
 };
+
+/**
+ * Dump prop differences for components between renders.
+ */
+export const usePropMonitor = (what: string, props: NonNullable<unknown>) => {
+  const prev = usePrevious(props);
+  useEffect(() => {
+    if (prev) {
+      let first = true;
+      Object.keys(props).forEach((p) => {
+        // @ts-expect-error any type
+        if (props[p] !== prev[p]) {
+          if (first) {
+            // eslint-disable-next-line no-console
+            console.log('--- props changed -----');
+            first = false;
+          }
+          // eslint-disable-next-line no-console
+          console.log(`${what} key: ${p} changed`);
+        }
+      });
+    }
+  }, [prev, props, what]);
+};

package/src/react-menu3/components/MenuList.tsx

@@ -370,6 +370,9 @@ export const MenuList = ({
     }
 
     const callback = debounce(() => {
+      if (!menuRef.current) {
+        return;
+      }
       const { width, height } = menuRef.current.ownerDocument.body.getBoundingClientRect();
       if (width === 0 || height === 0) return;
       if (

package/src/stories/grid/GridFilterButtons.stories.tsx

@@ -42,7 +42,7 @@ interface ITestRow {
   desc: string;
 }
 
-const GridFilterButtonsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridFilterButtonsTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -52,7 +52,7 @@ interface ITestRow {
   desc: string;
 }
 
-const GridNonEditableRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridNonEditableRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [

package/src/stories/grid/GridPinnedRow.stories.tsx

@@ -57,7 +57,7 @@ interface ITestPinnedRow {
   age: number;
 }
 
-const PinnedRowTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const PinnedRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({

package/src/stories/grid/GridPopoutContextMenu.stories.tsx

@@ -63,7 +63,7 @@ const ContextMenu = ({ clickedRow, colDef, close }: GridContextMenuComponentProp
   );
 };
 
-const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridPopoutContextMenuTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
   const { selectRowsWithFlashDiff } = useContext(GridContext);
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [rowData, setRowData] = useState([
@@ -125,9 +125,9 @@ const GridPopoutContextMenuTemplate: StoryFn<typeof Grid> = (props: GridProps) =
         domLayout={'autoHeight'}
         defaultColDef={{ minWidth: 70 }}
         sizeColumns={'auto'}
-        onCellEditingComplete={() => {
+        onBulkEditingComplete={() => {
           /* eslint-disable-next-line no-console */
-          console.log('Cell editing complete');
+          console.log('onBulkEditingComplete()');
         }}
         contextMenu={ContextMenu}
       />

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -48,7 +48,7 @@ export default {
   ],
 } as Meta<typeof Grid>;
 
-const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
   const { selectRowsWithFlashDiff } = useContext(GridContext);
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [rowData, setRowData] = useState([
@@ -217,9 +217,9 @@ const GridPopoutEditGenericTemplate: StoryFn<typeof Grid> = (props: GridProps) =
         domLayout={'autoHeight'}
         defaultColDef={{ minWidth: 70 }}
         sizeColumns={'auto'}
-        onCellEditingComplete={() => {
+        onBulkEditingComplete={() => {
           /* eslint-disable-next-line no-console */
-          console.log('Cell editing complete');
+          console.log('onBulkEditingComplete()');
         }}
       />
       <ActionButton icon={'ic_add'} name={'Add new row'} inProgressName={'Adding...'} onClick={addRowAction} />

package/src/stories/grid/GridPopoverEditDropDown.stories.tsx

@@ -39,7 +39,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ width: 1024, height: 400 }}>
+      <div style={{ width: 1224, height: 400 }}>
         <GridUpdatingContextProvider>
           <GridContextProvider>
             <Story />
@@ -65,7 +65,7 @@ interface ICode {
   desc: string;
 }
 
-const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridEditDropDownTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
 
   const optionsFn = useCallback(async (selectedRows: ITestRow[], filter?: string) => {
@@ -317,9 +317,13 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         columnDefs={columnDefs}
         rowData={rowData}
         domLayout={'autoHeight'}
-        onCellEditingComplete={() => {
+        onBulkEditingComplete={() => {
           /* eslint-disable-next-line no-console */
-          console.log('Cell editing complete');
+          console.log('onBulkEditingComplete()');
+        }}
+        onCellFocused={({ colDef, data }) => {
+          /* eslint-disable-next-line no-console */
+          console.log('on cell focused called', { colDef, data });
         }}
       />
     </GridWrapper>

package/src/stories/grid/GridPopoverEditMultiSelect.stories.tsx

@@ -116,6 +116,7 @@ const GridEditMultiSelectTemplate: StoryFn<typeof Grid> = (props: GridProps) =>
       ),
       GridPopoutEditMultiSelect<ITestRow, ITestRow['position']>(
         {
+          colId: 'position2',
           field: 'position',
           headerName: 'Parcel picker',
           valueFormatter: ({ value }) => {

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -70,7 +70,7 @@ interface ITestRow {
   dd: string;
 }
 
-const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [

package/src/stories/grid/GridViewList.stories.tsx

@@ -49,7 +49,7 @@ interface ITestRow {
   dd: string;
 }
 
-const GridReadOnlyTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [

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

@@ -11,6 +11,7 @@ import { expect, fn, userEvent, within } from 'storybook/test';
 import {
   GridBaseRow,
   GridContext,
+  GridContextType,
   GridFormDropDown,
   GridFormDropDownProps,
   GridFormSubComponentTextInput,
@@ -53,9 +54,9 @@ const Template: StoryFn<typeof GridFormDropDown<GridBaseRow, number>> = (
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
-          } as any
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
+          } as unknown as GridContextType<GridBaseRow>
         }
       >
         <h6 ref={anchorRef}>Interaction test</h6>
@@ -71,6 +72,7 @@ const Template: StoryFn<typeof GridFormDropDown<GridBaseRow, number>> = (
             formatValue: () => '',
             saving: false,
             setSaving: () => {},
+            stopEditing: () => {},
           }}
         >
           <GridFormDropDown {...props} {...config} />

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

@@ -31,8 +31,8 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
           } as any
         }
       >
@@ -49,6 +49,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
             selectedRows: [],
             data: { value: '' },
             field: 'value',
+            stopEditing: () => {},
           }}
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />

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

@@ -31,8 +31,8 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
           } as any
         }
       >
@@ -49,6 +49,7 @@ const Template: StoryFn<typeof GridFormEditBearing> = (props: GridFormEditBearin
             selectedRows: [],
             data: { value: '' },
             field: 'value',
+            stopEditing: () => {},
           }}
         >
           <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />

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

@@ -45,8 +45,8 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
           } as any
         }
       >
@@ -63,6 +63,7 @@ const Template: StoryFn<typeof GridFormMultiSelectGrid> = (props: GridFormMultiS
             saving: false,
             data: { value: '' },
             field: 'value',
+            stopEditing: () => {},
           }}
         >
           <GridFormMultiSelectGrid {...props} {...config} />

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

@@ -56,8 +56,8 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
           } as any
         }
       >
@@ -74,6 +74,7 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
             saving: false,
             setSaving: () => {},
             formatValue: (value) => value,
+            stopEditing: () => {},
           }}
         >
           <GridFormMultiSelect {...props} {...config} />

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

@@ -40,8 +40,8 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
           } as any
         }
       >
@@ -58,6 +58,7 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
             saving: false,
             setSaving: () => {},
             formatValue: (value) => value,
+            stopEditing: () => {},
           }}
         >
           <GridFormPopoverMenu

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

@@ -26,8 +26,8 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
           } as any
         }
       >
@@ -44,6 +44,7 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
             saving: false,
             setSaving: () => {},
             formatValue: (value) => value,
+            stopEditing: () => {},
           }}
         >
           <GridFormTextArea {...props} required={true} />

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

@@ -26,8 +26,8 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
       <GridContext.Provider
         value={
           {
-            stopEditing: () => {},
-            cancelEdit: () => {},
+            onBulkEditingComplete: () => {},
+            resetFocusedCellAfterCellEditing: () => {},
           } as any
         }
       >
@@ -44,6 +44,7 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
             saving: false,
             setSaving: () => {},
             formatValue: (value) => value,
+            stopEditing: () => {},
           }}
         >
           <GridFormTextInput {...props} required={true} />

package/src/stories/grid/gridFormStatic/GridFormDropDown.stories.tsx

@@ -15,8 +15,8 @@ export default {
   args: {},
 } as Meta<typeof GridFormDropDown>;
 
-const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps<GridBaseRow>) => {
-  const configs: [string, GridFormDropDownProps<GridBaseRow>, string?][] = [
+const Template: StoryFn<typeof GridFormDropDown> = (props: GridFormDropDownProps<GridBaseRow, unknown>) => {
+  const configs: [string, GridFormDropDownProps<GridBaseRow, unknown>, string?][] = [
     ['No options', { options: [] }],
     ['Custom no options', { options: [], noOptionsMessage: 'Custom no options' }],
     [

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -75,7 +75,7 @@ const eAction = fn(() => {
   return true;
 });
 
-const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
+const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
@@ -223,7 +223,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
   );
 };
 
-export const GridKeyboardInteractions: StoryFn<typeof Grid> = GridKeyboardInteractionsTemplate.bind({});
+export const GridKeyboardInteractions: StoryFn<typeof Grid<ITestRow>> = GridKeyboardInteractionsTemplate.bind({});
 GridKeyboardInteractions.play = async ({ canvasElement }) => {
   multiEditAction.mockClear();
   eAction.mockClear();