@linzjs/step-ag-grid 21.3.0 → 22.0.1

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, useId } 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,7 +2329,7 @@ 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,
     };
 };
 
@@ -2539,6 +2539,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
                         exportable: false,
                     },
                     checkboxSelection: params.selectable,
+                    headerClass: params.onRowDragEnd ? "ag-header-select-draggable" : undefined,
                     headerComponent: rowSelection === "multiple" ? GridHeaderSelect : null,
                     suppressHeaderKeyboardEvent: (e) => {
                         if (!params.selectable)
@@ -2811,7 +2812,7 @@ const Grid = ({ "data-testid": dataTestId, defaultPostSort = true, rowSelection
     // 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;
@@ -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,
@@ -4248,65 +4249,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();
@@ -5310,5 +5255,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, 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 };
 //# sourceMappingURL=step-ag-grid.esm.js.map