@sproutsocial/seeds-react-drawer 1.2.11 → 2.2.7

package/src/Drawer.tsx

@@ -1,291 +0,0 @@
-import * as React from "react";
-import { useContext, useEffect, useRef } from "react";
-import FocusLock from "react-focus-lock";
-import { motion, AnimatePresence } from "motion/react";
-import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/unitless";
-import Box from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import Icon from "@sproutsocial/seeds-react-icon";
-// eslint-disable-next-line import/no-deprecated
-import Text from "@sproutsocial/seeds-react-text";
-import Portal from "@sproutsocial/seeds-react-portal";
-import Container, { Content } from "./styles";
-import type {
-  TypeDrawerContext,
-  TypeDrawerCloseButtonProps,
-  TypeDrawerHeaderProps,
-  TypeDrawerProps,
-  TypeInnerDrawerProps,
-  TypeDrawerContentProps,
-  TypeUseCloseOnBodyClickProps,
-} from "./DrawerTypes";
-
-const MotionContainer = motion(Container as any);
-
-const doesRefContainEventTarget = (
-  ref: { current: { contains: (arg0: any) => any } },
-  event: Event
-) => {
-  return (
-    ref.current &&
-    event.target instanceof Node &&
-    ref.current.contains(event.target)
-  );
-};
-
-export const DrawerContext = React.createContext<TypeDrawerContext>({
-  isLocked: false,
-  setIsLocked: () => {},
-});
-
-const DrawerCloseButton = (props: TypeDrawerCloseButtonProps) => {
-  const drawerContext = useContext(DrawerContext);
-
-  if (props.render) {
-    return props.render(drawerContext) ?? null;
-  }
-
-  return (
-    <Button
-      appearance="pill"
-      aria-label={drawerContext.closeButtonLabel}
-      onClick={drawerContext.onClose}
-      {...props}
-    >
-      {props.children || <Icon aria-hidden name="x-outline" />}
-    </Button>
-  );
-};
-
-const DrawerHeader = ({
-  title = "",
-  id = undefined,
-  children,
-  render,
-  ...rest
-}: TypeDrawerHeaderProps) => {
-  const drawerContext = useContext(DrawerContext);
-
-  if (render) {
-    return render(drawerContext);
-  }
-
-  return (
-    <Box
-      display="flex"
-      flex="0 0 auto"
-      justifyContent="space-between"
-      alignItems="center"
-      pt={400}
-      px={450}
-      {...rest}
-    >
-      {children || (
-        <React.Fragment>
-          <Text
-            as="h2"
-            fontSize={400}
-            fontWeight="semibold"
-            color="text.headline"
-            id={id}
-          >
-            {title}
-          </Text>
-          <DrawerCloseButton />
-        </React.Fragment>
-      )}
-    </Box>
-  );
-};
-
-const DrawerContent = ({ children, ...rest }: TypeDrawerContentProps) => (
-  <Content height="100%" p={450} color="text.body" {...rest}>
-    {children}
-  </Content>
-);
-
-const useCloseOnBodyClick = ({
-  isOpen,
-  ref,
-  disableCloseOnClickOutside,
-  onClose,
-  closeTargets,
-}: TypeUseCloseOnBodyClickProps) => {
-  const { isLocked } = useContext(DrawerContext);
-
-  useEffect(() => {
-    const documentBody = document.body;
-
-    if (!documentBody || !isOpen) {
-      return;
-    }
-
-    const onEsc = (event: KeyboardEvent): void => {
-      if (!isLocked && event.key === "Escape") {
-        onClose();
-      }
-    };
-
-    const bodyClick = (event: Event): void => {
-      if (
-        // @ts-ignore I'm not sure how to type this ref properly
-        !doesRefContainEventTarget(ref, event) &&
-        !disableCloseOnClickOutside
-      ) {
-        onClose();
-      }
-    };
-
-    documentBody?.addEventListener("keydown", onEsc, { capture: true });
-
-    if (closeTargets) {
-      closeTargets.forEach((targetElement) =>
-        targetElement?.addEventListener("click", bodyClick, { capture: true })
-      );
-    } else {
-      documentBody.firstElementChild?.addEventListener("click", bodyClick, {
-        capture: true,
-      });
-    }
-
-    return () => {
-      documentBody?.removeEventListener("keydown", onEsc, { capture: true });
-
-      if (closeTargets) {
-        closeTargets.forEach((targetElement) =>
-          targetElement?.removeEventListener("click", bodyClick, {
-            capture: true,
-          })
-        );
-      } else {
-        documentBody.firstElementChild?.removeEventListener(
-          "click",
-          bodyClick,
-          { capture: true }
-        );
-      }
-    };
-  }, [
-    onClose,
-    disableCloseOnClickOutside,
-    closeTargets,
-    ref,
-    isLocked,
-    isOpen,
-  ]);
-};
-
-const Drawer = ({
-  id,
-  offset,
-  direction,
-  children,
-  disableCloseOnClickOutside,
-  onClose,
-  zIndex,
-  closeTargets,
-  width,
-  focusLockExemptCheck,
-  isOpen,
-  ...rest
-}: TypeInnerDrawerProps) => {
-  const ref = useRef(null);
-  useCloseOnBodyClick({
-    ref,
-    disableCloseOnClickOutside,
-    onClose,
-    closeTargets,
-    isOpen,
-  });
-
-  const offset_x = width * (direction === "left" ? -1 : 1);
-
-  return (
-    <FocusLock
-      key={id}
-      autoFocus={true}
-      disabled={!isOpen}
-      returnFocus
-      whiteList={
-        focusLockExemptCheck ? (e) => !focusLockExemptCheck(e) : undefined
-      }
-    >
-      <AnimatePresence>
-        {isOpen && (
-          <MotionContainer
-            ref={ref}
-            style={{ zIndex }}
-            width={width}
-            offset={offset}
-            direction={direction}
-            data-qa-drawer={id}
-            role="dialog"
-            initial={{ opacity: 0, x: offset_x }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: offset_x }}
-            transition={{ duration: MOTION_DURATION_MEDIUM }}
-            {...rest}
-          >
-            {children}
-          </MotionContainer>
-        )}
-      </AnimatePresence>
-    </FocusLock>
-  );
-};
-
-const DrawerContainer = ({
-  children,
-  closeButtonLabel,
-  direction = "right",
-  disableCloseOnClickOutside = false,
-  id,
-  isOpen,
-  offset = 0,
-  onClose,
-  zIndex = 7,
-  closeTargets = [],
-  width = 600,
-  ...rest
-}: TypeDrawerProps) => {
-  const [isLocked, setIsLocked] = React.useState(false);
-  return (
-    <Portal id={id}>
-      <DrawerContext.Provider
-        value={{
-          onClose,
-          closeButtonLabel,
-          isLocked,
-          setIsLocked,
-        }}
-      >
-        <Drawer
-          isOpen={isOpen}
-          id={id}
-          offset={offset}
-          direction={direction}
-          disableCloseOnClickOutside={disableCloseOnClickOutside}
-          onClose={onClose}
-          zIndex={zIndex}
-          closeTargets={closeTargets}
-          width={width}
-          data-qa-drawer={id || ""}
-          data-qa-drawer-isopen={isOpen}
-          {...rest}
-        >
-          {children}
-        </Drawer>
-      </DrawerContext.Provider>
-    </Portal>
-  );
-};
-
-DrawerHeader.displayName = "Drawer.Header";
-DrawerContent.displayName = "Drawer.Content";
-DrawerCloseButton.displayName = "Drawer.CloseButton";
-
-DrawerContainer.Header = DrawerHeader;
-DrawerContainer.Content = DrawerContent;
-DrawerContainer.CloseButton = DrawerCloseButton;
-
-export default DrawerContainer;

