@griddo/ax 1.63.5 → 1.64.0

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

@@ -2,38 +2,53 @@ import styled from "styled-components";
 
 const Wrapper = styled.div``;
 
-const Label = styled.label<{ disabled: boolean | undefined}>`
-  ${p => p.theme.textStyle.fieldContent};
+const Label = styled.label<{ disabled: boolean | undefined }>`
+  ${(p) => p.theme.textStyle.fieldContent};
   display: block;
   position: relative;
-  padding-left: calc(${p => p.theme.spacing.s} + ${p => p.theme.spacing.xs});
-  margin-bottom: ${p => p.theme.spacing.xs};
+  padding-left: calc(${(p) => p.theme.spacing.s} + ${(p) => p.theme.spacing.xs});
+  margin-bottom: ${(p) => p.theme.spacing.xs};
   cursor: pointer;
   user-select: none;
-  color: ${p => p.disabled && p.theme.color.interactiveDisabled};
+  color: ${(p) => p.disabled && p.theme.color.interactiveDisabled};
 `;
 
-const CheckMark = styled.span<{ checked: boolean | undefined; error: boolean | undefined; indeterminate: boolean | undefined }>`
+const CheckMark = styled.span<{
+  checked: boolean | undefined;
+  error: boolean | undefined;
+  indeterminate: boolean | undefined;
+}>`
   position: absolute;
   top: 2px;
   left: 0;
-  height: ${p => p.theme.spacing.s};
-  width: ${p => p.theme.spacing.s};
-  background-color: ${p => (p.checked || p.indeterminate ? (p.error ? p.theme.color.error : p.theme.color.interactive01) : p.theme.color.interactiveBackground)};
-  border: 2px solid ${p => (p.error ? p.theme.color.error : p.checked || p.indeterminate ? p.theme.color.interactive01 : p.theme.color.interactiveInactive)};
+  height: ${(p) => p.theme.spacing.s};
+  width: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) =>
+    p.checked || p.indeterminate
+      ? p.error
+        ? p.theme.color.error
+        : p.theme.color.interactive01
+      : p.theme.color.interactiveBackground};
+  border: 2px solid
+    ${(p) =>
+      p.error
+        ? p.theme.color.error
+        : p.checked || p.indeterminate
+        ? p.theme.color.interactive01
+        : p.theme.color.interactiveInactive};
   border-radius: 1.5px;
   :after {
     content: "";
     position: absolute;
-    display: ${p => (p.checked || p.indeterminate ? `blocked` : `none`)};
+    display: ${(p) => (p.checked || p.indeterminate ? `blocked` : `none`)};
     left: 3px;
     top: -1px;
     width: 4px;
     height: 10px;
     border: solid #ffffff;
     color: white;
-    border-width: ${p => p.indeterminate ? "0 2px 0 0" : "0 2px 2px 0"};
-    transform: ${p => p.indeterminate ? "rotate(90deg)" : "rotate(45deg)"};
+    border-width: ${(p) => (p.indeterminate ? "0 2px 0 0" : "0 2px 2px 0")};
+    transform: ${(p) => (p.indeterminate ? "rotate(90deg)" : "rotate(45deg)")};
   }
 `;
 
@@ -44,8 +59,8 @@ const Input = styled.input`
   height: 0;
   width: 0;
   :disabled ~ ${CheckMark} {
-    background-color: ${p => (p.checked ? p.theme.color.interactiveDisabled : p.theme.color.interactiveBackground)};
-    border: 2px solid ${p => p.theme.color.interactiveDisabled};
+    background-color: ${(p) => (p.checked ? p.theme.color.interactiveDisabled : p.theme.color.interactiveBackground)};
+    border: 2px solid ${(p) => p.theme.color.interactiveDisabled};
   }
 `;
 
@@ -54,14 +69,7 @@ const IconLabelWrapper = styled.div`
 `;
 
 const IconWrapper = styled.div`
-  padding-right: ${p => p.theme.spacing.xs};
+  padding-right: ${(p) => p.theme.spacing.xs};
 `;
 
