@griddo/ax 1.61.7 → 1.62.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.61.7",
+  "version": "1.62.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -244,5 +244,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9b014749b0e843961331bd3c95724e2449f67a8d"
+  "gitHead": "df32ddb1e4be034954e3f1f8af032af0e56453c6"
 }

package/src/components/ActionMenu/style.tsx

@@ -43,6 +43,7 @@ export const ActionItem = styled.li<{ disabled?: boolean; color?: boolean }>`
   color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textMediumEmphasis)};
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
+  text-align: left;
   &:focus {
     background: ${(p) => (p.disabled ? "transparent" : p.theme.color.overlayFocusPrimary)};
   }

package/src/components/ConfigPanel/Form/ConnectedField/NavConnectedField/index.tsx

@@ -23,6 +23,7 @@ const NavConnectedField = (props: any) => {
     currentDefaultsContent,
     activatedTemplates,
     menus,
+    theme,
   } = props;
 
   const updateValue = (key: string, value: any) => {
@@ -54,7 +55,7 @@ const NavConnectedField = (props: any) => {
 
   if (isConditional) {
     const innerActions = { ...actions, updateValue, goTo };
-    innerFields = getInnerFields(field.fields, innerActions, selectedContent, isTemplateActivated);
+    innerFields = getInnerFields(field.fields, innerActions, selectedContent, isTemplateActivated, theme);
   }
 
   return (
@@ -72,6 +73,7 @@ const NavConnectedField = (props: any) => {
       lang={lang}
       disabled={isDisabled}
       innerFields={innerFields}
+      theme={theme}
     />
   );
 };

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -24,9 +24,11 @@ const Field = (props: IProps): JSX.Element => {
     error,
     deleteError,
     errors,
+    theme,
   } = props;
 
   const isGroup = field.type === "FieldGroup";
+  const isCollapsed = isGroup && field.collapsed;
   const isConditional = field.type === "ConditionalField";
   const isArrayGroup = field.type === "ArrayFieldGroup";
 
@@ -34,11 +36,21 @@ const Field = (props: IProps): JSX.Element => {
 
   if (isGroup || isConditional || isArrayGroup) {
     const innerActions = { ...actions, updateValue, goTo };
-    innerFields = getInnerFields(field.fields, innerActions, selectedContent, isTemplateActivated, errors, deleteError);
+    innerFields = getInnerFields(
+      field.fields,
+      innerActions,
+      selectedContent,
+      isTemplateActivated,
+      theme,
+      errors,
+      deleteError
+    );
   }
 
   return isGroup ? (
-    <FieldGroup title={field.title}>{innerFields}</FieldGroup>
+    <FieldGroup title={field.title} collapsed={isCollapsed}>
+      {innerFields}
+    </FieldGroup>
   ) : (
     <FieldContainer
       whiteList={whiteList}
@@ -59,6 +71,7 @@ const Field = (props: IProps): JSX.Element => {
       categories={categories}
       error={error}
       deleteError={deleteError}
+      theme={theme}
     />
   );
 };
@@ -82,6 +95,8 @@ interface IProps {
   error?: IErrorItem;
   deleteError(error: IErrorItem): void;
   errors: IErrorItem[];
+  collapsed?: boolean;
+  theme: string;
 }
 
 export default Field;

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -24,6 +24,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     isTemplateActivated,
     deleteError,
     errors,
+    theme,
   } = props;
 
   const isConfig = selectedTab === "config";
@@ -90,6 +91,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
               error={error}
               deleteError={deleteError}
               errors={errors}
+              theme={theme}
             />
           );
         })}
@@ -113,6 +115,7 @@ interface IProps {
   isTemplateActivated: boolean;
   deleteError(error: IErrorItem): void;
   errors: IErrorItem[];
+  theme: string;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -33,6 +33,7 @@ const PageConnectedField = (props: any) => {
     errors,
     deleteError,
     isGlobal,
+    theme,
   } = props;
 
   const isTemplate = field.type === "template";
@@ -153,6 +154,7 @@ const PageConnectedField = (props: any) => {
         isTemplateActivated={isTemplateActivated}
         deleteError={deleteError}
         errors={errors}
+        theme={theme}
       />
     );
   }
@@ -176,6 +178,7 @@ const PageConnectedField = (props: any) => {
       error={error}
       deleteError={deleteError}
       errors={errors}
+      theme={theme}
     />
   );
 };

package/src/components/ConfigPanel/Form/index.tsx

@@ -6,7 +6,7 @@ import { Tabs } from "@ax/components";
 import ConnectedField from "./ConnectedField";
 
 export const Form = (props: IProps): JSX.Element => {
-  const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal } = props;
+  const { schema, selectedTab, setSelectedTab, actions, isPage, isGlobal, theme } = props;
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
 
@@ -28,6 +28,7 @@ export const Form = (props: IProps): JSX.Element => {
         componentType={schema.schemaType}
         isPage={isPage}
         isGlobal={isGlobal}
+        theme={theme}
       />
     );
   };
@@ -67,6 +68,7 @@ interface IProps {
   setSelectedContent(editorID: number): void;
   isPage: boolean;
   isGlobal?: boolean;
+  theme: string;
 }
 
 export default Form;

package/src/components/ConfigPanel/NavigationForm/Field/index.tsx

@@ -10,7 +10,7 @@ import * as S from "./style";
 const pageEditorID = 0;
 
 const Field = (props: IProps) => {
-  const { type, defaults, updateEditorContent, selectedContent } = props;
+  const { type, defaults, updateEditorContent, selectedContent, theme } = props;
   const { isOpen, toggleModal } = useModal();
 
   const options = defaults.filter((component: any) => component.type === type);
@@ -57,6 +57,7 @@ const Field = (props: IProps) => {
           toggleModal={toggleModal}
           isOpen={isOpen}
           setDefault={setDefault}
+          theme={theme}
         />
       )}
     </>
@@ -65,6 +66,7 @@ const Field = (props: IProps) => {
 
 interface IField {
   type: string;
+  theme: string;
 }
 
 interface IStateProps {

package/src/components/ConfigPanel/NavigationForm/index.tsx

@@ -8,7 +8,7 @@ import * as S from "./style";
 const noteText = "To create a new header or configure one of them, go to Navigation/Navigations modules";
 
 const NavigationForm = (props: IProps): JSX.Element => {
-  const { schema } = props;
+  const { schema, theme } = props;
 
   return (
     <>
@@ -17,7 +17,7 @@ const NavigationForm = (props: IProps): JSX.Element => {
         <NoteField value={{ text: noteText }} />
       </S.FieldWrapper>
       <S.FieldWrapper>
-        <Field type={schema.type} />
+        <Field type={schema.type} theme={theme} />
       </S.FieldWrapper>
     </>
   );
@@ -25,6 +25,7 @@ const NavigationForm = (props: IProps): JSX.Element => {
 
 interface IProps {
   schema: any;
+  theme: string;
 }
 
 export default NavigationForm;

package/src/components/ConfigPanel/index.tsx

@@ -30,6 +30,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     setHistoryPush,
     isPreviewMode,
     userEditing,
+    theme,
   } = props;
 
   if (isLoading || isEmptyObj(schema)) {
@@ -43,7 +44,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     if (isPreviewMode) {
       return <PreviewForm setSelectedTab={setSelectedTab} selectedTab={selectedTab} userEditing={userEditing} />;
     } else if (showNavigationForm) {
-      return <NavigationForm schema={schema} />;
+      return <NavigationForm schema={schema} theme={theme} />;
     } else if (isGlobalPageNotEditable) {
       return (
         <GlobalPageForm
@@ -65,6 +66,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
           selectedTab={selectedTab}
           isPage={isPage}
           isGlobal={isGlobal}
+          theme={theme}
         />
       );
     }
@@ -102,6 +104,7 @@ interface IStateProps {
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   isPreviewMode?: boolean;
   userEditing?: IUserEditing | null;
+  theme: string;
 }
 
 export default ConfigPanel;

package/src/components/ElementsTooltip/index.tsx

@@ -3,14 +3,21 @@ import { trimText } from "@ax/helpers";
 
 import * as S from "./style";
 
-const ExpandedTooltip = (props: IProps): JSX.Element => {
-  const { elements, maxChar, defaultElements = 1, colors, rounded = false } = props;
+const ElementsTooltip = (props: IProps): JSX.Element => {
+  const { elements, maxChar, defaultElements = 1, colors, rounded = false, elementsPerRow = 1 } = props;
 
   if (!elements) return <></>;
 
   const visibleElements = elements?.slice(0, defaultElements);
   const remainingElements = elements.length - defaultElements;
 
+  const elementsRows: string[][] = [];
+  elements.forEach((element, idx) => {
+    const row = Math.floor(idx / elementsPerRow);
+    const isNewRow = idx % elementsPerRow === 0;
+    elementsRows[row] = isNewRow ? [element] : [...elementsRows[row], element];
+  })
+
   return (
     <S.Wrapper>
       {visibleElements.map((fullElement, idx) => {
@@ -26,12 +33,18 @@ const ExpandedTooltip = (props: IProps): JSX.Element => {
         <S.Element rounded={rounded}>
           +{remainingElements}
           <S.Tooltip>
-            {elements.map((element, idx) => {
-              const color = colors && colors[element] ? colors[element] : undefined;
+            {elementsRows.map((row, idx) => {
               return (
-                <S.Element key={idx} color={color} rounded={rounded}>
-                  {element}
-                </S.Element>
+                <S.Row key={idx}>
+                  {row.map((element, idx) => {
+                    const color = colors && colors[element] ? colors[element] : undefined;
+                    return (
+                      <S.Element key={idx} color={color} rounded={rounded}>
+                        {element}
+                      </S.Element>
+                    );
+                  })}
+                </S.Row>
               );
             })}
           </S.Tooltip>
@@ -47,6 +60,7 @@ interface IProps {
   maxChar?: number;
   colors?: any;
   rounded?: boolean;
+  elementsPerRow?: number;
 }
 
-export default ExpandedTooltip;
+export default ElementsTooltip;

package/src/components/ElementsTooltip/style.tsx

@@ -9,14 +9,12 @@ const Tooltip = styled.div`
   position: absolute;
   z-index: 1;
   display: none;
