@linzjs/step-ag-grid 22.1.1 → 22.2.1

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

@@ -3,4 +3,4 @@ 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;
+export declare const clickInputWhenContainingCellClicked: (params: CellClickedEvent) => void;

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

@@ -0,0 +1,12 @@
+import { ICellEditorParams } from "ag-grid-community";
+import { ColDefT } from "../GridCell";
+import { GenericCellColDef } from "../gridRender";
+import { GridBaseRow } from "../Grid";
+export interface GridButtonProps<TData> {
+    visible?: (cellEditorParams: ICellEditorParams) => boolean;
+    onClick?: (props: {
+        selectedRows: TData[];
+        selectedRowIds: (string | number)[];
+    }) => void;
+}
+export declare const GridButton: <TData extends GridBaseRow>(colDef: GenericCellColDef<TData, boolean>, editor: GridButtonProps<TData>) => ColDefT<TData>;

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

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

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

@@ -2339,9 +2339,13 @@ 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 }) => {
+const clickInputWhenContainingCellClicked = (params) => {
+    const { data, event, colDef } = params;
     if (!data || !event)
         return;
+    if (fnOrVar(colDef.editable, params) === false) {
+        return;
+    }
     const element = event.target;
     // Already handled
     if (["BUTTON", "INPUT"].includes(element?.tagName) && element.closest(".ag-cell-inline-editing"))
@@ -2352,25 +2356,16 @@ const clickInputWhenContainingCellClicked = ({ data, event, colDef }) => {
     const colId = colDef.colId;
     if (!colId)
         return;
-    const clickInput = (cnt) => {
+    const clickInput = () => {
         const cell = row.querySelector(`[col-id='${colId}']`);
         if (!cell)
             return;
         const input = cell.querySelector("input, button");
-        if (!input) {
+        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);
+    setTimeout(clickInput, 20);
 };
 
 /**
@@ -4435,6 +4430,41 @@ 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 ButtonCellRenderer = (props) => {
+    const { data, node, column, colDef, api } = 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(lui.LuiButton, { ref: inputRef, className: "lui-button-icon-only", size: "sm", level: "text", onClick: () => {
+            const selectedRows = [data];
+            const selectedRowIds = selectedRows.map((r) => r.id);
+            colDef?.cellEditorParams.onClick?.({ selectedRows, selectedRowIds });
+        }, style: { display: colDef?.cellEditorParams?.visible?.(props) !== false ? "" : "none" }, children: jsxRuntime.jsx(lui.LuiIcon, { name: "ic_redo", alt: "revert", size: "md" }) }));
+};
+const GridButton = (colDef, editor) => {
+    return GridCell({
+        minWidth: 72,
+        maxWidth: 72,
+        resizable: false,
+        headerClass: "GridHeaderAlignCenter",
+        cellClass: "GridCellAlignCenter",
+        cellRenderer: ButtonCellRenderer,
+        cellEditorParams: {
+            ...editor,
+        },
+        ...colDef,
+    });
+};
+
 const BooleanCellRenderer = (props) => {
     const { onValueChange, value, api, node, column, colDef, data } = props;
     const inputRef = React.useRef(null);
@@ -5345,6 +5375,7 @@ exports.FocusableItem = FocusableItem;
 exports.FormError = FormError;
 exports.GenericCellEditorComponentWrapper = GenericCellEditorComponentWrapper;
 exports.Grid = Grid;
+exports.GridButton = GridButton;
 exports.GridCell = GridCell;
 exports.GridCellFiller = GridCellFiller;
 exports.GridCellFillerColId = GridCellFillerColId;