-export {
-  Wrapper,
-  Label,
-  CheckMark,
-  Input,
-  IconLabelWrapper,
-  IconWrapper
-};
+export { Wrapper, Label, CheckMark, Input, IconLabelWrapper, IconWrapper };

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

@@ -0,0 +1,274 @@
+import React from "react";
+import CheckGroup from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import "@testing-library/jest-dom";
+import { Simulate } from "react-dom/test-utils";
+import { render, cleanup, fireEvent, screen } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  value: "",
+  options: [],
+  onChange: jest.fn(),
+};
+
+describe("CheckField component rendering", () => {
+  it("should render the component with no CheckField", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.findByTestId("CheckGroupFieldgroup")).toBeTruthy();
+  });
+
+  it("should render the component with CheckField", async () => {
+    const checkFieldOptions = [
+      {
+        name: "name 1",
+        value: 1,
+      },
+      {
+        name: "name 2",
+        value: 2,
+      },
+    ];
+    const props = {
+      value: "",
+      options: checkFieldOptions,
+      onChange: jest.fn(),
+    };
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    expect(screen.findByTestId("CheckGroupFieldgroup")).toBeTruthy();
+    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(2);
+  });
+});
+
+describe("CheckField events", () => {
+  it("should call the onchange", async () => {
+    const checkFieldOptions = [
+      {
+        name: "name 1",
+        value: 1,
+      },
+      {
+        name: "name 2",
+        value: 2,
+      },
+    ];
+    const onChangeMock = jest.fn();
+
+    const props = {
+      value: "",
+      options: checkFieldOptions,
+      onChange: onChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    expect(screen.findByTestId("CheckGroupFieldgroup")).toBeTruthy();
+    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(2);
+    const checkFieldInput = await screen.queryAllByTestId<HTMLInputElement>("checkFieldInput");
+    fireEvent.change(checkFieldInput[0], {
+      target: { value: "name", checked: true },
+    });
+    expect(checkFieldInput[0].value).toBe("name");
+    expect(checkFieldInput[0].checked).toBe(true);
+  });
+
+  it("should pass 'all' in the onchange call", async () => {
+    const checkFieldOptions = [
+      {
+        name: "all",
+        value: 1,
+      },
+      {
+        name: "surname",
+        value: 2,
+      },
+    ];
+    const onChangeMock = jest.fn();
+
+    const props = {
+      value: "",
+      options: checkFieldOptions,
+      onChange: onChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(2);
+    const checkFieldInput = await screen.queryAllByTestId<HTMLInputElement>("checkFieldInput");
+    fireEvent.change(checkFieldInput[0], {
+      target: { value: "all", checked: true },
+    });
+    expect(checkFieldInput[0].value).toBe("all");
+  });
+
+  it("should pass 'all' selected in the onchange call when all options selected", async () => {
+    const checkFieldOptions = [
+      {
+        name: "all",
+        value: 1,
+      },
+      {
+        name: "name",
+        value: 2,
+      },
+      {
+        name: "surname",
+        value: 3,
+      },
+    ];
+    const onChangeMock = jest.fn();
+
+    const props = {
+      value: [],
+      options: checkFieldOptions,
+      selectAllOption: "all",
+      onChange: onChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(3);
+    const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
+    fireEvent.change(checkFieldInputs[1], {
+      target: { value: "name", checked: true },
+    });
+    Simulate.change(checkFieldInputs[1]);
+
+    fireEvent.change(checkFieldInputs[2], {
+      target: { value: "surname", checked: true },
+    });
+    Simulate.change(checkFieldInputs[2]);
+
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    expect(onChangeMock).toBeCalledWith(["all"]);
+  });
+
+  it("should pass two selected values in the onchange call", 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: [],
+      options: checkFieldOptions,
+      selectAllOption: "all",
+      onChange: onChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(4);
+
+    const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
+    fireEvent.change(checkFieldInputs[1], {
+      target: { value: "name", checked: true },
+    });
+    Simulate.change(checkFieldInputs[1]);
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toBeCalledWith(["name"]);
+
+    fireEvent.change(checkFieldInputs[2], {
+      target: { value: "surname", checked: true },
+    });
+    Simulate.change(checkFieldInputs[2]);
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    expect(onChangeMock).toBeCalledWith(["name", "surname"]);
+  });
+
+  it("should return only one value in the onchange call", 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: [],
+      options: checkFieldOptions,
+      multipleSelection: false,
+      onChange: onChangeMock,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <CheckGroup {...props} />
+      </ThemeProvider>
+    );
+
+    expect(await screen.findAllByTestId("checkFieldLabel")).toHaveLength(4);
+
+    const checkFieldInputs = await screen.queryAllByTestId("checkFieldInput");
+    fireEvent.change(checkFieldInputs[1], {
+      target: { value: "name", checked: true },
+    });
+    Simulate.change(checkFieldInputs[1]);
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(onChangeMock).toBeCalledWith(["name"]);
+
+    fireEvent.change(checkFieldInputs[2], {
+      target: { value: "surname", checked: true },
+    });
+    Simulate.change(checkFieldInputs[2]);
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    expect(onChangeMock).toBeCalledWith(["surname"]);
+  });
+});

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