-  flex-flow: row wrap;
   padding: ${(p) => p.theme.spacing.s};
   top: -50%;
   transform: translateX(-50%);
   box-shadow: ${(p) => p.theme.shadow.shadowL};
   background-color: ${(p) => p.theme.colors.uiBarBackground};
   border-radius: ${(p) => p.theme.radii.s};
-  max-width: 350px;
 `;
 
 const Element = styled.div<{ color?: string; rounded: boolean }>`
@@ -30,8 +28,12 @@ const Element = styled.div<{ color?: string; rounded: boolean }>`
   white-space: nowrap;
 
   &:hover > ${Tooltip} {
-    display: flex;
+    display: block;
   }
 `;
 
-export { Wrapper, Element, Tooltip };
+const Row = styled.div`
+  display: flex;
+`;
+
+export { Wrapper, Element, Tooltip, Row };

package/src/components/FieldContainer/index.tsx

@@ -76,4 +76,5 @@ interface IProps {
   activatedModules?: string[];
   error?: any;
   deleteError?(error: any): void;
+  theme: string;
 }

package/src/components/Fields/AnalyticsField/PageAnalytics/atoms.tsx

@@ -51,12 +51,13 @@ const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Re
   }
 
   const isNullValue = dimensionValues.includes("null");
+  const fieldValue = values && dimension ? values[dimension.name] : "";
 
   return isNullValue ? (
     <FieldsBehavior
       title={dimension?.name}
       fieldType="TextField"
-      value={dimension ? values[dimension.name] : ""}
+      value={fieldValue}
       onChange={handleOnChange}
       placeholder="Type a variable"
     />
@@ -65,7 +66,7 @@ const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Re
       title={dimension?.name}
       fieldType="Select"
       options={options}
-      value={dimension ? values[dimension.name] : ""}
+      value={fieldValue}
       onChange={handleOnChange}
       placeholder="Select variable"
     />

package/src/components/Fields/AnalyticsField/PageAnalytics/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { NoteField, FieldsBehavior, FieldGroup } from "@ax/components";
+import { NoteField, FieldsBehavior } from "@ax/components";
 
 import { IAnalyticsFieldProps, IState } from "..";
 import { DimensionsGroup, DimensionsSelection } from "./atoms";
@@ -93,7 +93,7 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
   });
 
   return (
-    <FieldGroup title="Analytics Data Layer">
+    <>
       <NoteField value={{ text: noteText }} />
       <S.FieldWrapper>
         <FieldsBehavior
@@ -133,7 +133,7 @@ const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
           {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension }} />}
         </>
       )}
