@linzjs/step-ag-grid 22.0.1 → 22.1.1

package/dist/index.css

@@ -324,6 +324,16 @@
   position: static !important;
 }
 
+.LabelPreferencesPanelGridCellAlignCenter .ag-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.LabelPreferencesPanelGridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+  display: flex;
+  justify-content: center;
+}
+
 .Grid-container {
   flex: 1;
   width: 100%;
@@ -418,6 +428,30 @@
   background-color: #f9f9f9;
 }
 
+.GridHeaderAlignCenter .ag-header-cell-text {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.GridCellAlignCenter .GridCell-container {
+  display: flex;
+  justify-content: center;
+}
+
+.GridCellAlignCenter .ag-wrapper {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.GridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+  display: flex;
+  justify-content: center;
+}
+
+div.ag-ltr div.ag-header-cell-resize {
+  right: -4px;
+}
+
 .GridCell-container {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -455,6 +489,11 @@
   justify-content: center;
 }
 
+.GridPopoverEditDropDown-containerAutoWidth .szh-menu {
+  width: auto;
+  max-width: 274px;
+}
+
 .GridFormEditBearing-input {
   width: 320px;
 }

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

@@ -1,5 +1,4 @@
-import { ColDef } from "ag-grid-community";
-import { GridOptions } from "ag-grid-community";
+import { ColDef, GridOptions } from "ag-grid-community";
 import { ReactElement } from "react";
 import { GridContextMenuComponent } from "./gridHook";
 export interface GridBaseRow {

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

@@ -37,7 +37,7 @@ export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends Col
     editable?: boolean | SAEditableCallback<TData, ValueType>;
     valueGetter?: string | SAValueGetterFunc<TData, ValueType>;
     valueFormatter?: string | SAValueFormatterFunc<TData, ValueType>;
-    cellRenderer?: (props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined;
+    cellRenderer?: ((props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined) | string;
     cellRendererParams?: {
         singleClickEdit?: boolean;
         rightHoverElement?: ReactElement;

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

@@ -0,0 +1,6 @@
+import { CellClickedEvent } from "ag-grid-community";
+/**
+ * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
+ * This passes the event to the checkbox when you click anywhere in the cell.
+ */
+export declare const clickInputWhenContainingCellClicked: ({ data, event, colDef }: CellClickedEvent) => void;

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

@@ -23,7 +23,7 @@ export declare const MenuHeaderItem: (title: string) => {
 };
 export type SelectOption = null | string | FinalSelectOption;
 export interface GridFormDropDownProps<TData extends GridBaseRow> extends CellEditorCommon {
-    className?: "GridPopoverEditDropDown-containerSmall" | "GridPopoverEditDropDown-containerMedium" | "GridPopoverEditDropDown-containerLarge" | "GridPopoverEditDropDown-containerUnlimited" | string | undefined;
+    className?: "GridPopoverEditDropDown-containerSmall" | "GridPopoverEditDropDown-containerMedium" | "GridPopoverEditDropDown-containerLarge" | "GridPopoverEditDropDown-containerUnlimited" | "GridPopoverEditDropDown-containerAutoWidth" | string | undefined;
     filtered?: "local" | "reload";
     filterDefaultValue?: string;
     filterPlaceholder?: string;

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

@@ -0,0 +1,11 @@
+import { CellEditorCommon, ColDefT } from "../GridCell";
+import { GenericCellColDef } from "../gridRender";
+import { GridBaseRow } from "../Grid";
+export interface GridEditBooleanEditorProps<TData> extends CellEditorCommon {
+    onClick: (props: {
+        selectedRows: TData[];
+        selectedRowIds: (string | number)[];
+        checked: boolean;
+    }) => Promise<boolean>;
+}
+export declare const GridEditBoolean: <TData extends GridBaseRow>(colDef: GenericCellColDef<TData, boolean>, editorProps: GridEditBooleanEditorProps<TData>) => ColDefT<TData>;

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

@@ -1,3 +1,4 @@
+export * from "./GridEditBoolean";
 export * from "./GridPopoutEditMultiSelect";
 export * from "./GridPopoutEditMultiSelectGrid";
 export * from "./GridPopoverMenu";

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

@@ -16,3 +16,4 @@ export * from "./GridPopoverHook";
 export * from "./gridRender";
 export * from "./GridWrapper";
 export * from "./PostSortRowsHook";
+export * from "./clickInputWhenContainingCellClicked";

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

@@ -2335,6 +2335,44 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
     };
 };
 
+/**
+ * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
+ * This passes the event to the checkbox when you click anywhere in the cell.
+ */
+const clickInputWhenContainingCellClicked = ({ data, event, colDef }) => {
+    if (!data || !event)
+        return;
+    const element = event.target;
+    // Already handled
+    if (["BUTTON", "INPUT"].includes(element?.tagName) && element.closest(".ag-cell-inline-editing"))
+        return;
+    const row = element.closest("[row-id]");
+    if (!row)
+        return;
+    const colId = colDef.colId;
+    if (!colId)
+        return;
+    const clickInput = (cnt) => {
+        const cell = row.querySelector(`[col-id='${colId}']`);
+        if (!cell)
+            return;
+        const input = cell.querySelector("input, button");
+        if (!input) {
+            return;
+        }
+        // When clicking on a cell that is not editing, the cell changes to editing and the input/button ref becomes invalid
+        // So wait until the cell is in edit mode before sending the click
+        if (!input.ownerDocument.contains(input)) {
+            if (cnt !== 0) {
+                setTimeout(() => clickInput(cnt - 1));
+            }
+            return;
+        }
+        input?.dispatchEvent(event);
+    };
+    setTimeout(() => clickInput(20), 10);
+};
+
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
@@ -2448,16 +2486,6 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
         selectRowsById,
         getFirstRowId,
     ]);
-    /**
-     * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
-     * This passes the event to the checkbox when you click anywhere in the cell.
-     */
-    const clickSelectorCheckboxWhenContainingCellClicked = React.useCallback(({ event }) => {
-        if (!event)
-            return;
-        const input = event.target.querySelector("input");
-        input?.dispatchEvent(event);
-    }, []);
     /**
      * Ensure external selected items list is in sync with panel.
      */
@@ -2557,7 +2585,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
                         }
                         return false;
                     },