@@ -38,6 +38,7 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
   const checks = options
     ? options.map((item: ICheckFieldProps) => (
         <CheckField
+          data-testid="CheckGroupCheckfield"
           key={item.name}
           onChange={handleChange}
           checked={valueArray.includes(item.name)}
@@ -51,7 +52,7 @@ const CheckGroup = (props: ICheckGroupProps): JSX.Element => {
       ))
     : "";
 
-  return <S.FieldGroup>{checks}</S.FieldGroup>;
+  return <S.FieldGroup data-testid="CheckGroupFieldgroup">{checks}</S.FieldGroup>;
 };
 
 interface ICheckGroupProps {

package/src/components/Fields/FileField/FileDragAndDrop/style.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 import Button from "@ax/components/Button";
 
@@ -154,7 +155,7 @@ export const ErrorMsg = styled.div`
   margin-top: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const StyledButton = styled(Button)`
+export const StyledButton = styled((props) => <Button {...props} />)`
   margin-top: ${(p) => p.theme.spacing.s};
 `;
 
@@ -162,7 +163,7 @@ export const FilesInput = styled.input<{ ref: any }>`
   display: none;
 `;
 
-export const FilesButton = styled(Button).attrs((props: any) => ({
+export const FilesButton = styled((props) => <Button {...props} />).attrs((props: any) => ({
   ref: props.ref,
 }))<{ ref: any }>`
   margin-top: ${(p) => p.theme.spacing.xs};

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

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 import ActionMenu from "@ax/components/ActionMenu";
 
@@ -54,7 +55,7 @@ const ComponentIconWrapper = styled.div`
   margin-right: ${(p) => p.theme.spacing.xs};
 `;
 
-const StyledActionMenu = styled(ActionMenu)`
+const StyledActionMenu = styled((props) => <ActionMenu {...props} />)`
   opacity: 0;
   width: 32px;
   display: flex;

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

@@ -2,28 +2,28 @@ import styled from "styled-components";
 
 const Wrapper = styled.div`
   position: relative;
-  min-width: calc(${(p) => p.theme.spacing.xl} * 2);
-  max-width: calc(${(p) => p.theme.spacing.xl} * 6);
+  min-width: calc(${(p) => p.theme.spacing?.xl} * 2);
+  max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
   z-index: 2;
 `;
 
-const Field = styled.div<{isOpen: boolean}>`
+const Field = styled.div<{ isOpen: boolean }>`
   position: relative;
-  ${(p) => p.theme.textStyle.fieldContent};
-  color: ${(p) => p.theme.color.textHighEmphasis};
+  ${(p) => p.theme.textStyle?.fieldContent};
+  color: ${(p) => p.theme.color?.textHighEmphasis};
   display: flex;
   width: 100%;
-  height: ${(p) => p.theme.spacing.l};
-  background-color: ${p => p.theme.color.interactiveBackground};
-  border: 1px solid ${p => p.isOpen ? p.theme.color.interactive01 : p.theme.color.uiLine};
-  border-radius: ${p => p.theme.radii.s};
+  height: ${(p) => p.theme.spacing?.l};
+  background-color: ${(p) => p.theme.color?.interactiveBackground};
+  border: 1px solid ${(p) => (p.isOpen ? p.theme.color?.interactive01 : p.theme.color?.uiLine)};
+  border-radius: ${(p) => p.theme.radii?.s};
   align-items: center;
   cursor: pointer;
-  padding: 0 ${p => p.theme.spacing.s };
+  padding: 0 ${(p) => p.theme.spacing?.s};
 
   :focus,
   :active {
-    border: 1px solid ${p => p.theme.color.interactive01};
+    border: 1px solid ${(p) => p.theme.color?.interactive01};
     outline: none;
   }
 
@@ -32,7 +32,7 @@ const Field = styled.div<{isOpen: boolean}>`
     right: 16px;
     top: ${(p) => (p.isOpen ? `22px` : `18px`)};
     content: "";
-    border: solid ${(p) => p.theme.color.interactive01};
+    border: solid ${(p) => p.theme.color?.interactive01};
     border-width: 0 2px 2px 0;
     display: inline-block;
     padding: 3px;
@@ -41,19 +41,19 @@ const Field = styled.div<{isOpen: boolean}>`
 `;
 
 const DropDown = styled.div<{ floating?: boolean }>`
-  background-color: ${p => p.theme.color.uiBarBackground};
-  border: 1px solid ${p => p.theme.color.uiLine};
-  border-radius: ${p => p.theme.radii.s};
-  padding: ${p => `${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.s}` };
+  background-color: ${(p) => p.theme.color?.uiBarBackground};
+  border: 1px solid ${(p) => p.theme.color?.uiLine};
+  border-radius: ${(p) => p.theme.radii?.s};
+  padding: ${(p) => `${p.theme.spacing?.s} ${p.theme.spacing?.xs} ${p.theme.spacing?.xs} ${p.theme.spacing?.s}`};
   width: 100%;
   z-index: 2;
   max-height: 130px;
   overflow: auto;
-  position: ${(p) => p.floating ? "absolute" : "block"};
+  position: ${(p) => (p.floating ? "absolute" : "block")};
 `;
 
 const Asterisk = styled.span`
-  color: ${(p) => p.theme.color.error};
+  color: ${(p) => p.theme.color?.error};
 `;
 
 export { Wrapper, Field, DropDown, Asterisk };

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

@@ -1,20 +1,20 @@
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  background-color: ${(p) => p.theme.color.uiBackground03};
-  padding: ${(p) => p.theme.spacing.s};
-  border-radius: ${(p) => p.theme.radii.s};
+  background-color: ${(p) => p.theme.color?.uiBackground03};
+  padding: ${(p) => p.theme.spacing?.s};
+  border-radius: ${(p) => p.theme.radii?.s};
 `;
 
 const Title = styled.div`
-  ${(p) => p.theme.textStyle.headingXS};
-  color: ${(p) =>p.theme.color.textMediumEmphasis};
-  margin-bottom: ${(p) => p.theme.spacing.xs} 
+  ${(p) => p.theme.textStyle?.headingXS};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing?.xs};
 `;
 
 const Text = styled.div`
-  ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) =>p.theme.color.textMediumEmphasis};
+  ${(p) => p.theme.textStyle?.uiXS};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
 `;
 
-export { Wrapper, Title, Text }
+export { Wrapper, Title, Text };

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

@@ -139,7 +139,7 @@ const AutoItem = (props: IProps) => {
             const handleClick = () => {
               handleDeleteTag(e.id);
             };
-            return <Tag key={e.label} text={e.label} deleteAction={handleClick} />;
+            return <Tag key={e.label} text={e.label} onDeleteAction={handleClick} />;
           })}
       </S.FiltersWrapper>
       <S.ActionsFilterWrapper isOpen={state.isOpen}>