@griddo/ax 11.2.12 → 11.3.0

package/src/components/SideModal/index.tsx

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { useHandleClickOutside } from "@ax/hooks";
 import { getDisplayName, filterByCategory } from "@ax/helpers";
 import SideModalOption from "@ax/components/SideModal/SideModalOption";
-import { MenuItem, SearchField, IconAction } from "@ax/components";
+import { MenuItem, SearchField, IconAction, FloatingButton } from "@ax/components";
 import { ModuleCategoryInfo } from "@ax/types";
 
 import * as S from "./style";
@@ -17,7 +17,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     toggleModal,
     componentOptions,
     categories,
-    handleClick,
+    onClick,
     current,
     showSearch,
     theme,
@@ -36,6 +36,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   const [options, setOptions] = useState(filteredValues);
   const [searchQuery, setSearchQuery] = useState("");
+  const node = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (componentOptions) {
@@ -58,19 +59,24 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [current, whiteList]);
 
-  const handleToggleModal = () => {
-    setSearchQuery("");
-    toggleModal();
+  const handleClick = (moduleType: string) => {
+    if (onClick) {
+      onClick(moduleType);
+    }
+    !hasFieldsStyle && handleCloseModal();
   };
 
-  const node = useRef<any>(null);
+  const handleCloseModal = () => {
+    setSearchQuery("");
+    isOpen && toggleModal();
+  };
 
   const handleClickOutside = (e: any) => {
-    if (node.current.contains(e.target)) {
+    if (node.current?.contains(e.target) || hasFieldsStyle) {
       return;
     }
 
-    handleToggleModal();
+    handleCloseModal();
   };
 
   useHandleClickOutside(isOpen, handleClickOutside);
@@ -134,7 +140,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         <SideModalOption
           option={option}
           handleClick={handleClick}
-          toggleModal={handleToggleModal}
           key={`${option}${i}`}
           theme={theme}
           smallMargin={hasFieldsStyle}
@@ -144,40 +149,58 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
       );
     });
 
