@linzjs/step-ag-grid 22.0.0 → 22.1.0

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

@@ -3,7 +3,7 @@ import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButton, LuiCheckboxInput,
 import { RowHighlightPosition } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import { negate, isEmpty, findIndex, defer as defer$1, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, compact, filter, sumBy, pull, remove, castArray, flatten } from 'lodash-es';
-import React, { useRef, useEffect, useLayoutEffect, createContext, useContext, forwardRef, useCallback, useState, useMemo, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, createContext, useContext, forwardRef, useCallback, useState, useMemo, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1, useId } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 
 /**
@@ -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();
@@ -4249,65 +4281,9 @@ const GridFormPopoverMenu = (props) => {
                             }, children: jsx("div", { className: "subComponent", children: item.subComponent && jsx(item.subComponent, {}) }) })) }, `${item.label}_subcomponent`))] }, `${item.label}`))))) }) }));
 };
 
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-var byteToHex = [];
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  //
-  // Note to future-self: No, you can't remove the `toLowerCase()` call.
-  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
-}
-
-// Unique ID creation requires a high quality random # generator. In the browser we therefore
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-  return getRandomValues(rnds8);
-}
-
-var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native = {
-  randomUUID
-};
-
-function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
-    return native.randomUUID();
-  }
-  options = options || {};
-  var rnds = options.random || (options.rng || rng)();
-
-  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80;
-  return unsafeStringify(rnds);
-}
-
-const useGenerateOrDefaultId = (idFromProps) => {
-    const [id] = useState(idFromProps ? idFromProps : v4());
-    return id;
-};
 const TextAreaInput = (props) => {
-    const id = useGenerateOrDefaultId(props?.id);
+    const reactId = useId();
+    const id = props?.id ?? reactId;
     return (jsxs("div", { className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className), children: [jsxs("label", { htmlFor: id, children: [props.mandatory != null && jsx("span", { className: "LuiTextAreaInput-mandatory", children: "*" }), props.label != null && jsx("span", { className: "LuiTextAreaInput-label", children: props.label }), jsx("div", { className: "LuiTextAreaInput-wrapper", children: jsx("textarea", { rows: 5, ...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"]), id: id, value: props.value ?? "", spellCheck: true, onMouseEnter: (e) => {
                                 if (document.activeElement != e.currentTarget) {
                                     e.currentTarget.focus();
@@ -4457,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,
@@ -4540,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),
     },
 });
 
@@ -5311,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, useGenerateOrDefaultId, 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