@linzjs/step-ag-grid 27.0.0 → 27.2.0

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

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

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

@@ -1,18 +1,19 @@
 import { ReactElement } from 'react';
 import { GridBaseRow } from '../Grid';
 import { CellEditorCommon } from '../GridCell';
-export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TValue> {
+export interface GridPopoutEditDropDownSelectedItem<TData extends GridBaseRow, TOption> {
     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 declare const primitiveToSelectOption: <T>(value: T) => SelectOption<T>;
 export declare const MenuSeparatorString = "_____MENU_SEPARATOR_____";
 export declare const MenuSeparator: Readonly<{
     value: "_____MENU_SEPARATOR_____";
@@ -22,17 +23,18 @@ export declare const MenuHeaderItem: (title: string) => {
     label: string;
     value: string;
 };
-export type SelectOption = null | string | FinalSelectOption;
-export interface GridFormDropDownProps<TData extends GridBaseRow, TValue = any> extends CellEditorCommon {
+export type SelectOption<TOptionValue = any> = FinalSelectOption<TOptionValue>;
+export type MaybePromise<T> = T | Promise<T>;
+export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue> extends CellEditorCommon {
     className?: 'GridPopoverEditDropDown-containerSmall' | 'GridPopoverEditDropDown-containerMedium' | 'GridPopoverEditDropDown-containerLarge' | 'GridPopoverEditDropDown-containerUnlimited' | 'GridPopoverEditDropDown-containerAutoWidth' | string | undefined;
     filtered?: 'local' | 'reload';
     filterDefaultValue?: string;
     filterPlaceholder?: string;
     filterHelpText?: string;
     noOptionsMessage?: string;
-    onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
-    onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TValue>) => Promise<void> | void;
-    options: SelectOption[] | ((selectedRows: TData[], filter?: string) => Promise<SelectOption[] | undefined> | SelectOption[] | undefined) | undefined;
+    onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
+    onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<TData, TOptionValue>) => Promise<void> | void;
+    options: FinalSelectOption<TOptionValue>[] | ((selectedRows: TData[], filter?: string) => MaybePromise<FinalSelectOption<TOptionValue>[] | undefined>) | undefined;
 }
-export declare const GridFormDropDown: <TData extends GridBaseRow, TValue>(props: GridFormDropDownProps<TData, TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridFormDropDown: <TData extends GridBaseRow, TOptionValue>(props: GridFormDropDownProps<TData, TOptionValue>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/gridPopoverEdit/GridPopoverEditDropDown.d.ts

@@ -2,4 +2,4 @@ import { GridBaseRow } from '../Grid';
 import { ColDefT, GenericCellEditorProps } from '../GridCell';
 import { GridFormDropDownProps } from '../gridForm/GridFormDropDown';
 import { GenericCellColDef } from '../gridRender/GridRenderGenericCell';
-export declare const GridPopoverEditDropDown: <TData extends GridBaseRow, TValue = any>(colDef: GenericCellColDef<TData, TValue>, props: GenericCellEditorProps<GridFormDropDownProps<TData, TValue>>) => ColDefT<TData, TValue>;
+export declare const GridPopoverEditDropDown: <TData extends GridBaseRow, TValue = any, TOptionValue = any>(colDef: GenericCellColDef<TData, TValue>, props: GenericCellEditorProps<GridFormDropDownProps<TData, TOptionValue>>) => ColDefT<TData, TValue>;

package/dist/src/components/gridRender/GridRenderGenericCell.d.ts

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

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

@@ -17,7 +17,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     getColDef: (colId?: string) => ColDef | undefined;
     getColumns: (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/dist/step-ag-grid.cjs

@@ -2161,7 +2161,7 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
             block: menuContainerClass,
             modifiers,
             className,
-        }), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsxRuntime.jsx(SettingsContext.Provider, { value: settings, children: jsxRuntime.jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsxRuntime.jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsxRuntime.jsx(MenuList, { ...restProps, ariaLabel: ariaLabel || 'Menu', externalRef: externalRef, containerRef: containerRef, onClose: onClose, onBlur: () => console.log('blur') }) }) }) })) }));
+        }), style: { ...containerProps?.style, position: 'relative' }, ref: containerRef, children: state && (jsxRuntime.jsx(SettingsContext.Provider, { value: settings, children: jsxRuntime.jsx(ItemSettingsContext.Provider, { value: itemSettings, children: jsxRuntime.jsx(EventHandlersContext.Provider, { value: eventHandlers, children: jsxRuntime.jsx(MenuList, { ...restProps, ariaLabel: ariaLabel || 'Menu', externalRef: externalRef, containerRef: containerRef, onClose: onClose }) }) }) })) }));
     if (portal === true && anchorRef?.current != null) {
         if (hasParentClass('react-menu-inline-test', anchorRef.current)) {
             portal = false;
@@ -2939,14 +2939,15 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
             };
         });
     }, [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 = React.useCallback((event) => {
-        setApis(event.api, dataTestId);
+        setApis(event.api, hasExternallySelectedItems, dataTestId);
         event.api.showNoRowsOverlay();
         synchroniseExternallySelectedItemsToGrid();
-    }, [dataTestId, setApis, synchroniseExternallySelectedItemsToGrid]);
+    }, [dataTestId, hasExternallySelectedItems, setApis, synchroniseExternallySelectedItemsToGrid]);
     /**
      * When the grid is being initialized the data may be empty.
      * This will resize columns when we have at least one row.
@@ -2999,7 +3000,7 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      * Handle single click edits
      */
     const onCellClicked = React.useCallback((event) => {
-        if (event.colDef?.cellRendererParams?.singleClickEdit ?? singleClickEdit) {
+        if (event.colDef.singleClickEdit ?? singleClickEdit) {
             void startCellEditing({ rowId: event.data.id, colId: event.column.getColId() });
         }
     }, [singleClickEdit, startCellEditing]);
@@ -3946,6 +3947,12 @@ const useGridPopoverHook = (props) => {
     };
 };
 