-  return isOpen
-    ? createPortal(
-        <S.Wrapper ref={node} optionsType={optionsType} hasFieldsStyle={hasFieldsStyle} data-testid="side-modal">
-          <S.Header hasFieldsStyle={hasFieldsStyle}>
-            {!hasFieldsStyle && <S.Title data-testid="side-modal-title">{optionsType}</S.Title>}
-            {showSearch && optionsType !== "components" && (
-              <S.SearchWrapper>
-                <SearchField
-                  onChange={setSearchQuery}
-                  closeOnInactive={!hasFieldsStyle}
-                  small={!filters}
-                  placeholder={hasFieldsStyle ? "Search field" : ""}
-                />
-              </S.SearchWrapper>
-            )}
-            {!showSearch && (
-              <S.ButtonWrapper data-testid="side-modal-close-button">
-                <IconAction icon="close" onClick={handleToggleModal} />
-              </S.ButtonWrapper>
-            )}
-          </S.Header>
-          <S.ColumnsWrapper>
-            {(filters || featuredFilters) && (
-              <S.Content>
-                {featuredFilters && <S.FeaturedWrapper>{featuredFilters}</S.FeaturedWrapper>}
-                {filters && <div>{filters}</div>}
-              </S.Content>
-            )}
-            <S.Content>{filteredOptions}</S.Content>
-          </S.ColumnsWrapper>
-        </S.Wrapper>,
-        document.body
-      )
-    : null;
+  return createPortal(
+    <>
+      <S.Wrapper
+        ref={node}
+        optionsType={optionsType}
+        isOpen={isOpen}
+        data-testid="side-modal"
+        className={hasFieldsStyle ? "form-fields" : ""}
+      >
+        <S.Header>
+          {!hasFieldsStyle && <S.Title data-testid="side-modal-title">{optionsType}</S.Title>}
+          {showSearch && optionsType !== "components" && (
+            <S.SearchWrapper>
+              <SearchField
+                onChange={setSearchQuery}
+                closeOnInactive={!hasFieldsStyle}
+                small={!filters}
+                placeholder={hasFieldsStyle ? "Search field" : ""}
+              />
+            </S.SearchWrapper>
+          )}
+          {!showSearch && (
+            <S.ButtonWrapper data-testid="side-modal-close-button">
+              <IconAction icon="close" onClick={handleCloseModal} />
+            </S.ButtonWrapper>
+          )}
+        </S.Header>
+        <S.ColumnsWrapper>
+          {hasFieldsStyle && (
+            <S.FloatingButtonWrapper>
+              <FloatingButton icon="leftArrow" size="S" onClick={handleCloseModal} />
+            </S.FloatingButtonWrapper>
+          )}
+          {(filters || featuredFilters) && (
+            <S.Content>
+              {featuredFilters && <S.FeaturedWrapper>{featuredFilters}</S.FeaturedWrapper>}
+              {filters && <div>{filters}</div>}
+            </S.Content>
+          )}
+          <S.Content>{filteredOptions}</S.Content>
+        </S.ColumnsWrapper>
+      </S.Wrapper>
+      {hasFieldsStyle && (
+        <S.ClosedWrapper isOpen={!isOpen}>
+          <S.ClosedFloatingButtonWrapper>
+            <FloatingButton text="fields" icon="rightArrow" size="S" onClick={toggleModal} />
+          </S.ClosedFloatingButtonWrapper>
+        </S.ClosedWrapper>
+      )}
+    </>,
+    document.body
+  );
 };
 
 export interface ISideModalProps {
@@ -186,7 +209,7 @@ export interface ISideModalProps {
   categories?: ModuleCategoryInfo[];
   optionsType: string;
   toggleModal: () => void;
-  handleClick?: (moduleType: string) => void;
+  onClick?: (moduleType: string) => void;
   componentOptions?: any;
   current?: any;
   showSearch?: boolean;

package/src/components/SideModal/style.tsx

@@ -2,28 +2,15 @@ import styled from "styled-components";
 
 const placeRight = ["components", "headers", "footers"];
 
-const Wrapper = styled.div<{ optionsType?: string; hasFieldsStyle: boolean }>`
-  position: fixed;
-  left: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? "unset" : 0)};
-  right: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? 0 : "unset")};
-  top: 0;
-  z-index: 1000;
-  margin-top: ${(p) => (p.hasFieldsStyle ? p.theme.spacing.xl : "0")};
-  height: 100vh;
-  background: ${(p) => p.theme.colors.uiBackground01};
-  box-shadow: ${(p) =>
-    p.optionsType && placeRight.includes(p.optionsType) ? p.theme.shadow.rightPanel : p.theme.shadow.leftPanel};
-`;
-
-const Header = styled.div<{ hasFieldsStyle: boolean }>`
+const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: ${(p) => p.theme.spacing.xl};
   width: 100%;
-  padding: ${(p) => (p.hasFieldsStyle ? `${p.theme.spacing.m} ${p.theme.spacing.m} 0` : `0 ${p.theme.spacing.m}`)};
-  background-color: ${(p) => (p.hasFieldsStyle ? "transparent" : p.theme.colors.uiBackground02)};
-  border-bottom: ${(p) => (p.hasFieldsStyle ? "none" : `1px solid ${p.theme.colors.uiLine}`)};
+  padding: ${(p) => `0 ${p.theme.spacing.m}`};
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  border-bottom: ${(p) => `1px solid ${p.theme.colors.uiLine}`};
   h6 {
     ${(p) => p.theme.textStyle.headingM}
     color: ${(p) => p.theme.colors.textHighEmphasis};
@@ -31,12 +18,6 @@ const Header = styled.div<{ hasFieldsStyle: boolean }>`
   }
 `;
 
-const Title = styled.h6``;
-
-const ColumnsWrapper = styled.div`
-  display: flex;
-`;
-
 const Content = styled.div`
   list-style: none;
   padding: ${(p) => p.theme.spacing.m};
@@ -50,6 +31,41 @@ const Content = styled.div`
   }
 `;
 
+const Wrapper = styled.div<{ optionsType?: string; isOpen: boolean }>`
+  position: fixed;
+  left: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? "unset" : p.isOpen ? 0 : "-999px")};
+  right: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? (p.isOpen ? 0 : "-999px") : "unset")};
+  top: 0;
+  z-index: 1000;
+  margin-top: 0;
+  height: 100vh;
+  background: ${(p) => p.theme.colors.uiBackground01};
+  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``;
+
+const ColumnsWrapper = styled.div`
+  position: relative;
+  display: flex;
+`;
+
 const NavLink = styled.a``;
 
 const FeaturedWrapper = styled.div`
@@ -70,6 +86,31 @@ const ButtonWrapper = styled.div`
   margin: 0 0 0 auto;
 `;
 
+const FloatingButtonWrapper = styled.div`
+  position: absolute;
+  right: -16px;
+  top: ${(p) => `-${p.theme.spacing.xs}`};
+`;
+
+const ClosedWrapper = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  width: ${(p) => p.theme.spacing.xs};
+  border-right: ${(p) => `2px solid ${p.theme.colors.interactive01}`};
+  left: ${(p) => (p.isOpen ? "0" : "-999px")};
+  top: 0;
+  z-index: 1000;
+  margin-top: ${(p) => p.theme.spacing.xl};
+  height: 100vh;
+  transition: ${(p) => (p.isOpen ? "left 1s ease-in-out" : "left 0s ease-out")};
+`;
+
+const ClosedFloatingButtonWrapper = styled.div`
+  position: absolute;
+  right: -77px;
+  top: 56px;
+`;
+
 export {
   Wrapper,
   Content,
@@ -81,4 +122,7 @@ export {
   SearchWrapper,
   Link,
   ButtonWrapper,
+  FloatingButtonWrapper,
+  ClosedWrapper,
+  ClosedFloatingButtonWrapper,
 };

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -8,7 +8,16 @@ import { IFilterValue, IQueryValue } from "@ax/types";
 import * as S from "./style";
 
 const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
-  const { filterItems, value, structuredData, siteID, formCategory, pointer = "categories" } = props;
+  const {
+    filterItems,
+    value,
+    structuredData,
+    siteID,
+    formCategory,
+    pointer = "categories",
+    autoWidth = false,
+    menuPosition = "left",
+  } = props;
 
   const filters: IFilterValue[] = [
     {
@@ -76,7 +85,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
   const isActive = !areEquals(selectedValue, [selectAllOption]);
 
   const Header = () => (
-    <S.HeaderWrapper isActive={isActive}>
+    <S.HeaderWrapper isActive={isActive} autoWidth={autoWidth} className="headerWrapper">
       {trimText(title, 23)}
       <S.IconsWrapper>
         {isActive ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
@@ -85,7 +94,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position={menuPosition} closeOnSelect={false} isCheckGroup={true}>
       <ListTitle data-testid="category-filter-title">Filter by Category</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
@@ -101,6 +110,8 @@ export interface ICategoryFilterProps {
   siteID: number | null;
   formCategory?: { value: string; label: string };
   pointer?: string;
+  autoWidth?: boolean;
+  menuPosition?: string;
 }
 
 export default CategoryFilter;

package/src/components/TableFilters/CategoryFilter/style.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const HeaderWrapper = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
-  width: 215px;
+const HeaderWrapper = styled((props) => <Header {...props} />)<{ isActive: boolean; autoWidth: boolean }>`
+  width: ${(p) => (p.autoWidth ? "auto" : "215px")};
   justify-content: center;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};