-                    onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
+                    onCellClicked: clickInputWhenContainingCellClicked,
                 },
                 ...adjustColDefs,
             ]
@@ -2571,7 +2599,6 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
         params.defaultColDef?.editable,
         selectColumnPinned,
         rowSelection,
-        clickSelectorCheckboxWhenContainingCellClicked,
     ]);
     /**
      * When grid is ready set the apis to the grid context and sync selected items to grid.
@@ -2673,11 +2700,16 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
      * Start editing on pressing Enter
      */
     const onCellKeyPress = React.useCallback((e) => {
-        if (e.event.key === "Enter") {
+        const kbe = e.event;
+        if (kbe.key === "Enter") {
             if (!invokeEditAction(e))
                 startCellEditing(e);
         }
-    }, [startCellEditing]);
+        if (kbe.key === "Tab") {
+            // eslint-disable-next-line
+            prePopupOps();
+        }
+    }, [prePopupOps, startCellEditing]);
     /**
      * Once the grid has auto-sized we want to run fit to fit the grid in its container,
      * but we don't want the non-flex auto-sized columns to "fit" size, so suppressSizeToFit is set to true.
@@ -2979,7 +3011,7 @@ const GridCell = (props, custom) => {
                 return JSON.stringify(params.value);
         },
         ...props,
-        cellRenderer: GridCellRenderer,
+        cellRenderer: typeof props.cellRenderer === "string" ? props.cellRenderer : GridCellRenderer,
         cellRendererParams: {
             originalCellRenderer: props.cellRenderer,
             ...props.cellRendererParams,
@@ -4151,7 +4183,7 @@ const GridFormMultiSelectGrid = (props) => {
                                     e.keepOpen = true;
                                     toggleValue(o);
                                 }
-                            }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: !!o.checked ?? false, isIndeterminate: o.checked === "partial", value: `${o.value}`, label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [o.warning && jsxRuntime.jsx(GridIcon, { icon: "ic_warning_outline", title: o.warning }, "$$icon$$"), jsxRuntime.jsx("span", { className: "GridMultiSelectGrid-Label", children: o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`) }, "$$label$$")] }), inputProps: {
+                            }, children: jsxRuntime.jsx(lui.LuiCheckboxInput, { isChecked: !!o.checked, isIndeterminate: o.checked === "partial", value: `${o.value}`, label: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [o.warning && jsxRuntime.jsx(GridIcon, { icon: "ic_warning_outline", title: o.warning }, "$$icon$$"), jsxRuntime.jsx("span", { className: "GridMultiSelectGrid-Label", children: o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`) }, "$$label$$")] }), inputProps: {
                                     onClick: (e) => {
                                         // Click is handled by MenuItem onClick
                                         e.preventDefault();
@@ -4403,6 +4435,52 @@ const GridFormTextInput = (props) => {
     return popoverWrapper(jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "row" }, className: "FormTest subComponent", children: jsxRuntime.jsx(TextInputFormatted, { value: value, onChange: (e) => setValue(e.target.value), error: invalid(), formatted: props.units, style: { width: props.width ?? 240 }, placeholder: props.placeholder ?? "Type here", helpText: helpText }) }));
 };
 
+const BooleanCellRenderer = (props) => {
+    const { onValueChange, value, api, node, column, colDef, data } = props;
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        const checkFocus = (event) => {
+            if (event.rowIndex === node.rowIndex && event.column === column) {
+                inputRef.current?.focus();
+            }
+        };
+        api.addEventListener("cellFocused", checkFocus);
+        return () => {
+            api.removeEventListener("cellFocused", checkFocus);
+        };
+    }, [api, column, node.rowIndex]);
+    return (jsxRuntime.jsx("div", { className: clsx("ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper", { "ag-checked": props.value }), children: jsxRuntime.jsx("input", { type: "checkbox", className: "ag-input-field-input ag-checkbox-input", disabled: !fnOrVar(colDef?.editable, props), ref: inputRef, checked: value, onChange: () => { }, onClick: (e) => {
+                e.stopPropagation();
+                // cell has to be in edit mode
+                // if in non-edit mode clickInputWhenContainingCellClicked will click to put it in edit mode
+                if (!onValueChange)
+                    return;
+                const params = props?.colDef?.cellEditorParams;
+                if (!params)
+                    return;
+                const selectedRows = [data];
+                const checked = !value;
+                onValueChange(checked);
+                params.onClick({ selectedRows, selectedRowIds: selectedRows.map((r) => r.id), checked }).then();
+            } }) }));
+};
+const GridEditBoolean = (colDef, editorProps) => {
+    return GridCell({
+        minWidth: 64,
+        maxWidth: 64,
+        cellRenderer: BooleanCellRenderer,
+        cellEditor: BooleanCellRenderer,
+        cellEditorParams: editorProps,
+        onCellClicked: clickInputWhenContainingCellClicked,
+        singleClickEdit: true,
+        resizable: false,
+        editable: true,
+        cellClass: "GridCellAlignCenter",
+        headerClass: "GridHeaderAlignCenter",
+        ...colDef,
+    });
+};
+
 const GridPopoutEditMultiSelect = (colDef, props) => GridCell(colDef, {
     editor: GridFormMultiSelect,
     ...props,
@@ -4486,7 +4564,9 @@ const GridPopoverEditDropDown = (colDef, props) => GridCell(colDef, {
     ...props,
     editorParams: {
         ...props.editorParams,
-        className: clsx("GridPopoverEditDropDown-containerLarge", props.editorParams?.className),
+        className: clsx({
+            "GridPopoverEditDropDown-containerLarge": !props.editorParams?.className?.includes("GridPopoverEditDropDown-container"),
+        }, props.editorParams?.className),
     },
 });
 
@@ -5273,6 +5353,7 @@ exports.GridCellMultiSelectClassRules = GridCellMultiSelectClassRules;
 exports.GridCellRenderer = GridCellRenderer;
 exports.GridContext = GridContext;
 exports.GridContextProvider = GridContextProvider;
+exports.GridEditBoolean = GridEditBoolean;
 exports.GridFilterButtons = GridFilterButtons;
 exports.GridFilterColumnsToggle = GridFilterColumnsToggle;
 exports.GridFilterDownloadCsvButton = GridFilterDownloadCsvButton;
@@ -5333,6 +5414,7 @@ exports.bearingNumberParser = bearingNumberParser;
 exports.bearingRangeValidator = bearingRangeValidator;
 exports.bearingStringValidator = bearingStringValidator;
 exports.bearingValueFormatter = bearingValueFormatter;
+exports.clickInputWhenContainingCellClicked = clickInputWhenContainingCellClicked;
 exports.convertDDToDMS = convertDDToDMS;
 exports.downloadCsvUseValueFormattersProcessCellCallback = downloadCsvUseValueFormattersProcessCellCallback;
 exports.findParentWithClass = findParentWithClass;