@griddo/ax 11.10.9-rc.1 → 11.10.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.10.9-rc.1",
+  "version": "11.10.10",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -144,7 +144,7 @@
     "styled-system": "5.1.5",
     "terser-webpack-plugin": "1.4.1",
     "ts-pnp": "1.1.4",
-    "typescript": "4.9.5",
+    "typescript": "5.9.3",
     "url-loader": "4.1.1",
     "uuid": "8.3.2",
     "webpack": "4.47.0",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ce5d7b9161ccf393d365874cc2f97493bb65dd96"
+  "gitHead": "7ab8ffd85a8673602920d7f585c15e974a77dfe2"
 }

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

@@ -284,10 +284,7 @@ describe("SideModal component events", () => {
         <SideModal {...defaultProps} />
       </ThemeProvider>
     );
-    const filterButton = screen.getByTestId("icon-search-wrapper");
 
-    expect(filterButton).toBeTruthy();
-    fireEvent.click(filterButton);
     const searchFieldWrapper = screen.getByTestId("search-field-wrapper");
     expect(searchFieldWrapper).toBeTruthy();
     const input = screen.getByTestId("search-input");

package/src/components/MenuItem/index.tsx

@@ -9,7 +9,14 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
   const handleOnClick = (e: React.MouseEvent<HTMLLIElement>) => {
     if (onClick !== undefined && !disabled) {
       e.preventDefault();
-      onClick(e);
+      onClick();
+    }
+  };
+
+  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLLIElement>) => {
+    if (e.key === "Enter" && onClick !== undefined && !disabled) {
+      e.preventDefault();
+      onClick();
     }
   };
 
@@ -25,6 +32,9 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
       onlyOnHover={(extendedAction && extendedAction.onlyOnHover) ?? true}
       data-testid="menu-subitem"
       disabled={disabled}
