Modalv2

src/index.ts

@@ -48,6 +48,7 @@ export * from "./masonry";
 export * from "./masthead";
 export * from "./menu";
 export * from "./modal";
+export * from "./modal-v2";
 export * from "./navbar";
 export * from "./notification-banner";
 export * from "./otp-input";

src/modal-v2/index.ts

@@ -0,0 +1,10 @@
+import { ModalV2 as Base } from "./modal-v2";
+import { Card, CloseButton, Content } from "./slots";
+
+export const ModalV2 = Object.assign(Base, {
+    Card,
+    CloseButton,
+    Content,
+});
+
+export * from "./types";

src/modal-v2/modal-context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+interface IModalContext {
+    onClose?: (() => void) | undefined;
+}
+
+export const ModalContext = createContext<IModalContext>({
+    onClose: () => {
+        // default does nothing
+    },
+});

src/modal-v2/modal-v2.styles.tsx

@@ -0,0 +1,67 @@
+import styled, { css } from "styled-components";
+import { MediaQuery, Motion } from "../theme";
+import { ModalAnimationDirection } from "./types";
+
+interface Props {
+    $show: boolean;
+    $animationFrom?: ModalAnimationDirection;
+    $verticalHeight?: number;
+    $offsetTop?: number;
+}
+
+export const Container = styled.div<Props>`
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    overflow: auto;
+
+    ${MediaQuery.MaxWidth.sm} {
+        ${(props) => {
+            return css`
+                height: calc(
+                    ${props.$verticalHeight
+                            ? `${props.$verticalHeight}px`
+                            : "1vh"} * 100
+                );
+            `;
+        }}
+
+        top: ${(props) => props.$offsetTop || 0}px;
+    }
+
+    ${(props) => css`
+        &[data-status="initial"] {
+            opacity: 0;
+            ${props.$animationFrom}: -3%;
+        }
+
+        &[data-status="open"] {
+            opacity: 1;
+            ${props.$animationFrom}: 0;
+            transition: all ${Motion["duration-250"]}
+                ${Motion["ease-entrance"]}
+            transition-delay: ${Motion["duration-150"]};
+        }
+
+        &[data-status="close"] {
+            opacity: 0;
+            ${props.$animationFrom}: -3%;
+            transition: all ${Motion["duration-250"]}
+                ${Motion["ease-exit"]};
+        }
+    `}
+`;
+
+export const ScrollContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100%;
+    pointer-events: none;
+`;
+
+export const ModalContainer = styled.div`
+    pointer-events: auto;
+    width: 100%;
+`;

src/modal-v2/modal-v2.tsx

@@ -0,0 +1,109 @@
+import {
+    FloatingFocusManager,
+    useDismiss,
+    useFloating,
+    useInteractions,
+    useTransitionStatus,
+} from "@floating-ui/react";
+import { useEffect } from "react";
+import { Overlay } from "../overlay/overlay";
+import { useViewport } from "../shared/hooks";
+import { ModalContext } from "./modal-context";
+import { Container, ModalContainer, ScrollContainer } from "./modal-v2.styles";
+import { ModalV2Props } from "./types";
+
+export const ModalV2 = ({
+    id,
+    show,
+    onClose,
+    animationFrom = "bottom",
+    children,
+    enableOverlayClick = true,
+    rootComponentId,
+    zIndex,
+    onOverlayClick,
+    dismissKeyboardOnShow = true,
+    "data-testid": testId = "modal",
+    ...otherProps
+}: ModalV2Props): JSX.Element => {
+    // =========================================================================
+    // CONST, STATE, REF
+    // =========================================================================
+    const { verticalHeight, offsetTop } = useViewport();
+
+    // =========================================================================
+    // FLOATING UI CONFIG
+    // =========================================================================
+    const { refs, context } = useFloating({
+        open: show,
+        onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                onClose?.();
+            }
+        },
+    });
+    const { isMounted, status } = useTransitionStatus(context, {
+        duration: 300,
+    });
+    const dismiss = useDismiss(context, {
+        /* handled by overlayclick */
+        outsidePress: false,
+        enabled: !!onClose,
+    });
+    const { getFloatingProps } = useInteractions([dismiss]);
+
+    // =========================================================================
+    // EFFECTS
+    // =========================================================================
+    useEffect(() => {
+        if (show && dismissKeyboardOnShow) {
+            // dismiss software keyboard to put modal in fullscreen
+            (document.activeElement as HTMLElement)?.blur?.();
+        }
+    }, [dismissKeyboardOnShow, show]);
+
+    // =========================================================================
+    // RENDER FUNCTIONS
+    // =========================================================================
+    return (
+        <Overlay
+            data-testid={`${testId}-overlay`}
+            show={isMounted}
+            enableOverlayClick={enableOverlayClick}
+            onOverlayClick={onOverlayClick}
+            id={id}
+            rootId={rootComponentId}
+            zIndex={zIndex}
+        >
+            <Container
+                $show={isMounted}
+                $animationFrom={animationFrom}
+                data-testid={testId}
+                $verticalHeight={verticalHeight}
+                $offsetTop={offsetTop}
+                {...otherProps}
+                data-status={status}
+            >
+                <ModalContext.Provider value={{ onClose }}>
+                    {isMounted && (
+                        <FloatingFocusManager
+                            context={context}
+                            initialFocus={refs.floating}
+                        >
+                            <ScrollContainer>
+                                <ModalContainer
+                                    ref={refs.setFloating}
+                                    {...getFloatingProps()}
+                                    aria-modal
+                                    role="dialog"
+                                >
+                                    {children}
+                                </ModalContainer>
+                            </ScrollContainer>
+                        </FloatingFocusManager>
+                    )}
+                </ModalContext.Provider>
+            </Container>
+        </Overlay>
+    );
+};

src/modal-v2/slots/card.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { isStyledComponent } from "styled-components";
+import { ModalCardProps } from "../types";
+import { CloseButton } from "./close-button";
+import { Content } from "./content";
+import { ModalCard } from "./slot-styles";
+
+export const Card = ({
+    id,
+    "data-testid": testId = "modal-card",
+    children,
+    ...otherProps
+}: ModalCardProps) => {
+    // =============================================================================
+    // EVENT HANDLERS
+    // =============================================================================
+    const handleOnClick = (event: React.MouseEvent) => {
+        event.stopPropagation();
+    };
+
+    // =========================================================================
+    // HELPERS
+    // =========================================================================
+    const isComponentType = (child: React.ReactPortal, type: any) =>
+        isStyledComponent(child.type)
+            ? (child.type as unknown as { target: any }).target === type
+            : child.type === type;
+
+    // =============================================================================
+    // RENDER FUNCTIONS
+    // =============================================================================
+    const CloseButtonSlot = React.Children.toArray(children).find((child) =>
+        isComponentType(child as React.ReactPortal, CloseButton)
+    );
+    const hasCloseButton = !!CloseButtonSlot;
+
+    const ContentSlot = React.Children.toArray(children).find((child) =>
+        isComponentType(child as React.ReactPortal, Content)
+    );
+
+    return (
+        <ModalCard
+            id={id}
+            data-testid={testId}
+            {...otherProps}
+            onClick={handleOnClick}
+            $hasCloseButton={hasCloseButton}
+        >
+            {ContentSlot}
+            {hasCloseButton && CloseButtonSlot}
+        </ModalCard>
+    );
+};
+
+Card.displayName = "ModalV2.Card";

src/modal-v2/slots/close-button.tsx

@@ -0,0 +1,28 @@
+import { CrossIcon } from "@lifesg/react-icons/cross";
+import { useContext } from "react";
+import { ModalContext } from "../modal-context";
+import { ModalCloseButtonProps } from "../types";
+import { ClickableContainer, StyledClickableIcon } from "./slot-styles";
+
+export const CloseButton = ({
+    "data-testid": testId = "close-button",
+    ...otherProps
+}: ModalCloseButtonProps) => {
+    const { onClose } = useContext(ModalContext);
+
+    return (
+        <ClickableContainer data-testid={testId} {...otherProps}>
+            <StyledClickableIcon
+                onClick={onClose}
+                data-testid="close-button"
+                focusHighlight={false}
+                focusOutline="browser"
+                aria-label="Close button"
+            >
+                <CrossIcon aria-hidden />
+            </StyledClickableIcon>
+        </ClickableContainer>
+    );
+};
+
+CloseButton.displayName = "ModalV2.CloseButton";

src/modal-v2/slots/content.tsx

@@ -0,0 +1,15 @@
+import { ModalContentProps } from "../types";
+
+export const Content = ({
+    "data-testid": testId = "modal-content",
+    children,
+    ...otherProps
+}: ModalContentProps) => {
+    return (
+        <div data-testid={testId} {...otherProps}>
+            {children}
+        </div>
+    );
+};
+
+Content.displayName = "ModalV2.Content";

src/modal-v2/slots/index.tsx

@@ -0,0 +1,3 @@
+export { Card } from "./card";
+export { CloseButton } from "./close-button";
+export { Content } from "./content";