-    </FieldGroup>
+    </>
   );
 };
 

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/atoms.tsx

@@ -46,12 +46,13 @@ const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Re
   }
 
   const isNullValue = dimensionValues.includes("null");
+  const fieldValue = values && dimension ? values[dimension.name] : "";
 
   return isNullValue ? (
     <FieldsBehavior
       title={dimension?.name}
       fieldType="TextField"
-      value={dimension ? values[dimension.name] : ""}
+      value={fieldValue}
       onChange={handleOnChange}
       placeholder="Type a variable"
     />
@@ -60,7 +61,7 @@ const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Re
       title={dimension?.name}
       fieldType="Select"
       options={options}
-      value={dimension ? values[dimension.name] : ""}
+      value={fieldValue}
       onChange={handleOnChange}
       placeholder="Select variable"
     />

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 
-import { FieldsBehavior, FieldGroup } from "@ax/components";
+import { FieldsBehavior } from "@ax/components";
 
 import { IAnalyticsFieldProps, IState } from "..";
 import { getTemplateDimensions } from "../utils";
@@ -65,7 +65,7 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
   });
 
   return (
-    <FieldGroup title="Analytics Data Layer">
+    <>
       <TemplateDimensions dimensionNames={templateDimensions} {...{ analytics, state, setDimension }} />
       {dimensionOptions.length > 1 && (
         <>
@@ -83,7 +83,7 @@ const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
           {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension }} />}
         </>
       )}
