@griddo/ax 1.63.3 → 1.64.0

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

@@ -8,7 +8,10 @@ const IconWrapper = styled.div<{ error: boolean | undefined; readonly: boolean |
   border-bottom: ${(p) => (p.readonly === true ? `none` : `1px solid`)};
   border-color: ${(p) => (p.error === true ? p.theme.color.error : p.theme.color.uiLine)};
   border-radius: ${(p) => `0 ${p.theme.radii.s} ${p.theme.radii.s} 0`};
-  width: ${(p) => (p.readonly === true ? `calc(${p.theme.spacing.xs} * 2  + ${p.theme.spacing.s})` : `calc(${p.theme.spacing.xs} * 2  + ${p.theme.spacing.m})`)};
+  width: ${(p) =>
+    p.readonly === true
+      ? `calc(${p.theme.spacing.xs} * 2  + ${p.theme.spacing.s})`
+      : `calc(${p.theme.spacing.xs} * 2  + ${p.theme.spacing.m})`};
   button {
     position: absolute;
     top: 50%;
@@ -21,7 +24,13 @@ const IconWrapper = styled.div<{ error: boolean | undefined; readonly: boolean |
   }
 `;
 
-const Input = styled.input<{ error?: boolean; button?: boolean; icon?: boolean; hasPrefix: boolean; prefixWidth: number }>`
+const Input = styled.input<{
+  error?: boolean;
+  button?: boolean;
+  icon?: boolean;
+  hasPrefix: boolean;
+  prefixWidth: number;
+}>`
   flex: 1;
   border-top: 1px solid;
   border-right: ${(p) => (p.button ? `none` : `1px solid`)};
@@ -31,9 +40,9 @@ const Input = styled.input<{ error?: boolean; button?: boolean; icon?: boolean;
   border-radius: ${(p) => (p.button ? `${p.theme.radii.s} 0 0 ${p.theme.radii.s}` : p.theme.radii.s)};
   background: ${(p) => p.theme.color.uiBackground02};
   padding-top: 0;
-  padding-right: ${(p) => p.icon ? `40px` : p.theme.spacing.s};
+  padding-right: ${(p) => (p.icon ? `40px` : p.theme.spacing.s)};
   padding-bottom: 0;
-  padding-left: ${(p) => p.hasPrefix ? `calc(${p.prefixWidth}px + 15px)` : p.theme.spacing.s};
+  padding-left: ${(p) => (p.hasPrefix ? `calc(${p.prefixWidth}px + 15px)` : p.theme.spacing.s)};
   height: ${(p) => p.theme.spacing.l};
   width: 100%;
   ${(p) => p.theme.textStyle.fieldContent};
@@ -57,8 +66,8 @@ const Input = styled.input<{ error?: boolean; button?: boolean; icon?: boolean;
   }
 
   &:disabled {
-    color: ${p => p.theme.color.interactiveDisabled};
-    border-color: ${p => p.theme.color.interactiveDisabled};
+    color: ${(p) => p.theme.color.interactiveDisabled};
+    border-color: ${(p) => p.theme.color.interactiveDisabled};
   }
 `;
 
@@ -73,7 +82,7 @@ const FieldWrapper = styled.div<{ error: boolean | undefined }>`
   }
 `;
 
-const BackgroundIcon  = styled.div<{ onClick?: any }>`
+const BackgroundIcon = styled.div<{ onClick?: any }>`
   position: absolute;
   right: ${(p) => p.theme.spacing.xs};
   top: 50%;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import UniqueCheck from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import "@testing-library/jest-dom";
+import { render, screen, cleanup } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const optionsArray = [
+  {
+    name: "option_1",
+    value: null,
+    title: "Option 1",
+  },
+  {
+    name: "option_2",
+    value: null,
+    title: "Option 2",
+  },
+];
+const initialValues = {
+  name: "",
+  value: null,
+  options: optionsArray,
+  onChange: jest.fn(),
+};
+
+describe("CheckField component rendering", () => {
+  it("should render the component CheckField", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <UniqueCheck {...initialValues} />
+      </ThemeProvider>
+    );
+
+    const checkFieldLabel = screen.getByTestId("checkFieldLabel");
+
+    expect(screen.getAllByTestId("checkFieldLabel")).toHaveLength(1);
+    expect(checkFieldLabel).toHaveTextContent("Option 1");
+  });
+});

package/src/components/Fields/UrlField/utils.tsx

