@linzjs/step-ag-grid 21.2.1 → 22.0.0

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

@@ -1,9 +1,9 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 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 } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, createContext, useContext, forwardRef, useCallback, useState, useMemo, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 
 /**
@@ -334,9 +334,9 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
         }
         const newSortOrder = JSON.stringify(copyCurrentSortSettings());
         let sortOrderChanged = newSortOrder != lastSortOrderHash.current;
-        const quickFilter = api.filterManager.quickFilter;
+        const quickFilter = api.getQuickFilter();
         if (previousQuickFilter.current != quickFilter) {
-            previousQuickFilter.current = quickFilter;
+            previousQuickFilter.current = quickFilter ?? "";
             sortOrderChanged = true;
         }
         if (isEmpty(previousRowSortIndex)) {
@@ -658,7 +658,7 @@ const withHovering = (name, WrappedComponent) => {
     const Component = memo(WrappedComponent);
     const WithHovering = forwardRef((props, ref) => {
         const menuItemRef = useRef(null);
-        return (jsx(Component, { ...props, menuItemRef: menuItemRef, externalRef: ref, isHovering: useContext(HoverItemContext) === menuItemRef.current }));
+        return (jsx(Fragment, { children: jsx(Component, { ...props, menuItemRef: menuItemRef, externalRef: ref, isHovering: useContext(HoverItemContext) === menuItemRef.current }) }));
     });
     WithHovering.displayName = `WithHovering(${name})`;
     return WithHovering;
@@ -1993,7 +1993,7 @@ function MenuFr({ "aria-label": ariaLabel, menuButton, instanceRef, onMenuChange
         openMenu,
         closeMenu: () => toggleMenu(false),
     }));
-    return (jsxs(Fragment, { children: [renderButton, jsx(ControlledMenu, { ...restProps, ...stateProps, "aria-label": ariaLabel || (typeof button.props.children === "string" ? button.props.children : "Menu"), anchorRef: buttonRef, ref: externalRef, onClose: handleClose, skipOpen: skipOpen })] }));
+    return (jsxs(Fragment$1, { children: [renderButton, jsx(ControlledMenu, { ...restProps, ...stateProps, "aria-label": ariaLabel || (typeof button.props.children === "string" ? button.props.children : "Menu"), anchorRef: buttonRef, ref: externalRef, onClose: handleClose, skipOpen: skipOpen })] }));
 }
 const Menu = forwardRef(MenuFr);
 
@@ -2329,14 +2329,14 @@ const useGridContextMenu = ({ contextMenuSelectRow, contextMenu: ContextMenu, })
     return {
         openMenu,
         cellContextMenu,
-        component: ContextMenu ? (jsx(Fragment$1, { children: jsx(ControlledMenu, { anchorPoint: anchorPoint, state: isOpen ? "open" : "closed", direction: "right", onClose: closeMenu, children: isOpen && (jsx(ContextMenu, { selectedRows: selectedRowsRef.current, clickedRow: clickedRowRef.current, colDef: clickedColDefRef.current, close: closeMenu })) }) })) : null,
+        component: ContextMenu ? (jsx(Fragment, { children: jsx(ControlledMenu, { anchorPoint: anchorPoint, state: isOpen ? "open" : "closed", direction: "right", onClose: closeMenu, children: isOpen && (jsx(ContextMenu, { selectedRows: selectedRowsRef.current, clickedRow: clickedRowRef.current, colDef: clickedColDefRef.current, close: closeMenu })) }) })) : null,
     };
 };
 
 /**
  * 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, singleClickEdit = false, rowData, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : 40, ...params }) => {
+const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection = "multiple", suppressColumnVirtualization = true, theme = "ag-theme-step-default", sizeColumns = "auto", selectColumnPinned = null, contextMenuSelectRow = false, singleClickEdit = false, rowData, rowHeight = theme === "ag-theme-step-default" ? 40 : theme === "ag-theme-step-compact" ? 36 : 40, ...params }) => {
     const { gridReady, gridRenderState, setApis, ensureRowVisible, getFirstRowId, selectRowsById, focusByRowById, ensureSelectedRowIsVisible, autoSizeColumns, sizeColumnsToFit, externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync, isExternalFilterPresent, doesExternalFilterPass, setOnCellEditingComplete, getColDef, showNoRowsOverlay, prePopupOps, stopEditing, } = useContext(GridContext);
     const { checkUpdating, updatedDep, updatingCols } = useContext(GridUpdatingContext);
     const gridDivRef = useRef(null);
@@ -2539,6 +2539,7 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
                         exportable: false,
                     },
                     checkboxSelection: params.selectable,
+                    headerClass: params.onRowDragEnd ? "ag-header-select-draggable" : undefined,
                     headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
                     suppressHeaderKeyboardEvent: (e) => {
                         if (!params.selectable)
@@ -2811,13 +2812,13 @@ const Grid = ({ "data-testid": dataTestId, rowSelection = "multiple", suppressCo
     // This is setting a ref in the GridContext so won't be triggering an update loop
     setOnCellEditingComplete(params.onCellEditingComplete);
     const headerRowCount = columnDefs.some((c) => c.children) ? 2 : 1;
-    return (jsxs("div", { "data-testid": dataTestId, className: clsx("Grid-container", theme, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { reactiveCustomComponents: true, rowHeight: rowHeight, animateRows: params.animateRows ?? false, 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, "theme-specific", staleGrid && "Grid-sortIsStale", gridReady && rowData && autoSized && "Grid-ready"), children: [gridContextMenu.component, jsx("div", { style: { flex: 1 }, ref: gridDivRef, children: jsx(AgGridReact, { rowHeight: rowHeight, animateRows: params.animateRows ?? false, 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: rowData, noRowsOverlayComponent: (event) => {
                         let rowCount = 0;
                         event.api.forEachNode(() => rowCount++);
                         return (jsx(GridNoRowsOverlay, { loading: !rowData || params.loading === true, rowCount: rowCount, headerRowHeight: headerRowCount * rowHeight, filteredRowCount: event.api.getDisplayedRowCount(), noRowsOverlayText: params.noRowsOverlayText, noRowsMatchingOverlayText: params.noRowsMatchingOverlayText }));
-                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData }) })] }));
+                    }, onModelUpdated: onModelUpdated, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection, onColumnMoved: params.onColumnMoved, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, isExternalFilterPresent: isExternalFilterPresent, doesExternalFilterPass: doesExternalFilterPass, maintainColumnOrder: true, preventDefaultOnContextMenu: true, onCellContextMenu: gridContextMenu.cellContextMenu, rowDragText: params.rowDragText, onRowDragMove: onRowDragMove, onRowDragEnd: onRowDragEnd, onRowDragLeave: onRowDragLeave, suppressCellFocus: params.suppressCellFocus, pinnedTopRowData: params.pinnedTopRowData, pinnedBottomRowData: params.pinnedBottomRowData }) })] }));
 };
 
 const GridPopoverContext = createContext({
@@ -2897,14 +2898,14 @@ const GridCellRenderer = (props) => {
         warningText = warningText.join("\n");
     if (Array.isArray(infoText))
         infoText = infoText.join("\n");
-    return checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id) ? (jsx(GridLoadableCell, {})) : (jsxs(Fragment$1, { children: [!!warningText && (jsx(GridIcon, { icon: "ic_warning_outline", title: typeof warningText === "string" ? warningText : "Warning" })), !!infoText && jsx(GridIcon, { icon: "ic_info_outline", title: typeof infoText === "string" ? infoText : "Info" }), jsx("div", { className: "GridCell-container", children: colDef.cellRendererParams?.originalCellRenderer ? (jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsx("div", { className: "GridCell-hoverRight", children: rendererParams?.rightHoverElement }))] }));
+    return checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id) ? (jsx(GridLoadableCell, {})) : (jsxs(Fragment, { children: [!!warningText && (jsx(GridIcon, { icon: "ic_warning_outline", title: typeof warningText === "string" ? warningText : "Warning" })), !!infoText && jsx(GridIcon, { icon: "ic_info_outline", title: typeof infoText === "string" ? infoText : "Info" }), jsx("div", { className: "GridCell-container", children: colDef.cellRendererParams?.originalCellRenderer ? (jsx(colDef.cellRendererParams.originalCellRenderer, { ...props })) : (jsx("span", { title: props.valueFormatted ?? undefined, children: props.valueFormatted })) }), fnOrVar(colDef.editable, props) && rendererParams?.rightHoverElement && (jsx("div", { className: "GridCell-hoverRight", children: rendererParams?.rightHoverElement }))] }));
 };
 const suppressCellKeyboardEvents = (e) => {
     const shortcutKeys = e.colDef.cellRendererParams?.shortcutKeys ?? {};
     const exec = shortcutKeys[e.event.key];
     if (exec && !e.editing && !e.event.repeat && e.event.type === "keydown") {
         const editable = fnOrVar(e.colDef?.editable, e);
-        return editable ? exec(e) ?? true : true;
+        return editable ? (exec(e) ?? true) : true;
     }
     // It's important that aggrid doesn't trigger edit on enter
     // as the incorrect selected rows will be returned
@@ -3325,7 +3326,7 @@ var css_248z$2 = ".FormError-helpText{color:#6b6966;font-size:.75rem;font-weight
 styleInject(css_248z$2);
 
 const FormError = (props) => {
-    return (jsxs(Fragment$1, { children: [props.error && (jsx("span", { className: "LuiTextInput-error", style: { paddingLeft: 0 }, children: props.error })), props.helpText && !props.error && jsx("span", { className: "FormError-helpText", children: props.helpText })] }));
+    return (jsxs(Fragment, { children: [props.error && (jsx("span", { className: "LuiTextInput-error", style: { paddingLeft: 0 }, children: props.error })), props.helpText && !props.error && jsx("span", { className: "FormError-helpText", children: props.helpText })] }));
 };
 
 function escapeStringRegexp(string) {
@@ -3513,7 +3514,7 @@ const useGridPopoverHook = (props) => {
         }
     }, [cancelEdit, props, stopEditing, updateValue]);
     const popoverWrapper = useCallback((children) => {
-        return (jsx(Fragment$1, { children: anchorRef.current && (jsxs(ControlledMenu, { state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: (event) => {
+        return (jsx(Fragment, { children: anchorRef.current && (jsxs(ControlledMenu, { state: isOpen ? "open" : "closed", portal: true, unmountOnClose: true, anchorRef: anchorRef, saveButtonRef: saveButtonRef, menuClassName: "step-ag-grid-react-menu", onClose: (event) => {
                     // Prevent menu from closing when modals are invoked
                     if (event.reason === CloseReason.BLUR)
                         return;
@@ -3649,19 +3650,19 @@ const GridFormDropDown = (props) => {
     });
     let lastHeader = null;
     let showHeader = null;
-    return popoverWrapper(jsxs(Fragment$1, { children: [props.filtered && (jsxs("div", { className: "GridFormDropDown-filter", children: [jsx(FocusableItem, { className: "filter-item", onFocus: () => {
+    return popoverWrapper(jsxs(Fragment, { children: [props.filtered && (jsxs("div", { className: "GridFormDropDown-filter", children: [jsx(FocusableItem, { className: "filter-item", onFocus: () => {
                             setSelectedItem(null);
                             setSubSelectedValue(null);
                             subComponentIsValid.current = true;
                         }, children: ({ ref }) => (jsxs("div", { style: { display: "flex", flexDirection: "column", width: "100%" }, children: [jsx("input", { className: "LuiTextInput-input", ref: ref, type: "text", placeholder: props.filterPlaceholder ?? "Filter...", "data-testid": "filteredMenu-free-text-input", defaultValue: filter, "data-allowtabtosave": true, "data-disableenterautosave": !props.onSelectFilter &&
-                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value) }), props.filterHelpText && isNotEmpty(filter) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsx(MenuDivider, {}, `$$divider_filter`)] })), jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormDropDown-options", children: jsxs(Fragment$1, { children: [options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (jsx(MenuItem, { className: "GridPopoverEditDropDown-noOptions", disabled: true, children: props.noOptionsMessage ?? "No Options" }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
+                                        !(filteredValues && filteredValues.length === 1 && !filteredValues[0].subComponent), onChange: (e) => setFilter(e.target.value) }), props.filterHelpText && isNotEmpty(filter) && (jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsx(MenuDivider, {}, `$$divider_filter`)] })), jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormDropDown-options", children: jsxs(Fragment, { children: [options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (jsx(MenuItem, { className: "GridPopoverEditDropDown-noOptions", disabled: true, children: props.noOptionsMessage ?? "No Options" }, `${fieldToString(field)}-empty`)), options?.map((item, index) => {
                             showHeader = null;
                             if (item.value === MenuSeparatorString) {
                                 return jsx(MenuDivider, {}, `$$divider_${index}`);
                             }
                             else if (item.value === MenuHeaderString) {
                                 lastHeader = jsx(MenuHeader, { children: item.label }, `$$header_${index}`);
-                                return jsx(Fragment$1, {});
+                                return jsx(Fragment, {});
                             }
                             else {
                                 if (lastHeader) {
@@ -3669,7 +3670,7 @@ const GridFormDropDown = (props) => {
                                     lastHeader = null;
                                 }
                             }
-                            return ((!filteredValues || filteredValues.includes(item)) && (jsxs(Fragment, { children: [showHeader, jsxs("div", { children: [jsxs(MenuItem, { disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: () => {
+                            return ((!filteredValues || filteredValues.includes(item)) && (jsxs(Fragment$1, { children: [showHeader, jsxs("div", { children: [jsxs(MenuItem, { disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", value: item.value, onFocus: () => {
                                                     if (selectedItem !== item) {
                                                         setSelectedItem(item);
                                                         setSubSelectedValue(null);
@@ -3862,7 +3863,7 @@ const GridFormMessage = (props) => {
             setMessage(await props.message(selectedRows));
         })().then();
     }, [props, selectedRows]);
-    return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: message === null, className: clsx("GridFormMessage-container", props.className), children: jsx(Fragment$1, { children: message }) }));
+    return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: message === null, className: clsx("GridFormMessage-container", props.className), children: jsx(Fragment, { children: message }) }));
 };
 
 const GridFormMultiSelect = (props) => {
@@ -3942,10 +3943,10 @@ const GridFormMultiSelect = (props) => {
         invalid,
         save,
     });
-    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 &&
+    return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormMultiSelect-container", children: options && (jsxs(Fragment, { 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, onChecked: () => {
+                        return (!isEmpty(subOptions) && (jsxs(Fragment$1, { children: [header.header && jsx(MenuHeader, { children: header.header }), subOptions.map((item, index) => item.value === MenuSeparatorString ? (jsx(MenuDivider, {}, `div_${index}`)) : (jsxs(Fragment$1, { children: [jsx(MenuRadioItem, { item: item, options: options, setOptions: setOptions, onChecked: () => {
                                                 // Default to focus on first input in subComponent
                                                 defer$1(() => {
                                                     firstInputSubComponent.current?.focus();
@@ -4025,7 +4026,7 @@ const FilterInput = (props) => {
             lastKeyWasEnter.current = false;
         }
     }, [addCustomFilterValue, filter, onSelectFilter, setFilter, toggleSelectAllVisible, triggerSave]);
-    return (jsxs(Fragment$1, { children: [jsx(FocusableItem, { className: "filter-item", children: (_) => (jsxs("div", { style: { width: "100%" }, className: "GridFormMultiSelect-filter", children: [jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder ?? "Filter...", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: (e) => setFilter(e.target.value), onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), filterHelpText && (jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] })) }, "filter"), jsx(MenuDivider, {}, `$$divider_filter`)] }));
+    return (jsxs(Fragment, { children: [jsx(FocusableItem, { className: "filter-item", children: (_) => (jsxs("div", { style: { width: "100%" }, className: "GridFormMultiSelect-filter", children: [jsx("input", { className: "LuiTextInput-input", type: "text", placeholder: filterPlaceholder ?? "Filter...", "data-testid": "filteredMenu-free-text-input", value: filter, "data-disableenterautosave": true, "data-allowtabtosave": true, onChange: (e) => setFilter(e.target.value), onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), filterHelpText && (jsx(FormError, { error: null, helpText: typeof filterHelpText === "function" ? filterHelpText(filter.trim(), options) : filterHelpText }))] })) }, "filter"), jsx(MenuDivider, {}, `$$divider_filter`)] }));
 };
 const MenuRadioItem = (props) => {
     const { item, options, setOptions } = props;
@@ -4040,7 +4041,7 @@ const MenuRadioItem = (props) => {
                 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: {
+        }, children: jsx(LuiCheckboxInput, { isChecked: item.checked ?? false, value: `${item.value}`, label: jsxs(Fragment, { 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
                     e.preventDefault();
@@ -4135,20 +4136,20 @@ const GridFormMultiSelectGrid = (props) => {
             setOptions([...options]);
         }
     }, [options, setOptions]);
-    return popoverWrapper(jsx(Fragment$1, { children: jsx("div", { className: "Grid-popoverContainer", children: jsx("div", { style: {
+    return popoverWrapper(jsx(Fragment, { children: jsx("div", { className: "Grid-popoverContainer", children: jsx("div", { style: {
                     display: "grid",
                     gridAutoFlow: "column",
                     gridTemplateRows: `repeat(${props.maxRowCount ?? 10}, auto)`,
                     maxWidth: "calc(min(100vw,500px))",
                     overflowX: "auto",
                 }, children: options &&
-                    options.map((o) => (jsx(Fragment$1, { children: jsx(MenuItem, { onClick: (e) => {
+                    options.map((o) => (jsx(Fragment, { children: jsx(MenuItem, { onClick: (e) => {
                                 // Global react-menu MenuItem handler handles tabs
                                 if (e.key !== "Tab" && e.key !== "Enter") {
                                     e.keepOpen = true;
                                     toggleValue(o);
                                 }
-                            }, children: jsx(LuiCheckboxInput, { isChecked: !!o.checked ?? false, isIndeterminate: o.checked === "partial", value: `${o.value}`, label: jsxs(Fragment$1, { 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 ?? 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: {
                                     onClick: (e) => {
                                         // Click is handled by MenuItem onClick
                                         e.preventDefault();
@@ -4234,7 +4235,7 @@ const GridFormPopoverMenu = (props) => {
         invalid: () => subComponentSelected && !subComponentIsValid.current,
         save,
     });
-    return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormPopupMenu", children: jsx(Fragment$1, { children: isEmpty(options) ? (jsx(MenuItem, { className: "GridPopoverMenu-noOptions", disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === "__isMenuSeparator__" ? (jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxs(Fragment, { children: [item.subMenu ? (jsx(SubMenu, { disabled: !!item.disabled, label: item.label, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: jsx(item.subMenu, {}) }, `${item.label}`)) : (jsx(MenuItem, { onClick: (e) => onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: item.label }, `${item.label}`)), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsx(GridSubComponentContext.Provider, { value: {
+    return popoverWrapper(jsx(ComponentLoadingWrapper, { loading: !options, className: "GridFormPopupMenu", children: jsx(Fragment, { children: isEmpty(options) ? (jsx(MenuItem, { className: "GridPopoverMenu-noOptions", disabled: true, children: "No actions" }, `GridPopoverMenu-empty`)) : (options?.map((item, index) => item.label === "__isMenuSeparator__" ? (jsx(MenuDivider, {}, `$$divider_${index}`)) : (!item.hidden && (jsxs(Fragment$1, { children: [item.subMenu ? (jsx(SubMenu, { disabled: !!item.disabled, label: item.label, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: jsx(item.subMenu, {}) }, `${item.label}`)) : (jsx(MenuItem, { onClick: (e) => onMenuItemClick(e, item), disabled: !!item.disabled, title: item.disabled && typeof item.disabled !== "boolean" ? item.disabled : "", children: item.label }, `${item.label}`)), item.subComponent && subComponentSelected === item && (jsx(FocusableItem, { className: "LuiDeprecatedForms", children: () => (jsx(GridSubComponentContext.Provider, { value: {
                                 context: {},
                                 data,
                                 value: subSelectedValue,