@axinom/mosaic-ui 0.53.0-rc.2 → 0.53.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.53.0-rc.2",
+  "version": "0.53.0-rc.3",
   "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.26-rc.2",
+    "@axinom/mosaic-core": "^0.4.26-rc.3",
     "@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": "d17a51ac5480846ee3f20e8f6a55f7cb346a0712"
+  "gitHead": "cf0e508e30ba905682e1952986d4acf5d17fb052"
 }

package/src/components/Explorer/Explorer.tsx

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

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

@@ -143,9 +143,7 @@ describe('useQuickEdit', () => {
 
     wrapper.update();
 
-    expect(ref.current.QuickEditComponent.props.children).toBe(
-      mockRegistrations[0].component,
-    );
+    expect(ref.current.quickEditStation).toBe(mockRegistrations[0].component);
   });
 
   it('should update the registration when a registration action is clicked', async () => {
@@ -165,9 +163,7 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction.actions[1].onClick?.();
     });
 
-    expect(ref.current.QuickEditComponent.props.children).toBe(
-      mockRegistrations[1].component,
-    );
+    expect(ref.current.quickEditStation).toBe(mockRegistrations[1].component);
   });
 
   it('should disable the quickEditAction when there is no data', () => {
@@ -220,18 +216,8 @@ 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(props);
+      const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -242,7 +228,12 @@ describe('useQuickEdit', () => {
 
       wrapper.update();
 
-      mount(<>{ref.current.QuickEditComponent}</>);
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
 
       expect(contextRef.current.isQuickEditMode).toBe(true);
       expect(contextRef.current.selectedItem).toEqual({ id: 0 });
@@ -250,7 +241,7 @@ describe('useQuickEdit', () => {
     });
 
     it('should provide the correct context values', async () => {
-      const { TestWrapper, ref } = getTestWrapper(props);
+      const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -262,7 +253,12 @@ describe('useQuickEdit', () => {
 
       wrapper.update();
 
-      mount(<>{ref.current.QuickEditComponent}</>);
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
 
       expect(contextRef.current.isQuickEditMode).toBe(true);
       expect(contextRef.current.selectedItem).toEqual({ id: 1 });
@@ -270,7 +266,7 @@ describe('useQuickEdit', () => {
     });
 
     it('should call the save callback when changeSelectedItem is called', async () => {
-      const { TestWrapper, ref } = getTestWrapper(props);
+      const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -282,7 +278,12 @@ describe('useQuickEdit', () => {
 
       wrapper.update();
 
-      mount(<>{ref.current.QuickEditComponent}</>);
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
 
       const saveCallbackSpy = jest.fn();
 
@@ -295,18 +296,24 @@ describe('useQuickEdit', () => {
     });
 
     it('should call the save callback when refresh is called', async () => {
-      const { TestWrapper, ref } = getTestWrapper(props);
+      const { TestWrapper, ref } = getTestWrapper(defaultProps);
 
       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();
 
-      mount(<>{ref.current.QuickEditComponent}</>);
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
 
       const saveCallbackSpy = jest.fn();
 
@@ -319,7 +326,10 @@ describe('useQuickEdit', () => {
     });
 
     it('should generate the correct details link using registration if provided', async () => {
-      const { TestWrapper, ref } = getTestWrapper(props);
+      const { TestWrapper, ref } = getTestWrapper({
+        ...defaultProps,
+        registrations: [mockRegistrations[1]],
+      });
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
 
@@ -327,22 +337,27 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
 
-        ref.current.quickEditAction?.kind === 'group' &&
-          ref.current.quickEditAction.actions[1].onClick?.();
+        ref.current.changeSelectedItem({ id: 1 });
       });
 
-      mount(<>{ref.current.QuickEditComponent}</>);
-
       wrapper.update();
 
-      expect(contextRef.current.detailsLink).toBe('/test?{"id":0}');
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
+
+      expect(contextRef.current.detailsLink).toBe('/test?{"id":1}');
     });
 
     it('should generate the correct details link using generateItemLink prop if not provided in registration', async () => {
       const generateDetailsLinkSpy = jest.fn();
 
       const { TestWrapper, ref } = getTestWrapper({
-        ...props,
+        ...defaultProps,
+        registrations: [mockRegistrations[2]],
         generateItemLink: generateDetailsLinkSpy,
       });
 
@@ -352,23 +367,25 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
 
-        ref.current.quickEditAction?.kind === 'group' &&
-          ref.current.quickEditAction.actions[2].onClick?.();
+        ref.current.changeSelectedItem({ id: 1 });
       });
 
-      await wrapper.update();
+      wrapper.update();
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
 
-      mount(<>{ref.current.QuickEditComponent}</>);
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
 
-      expect(generateDetailsLinkSpy).toHaveBeenCalledWith({ id: 0 });
+      expect(generateDetailsLinkSpy).toHaveBeenCalledWith({ id: 1 });
     });
 
     it('should not generate a details link if generateDetailsLink in registration is false', async () => {
-      const generateDetailsLinkSpy = jest.fn();
-
       const { TestWrapper, ref } = getTestWrapper({
-        ...props,
-        generateItemLink: generateDetailsLinkSpy,
+        ...defaultProps,
+        registrations: [mockRegistrations[3]],
       });
 
       const wrapper = mount(<TestWrapper quickEditValuesRef={ref} />);
@@ -377,15 +394,18 @@ describe('useQuickEdit', () => {
         ref.current.quickEditAction?.kind === 'group' &&
           (await ref.current.quickEditAction?.onActionsGroupToggled?.(true));
 
-        ref.current.quickEditAction?.kind === 'group' &&
-          ref.current.quickEditAction.actions[3].onClick?.();
+        ref.current.changeSelectedItem({ id: 1 });
       });
 
       wrapper.update();
 
-      mount(<>{ref.current.QuickEditComponent}</>);
+      const { ContextConsumer, ref: contextRef } = getContextConsumer();
+      mount(
+        <ref.current.QuickEditContextProvider>
+          <ContextConsumer contextRef={contextRef} />
+        </ref.current.QuickEditContextProvider>,
+      );
 
-      expect(generateDetailsLinkSpy).not.toHaveBeenCalled();
       expect(contextRef.current.detailsLink).toBeUndefined();
     });
   });

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

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