@@ -15,12 +15,14 @@ const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
       }
       if (module.elements) {
         module.elements.forEach((element: any) => {
-          element.componentModules && element.componentModules.forEach((component: any) => {
-            if (component.anchorID && component.anchorID.trim() !== "") {
-              const option = { value: component.anchorID, label: component.anchorID };
-              options.push(option);
-            }
-          });
+          element.componentModules &&
+            Array.isArray(element.componentModules) &&
+            element.componentModules.forEach((component: any) => {
+              if (component.anchorID && component.anchorID.trim() !== "") {
+                const option = { value: component.anchorID, label: component.anchorID };
+                options.push(option);
+              }
+            });
         });
       }
     });

package/src/components/FieldsBehavior/index.tsx

@@ -27,7 +27,6 @@ const FieldsBehavior = (props: any): JSX.Element => {
     editorID,
     objKey,
   } = props;
-
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [errorField, setErrorField] = useState(false);
   const [message, setMessage] = useState(helptext);
@@ -72,7 +71,6 @@ const FieldsBehavior = (props: any): JSX.Element => {
     }
     setErrorField(!isValid);
   };
-
   return (
     <S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle} id={objKey}>
       <S.Content error={errorField}>

package/src/components/FieldsBehavior/style.tsx

@@ -1,19 +1,19 @@
 import styled from "styled-components";
 
 export const Label = styled.label`
-  ${(p) => p.theme.textStyle.fieldLabel};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
+  ${(p) => p.theme.textStyle?.fieldLabel};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
   display: block;
-  margin-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing?.xs};
 `;
 
 export const Asterisk = styled.span`
-  color: ${(p) => p.theme.color.error};
+  color: ${(p) => p.theme.color?.error};
 `;
 
 export const HelpText = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
 `;
 
 export const Header = styled.div`
@@ -32,15 +32,15 @@ export const Icons = styled.div`
 
 export const Wrapper = styled.div<{ error: boolean | undefined; showTitle: boolean | undefined }>`
   position: relative;
-  margin-bottom: ${(p) => p.theme.spacing.m};
-  padding-top: ${(p) => p.showTitle ? p.theme.spacing.m : 0};
+  margin-bottom: ${(p) => p.theme.spacing?.m};
+  padding-top: ${(p) => (p.showTitle ? p.theme.spacing?.m : 0)};
   width: 100%;
 
   ${HelpText} {
-    color: ${(p) => (p.error === true ? p.theme.color.error : p.theme.color.textMediumEmphasis)};
+    color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
   }
   ${Label} {
-    color: ${(p) => (p.error === true ? p.theme.color.error : p.theme.color.textMediumEmphasis)};
+    color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
   }
 
   &:hover > .fieldHeader ${Icons} {
@@ -48,25 +48,25 @@ export const Wrapper = styled.div<{ error: boolean | undefined; showTitle: boole
   }
 
   &.filled {
-    padding-top: ${(p) => p.showTitle ? `calc(${p.theme.spacing.m} + ${p.theme.spacing.s})` : p.theme.spacing.s};
-    padding-left: ${(p) => p.theme.spacing.s};
-    padding-right: ${(p) => p.theme.spacing.s};
-    padding-bottom: ${(p) => p.theme.spacing.xs};
-    background-color: ${(p) => p.theme.color.uiBarBackground};
-    border-radius: ${(p) => p.theme.radii.s};
-    box-shadow: ${(p) => p.theme.shadow.shadowS};
+    padding-top: ${(p) => (p.showTitle ? `calc(${p.theme.spacing?.m} + ${p.theme.spacing?.s})` : p.theme.spacing?.s)};
+    padding-left: ${(p) => p.theme.spacing?.s};
+    padding-right: ${(p) => p.theme.spacing?.s};
+    padding-bottom: ${(p) => p.theme.spacing?.xs};
+    background-color: ${(p) => p.theme.color?.uiBarBackground};
+    border-radius: ${(p) => p.theme.radii?.s};
+    box-shadow: ${(p) => p.theme.shadow?.shadowS};
 
     ${Header} {
-      top: ${(p) => p.theme.spacing.s};
-      left: ${(p) => p.theme.spacing.s};
+      top: ${(p) => p.theme.spacing?.s};
+      left: ${(p) => p.theme.spacing?.s};
     }
   }
 `;
 
 export const Content = styled.div<{ error: boolean | undefined }>`
   &:focus-within {
-      & + div label {
-        color: ${(p) => (p.error === true ? p.theme.color.error : p.theme.color.interactive01)};
-      }
+    & + div label {
+      color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.interactive01)};
     }
