@linzjs/step-ag-grid 29.1.2 → 29.1.4

package/dist/src/components/Grid.d.ts

@@ -65,7 +65,7 @@ export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
      * When pressing tab whilst editing the grid will select and edit the next cell if available.
      * Once the last cell to edit closes this callback is called.
      */
-    onBulkEditingComplete?: () => void;
+    onBulkEditingComplete?: () => Promise<void> | void;
     /**
      * Context menu definition if required.
      */

package/dist/src/components/GridPopoverHook.d.ts

@@ -6,7 +6,9 @@ export interface GridPopoverHookProps<TData> {
     save?: (selectedRows: TData[]) => Promise<boolean>;
     dontSaveOnExternalClick?: boolean;
 }
+export declare const CancelPromise: () => Promise<boolean>;
 export declare const useGridPopoverHook: <TData extends GridBaseRow>({ className, save, invalid, dontSaveOnExternalClick, }: GridPopoverHookProps<TData>) => {
     popoverWrapper: (children: ReactElement) => import("react/jsx-runtime").JSX.Element;
     triggerSave: (reason?: string) => Promise<void>;
+    gridPopoverOpen: boolean;
 };

package/dist/src/contexts/GridContext.d.ts

@@ -57,8 +57,8 @@ export interface GridContextType<TData extends GridBaseRow> {
     invisibleColumnIds: string[] | undefined;
     setInvisibleColumnIds: (colIds: string[]) => void;
     downloadCsv: (csvExportParams?: CsvExportParams) => void;
-    onBulkEditingComplete: () => void;
-    setOnBulkEditingComplete: (callback: (() => void) | undefined) => void;
+    onBulkEditingComplete: () => Promise<void> | void;
+    setOnBulkEditingComplete: (callback: (() => Promise<void> | void) | undefined) => void;
     showNoRowsOverlay: () => void;
 }
 export declare const GridContext: import("react").Context<GridContextType<any>>;

package/dist/src/utils/waitForCondition.d.ts

@@ -1 +1 @@
-export declare const waitForCondition: (condition: () => boolean, timeoutMs: number) => Promise<boolean>;
+export declare const waitForCondition: (error: string, condition: () => boolean, timeoutMs: number) => Promise<boolean>;

package/dist/step-ag-grid.cjs

@@ -3400,20 +3400,25 @@ const GridCell = (props, custom) => {
         sortable: true,
         resizable: true,
         valueSetter: custom?.editor ? blockValueSetter : undefined,
-        editable: props.editable ?? false,
-        ...(custom?.editor && {
-            cellClassRules: GridCellMultiSelectClassRules,
-            editable: props.editable ?? true,
-            cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
-        }),
+        editable: props.editable ?? !!custom?.editor,
+        ...(custom?.editor
+            ? {
+                cellClassRules: GridCellMultiSelectClassRules,
+                cellEditor: GenericCellEditorComponentWrapper(custom?.editor),
+            }
+            : {
+                cellEditor: CellEditorToBlockEditing,
+            }),
         suppressKeyboardEvent: suppressCellKeyboardEvents,
-        ...(custom?.editorParams && {
-            cellEditorParams: {
-                ...custom.editorParams,
-                multiEdit: custom.multiEdit,
-                preventAutoEdit: custom.preventAutoEdit ?? false,
-            },
-        }),
+        ...(custom?.editorParams
+            ? {
+                cellEditorParams: {
+                    ...custom.editorParams,
+                    multiEdit: custom.multiEdit,
+                    preventAutoEdit: custom.preventAutoEdit ?? !custom?.editor,
+                },
+            }
+            : { cellEditorParams: { preventAutoEdit: !custom?.editor } }),
         // If there's a valueFormatter and no filterValueGetter then create a filterValueGetter
         getQuickFilterText: filterValueGetter,
         // Default value formatter, otherwise react freaks out on objects
@@ -3430,6 +3435,19 @@ const GridCell = (props, custom) => {
         },
     };
 };
