@linzjs/step-ag-grid 22.0.1 → 22.1.0

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

@@ -2333,6 +2333,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.
  */
@@ -2446,16 +2484,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 = useCallback(({ event }) => {
-        if (!event)
-            return;
-        const input = event.target.querySelector("input");
-        input?.dispatchEvent(event);
-    }, []);
     /**
      * Ensure external selected items list is in sync with panel.
      */
@@ -2555,7 +2583,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
                         }
                         return false;
                     },
-                    onCellClicked: clickSelectorCheckboxWhenContainingCellClicked,
+                    onCellClicked: clickInputWhenContainingCellClicked,
                 },
                 ...adjustColDefs,
             ]
@@ -2569,7 +2597,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.
@@ -2671,11 +2698,16 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
      * Start editing on pressing Enter
      */
     const onCellKeyPress = 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.
@@ -2977,7 +3009,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,
@@ -4149,7 +4181,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 }, "$$icon$$"), jsx("span", { className: "GridMultiSelectGrid-Label", children: o.label ?? (o.value == null ? `<${o.value}>` : `${o.value}`) }, "$$label$$")] }), inputProps: {
+                            }, children: jsx(LuiCheckboxInput, { isChecked: !!o.checked, isIndeterminate: o.checked === "partial", value: `${o.value}`, label: jsxs(Fragment, { children: [o.warning && jsx(GridIcon, { icon: "ic_warning_outline", title: o.warning }, "$$icon$$"), 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();
@@ -4401,6 +4433,52 @@ const GridFormTextInput = (props) => {
     return popoverWrapper(jsx("div", { style: { display: "flex", flexDirection: "row" }, className: "FormTest subComponent", children: 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 = useRef(null);
+    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 (jsx("div", { className: clsx("ag-wrapper ag-input-wrapper ag-checkbox-input-wrapper", { "ag-checked": props.value }), children: 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,
@@ -4484,7 +4562,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),
     },
 });
 
@@ -5255,5 +5335,5 @@ const useDeferredPromise = () => {
     };
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, convertDDToDMS, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, clickInputWhenContainingCellClicked, convertDDToDMS, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map