@tsed/react-formio 1.11.2 → 1.12.0

package/src/components/input-tags/inputTags.stories.tsx

@@ -3,13 +3,13 @@ import { iconClass } from "../../utils/iconClass";
 import { InputTags } from "./inputTags.component";
 
 const useValue = (args: any) => {
-  const [value, useValue] = useState(args.value);
+  const [value, setValue] = useState(args.value);
 
   return {
     ...args,
     value,
     onChange(name: string, value: any) {
-      useValue(value);
+      setValue(value);
       args.onChange(name, value);
     }
   };
@@ -72,12 +72,7 @@ Sandbox.args = {
 };
 
 export const WithPrefix = (args: any) => {
-  return (
-    <InputTags
-      prefix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputTags prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithPrefix.args = {
@@ -89,12 +84,7 @@ WithPrefix.args = {
 };
 
 export const WithSuffix = (args: any) => {
-  return (
-    <InputTags
-      suffix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputTags suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithSuffix.args = {

package/src/components/input-text/inputText.component.spec.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+import { Sandbox } from "./inputText.stories";
+
+describe("input-text", () => {
+  it("should display the input-text component", () => {
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+  });
+
+  it("should display the input-text component with a different size", () => {
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} size='small' />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveClass("form-control-small");
+  });
+
+  it("should display the input-text with placeholder", () => {
+    const placeholderTest = "placeholder test";
+
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveDisplayValue(placeholderTest);
+  });
+
+  it("should change the value of the input-text", () => {
+    const placeholderTest = "placeholder test";
+
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    fireEvent.change(input, { target: { value: "newValue" } });
+    expect(input.value).toBe("newValue");
+    expect(input).not.toHaveDisplayValue(placeholderTest);
+    expect(input).toHaveDisplayValue("newValue");
+  });
+  it("should NOT change the value of the input-text if the value is NOT of type number", () => {
+    const placeholderTest = "placeholder test";
+
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} type='number' name={"test"} placeholder={placeholderTest} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    fireEvent.change(input, { target: { value: "newValue" } });
+    expect(input).not.toHaveDisplayValue("newValue");
+    fireEvent.change(input, { target: { value: 1234 } });
+    expect(input.value).toBe("1234");
+    expect(input).toHaveDisplayValue("1234");
+  });
+});

package/src/components/input-text/inputText.component.tsx

@@ -3,10 +3,7 @@ import PropTypes from "prop-types";
 import React, { useEffect, useMemo, useState } from "react";
 import { callLast } from "../../utils/callLast";
 import { getEventValue } from "../../utils/getEventValue";
-import {
-  FormControl,
-  FormControlProps
-} from "../form-control/formControl.component";
+import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
 export interface InputTextProps<T = any> extends FormControlProps {
   type?: string;
@@ -33,6 +30,7 @@ export function InputText<T = any>({
   suffix,
   description,
   className,
+  placeholder,
   ...props
 }: InputTextProps<T>) {
   const [localValue, setValue] = useState(value);
@@ -60,7 +58,8 @@ export function InputText<T = any>({
         className={classnames("form-control", size && `form-control-${size}`)}
         id={name}
         required={required}
-        value={(localValue || "") as any}
+        value={(localValue || placeholder  || "") as any}
+        placeholder={placeholder}
         onChange={(event) => {
           const value = getEventValue(event);
           setValue(value);

package/src/components/input-text/inputText.stories.tsx

@@ -3,13 +3,13 @@ import { iconClass } from "../../utils/iconClass";
 import { InputText } from "./inputText.component";
 
 const useValue = (args: any) => {
-  const [value, useValue] = useState(args.value);
+  const [value, setValue] = useState(args.value);
 
   return {
     ...args,
     value,
     onChange(name: string, value: any) {
-      useValue(value);
+      setValue(value);
       args.onChange(name, value);
     }
   };
@@ -77,12 +77,7 @@ Sandbox.args = {
 };
 
 export const WithPrefix = (args: any) => {
-  return (
-    <InputText
-      prefix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithPrefix.args = {
@@ -93,12 +88,7 @@ WithPrefix.args = {
 };
 
 export const WithSuffix = (args: any) => {
-  return (
-    <InputText
-      suffix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithSuffix.args = {
@@ -109,12 +99,7 @@ WithSuffix.args = {
 };
 
 export const TypeNumber = (args: any) => {
-  return (
-    <InputText
-      suffix={<i className={iconClass(undefined, "dollar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
 };
 
 TypeNumber.args = {
@@ -127,12 +112,7 @@ TypeNumber.args = {
 };
 
 export const Sizing = (args: any) => {
-  return (
-    <InputText
-      suffix={<i className={iconClass(undefined, "dollar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
 };
 
 Sizing.args = {

package/src/components/loader/loader.component.tsx

@@ -10,12 +10,7 @@ export interface LoaderProps {
   className?: string;
 }
 
-export function Loader({
-  isActive,
-  color = "blue",
-  icon = "radio-circle",
-  className = ""
-}: PropsWithChildren<LoaderProps>) {
+export function Loader({ isActive, color = "blue", icon = "radio-circle", className = "" }: PropsWithChildren<LoaderProps>) {
   if (isActive) {
     return (
       <div
@@ -24,11 +19,7 @@ export function Loader({
           className
         )}
       >
-        <span
-          data-testid={`icon_${icon}`}
-          color={color}
-          className={`text-11xl ${iconClass(undefined, icon, true)}`}
-        />
+        <span data-testid={`icon_${icon}`} color={color} className={`text-11xl ${iconClass(undefined, icon, true)}`} />
       </div>
     );
   }

package/src/components/modal/modal.component.spec.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom/extend-expect";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { WithFooter, WithTitle } from "./modal.stories";
 
@@ -8,9 +8,7 @@ describe("Modal", () => {
     it("should display the modal when we click on the button", async () => {
       const onClose = jest.fn();
 
-      const { queryByTestId, getByTestId } = render(
-        <WithTitle {...WithTitle.args} onClose={onClose} />
-      );
+      const { queryByTestId, getByTestId, findByTestId } = render(<WithTitle {...WithTitle.args} onClose={onClose} />);
 
       expect(queryByTestId("modalTitle")).toBeFalsy();
       expect(queryByTestId("modalBody")).toBeFalsy();
@@ -18,7 +16,7 @@ describe("Modal", () => {
 
       fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 
-      await waitFor(() => getByTestId("modalTitle"));
+      await findByTestId("modalTitle");
 
       expect(getByTestId("modalTitle")).toBeTruthy();
       expect(getByTestId("modalTitle")).toHaveTextContent("Modal title");
@@ -37,9 +35,7 @@ describe("Modal", () => {
 
   describe("WithFooter", () => {
     it("should display the modal when we click on the button", async () => {
-      const { getByRole, queryByTestId, getByTestId } = render(
-        <WithFooter {...WithFooter.args} />
-      );
+      const { getByRole, queryByTestId, getByTestId, findByTestId } = render(<WithFooter {...WithFooter.args} />);
 
       expect(queryByTestId("modalTitle")).toBeFalsy();
       expect(queryByTestId("modalBody")).toBeFalsy();
@@ -47,13 +43,13 @@ describe("Modal", () => {
 
       fireEvent.click(getByRole("button", { name: "Open modal" }));
 
-      await waitFor(() => getByTestId("modalTitle"));
+      await findByTestId("modalTitle");
 
       expect(getByTestId("modalTitle")).toBeTruthy();
       expect(getByTestId("modalTitle")).toHaveTextContent("Modal title");
       expect(getByTestId("modalBody")).toBeTruthy();
       expect(getByTestId("modalBody")).toHaveTextContent("Hello body");
-      expect(queryByTestId("modalFooter")).toBeTruthy();
+      expect(getByTestId("modalFooter")).toBeTruthy();
 
       fireEvent.click(screen.getByTestId("customCloseModal"));
 
@@ -63,13 +59,11 @@ describe("Modal", () => {
     });
     it("should call the onSubmit listener", async () => {
       const onSubmit = jest.fn();
-      const { getByRole, queryByTestId, getByTestId } = render(
-        <WithFooter {...WithFooter.args} onSubmit={onSubmit} />
-      );
+      const { getByRole, queryByTestId, findByTestId } = render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
 
       fireEvent.click(getByRole("button", { name: "Open modal" }));
 
-      await waitFor(() => getByTestId("modalTitle"));
+      await findByTestId("modalTitle");
 
       fireEvent.click(screen.getByTestId("customSubmitModal"));
 

package/src/components/modal/modal.component.tsx

@@ -48,9 +48,7 @@ export function Modal({
 
   useEffect(() => {
     if (titleRef.current || footerRef.current) {
-      const height =
-        (titleRef?.current?.offsetHeight || 0) +
-        (footerRef?.current?.offsetHeight || 0);
+      const height = (titleRef?.current?.offsetHeight || 0) + (footerRef?.current?.offsetHeight || 0);
 
       setMaxHeight(`calc(85vh - ${height}px)`);
     } else {
@@ -63,42 +61,23 @@ export function Modal({
   }
 
   return (
-    <div
-      role={"dialog"}
-      className={`formio-dialog formio-dialog-theme-default ${className}`}
-    >
+    <div role={"dialog"} className={`formio-dialog formio-dialog-theme-default ${className}`}>
       <div className='formio-dialog-overlay' onClick={onClickClose} />
       <div style={style} className={"formio-dialog-content"}>
         <div className={"formio-dialog-wrapper"}>
           {title ? (
-            <div
-              className={"formio-dialog-title"}
-              ref={titleRef}
-              data-testid={"modalTitle"}
-            >
+            <div className={"formio-dialog-title"} ref={titleRef} data-testid={"modalTitle"}>
               {title}
             </div>
           ) : null}
 
-          <div
-            className='formio-dialog-body'
-            style={{ maxHeight }}
-            data-testid={"modalBody"}
-          >
+          <div className='formio-dialog-body' style={{ maxHeight }} data-testid={"modalBody"}>
             {show && children}
           </div>
 
           {ModalFooter ? (
-            <div
-              className={"formio-dialog-footer"}
-              ref={footerRef}
-              data-testid={"modalFooter"}
-            >
-              <ModalFooter
-                {...props}
-                closeModal={closeModal}
-                onClose={onClickClose}
-              />
+            <div className={"formio-dialog-footer"} ref={footerRef} data-testid={"modalFooter"}>
+              <ModalFooter {...props} closeModal={closeModal} onClose={onClickClose} />
             </div>
           ) : null}
         </div>

package/src/components/modal/modal.stories.tsx

@@ -81,11 +81,7 @@ export const WithFooter = (args: ModalProps) => {
           Save
         </button>
 
-        <button
-          data-testid='customCloseModal'
-          className={"btn btn-danger mx-1"}
-          onClick={closeModal}
-        >
+        <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
           Close
         </button>
       </div>

package/src/components/modal/removeModal.component.tsx

@@ -5,20 +5,10 @@ import { iconClass } from "../../utils/iconClass";
 import { InputText } from "../input-text/inputText.component";
 import { Modal, ModalProps } from "./modal.component";
 
-function RemoveModalFooter({
-  value,
-  valueToCompare,
-  onSubmit,
-  onClose,
-  i18n = (f: string) => f
-}: ModalProps) {
+function RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {
   return (
     <div className={"flex items-center justify-center bg-white p-2"}>
-      <button
-        data-testid='customCloseModal'
-        className={"btn btn-outline-dark mx-2"}
-        onClick={onClose}
-      >
+      <button data-testid='customCloseModal' className={"btn btn-outline-dark mx-2"} onClick={onClose}>
         {i18n("Cancel")}
       </button>
       <button
@@ -45,11 +35,7 @@ export interface RemoveModalProps extends ModalProps {
   maxWidth?: string;
 }
 
-export function RemoveModal({
-  maxWidth = "300px",
-  children,
-  ...props
-}: PropsWithChildren<RemoveModalProps>) {
+export function RemoveModal({ maxWidth = "300px", children, ...props }: PropsWithChildren<RemoveModalProps>) {
   const { i18n = noop } = props;
   const [value, setValue] = useState();
 
@@ -70,11 +56,7 @@ export function RemoveModal({
           <strong>&quot;{props.itemType?.toLowerCase()}&quot;</strong>&nbsp;
           {i18n("name")} <strong>&quot;{props.valueToCompare}&quot;</strong>.
         </div>
-        <InputText
-          name='remove'
-          value={value}
-          onChange={(name, value) => setValue(value)}
-        />
+        <InputText name='remove' value={value} onChange={(name, value) => setValue(value)} />
       </div>
     </Modal>
   );

package/src/components/pagination/pagination.component.spec.tsx

@@ -4,9 +4,7 @@ import { Sandbox } from "./pagination.stories";
 
 describe("Pagination", () => {
   it("should render the pagination component", () => {
-    const { container, getByTestId, queryAllByTestId } = render(
-      <Sandbox {...Sandbox.args} />
-    );
+    const { container, getByTestId, queryAllByTestId } = render(<Sandbox {...Sandbox.args} />);
     const paginationBtn = queryAllByTestId("pagination-button");
     const allBtnBlocks = paginationBtn.map((bloc) => bloc.textContent);
     const select = getByTestId("select_page");
@@ -20,13 +18,9 @@ describe("Pagination", () => {
 
   it("should call previousPage() callback", () => {
     const previousPageSpy = jest.fn();
-    const { queryAllByTestId } = render(
-      <Sandbox previousPage={previousPageSpy} canPreviousPage={true} />
-    );
+    const { queryAllByTestId } = render(<Sandbox previousPage={previousPageSpy} canPreviousPage={true} />);
     const paginationBtn = queryAllByTestId("pagination-button");
-    const btnPreviousPage = paginationBtn.find(
-      (btn) => btn.textContent === "Previous"
-    );
+    const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
 
     fireEvent.click(btnPreviousPage);
 
@@ -46,19 +40,17 @@ describe("Pagination", () => {
     const gotoPageSpy = jest.fn();
     let page: number;
 
-    const { queryAllByTestId } = render(
-      <Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />
-    );
+    const { queryAllByTestId } = render(<Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />);
     const paginationBtn = queryAllByTestId("pagination-button");
-    const buttonsPage = paginationBtn.filter(
-      (btn) => btn.textContent !== "Previous" && btn.textContent !== "Next"
-    );
+    const buttonsPage = paginationBtn.filter((btn) => btn.textContent !== "Previous" && btn.textContent !== "Next");
 
     buttonsPage.forEach((btn) => {
       if (btn.textContent !== "...") {
         page = +btn.textContent;
         fireEvent.click(btn);
+        // eslint-disable-next-line jest/no-conditional-expect
         expect(gotoPageSpy).toHaveBeenCalled();
+        // eslint-disable-next-line jest/no-conditional-expect
         expect(gotoPageSpy).toHaveBeenCalledWith(page - 1);
       }
     });
@@ -66,13 +58,7 @@ describe("Pagination", () => {
 
   it("should have Previous button disabled and not clickable", () => {
     const previousPageSpy = jest.fn();
-    const { getByText } = render(
-      <Sandbox
-        canPreviousPage={false}
-        previousPage={previousPageSpy}
-        {...Sandbox.args}
-      />
-    );
+    const { getByText } = render(<Sandbox canPreviousPage={false} previousPage={previousPageSpy} {...Sandbox.args} />);
     const previousButton = getByText("Previous");
 
     expect(previousButton).toHaveAttribute("disabled");
@@ -82,13 +68,7 @@ describe("Pagination", () => {
 
   it("should have Previous button NOT disabled and clickable", () => {
     const previousPageSpy = jest.fn();
-    const { getByText } = render(
-      <Sandbox
-        {...Sandbox.args}
-        canPreviousPage={true}
-        previousPage={previousPageSpy}
-      />
-    );
+    const { getByText } = render(<Sandbox {...Sandbox.args} canPreviousPage={true} previousPage={previousPageSpy} />);
 
     const previousButton = getByText("Previous");
 
@@ -99,9 +79,7 @@ describe("Pagination", () => {
 
   it("should have Next button disabled and not clickable", () => {
     const nextPageSpy = jest.fn();
-    const { getByText } = render(
-      <Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />
-    );
+    const { getByText } = render(<Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />);
 
     const nextButton = getByText("Next");
     expect(nextButton).toHaveAttribute("disabled");
@@ -111,9 +89,7 @@ describe("Pagination", () => {
 
   it("should have Next button NOT disabled and clickable", () => {
     const nextPageSpy = jest.fn();
-    const { getByText } = render(
-      <Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />
-    );
+    const { getByText } = render(<Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />);
     const nextButton = getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");
     fireEvent.click(nextButton);
@@ -123,9 +99,7 @@ describe("Pagination", () => {
   it("should correctly render select component", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    const { getByTestId } = render(
-      <Sandbox {...Sandbox.args} pageSizes={pageSizes} />
-    );
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} />);
     const selectComp = getByTestId("select_page");
     const selectChilds = Array.prototype.map.call(selectComp, function (child) {
       return +child.textContent;

package/src/components/pagination/pagination.component.tsx

@@ -1,11 +1,7 @@
 import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
 import { Select } from "../select/select.component";
-import {
-  getPageNumbers,
-  LEFT_PAGE,
-  RIGHT_PAGE
-} from "../table/utils/getPageNumbers";
+import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table/utils/getPageNumbers";
 
 function PaginationButton(
   props: PropsWithChildren<
@@ -17,25 +13,14 @@ function PaginationButton(
     } & Record<string, any>
   >
 ) {
-  const {
-    component: Component = "button",
-    children,
-    disabled,
-    active,
-    ...otherProps
-  } = props;
+  const { component: Component = "button", children, disabled, active, ...otherProps } = props;
 
   return (
     <Component
       {...otherProps}
       data-testid='pagination-button'
       disabled={disabled}
-      className={classnames(
-        "page-link",
-        disabled ? "disabled" : "",
-        active ? "" : "",
-        props.className
-      )}
+      className={classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)}
     >
       {children}
     </Component>
@@ -83,17 +68,10 @@ export function Pagination(props: PaginationProps) {
   const choices: any[] = pageSizes.map((value) => ({ value, label: value }));
 
   return (
-    <nav
-      aria-label='Page navigation'
-      className={classnames("pagination-group -mb-3", className)}
-    >
+    <nav aria-label='Page navigation' className={classnames("pagination-group -mb-3", className)}>
       <ul className='pagination mb-3 mr-3'>
         <li className={classnames("page-item", !canPreviousPage && "disabled")}>
-          <PaginationButton
-            tabIndex={-1}
-            disabled={!canPreviousPage}
-            onClick={() => previousPage()}
-          >
+          <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => previousPage()}>
             {i18n("Previous")}
           </PaginationButton>
         </li>
@@ -109,15 +87,8 @@ export function Pagination(props: PaginationProps) {
 
           const active = page - 1 === pageIndex;
           return (
-            <li
-              className={classnames("page-item", active && "active")}
-              key={page}
-            >
-              <PaginationButton
-                tabIndex={pageIndex}
-                active={active}
-                onClick={() => gotoPage(page - 1)}
-              >
+            <li className={classnames("page-item", active && "active")} key={page}>
+              <PaginationButton tabIndex={pageIndex} active={active} onClick={() => gotoPage(page - 1)}>
                 {page}
               </PaginationButton>
             </li>
@@ -125,11 +96,7 @@ export function Pagination(props: PaginationProps) {
         })}
 
         <li className={classnames("page-item", !canNextPage && "disabled")}>
-          <PaginationButton
-            tabIndex={pageNumbers.length}
-            disabled={!canNextPage}
-            onClick={() => nextPage()}
-          >
+          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => nextPage()}>
             {i18n("Next")}
           </PaginationButton>
         </li>

package/src/components/pagination/pagination.stories.tsx

@@ -17,11 +17,7 @@ export const Sandbox = (args: any) => {
 
   return (
     <div>
-      <Pagination
-        {...args}
-        pageIndex={currentPageIndex}
-        gotoPage={setPageIndex}
-      />
+      <Pagination {...args} pageIndex={currentPageIndex} gotoPage={setPageIndex} />
     </div>
   );
 };

package/src/components/react-component/reactComponent.component.tsx

@@ -15,11 +15,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * @param data - The submission data where this component's data exists.
    */
   // eslint-disable-next-line no-useless-constructor
-  constructor(
-    component: ComponentSchema,
-    options: any,
-    data: Submission<Data>
-  ) {
+  constructor(component: ComponentSchema, options: any, data: Submission<Data>) {
     super(component, options, data);
   }
 
@@ -150,13 +146,9 @@ export class ReactComponent<Data = any> extends Components.components.field {
   updateValue = (value?: Data, flags?: Record<string, any>) => {
     flags = flags || {};
 
-    const newValue =
-      value === undefined || value === null ? this.getValue() : value;
+    const newValue = value === undefined || value === null ? this.getValue() : value;
 
-    const changed =
-      newValue !== undefined
-        ? this.hasChanged(newValue, this.dataValue)
-        : false;
+    const changed = newValue !== undefined ? this.hasChanged(newValue, this.dataValue) : false;
 
     this.dataValue = Array.isArray(newValue) ? [...newValue] : newValue;