+/**
+ * Ag-grid will start its own editor if editable is true and there is no cell editor
+ * like in the case of a cell that is editable because it triggers a modal.
+ * This will block that editor.
+ */
+const CellEditorToBlockEditing = ({ stopEditing }) => {
+    React.useEffect(() => {
+        lodashEs.defer(() => {
+            stopEditing();
+        });
+    }, [stopEditing]);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
 const GenericCellEditorComponentWrapper = (editor) => {
     const obj = { editor };
     return React.forwardRef(function GenericCellEditorComponentFr(cellEditorParams, _) {
@@ -3783,6 +3801,19 @@ const FormError = (props) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.error && (jsxRuntime.jsxs("div", { className: "FormError", children: [jsxRuntime.jsx(lui.LuiIcon, { alt: "error", name: "ic_error", className: "FormError-text-icon", size: "sm", status: "error" }), jsxRuntime.jsx("span", { className: "FormError-error", children: props.error })] })), props.helpText && !props.error && jsxRuntime.jsx("span", { className: 'FormError-helpText', children: props.helpText })] }));
 };
 
+/**
+ * Track previous values of states.
+ *
+ * @param value Value to track.
+ */
+const usePrevious = (value) => {
+    const ref = React.useRef();
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {
 		throw new TypeError('Expected a string');
@@ -3938,8 +3969,8 @@ const textMatch = (text, filter) => {
             negativeFilters.every((superFilter) => values.every((value) => isMatch(value, superFilter)))));
 };
 
