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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.52.0-rc.8",
+  "version": "0.52.0",
   "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": "12200181d99bdf8e61f30597d113489b172c8a17"
 }

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,22 +267,20 @@ 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,
   });
 
   const {
     isQuickEditMode,
     quickEditAction,
-    QuickEditContextProvider,
-    quickEditStation,
+    QuickEditComponent,
     changeSelectedItem,
   } = useQuickEdit({
     listRef,
@@ -456,9 +453,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
           />
         </div>
       </div>
-      {isQuickEditMode && (
-        <QuickEditContextProvider>{quickEditStation}</QuickEditContextProvider>
-      )}
+      {QuickEditComponent}
     </ConditionalSplit>
   );
 });

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

@@ -143,7 +143,9 @@ describe('useQuickEdit', () => {
 
     wrapper.update();
 
-    expect(ref.current.quickEditStation).toBe(mockRegistrations[0].component);
+    expect(ref.current.QuickEditComponent.props.children).toBe(
+      mockRegistrations[0].component,
+    );
   });
 
   it('should update the registration when a registration action is clicked', async () => {
@@ -163,7 +165,9 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction.actions[1].onClick?.();
     });
 
-    expect(ref.current.quickEditStation).toBe(mockRegistrations[1].component);
+    expect(ref.current.QuickEditComponent.props.children).toBe(
+      mockRegistrations[1].component,
+    );
   });
 
   it('should disable the quickEditAction when there is no data', () => {
@@ -216,8 +220,18 @@ describe('useQuickEdit', () => {
   });
 
   describe('QuickEditContextProvider', () => {
+    const { ContextConsumer, ref: contextRef } = getContextConsumer();
+
+    const props: useQuickEditProps<any> = {
+      ...defaultProps,
+      registrations: mockRegistrations.map((registration) => ({
+        ...registration,
+        component: <ContextConsumer contextRef={contextRef} />,
+      })),
+    };
+
     it('should select the default item when quick edit is opened', async () => {
-      const { TestWrapper, ref } = getTestWrapper(defaultProps);
+      const { TestWrapper, ref } = getTestWrapper(props);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -228,13 +242,7 @@ describe('useQuickEdit', () => {
 
       wrapper.update();
 
-      const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
-      mount(
-        <ref.current.QuickEditContextProvider>
-          <ContextConsumer contextRef={contextRef} />
-        </ref.current.QuickEditContextProvider>,
-      );
+      mount(<>{ref.current.QuickEditComponent}</>);
 
       expect(contextRef.current.isQuickEditMode).toBe(true);
       expect(contextRef.current.selectedItem).toEqual({ id: 0 });
@@ -242,26 +250,19 @@ describe('useQuickEdit', () => {
     });
 
     it('should provide the correct context values', async () => {
-      const { TestWrapper, ref } = getTestWrapper(defaultProps);
+      const { TestWrapper, ref } = getTestWrapper(props);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
       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} />
-        </ref.current.QuickEditContextProvider>,
-      );
+      mount(<>{ref.current.QuickEditComponent}</>);
 
       expect(contextRef.current.isQuickEditMode).toBe(true);
       expect(contextRef.current.selectedItem).toEqual({ id: 1 });
@@ -269,32 +270,24 @@ describe('useQuickEdit', () => {
     });
 
     it('should call the save callback when changeSelectedItem is called', async () => {
-      const { TestWrapper, ref } = getTestWrapper(defaultProps);
+      const { TestWrapper, ref } = getTestWrapper(props);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
       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} />
-        </ref.current.QuickEditContextProvider>,
-      );
+      mount(<>{ref.current.QuickEditComponent}</>);
 
       const saveCallbackSpy = jest.fn();
 
       await act(async () => {
         contextRef.current.registerSaveCallback?.(saveCallbackSpy);
-
         ref.current.changeSelectedItem({ id: 1 });
       });
 
@@ -302,32 +295,23 @@ describe('useQuickEdit', () => {
     });
 
     it('should call the save callback when refresh is called', async () => {
-      const { TestWrapper, ref } = getTestWrapper(defaultProps);
+      const { TestWrapper, ref } = getTestWrapper(props);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
       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} />
-        </ref.current.QuickEditContextProvider>,
-      );
+      mount(<>{ref.current.QuickEditComponent}</>);
 
       const saveCallbackSpy = jest.fn();
 
       await act(async () => {
         contextRef.current.registerSaveCallback?.(saveCallbackSpy);
-
         contextRef.current.refresh?.();
       });
 
@@ -335,10 +319,7 @@ describe('useQuickEdit', () => {
     });
 
     it('should generate the correct details link using registration if provided', async () => {
-      const { TestWrapper, ref } = getTestWrapper({
-        ...defaultProps,
-        registrations: [mockRegistrations[1]],
-      });
+      const { TestWrapper, ref } = getTestWrapper(props);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -346,28 +327,22 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
 
-        ref.current.changeSelectedItem({ id: 1 });
+        ref.current.quickEditAction?.kind === 'group' &&
+          ref.current.quickEditAction.actions[1].onClick?.();
       });
 
-      wrapper.update();
+      mount(<>{ref.current.QuickEditComponent}</>);
 
-      const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
-      mount(
-        <ref.current.QuickEditContextProvider>
-          <ContextConsumer contextRef={contextRef} />
-        </ref.current.QuickEditContextProvider>,
-      );
+      wrapper.update();
 
-      expect(contextRef.current.detailsLink).toBe('/test?{"id":1}');
+      expect(contextRef.current.detailsLink).toBe('/test?{"id":0}');
     });
 
     it('should generate the correct details link using generateItemLink prop if not provided in registration', async () => {
       const generateDetailsLinkSpy = jest.fn();
 
       const { TestWrapper, ref } = getTestWrapper({
-        ...defaultProps,
-        registrations: [mockRegistrations[2]],
+        ...props,
         generateItemLink: generateDetailsLinkSpy,
       });
 
@@ -377,26 +352,23 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
 
-        ref.current.changeSelectedItem({ id: 1 });
+        ref.current.quickEditAction?.kind === 'group' &&
+          ref.current.quickEditAction.actions[2].onClick?.();
       });
 
-      wrapper.update();
-
-      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+      await wrapper.update();
 
-      mount(
-        <ref.current.QuickEditContextProvider>
-          <ContextConsumer contextRef={contextRef} />
-        </ref.current.QuickEditContextProvider>,
-      );
+      mount(<>{ref.current.QuickEditComponent}</>);
 
-      expect(generateDetailsLinkSpy).toHaveBeenCalledWith({ id: 1 });
+      expect(generateDetailsLinkSpy).toHaveBeenCalledWith({ id: 0 });
     });
 
     it('should not generate a details link if generateDetailsLink in registration is false', async () => {
+      const generateDetailsLinkSpy = jest.fn();
+
       const { TestWrapper, ref } = getTestWrapper({
-        ...defaultProps,
-        registrations: [mockRegistrations[3]],
+        ...props,
+        generateItemLink: generateDetailsLinkSpy,
       });
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
@@ -405,19 +377,15 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
 
-        ref.current.changeSelectedItem({ id: 1 });
+        ref.current.quickEditAction?.kind === 'group' &&
+          ref.current.quickEditAction.actions[3].onClick?.();
       });
 
       wrapper.update();
 
-      const { ContextConsumer, ref: contextRef } = getContextConsumer();
-
-      mount(
-        <ref.current.QuickEditContextProvider>
-          <ContextConsumer contextRef={contextRef} />
-        </ref.current.QuickEditContextProvider>,
-      );
+      mount(<>{ref.current.QuickEditComponent}</>);
 
+      expect(generateDetailsLinkSpy).not.toHaveBeenCalled();
       expect(contextRef.current.detailsLink).toBeUndefined();
     });
   });

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

