@linzjs/step-ag-grid 29.1.3 → 29.1.5

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

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiStatusSpinner, LuiIcon, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
 import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, pull, compact, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
+import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, omit, sortBy, delay, partition, compact, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
 import React, { useRef, useLayoutEffect, useEffect, createContext, useContext, useState, useMemo, memo, forwardRef, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1, useId } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 
@@ -3799,6 +3799,19 @@ const FormError = (props) => {
     return (jsxs(Fragment, { children: [props.error && (jsxs("div", { className: "FormError", children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "FormError-text-icon", size: "sm", status: "error" }), jsx("span", { className: "FormError-error", children: props.error })] })), props.helpText && !props.error && jsx("span", { className: 'FormError-helpText', children: props.helpText })] }));
 };
 
+/**
+ * Track previous values of states.
+ *
+ * @param value Value to track.
+ */
+const usePrevious = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {
 		throw new TypeError('Expected a string');
@@ -4015,10 +4028,11 @@ 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] = useState(props.filterDefaultValue ?? '');
     const [filteredValues, setFilteredValues] = useState();
-    const [options, setOptions] = useState(null);
+    const [options, setOptions] = useState(!!propOptions && typeof propOptions !== 'function' ? propOptions : null);
     const subComponentIsValid = useRef(false);
     const subComponentInitialValue = useRef(null);
     const [subSelectedValue, setSubSelectedValue] = useState(null);
@@ -4028,8 +4042,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,
@@ -4041,58 +4055,17 @@ const GridFormDropDown = (props) => {
             }
         }
         return true;
-    }, [field, props, selectedRows]);
-    // Load up options list if it's async function
-    useEffect(() => {
-        if (options)
-            return;
-        let optionsConf = props.options;
-        void (async () => {
-            if (typeof optionsConf === 'function') {
-                optionsConf = await optionsConf(selectedRows, filter);
-            }
-            if (optionsConf !== undefined) {
-                setOptions(optionsConf);
-            }
-        })();
-    }, [filter, options, props, selectedRows]);
-    // Local filtering.
-    useEffect(() => {
-        if (props.filtered == 'local') {
-            if (options == null)
-                return;
-            setFilteredValues(options
-                .map((option) => {
-                if (option.label != null && typeof option.label !== 'string') {
-                    console.error('Cannot filter non-string labels', option);
-                    return undefined;
-                }
-                return textMatch(option.label || '', filter) ? option : undefined;
-            })
-                .filter((r) => r !== undefined));
-        }
-    }, [props.filtered, filter, options]);
-    const reSearchOnFilterChange = useMemo(() => debounce(() => {
-        setOptions(null);
-    }, 500), []);
-    const previousFilter = useRef(filter);
-    // Reload filtering.
-    useEffect(() => {
-        if (previousFilter.current != filter && props.filtered == 'reload') {
-            previousFilter.current = filter;
-            void reSearchOnFilterChange();
-        }
-    }, [filter, props, reSearchOnFilterChange]);
+    }, [field, onSelectedItem, selectedRows]);
     /**
      * Saves are wrapped in updateValue and triggered by blur events
      */
     const save = useCallback(async () => {
-        if (!options)
+        if (!options) {
             return true;
+        }
         // Filter saved
         if (selectedItem === null) {
-            if (props.onSelectFilter) {
-                const { onSelectFilter } = props;
+            if (onSelectFilter) {
                 if (!isEmpty(filter)) {
                     await onSelectFilter({
                         selectedRows,
@@ -4111,17 +4084,73 @@ const GridFormDropDown = (props) => {
             }
             return false;
         }
-        if (selectedItem.subComponent && !subComponentIsValid.current)
+        if (selectedItem.subComponent && !subComponentIsValid.current) {
             return false;
+        }
         await selectItemHandler(selectedItem.value, subSelectedValue);
         return true;
-    }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
+    }, [
+        filter,
+        filteredValues,
+        onSelectFilter,
+        options,
+        selectItemHandler,
+        selectedItem,
+        selectedRows,
+        subSelectedValue,
+    ]);
     const { popoverWrapper } = useGridPopoverHook({
         className: props.className,
         invalid: () => !options || !!(selectedItem && !subComponentIsValid.current),
         save,
         dontSaveOnExternalClick: true,
     });
+    // Load up options list if it's async function
+    useEffect(() => {
+        // If options is null then we need to load/reload
+        // Options will be set to null during a reload based filter, or on open popup
+        if (options !== null) {
+            return;
+        }
+        // propOptions is a const list
+        if (typeof propOptions !== 'function') {
+            if (propOptions) {
+                setOptions(propOptions);
+            }
+            return;
+        }
+        // propOptions is function, probably loading from web
+        void (async () => {
+            const r = await propOptions(selectedRows, filter);
+            setOptions(r ?? []);
+        })();
+    }, [filter, options, propOptions, selectedRows]);
+    // Local filtering.
+    useEffect(() => {
+        if (props.filtered !== 'local') {
+            return;
+        }
+        if (options == null) {
+            setFilteredValues([]);
+            return;
+        }
+        setFilteredValues(compact(options.map((option) => {
+            if (option.label != null && typeof option.label !== 'string') {
+                console.warn('GridFormDropDown: Cannot filter non-string labels', option);
+                return undefined;
+            }
+            return textMatch(option.label || '', filter) ? option : undefined;
+        })));
+    }, [props.filtered, filter, options]);
+    const reSearchOnFilterChange = useMemo(() => debounce(() => {
+        setOptions(null);
+    }, 500), []);
+    const previousFilter = usePrevious(filter);
+    useEffect(() => {
+        if (previousFilter != null && previousFilter != filter && props.filtered === 'reload') {
+            void reSearchOnFilterChange();
+        }
+    }, [filter, previousFilter, props.filtered, reSearchOnFilterChange]);
     let lastHeader = null;
     let showHeader = null;
     return popoverWrapper(jsxs(Fragment, { children: [props.filtered && (jsxs("div", { className: 'GridFormDropDown-filter', children: [jsx(FocusableItem, { className: 'filter-item', onFocus: () => {
@@ -5805,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 = useRef();
-    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, }) => {