@linzjs/step-ag-grid 29.3.6 → 29.5.0

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

@@ -1,4 +1,4 @@
-import { ColDef, GridOptions, RowClickedEvent, RowDoubleClickedEvent } from 'ag-grid-community';
+import { ColDef, ColGroupDef, GridOptions, RowClickedEvent, RowDoubleClickedEvent } from 'ag-grid-community';
 import { ReactElement } from 'react';
 import { GridContextMenuComponent } from './gridHook';
 export interface GridBaseRow {
@@ -22,7 +22,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
     externalSelectedItems?: any[];
     setExternalSelectedItems?: (items: any[]) => void;
     defaultColDef?: GridOptions['defaultColDef'];
-    columnDefs: ColDef<TData>[];
+    columnDefs: ColDef<TData>[] | ColGroupDef<TData>[];
     rowData: GridOptions['rowData'];
     selectColumnPinned?: ColDef['pinned'];
     noRowsOverlayText?: string;
@@ -41,6 +41,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
     onRowDragEnd?: (props: GridOnRowDragEndProps<TData>) => Promise<void> | void;
     alwaysShowVerticalScroll?: boolean;
     suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];
+    suppressReadOnlyStyle?: boolean;
     /**
      * When the grid is rendered using sizeColumns=="auto" this is called initially with the required container size to fit all content.
      * This allows you set the size of the panel to fit perfectly.
@@ -92,4 +93,4 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, onCellFocused: paramsOnCellFocused, maxInitialWidth, ...params }: GridProps<TData>) => ReactElement;
+export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, onCellFocused: paramsOnCellFocused, maxInitialWidth, suppressReadOnlyStyle, ...params }: GridProps<TData>) => ReactElement;

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

@@ -35,6 +35,7 @@ export interface GridFormDropDownProps<TData extends GridBaseRow, TOptionValue>
     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;
+    topComponent?: () => ReactElement;
 }
 export declare const GridFormDropDown: <TData extends GridBaseRow, TOptionValue>(props: GridFormDropDownProps<TData, TOptionValue>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/step-ag-grid.cjs

@@ -2762,7 +2762,7 @@ agGridCommunity.ModuleRegistry.registerModules([agGridCommunity.AllCommunityModu
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, maxInitialWidth, ...params }) => {
+const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection = 'multiple', suppressColumnVirtualization = true, theme = 'ag-theme-step-default', sizeColumns = 'auto', selectColumnPinned = 'left', contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === 'ag-theme-step-default' ? 40 : theme === 'ag-theme-step-compact' ? 36 : 40, selectable, onCellFocused: paramsOnCellFocused, maxInitialWidth, suppressReadOnlyStyle = false, ...params }) => {
     const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnBulkEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, startCellEditing: propStartCellEditing, } = useGridContext();
     // CellEditingStop event happens too much for one edit
     const startedEditRef = React.useRef(false);
@@ -2968,11 +2968,14 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
      * Synchronise externally selected items to grid on externalSelectedItems change
      */
     React.useEffect(synchroniseExternallySelectedItemsToGrid, [synchroniseExternallySelectedItemsToGrid]);
-    /**
-     * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
-     */
-    const columnDefs = React.useMemo(() => {
-        return params.columnDefs.map((colDef) => {
+    const mapColDef = React.useCallback((colDef) => {
+        if ('children' in colDef) {
+            return {
+                ...colDef,
+                children: colDef.children.map(mapColDef),
+            };
+        }
+        else {
             const colDefEditable = colDef.editable;
             const editable = combineEditables(params.loading !== true && params.readOnly !== true, params.defaultColDef?.editable, colDefEditable);
             return {
@@ -2980,11 +2983,17 @@ const Grid = ({ 'data-testid': dataTestId, defaultPostSort = true, rowSelection
                 editable,
                 cellClassRules: {
                     ...colDef.cellClassRules,
-                    'GridCell-readonly': (ccp) => !editable(ccp),
+                    'GridCell-readonly': (ccp) => !suppressReadOnlyStyle && !editable(ccp),
                 },
             };
-        });
-    }, [params.columnDefs, params.loading, params.readOnly, params.defaultColDef?.editable]);
+        }
+    }, [params.defaultColDef?.editable, params.loading, params.readOnly, suppressReadOnlyStyle]);
+    /**
+     * Add selectable column to colDefs.  Adjust column defs to block fit for auto sized columns.
+     */
+    const columnDefs = React.useMemo(() => {
+        return params.columnDefs.map(mapColDef);
+    }, [params.columnDefs, mapColDef]);
     const hasExternallySelectedItems = !!params.setExternalSelectedItems;
     /**
      * When grid is ready set the apis to the grid context and sync selected items to grid.
@@ -4249,7 +4258,7 @@ const GridFormDropDown = (props) => {
                             setSubSelectedValue(null);
                             subComponentIsValid.current = true;
                         }, children: ({ ref }) => (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [jsxRuntime.jsx("input", { className: 'LuiTextInput-input', ref: ref, type: "text", placeholder: props.filterPlaceholder ?? 'Filter...', "data-testid": 'filteredMenu-free-text-input', defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter &&
-                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value.trim()) }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.jsx(MenuItem, { className: 'GridPopoverEditDropDown-noOptions', disabled: true, children: props.noOptionsMessage ?? 'No Options' }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
+                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value.trim()) }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`), props.topComponent && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(props.topComponent, {}), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] }))] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.jsx(MenuItem, { className: 'GridPopoverEditDropDown-noOptions', disabled: true, children: props.noOptionsMessage ?? 'No Options' }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
                             showHeader = null;
                             if (item.value === MenuSeparatorString) {
                                 return jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`);