@axinom/mosaic-ui 0.52.0-rc.8 → 0.52.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.52.0-rc.8",
+  "version": "0.52.1",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.25-rc.8",
+    "@axinom/mosaic-core": "^0.4.25",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@popperjs/core": "^2.11.8",
@@ -106,5 +106,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f307889eea9c4a4e4f196af828da5549f1a723c8"
+  "gitHead": "ac91e5639b80b0ad2fa95a1df3f2a899afab5b3c"
 }

package/src/components/Explorer/Explorer.tsx

@@ -242,10 +242,9 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     }
   }, [defaultSortOrder, globalStateOptions.sort, sortOrder, stationKey]);
 
-  const onFilterChangedHandler = (filters: FilterValues<T>): void => {
-    onFiltersChange(filters);
+  const onFilterChangedHandler = useCallback(() => {
     listRef.current?.resetSelection();
-  };
+  }, []);
 
   const {
     activeFilters,
@@ -268,14 +267,13 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     hasMoreData,
     onReloadData,
     onRequestMoreData,
-    onFiltersChange,
     onSortChanged,
   } = useDataProvider<T>({
     dataProvider,
     explorerRef,
     setStationMessage,
     defaultSortOrder: sortOrder,
-    filters: activeFilters,
+    activeFilters,
     keyProperty,
   });
 
@@ -355,24 +353,27 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
 
   const errAction = 'An error occurred when trying to execute the operation.';
 
