@griddo/ax 1.74.29 → 1.74.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.74.29",
+  "version": "1.74.31",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -229,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "99bb983ffd06c3728640e8373d5a8615d530d92e"
+  "gitHead": "96e2675183aa8af789eaa4550873f174787023e3"
 }

package/src/__tests__/components/ResizePanel/ResizePanel.test.tsx

@@ -22,7 +22,7 @@ jest.mock("react", () => {
 const useMockRef = useRef as jest.MockedFunction<typeof useRef>;
 
 describe("ResizePanel component rendering", () => {
-  it("should render the component with 2 panels", () => {
+  it("should render the component with fixed panel", () => {
     const defaultProps: IResizePanelProps = {
       leftPanel: <div>Left Panel</div>,
       rightPanel: <div>Right Panel</div>,
@@ -37,13 +37,15 @@ describe("ResizePanel component rendering", () => {
       </ThemeProvider>
     );
 
-    const leftPanel = screen.getByTestId("left-panel-fixed");
+    const leftPanel = screen.getByTestId("left-panel");
     expect(leftPanel).toBeTruthy();
+    const fixedPanel = screen.getByTestId("fixed-panel");
+    expect(fixedPanel).toBeTruthy();
     const rightPanel = screen.getByTestId("right-panel");
     expect(rightPanel).toBeTruthy();
   });
 
-  it("should render the component with 2 panels if left if not fixed", () => {
+  it("should render the component with without fixed panel", () => {
     const defaultProps: IResizePanelProps = {
       leftPanel: <div>Left Panel</div>,
       rightPanel: <div>Right Panel</div>,
@@ -61,50 +63,14 @@ describe("ResizePanel component rendering", () => {
 
     const leftPanel = screen.getByTestId("left-panel");
     expect(leftPanel).toBeTruthy();
+    const fixedPanel = screen.queryByTestId("fixed-panel");
+    expect(fixedPanel).toBeFalsy();
     const rightPanel = screen.getByTestId("right-panel");
     expect(rightPanel).toBeTruthy();
   });
 });
 
 describe("ResizePanel mouse events", () => {
-  it("fixed panel changes position on scroll", () => {
-    const defaultProps: IResizePanelProps = {
-      leftPanel: <div>Left Panel</div>,
-      rightPanel: <div>Right Panel</div>,
-      fixed: true,
-    };
-
-    const scroll = 100;
-
-    const rightPanelRef = { current: {} };
-    Object.defineProperty(rightPanelRef, "current", {
-      set(_current) {
-        if (_current) {
-          jest.spyOn(_current, "offsetWidth", "get").mockReturnValueOnce(350);
-        }
-        this._current = _current;
-      },
-      get() {
-        return this._current;
-      },
-    });
-    useMockRef.mockReturnValue(rightPanelRef);
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <ResizePanel {...defaultProps} />
-      </ThemeProvider>
-    );
-
-    const fixedPanel = screen.getByTestId("fixed-panel");
-    expect(fixedPanel).toBeTruthy();
-
-    fireEvent.scroll(window, { target: { scrollX: scroll } });
-    const leftPosition = getComputedStyle(fixedPanel).left;
-
-    expect(leftPosition).toBe(`calc(24px - ${scroll}px)`);
-  });
-
   it("right panel should change width if handle moves past its width", () => {
     const defaultProps: IResizePanelProps = {
       leftPanel: <div>Left Panel</div>,

package/src/components/ConfigPanel/style.tsx

@@ -1,5 +1,7 @@
 import styled from "styled-components";
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  width: 100%;
+`;
 
 export { Wrapper };

package/src/components/Fields/ReferenceField/index.tsx

@@ -33,6 +33,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
     resetValidation,
     handleValidation,
     mandatory,
+    editorID,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
@@ -102,7 +103,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
       isMounted = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [editorID]);
 
   const handleAddItems = () => {
     toggleModal();
@@ -230,6 +231,7 @@ export interface IReferenceFieldProps {
   resetValidation?: () => void;
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
   mandatory: boolean;
+  editorID: number;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/ResizePanel/ResizeHandle/index.tsx

@@ -3,8 +3,6 @@ import React from "react";
 import * as S from "./style";
 
 const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
-  const { left } = props;
-
   const initListeners = () => {
     window.addEventListener("mousemove", handleResize, false);
     window.addEventListener("mouseup", handleMouseUp, false);
@@ -26,16 +24,11 @@ const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
     onMouseMove(newWidth);
   };
 
-  return (
-    <S.HandlerWrapper>
-      <S.Handler onMouseDown={handleMouseDown} left={left ? left : 0} data-testid="handler" />
-    </S.HandlerWrapper>
-  );
+  return <S.Handler onMouseDown={handleMouseDown} data-testid="handler" />;
 };
 
 export interface IResizeHandleProps {
   onMouseMove: (value: number) => void;
-  left?: number;
 }
 
 export default ResizeHandle;

package/src/components/ResizePanel/ResizeHandle/style.tsx

@@ -1,22 +1,17 @@
 import styled from "styled-components";
 
-export const HandlerWrapper = styled.div`
-  width: 4px;
-  height: 100%;
-  position: fixed;
-`;
-
-export const Handler = styled.div<{ left: number }>`
-  position: absolute;
-  top: calc(50% - 64px);
-  left: -16px;
+const Handler = styled.div`
+  position: sticky;
+  top: 50%;
   height: 64px;
   width: 4px;
-  background-color: ${p => p.theme.color.interactiveDisabled};
+  background-color: ${(p) => p.theme.color.interactiveDisabled};
   cursor: ew-resize;
-  transform: translate(-${p => p.left}px,-50%);
   z-index: 1;
+  transform: translateX(${(p) => `-${p.theme.spacing.s}`});
   &:hover {
-    background-color: ${p => p.theme.color.interactive01};
+    background-color: ${(p) => p.theme.color.interactive01};
   }
 `;
+
+export { Handler };

package/src/components/ResizePanel/index.tsx

@@ -7,7 +7,6 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
   const { leftPanel, rightPanel, fixed = true } = props;
 
   const [rwidth, setRwidth] = useState(0);
-  const [scroll, setScroll] = useState(0);
 
   const rightPanelRef = useRef<HTMLDivElement>(null);
 
@@ -15,12 +14,6 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
     if (rightPanelRef.current) {
       setRwidth(rightPanelRef.current.offsetWidth);
     }
-
-    const handleScroll = () => {
-      setScroll(window.scrollX);
-    };
-
-    window.addEventListener("scroll", handleScroll);
   }, [rightPanelRef]);
 
   const resize = (value: number) => {
@@ -31,17 +24,17 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 
   return (
     <>
-      {fixed ? (
-        <S.LeftPanel data-testid="left-panel-fixed">
-          <S.FixedPanel width={rwidth} left={scroll} data-testid="fixed-panel">
+      <S.LeftPanel data-testid="left-panel">
+        {fixed ? (
+          <S.FixedPanel width={rwidth} data-testid="fixed-panel">
             {leftPanel}
           </S.FixedPanel>
-        </S.LeftPanel>
-      ) : (
-        <S.LeftPanel data-testid="left-panel">{leftPanel}</S.LeftPanel>
-      )}
+        ) : (
+          leftPanel
+        )}
+      </S.LeftPanel>
       <S.RightPanel width={rwidth} ref={rightPanelRef} data-testid="right-panel">
-        <ResizeHandle left={scroll} onMouseMove={resize} />
+        <ResizeHandle onMouseMove={resize} />
         {rightPanel}
       </S.RightPanel>
     </>

package/src/components/ResizePanel/style.tsx

@@ -1,16 +1,19 @@
 import styled from "styled-components";
 
 const getWidth = (width: number, space: string) => {
-  const minWidth = 1280 - width - (parseInt(space) * 2);
+  const minWidth = 1280 - width - parseInt(space) * 2;
   return minWidth < 500 ? `500px` : `${minWidth}px`;
 };
 
 export const LeftPanel = styled.section`
+  position: relative;
   flex-grow: 1;
   min-width: 500px;
 `;
 
 export const RightPanel = styled.section<{ width: number }>`
+  display: flex;
+  position: relative;
   padding: ${(p) => p.theme.spacing.m};
   flex-shrink: 0;
   width: ${(p) => p.width}px;
@@ -18,12 +21,13 @@ export const RightPanel = styled.section<{ width: number }>`
   max-width: ${(p) => `calc(100% - 500px - ${p.theme.spacing.m})`};
 `;
 
-export const FixedPanel = styled.div<{ width: number; left: number }>`
-  position: fixed;
+export const FixedPanel = styled.div<{ width: number }>`
+  position: sticky;
   top: calc(${(p) => p.theme.spacing.xl} + ${(p) => p.theme.spacing.m});
-  left: ${(p) => `calc(${p.theme.spacing.m} - ${p.left}px)`};
-  height: calc(100vh - (${(p) => p.theme.spacing.xl} + (${(p) => p.theme.spacing.m} * 2)) - (${(p) => p.theme.spacing.m} + (${(p) => p.theme.spacing.xs} * 2)));
-  min-width: ${(p) => getWidth(p.width,p.theme.spacing.m)};
-  max-width: calc(100% - (${(p) => p.theme.spacing.xl} * 5) - (${(p) => p.theme.spacing.m} * 2));
-  width: calc(100% - ${(p) => p.width}px - ${(p) => p.theme.spacing.m});
+  height: calc(
+    100vh - (${(p) => p.theme.spacing.xl} + (${(p) => p.theme.spacing.m} * 2)) -
+      (${(p) => p.theme.spacing.m} + (${(p) => p.theme.spacing.xs} * 2))
+  );
+  min-width: ${(p) => getWidth(p.width, p.theme.spacing.m)};
+  margin-left: ${(p) => p.theme.spacing.m};
 `;

package/src/components/SearchField/index.tsx

@@ -13,6 +13,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
     disabled = false,
     searchFilters,
     onFilterChange,
+    small,
   } = props;
 
   const [isOpen, setIsOpen] = useState(false);
@@ -91,6 +92,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
             closeOnInactive={closeOnInactive}
             disabled={disabled}
             data-testid="search-input"
+            small={small}
           />
           {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
           {closeOnInactive || inputValue.length > 0 ? (
@@ -120,6 +122,7 @@ export interface ISearchFieldProps {
   disabled?: boolean;
   searchFilters?: any;
   onFilterChange?(filter: string): void;
+  small?: boolean;
 }
 
 export default SearchField;

package/src/components/SearchField/style.tsx

@@ -19,7 +19,7 @@ const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>
   border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
 `;
 
-const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
+const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean; small?: boolean }>`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
   background-color: ${(p) => p.theme.color.interactiveBackground};
@@ -27,6 +27,7 @@ const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
   height: ${(p) => p.theme.spacing.l};
   padding-left: ${(p) => p.theme.spacing.xs};
   border: none;
+  width: ${(p) => (p.small ? `calc(${p.theme.spacing.xl} * 2)` : `calc(${p.theme.spacing.xl} * 4)`)};
 
   &:active,
   &:focus {

package/src/components/SideModal/index.tsx

@@ -149,7 +149,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
             <S.Title data-testid="side-modal-title">{optionsType}</S.Title>
             {showSearch && optionsType !== "components" && (
               <S.SearchWrapper>
-                <SearchField onChange={setSearchQuery} closeOnInactive />
+                <SearchField onChange={setSearchQuery} closeOnInactive small={!filters} />
               </S.SearchWrapper>
             )}
             {!showSearch && (

package/src/components/SideModal/style.tsx

@@ -40,11 +40,10 @@ const ColumnsWrapper = styled.div`
 const Content = styled.div`
   list-style: none;
   padding: ${(p) => p.theme.spacing.m};
+  height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
   width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
   overflow: auto;
   border-right: 1px solid ${(p) => p.theme.colors.uiLine};
-  height: 100vh;
-  max-height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
   &:last-child {
     border-right: 0;
     width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
@@ -63,9 +62,7 @@ const FeaturedWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
-const SearchWrapper = styled.div`
-  width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
-`;
+const SearchWrapper = styled.div``;
 
 const Link = styled.div<{ active: boolean }>`
   color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};

package/src/containers/Navigation/Defaults/actions.tsx

@@ -723,6 +723,7 @@ function resetDefaultsValues(): (dispatch: Dispatch) => Promise<void> {
       dispatch(setFooter(null));
       dispatch(setCurrentNavigationLanguages([]));
       dispatch(setIsNewTranslation(false));
+      dispatch(setCurrentDefaultsContent([]));
     } catch (e) {
       console.log("Error", e); //TODO
     }

package/src/modules/GlobalEditor/index.tsx

@@ -442,44 +442,46 @@ const GlobalEditor = (props: IProps) => {
         pageStatusActions={pageStatusActions}
         tabs={tabsPreview}
       >
-        {isLivePageChanged && (
-          <S.NotificationWrapper>
-            <Notification type="warning" text={modifiedNotificationText} />
-          </S.NotificationWrapper>
-        )}
-        {sitePageID && (
-          <S.NotificationWrapper>
-            <Notification
-              type="info"
-              text={globalNotificationText}
-              btnText="Go Back"
-              onClick={handleClickNotification}
-            />
-          </S.NotificationWrapper>
-        )}
-        {notification && (
-          <S.NotificationWrapper>
-            <Notification
-              type={notification.type}
-              text={notification.text}
-              btnText={notification.btnText}
-              onClick={notification.onClick}
-              resetError={() => setNotification(null)}
-            />
-          </S.NotificationWrapper>
-        )}
-        <ErrorToast size="l" />
         {selectedTab === "edit" ? (
-          <S.Content>
-            <Editor
-              isGlobal={true}
-              isEditable={isEditable}
-              isReadOnly={isReadOnly}
-              theme={theme}
-              browserRef={browserRef}
-              setNotification={setNotification}
-            />
-          </S.Content>
+          <>
+            {isLivePageChanged && (
+              <S.NotificationWrapper>
+                <Notification type="warning" text={modifiedNotificationText} />
+              </S.NotificationWrapper>
+            )}
+            {sitePageID && (
+              <S.NotificationWrapper>
+                <Notification
+                  type="info"
+                  text={globalNotificationText}
+                  btnText="Go Back"
+                  onClick={handleClickNotification}
+                />
+              </S.NotificationWrapper>
+            )}
+            {notification && (
+              <S.NotificationWrapper>
+                <Notification
+                  type={notification.type}
+                  text={notification.text}
+                  btnText={notification.btnText}
+                  onClick={notification.onClick}
+                  resetError={() => setNotification(null)}
+                />
+              </S.NotificationWrapper>
+            )}
+            <ErrorToast size="l" />
+            <S.Content>
+              <Editor
+                isGlobal={true}
+                isEditable={isEditable}
+                isReadOnly={isReadOnly}
+                theme={theme}
+                browserRef={browserRef}
+                setNotification={setNotification}
+              />
+            </S.Content>
+          </>
         ) : (
           <Preview theme={theme} />
         )}

package/src/modules/PageEditor/index.tsx

@@ -496,45 +496,47 @@ const PageEditor = (props: IProps) => {
         isFromEditor={true}
         tabs={tabsPreview}
       >
-        {(!isTemplateActivated || hasDeactivatedModules) && !isGlobal && (
-          <S.NotificationWrapper>
-            <Notification
-              type="error"
-              text={packNotificationText}
-              btnText="Activate package"
-              onClick={handleClickNotification}
-            />
-          </S.NotificationWrapper>
-        )}
-        {isLivePageChanged && (
-          <S.NotificationWrapper>
-            <Notification type="warning" text={modifiedNotificationText} />
-          </S.NotificationWrapper>
-        )}
-        {notification && (
-          <S.NotificationWrapper>
-            <Notification
-              type={notification.type}
-              text={notification.text}
-              btnText={notification.btnText}
-              onClick={notification.onClick}
-              resetError={() => setNotification(null)}
-            />
-          </S.NotificationWrapper>
-        )}
-        <ErrorToast size="l" />
         {selectedTab === "edit" ? (
-          <S.Content>
-            <Editor
-              isTemplateActivated={isTemplateActivated}
-              isGlobal={isGlobal}
-              isEditable={isEditable}
-              pageTitle={pageName}
-              isReadOnly={isReadOnly}
-              browserRef={browserRef}
-              setNotification={setNotification}
-            />
-          </S.Content>
+          <>
+            {(!isTemplateActivated || hasDeactivatedModules) && !isGlobal && (
+              <S.NotificationWrapper>
+                <Notification
+                  type="error"
+                  text={packNotificationText}
+                  btnText="Activate package"
+                  onClick={handleClickNotification}
+                />
+              </S.NotificationWrapper>
+            )}
+            {isLivePageChanged && (
+              <S.NotificationWrapper>
+                <Notification type="warning" text={modifiedNotificationText} />
+              </S.NotificationWrapper>
+            )}
+            {notification && (
+              <S.NotificationWrapper>
+                <Notification
+                  type={notification.type}
+                  text={notification.text}
+                  btnText={notification.btnText}
+                  onClick={notification.onClick}
+                  resetError={() => setNotification(null)}
+                />
+              </S.NotificationWrapper>
+            )}
+            <ErrorToast size="l" />
+            <S.Content>
+              <Editor
+                isTemplateActivated={isTemplateActivated}
+                isGlobal={isGlobal}
+                isEditable={isEditable}
+                pageTitle={pageName}
+                isReadOnly={isReadOnly}
+                browserRef={browserRef}
+                setNotification={setNotification}
+              />
+            </S.Content>
+          </>
         ) : (
           <Preview />
         )}