@griddo/ax 1.75.47 → 1.75.49

package/config/webpack.config.js

@@ -541,6 +541,11 @@ module.exports = function (webpackEnv) {
             // Make sure to add the new loader(s) before the "file" loader.
           ],
         },
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: "javascript/auto",
+        },
       ],
     },
     plugins: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.47",
+  "version": "1.75.49",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4b093ba44ad3463514dfe964d382c3ec3c8b6749"
+  "gitHead": "759d80967ea9a653044c4e1bcfec932337e885b7"
 }

package/src/__tests__/components/Fields/CheckGroup/CheckGroup.test.tsx

@@ -56,6 +56,58 @@ describe("CheckField component rendering", () => {
     expect(screen.findByTestId("check-group-field-group")).toBeTruthy();
     expect(await screen.findAllByTestId("check-field-label")).toHaveLength(2);
   });
+
+  it("should render the component with CheckField and no value", async () => {
+    const checkFieldOptions = [
+      {
+        name: "name 1",
+        value: 1,
+      },
+      {
+        name: "name 2",
+        value: 2,
+      },
+    ];
+    const props = {
+      value: undefined,
+      options: checkFieldOptions,
+      onChange: jest.fn(),
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    expect(screen.findByTestId("check-group-field-group")).toBeTruthy();
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(2);
+  });
+
+  it("should render the component with CheckField and value null", async () => {
+    const checkFieldOptions = [
+      {
+        name: "name 1",
+        value: 1,
+      },
+      {
+        name: "name 2",
+        value: 2,
+      },
+    ];
+    const props = {
+      value: null,
+      options: checkFieldOptions,
+      onChange: jest.fn(),
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    expect(screen.findByTestId("check-group-field-group")).toBeTruthy();
+    expect(await screen.findAllByTestId("check-field-label")).toHaveLength(2);
+  });
 });
 
 describe("CheckField events", () => {
@@ -259,4 +311,45 @@ describe("CheckField events", () => {
     expect(onChangeMock).toHaveBeenCalledTimes(2);
     expect(onChangeMock).toBeCalledWith(["surname"]);
   });
+
+  it("should pass two selected values in the onchange call and remove not valid default value", async () => {
+    const checkFieldOptions = [
+      {
+        name: "all",
+        value: 1,
+      },
+      {
+        name: "name",
+        value: 2,
+      },
+      {
+        name: "surname",
+        value: 3,
+      },
+      {
+        name: "surname 2",
+        value: 4,
+      },
+    ];
+    const onChangeMock = jest.fn();
+
+    const props = {
+      value: ["novalid"],
+      options: checkFieldOptions,
+      selectAllOption: "all",
+      onChange: onChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    const checkFieldInputs = await screen.queryAllByTestId("check-field-input");
+
+    await user.type(checkFieldInputs[1], "name");
+    await user.type(checkFieldInputs[2], "surname");
+    expect(onChangeMock).toBeCalledWith(["name", "surname"]);
+  });
 });

package/src/__tests__/components/Fields/MultiCheckSelectGroup/MultiCheckSelectGroup.test.tsx

@@ -117,4 +117,66 @@ describe("onChange events", () => {
       ],
     });
   });
+
+  it("should call onChange with empty object", async () => {
+    const onChange = jest.fn();
+    defaultProps.value = {};
+    defaultProps.note = "lorem ipsum";
+    defaultProps.elements = [
+      {
+        source: "NEWS_AREAS",
+        key: "NEWS_AREAS",
+        placeholder: "News Areas",
+      },
+    ];
+
+    const Component = (
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <MultiCheckSelectGroup {...defaultProps} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const data = {
+      data: [
+        {
+          value: 4168,
+          label: "another page",
+          name: "another page",
+        },
+        {
+          value: 4111,
+          label: "New Page",
+          name: "New Page",
+        },
+      ],
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+
+    mockedAxios.mockResolvedValue(data);
+
+    const { rerender } = render(Component);
+
+    const field = screen.getByTestId("field");
+
+    await act(async () => {
+      fireEvent.click(field);
+    });
+
+    rerender(Component);
+
+    const checkFieldInputs = screen.getAllByTestId("check-field-input");
+
+    await act(async () => {
+      fireEvent.click(checkFieldInputs[0]);
+    });
+
+    await act(async () => {
+      fireEvent.click(checkFieldInputs[0]);
+    });
+
+    expect(onChange).toBeCalledWith({});
+  });
 });

