@linzjs/step-ag-grid 14.8.0 → 14.9.0

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

@@ -22,6 +22,7 @@ export interface GridProps {
     noRowsOverlayText?: string;
     postSortRows?: GridOptions["postSortRows"];
     animateRows?: boolean;
+    rowHeight?: number;
     rowClassRules?: GridOptions["rowClassRules"];
     rowSelection?: "single" | "multiple";
     autoSelectFirstRow?: boolean;

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { ReactElement } from "react";
 import { GridBaseRow } from "../Grid";
 import { CellEditorCommon } from "../GridCell";
 export interface MultiSelectGridOption {
     value: any;
-    label?: string;
+    label?: string | ReactElement;
     checked?: boolean | "partial";
     canSelectPartial?: boolean;
     warning?: string | undefined;
@@ -21,4 +21,4 @@ export interface GridFormMultiSelectGridProps<RowType extends GridBaseRow> exten
     invalid?: (props: GridFormMultiSelectGridSaveProps<RowType>) => boolean;
     maxRowCount?: number;
 }
-export declare const GridFormMultiSelectGrid: <RowType extends GridBaseRow>(props: GridFormMultiSelectGridProps<RowType>) => JSX.Element;
+export declare const GridFormMultiSelectGrid: <RowType extends GridBaseRow>(props: GridFormMultiSelectGridProps<RowType>) => ReactElement;

package/dist/step-ag-grid.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, xorBy, last, difference, defer as defer$1, omit, sortBy, findIndex, debounce as debounce$1, delay, partition, pick, groupBy, fromPairs, toPairs, sumBy, compact, remove, castArray, flatten, isEqual } from 'lodash-es';
+import { negate, isEmpty, xorBy, last, difference, defer as defer$1, omit, sortBy, findIndex, debounce as debounce$1, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, sumBy, compact, remove, castArray, flatten } from 'lodash-es';
 import * as React from 'react';
 import { createContext, useContext, useEffect, useRef, useCallback, useState, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
@@ -1002,7 +1002,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
         }
     }, []);
     setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsx("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready"), children: jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+    return (jsx("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready"), children: jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: params.rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
                     setInitialContentSize();
                 }, onRowDataChanged: onRowDataChanged, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: GridNoRowsOverlay, noRowsOverlayComponentParams: {
                     rowData: params.rowData,
@@ -4039,8 +4039,9 @@ const GridFormMultiSelectGrid = (props) => {
         if (!options || !props.onSave)
             return true;
         // Any changes to save?
-        if (JSON.stringify(initialValues) === JSON.stringify(options))
+        if (isEqual(initialValues?.map((o) => o.checked), options.map((o) => o.checked))) {
             return true;
+        }
         if (!props.onSave)
             return true;
         return await props.onSave(genSave(selectedRows));
@@ -4062,7 +4063,7 @@ const GridFormMultiSelectGrid = (props) => {
         optionsInitialising.current = true;
         (async () => {
             const optionsList = typeof props.options === "function" ? await props.options(selectedRows) : props.options;
-            setInitialValues(JSON.parse(JSON.stringify(optionsList)));
+            setInitialValues(optionsList.map((o) => ({ ...o, label: "" })));
             setOptions(optionsList);
             optionsInitialising.current = false;
         })();
@@ -4086,7 +4087,7 @@ const GridFormMultiSelectGrid = (props) => {
                                     e.keepOpen = true;
                                     toggleValue(o);
                                 }
-                            }, children: jsx(LuiCheckboxInput, { isChecked: !!o.checked ?? false, isIndeterminate: o.checked === "partial", value: `${o.value}`, label: jsxs(Fragment, { children: [o.warning && jsx(GridIcon, { icon: "ic_warning_outline", title: o.warning }), jsx("span", { className: "GridMultiSelectGrid-Label", style: { fontWeight: o.label?.endsWith("0") ? "bold" : "regular" }, children: o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`) })] }), inputProps: {
+                            }, children: jsx(LuiCheckboxInput, { isChecked: !!o.checked ?? false, isIndeterminate: o.checked === "partial", value: `${o.value}`, label: jsxs(Fragment, { children: [o.warning && jsx(GridIcon, { icon: "ic_warning_outline", title: o.warning }), jsx("span", { className: "GridMultiSelectGrid-Label", children: o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`) })] }), inputProps: {
                                     onClick: (e) => {
                                         // Click is handled by MenuItem onClick
                                         e.preventDefault();
@@ -4094,7 +4095,7 @@ const GridFormMultiSelectGrid = (props) => {
                                     },
                                 }, onChange: () => {
                                     /*Do nothing, change handled by menuItem*/
-                                } }) }, o.label) }))) }) }) }));
+                                } }) }, JSON.stringify(o.value)) }))) }) }) }));
 };
 
 /** Menu configuration types **/