feat!: filter popover: flip placement above the trigger row when bottom-anchored (#912)

src/components/Filter/components/Filter/components/Backdrop/backdrop.styles.ts

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Backdrop } from "@mui/material";
+
+export const StyledBackdrop = styled(Backdrop)`
+  background-color: transparent;
+  overflow: hidden;
+  overscroll-behavior: none;
+  z-index: 1300;
+`;

src/components/Filter/components/Filter/components/Backdrop/backdrop.tsx

@@ -0,0 +1,15 @@
+import { Portal } from "@mui/material";
+import { JSX } from "react";
+import { useCloseOnEscape } from "../../hooks/UseCloseOnEscape/hook";
+import { StyledBackdrop } from "./backdrop.styles";
+import { BACKDROP_PROPS } from "./constants";
+import { BackdropProps } from "./types";
+
+export const Backdrop = (props: BackdropProps): JSX.Element => {
+  useCloseOnEscape({ onClose: props.onClick, open: props.open });
+  return (
+    <Portal>
+      <StyledBackdrop {...BACKDROP_PROPS} {...props} />
+    </Portal>
+  );
+};

src/components/Filter/components/Filter/components/Backdrop/constants.ts

@@ -0,0 +1,5 @@
+import { BackdropProps } from "@mui/material";
+
+export const BACKDROP_PROPS: Omit<BackdropProps, "open"> = {
+  slotProps: { transition: { unmountOnExit: true } },
+};

src/components/Filter/components/Filter/components/Backdrop/types.ts

@@ -0,0 +1,5 @@
+import { BackdropProps as MBackdropProps } from "@mui/material";
+
+export interface BackdropProps extends Omit<MBackdropProps, "onClick"> {
+  onClick: () => void;
+}

src/components/Filter/components/Filter/components/DrawerTransition/constants.ts

@@ -0,0 +1,8 @@
+import { SlideProps } from "@mui/material";
+
+export const SIDE_PROPS: Omit<SlideProps, "children"> = {
+  direction: "right",
+  easing: "ease-out",
+  timeout: { enter: 250, exit: 300 },
+  unmountOnExit: true,
+};

src/components/Filter/components/Filter/components/DrawerTransition/drawerTransition.tsx

@@ -1,24 +1,26 @@
-import { Slide as MSlide, SlideProps as MSlideProps } from "@mui/material";
-import { JSX, forwardRef } from "react";
+import { Slide } from "@mui/material";
+import { JSX } from "react";
+import { SIDE_PROPS } from "./constants";
+import { DrawerTransitionProps } from "./types";
 
-export const DrawerTransition = forwardRef<Element, MSlideProps>(
-  function DrawerTransition(
-    {
-      children,
-      ...props /* Spread props to allow for Mui SlideProps specific prop overrides. */
-    }: MSlideProps,
-    ref,
-  ): JSX.Element {
-    return (
-      <MSlide
-        direction="right"
-        easing="ease-out"
-        ref={ref}
-        unmountOnExit
-        {...props}
-      >
-        {children}
-      </MSlide>
-    );
-  },
-);
+/**
+ * Slide transition used for the drawer-surface filter popover.
+ * @param props - Component props (extends MUI SlideProps).
+ * @param props.children - Transition child.
+ * @param props.placement - Popper placement; consumed only to keep it off the DOM.
+ * @param props.ref - Forwarded ref.
+ * @returns Slide transition element.
+ */
+export const DrawerTransition = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- destructured out so it doesn't spread onto the DOM Slide element
+  placement: _placement,
+  ref,
+  ...props
+}: DrawerTransitionProps): JSX.Element => {
+  return (
+    <Slide {...SIDE_PROPS} ref={ref} {...props}>
+      {children}
+    </Slide>
+  );
+};

src/components/Filter/components/Filter/components/DrawerTransition/types.ts

@@ -0,0 +1,7 @@
+import { PopperPlacementType, SlideProps } from "@mui/material";
+import { Ref } from "react";
+
+export interface DrawerTransitionProps extends SlideProps {
+  placement?: PopperPlacementType;
+  ref?: Ref<unknown>;
+}

src/components/Filter/components/Filter/components/MenuTransition/constants.ts