-    </FieldGroup>
+    </>
   );
 };
 

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

@@ -8,7 +8,7 @@ import { hex3to6 } from "./helpers";
 import * as S from "./style";
 
 const ColorPicker = (props: IProps): JSX.Element => {
-  const { value, onChange, error, colors, handleValidation } = props;
+  const { value, onChange, error, colors, handleValidation, theme } = props;
 
   const initialState = { color: value, inputValue: value };
   const reducer = useCallback((state: any, payload: any) => ({ ...state, ...payload }), []);
@@ -59,6 +59,30 @@ const ColorPicker = (props: IProps): JSX.Element => {
 
   const icon = isVisible ? "close" : "colorPicker";
 
+  const defaultOptions = (vusOptions: Record<string, unknown>[]) => {
+    return !vusOptions.find((entry) => entry.theme);
+  };
+
+  const getOptions = (theme: string, colorOptions: any[] | undefined) => {
+    if (!colorOptions) return undefined;
+
+    const themes = colorOptions.filter((entry) => entry.theme).map((entry) => entry.theme);
+    const themeExists = themes.includes(theme);
+    const defaultsOptions = colorOptions.filter((entry) => typeof entry === "string");
+
+    // 1 - Si options solo tiene las defaults options (legacy) devuelve las defaults.
+    // 2 - Si options no tiene el theme, devuelve las defaults.
+    if (defaultOptions(colorOptions) || !themeExists) return defaultsOptions;
+
+    // Si options tiene el theme, devuelve las options de ese theme.
+    if (themeExists) {
+      const optionsObj = colorOptions.find((entry) => entry.theme === theme);
+      return optionsObj && optionsObj.options;
+    }
+
+    return [];
+  };
+
   return (
     <S.Wrapper ref={wrapper}>
       <S.InputWrapper>
@@ -75,7 +99,7 @@ const ColorPicker = (props: IProps): JSX.Element => {
           <IconAction icon={icon} size="s" onClick={togglePicker} />
         </S.IconWrapper>
       </S.InputWrapper>
-      {isVisible && <Picker value={state.color} onChange={handlePickerChange} colors={colors} />}
+      {isVisible && <Picker value={state.color} onChange={handlePickerChange} colors={getOptions(theme, colors)} />}
     </S.Wrapper>
   );
 };
@@ -83,9 +107,10 @@ const ColorPicker = (props: IProps): JSX.Element => {
 export interface IProps {
   value: string;
   error?: boolean;
-  colors?: string[];
+  colors?: string[] | Record<string, unknown>[];
   onChange: (newColor: string) => void;
   handleValidation?: (value: string, validators: Record<string, unknown>) => void;
+  theme: string;
 }
 
 export default memo(ColorPicker);

package/src/components/Fields/ComponentArray/MixableComponentArray/AddItemButton/index.tsx

@@ -3,7 +3,7 @@ import { useModal } from "@ax/hooks";
 import { IconAction, SideModal, Tooltip } from "@ax/components";
 
 const AddItemButton = (props: IProps) => {
-  const { handleClick, whiteList, isModuleArr, categories } = props;
+  const { handleClick, whiteList, isModuleArr, categories, theme } = props;
   const { isOpen, toggleModal } = useModal();
   const optionsType = isModuleArr ? "modules" : "components";
   const addAction = whiteList.length <= 1 ? () => handleClick(whiteList[0]) : toggleModal;
@@ -22,6 +22,7 @@ const AddItemButton = (props: IProps) => {
         toggleModal={toggleModal}
         isOpen={isOpen}
         handleClick={handleClick}
+        theme={theme}
         showSearch
       />
     </>
@@ -33,6 +34,7 @@ interface IProps {
   whiteList: any[];
   isModuleArr: boolean;
   categories?: any;
+  theme: string;
 }
 
 export default memo(AddItemButton);

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -24,6 +24,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     objKey,
     field,
     mandatory,
+    theme,
   } = props;
 
   const type = getTypefromKey(objKey);
@@ -70,6 +71,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
             categories={categories}
             handleClick={handleAdd}
             isModuleArr={isModuleArr}
+            theme={theme}
           />
         )}
       </S.ItemRow>
@@ -99,6 +101,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               disabled={disabled}
               canDuplicate={showAddItemButton && !isModuleDeactivated}
               parentKey={objKey}
+              theme={theme}
             />
           );
         })}
