@linzjs/step-ag-grid 29.1.3 → 29.1.4

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

@@ -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');
@@ -3995,6 +4008,7 @@ const useGridPopoverHook = ({ className, save, invalid, dontSaveOnExternalClick,
     return {
         popoverWrapper,
         triggerSave,
+        gridPopoverOpen: isOpen,
     };
 };
 
@@ -4015,6 +4029,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] = useState(props.filterDefaultValue ?? '');
     const [filteredValues, setFilteredValues] = useState();
@@ -4028,8 +4043,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 +4056,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 +4085,70 @@ 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]);
-    const { popoverWrapper } = useGridPopoverHook({
+    }, [
+        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);
+    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.
+    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]);
     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 +5832,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, }) => {