@@ -22,8 +22,7 @@ export interface useQuickEditProps<T extends Data> {
 export interface useQuickEditReturnType<T extends Data> {
   readonly isQuickEditMode: boolean;
   readonly quickEditAction?: PageHeaderActionItemProps;
-  readonly QuickEditContextProvider: React.FC;
-  readonly quickEditStation: JSX.Element | undefined;
+  readonly QuickEditComponent: JSX.Element;
   readonly changeSelectedItem: (
     item: T,
     detailsLink?: LocationDescriptor<unknown>,
@@ -77,8 +76,8 @@ export const useQuickEdit = <T extends Data>({
     [],
   );
 
-  const QuickEditContextProvider: React.FC = useCallback(
-    ({ children }) => {
+  const QuickEditComponent: JSX.Element = useMemo(() => {
+    if (isQuickEditMode) {
       return (
         <QuickEditContext.Provider
           value={{
@@ -94,12 +93,19 @@ export const useQuickEdit = <T extends Data>({
             },
           }}
         >
-          {children}
+          {currentRegistration?.component}
         </QuickEditContext.Provider>
       );
-    },
-    [detailsLink, isQuickEditMode, registerSaveCallback, selectedItem],
-  );
+    } else {
+      return <></>;
+    }
+  }, [
+    currentRegistration?.component,
+    detailsLink,
+    isQuickEditMode,
+    registerSaveCallback,
+    selectedItem,
+  ]);
 
   const quickEditAction: PageHeaderActionItemProps | undefined = useMemo(
     () =>
@@ -162,8 +168,7 @@ export const useQuickEdit = <T extends Data>({
   return {
     isQuickEditMode,
     quickEditAction,
-    QuickEditContextProvider,
-    quickEditStation: currentRegistration?.component,
+    QuickEditComponent,
     changeSelectedItem,
   };
 };

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);
       }
     }
   }