@linzjs/step-ag-grid 27.0.0 → 27.2.0

package/package.json

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

package/src/components/Grid.tsx

@@ -359,16 +359,18 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
     });
   }, [params.columnDefs, params.loading, params.readOnly, params.defaultColDef?.editable]);
 
+  const hasExternallySelectedItems = !!params.setExternalSelectedItems;
+
   /**
    * When grid is ready set the apis to the grid context and sync selected items to grid.
    */
   const onGridReady = useCallback(
     (event: GridReadyEvent) => {
-      setApis(event.api, dataTestId);
+      setApis(event.api, hasExternallySelectedItems, dataTestId);
       event.api.showNoRowsOverlay();
       synchroniseExternallySelectedItemsToGrid();
     },
-    [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid],
+    [dataTestId, hasExternallySelectedItems, setApis, synchroniseExternallySelectedItemsToGrid],
   );
 
   /**
@@ -433,7 +435,7 @@ export const Grid = <TData extends GridBaseRow = GridBaseRow>({
    */
   const onCellClicked = useCallback(
     (event: CellClickedEvent) => {
-      if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
+      if (event.colDef.singleClickEdit ?? singleClickEdit) {
         void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
       }
     },

package/src/components/GridCell.tsx

@@ -66,7 +66,6 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
     | ((props: ICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined)
     | string;
   cellRendererParams?: {
-    singleClickEdit?: boolean;
     rightHoverElement?: ReactElement;
     originalCellRenderer?: any;
     editAction?: (selectedRows: TData[]) => void;

package/src/components/gridForm/GridFormDropDown.tsx

@@ -14,21 +14,28 @@ import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
 
-export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TValue> {
+export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TOption> {
   // Note the row that was clicked on will be first
   selectedRows: TData[];
   selectedRowIds: TData['id'][];
-  value: TValue;
+  value: TOption;
   subComponentValue?: any;
 }
 
-interface FinalSelectOption {
-  value: any;
+interface FinalSelectOption<TOptionValue> {
+  value: TOptionValue;
   label?: ReactElement | string;
   disabled?: boolean | string;
   subComponent?: (props: any, ref: any) => any;
 }
 
+export const primitiveToSelectOption = <T,>(value: T): SelectOption<T> => {
+  return {
+    value: value,
+    label: value ? String(value) : '',
+  };
+};
+
 export const MenuSeparatorString = '_____MENU_SEPARATOR_____';
 export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 
@@ -37,9 +44,11 @@ export const MenuHeaderItem = (title: string) => {
   return { label: title, value: MenuHeaderString };
 };
 
-export type SelectOption = null | string | FinalSelectOption;
+export type SelectOption<TOptionValue = any> = FinalSelectOption<TOptionValue>;
 
-export interface GridFormDropDownProps<TData extends GridBaseRow, TValue = any> extends CellEditorCommon {
+export type MaybePromise<T> = T | Promise<T>;
+
+export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?: // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
   | 'GridPopoverEditDropDown-containerSmall'
@@ -59,11 +68,11 @@ export interface GridFormDropDownProps<TData extends GridBaseRow, TValue = any>
   filterPlaceholder?: string;
   filterHelpText?: string;
   noOptionsMessage?: string;
-  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
-  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
+  onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
+  onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
   options:
-    | SelectOption[]
-    | ((selectedRows: TData[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined)
+    | FinalSelectOption<TOptionValue>[]
+    | ((selectedRows: TData[], filter?: string) => MaybePromise<FinalSelectOption<TOptionValue>[] | undefined>)
     | undefined;
 }
 
@@ -71,18 +80,20 @@ const fieldToString = (field: any) => {
   return typeof field === 'symbol' ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridFormDropDownProps<TData, TValue>) => {
+export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
+  props: GridFormDropDownProps<TData, TOptionValue>,
+) => {
   const { selectedRows, field, data } = useGridPopoverContext<TData>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
   const [filter, setFilter] = useState(props.filterDefaultValue ?? '');
   const [filteredValues, setFilteredValues] = useState<any[]>();
-  const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
+  const [options, setOptions] = useState<FinalSelectOption<TOptionValue>[] | null>(null);
   const subComponentIsValid = useRef(false);
   const subComponentInitialValue = useRef<string | null>(null);
   const [subSelectedValue, setSubSelectedValue] = useState<any>(null);
   // Note: null is assumed to be the filter
-  const [selectedItem, setSelectedItem] = useState<FinalSelectOption | null>(null);
+  const [selectedItem, setSelectedItem] = useState<FinalSelectOption<TOptionValue> | null>(null);
 
   const selectItemHandler = useCallback(
     async (value: any, subComponentValue?: any): Promise<boolean> => {
@@ -116,17 +127,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
         optionsConf = await optionsConf(selectedRows, filter);
       }
       if (optionsConf !== undefined) {
-        const optionsList = optionsConf?.map((item) =>
-          item == null || typeof item === 'string'
-            ? ({
-                value: item,
-                label: item,
-                disabled: false,
-              } as FinalSelectOption)
-            : item,
-        );
-
-        setOptions(optionsList);
+        setOptions(optionsConf);
       }
     })();
   }, [filter, options, props, selectedRows]);
@@ -251,7 +252,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
               {props.noOptionsMessage ?? 'No Options'}
             </MenuItem>
           )}
-          {options?.map((item: FinalSelectOption, index) => {
+          {options?.map((item: FinalSelectOption<TOptionValue>, index) => {
             showHeader = null;
             if (item.value === MenuSeparatorString) {
               return <MenuDivider key={`$$divider_${index}`} />;
@@ -288,7 +289,7 @@ export const GridFormDropDown = <TData extends GridBaseRow, TValue>(props: GridF
                         e.keepOpen = !!item.subComponent;
                       }}
                     >
-                      {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
+                      {item.label ?? (item.value == null ? `<${String(item.value)}>` : `${String(item.value)}`)}
                       {item.subComponent ? '...' : ''}
                     </MenuItem>
 

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -5,15 +5,15 @@ import { ColDefT, GenericCellEditorProps, GridCell } from '../GridCell';
 import { GridFormDropDown, GridFormDropDownProps } from '../gridForm/GridFormDropDown';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
 
-export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any>(
+export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any, TOptionValue = any>(
   colDef: GenericCellColDef<TData, TValue>,
-  props: GenericCellEditorProps<GridFormDropDownProps<TData, TValue>>,
+  props: GenericCellEditorProps<GridFormDropDownProps<TData, TOptionValue>>,
 ): ColDefT<TData, TValue> =>
-  GridCell<TData, TValue, GridFormDropDownProps<TData, TValue>>(colDef, {
+  GridCell<TData, TValue, GridFormDropDownProps<TData, TOptionValue>>(colDef, {
     editor: GridFormDropDown,
     ...props,
     editorParams: {
-      ...(props.editorParams as GridFormDropDownProps<TData, TValue>),
+      ...(props.editorParams as GridFormDropDownProps<TData, TOptionValue>),
       className: clsx(
         {
           'GridPopoverEditDropDown-containerLarge': !props.editorParams?.className?.includes(

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -21,11 +21,9 @@ export const GridPopoverMenu = <TData extends GridBaseRow>(
       exportable: false,
       cellStyle: { flex: 1, justifyContent: 'center' },
       cellRenderer: GridRenderPopoutMenuCell,
+      // Menus open on single click, this parameter is picked up in Grid.tsx
+      singleClickEdit: true,
       ...colDef,
-      cellRendererParams: {
-        // Menus open on single click, this parameter is picked up in Grid.tsx
-        singleClickEdit: true,
-      },
     },
     {
       editor: GridFormPopoverMenu,

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -11,10 +11,7 @@ export const GridPopoverMessage = <TData extends GridBaseRow, TValue = any>(
     {
       resizable: true,
       ...colDef,
-      cellRendererParams: {
-        singleClickEdit: true,
-        ...colDef.cellRendererParams,
-      },
+      singleClickEdit: true,
     },
     {
       editor: GridFormMessage,

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -10,7 +10,6 @@ export interface GenericCellColDef<TData extends GridBaseRow, TValue = any> exte
 }
 
 export interface GenericCellRendererParams<TData extends GridBaseRow> {
-  singleClickEdit?: boolean;
   rightHoverElement?: ReactElement | undefined;
   editAction?: (selectedRows: TData[]) => void;
   shortcutKeys?: Record<string, ((params: SuppressKeyboardEventParams) => boolean | void) | undefined>;

package/src/contexts/GridContext.tsx

@@ -23,7 +23,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string),
   ) => ColDefT<TData, any>[];
   getColumnIds: (filter?: keyof ColDef | ((r: ColDef) => boolean | undefined | null | number | string)) => string[];
-  setApis: (gridApi: GridApi | undefined, dataTestId?: string) => void;
+  setApis: (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => void;
   prePopupOps: () => void;
   postPopupOps: () => void;
   setQuickFilter: (quickFilter: string) => void;

package/src/contexts/GridContextProvider.tsx

@@ -23,6 +23,7 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   const [quickFilter, _setQuickFilter] = useState('');
   const [invisibleColumnIds, _setInvisibleColumnIds] = useState<string[]>();
   const testId = useRef<string | undefined>();
+  const hasExternallySelectedItemsRef = useRef(false);
   const idsBeforeUpdate = useRef<number[]>([]);
   const prePopupFocusedCell = useRef<CellPosition>();
   const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
@@ -101,7 +102,8 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
    * Set the grid api when the grid is ready.
    */
   const setApis = useCallback(
-    (gridApi: GridApi | undefined, dataTestId?: string) => {
+    (gridApi: GridApi | undefined, hasExternallySelectedItems: boolean, dataTestId?: string) => {
+      hasExternallySelectedItemsRef.current = hasExternallySelectedItems;
       testId.current = dataTestId;
       setGridApi(gridApi);
       gridApi?.setGridOption('quickFilterText', quickFilter);
@@ -474,10 +476,17 @@ export const GridContextProvider = <TData extends GridBaseRow>(props: PropsWithC
   }, [externallySelectedItemsAreInSync]);
 
   const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
+    if (!hasExternallySelectedItemsRef.current) {
+      externallySelectedItemsAreInSyncRef.current = true;
+      return;
+    }
     // Wait for up to 5 seconds
     for (let i = 0; i < 5000 / 200 && !externallySelectedItemsAreInSyncRef.current; i++) {
       await wait(200);
     }
+    if (!externallySelectedItemsAreInSyncRef.current) {
+      console.error('externallySelectedItems did not sync with ag-grid selection');
+    }
   }, []);
 
   const startCellEditing = useCallback(

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

@@ -331,7 +331,6 @@ export const ControlledMenuFr = (
                 externalRef={externalRef}
                 containerRef={containerRef}
                 onClose={onClose}
-                onBlur={() => console.log('blur')}
               />
             </EventHandlersContext.Provider>
           </ItemSettingsContext.Provider>

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

@@ -25,6 +25,7 @@ import {
   MenuHeaderItem,
   MenuSeparator,
   MenuSeparatorString,
+  primitiveToSelectOption,
   wait,
 } from '../..';
 import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
@@ -72,16 +73,9 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
     console.log('optionsFn selected rows', selectedRows, filter);
     filter = filter?.toLowerCase();
     await wait(1000);
-    return [
-      null,
-      'Architect',
-      'Developer',
-      'Product Owner',
-      'Scrum Master',
-      'Tester',
-      MenuSeparatorString,
-      'Custom',
-    ].filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true));
+    return [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester', MenuSeparatorString, 'Custom']
+      .filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true))
+      .map(primitiveToSelectOption);
   }, []);
 
   const optionsObjects = useMemo(
@@ -102,6 +96,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           field: 'position2',
           headerName: 'Multi-edit',
+          singleClickEdit: true,
         },
         {
           multiEdit: true,
@@ -120,7 +115,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           },
         },
       ),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow['position3'], string | null>(
         {
           field: 'position3',
           headerName: 'Custom callback',
@@ -128,7 +123,9 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
         {
           multiEdit: true,
           editorParams: {
-            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'],
+            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'].map(
+              primitiveToSelectOption,
+            ),
             onSelectedItem: async (selected) => {
               await wait(2000);
               selected.selectedRows.forEach((row) => {
@@ -138,7 +135,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           },
         },
       ),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow['position3'], string | null>(
         {
           field: 'position',
           headerName: 'Options Fn',
@@ -164,7 +161,9 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           editorParams: {
             filtered: 'local',
             filterPlaceholder: 'Filter this',
-            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'],
+            options: [null, 'Architect', 'Developer', 'Product Owner', 'Scrum Master', 'Tester'].map(
+              primitiveToSelectOption,
+            ),
           },
         },
       ),
@@ -185,7 +184,7 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
           },
         },
       ),
-      GridPopoverEditDropDown(
+      GridPopoverEditDropDown<ITestRow, ITestRow['code'], string | null>(
         {
           field: 'code',
           headerName: 'Filter Selectable',
@@ -197,17 +196,21 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
             filterPlaceholder: 'Filter this',
             filterHelpText: 'Press enter to save custom value',
             options: optionsObjects.map((o) => {
-              return { value: o, label: o.desc, disabled: false };
+              return { value: o.code, label: o.desc, disabled: false };
             }),
             onSelectedItem: (selected) => {
               // eslint-disable-next-line no-console
               console.log('onSelectedItem selected', selected);
-              selected.selectedRows.forEach((row) => (row.code = selected.value.code));
+              selected.selectedRows.forEach((row) => {
+                row.code = selected.value;
+              });
             },
             onSelectFilter: (selected) => {
               // eslint-disable-next-line no-console
               console.log('onSelectFilter selected', selected);
-              selected.selectedRows.forEach((row) => (row.code = selected.value));
+              selected.selectedRows.forEach((row) => {
+                row.code = selected.value;
+              });
             },
           },
         },