@griddo/ax 10.1.73 → 10.1.74

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.1.73",
+  "version": "10.1.74",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b6055975421e2aec8714822b77b0392b6a9290e9"
+  "gitHead": "67ea3b4084fb731daaef0fef90fedf0a6a8e0892"
 }

package/src/__tests__/components/SearchField/SearchField.test.tsx

@@ -337,7 +337,7 @@ describe("search field events", () => {
     const fieldWrapper = screen.getByTestId("field-wrapper");
     const input = screen.getByTestId("search-input");
     expect(fieldWrapper).toBeTruthy();
-    fireEvent.keyDown(input, { key: "A", code: "KeyA" });
+    fireEvent.change(input, { target: { value: "a" } });
     expect(onChangeMock).toBeCalledTimes(1);
   });
 

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

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { structuredData } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
 import { IGetStructuredDataParams, IDataSource, ISite, IStructuredData } from "@ax/types";
-import { Button, CheckField, FieldsBehavior, FloatingMenu, Icon, IconAction, Tag } from "@ax/components";
+import { Button, CheckField, FieldsBehavior, FloatingMenu, Icon, IconAction, SearchField, Tag } from "@ax/components";
 
 import * as S from "./style";
 
@@ -15,6 +15,7 @@ const AutoItem = (props: IProps) => {
     options: [],
     filter,
     isOpen: false,
+    filteredOptions: [],
   };
 
   const [state, setState] = useState(initState);
@@ -79,7 +80,7 @@ const AutoItem = (props: IProps) => {
     try {
       const result = await structuredData.getDataContents(params, siteID);
       if (isReqOk(result.status)) {
-        setState({ ...state, selected: newValue, options: result.data.items });
+        setState({ ...state, selected: newValue, options: result.data.items, filteredOptions: result.data.items });
       }
     } catch (e) {
       console.log(e);
@@ -88,10 +89,10 @@ const AutoItem = (props: IProps) => {
   };
 
   const handleSelectOnChange = (newValue: string | null) => {
-    if(newValue){
+    if (newValue) {
       getCategoryContent(newValue);
     } else {
-      setState({ ...state, selected: "", options: [] });
+      setState({ ...state, selected: "", options: [], filteredOptions: [] });
     }
   };
 
@@ -128,6 +129,13 @@ const AutoItem = (props: IProps) => {
     addFilter(newFilters, source.id);
   };
 
+  const handleSearchChange = (query: string) => {
+    const filteredOptions = state.options.filter(
+      (option) => option.content.title.toLowerCase().indexOf(query.toLowerCase()) !== -1
+    );
+    setState({ ...state, filteredOptions });
+  };
+
   return (
     <S.TypeContainer key={source.id}>
       <S.TypeWrapper>
@@ -158,9 +166,14 @@ const AutoItem = (props: IProps) => {
           entityId={source.id}
           site={site}
         />
+        {state.options.length > 0 && (
+          <S.SearchWrapper>
+            <SearchField onChange={handleSearchChange} searchOnEnter={false} size="XS" />
+          </S.SearchWrapper>
+        )}
         <S.ChecksWrapper>
-          {state.options &&
-            state.options.map((option: any) => (
+          {state.filteredOptions &&
+            state.filteredOptions.map((option: any) => (
               <CheckField
                 key={option.content.title}
                 title={option.content.title}
@@ -188,6 +201,7 @@ interface IState {
   options: any[];
   filter: any[];
   isOpen: boolean;
+  filteredOptions: any[];
 }
 
 interface IProps {

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

@@ -121,6 +121,11 @@ const ChecksWrapper = styled.div`
   overflow: auto;
 `;
 
+const SearchWrapper = styled.div`
+  margin-top: ${(p) => `-${p.theme.spacing.s}`};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
 export {
   IconActionWrapper,
   IconWrapper,
@@ -135,4 +140,5 @@ export {
   FiltersWrapper,
   ButtonWrapper,
   ChecksWrapper,
+  SearchWrapper,
 };

package/src/components/SearchField/index.tsx

@@ -14,6 +14,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
     searchFilters,
     onFilterChange,
     small,
+    size = "M",
   } = props;
 
   const [isOpen, setIsOpen] = useState(false);
@@ -26,6 +27,9 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setInputValue(newValue);
+    if (!searchOnEnter) {
+      onChange(newValue);
+    }
   };
 
   const handleClear = () => {
@@ -44,7 +48,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!searchOnEnter || e.key === "Enter") {
+    if (searchOnEnter && e.key === "Enter") {
       onChange(inputValue);
     }
   };
@@ -93,6 +97,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
             disabled={disabled}
             data-testid="search-input"
             small={small}
+            inputSize={size}
           />
           {inputValue.trim() !== "" && searchOnEnter && <S.HelpText>Press ENTER</S.HelpText>}
           {closeOnInactive || inputValue.length > 0 ? (
@@ -123,6 +128,7 @@ export interface ISearchFieldProps {
   searchFilters?: any;
   onFilterChange?(filter: string): void;
   small?: boolean;
+  size?: "M" | "S" | "XS";
 }
 
 export default SearchField;

package/src/components/SearchField/style.tsx

@@ -19,15 +19,21 @@ const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>
   border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
 `;
 
-const Input = styled.input<{ closeOnInactive: boolean; disabled: boolean; small?: boolean }>`
+const Input = styled.input<{
+  closeOnInactive: boolean;
+  disabled: boolean;
+  small?: boolean;
+  inputSize: "M" | "S" | "XS";
+}>`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
   background-color: ${(p) => p.theme.color.interactiveBackground};
   flex: 1 1 auto;
-  height: ${(p) => p.theme.spacing.l};
+  height: ${(p) => (p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
   padding-left: ${(p) => p.theme.spacing.xs};
   border: none;
-  width: ${(p) => (p.small ? `calc(${p.theme.spacing.xl} * 2)` : `calc(${p.theme.spacing.xl} * 4)`)};
+  width: ${(p) =>
+    p.small || p.inputSize !== "M" ? `calc(${p.theme.spacing.xl} * 2)` : `calc(${p.theme.spacing.xl} * 4)`};
 
   &:active,
   &:focus {