package/src/__tests__/components/Fields/NumberField/NumberField.test.tsx

@@ -5,10 +5,12 @@ import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 import { mock } from "jest-mock-extended";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 afterEach(cleanup);
 
 const defaultProps = mock<INumberFieldProps>();
+const user = userEvent.setup();
 
 describe("NumberField component rendering", () => {
   it("should render the component", () => {
@@ -41,7 +43,7 @@ describe("onClick events", () => {
 
   it("should call onChange when clicking arrow down", () => {
     defaultProps.value = 2;
-    defaultProps.minValue = 1;
+    defaultProps.min = 1;
     const onChange = jest.fn();
 
     render(
@@ -77,7 +79,7 @@ describe("onBlur events", () => {
 
 describe("onChange events", () => {
   it("should call onChange on change", () => {
-    defaultProps.maxValue = 7;
+    defaultProps.max = 7;
     defaultProps.error = true;
     const onChange = jest.fn();
     const handleValidation = jest.fn();
@@ -93,4 +95,20 @@ describe("onChange events", () => {
     expect(onChange).toHaveBeenCalledWith(5);
     expect(handleValidation).toHaveBeenCalled();
   });
+
+  it("should call onChange with undefined", async () => {
+    defaultProps.value = undefined;
+    const onChange = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <NumberField {...defaultProps} onChange={onChange} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("input");
+    input.focus();
+    await user.keyboard("{4}{Backspace}");
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
 });

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

@@ -10,6 +10,13 @@ import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useLocation: () => ({
+    pathname: "localhost:3000/example/path",
+  }),
+}));
+
 const defaultProps = mock<IToastProps>();
 
 describe("Toast component rendering", () => {

package/src/components/Fields/AsyncSelect/style.tsx

@@ -46,20 +46,22 @@ export const StyledSelect = styled(AsyncSelect)<{ isDisabled: boolean | undefine
   }
 
   .react-select__menu {
-    box-shadow: 0px 6px 6px rgba(32, 34, 76, 0.08);
+    box-shadow: none;
     border-radius: 4px;
     min-width: calc(${(p) => p.theme.spacing.xl} * 4);
     max-width: calc(${(p) => p.theme.spacing.xl} * 6);
     margin-top: 0;
     z-index: 99;
     .react-select__menu-list {
+      border: 1px solid ${(p) => p.theme.color.uiLine};
+      border-radius: 4px;
       max-height: calc(${(p) => p.theme.spacing.l} * 3);
       overflow: auto;
       padding: 0;
       .react-select__option {
         background-color: ${(p) => p.theme.color.interactiveBackground};
         min-height: ${(p) => p.theme.spacing.l};
-        padding: ${(p) => p.theme.spacing.s};
+        padding: ${(p) => `13px ${p.theme.spacing.s} 12px ${p.theme.spacing.s}`};
         &:first-child {
           ${(p) =>
             !p.mandatory &&

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

@@ -1,19 +1,23 @@
 import React from "react";
 
-import * as S from "./style";
 import { ICheck } from "@ax/types";
 import CheckField, { ICheckFieldProps } from "../CheckField";
 
+import * as S from "./style";
+
 const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
   const { options, onChange, value, selectAllOption, multipleSelection = true, disabled } = props;
 
-  let valueArray = typeof value === "string" ? value.split(",") : value;
+  let valueArray = !value ? [] : typeof value === "string" ? value.split(",") : value;
+  valueArray = valueArray.filter((val: string | number) => options?.some((option) => option.value === val));
 
   const handleChange = (newValue: ICheck) => {
     const index = valueArray.indexOf(newValue.value);
+
     if (index >= 0 && !newValue.isChecked) {
       valueArray.splice(index, 1);
     }
+
     if (index < 0 && newValue.isChecked) {
       valueArray.push(newValue.value);
     }
@@ -56,7 +60,7 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
 };
 
 interface ICheckGroupProps {
-  value: string | (string | number)[];
+  value: string | (string | number)[] | null | undefined;
   options: ICheckFieldProps[] | undefined;
   onChange: (value: string | (string | number)[]) => void;
   selectAllOption?: string;

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

@@ -7,6 +7,8 @@ import * as S from "./style";
 const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
   const { value, onChange, site, elements, note } = props;
 
+  const completedValue = value ? value : {};
+
   return (
     <>
       {note && <S.StyledNoteField value={{ text: note }} />}
@@ -14,12 +16,18 @@ const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
         elements.map((element: any) => {
           const { placeholder, source, key, mandatory, isGlobal } = element;
 
-          const handleChange = (val: any) => {
-            const newValue = { ...value, [key]: val };
+          const handleChange = (val: any[]) => {
+            let newValue = { ...completedValue };
+            if (val.length > 0) {
+              newValue = { ...newValue, [key]: val };
+            } else {
+              delete newValue[key];
+            }
+
             onChange(newValue);
           };
 
-          const val = value && value[key] ? value[key] : [];
+          const val = completedValue[key] ? completedValue[key] : [];
           const fromSite = isGlobal ? null : site;
 
           return (
@@ -39,9 +47,9 @@ const MultiCheckSelectGroup = (props: IMultiCheckSelectGroupProps) => {
 };
 
 export interface IMultiCheckSelectGroupProps {
-  value: any;
+  value: Record<string, any[]> | Record<string, never> | undefined | null;
   elements: any[];
-  onChange: (value: string | string[]) => void;
+  onChange: (value: Record<string, any[]> | Record<string, never>) => void;
   site?: ISite;
   note?: string;
 }

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

@@ -6,7 +6,7 @@ import * as S from "./style";
 const NumberField = (props: INumberFieldProps): JSX.Element => {
   const { name, value, error, onChange, onBlur, maxValue, minValue, disabled, handleValidation, min, max } = props;
 
-  const strValue = value ? value.toString() : "0";
+  const strValue = value || value === 0 ? value.toString() : "";
   const safeMax = typeof max !== "undefined" ? max : maxValue;
   const safeMin = typeof min !== "undefined" ? min : minValue;
 
@@ -17,7 +17,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
   }, [strValue]);
 
   const setValue = (value: string, eventType: string) => {
-    const floatValue = parseFloat(value);
+    const floatValue = value || value === "0" ? parseFloat(value) : undefined;
     setInputValue(value);
 
     eventType === "blur" ? onBlur && onBlur(floatValue) : onChange(floatValue);
@@ -85,7 +85,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
 
 export interface INumberFieldProps {
   value?: number;
-  onChange: (value: number) => void;
+  onChange: (value: number | null | undefined) => void;
   name?: string;
   error?: boolean;
   minValue?: number; // to deprecate
@@ -93,7 +93,7 @@ export interface INumberFieldProps {
   min?: number;
   max?: number;
   onClickIcon?: () => void;
-  onBlur?: (value: number) => void;
+  onBlur?: (value: number | null | undefined) => void;
   disabled?: boolean;
   handleValidation?: (value: string, validators: Record<string, unknown>) => void;
 }

package/src/components/Fields/Select/style.tsx

@@ -49,20 +49,22 @@ export const StyledSelect = styled(Select)<{
   }
 
   .react-select__menu {
-    box-shadow: 0px 6px 6px rgba(32, 34, 76, 0.08);
+    box-shadow: none;
     border-radius: 4px;
     min-width: calc(${(p) => p.theme.spacing?.xl} * 2);
     max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
     margin-top: 0;
     z-index: 99;
     .react-select__menu-list {
+      border: 1px solid ${(p) => p.theme.color.uiLine};
+      border-radius: 4px;
       max-height: calc(${(p) => p.theme.spacing?.l} * 3);
       overflow: auto;
       padding: 0;
       .react-select__option {
         background-color: ${(p) => p.theme.color?.interactiveBackground};
         min-height: ${(p) => p.theme.spacing?.l};
-        padding: ${(p) => p.theme.spacing?.s};
+        padding: ${(p) => `13px ${p.theme.spacing.s} 12px ${p.theme.spacing.s}`};
         &:first-child {
           ${(p) =>
             p.hasEmptyOption &&

package/src/components/Toast/index.tsx

@@ -1,14 +1,18 @@
 import React, { useRef, useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
 import { createPortal } from "react-dom";
 import { Button, IconAction } from "@ax/components";
 
 import * as S from "./style";
 
-const Toast = (props: IToastProps) => {
+const Toast = (props: IToastProps): JSX.Element => {
   const { action, message, setIsVisible } = props;
   const toast = useRef<any>(null);
 
+  const { pathname } = useLocation();
+  const isEditor = pathname.includes("/editor");
+
   let temp: any;
   const setTemp = (time: number) => (temp = setTimeout(() => setIsVisible(false), time));
 
@@ -24,14 +28,14 @@ const Toast = (props: IToastProps) => {
   }, []);
 
   return createPortal(
-    <S.Wrapper ref={toast} data-testid="toast-wrapper">
+    <S.Wrapper ref={toast} isEditor={isEditor} data-testid="toast-wrapper">
       <S.Text data-testid="toast-message">{message}</S.Text>
       <S.Buttons>
-        {action &&
+        {action && (
           <Button type="button" buttonStyle="lineInverse" onClick={action}>
             Undo
           </Button>
-        }
+        )}
         <IconAction icon="close" onClick={close} inversed={true} />
       </S.Buttons>
     </S.Wrapper>,

package/src/components/Toast/style.tsx

@@ -1,57 +1,57 @@
 import styled from "styled-components";
 
-const Wrapper = styled.div`
-   width: 453px;
-   height: ${p => `calc(${p.theme.spacing.m} * 2)`};
-   background: ${(p) => p.theme.color.uiMainMenuBackground};
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-   border-radius: 4px;
-   position: fixed;
-   z-index: 1100;
-   bottom: ${p => p.theme.spacing.m};
-   left: ${p => `calc(${p.theme.spacing.m} * 4)`};
-   padding-left: ${p => p.theme.spacing.m};
-   padding-right: ${p => p.theme.spacing.s};
-   animation-name: transition;
-   animation-duration: 5s;
-   opacity: 0;
+const Wrapper = styled.div<{ isEditor: boolean }>`
+  width: 453px;
+  height: ${(p) => `calc(${p.theme.spacing.m} * 2)`};
+  background: ${(p) => p.theme.color.uiMainMenuBackground};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px;
+  position: fixed;
+  z-index: 1100;
+  bottom: ${(p) => p.theme.spacing.m};
+  left: ${(p) => (p.isEditor ? `calc(${p.theme.spacing.m} * 1)` : `calc(${p.theme.spacing.m} * 4)`)};
+  padding-left: ${(p) => p.theme.spacing.m};
+  padding-right: ${(p) => p.theme.spacing.s};
+  animation-name: transition;
+  animation-duration: 5s;
+  opacity: 0;
 
-   &.close-animation {
-      animation-name: transition-inversed;
-      animation-duration: 1s;
-   }
+  &.close-animation {
+    animation-name: transition-inversed;
+    animation-duration: 1s;
+  }
 
-   @keyframes transition {
-      0% {
-         opacity: 0;
-         transform: translateX(-100%)
-      }
-      20% {
-         opacity: 1;
-         transform: translateX(0)
-      }
-      80% {
-         opacity: 1;
-         transform: translateX(0)
-      }
-      100% {
-         opacity: 0;
-         transform: translateX(-100%)
-      }
+  @keyframes transition {
+    0% {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+    20% {
+      opacity: 1;
+      transform: translateX(0);
     }
+    80% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+  }
 
-    @keyframes transition-inversed {
-      from {
-         opacity: 1;
-         transform: translateX(0)
-      }
-      to {
-         opacity: 0;
-         transform: translateX(-100%)
-      }
+  @keyframes transition-inversed {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-100%);
     }
+  }
 `;
 
 const Text = styled.div`