package/src/DrawerTypes.ts

@@ -1,88 +0,0 @@
-import * as React from "react";
-import type {
-  TypeSystemCommonProps,
-  TypeStyledComponentsCommonProps,
-} from "@sproutsocial/seeds-react-system-props";
-import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
-import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
-
-type DrawerAnimationDirection = "left" | "right";
-
-export interface TypeDrawerContext {
-  /** Callback for close button */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onClose?: () => any;
-
-  /** aria-label for drawer close button */
-  closeButtonLabel?: string;
-  /**
-   * isLocked and setIsLocked are used when a Drawer contains other components (like Menu) that also
-   * listen for Escape key events. By locking the Drawer, we can prevent conflicts
-   * where multiple components try to handle the same keydown event.
-   */
-  isLocked: boolean;
-  setIsLocked: (locked: boolean) => void;
-}
-// TODO: Should the render prop be a React.FC?
-export interface TypeDrawerCloseButtonProps
-  extends Omit<TypeButtonProps, "children"> {
-  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the on-close behavior. */
-  render?: React.FC<TypeDrawerContext>;
-  children?: React.ReactNode;
-}
-
-export interface TypeDrawerHeaderProps extends TypeBoxProps {
-  title?: string;
-  children?: React.ReactNode;
-
-  /** An optional function that receives the context of the parent drawer as an argument. Can be used to customize the appearance of the header. */
-  render?: React.FC<TypeDrawerContext>;
-}
-
-export interface TypeInnerDrawerProps
-  extends Omit<TypeDrawerProps, "closeButtonLabel"> {
-  width: number;
-  direction: DrawerAnimationDirection;
-}
-
-type useBodyClicksProps = Pick<
-  TypeDrawerProps,
-  "closeTargets" | "onClose" | "disableCloseOnClickOutside"
->;
-
-export interface TypeUseCloseOnBodyClickProps
-  extends Pick<
-    TypeDrawerProps,
-    "closeTargets" | "onClose" | "disableCloseOnClickOutside"
-  > {
-  ref?: React.RefObject<HTMLElement | null>;
-  isOpen: boolean;
-}
-
-export interface TypeDrawerProps
-  extends TypeStyledComponentsCommonProps,
-    TypeSystemCommonProps,
-    Omit<React.ComponentPropsWithoutRef<"nav">, "color"> {
-  children: React.ReactNode;
-
-  /** Label for the close button. Usually this should be "Close" */
-  closeButtonLabel: string;
-
-  /** Whether the drawer slides in from the left or right side of the screen */
-  direction?: DrawerAnimationDirection;
-
-  /** In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop. */
-  disableCloseOnClickOutside?: boolean;
-  id: string;
-  isOpen: boolean;
-  offset?: number;
-  onClose: () => void;
-  zIndex?: number;
-  closeTargets?: Array<Element>;
-  width?: number;
-  focusLockExemptCheck?: (element: HTMLElement) => boolean;
-}
-
-export interface TypeDrawerContentProps extends TypeBoxProps {
-  children?: React.ReactNode;
-}

