@griddo/ax 1.66.13 → 1.67.2

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

@@ -0,0 +1,111 @@
+import React, { memo } from "react";
+
+import { FieldsBehavior } from "@ax/components";
+import { ILinkField, IUrlField } from "@ax/types";
+
+const LinkField = (props: ILinkFieldProps): JSX.Element => {
+  const { value, onChange, disabled, whiteList, goTo, theme, actions, selectedContent, objKey } = props;
+
+  const handleTextChange = (newValue: string) => onChange({ ...value, text: newValue });
+  const handleLinkTypeChange = (newValue: string) => onChange({ ...value, linkType: newValue });
+  const handleUrlChange = (newValue: IUrlField) => onChange({ ...value, url: newValue });
+  const handleModalChange = (newValue: any) => onChange({ ...value, modal: newValue });
+
+  const modalFieldSchema = {
+    title: "Modal",
+    type: "ComponentContainer",
+    hideable: true,
+    mandatory: true,
+    key: "modal",
+    condition: "modal",
+    whiteList,
+  };
+
+  const urlFieldSchema = {
+    title: "URL",
+    type: "UrlField",
+    key: "url",
+    advanced: true,
+    condition: "url",
+  };
+
+  return (
+    <>
+      <FieldsBehavior
+        title="Text"
+        name="text"
+        fieldType="TextField"
+        value={value.text}
+        onChange={handleTextChange}
+        disabled={disabled}
+      />
+      <FieldsBehavior
+        title="Type of link"
+        name="linkType"
+        fieldType="ConditionalField"
+        value={value.linkType}
+        onChange={handleLinkTypeChange}
+        disabled={disabled}
+        options={[
+          {
+            value: "url",
+            title: "Link to Page",
+            name: "url",
+          },
+          {
+            value: "modal",
+            title: "Open Modal",
+            name: "modal",
+          },
+        ]}
+        innerFields={[
+          <FieldsBehavior
+            key="modal"
+            title="Modal"
+            name="modal"
+            fieldType="ComponentContainer"
+            value={value.modal}
+            onChange={handleModalChange}
+            disabled={disabled}
+            whiteList={whiteList}
+            selectedContent={selectedContent}
+            parentKey={objKey}
+            objKey="modal"
+            goTo={goTo}
+            theme={theme}
+            actions={actions}
+            mandatory
+            condition="modal"
+            field={modalFieldSchema}
+          />,
+          <FieldsBehavior
+            key="url"
+            title="URL"
+            name="url"
+            fieldType="UrlField"
+            value={value.url}
+            onChange={handleUrlChange}
+            disabled={disabled}
+            mandatory
+            condition="url"
+            field={urlFieldSchema}
+          />,
+        ]}
+      />
+    </>
+  );
+};
+
+interface ILinkFieldProps {
+  value: ILinkField;
+  onChange: (value: ILinkField | null) => void;
+  disabled?: boolean;
+  whiteList: string[];
+  actions: any;
+  theme: string;
+  goTo: any;
+  selectedContent: any;
+  objKey: string;
+}
+
+export default memo(LinkField);

package/src/components/Fields/ReferenceField/ItemList/index.tsx