+const CancelPromise = () => Promise.resolve(true);
 const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick, }) => {
-    const { onBulkEditingComplete, redrawRows } = useGridContext();
     const { anchorRef, saving, updateValue, stopEditing } = useGridPopoverContext();
     const saveButtonRef = React.useRef(null);
     const [isOpen, setOpen] = React.useState(false);
@@ -3948,27 +3979,18 @@ const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick,
     }, []);
     const triggerSave = React.useCallback(async (reason) => {
         if (reason == CloseReason.CANCEL) {
+            await updateValue(CancelPromise, 0);
             stopEditing();
-            onBulkEditingComplete();
-            redrawRows();
             return;
         }
         if (invalid?.()) {
             // Don't close, don't do anything it's invalid
             return;
         }
-        if (!save) {
-            // No save method so just close
+        if (await updateValue(save ?? (() => Promise.resolve(true)), reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)) {
             stopEditing();
-            onBulkEditingComplete();
-            redrawRows();
-            return;
         }
-        if (await updateValue(save, reason === CloseReason.TAB_FORWARD ? 1 : reason === CloseReason.TAB_BACKWARD ? -1 : 0)) {
-            stopEditing();
-            redrawRows();
-        }
-    }, [invalid, onBulkEditingComplete, redrawRows, save, stopEditing, updateValue]);
+    }, [invalid, save, stopEditing, updateValue]);
     const popoverWrapper = React.useCallback((children) => {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchorRef.current && (jsxRuntime.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
@@ -3988,13 +4010,14 @@ const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick,
     return {
         popoverWrapper,
         triggerSave,
+        gridPopoverOpen: isOpen,
     };
 };
 
 const primitiveToSelectOption = (value) => {
     return {
         value: value,
-        label: value ? String(value) : '',
+        label: value ? String(value) : '-',
     };
 };
 const MenuSeparatorString = '_____MENU_SEPARATOR_____';
@@ -4008,6 +4031,7 @@ const fieldToString = (field) => {
 };
 const GridFormDropDown = (props) => {
     const { selectedRows, field, data } = useGridPopoverContext();
+    const { onSelectFilter, options: propOptions, onSelectedItem } = props;
     // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
     const [filter, setFilter] = React.useState(props.filterDefaultValue ?? '');
     const [filteredValues, setFilteredValues] = React.useState();
@@ -4021,8 +4045,8 @@ const GridFormDropDown = (props) => {
         const hasChanged = selectedRows.some((row) => row[field] !== value) ||
             (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
         if (hasChanged) {
-            if (props.onSelectedItem) {
-                await props.onSelectedItem({
+            if (onSelectedItem) {
+                await onSelectedItem({
                     selectedRows,
                     selectedRowIds: selectedRows.map((row) => row.id),
                     value,
@@ -4034,21 +4058,72 @@ const GridFormDropDown = (props) => {
             }
         }
         return true;
-    }, [field, props, selectedRows]);
-    // Load up options list if it's async function
-    React.useEffect(() => {
-        if (options)
-            return;
-        let optionsConf = props.options;
-        void (async () => {
-            if (typeof optionsConf === 'function') {
-                optionsConf = await optionsConf(selectedRows, filter);
+    }, [field, onSelectedItem, selectedRows]);
+    /**
+     * Saves are wrapped in updateValue and triggered by blur events
+     */
+    const save = React.useCallback(async () => {
+        if (!options) {
+            return true;
+        }
+        // Filter saved
+        if (selectedItem === null) {
+            if (onSelectFilter) {
+                if (!lodashEs.isEmpty(filter)) {
+                    await onSelectFilter({
+                        selectedRows,
+                        selectedRowIds: selectedRows.map((row) => row.id),
+                        value: filter,
+                    });
+                }
+                return true;
             }
-            if (optionsConf !== undefined) {
-                setOptions(optionsConf);
+            else {
+                if (filteredValues && filteredValues.length === 1) {
+                    if (filteredValues[0].subComponent)
+                        return false;
+                    return await selectItemHandler(filteredValues[0].value, null);
+                }
             }
-        })();
-    }, [filter, options, props, selectedRows]);
+            return false;
+        }
+        if (selectedItem.subComponent && !subComponentIsValid.current) {
+            return false;
+        }
+        await selectItemHandler(selectedItem.value, subSelectedValue);
+        return true;
+    }, [
+        filter,
+        filteredValues,
+        onSelectFilter,
+        options,
+        selectItemHandler,
+        selectedItem,
+        selectedRows,
+        subSelectedValue,
+    ]);
+    const { popoverWrapper, gridPopoverOpen } = useGridPopoverHook({
+        className: props.className,
+        invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
+        save,
+        dontSaveOnExternalClick: true,
+    });
+    // Load up options list if it's async function
+    const prevIsOpen = usePrevious(gridPopoverOpen);
+    const prevFilter = usePrevious(filter);
+    React.useEffect(() => {
+        if ((gridPopoverOpen !== prevIsOpen || filter !== prevFilter) && gridPopoverOpen) {
+            let optionsConf = propOptions;
+            void (async () => {
+                if (typeof optionsConf === 'function') {
+                    optionsConf = await optionsConf(selectedRows, filter);
+                }
+                if (optionsConf !== undefined) {
+                    setOptions(optionsConf);
+                }
+            })();
+        }
+    }, [filter, gridPopoverOpen, options, prevFilter, prevIsOpen, propOptions, selectedRows]);
     // Local filtering.
     React.useEffect(() => {
         if (props.filtered == 'local') {
@@ -4076,39 +4151,6 @@ const GridFormDropDown = (props) => {
             void reSearchOnFilterChange();
         }
     }, [filter, props, reSearchOnFilterChange]);
-    /**
-     * Saves are wrapped in updateValue and triggered by blur events
-     */
-    const save = React.useCallback(async () => {
-        if (!options)
-            return true;
-        // Filter saved
-        if (selectedItem === null) {
-            if (props.onSelectFilter) {
-                const { onSelectFilter } = props;
-                await onSelectFilter({ selectedRows, selectedRowIds: selectedRows.map((row) => row.id), value: filter });
-                return true;
-            }
-            else {
-                if (filteredValues && filteredValues.length === 1) {
-                    if (filteredValues[0].subComponent)
-                        return false;
-                    return await selectItemHandler(filteredValues[0].value, null);
-                }
-            }
-            return false;
-        }
-        if (selectedItem.subComponent && !subComponentIsValid.current)
-            return false;
-        await selectItemHandler(selectedItem.value, subSelectedValue);
-        return true;
-    }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
-    const { popoverWrapper } = useGridPopoverHook({
-        className: props.className,
-        invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
-        save,
-        dontSaveOnExternalClick: true,
-    });
     let lastHeader = null;
     let showHeader = null;
     return popoverWrapper(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.filtered && (jsxRuntime.jsxs("div", { className: 'GridFormDropDown-filter', children: [jsxRuntime.jsx(FocusableItem, { className: 'filter-item', onFocus: () => {
@@ -4116,7 +4158,7 @@ const GridFormDropDown = (props) => {
                             setSubSelectedValue(null);
                             subComponentIsValid.current = true;
                         }, children: ({ ref }) => (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [jsxRuntime.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) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.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.trim()) }), props.filterHelpText && isNotEmpty(filter) && (jsxRuntime.jsx(FormError, { error: null, helpText: props.filterHelpText }))] })) }), jsxRuntime.jsx(MenuDivider, {}, `$$divider_filter`)] })), jsxRuntime.jsx(ComponentLoadingWrapper, { loading: !options, className: 'GridFormDropDown-options', children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [options && (lodashEs.isEmpty(options) || (filteredValues && lodashEs.isEmpty(filteredValues))) && (jsxRuntime.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 jsxRuntime.jsx(MenuDivider, {}, `$$divider_${index}`);
@@ -4346,11 +4388,13 @@ const GridFormMultiSelect = (props) => {
             props.invalid(selectedRows, options.filter((o) => o.checked)));
     }, [options, props, selectedRows]);
     const save = React.useCallback(async (selectedRows) => {
-        if (!options || !props.onSave)
+        if (!options || !props.onSave) {
             return true;
+        }
         // Any changes to save?
-        if (initialValues === JSON.stringify(options))
+        if (initialValues === JSON.stringify(options)) {
             return true;
+        }
         return props.onSave({
             selectedRows,
             selectedOptions: options.filter((o) => o.checked),
@@ -4443,8 +4487,9 @@ const FilterInput = (props) => {
         setOptions([...options]);
     }, [filter, headerGroups, options, setOptions]);
     const addCustomFilterValue = React.useCallback(() => {
-        if (!options || !onSelectFilter)
+        if (!options || !onSelectFilter) {
             return;
+        }
         const filterTrimmed = filter.trim();
         if (lodashEs.isEmpty(filterTrimmed)) {
             void triggerSave();
@@ -4453,8 +4498,9 @@ const FilterInput = (props) => {
         const preFilterOptions = JSON.stringify(options);
         onSelectFilter({ filter: filterTrimmed, options });
         // Detect if options list changed and update
-        if (preFilterOptions === JSON.stringify(options))
+        if (preFilterOptions === JSON.stringify(options)) {
             return;
+        }
         setOptions([...options]);
         setFilter('');
     }, [filter, onSelectFilter, options, setFilter, setOptions, triggerSave]);
@@ -5049,6 +5095,7 @@ const GridPopoverMessage = (colDef, props) => GridCell({
     singleClickEdit: true,
 }, {
     editor: GridFormMessage,
+    preventAutoEdit: true,
     ...props,
 });
 
@@ -5064,7 +5111,7 @@ const GridWrapper = ({ children, maxHeight }) => (jsxRuntime.jsx("div", { classN
 const getColId = (colDef) => colDef.colId ?? '';
 const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
 
-const waitForCondition = async (condition, timeoutMs) => {
+const waitForCondition = async (error, condition, timeoutMs) => {
     const endTime = Date.now() + timeoutMs;
     while (Date.now() < endTime) {
         if (condition()) {
@@ -5072,7 +5119,7 @@ const waitForCondition = async (condition, timeoutMs) => {
         }
         await wait(100);
     }
-    console.warn('waitForCondition failed');
+    console.warn(error);
     return false;
 };
 
@@ -5421,8 +5468,7 @@ const GridContextProvider = (props) => {
         startCellEditingInProgressRef.current = true;
         try {
             // Edit in progress so don't edit until finished, timeout waiting after 5s
-            if (!(await waitForCondition(() => !anyUpdating(), 5000))) {
-                console.error("Could not start edit because previous edit hasn't finished after 5 seconds");
+            if (!(await waitForCondition('startCellEditing failed as update still in progress, waited for 15 seconds', () => !anyUpdating(), 15000))) {
                 return;
             }
             const colDef = gridApi.getColumnDef(colId);
@@ -5444,11 +5490,12 @@ const GridContextProvider = (props) => {
             const rowIndex = rowNode.rowIndex;
             if (rowIndex != null) {
                 lodashEs.defer(() => {
-                    !gridApi.isDestroyed() &&
+                    if (!gridApi.isDestroyed()) {
                         gridApi.startEditingCell({
                             rowIndex,
                             colKey: colId,
                         });
+                    }
                 });
             }
         }
@@ -5457,9 +5504,9 @@ const GridContextProvider = (props) => {
         }
     }, [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
     const bulkEditingCompleteCallbackRef = React.useRef();
-    const onBulkEditingComplete = React.useCallback(() => {
+    const onBulkEditingComplete = React.useCallback(async () => {
         resetFocusedCellAfterCellEditing();
-        bulkEditingCompleteCallbackRef.current?.();
+        await bulkEditingCompleteCallbackRef.current?.();
     }, [resetFocusedCellAfterCellEditing]);
     const setOnBulkEditingComplete = React.useCallback((cellEditingCompleteCallback) => {
         bulkEditingCompleteCallbackRef.current = cellEditingCompleteCallback;
@@ -5490,8 +5537,10 @@ const GridContextProvider = (props) => {
             // Prevent resetting focus to original editing cell
             prePopupFocusedCell.current = undefined;
             const preRow = gridApi.getFocusedCell();
+            // If we don't do this ag-grid will do its own continuation of an edit on tab, we don't want that as
+            // we are managing it ourselves
+            gridApi.stopEditing();
             if (tabDirection === 1) {
-                gridApi.stopEditing();
                 gridApi.tabToNextCell();
             }
             else {
@@ -5528,29 +5577,25 @@ const GridContextProvider = (props) => {
                 const selectedRows = props.selectedRows;
                 let ok = false;
                 await modifyUpdating(props.field ?? '', selectedRows.map((data) => data.id), async () => {
-                    // MATT Disabled I don't believe these are needed anymore
-                    // I've left them here just in case they are
                     // Need to refresh to get spinners to work on all rows
-                    // gridApi.refreshCells({ rowNodes: props.selectedRows as RowNode[], force: true });
+                    gridApi.refreshCells({ rowNodes: props.selectedRows, force: true });
                     ok = await fnUpdate(selectedRows).catch((ex) => {
                         console.error('Exception during modifyUpdating', ex);
                         return false;
                     });
                 });
-                // MATT Disabled I don't believe these are needed anymore
-                // I've left them here just in case they are
                 // async processes need to refresh their own rows
-                // gridApi.refreshCells({ rowNodes: selectedRows as RowNode[], force: true });
+                gridApi.refreshCells({ rowNodes: selectedRows, force: true });
                 if (gridApi.isDestroyed()) {
                     return ok;
                 }
                 if (ok) {
-                    const cell = gridApi.getFocusedCell();
-                    if (cell && gridApi.getFocusedCell() == null) {
-                        !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
-                    }
+                    //const cell = gridApi.getFocusedCell();
+                    //if (cell && gridApi.getFocusedCell() == null) {
+                    //  !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
+                    // }
                     // This is needed to trigger postSortRowsHook
-                    gridApi.refreshClientSideRowModel();
+                    !gridApi.isDestroyed && gridApi.refreshClientSideRowModel();
                 }
                 void (async () => {
                     // Only focus next cell if user hasn't already manually changed focus
@@ -5560,11 +5605,11 @@ const GridContextProvider = (props) => {
                         prePopupFocusedCell.current.rowIndex == postPopupFocusedCell.rowIndex &&
                         prePopupFocusedCell.current.column.getColId() == postPopupFocusedCell.column.getColId()) {
                         if (!tabDirection || !(await selectNextEditableCell(tabDirection))) {
-                            onBulkEditingComplete();
+                            await onBulkEditingComplete();
                         }
                     }
                     else {
-                        onBulkEditingComplete();
+                        await onBulkEditingComplete();
                     }
                 })();
                 return ok;
@@ -5789,19 +5834,6 @@ const GridUpdatingContextProvider = (props) => {
 var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton-inProgress .LuiIcon{visibility:hidden}.ActionButton-minimal.lui-button-lg.lui-button-icon-right{padding-right:38px}.ActionButton.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight) .LuiIcon{margin:0 4px}.ActionButton.ActionButton-tight.lui-button-lg.lui-button-icon-right .LuiIcon{margin:0}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right:not(.ActionButton-tight){padding:8px 5px}.ActionButton-iconOnly.lui-button-lg.lui-button-icon-right.ActionButton-tight{padding:0}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress.lui-button-lg.lui-button-icon-right{background-color:#e2f3f7;color:#007198;cursor:progress}.ActionButton-fill{justify-content:center;width:100%}";
 styleInject(css_248z);
 
-/**
- * Track previous values of states.
- *
- * @param value Value to track.
- */
-const usePrevious = (value) => {
-    const ref = React.useRef();
-    React.useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-};
-
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
 const minimumInProgressTimeMs = 950;
 const ActionButton = ({ icon, name, inProgressName, disabled, dataTestId, style, className, title, onClick, size = 'sm', iconPosition = 'left', level = 'tertiary', 'aria-label': ariaLabel, }) => {
@@ -5876,6 +5908,7 @@ const useDeferredPromise = () => {
 };
 
 exports.ActionButton = ActionButton;
+exports.CancelPromise = CancelPromise;
 exports.ComponentLoadingWrapper = ComponentLoadingWrapper;
 exports.ControlledMenu = ControlledMenu;
 exports.Editor = Editor;