package/src/components/Toast/index.tsx

@@ -8,17 +8,19 @@ import * as S from "./style";
 
 const Toast = (props: IToastProps): JSX.Element => {
   const { action, message, setIsVisible } = props;
-  const toast = useRef<any>(null);
+  const toast = useRef<HTMLDivElement>(null);
 
   const { pathname } = useLocation();
   const isEditor = pathname.includes("/editor");
 
-  let temp: any;
+  let temp: NodeJS.Timeout;
   const setTemp = (time: number) => (temp = setTimeout(() => setIsVisible(false), time));
 
   const close = () => {
-    toast.current.classList.add("close-animation");
-    setTemp(1000);
+    if (toast.current) {
+      toast.current.classList.add("close-animation");
+      setTemp(1000);
+    }
   };
 
   useEffect(() => {

package/src/components/index.tsx

@@ -12,6 +12,8 @@ import {
   FieldGroup,
   FieldsDivider,
   FileField,
+  FormCategorySelect,
+  FormContainer,
   FormFieldArray,
   HeadingField,
   HiddenField,
@@ -79,6 +81,7 @@ import FieldsBehavior from "./FieldsBehavior";
 import FileGallery from "./FileGallery";
 import FilterTagsBar from "./FilterTagsBar";
 import Flag from "./Flag";
+import FloatingButton from "./FloatingButton";
 import FloatingMenu from "./FloatingMenu";
 import FloatingPanel from "./FloatingPanel";
 import Gallery from "./Gallery";
@@ -97,6 +100,7 @@ import MenuGroup from "./MenuGroup";
 import Modal from "./Modal";
 import Nav from "./Nav";
 import Notification from "./Notification";
+import OcassionalToast from "./OcassionalToast";
 import PageFinder from "./PageFinder";
 import Pagination from "./Pagination";
 import ProgressBar from "./ProgressBar";
@@ -129,6 +133,8 @@ export {
   FieldGroup,
   FieldsDivider,
   FileField,
+  FormCategorySelect,
+  FormContainer,
   FormFieldArray,
   HeadingField,
   HiddenField,
@@ -196,6 +202,7 @@ export {
   FileGallery,
   FilterTagsBar,
   Flag,
+  FloatingButton,
   FloatingMenu,
   FloatingPanel,
   Gallery,
@@ -214,6 +221,7 @@ export {
   Modal,
   Nav,
   Notification,
+  OcassionalToast,
   PageFinder,
   Pagination,
   ProgressBar,