@linzjs/step-ag-grid 17.0.6 → 17.1.0

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 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 { createContext, useContext, useRef, useEffect, useCallback, useState, useMemo, useLayoutEffect, memo, forwardRef, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
+import React, { createContext, useContext, useRef, useEffect, useCallback, useState, useMemo, useLayoutEffect, memo, forwardRef, useReducer, cloneElement, useImperativeHandle, Fragment } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 import * as testUtils from 'react-dom/test-utils';
 import 'react-dom/client';
@@ -2320,7 +2320,7 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, ...params }) => {
+const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : undefined, ...params }) => {
     const { gridReady, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, } = useContext(GridContext);
     const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
     const { prePopupOps } = useContext(GridContext);
@@ -2734,7 +2734,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     const gridContextMenu = useGridContextMenu({ contextMenu: params.contextMenu, contextMenuSelectRow });
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
-    return (jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: params.rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
+    return (jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, staleGrid && "Grid-sortIsStale", gridReady && params.rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows, rowClassRules: params.rowClassRules, getRowId: (params) => `${params.data.id}`, suppressRowClickSelection: true, rowSelection: rowSelection, suppressBrowserResizeObserver: true, onGridSizeChanged: onGridSizeChanged, suppressColumnVirtualisation: suppressColumnVirtualization, suppressClickEdit: true, onColumnVisible: () => {
                         setInitialContentSize();
                     }, onRowDataUpdated: onRowDataChanged, onCellKeyDown: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, domLayout: params.domLayout, onColumnResized: onColumnResized, defaultColDef: { minWidth: 48, ...omit(params.defaultColDef, ["editable"]) }, columnDefs: columnDefsAdjusted, rowData: params.rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
@@ -3759,6 +3759,7 @@ const GridFormMultiSelect = (props) => {
     const { selectedRows, data } = useGridPopoverContext();
     const subComponentIsValidRef = useRef({});
     const optionsInitialising = useRef(false);
+    const firstInputSubComponent = useRef(null);
     const [filter, setFilter] = useState("");
     const [initialValues, setInitialValues] = useState("");
     const [options, setOptions] = useState();
@@ -3834,7 +3835,12 @@ const GridFormMultiSelect = (props) => {
     return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormMultiSelect-container", children: options && (jsxs(Fragment$1, { children: [props.filtered && (jsx(FilterInput, { ...{ headerGroups, options, setOptions, filter, setFilter, triggerSave }, filterHelpText: props.filterHelpText, onSelectFilter: props.onSelectFilter, filterPlaceholder: props.filterPlaceholder })), headerGroups &&
                     (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (jsx(MenuItem, { className: "GridMultiSelect-noOptions", disabled: true, children: props.noOptionsMessage ?? "No Options" }, "noOptions")), headerGroups && !isEmpty(headerGroups) && (jsx("div", { className: "GridFormMultiSelect-options", children: headers.map((header, index) => {
                         const subOptions = headerGroups[`${header.filter}`];
-                        return (!isEmpty(subOptions) && (jsxs(Fragment, { children: [header.header && jsx(MenuHeader, { children: header.header }), subOptions.map((item, index) => item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, `div_${index}`)) : (jsxs(Fragment, { children: [jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions }), item.checked && item.subComponent && (jsx(MenuSubComponent, { ...{ item, options, setOptions, data, triggerSave }, subComponentIsValid: subComponentIsValidRef.current }))] }, `val_${item.value}`)))] }, `group_${index}`)));
+                        return (!isEmpty(subOptions) && (jsxs(Fragment, { children: [header.header && jsx(MenuHeader, { children: header.header }), subOptions.map((item, index) => item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, `div_${index}`)) : (jsxs(Fragment, { children: [jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions, onChecked: () => {
+                                                // Default to focus on first input in subComponent
+                                                defer$1(() => {
+                                                    firstInputSubComponent.current?.focus();
+                                                });
+                                            } }), item.checked && item.subComponent && (jsx(MenuSubComponent, { ...{ item, options, setOptions, data, triggerSave }, ref: firstInputSubComponent, subComponentIsValid: subComponentIsValidRef.current }))] }, `val_${item.value}`)))] }, `group_${index}`)));
                     }) }))] })) }));
 };
 const FilterInput = (props) => {
@@ -3923,6 +3929,7 @@ const MenuRadioItem = (props) => {
                 e.keepOpen = true;
                 toggleValue(item);
             }
+            item.checked && props.onChecked && props.onChecked();
         }, children: jsx(LuiCheckboxInput, { isChecked: item.checked ?? false, value: `${item.value}`, label: jsxs(Fragment$1, { children: [item.warning && jsx(GridIcon, { icon: "ic_warning_outline", title: item.warning }), item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)] }), inputProps: {
                 onClick: (e) => {
                     // Click is handled by MenuItem onClick
@@ -3933,9 +3940,22 @@ const MenuRadioItem = (props) => {
                 /*Do nothing, change handled by menuItem*/
             } }) }));
 };
-const MenuSubComponent = (props) => {
+const MenuSubComponent = React.forwardRef(MenuSubComponentFr);
+function MenuSubComponentFr(props, ref) {
     const { data, item, options, setOptions, subComponentIsValid, triggerSave } = props;
-    return (jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsx(GridSubComponentContext.Provider, { value: {
+    const focusableRef = React.useRef(null);
+    useEffect(() => {
+        if (focusableRef.current) {
+            const firstInputElement = focusableRef.current.querySelectorAll("input")[0] ?? null;
+            if (typeof ref === "function") {
+                ref(firstInputElement);
+            }
+            else if (ref) {
+                ref.current = firstInputElement;
+            }
+        }
+    }, [ref]);
+    return (jsx(FocusableItem, { className: "LuiDeprecatedForms", ref: focusableRef, children: () => (jsx(GridSubComponentContext.Provider, { value: {
                 context: { options },
                 data,
                 value: item.subValue,
@@ -3948,7 +3968,7 @@ const MenuSubComponent = (props) => {
                 },
                 triggerSave,
             }, children: jsx("div", { className: "subComponent", children: item.subComponent && jsx(item.subComponent, {}) }) })) }, `${item.value}_subcomponent`));
-};
+}
 
 const GridFormMultiSelectGrid = (props) => {
     const { selectedRows } = useGridPopoverContext();