@griddo/ax 10.2.11 → 10.2.13

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

@@ -16,14 +16,14 @@ const Select = (props: ISelectProps): JSX.Element => {
     mandatory,
     onChange,
     alignRight,
+    maxWidth,
   } = props;
   const className = error ? `react-select-error ${type}` : type;
-  const emptyOption = { value: null, label: placeholder || "Empty" };
+  const emptyOption = { value: "", label: placeholder || "Empty" };
 
-  const isMandatory = !mandatory && type !== "inline";
-  const [hasEmptyOption, setHasEmptyOption] = useState(isMandatory);
+  const [hasEmptyOption, setHasEmptyOption] = useState(!mandatory);
 
-  const optionValues: any = hasEmptyOption ? [emptyOption, ...options] : options;
+  const optionValues: IOptionProps[] = hasEmptyOption ? [emptyOption, ...options] : options;
 
   const handleChange = (selectedValue: IOptionProps) => {
     onChange(selectedValue.value);
@@ -31,18 +31,13 @@ const Select = (props: ISelectProps): JSX.Element => {
 
   const handleInputChange = (newValue: string) => {
     const inputValue = newValue.replace(/\W/g, "");
-    setHasEmptyOption(isMandatory && inputValue.length === 0);
+    setHasEmptyOption(!mandatory && inputValue.length === 0);
     return inputValue;
   };
 
   // tslint:disable-next-line: no-shadowed-variable
-  const getObjectValue = (value: string | number | undefined, options: IOptionProps[]) => {
-    if (!value) {
-      return null;
-    } else {
-      return options.find((option) => option.value === value);
-    }
-  };
+  const getObjectValue = (value: string | undefined, options: IOptionProps[]) =>
+    options.find((option) => option.value === value);
 
   const searchable = type === "inline" || type === "mini" ? false : true;
 
@@ -50,7 +45,7 @@ const Select = (props: ISelectProps): JSX.Element => {
     <div data-testid="select-component">
       <S.StyledSelect
         name={name}
-        value={getObjectValue(value, optionValues)}
+        value={getObjectValue(value, optionValues) || ""}
         options={optionValues}
         isMulti={isMulti}
         isDisabled={disabled}
@@ -65,6 +60,7 @@ const Select = (props: ISelectProps): JSX.Element => {
         onInputChange={handleInputChange}
         alignRight={alignRight}
         aria-label={name}
+        maxWidth={maxWidth}
       />
     </div>
   );
@@ -83,6 +79,7 @@ export interface ISelectProps {
   mandatory?: boolean;
   alignRight?: boolean;
   onChange: (value: string) => void;
+  maxWidth?: number;
 }
 
 interface IOptionProps {

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

@@ -5,6 +5,7 @@ export const StyledSelect = styled(Select)<{
   isDisabled: boolean | undefined;
   error: boolean | undefined;
   alignRight: boolean | undefined;
+  maxWidth?: number;
 }>`
   ${(p) => p.theme.textStyle?.fieldContent};
   color: ${(p) => p.theme.color?.textHighEmphasis};
@@ -94,7 +95,7 @@ export const StyledSelect = styled(Select)<{
   }
 
   &.inline {
-    ${(p) => p.theme.textStyle?.uiS};
+    ${(p) => p.theme.textStyle.uiS};
     text-transform: capitalize;
 
     .react-select__control {
@@ -109,15 +110,20 @@ export const StyledSelect = styled(Select)<{
         .react-select__single-value {
           position: relative;
           transform: none;
-          color: ${(p) => p.theme.color?.interactive01};
-          overflow: visible;
+          color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)};
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          max-width: ${(p) => (p.maxWidth ? `${p.maxWidth}px` : `calc(${p.theme.spacing.xl} * 4)`)};
+          display: block;
+          overflow: hidden;
         }
       }
       .react-select__indicator {
+        color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)};
         padding: 0;
         svg {
-          width: ${(p) => p.theme.spacing?.s};
-          height: ${(p) => p.theme.spacing?.s};
+          width: ${(p) => p.theme.spacing.s};
+          height: ${(p) => p.theme.spacing.s};
         }
       }
       .react-select__input {
@@ -130,13 +136,13 @@ export const StyledSelect = styled(Select)<{
     .react-select__control--is-disabled {
       .react-select__value-container {
         .react-select__single-value {
-          color: ${(p) => p.theme.color?.interactiveDisabled};
+          color: ${(p) => p.theme.color.interactiveDisabled};
         }
       }
     }
 
     .react-select__menu {
-      ${(p) => p.theme.textStyle?.fieldContent};
+      ${(p) => p.theme.textStyle.fieldContent};
     }
   }
 

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

@@ -38,6 +38,7 @@ const TimeField = (props: IProps) => {
           onChange={handleSelectChange}
           type="inline"
           disabled={disabled}
+          mandatory={true}
         />
       </S.SelectWrapper>
       <S.IconWrapper>

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

@@ -2,7 +2,7 @@ import React from "react";
 import { CheckField } from "@ax/components";
 
 const UniqueCheck = (props: IProps) => {
-  const { name, value, options, onChange, disabled, inversed = false } = props;
+  const { name, value, options, onChange, disabled, inversed = false, className } = props;
   const uniqueOption = options[0];
 
   const handleChange = (changeEvt: ICheckEvent) => {
@@ -19,6 +19,7 @@ const UniqueCheck = (props: IProps) => {
       onChange={handleChange}
       disabled={disabled}
       inversed={inversed}
+      className={className}
     />
   );
 };
@@ -35,6 +36,7 @@ interface IProps {
   onChange: any;
   disabled?: boolean;
   inversed?: boolean;
+  className?: string;
 }
 
 interface ICheck {

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

@@ -218,7 +218,9 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
         handlePanel={handlePanel}
         secondary={inFloatingPanel}
       >
-        <PageFinder onClick={handleSetPage} isOpen={isOpen} />
+        <S.Wrapper>
+          <PageFinder onClick={handleSetPage} isOpen={isOpen} />
+        </S.Wrapper>
       </FloatingPanel>
     </S.UrlFieldWrapper>
   );

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

@@ -54,4 +54,9 @@ const AnchorWrapper = styled.div`
   margin-top: ${(p) => p.theme.spacing.s};
 `;
 
-export { PageSelectedWrapper, PageField, IconWrapper, AdvancedWrapper, AnchorWrapper, UrlFieldWrapper };
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
+export { PageSelectedWrapper, PageField, IconWrapper, AdvancedWrapper, AnchorWrapper, UrlFieldWrapper, Wrapper };

package/src/components/FloatingPanel/style.tsx

@@ -46,7 +46,6 @@ export const Wrapper = styled.section<{
 `;
 
 export const Content = styled.div`
-  padding: ${(p) => p.theme.spacing.m};
   height: 100%;
 `;
 

package/src/components/PageFinder/index.tsx

@@ -5,7 +5,7 @@ import { IContentType, IGlobalLanguage, IPage, IRootState, ISite } from "@ax/typ
 import { useDebounce } from "@ax/hooks";
 import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
 import { sites, structuredData } from "@ax/api";
-import { Loader, Pagination, TextField, Select, Button } from "@ax/components";
+import { Loader, Pagination, TextField, Select, Button, AsyncSelect } from "@ax/components";
 import SelectionListItem from "./SelectionListItem";
 
 import * as S from "./style";
@@ -13,11 +13,10 @@ import * as S from "./style";
 const PageFinder = (props: IPageFinderProps): JSX.Element => {
   const { onClick, currentSiteID, isOpen, allSites, lang, globalLangs, multiple, hideSites, pages } = props;
 
-  const siteOptions = allSites.map((site) => ({ label: site.name, value: site.id.toString() }));
   const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
 
   const initialState = {
-    site: currentSiteID || Number(siteOptions[0].value),
+    site: currentSiteID || allSites[0].id,
     lang: lang.id,
     type: "all",
     query: "",
@@ -44,7 +43,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   const resetQuery = () => setState((state) => ({ ...state, query: "" }));
 
-  const changeState = (key: string, value: string | number) => setState((state) => ({ ...state, [key]: value }));
+  const changeState = (key: string, value: string | number | null) => setState((state) => ({ ...state, [key]: value }));
 
   useEffect(() => {
     if (!isOpen) resetQuery();
@@ -187,14 +186,16 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
           onChange={(value) => changeState("lang", value)}
           value={state.lang.toString()}
           type="inline"
+          mandatory={true}
         />
         {!hideSites && (
-          <Select
+          <AsyncSelect
             name="select"
-            options={siteOptions}
+            entity="sites"
             onChange={(value) => changeState("site", value)}
-            value={state.site.toString()}
+            value={state.site}
             type="inline"
+            mandatory={true}
           />
         )}
         {selectedPages.length > 0 && (

package/src/components/SearchField/index.tsx

@@ -20,8 +20,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
 
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
-  const initState = searchFilters && searchFilters[0] ? searchFilters[0].value : "";
-  const [selectValue, setSelectValue] = useState<string>(initState);
+  const [selectValue, setSelectValue] = useState<string>("");
 
   const toggleField = () => setIsOpen(!isOpen);
 
@@ -36,7 +35,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
   const handleClear = () => {
     setInputValue("");
     onChange("");
-    setSelectValue(initState);
+    setSelectValue("");
   };
 
   const handleClose = () => {

package/src/helpers/arrays.tsx

@@ -1,9 +1,9 @@
 const isEmptyArray = (arr: any[]) => arr && arr.length === 0;
 
-const moveArrayElement = (element: unknown, arr: unknown[], newIndex: number): Array<unknown> => {
+const moveArrayElement = (element: any, arr: any[], newIndex: number): Array<any> => {
   const arrCopy = [...arr];
   if (arrCopy.length <= 1) return arrCopy;
-  const elementIndex = arrCopy.findIndex((el: unknown) => el === element);
+  const elementIndex = arrCopy.findIndex((el: any) => el === element);
   const el = arrCopy[elementIndex];
   arrCopy.splice(elementIndex, 1);
   arrCopy.splice(newIndex, 0, el);

package/src/modules/Analytics/DimensionPanel/index.tsx

@@ -80,52 +80,54 @@ const DimensionPanel = (props: IProps): JSX.Element => {
 
   return (
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
-      <S.ContentWrapper>
-        <FieldsBehavior
-          name="removeItemChildren"
-          fieldType="RadioGroup"
-          title="Dimension type"
-          value={type}
-          options={typeOptions}
-          onChange={setType}
-          mandatory
-        />
-        <S.NoteWrapper>
-          <NoteField value={{ text: noteText, title: noteTitle }} />
-        </S.NoteWrapper>
-        <FieldsBehavior
-          title="Dimension"
-          name="name"
-          fieldType="TextField"
-          value={name}
-          onChange={setName}
-          mandatory
-          validators={{ mandatory: true }}
-          error={errors.name}
-          placeholder="Type a Dimension Name"
-        />
-        {type === "dimensionsAndValues" ? (
+      <S.Wrapper>
+        <S.ContentWrapper>
           <FieldsBehavior
-            title="Values"
-            name="values"
-            fieldType="TextArea"
-            value={values}
-            onChange={setValues}
+            name="removeItemChildren"
+            fieldType="RadioGroup"
+            title="Dimension type"
+            value={type}
+            options={typeOptions}
+            onChange={setType}
+            mandatory
+          />
+          <S.NoteWrapper>
+            <NoteField value={{ text: noteText, title: noteTitle }} />
+          </S.NoteWrapper>
+          <FieldsBehavior
+            title="Dimension"
+            name="name"
+            fieldType="TextField"
+            value={name}
+            onChange={setName}
             mandatory
             validators={{ mandatory: true }}
-            error={errors.values}
-            placeholder="Type any value that you need. &#10;Separate them with ;&#10;&#19;&#10;Example: English; Spanish; German; French"
-            rows={4}
+            error={errors.name}
+            placeholder="Type a Dimension Name"
           />
-        ) : (
-          <></>
-        )}
-      </S.ContentWrapper>
-      <S.Footer>
-        <Button className="button" type="button" onClick={editButton.action}>
-          {editButton.label}
-        </Button>
-      </S.Footer>
+          {type === "dimensionsAndValues" ? (
+            <FieldsBehavior
+              title="Values"
+              name="values"
+              fieldType="TextArea"
+              value={values}
+              onChange={setValues}
+              mandatory
+              validators={{ mandatory: true }}
+              error={errors.values}
+              placeholder="Type any value that you need. &#10;Separate them with ;&#10;&#19;&#10;Example: English; Spanish; German; French"
+              rows={4}
+            />
+          ) : (
+            <></>
+          )}
+        </S.ContentWrapper>
+        <S.Footer>
+          <Button className="button" type="button" onClick={editButton.action}>
+            {editButton.label}
+          </Button>
+        </S.Footer>
+      </S.Wrapper>
     </FloatingPanel>
   );
 };

package/src/modules/Analytics/DimensionPanel/style.tsx

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
 const Footer = styled.div`
   position: absolute;
   bottom: ${(p) => p.theme.spacing.m};
@@ -20,4 +25,4 @@ const ContentWrapper = styled.div`
   padding: 0 ${(p) => p.theme.spacing.m} ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
 `;
 
-export { Footer, NoteWrapper, ContentWrapper };
+export { Wrapper, Footer, NoteWrapper, ContentWrapper };

package/src/modules/Analytics/GroupPanel/index.tsx

@@ -24,9 +24,7 @@ const GroupPanel = (props: IProps): JSX.Element => {
     const dimensionOptions = [];
     const dimensionsArr = splitAndTrim(item?.dimensions, ";");
     const isAllDimensions = dimensionsArr.length === dimensions.length;
-    (!item || isAllDimensions)
-      ? dimensionOptions.push("all")
-      : dimensionOptions.push(...dimensionsArr);
+    !item || isAllDimensions ? dimensionOptions.push("all") : dimensionOptions.push(...dimensionsArr);
     setSelectedDimensions(dimensionOptions);
 
     const templateOptions = [];
@@ -37,7 +35,7 @@ const GroupPanel = (props: IProps): JSX.Element => {
 
     const hasTemplate = !!templateOptions.length && !templateOptions.includes("null");
     setHasTemplate(hasTemplate);
-  }
+  };
 
   useEffect(() => {
     isOpen && resetState();
@@ -55,7 +53,7 @@ const GroupPanel = (props: IProps): JSX.Element => {
       ...item,
       name,
       dimensions: dimensionsStr,
-      templates: templatesStr
+      templates: templatesStr,
     };
     setGroupItem(value);
 
@@ -65,11 +63,11 @@ const GroupPanel = (props: IProps): JSX.Element => {
   const validateFields = () => {
     const errorFields = {
       name: !name.length,
-    }
+    };
     setErrors(errorFields);
     const isFieldsValid = Object.values(errorFields).every((error) => !error);
     isFieldsValid && editItemAction();
-  }
+  };
 
   const title = item ? "Update Dimensions Group" : "Create Dimensions Group";
 
@@ -97,15 +95,13 @@ const GroupPanel = (props: IProps): JSX.Element => {
   const setDimensions = (selection: any) => {
     if (!selection.length) selection = ["all"];
     setSelectedDimensions([...selection]);
-  }
+  };
 
   const setTemplates = (selection: any) => {
     setSelectedTemplates([...selection]);
-  }
+  };
 
-  const selectedDimensionsN = selectedDimensions.includes("all")
-    ? dimensions?.length
-    : selectedDimensions.length;
+  const selectedDimensionsN = selectedDimensions.includes("all") ? dimensions?.length : selectedDimensions.length;
 
   const hasTemplateOpts = [
     {
@@ -123,63 +119,60 @@ const GroupPanel = (props: IProps): JSX.Element => {
     const hasTemplate = value === "yes";
     setHasTemplate(hasTemplate);
     !hasTemplate && setSelectedTemplates([]);
-
-  }
+  };
 
   return (
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
-      <S.ContentWrapper>
-        <FieldsBehavior
-          title="Name"
-          name="name"
-          fieldType="TextField"
-          value={name}
-          onChange={setName}
-          mandatory
-          validators={{ mandatory: true }}
-          error={errors.name}
-        />
-        <S.Divider />
-        <S.Heading>
-          <S.HeadingText>Dimensions</S.HeadingText>
-          <S.HeadingCounter>{selectedDimensionsN}/{dimensions?.length}</S.HeadingCounter>
-        </S.Heading>
-        <S.Description>Select the dimensions to this content.</S.Description>
-        <CheckGroup
-          options={dimensionOptions}
-          value={selectedDimensions}
-          onChange={setDimensions}
-          selectAllOption="all"
-        />
-        <S.Divider />
-        <S.Heading $spaceBetween>
-          <S.HeadingText>Associated to a template</S.HeadingText>
-          <S.RadioTemplate>
-            <RadioGroup
-              name="hasTemplate"
-              value={hasTemplate ? "yes" : "no"}
-              options={hasTemplateOpts}
-              onChange={handleChangeHasTemplate}
-              inline
-            />
-          </S.RadioTemplate>
-        </S.Heading>
-        <S.Description>If you create a page of this template, it will appear with these dimensions by default.</S.Description>
-        {hasTemplate ? (
+      <S.Wrapper>
+        <S.ContentWrapper>
+          <FieldsBehavior
+            title="Name"
+            name="name"
+            fieldType="TextField"
+            value={name}
+            onChange={setName}
+            mandatory
+            validators={{ mandatory: true }}
+            error={errors.name}
+          />
+          <S.Divider />
+          <S.Heading>
+            <S.HeadingText>Dimensions</S.HeadingText>
+            <S.HeadingCounter>
+              {selectedDimensionsN}/{dimensions?.length}
+            </S.HeadingCounter>
+          </S.Heading>
+          <S.Description>Select the dimensions to this content.</S.Description>
           <CheckGroup
-            options={templates}
-            value={selectedTemplates}
-            onChange={setTemplates}
+            options={dimensionOptions}
+            value={selectedDimensions}
+            onChange={setDimensions}
+            selectAllOption="all"
           />
-        ) : (
-          <></>
-        )}
-      </S.ContentWrapper>
-      <S.Footer>
-        <Button className="button" type="button" onClick={editButton.action}>
-          {editButton.label}
-        </Button>
-      </S.Footer>
+          <S.Divider />
+          <S.Heading $spaceBetween>
+            <S.HeadingText>Associated to a template</S.HeadingText>
+            <S.RadioTemplate>
+              <RadioGroup
+                name="hasTemplate"
+                value={hasTemplate ? "yes" : "no"}
+                options={hasTemplateOpts}
+                onChange={handleChangeHasTemplate}
+                inline
+              />
+            </S.RadioTemplate>
+          </S.Heading>
+          <S.Description>
+            If you create a page of this template, it will appear with these dimensions by default.
+          </S.Description>
+          {hasTemplate ? <CheckGroup options={templates} value={selectedTemplates} onChange={setTemplates} /> : <></>}
+        </S.ContentWrapper>
+        <S.Footer>
+          <Button className="button" type="button" onClick={editButton.action}>
+            {editButton.label}
+          </Button>
+        </S.Footer>
+      </S.Wrapper>
     </FloatingPanel>
   );
 };

package/src/modules/Analytics/GroupPanel/style.tsx

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
 const Footer = styled.div`
   position: absolute;
   bottom: ${(p) => p.theme.spacing.m};
@@ -56,6 +61,7 @@ const ContentWrapper = styled.div`
 `;
 
 export {
+  Wrapper,
   Footer,
   Divider,
   Heading,

package/src/modules/Categories/CategoriesList/CategoryPanel/index.tsx

@@ -90,19 +90,21 @@ const CategoryPanel = (props: IProps): JSX.Element => {
 
   return (
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
-      <div>{flag}</div>
-      <Form edit={!category.isNew} />
-      <S.Footer>
-        {!category.isNew ? (
-          <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
-            {editButton.label}
-          </Button>
-        ) : (
-          <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
-            {addButton.label}
-          </Button>
-        )}
-      </S.Footer>
+      <S.Wrapper>
+        <div>{flag}</div>
+        <Form edit={!category.isNew} />
+        <S.Footer>
+          {!category.isNew ? (
+            <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
+              {editButton.label}
+            </Button>
+          ) : (
+            <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
+              {addButton.label}
+            </Button>
+          )}
+        </S.Footer>
+      </S.Wrapper>
     </FloatingPanel>
   );
 };

package/src/modules/Categories/CategoriesList/CategoryPanel/style.tsx

@@ -1,24 +1,31 @@
 import styled from "styled-components";
 
-export const Footer = styled.div`
+const Wrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  height: 100%;
+`;
+
+const Footer = styled.div`
   position: absolute;
   bottom: ${(p) => p.theme.spacing.m};
   right: ${(p) => p.theme.spacing.m};
 `;
 
-export const FlagWrapper = styled.div`
+const FlagWrapper = styled.div`
   display: flex;
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
-export const TranslationText = styled.div`
+const TranslationText = styled.div`
   ${(p) => p.theme.textStyle.headingXXS};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-left: ${(p) => p.theme.spacing.xs};
 `;
 
-export const Translation = styled.div`
+const Translation = styled.div`
   ${(p) => p.theme.textStyle.uiL};
   color: ${(p) => p.theme.color.textHighEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.s};
 `;
+
+export { Wrapper, Footer, FlagWrapper, TranslationText, Translation }