+  }
 `;

package/src/components/Gallery/GalleryFilters/Orientation/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const Orientation = styled(Header) <{ isActive: boolean }>`
+const Orientation = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 90px;
   justify-content: center;
   flex-wrap: nowrap;

package/src/components/Gallery/GalleryFilters/SortBy/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const SortBy = styled(Header) <{ isActive: boolean }>`
+const SortBy = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 100%;
   cursor: pointer;
   &:hover {

package/src/components/Icon/index.tsx

@@ -8,23 +8,25 @@ const getImage = (name: string) => {
   }
 };
 const Icon = (props: IProps) => {
-    const name = props.name && props.name
+  const name =
+    props.name &&
+    props.name
       .replace(".svg", "")
       .split("-")
       .map((type: any) => type.charAt(0).toUpperCase() + type.slice(1))
       .join("");
 
-    const size = props.size ? props.size : "22";
-    const fill = props.fill ? props.fill : "black";
+  const size = props.size ? props.size : "22";
+  const fill = props.fill ? props.fill : "black";
 
-    const Svg = getImage(name);
+  const Svg = getImage(name);
 
-    if (Svg) {
-      return <Svg height={size} width={size} viewBox="0 0 24 24" fill={fill} />;
-    }
+  if (Svg) {
+    return <Svg data-testid="iconComponent" height={size} width={size} viewBox="0 0 24 24" fill={fill} />;
+  }
 
-    return null;
-}
+  return null;
+};
 
 interface IStateProps {
   name: string;
@@ -34,4 +36,4 @@ interface IStateProps {
 
 type IProps = IStateProps;
 
-export default Icon;
+export default Icon;

package/src/components/IconAction/index.tsx

@@ -13,7 +13,13 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
   };
 
   return (
-    <S.Button disabled={disabled} onClick={handleOnClick} size={size} inversed={inversed}>
+    <S.Button
+      data-testid="iconActionComponent"
+      disabled={disabled}
+      onClick={handleOnClick}
+      size={size}
+      inversed={inversed}
+    >
       <S.Icon>
         <Icon name={icon} />
       </S.Icon>

package/src/components/IconAction/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Button = styled.button<{ size: string | undefined; inversed?: boolean; disabled?:boolean  }>`
+export const Button = styled.button<{ size: string | undefined; inversed?: boolean; disabled?: boolean }>`
   background: transparent;
   border: none;
   border-radius: 50%;
@@ -8,9 +8,9 @@ export const Button = styled.button<{ size: string | undefined; inversed?: boole
   cursor: pointer;
   font-size: 0;
   outline: transparent;
-  padding: ${(p) => p.theme.spacing.xxs};
+  padding: ${(p) => p.theme.spacing?.xxs};
   position: relative;
-  pointer-events: ${(p) => p.disabled ? "none" : "auto"};
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
   :before {
     content: "";
     border-radius: 50%;
@@ -23,15 +23,15 @@ export const Button = styled.button<{ size: string | undefined; inversed?: boole
     transition: opacity 0.1s;
   }
   :hover:before {
-    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    background-color: ${(p) => p.theme.color?.overlayHoverPrimary};
     opacity: 1;
   }
   :focus:before {
-    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
+    background-color: ${(p) => p.theme.color?.overlayFocusPrimary};
     opacity: 1;
   }
   :active:before {
-    background-color: ${(p) => p.theme.color.overlayPressedPrimary};
+    background-color: ${(p) => p.theme.color?.overlayPressedPrimary};
     opacity: 1;
   }
   :disabled {
@@ -43,15 +43,15 @@ export const Button = styled.button<{ size: string | undefined; inversed?: boole
     }
     svg {
       path {
-        fill: ${(p) => p.theme.color.interactiveDisabled};
+        fill: ${(p) => p.theme.color?.interactiveDisabled};
       }
     }
   }
   svg {
-    width: ${(p) => (p.size === "s" ? p.theme.spacing.s : p.theme.spacing.m)};
-    height: ${(p) => (p.size === "s" ? p.theme.spacing.s : p.theme.spacing.m)};
+    width: ${(p) => (p.size === "s" ? p.theme.spacing?.s : p.theme.spacing?.m)};
+    height: ${(p) => (p.size === "s" ? p.theme.spacing?.s : p.theme.spacing?.m)};
     path {
-      fill: ${(p) => (p.inversed ? p.theme.color.textHighEmphasisInverse : p.theme.color.interactive01)};
+      fill: ${(p) => (p.inversed ? p.theme.color?.textHighEmphasisInverse : p.theme.color?.interactive01)};
     }
   }
 `;