@@ -27,6 +27,10 @@ const ItemList = (props: IProps) => {
       const response = await structuredData.getDistributorContent(siteID, params);
       if (isReqOk(response.status)) {
         setState((state: IReferenceState) => ({ ...state, selectedItems: response.data }));
+        if (fixed.length !== response.data.length) {
+          const itemsID = response.data.reduce((previous: any, current: any) => [...previous, current.id], []);
+          setState((state: IReferenceState) => ({ ...state, fixed: itemsID }));
+        }
       } else {
         console.log("Error en getItems");
       }

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -13,7 +13,7 @@ import Item from "./Item";
 import * as S from "./style";
 
 const ManualPanel = (props: IProps) => {
-  const { onChange, currentSite, hasMaxItems } = props;
+  const { onChange, currentSite, hasMaxItems, handleValidation, validators } = props;
 
   const { state, setState } = useReference();
 
@@ -77,6 +77,7 @@ const ManualPanel = (props: IProps) => {
     const { mode, fixed, fullRelations } = state;
     const newValue = { mode, fixed, fullRelations };
     onChange(newValue);
+    handleValidation && handleValidation(state.fixed, validators);
   };
 
   const textFieldProps = {
@@ -131,7 +132,14 @@ const ManualPanel = (props: IProps) => {
                 const source = state.sourceTitles.find((el: IDataSource) => el.id === item.structuredData);
                 const disabled = hasMaxItems && !isChecked;
                 return (
-                  <Item key={item.id} isChecked={isChecked} handleOnClick={handleOnClick} item={item} source={source} disabled={disabled} />
+                  <Item
+                    key={item.id}
+                    isChecked={isChecked}
+                    handleOnClick={handleOnClick}
+                    item={item}
+                    source={source}
+                    disabled={disabled}
+                  />
                 );
               })}
           </S.ItemList>
@@ -152,6 +160,8 @@ interface IProps {
   currentSite: number;
   onChange: (value: any) => void;
   hasMaxItems: boolean;
+  handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
+  validators?: Record<string, unknown>;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -17,10 +17,22 @@ const ReferenceFieldWithProvider = (props: IProps) => (
   <ReferenceProvider modes={props.selectionType}>
     <ReferenceField {...props} />
   </ReferenceProvider>
-)
+);
 
 const ReferenceField = (props: IProps) => {
-  const { source, value, onChange, disabled, site, selectionType, structuredDataValues, validators, maxItems } = props;
+  const {
+    source,
+    value,
+    onChange,
+    disabled,
+    site,
+    selectionType,
+    structuredDataValues,
+    validators,
+    maxItems,
+    resetValidation,
+    handleValidation,
+  } = props;
 
   const { isOpen, toggleModal } = useModal();
 
@@ -59,6 +71,7 @@ const ReferenceField = (props: IProps) => {
           };
     onChange(newValue);
     setModeAndSource(mode, resetSource);
+    handleValidation && handleValidation(value.fixed, validators);
   };
 
   useEffect(() => {
@@ -110,6 +123,7 @@ const ReferenceField = (props: IProps) => {
       fixed,
     };
     onChange(newValue);
+    resetValidation && resetValidation();
   };
 
   const icon = isAuto ? "edit" : "add";
@@ -152,14 +166,14 @@ const ReferenceField = (props: IProps) => {
 
   const getPanel = () =>
     isAuto ? (
-      <AutoPanel
-        structuredData={structuredDataValues}
+      <AutoPanel structuredData={structuredDataValues} onChange={handleOnChange} site={site} validators={validators} />
+    ) : (
+      <ManualPanel
         onChange={handleOnChange}
-        site={site}
+        hasMaxItems={hasMaxItems}
+        handleValidation={handleValidation}
         validators={validators}
       />
-    ) : (
-        <ManualPanel onChange={handleOnChange} hasMaxItems={hasMaxItems} />
     );
 
   const manualItems = !isAuto && value && Array.isArray(value.fixed) ? value.fixed.length : 0;
@@ -189,11 +203,7 @@ const ReferenceField = (props: IProps) => {
       {isAuto ? (
         autoData
       ) : (
-        <ItemList
-          items={value ? value.fixed : []}
-          handleListDelete={handleListDelete}
-          handleChange={onChange}
-        />
+        <ItemList items={value ? value.fixed : []} handleListDelete={handleListDelete} handleChange={onChange} />
       )}
       <FloatingPanel title="Configure elements" toggleModal={toggleModal} isOpen={isOpen}>
         {isOpen && getPanel()}
@@ -212,6 +222,8 @@ interface IProps {
   structuredDataValues: { global: IStructuredData[]; site: IStructuredData[] };
   validators?: Record<string, unknown>;
   maxItems?: number;
+  resetValidation?: () => void;
+  handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -52,4 +52,15 @@ const SingleModeText = styled.span`
   color: ${(p) => p.theme.colors.textHighEmphasis};
 `;
 
-export { Wrapper, Label, ActionWrapper, DataWrapper, TypeContainer, SourcesWrapper, ConfigWrapper, Title, ModeWrapper, SingleModeText };
+export {
+  Wrapper,
+  Label,
+  ActionWrapper,
+  DataWrapper,
+  TypeContainer,
+  SourcesWrapper,
+  ConfigWrapper,
+  Title,
+  ModeWrapper,
+  SingleModeText,
+};

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

@@ -11,7 +11,17 @@ import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./uti
 import * as S from "./style";
 
 const UrlField = (props: IUrlFieldProps): JSX.Element => {
-  const { value, onChange, showAdvanced, handlePanel, inFloatingPanel, disabled, handleValidation, validators } = props;
+  const {
+    value,
+    onChange,
+    showAdvanced,
+    handlePanel,
+    inFloatingPanel,
+    disabled,
+    handleValidation,
+    validators,
+    resetValidation,
+  } = props;
   const { isOpen, toggleModal } = useModal();
   const [anchorOptions, setAnchorOptions] = useState<ISelectOption[]>([]);
   const [tabOptions, setTabOptions] = useState<ISelectOption[]>([]);
@@ -70,6 +80,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   const handleReset = () => {
     onChange(null);
     setInternalPageName(null);
+    resetValidation && resetValidation();
   };
 
   const handleSetPage = (page: IPage) => {
@@ -219,6 +230,7 @@ interface IUrlFieldProps {
   inFloatingPanel?: boolean;
   disabled?: boolean;
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
+  resetValidation?: () => void;
   validators?: Record<string, unknown>;
 }
 

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

@@ -1,9 +1,4 @@
-const hasProps = (obj: Record<string, unknown>, props: string[]) => {
-  return (
-    !!props &&
-    props.map((prop) => Object.prototype.hasOwnProperty.call(obj, prop)).filter(Boolean).length === props.length
-  );
-};
+import { hasProps } from "@ax/helpers";
 
 const defaultOptions = (vusOptions: Record<string, unknown>[]) => {
   return !vusOptions.find((entry) => entry.theme);

package/src/components/Fields/index.tsx

@@ -15,6 +15,7 @@ import FileField from "./FileField";
 import HeadingField from "./HeadingField";
 import HiddenField from "./HiddenField";
 import ImageField from "./ImageField";
+import LinkField from "./LinkField";
 import MultiCheckSelect from "./MultiCheckSelect";
 import MultiCheckSelectGroup from "./MultiCheckSelectGroup";
 import NoteField from "./NoteField";
@@ -53,6 +54,7 @@ export {
   HeadingField,
   HiddenField,
   ImageField,
+  LinkField,
   MultiCheckSelect,
   MultiCheckSelectGroup,
   NoteField,

package/src/components/FieldsBehavior/index.tsx

@@ -71,10 +71,23 @@ const FieldsBehavior = (props: any): JSX.Element => {
     }
     setErrorField(!isValid);
   };
+
+  const resetValidation = () => {
+    setMessage(helptext);
+    error && deleteError && deleteError(error);
+    setErrorField(false);
+  };
+
   return (
     <S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle} id={objKey}>
       <S.Content data-testid="contentWrapper" error={errorField}>
-        <Field {...props} showAdvanced={showAdvanced} handleValidation={handleValidation} error={errorField} />
+        <Field
+          {...props}
+          showAdvanced={showAdvanced}
+          handleValidation={handleValidation}
+          resetValidation={resetValidation}
+          error={errorField}
+        />
       </S.Content>
       <S.Header className="fieldHeader">
         {showTitle && (

package/src/components/Icon/components/Copy.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const SvgCopy = (props) => (
+  <svg width={24} height={24} fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.5263 2.3158H4.78947C3.80526 2.3158 3 3.12106 3 4.10527V16.6316H4.78947V4.10527H15.5263V2.3158ZM18.2105 5.89475H8.36842C7.38421 5.89475 6.57894 6.70001 6.57894 7.68422V20.2105C6.57894 21.1947 7.38421 22 8.36842 22H18.2105C19.1947 22 20 21.1947 20 20.2105V7.68422C20 6.70001 19.1947 5.89475 18.2105 5.89475ZM8.36843 20.2105H18.2105V7.68422H8.36843V20.2105Z"
+      fill="#5057FF"
+    />
+  </svg>
+);
+
+export default SvgCopy;

package/src/components/Icon/components/Copy2.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const SvgCopy = (props) => (
+  <svg width={24} height={24} fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.5263 2.3158H3.78947C2.80526 2.3158 2 3.12106 2 4.10527V16.6316H3.78947V4.10527H12.5263V2.3158ZM15.2105 5.89475H7.36842C6.38421 5.89475 5.57894 6.70001 5.57894 7.68422V20.2105C5.57894 21.1947 6.38421 22 7.36842 22H15.2105C16.1947 22 17 21.1947 17 20.2105V18H15.2105V20.2105H7.36843V7.68422H15.2105V10H17V7.68422C17 6.70001 16.1947 5.89475 15.2105 5.89475ZM22 14L18 10V13H13V15H18V18L22 14Z"
+      fill="#5057FF"
+    />
+  </svg>
+);
+
+export default SvgCopy;

package/src/components/Icon/components/Duplicate.js

@@ -1,14 +1,12 @@
 import React from "react";
 
-const SvgDuplicate = props => (
+const SvgDuplicate = (props) => (
   <svg width={24} height={24} fill="none" {...props}>
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zM8 21h11V7H8v14z"
+      d="M12.3254 13.9H14V11.8246H16.0754V10.1746H14V8.0998H12.3254V10.1746H10.2752V11.8246H12.3254V13.9ZM8.0004 19.675C7.5504 19.675 7.1586 19.5082 6.825 19.1746C6.4918 18.8414 6.3252 18.4498 6.3252 17.9998V3.6746C6.3252 3.2246 6.4918 2.833 6.825 2.4998C7.1586 2.1666 7.5504 2 8.0004 2H16.125L20.0002 5.8746V17.9998C20.0002 18.4498 19.8336 18.8414 19.5004 19.1746C19.1668 19.5082 18.775 19.675 18.325 19.675H8.0004ZM8.0004 17.9998H18.325V6.6246L15.3 3.6746H8.0004V17.9998ZM4.6752 22.9996C4.2252 22.9996 3.8336 22.833 3.5004 22.4998C3.1668 22.1666 3 21.775 3 21.325V6.3496H4.6752V21.325H15.6254V22.9996H4.6752ZM8.0004 17.9998V3.6746V7.6246V17.9998Z"
       fill="#5057FF"
     />
   </svg>
 );
 
-export default SvgDuplicate;
+export default SvgDuplicate;

package/src/components/Icon/components/Page.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const SvgPage = (props) => (
+  <svg width={24} height={24} fill="none" {...props}>
+    <path
+      d="M8 16H16V18H8V16ZM8 12H16V14H8V12ZM14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM18 20H6V4H13V9H18V20Z"
+      fill="#5057FF"
+    />
+  </svg>
+);
+
+export default SvgPage;

package/src/components/Icon/svgs/Copy.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5263 2.3158H4.78947C3.80526 2.3158 3 3.12106 3 4.10527V16.6316H4.78947V4.10527H15.5263V2.3158ZM18.2105 5.89475H8.36842C7.38421 5.89475 6.57894 6.70001 6.57894 7.68422V20.2105C6.57894 21.1947 7.38421 22 8.36842 22H18.2105C19.1947 22 20 21.1947 20 20.2105V7.68422C20 6.70001 19.1947 5.89475 18.2105 5.89475ZM8.36843 20.2105H18.2105V7.68422H8.36843V20.2105Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/Copy2.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5263 2.3158H3.78947C2.80526 2.3158 2 3.12106 2 4.10527V16.6316H3.78947V4.10527H12.5263V2.3158ZM15.2105 5.89475H7.36842C6.38421 5.89475 5.57894 6.70001 5.57894 7.68422V20.2105C5.57894 21.1947 6.38421 22 7.36842 22H15.2105C16.1947 22 17 21.1947 17 20.2105V18H15.2105V20.2105H7.36843V7.68422H15.2105V10H17V7.68422C17 6.70001 16.1947 5.89475 15.2105 5.89475ZM22 14L18 10V13H13V15H18V18L22 14Z" fill="#5057FF"/>
+</svg>

package/src/components/Icon/svgs/Duplicate.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM8 21H19V7H8V21Z" fill="#5057FF"/>
+<path d="M12.3254 13.9H14V11.8246H16.0754V10.1746H14V8.0998H12.3254V10.1746H10.2752V11.8246H12.3254V13.9ZM8.0004 19.675C7.5504 19.675 7.1586 19.5082 6.825 19.1746C6.4918 18.8414 6.3252 18.4498 6.3252 17.9998V3.6746C6.3252 3.2246 6.4918 2.833 6.825 2.4998C7.1586 2.1666 7.5504 2 8.0004 2H16.125L20.0002 5.8746V17.9998C20.0002 18.4498 19.8336 18.8414 19.5004 19.1746C19.1668 19.5082 18.775 19.675 18.325 19.675H8.0004ZM8.0004 17.9998H18.325V6.6246L15.3 3.6746H8.0004V17.9998ZM4.6752 22.9996C4.2252 22.9996 3.8336 22.833 3.5004 22.4998C3.1668 22.1666 3 21.775 3 21.325V6.3496H4.6752V21.325H15.6254V22.9996H4.6752ZM8.0004 17.9998V3.6746V7.6246V17.9998Z" fill="#5057FF"/>
 </svg>

package/src/components/Icon/svgs/page.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 16H16V18H8V16ZM8 12H16V14H8V12ZM14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM18 20H6V4H13V9H18V20Z" fill="#5057FF"/>
+</svg>

package/src/components/MainWrapper/AppBar/index.tsx

@@ -43,6 +43,8 @@ const AppBar = (props: IProps): JSX.Element => {
     errorActions,
     isFromEditor,
     pageStatusActions,
+    filterSearchAction,
+    searchFilters,
   } = props;
 
   const publishedTooltip: any = {
@@ -158,21 +160,28 @@ const AppBar = (props: IProps): JSX.Element => {
       </S.WrapperTitle>
       {tabs && (
         <S.WrapperTabs>
-          <Tabs
-            tabs={tabs.tabSet}
-            icons={tabs.icons}
-            active={tabs.selectedTab}
-            setSelectedTab={tabs.action}
-            isInAppBar={true}
-            inversed={inversed}
-          />
+          <S.TabsContent>
+            <Tabs
+              tabs={tabs.tabSet}
+              icons={tabs.icons}
+              active={tabs.selectedTab}
+              setSelectedTab={tabs.action}
+              isInAppBar={true}
+              inversed={inversed}
+            />
+          </S.TabsContent>
         </S.WrapperTabs>
       )}
       <S.WrapperEnd>
         {searchAction && (
           <>
-            <S.SearchWrapper>
-              <SearchField onChange={searchAction} closeOnInactive />
+            <S.SearchWrapper length={searchFilters && searchFilters.length ? 8 : 5}>
+              <SearchField
+                onChange={searchAction}
+                onFilterChange={filterSearchAction}
+                searchFilters={searchFilters}
+                closeOnInactive
+              />
             </S.SearchWrapper>
             <S.Separator />
           </>
@@ -261,6 +270,8 @@ interface IAppBarProps {
   inversed?: boolean;
   currentPageID?: number;
   searchAction?(query: string): void;
+  filterSearchAction?(filter: string): void;
+  searchFilters?: any;
   errors?: IErrorItem[];
   errorActions?: {
     goToError(editorID: number, tab: string, template: boolean): void;

package/src/components/MainWrapper/AppBar/style.tsx

@@ -7,6 +7,14 @@ const WrapperTabs = styled.div`
   flex-direction: row;
   align-items: center;
   margin-right: auto;
+  flex: 1 1 auto;
+`;
+
+const TabsContent = styled.div`
+  position: absolute;
+  right: 50%;
+  bottom: 0;
+  transform: translateX(50%);
 `;
 
 const WrapperEnd = styled.div`
@@ -20,7 +28,6 @@ const WrapperTitle = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 600px;
   margin-right: ${(p) => p.theme.spacing.xl};
 `;
 
@@ -165,8 +172,8 @@ const ErrorWrapper = styled.div`
   }
 `;
 
-const SearchWrapper = styled.div`
-  width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
+const SearchWrapper = styled.div<{ length: number }>`
+  width: ${(p) => `calc(${p.theme.spacing.xl} * ${p.length})`};
   display: flex;
   justify-content: flex-end;
 `;
@@ -191,4 +198,5 @@ export {
   SearchWrapper,
   WrapperEnd,
   WrapperTitle,
+  TabsContent,
 };

package/src/components/MainWrapper/index.tsx

@@ -42,6 +42,8 @@ interface IWrapperProps {
     getDataContent?(dataID?: number): void;
   } | null;
   searchAction?(query: string): void;
+  filterSearchAction?(filter: string): void;
+  searchFilters?: any;
   errors?: IErrorItem[];
   errorActions?: {
     goToError(editorID: number, tab: string, template: boolean): void;

package/src/components/Notification/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Notification = (props: IProps) => {
-  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow, onClose } = props;
+  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow } = props;
 
   const [isOpen, setIsOpen] = useState(true);
 
@@ -40,7 +40,6 @@ const Notification = (props: IProps) => {
 
   const handleClose = () => {
     resetError && resetError();
-    onClose && onClose();
     setIsOpen(false);
   };
 
@@ -79,7 +78,6 @@ interface IProps {
   onClick?: () => void;
   closeButton?: boolean;
   actionsBelow?: boolean;
-  onClose?: () => void;
 }
 
 export default Notification;

package/src/components/SearchField/index.tsx

@@ -1,13 +1,24 @@
 import { Icon } from "@ax/components";
 import React, { useState } from "react";
+import { Select } from "../Fields";
 
 import * as S from "./style";
 
 const SearchField = (props: IProps): JSX.Element => {
-  const { onChange, placeholder, closeOnInactive = false, searchOnEnter = true, disabled = false } = props;
+  const {
+    onChange,
+    placeholder,
+    closeOnInactive = false,
+    searchOnEnter = true,
+    disabled = false,
+    searchFilters,
+    onFilterChange,
+  } = props;
 
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
+  const initState = searchFilters && searchFilters[0] ? searchFilters[0].value : "";
+  const [selectValue, setSelectValue] = useState<string>(initState);
 
   const toggleField = () => setIsOpen(!isOpen);
 
@@ -19,6 +30,7 @@ const SearchField = (props: IProps): JSX.Element => {
   const handleClear = () => {
     setInputValue("");
     onChange("");
+    setSelectValue(initState);
   };
 
   const handleClose = () => {
@@ -36,12 +48,32 @@ const SearchField = (props: IProps): JSX.Element => {
     }
   };
 
+  const handleSelectChange = (value: string) => {
+    setSelectValue(value);
+    onFilterChange && onFilterChange(value);
+  };
+
   const showField = isOpen || !closeOnInactive;
 
   return (
     <S.Wrapper>
       {showField ? (
-        <S.FieldWrapper>
+        <S.FieldWrapper closeOnInactive={closeOnInactive} disabled={disabled}>
+          {searchFilters && searchFilters.length && (
+            <>
+              <S.FilterWrapper>
+                <Select
+                  name="filterSelect"
+                  value={selectValue}
+                  options={searchFilters}
+                  onChange={handleSelectChange}
+                  type="inline"
+                  placeholder="Filter by"
+                />
+              </S.FilterWrapper>
+              <S.Separator />
+            </>
+          )}
           <S.Input
             type="text"
             value={inputValue}
@@ -50,7 +82,6 @@ const SearchField = (props: IProps): JSX.Element => {
             placeholder={placeholder}
             closeOnInactive={closeOnInactive}
             disabled={disabled}
-            autoFocus
           />
           {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
           {closeOnInactive || inputValue.length > 0 ? (
@@ -78,6 +109,8 @@ interface IProps {
   closeOnInactive?: boolean;
   searchOnEnter?: boolean;
   disabled?: boolean;
+  searchFilters?: any;
+  onFilterChange?(filter: string): void;
 }
 
-export default SearchField;
+export default SearchField;