+      tabIndex={0}
+      onKeyDown={handleOnKeyDown}
+      role="button"
     >
       <div>{children}</div>
       {extendedAction && (
@@ -40,7 +50,7 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
 
 export interface IMenuItemProps {
   children: JSX.Element | string;
-  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
+  onClick?: () => void;
   extendedAction?: { icon: string; action?: () => void; onlyOnHover?: boolean } | null;
   className?: string;
   disabled?: boolean;

package/src/components/SearchField/index.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@ax/components";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Select } from "../Fields";
 
 import * as S from "./style";
@@ -22,6 +22,14 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(value && value.trim() !== "" ? true : false);
   const [inputValue, setInputValue] = useState(value || "");
   const [selectValue, setSelectValue] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const showField = isOpen || !closeOnInactive;
+
+  useEffect(() => {
+    if (focus && showField && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [focus, showField]);
 
   useEffect(() => {
     if (value !== inputValue) {
@@ -66,8 +74,6 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
     onFilterChange && onFilterChange(value);
   };
 
-  const showField = isOpen || !closeOnInactive;
-
   return (
     <S.Wrapper data-testid="search-field-wrapper">
       {showField ? (
@@ -97,8 +103,7 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
             disabled={disabled}
             data-testid="search-input"
             small={small}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus={focus && showField}
+            ref={inputRef}
             inputSize={size}
             name="searchInput"
           />

package/src/components/SideModal/SideModalOption/index.tsx

@@ -29,6 +29,12 @@ const SideModalOption = (props: IProps) => {
     }
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      setOption();
+    }
+  };
+
   const defaultTag = option.tag ? (
     <S.TagWrapper data-testid="side-modal-option-tag">
       <Tag text={option.tag} type="square" />
@@ -36,7 +42,7 @@ const SideModalOption = (props: IProps) => {
   ) : null;
 
   return (
-    <S.Item onClick={setOption} data-testid="side-modal-option">
+    <S.Item onClick={setOption} tabIndex={0} onKeyDown={handleKeyDown} role="button" data-testid="side-modal-option">
       <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />
       {label}
       {defaultTag}

package/src/components/SideModal/index.tsx

@@ -37,6 +37,22 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
   const [searchQuery, setSearchQuery] = useState("");
   const node = useRef<HTMLDivElement | null>(null);
 
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        toggleModal();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyPress);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [isOpen, toggleModal]);
+
   useEffect(() => {
     if (componentOptions) {
       for (const key in componentOptions) {
@@ -143,32 +159,39 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     });
 
   return createPortal(
-    <>
-      <S.Wrapper ref={node} optionsType={optionsType} isOpen={isOpen} data-testid="side-modal">
-        <S.Header>
-          <S.Title data-testid="side-modal-title">{optionsType}</S.Title>
-          {showSearch && optionsType !== "components" && (
-            <S.SearchWrapper>
-              <SearchField onChange={setSearchQuery} closeOnInactive={true} small={!filters} value={searchQuery} />
-            </S.SearchWrapper>
-          )}
-          {!showSearch && (
+    <S.Wrapper ref={node} optionsType={optionsType} isOpen={isOpen} data-testid="side-modal">
+      {isOpen && (
+        <>
+          <S.Header>
+            <S.Title data-testid="side-modal-title">{optionsType}</S.Title>
             <S.ButtonWrapper data-testid="side-modal-close-button">
               <IconAction icon="close" onClick={handleCloseModal} />
             </S.ButtonWrapper>
-          )}
-        </S.Header>
-        <S.ColumnsWrapper>
-          {(filters || featuredFilters) && (
+          </S.Header>
+          <S.ColumnsWrapper>
+            {(filters || featuredFilters) && (
+              <S.FilterContent>
+                {featuredFilters && <S.FeaturedWrapper>{featuredFilters}</S.FeaturedWrapper>}
+                {filters && <div>{filters}</div>}
+              </S.FilterContent>
+            )}
             <S.Content>
-              {featuredFilters && <S.FeaturedWrapper>{featuredFilters}</S.FeaturedWrapper>}
-              {filters && <div>{filters}</div>}
+              {showSearch && optionsType !== "components" && (
+                <S.SearchWrapper>
+                  <SearchField
+                    onChange={setSearchQuery}
+                    value={searchQuery}
+                    searchOnEnter={false}
+                    placeholder="Search"
+                  />
+                </S.SearchWrapper>
+              )}
+              {filteredOptions}
             </S.Content>
-          )}
-          <S.Content>{filteredOptions}</S.Content>
-        </S.ColumnsWrapper>
-      </S.Wrapper>
-    </>,
+          </S.ColumnsWrapper>
+        </>
+      )}
+    </S.Wrapper>,
     document.body
   );
 };

package/src/components/SideModal/style.tsx

@@ -18,9 +18,22 @@ const Header = styled.div`
   }
 `;
 
+const FilterContent = styled.div`
+  list-style: none;
+  padding: ${(p) => p.theme.spacing.s};
+  height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
+  overflow: auto;
+  border-right: 1px solid ${(p) => p.theme.colors.uiLine};
+  &:last-child {
+    border-right: 0;
+    width: ${(p) => `calc(${p.theme.spacing.xl} * 4)`};
+  }
+`;
+
 const Content = styled.div`
   list-style: none;
-  padding: ${(p) => p.theme.spacing.m};
+  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m}`};
   height: ${(p) => `calc(100vh - ${p.theme.spacing.xl})`};
   width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
   overflow: auto;
@@ -43,20 +56,6 @@ const Wrapper = styled.div<{ optionsType?: string; isOpen: boolean }>`
   box-shadow: ${(p) =>
     p.optionsType && placeRight.includes(p.optionsType) ? p.theme.shadow.rightPanel : p.theme.shadow.leftPanel};
   transition: all 0.5s ease-in-out;
-
-  &.form-fields {
-    margin-top: ${(p) => p.theme.spacing.xl};
-
-    ${Header} {
-      padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} 0`};
-      background-color: transparent;
-      border-bottom: none;
-    }
-
-    ${Content} {
-      padding: ${(p) => p.theme.spacing.s};
-    }
-  }
 `;
 
 const Title = styled.h6`
@@ -78,7 +77,7 @@ const FeaturedWrapper = styled.div`
 
 const SearchWrapper = styled.div`
   width: 100%;
-  margin-left: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
 `;
 
 const Link = styled.div<{ active: boolean }>`
@@ -116,6 +115,7 @@ const ClosedFloatingButtonWrapper = styled.div`
 
 export {
   Wrapper,
+  FilterContent,
   Content,
   Header,
   Title,