@linzjs/step-ag-grid 29.1.3 → 29.1.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "29.1.3",
+  "version": "29.1.5",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,10 +1,11 @@
 import debounce from 'debounce-promise';
-import { isEmpty } from 'lodash-es';
+import { compact, isEmpty } from 'lodash-es';
 import { Fragment, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { FormError } from '../../lui/FormError';
+import { usePrevious } from '../../lui/reactUtils';
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from '../../react-menu3';
 import { ClickEvent } from '../../react-menu3/types';
 import { textMatch } from '../../utils/textMatcher';
@@ -84,11 +85,14 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
   props: GridFormDropDownProps<TData, TOptionValue>,
 ) => {
   const { selectedRows, field, data } = useGridPopoverContext<TData>();
+  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<any[]>();
-  const [options, setOptions] = useState<FinalSelectOption<TOptionValue>[] | null>(null);
+  const [options, setOptions] = useState<FinalSelectOption<TOptionValue>[] | null>(
+    !!propOptions && typeof propOptions !== 'function' ? propOptions : null,
+  );
   const subComponentIsValid = useRef(false);
   const subComponentInitialValue = useRef<string | null>(null);
   const [subSelectedValue, setSubSelectedValue] = useState<any>(null);
@@ -101,8 +105,8 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
         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,
@@ -114,70 +118,20 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
       }
       return true;
     },
-    [field, props, selectedRows],
+    [field, onSelectedItem, 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 as string) || '', filter) ? option : undefined;
-          })
-          .filter((r) => r !== undefined),
-      );
-    }
-  }, [props.filtered, filter, options]);
-
-  const reSearchOnFilterChange = useMemo(
-    () =>
-      debounce(() => {
-        setOptions(null);
-      }, 500),
-    [],
-  );
-
-  const previousFilter = useRef<string>(filter);
-
-  // Reload filtering.
-  useEffect(() => {
-    if (previousFilter.current != filter && props.filtered == 'reload') {
-      previousFilter.current = filter;
-      void reSearchOnFilterChange();
-    }
-  }, [filter, props, reSearchOnFilterChange]);
-
   /**
    * Saves are wrapped in updateValue and triggered by blur events
    */
   const save = useCallback(async () => {
-    if (!options) return true;
+    if (!options) {
+      return true;
+    }
 
     // Filter saved
     if (selectedItem === null) {
-      if (props.onSelectFilter) {
-        const { onSelectFilter } = props;
+      if (onSelectFilter) {
         if (!isEmpty(filter)) {
           await onSelectFilter({
             selectedRows,
@@ -195,11 +149,22 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
       }
       return false;
     }
-    if (selectedItem.subComponent && !subComponentIsValid.current) return false;
+    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,
@@ -208,6 +173,67 @@ export const GridFormDropDown = <TData extends GridBaseRow, TOptionValue>(
     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 as string) || '', 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: ReactElement | null = null;
   let showHeader: ReactElement | null = null;
 

package/src/stories/grid/gridFormInteraction/GridFormEditBearingCorrectionInteraction.stories.tsx

@@ -9,7 +9,6 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  CancelPromise,
   GridContextProvider,
   GridFormEditBearing,
   GridFormEditBearingProps,