package/src/__tests__/Drawer.test.tsx

@@ -1,339 +0,0 @@
-/* eslint-disable testing-library/prefer-screen-queries */
-
-import React, { useState, useContext } from "react";
-import {
-  render as testRender,
-  waitFor,
-  screen,
-  act,
-} from "@sproutsocial/seeds-react-testing-library";
-import type { TypeDrawerProps } from "../DrawerTypes";
-import Drawer, { DrawerContext } from "../Drawer";
-
-const StatefulDrawer = ({
-  isOpen,
-  onClose,
-  children,
-  ...rest
-}: TypeDrawerProps) => {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen || false);
-
-  const onDrawerClose = () => {
-    act(() => {
-      setIsDrawerOpen(false);
-    });
-    onClose();
-  };
-
-  return (
-    <Drawer
-      {...rest}
-      isOpen={isDrawerOpen}
-      onClose={onDrawerClose}
-      id="1"
-      closeButtonLabel="close button"
-    >
-      {children}
-    </Drawer>
-  );
-};
-
-const render = ({
-  isOpen = false,
-  direction,
-  disableCloseOnClickOutside,
-  children = (
-    <React.Fragment>
-      <Drawer.Header title="Drawer Header" id="drawer-1-header" />
-      <Drawer.Content>
-        <p>Drawer Content</p>
-      </Drawer.Content>
-    </React.Fragment>
-  ),
-  offset,
-  onClose = jest.fn(),
-  id = "drawer",
-  closeButtonLabel = "close",
-  width = 600,
-}: Partial<TypeDrawerProps>) => {
-  const { baseElement } = testRender(<div id="main-content" />);
-  const mainContentRef = baseElement.querySelector("#main-content");
-  return {
-    ...testRender(
-      <div>
-        {baseElement.innerHTML}
-        <StatefulDrawer
-          isOpen={isOpen}
-          direction={direction}
-          offset={offset}
-          onClose={onClose}
-          closeButtonLabel={closeButtonLabel}
-          id={id}
-          disableCloseOnClickOutside={disableCloseOnClickOutside}
-          // @ts-ignore - We'll come back to test updating this
-          closeTargets={[mainContentRef]}
-          width={width}
-        >
-          {children}
-        </StatefulDrawer>
-      </div>
-    ),
-  };
-};
-
-describe("Drawer", () => {
-  it("should not be in the document by default", () => {
-    render({});
-    expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-  });
-
-  it("should render drawer", () => {
-    render({
-      isOpen: true,
-    });
-    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-  });
-
-  it("should close drawer on header click", async () => {
-    const { user } = render({
-      isOpen: true,
-    });
-
-    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-    await act(async () => {
-      await user.click(screen.getByLabelText("close button"));
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  it("should close drawer on header click when using custom header", async () => {
-    const { user } = render({
-      isOpen: true,
-      children: (
-        <React.Fragment>
-          <Drawer.Header>
-            <h1>Title</h1>
-            <Drawer.CloseButton />
-          </Drawer.Header>
-          <Drawer.Content>
-            <p>Drawer Content</p>
-          </Drawer.Content>
-        </React.Fragment>
-      ),
-    });
-    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-    await act(async () => {
-      await user.click(screen.getByLabelText("close button"));
-    });
-    await waitFor(() => {
-      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  it("should close drawer on outside click", async () => {
-    const { user, baseElement } = render({
-      isOpen: true,
-    });
-    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-    await act(async () => {
-      await user.click(baseElement.querySelector("#main-content") as Element);
-    });
-    await waitFor(() => {
-      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  it("should not close drawer on outside click when disabled", async () => {
-    const { user, baseElement } = render({
-      isOpen: true,
-      disableCloseOnClickOutside: true,
-    });
-    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-    await user.click(baseElement.querySelector("#main-content") as Element);
-    await waitFor(() => {
-      // eslint-disable-next-line testing-library/prefer-presence-queries
-      expect(screen.queryByText(/drawer content/i)).toBeInTheDocument();
-    });
-  });
-
-  it("should close drawer on esc key", async () => {
-    const { user, baseElement } = render({
-      isOpen: true,
-      disableCloseOnClickOutside: true,
-    });
-    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-    await act(async () => {
-      await user.keyboard("{Escape}");
-    });
-    await waitFor(() => {
-      expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  it("should call onClose callback when drawer is closed", async () => {
-    const onClose = jest.fn();
-    const { user } = render({
-      isOpen: true,
-      onClose,
-    });
-    expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-    await act(async () => {
-      await user.click(screen.getByLabelText("close button"));
-    });
-    await waitFor(() => {
-      expect(onClose).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it("should not call onClose callback when drawer is already closed", async () => {
-    const onClose = jest.fn();
-    render({
-      isOpen: false,
-      onClose,
-    });
-    expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-    expect(onClose).toHaveBeenCalledTimes(0);
-  });
-
-  it("should have dialog role", () => {
-    render({
-      isOpen: true,
-    });
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-  });
-
-  it("should have focus on drawer when opened", () => {
-    render({
-      isOpen: true,
-    });
-    expect(screen.getByLabelText("close button")).toHaveFocus();
-  });
-
-  it("should have an h2 with id", () => {
-    render({
-      isOpen: true,
-    });
-    expect(screen.getByRole("heading")).toHaveAttribute(
-      "id",
-      "drawer-1-header"
-    );
-  });
-
-  it("should be 600px wide by default", () => {
-    render({ isOpen: true });
-    expect(screen.getByRole("dialog")).toHaveStyle("width: 600px");
-  });
-
-  it("should customize the drawer width when provided", () => {
-    render({ isOpen: true, width: 400 });
-    expect(screen.getByRole("dialog")).toHaveStyle("width: 400px");
-  });
-});
-
-const LockButton = () => {
-  const [isActive, setIsActive] = useState(false);
-  const { setIsLocked } = useContext(DrawerContext);
-
-  const onClick = () => {
-    setIsActive(true);
-    setIsLocked(true);
-  };
-
-  React.useEffect(() => {
-    const documentBody = document.body;
-
-    if (isActive && documentBody) {
-      const onEsc = (e: KeyboardEvent): void => {
-        if (["Escape", "Esc"].includes(e.key)) {
-          e.stopPropagation();
-          setIsActive(false);
-          setIsLocked(false);
-        }
-      };
-
-      documentBody.addEventListener("keydown", onEsc, { capture: true });
-      return () => {
-        documentBody.removeEventListener("keydown", onEsc, { capture: true });
-      };
-    }
-  }, [isActive, setIsActive]);
-
-  return <button onClick={onClick}>Click to lock Escape key</button>;
-};
-
-const ChildrenWithLockButton = () => (
-  <React.Fragment>
-    <Drawer.Header title="Drawer Header" id="drawer-1-header" />
-    <Drawer.Content>
-      <p>Drawer Content</p>
-      <LockButton />
-    </Drawer.Content>
-  </React.Fragment>
-);
-
-describe("Drawer with Lock", () => {
-  describe("Unlocked", () => {
-    it("should close drawer on esc key", async () => {
-      const { user } = render({
-        isOpen: true,
-        children: <ChildrenWithLockButton />,
-      });
-      expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-      await act(async () => {
-        await user.keyboard("{Escape}");
-      });
-      await waitFor(() => {
-        expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-      });
-    });
-  });
-
-  describe("Locked", () => {
-    it("should not close drawer on first esc key", async () => {
-      const { user } = render({
-        isOpen: true,
-        children: <ChildrenWithLockButton />,
-      });
-      const lockButton = screen.getByText("Click to lock Escape key");
-
-      await act(async () => {
-        await user.click(lockButton);
-      });
-      await act(async () => {
-        await user.keyboard("{Escape}");
-      });
-      await waitFor(() => {
-        expect(screen.queryByText(/drawer content/i)).toBeInTheDocument();
-      });
-      // lock is reset, handle escape as usual
-      await act(async () => {
-        await user.keyboard("{Escape}");
-      });
-      await waitFor(() => {
-        expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-      });
-    });
-    it("should close drawer on outside click", async () => {
-      const { user, baseElement } = render({
-        isOpen: true,
-        children: <ChildrenWithLockButton />,
-      });
-      const lockButton = screen.getByText("Click to lock Escape key");
-
-      await act(async () => {
-        await user.click(lockButton);
-      });
-
-      expect(screen.getByText(/drawer content/i)).toBeInTheDocument();
-      await act(async () => {
-        await user.click(baseElement.querySelector("#main-content") as Element);
-      });
-      await waitFor(() => {
-        expect(screen.queryByText(/drawer content/i)).not.toBeInTheDocument();
-      });
-    });
-  });
-});