@linzjs/step-ag-grid 22.0.0 → 22.1.0

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,29 @@
   background-color: #f9f9f9;
 }
 
+.GridHeaderAlignCenter .ag-header-cell-text {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.GridCellAlignCenter .GridCell-container {
+  display: flex;
+}
+
+.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 +488,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/src/lui/TextAreaInput.d.ts

@@ -1,5 +1,4 @@
 import { InputHTMLAttributes, ReactElement } from "react";
-export declare const useGenerateOrDefaultId: (idFromProps?: string) => string;
 export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
     value: string;
     label?: ReactElement | string;

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();
@@ -4251,65 +4283,9 @@ const GridFormPopoverMenu = (props) => {
                             }, children: jsxRuntime.jsx("div", { className: "subComponent", children: item.subComponent && jsxRuntime.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] = React.useState(idFromProps ? idFromProps : v4());
-    return id;
-};
 const TextAreaInput = (props) => {
-    const id = useGenerateOrDefaultId(props?.id);
+    const reactId = React.useId();
+    const id = props?.id ?? reactId;
     return (jsxRuntime.jsxs("div", { className: clsx("LuiTextAreaInput Grid-popoverContainer", props.disabled ? "isDisabled" : "", props.error ? "hasError" : "", props.className), children: [jsxRuntime.jsxs("label", { htmlFor: id, children: [props.mandatory != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-mandatory", children: "*" }), props.label != null && jsxRuntime.jsx("span", { className: "LuiTextAreaInput-label", children: props.label }), jsxRuntime.jsx("div", { className: "LuiTextAreaInput-wrapper", children: jsxRuntime.jsx("textarea", { rows: 5, ...lodashEs.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();
@@ -4459,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,
@@ -4542,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),
     },
 });
 
@@ -5329,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;
@@ -5389,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;
@@ -5402,7 +5428,6 @@ exports.sanitiseFileName = sanitiseFileName;
 exports.stringByteLengthIsInvalid = stringByteLengthIsInvalid;
 exports.suppressCellKeyboardEvents = suppressCellKeyboardEvents;
 exports.useDeferredPromise = useDeferredPromise;
-exports.useGenerateOrDefaultId = useGenerateOrDefaultId;
 exports.useGridContext = useGridContext;
 exports.useGridContextMenu = useGridContextMenu;
 exports.useGridFilter = useGridFilter;