-  const inlineMenuActionsHandler = (data: T): ActionData[] =>
-    (inlineMenuActions?.(data) ?? []).map((action) =>
-      isContextAction(action)
-        ? {
-            ...action,
-            onActionSelected: async () => {
-              try {
-                const result = await action.onActionSelected();
-                if (result) {
-                  setStationMessage(errMsg(result));
+  const inlineMenuActionsHandler = useCallback(
+    (data: T): ActionData[] =>
+      (inlineMenuActions?.(data) ?? []).map((action) =>
+        isContextAction(action)
+          ? {
+              ...action,
+              onActionSelected: async () => {
+                try {
+                  const result = await action.onActionSelected();
+                  if (result) {
+                    setStationMessage(errMsg(result));
+                  }
+                } catch (error) {
+                  setStationMessage(errMsg(error, errAction));
                 }
-              } catch (error) {
-                setStationMessage(errMsg(error, errAction));
-              }
-            },
-          }
-        : action,
-    );
+              },
+            }
+          : action,
+      ),
+    [inlineMenuActions, setStationMessage],
+  );
 
   const { actions: pageHeaderActions } = useActions<T>({
     actions,

package/src/components/Explorer/QuickEdit/useQuickEdit.spec.tsx

@@ -229,7 +229,6 @@ describe('useQuickEdit', () => {
       wrapper.update();
 
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
       mount(
         <ref.current.QuickEditContextProvider>
           <ContextConsumer contextRef={contextRef} />
@@ -249,14 +248,12 @@ describe('useQuickEdit', () => {
       await act(async () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
-
         ref.current.changeSelectedItem({ id: 1 });
       });
 
       wrapper.update();
 
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
       mount(
         <ref.current.QuickEditContextProvider>
           <ContextConsumer contextRef={contextRef} />
@@ -276,14 +273,12 @@ describe('useQuickEdit', () => {
       await act(async () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
-
         ref.current.changeSelectedItem({ id: 1 });
       });
 
       wrapper.update();
 
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
       mount(
         <ref.current.QuickEditContextProvider>
           <ContextConsumer contextRef={contextRef} />
@@ -294,7 +289,6 @@ describe('useQuickEdit', () => {
 
       await act(async () => {
         contextRef.current.registerSaveCallback?.(saveCallbackSpy);
-
         ref.current.changeSelectedItem({ id: 1 });
       });
 
@@ -309,14 +303,12 @@ describe('useQuickEdit', () => {
       await act(async () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
-
         ref.current.changeSelectedItem({ id: 1 });
       });
 
       wrapper.update();
 
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
       mount(
         <ref.current.QuickEditContextProvider>
           <ContextConsumer contextRef={contextRef} />
@@ -327,7 +319,6 @@ describe('useQuickEdit', () => {
 
       await act(async () => {
         contextRef.current.registerSaveCallback?.(saveCallbackSpy);
-
         contextRef.current.refresh?.();
       });
 
@@ -352,7 +343,6 @@ describe('useQuickEdit', () => {
       wrapper.update();
 
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
       mount(
         <ref.current.QuickEditContextProvider>
           <ContextConsumer contextRef={contextRef} />
@@ -381,7 +371,6 @@ describe('useQuickEdit', () => {
       });
 
       wrapper.update();
-
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
 
       mount(
@@ -411,7 +400,6 @@ describe('useQuickEdit', () => {
       wrapper.update();
 
       const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
       mount(
         <ref.current.QuickEditContextProvider>
           <ContextConsumer contextRef={contextRef} />

package/src/components/Explorer/helpers/useDataProvider.tsx

@@ -26,7 +26,6 @@ interface DataProviderReturnType<T> {
   readonly hasMoreData: boolean;
   readonly onReloadData: () => void;
   readonly onSortChanged: (sort: SortData<T>) => void;
-  readonly onFiltersChange: (filters: FilterValues<T>) => void;
   readonly onRequestMoreData: () => void;
 }
 
@@ -39,7 +38,7 @@ interface DataProviderArgumentType<T extends Data> {
   dataProvider: ExplorerDataProvider<T>;
   explorerRef: React.ForwardedRef<ExplorerDataProviderConnection<T>>;
   defaultSortOrder?: SortData<T>;
-  filters?: FilterValues<T>;
+  activeFilters?: FilterValues<T>;
   keyProperty?: keyof T;
   setStationMessage: React.Dispatch<
     React.SetStateAction<StationMessage | undefined>
@@ -51,7 +50,7 @@ export function useDataProvider<T extends Data>({
   explorerRef,
   setStationMessage,
   defaultSortOrder,
-  filters,
+  activeFilters,
   keyProperty,
 }: DataProviderArgumentType<T>): DataProviderReturnType<T> {
   const dataProviderRef = useUpdatingRef(dataProvider);
@@ -67,7 +66,7 @@ export function useDataProvider<T extends Data>({
   const lastAttemptedPagingInfo = useRef<unknown>();
 
   const sorting = useRef<SortData<T> | undefined>(defaultSortOrder);
-  const filterValues = useRef<FilterValues<T>>(filters || {});
+  const filterValues = useRef<FilterValues<T>>(activeFilters || {});
 
   const loadData = useCallback(
     async (
@@ -130,23 +129,22 @@ export function useDataProvider<T extends Data>({
     [dataProviderRef, setStationMessage],
   );
 
-  const onSortChanged = useCallback(
-    (sort: SortData<T>): void => {
+  useEffect(() => {
+    if (activeFilters !== filterValues.current) {
       // Re-enable more data requests
       hasMoreData.current = true;
-      // Set new sorting order.
-      sorting.current = sort;
+      // Set new filters.
+      filterValues.current = activeFilters ?? {};
       loadData();
-    },
-    [loadData],
-  );
+    }
+  }, [activeFilters, loadData]);
 
-  const onFiltersChange = useCallback(
-    (filters: FilterValues<T>): void => {
+  const onSortChanged = useCallback(
+    (sort: SortData<T>): void => {
       // Re-enable more data requests
       hasMoreData.current = true;
-      // Set new filters.
-      filterValues.current = filters;
+      // Set new sorting order.
+      sorting.current = sort;
       loadData();
     },
     [loadData],
@@ -182,7 +180,6 @@ export function useDataProvider<T extends Data>({
     resultCount,
     onReloadData,
     onSortChanged,
-    onFiltersChange,
     onRequestMoreData,
     data,
     hasMoreData: hasMoreData.current,

package/src/components/Explorer/helpers/useFilters.tsx

@@ -67,6 +67,7 @@ export const useFilters = <T extends Data>({
       )}
     </>
   );
+
   return {
     Filters: FilterComponent,
     activeFilters,

package/src/components/FormStation/FormStationContentWrapper/FormStationContentWrapper.scss

@@ -21,7 +21,7 @@
       grid: 1fr / 1fr;
 
       &.hasMessage {
-        grid: min-content 1fr / 1fr;
+        grid: min-content 1fr / minmax(740px, 1fr);
       }
     }
   }

package/src/components/FormStation/SaveOnDemand/SaveOnDemand.tsx

@@ -1,5 +1,5 @@
 import { useFormikContext } from 'formik';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 interface SaveOnDemandProps {
   /** If set to true, will prevent form submission when navigating away. (default: false) */
@@ -16,7 +16,7 @@ export const SaveOnDemand: React.FC<SaveOnDemandProps> = ({
   registerSaveCallback,
 }) => {
   const { submitForm, dirty, isValid } = useFormikContext();
-  const [canSubmit, setCanSubmit] = useState<boolean>(true);
+  const canSubmit = useRef(true);
 
   useEffect(() => {
     const saveCallback = async (): Promise<void> => {
@@ -30,12 +30,13 @@ export const SaveOnDemand: React.FC<SaveOnDemandProps> = ({
       }
 
       try {
-        if (!isSubmitting && canSubmit) {
-          setCanSubmit(false);
+        if (!isSubmitting && canSubmit.current) {
+          canSubmit.current = false;
           await submitForm();
+          canSubmit.current = true;
         }
       } catch (error) {
-        setCanSubmit(true);
+        canSubmit.current = true;
         throw error;
       }
     };