@@ -0,0 +1,11 @@
+import { PopperPlacementType } from "@mui/material";
+import { CSSProperties } from "react";
+import { POPPER_PROPS } from "../../../../../../styles/common/mui/popper";
+
+export const PLACEMENT_TRANSFORM_ORIGIN: Partial<
+  Record<PopperPlacementType, CSSProperties["transformOrigin"]>
+> = {
+  [POPPER_PROPS.PLACEMENT.BOTTOM_START]: "0 0 0",
+  [POPPER_PROPS.PLACEMENT.RIGHT]: "0 50% 0",
+  [POPPER_PROPS.PLACEMENT.TOP_START]: "0 100% 0",
+};

src/components/Filter/components/Filter/components/MenuTransition/menuTransition.tsx

@@ -0,0 +1,31 @@
+import { Grow } from "@mui/material";
+import { JSX } from "react";
+import { POPPER_PROPS } from "../../../../../../styles/common/mui/popper";
+import { PLACEMENT_TRANSFORM_ORIGIN } from "./constants";
+import { MenuTransitionProps } from "./types";
+
+/**
+ * Grow transition with a placement-driven transform origin.
+ * @param props - Component props.
+ * @param props.placement - Popper placement, drives the transform origin.
+ * @param props.ref - Forwarded ref.
+ * @param props.style - Style merged with the placement-derived transform origin.
+ * @returns Grow transition element.
+ */
+export const MenuTransition = ({
+  placement = POPPER_PROPS.PLACEMENT.BOTTOM_START,
+  ref,
+  style,
+  ...props
+}: MenuTransitionProps): JSX.Element => {
+  return (
+    <Grow
+      {...props}
+      ref={ref}
+      style={{
+        ...style,
+        transformOrigin: PLACEMENT_TRANSFORM_ORIGIN[placement],
+      }}
+    />
+  );
+};

src/components/Filter/components/Filter/components/MenuTransition/types.ts

@@ -0,0 +1,7 @@
+import { GrowProps, PopperPlacementType } from "@mui/material";
+import { Ref } from "react";
+
+export interface MenuTransitionProps extends GrowProps {
+  placement?: PopperPlacementType;
+  ref?: Ref<unknown>;
+}

src/components/Filter/components/Filter/components/Popper/constants.ts

@@ -0,0 +1,22 @@
+import { PopperProps } from "@mui/material";
+import { POPPER_PROPS as MUI_POPPER_PROPS } from "../../../../../../styles/common/mui/popper";
+
+export const POPPER_PROPS: Omit<PopperProps, "open"> = {
+  placement: MUI_POPPER_PROPS.PLACEMENT.BOTTOM_START,
+  popperOptions: {
+    modifiers: [
+      {
+        name: "flip",
+        options: {
+          fallbackPlacements: [
+            MUI_POPPER_PROPS.PLACEMENT.TOP_START,
+            MUI_POPPER_PROPS.PLACEMENT.RIGHT,
+          ],
+        },
+      },
+      { name: "offset", options: { offset: [0, 4] } },
+    ],
+  },
+  role: "dialog",
+  transition: true,
+};

src/components/Filter/components/Filter/filter.styles.ts

@@ -1,26 +1,34 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Popover } from "@mui/material";
+import { Popper } from "@mui/material";
 import { PALETTE } from "../../../../styles/common/constants/palette";
 import { SURFACE_TYPE } from "../surfaces/types";
-import { FilterProps } from "./filter";
+import { FilterProps } from "./types";
 
-export const StyledPopover = styled(Popover, {
+export const StyledPopper = styled(Popper, {
   shouldForwardProp: (prop) => prop !== "surfaceType",
 })<Pick<FilterProps, "surfaceType">>`
-  .MuiPaper-menu {
-    margin: 4px 0;
+  z-index: 1300;
+
+  .MuiPaper-root {
+    overflow: hidden;
+    overscroll-behavior: none;
   }
 
   ${({ surfaceType }) =>
     surfaceType === SURFACE_TYPE.DRAWER &&
     css`
+      inset: 0 auto 0 0 !important; // required to override Popper's default positioning for correct placement within the drawer.
+      transform: none !important; // required to override Popper's transform for correct positioning within the drawer.
+
       .MuiPaper-root {
         background-color: ${PALETTE.SMOKE_LIGHT};
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
         height: 100%;
         margin: 0;
         max-height: 100%;
-        overflow: visible; // required; allows backdrop button to render outside of drawer container.
       }
     `}
 `;