@@ -121,6 +124,7 @@ export interface IMixableComponentArrayProps {
   objKey: string;
   field: any;
   mandatory?: boolean;
+  theme: string;
 }
 
 export default MixableComponentArray;

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -24,6 +24,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
     objKey,
     field,
     mandatory,
+    theme,
   } = props;
 
   const type = getTypefromKey(objKey);
@@ -93,6 +94,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
               disabled={disabled}
               canDuplicate={showAddItemButton && !isModuleDeactivated}
               parentKey={objKey}
+              theme={theme}
             />
           );
         })}
@@ -116,6 +118,7 @@ export interface ISameComponentArrayProps {
   objKey: string;
   field: any;
   mandatory?: boolean;
+  theme: string;
 }
 
 export default SameComponentArray;

package/src/components/Fields/ComponentContainer/EmptyContainer/index.tsx

@@ -4,7 +4,7 @@ import { useModal } from "@ax/hooks";
 import { HiddenField, SideModal } from "@ax/components";
 
 const EmptyContainer = (props: IProps) => {
-  const { hasMultipleOptions, whiteList, handleAdd, goTo, componentOptions, title, categories } = props;
+  const { hasMultipleOptions, whiteList, handleAdd, goTo, componentOptions, title, categories, theme } = props;
   const { isOpen, toggleModal } = useModal();
 
   const handleClick = () => (hasMultipleOptions ? toggleModal() : goTo());
@@ -23,6 +23,7 @@ const EmptyContainer = (props: IProps) => {
           handleClick={handleAdd}
           isOpen={isOpen}
           componentOptions={componentOptions}
+          theme={theme}
         />
       )}
     </>
@@ -37,6 +38,7 @@ interface IProps {
   title?: string;
   categories?: any;
   handleAdd: any;
+  theme: string;
 }
 
 export default EmptyContainer;

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

@@ -27,6 +27,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     disabled,
     canDuplicate,
     parentKey,
+    theme
   } = props;
 
   let deleteModuleAction: any;
@@ -125,6 +126,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
       handleAdd={handleOptionClick}
       componentOptions={containerOptions}
       title={title}
+      theme={theme}
     />
   ) : (
     <>
@@ -155,6 +157,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
           isOpen={isOpen}
           componentOptions={containerOptions}
           current={currentComponent}
+          theme={theme}
         />
       )}
     </>
@@ -179,6 +182,7 @@ interface IComponentContainerProps {
   disabled?: boolean;
   canDuplicate?: boolean;
   parentKey?: string;
+  theme: string;
 }
 
 export default ComponentContainer;

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

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 
 import * as S from "./style";
 
-const FieldGroup = (props: IFieldsGroupProps) => {
-  const { title, children } = props;
-  const [isOpen, setIsOpen] = useState(true);
+const FieldGroup = (props: IFieldsGroupProps): React.ReactElement => {
+  const { title, children, collapsed } = props;
+  const [isOpen, setIsOpen] = useState(!collapsed);
 
   const handleClick = () => {
     setIsOpen(!isOpen);
@@ -25,4 +25,5 @@ export default FieldGroup;
 interface IFieldsGroupProps {
   title: string;
   children: any;
+  collapsed?: boolean;
 }