Shared: Filter: Fixed styles because of an aside header component.

packages/shared/components/filter/Filter.styled.ts

@@ -216,56 +216,6 @@ const StyledFilterBlock = styled.div`
 
 StyledFilterBlock.defaultProps = { theme: Base };
 
-const StyledFilterBlockHeader = styled.div<{ isSelector?: boolean }>`
-  height: 53px;
-  min-height: 53px;
-
-  margin: 0;
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          padding-right: 16px;
-          padding-left: 37px;
-        `
-      : css`
-          padding-left: 16px;
-          padding-right: 37px;
-        `}
-
-  box-sizing: border-box;
-
-  border-bottom: ${(props) =>
-    props.isSelector ? "none" : props.theme.filterInput.filter.border};
-
-  display: flex;
-  align-items: center;
-
-  h1 {
-    font-weight: 700;
-  }
-
-  #filter_search-options-clear {
-    margin-left: 16px;
-  }
-  .arrow-button {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            margin-left: 12px;
-          `
-        : css`
-            margin-right: 12px;
-          `}
-  }
-
-  svg {
-    cursor: pointer;
-  }
-`;
-
-StyledFilterBlockHeader.defaultProps = { theme: Base };
-
 const StyledFilterBlockItem = styled.div<{
   withoutHeader: boolean;
   isFirst?: boolean;
@@ -500,34 +450,6 @@ const StyledFilterBlockFooter = styled.div`
 
 StyledFilterBlockFooter.defaultProps = { theme: Base };
 