+const primitiveToSelectOption = (value) => {
+    return {
+        value: value,
+        label: value ? String(value) : '',
+    };
+};
 const MenuSeparatorString = '_____MENU_SEPARATOR_____';
 const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
 const MenuHeaderString = '_____MENU_HEADER_____';
@@ -3994,14 +4001,7 @@ const GridFormDropDown = (props) => {
                 optionsConf = await optionsConf(selectedRows, filter);
             }
             if (optionsConf !== undefined) {
-                const optionsList = optionsConf?.map((item) => item == null || typeof item === 'string'
-                    ? {
-                        value: item,
-                        label: item,
-                        disabled: false,
-                    }
-                    : item);
-                setOptions(optionsList);
+                setOptions(optionsConf);
             }
         })();
     }, [filter, options, props, selectedRows]);
@@ -4098,7 +4098,7 @@ const GridFormDropDown = (props) => {
                                                     }
                                                 }, onClick: (e) => {
                                                     e.keepOpen = !!item.subComponent;
-                                                }, children: [item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`), item.subComponent ? '...' : ''] }, `${fieldToString(field)}-${index}`), item.subComponent && selectedItem === item && (jsxRuntime.jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
+                                                }, children: [item.label ?? (item.value == null ? `<${String(item.value)}>` : `${String(item.value)}`), item.subComponent ? '...' : ''] }, `${fieldToString(field)}-${index}`), item.subComponent && selectedItem === item && (jsxRuntime.jsx(FocusableItem, { className: 'LuiDeprecatedForms', children: () => (jsxRuntime.jsx(GridSubComponentContext.Provider, { value: {
                                                         context: { options },
                                                         data,
                                                         value: subSelectedValue,
@@ -4988,11 +4988,9 @@ const GridPopoverMenu = (colDef, custom) => GridCell({
     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,
     preventAutoEdit: true,
@@ -5002,10 +5000,7 @@ const GridPopoverMenu = (colDef, custom) => GridCell({
 const GridPopoverMessage = (colDef, props) => GridCell({
     resizable: true,
     ...colDef,
-    cellRendererParams: {
-        singleClickEdit: true,
-        ...colDef.cellRendererParams,
-    },
+    singleClickEdit: true,
 }, {
     editor: GridFormMessage,
     ...props,
@@ -5035,6 +5030,7 @@ const GridContextProvider = (props) => {
     const [quickFilter, _setQuickFilter] = React.useState('');
     const [invisibleColumnIds, _setInvisibleColumnIds] = React.useState();
     const testId = React.useRef();
+    const hasExternallySelectedItemsRef = React.useRef(false);
     const idsBeforeUpdate = React.useRef([]);
     const prePopupFocusedCell = React.useRef();
     const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = React.useState(false);
@@ -5098,7 +5094,8 @@ const GridContextProvider = (props) => {
     /**
      * Set the grid api when the grid is ready.
      */
-    const setApis = React.useCallback((gridApi, dataTestId) => {
+    const setApis = React.useCallback((gridApi, hasExternallySelectedItems, dataTestId) => {
+        hasExternallySelectedItemsRef.current = hasExternallySelectedItems;
         testId.current = dataTestId;
         setGridApi(gridApi);
         gridApi?.setGridOption('quickFilterText', quickFilter);
@@ -5352,10 +5349,17 @@ const GridContextProvider = (props) => {
         externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
     }, [externallySelectedItemsAreInSync]);
     const waitForExternallySelectedItemsToBeInSync = React.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 = React.useCallback(async ({ rowId, colId }) => {
         if (!gridApi)
@@ -5883,6 +5887,7 @@ exports.hasParentClass = hasParentClass;
 exports.isFloat = isFloat;
 exports.isGridCellFiller = isGridCellFiller;
 exports.isNotEmpty = isNotEmpty;
+exports.primitiveToSelectOption = primitiveToSelectOption;
 exports.sanitiseFileName = sanitiseFileName;
 exports.stringByteLengthIsInvalid = stringByteLengthIsInvalid;
 exports.suppressCellKeyboardEvents = suppressCellKeyboardEvents;