package/src/components/SearchField/index.tsx

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import * as S from "./style";
 
 const SearchField = (props: IProps): JSX.Element => {
-  const { onChange, placeholder, closeOnInactive = false } = props;
+  const { onChange, placeholder, closeOnInactive = false, searchOnEnter = true, disabled = false } = props;
 
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -28,10 +28,10 @@ const SearchField = (props: IProps): JSX.Element => {
 
   const handleClick = () => {
     closeOnInactive ? handleClose() : handleClear();
-  }
+  };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
+    if (!searchOnEnter || e.key === "Enter") {
       onChange(inputValue);
     }
   };
@@ -49,21 +49,22 @@ const SearchField = (props: IProps): JSX.Element => {
             onKeyDown={handleKeyDown}
             placeholder={placeholder}
             closeOnInactive={closeOnInactive}
+            disabled={disabled}
             autoFocus
           />
-          {inputValue.trim() !== "" && <S.HelpText>Press ENTER</S.HelpText>}
+          {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
           {closeOnInactive || inputValue.length > 0 ? (
             <S.IconCloseWrapper onClick={handleClick}>
               <Icon name="close" size="24" />
             </S.IconCloseWrapper>
           ) : (
-              <S.IconSearchWrapper>
-                <Icon name="search" size="24" />
+            <S.IconSearchWrapper disabled={disabled}>
+              <Icon name="search" size="24" />
             </S.IconSearchWrapper>
           )}
         </S.FieldWrapper>
       ) : (
-        <S.IconSearchWrapper onClick={toggleField}>
+        <S.IconSearchWrapper disabled={disabled} onClick={toggleField}>
           <Icon name="search" size="24" />
         </S.IconSearchWrapper>
       )}
@@ -75,6 +76,8 @@ interface IProps {
   onChange(query: string): void;
   placeholder?: string;
   closeOnInactive?: boolean;
+  searchOnEnter?: boolean;
+  disabled?: boolean;
 }
 
-export default SearchField;
+export default SearchField;

package/src/components/SearchField/style.tsx

@@ -5,29 +5,33 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
-const FieldWrapper = styled.div`
-`;
+const FieldWrapper = styled.div``;
 
-const Input = styled.input<{ closeOnInactive: boolean }>`
+const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean }>`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
   background-color: ${(p) => p.theme.color.interactiveBackground};
   width: 100%;
   height: ${(p) => p.theme.spacing.l};
   padding-left: ${(p) => p.theme.spacing.xs};
-  border-color: ${(p) => p.closeOnInactive ? p.theme.color.interactive01 : p.theme.color.uiLine};
-  border-width: ${(p) => p.closeOnInactive ? "0 0 1px" : "1px"};
+  border-color: ${(p) =>
+    p.disabled
+      ? p.theme.color.interactiveDisabled
+      : p.closeOnInactive
+      ? p.theme.color.interactive01
+      : p.theme.color.uiLine};
+  border-width: ${(p) => (p.closeOnInactive ? "0 0 1px" : "1px")};
   border-style: solid;
-  border-radius: ${(p) => p.closeOnInactive ? 0 : p.theme.radii.s};
+  border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
 
   &:active,
   &:focus {
     outline: none;
-    border-color: ${(p) => p.theme.color.interactive01};
+    border-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
   }
 `;
 
-const IconSearchWrapper = styled.div<{ onClick?: () => void }>`
+const IconSearchWrapper = styled.div<{ onClick?: () => void; disabled: boolean }>`
   position: absolute;
   right: ${(p) => p.theme.spacing.xxs};
   top: 50%;
@@ -35,6 +39,11 @@ const IconSearchWrapper = styled.div<{ onClick?: () => void }>`
   height: ${(p) => p.theme.spacing.m};
   cursor: ${(p) => (p.onClick ? "pointer" : "default")};
   transform: translateY(-50%);
+  svg {
+    path {
+      fill: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
+    }
+  }
 `;
 
 const HelpText = styled.div`
@@ -49,12 +58,12 @@ const HelpText = styled.div`
 
 const IconCloseWrapper = styled.div`
   position: absolute;
-  right: ${p => p.theme.spacing.xxs};
+  right: ${(p) => p.theme.spacing.xxs};
   top: 50%;