-const StyledControlContainer = styled.div`
-  display: flex;
-
-  width: 24px;
-  height: 24px;
-  position: absolute;
-
-  border-radius: 100px;
-  cursor: pointer;
-
-  align-items: center;
-  justify-content: center;
-  z-index: 450;
-
-  ${(props) =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          left: 13px;
-          top: 17px;
-        `
-      : css`
-          right: 13px;
-          top: 17px;
-        `}
-`;
-
-StyledControlContainer.defaultProps = { theme: Base };
-
 const selectedViewIcon = css`
   svg {
     path {
@@ -697,7 +619,6 @@ StyledSortButton.defaultProps = { theme: Base };
 export {
   StyledSortButton,
   StyledFilterBlock,
-  StyledFilterBlockHeader,
   StyledFilterBlockItem,
   StyledFilterBlockItemHeader,
   StyledFilterBlockItemContent,
@@ -711,7 +632,6 @@ export {
   StyledFilterBlockItemCheckboxContainer,
   StyledFilterBlockItemSeparator,
   StyledFilterBlockFooter,
-  StyledControlContainer,
 };
 
 export { StyledFilterInput, StyledSearchInput, StyledButton };

packages/shared/components/filter/sub-components/FilterBlock.tsx

@@ -28,7 +28,6 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 
 import ClearReactSvgUrl from "PUBLIC_DIR/images/clear.react.svg?url";
-import CrossIcon from "PUBLIC_DIR/images/cross.react.svg?url";
 
 import GroupsSelector from "../../../selectors/Groups";
 import PeopleSelector from "../../../selectors/People";
@@ -38,18 +37,11 @@ import { FilterBlockLoader } from "../../../skeletons/filter";
 
 import { Backdrop } from "../../backdrop";
 import { Button, ButtonSize } from "../../button";
-import { Heading, HeadingLevel, HeadingSize } from "../../heading";
-import { IconButton } from "../../icon-button";
 import { Scrollbar } from "../../scrollbar";
 import { Portal } from "../../portal";
 import { TSelectorItem } from "../../selector";
 
-import {
-  StyledControlContainer,
-  StyledFilterBlock,
-  StyledFilterBlockFooter,
-  StyledFilterBlockHeader,
-} from "../Filter.styled";
+import { StyledFilterBlock, StyledFilterBlockFooter } from "../Filter.styled";
 
 import { FilterBlockProps, TGroupItem, TItem } from "../Filter.types";
 import {
@@ -58,6 +50,7 @@ import {
 } from "../Filter.utils";
 
 import FilterBlockItem from "./FilterBlockItem";
+import { AsideHeader } from "../../aside";
 
 const FilterBlock = ({
   selectedFilterValue,
@@ -481,7 +474,7 @@ const FilterBlock = ({
   const showFooter = isLoading ? false : isEqualFilter();
   const showClearFilterBtn =
     !isLoading && (selectedFilterValue.length > 0 || filterValues.length > 0);
-  console.log("showSelector.type", showSelector.type);
+
   const filterBlockComponent = (
     <>
       {showSelector.show ? (
@@ -496,6 +489,7 @@ const FilterBlock = ({
               withHeader
               headerProps={{
                 onBackClick: onArrowClick,
+                onCloseClick: hideFilterBlock,
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
@@ -509,6 +503,7 @@ const FilterBlock = ({
               withHeader
               headerProps={{
                 onBackClick: onArrowClick,
+                onCloseClick: hideFilterBlock,
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
@@ -521,6 +516,7 @@ const FilterBlock = ({
               withHeader
               headerProps={{
                 onBackClick: onArrowClick,
+                onCloseClick: hideFilterBlock,
                 headerLabel: selectorLabel,
                 withoutBackButton: false,
               }}
@@ -533,29 +529,20 @@ const FilterBlock = ({
         </StyledFilterBlock>
       ) : (
         <StyledFilterBlock>
-          <StyledFilterBlockHeader>
-            <Heading size={HeadingSize.medium} level={HeadingLevel.h1}>
-              {filterHeader}
-            </Heading>
-            {showClearFilterBtn && (
-              <IconButton
-                id="filter_search-options-clear"
-                iconName={ClearReactSvgUrl}
-                isFill
-                onClick={onClearFilter}
-                size={17}
-              />
-            )}
+          <AsideHeader
+            header={filterHeader}
+            onCloseClick={hideFilterBlock}
+            {...(showClearFilterBtn && {
+              headerIcons: [
+                {
+                  key: "filter-icon",
+                  url: ClearReactSvgUrl,
+                  onClick: onClearFilter,
+                },
+              ],
+            })}
+          />
 
-            <StyledControlContainer onClick={hideFilterBlock}>
-              <IconButton
-                size={17}
-                className="close-button"
-                iconName={CrossIcon}
-                isClickable
-              />
-            </StyledControlContainer>
-          </StyledFilterBlockHeader>
           <div className="filter-body">
             {isLoading ? (
               <FilterBlockLoader

packages/shared/selectors/Groups/index.tsx

@@ -143,7 +143,7 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     [searchValue],
   );
 
-  const SelectorGroups = (
+  return (
     <Selector
       id={id}
       className={className}
@@ -187,16 +187,6 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
       }
     />
   );
-
-  if (!onClose) {
-    return SelectorGroups;
-  }
-
-  return (
-    <Aside visible onClose={onClose} withoutBodyScroll>
-      {SelectorGroups}
-    </Aside>
-  );
 };
 
 export default GroupsSelector;

packages/shared/selectors/People/index.tsx

@@ -52,7 +52,6 @@ import { AvatarRole } from "../../components/avatar";
 import { Text } from "../../components/text";
 
 import { PeopleSelectorProps } from "./PeopleSelector.types";
-import { Aside } from "../../components/aside";
 
 const toListItem = (
   item: TUser,
@@ -379,7 +378,7 @@ const PeopleSelector = ({
     );
   };
 
-  const SelectorUser = (
+  return (
     <Selector
       id={id}
       alwaysShowFooter={itemsList.length !== 0 || Boolean(searchValue)}
@@ -416,15 +415,6 @@ const PeopleSelector = ({
       {...infoProps}
     />
   );
-  if (!onClose) {
-    return SelectorUser;
-  }
-
-  return (
-    <Aside visible onClose={onClose} withoutBodyScroll>
-      {SelectorUser}
-    </Aside>
-  );
 };
 
 export default PeopleSelector;