-  width: ${p => p.theme.spacing.m};
-  height: ${p => p.theme.spacing.m};
+  width: ${(p) => p.theme.spacing.m};
+  height: ${(p) => p.theme.spacing.m};
   cursor: pointer;
   transform: translateY(-50%);
 `;
 
-export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, IconCloseWrapper };
+export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, IconCloseWrapper };

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -62,7 +62,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
     filterItems("categories", queryFilters);
   };
 
-  const isActive = !areEquals(selectedValue, initialState);
+  const isActive = !areEquals(selectedValue, [selectAllOption]);
 
   const Header = () => (
     <S.HeaderWrapper isActive={isActive}>

package/src/components/TableFilters/CategoryFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const HeaderWrapper = styled(Header)<{ isActive: boolean }>`
+const HeaderWrapper = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 150px;
   justify-content: center;
   &:hover {

package/src/components/TableFilters/DateFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const Date = styled(Header) <{ isActive: boolean }>`
+const Date = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 100px;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};

package/src/components/TableFilters/LiveFilter/index.tsx

@@ -9,7 +9,6 @@ import * as S from "./style";
 
 const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   const { filterItems, value, isStructuredData } = props;
-
   const filters: IFilterValue[] = [
     {
       name: "all",
@@ -27,7 +26,8 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   const structuredDataStatus = ["offline", "active"];
 
   useEffect(() => {
-    setSelectedValue([value]);
+    setSelectedValue([...storedValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   const getLiveStatusValues = async () => {

package/src/components/TableFilters/LiveFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const LiveOptions = styled(Header)<{ isActive: boolean }>`
+const LiveOptions = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 80px;
   justify-content: center;
   &:hover {

package/src/components/TableFilters/NameFilter/style.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const NameHeader = styled(Header)<{ isActive: boolean }>`
+const NameHeader = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 100%;
   min-width: 88px;
   &:hover {

package/src/components/TableFilters/SiteFilter/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals, isNumber, isReqOk } from "@ax/helpers";
@@ -8,23 +8,33 @@ import { IFilterValue } from "@ax/types";
 import * as S from "./style";
 
 const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
-  const { filterItems, value, pointer, center = true } = props;
+  const {
+    filterItems,
+    value,
+    pointer,
+    center = true,
+    label = "Site",
+    selectAllOption = "all",
+    filters = [
+      {
+        name: "all",
+        value: "all",
+        title: "All",
+      },
+    ],
+  } = props;
 
-  const filters: IFilterValue[] = [
-    {
-      name: "all",
-      value: "all",
-      title: "All",
-    },
-  ];
-
-  const storedValue = value && value[pointer] ? value[pointer].split(",") : [];
-  const parsedValue = storedValue.map((value: any) => (isNumber(value) ? parseInt(value) : value));
-  const [initialState] = useState(parsedValue);
-  const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState([...initialState]);
+  const initialState = [selectAllOption];
+  const [selectedValue, setSelectedValue] = useState([selectAllOption]);
   const [options, setOptions] = useState(filters);
 
+  useLayoutEffect(() => {
+    const storedValue = value && value[pointer] ? value[pointer].split(",") : [];
+    const parsedValue = storedValue.map((value: any) => (isNumber(value) ? parseInt(value) : value));
+    setSelectedValue(parsedValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   const getSelectSites = async () => {
     try {
       const items = await selects.getSelectSites();
@@ -39,14 +49,15 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
 
   useEffect(() => {
     getSelectSites().then((items) => {
-      items.forEach((item: { value: string; label: string }) => {
-        const newFilter = {
-          name: item.value,
-          value: item.value,
-          title: item.label,
-        };
-        filters.push(newFilter);
-      });
+      items &&
+        items.forEach((item: { value: string; label: string }) => {
+          const newFilter = {
+            name: item.value,
+            value: item.value,
+            title: item.label,
+          };
+          filters.push(newFilter);
+        });
       setOptions(filters);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +76,7 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
 
   const Header = () => (
     <S.Site isActive={isActive} center={center}>
-      Site
+      {label}
       <S.IconsWrapper>
         <Icon name="Filter" size="16" />
       </S.IconsWrapper>
@@ -87,6 +98,9 @@ interface ISiteFilterProps {
   value: any;
   pointer: string;
   center?: boolean;
+  label?: string;
+  selectAllOption?: string;
+  filters?: IFilterValue[];
 }
 
 export default SiteFilter;