playbook_ui 14.11.1.pre.alpha.PLAY1751pbcontenttagpt25529 → 14.11.1.pre.alpha.PLAY17445539

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -1,230 +1,83 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
+import React, { useState, useEffect, useRef } from "react"
+import classnames from "classnames"
 
 import {
   buildAriaProps,
   buildCss,
   buildDataProps,
   buildHtmlProps,
-} from "../utilities/props";
-import { globalProps, globalInlineProps } from "../utilities/globalProps";
-
-import { DialogContext } from "../pb_dialog/_dialog_context";
+} from "../utilities/props"
+import { globalProps, globalInlineProps } from "../utilities/globalProps"
+import { DrawerContext } from "./context"
+import { useBreakpoint } from "./hooks/useBreakpoint"
 
 type DrawerProps = {
-  aria?: { [key: string]: string };
-  behavior?: "floating" | "push";
-  border?: "full" | "none" | "right" | "left";
-  openBreakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
-  closeBreakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
-  children: React.ReactNode | React.ReactNode[] | string;
-  className?: string;
-  data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  id?: string;
-  fullHeight?: boolean;
-  menuButtonID?: string;
-  onClose?: () => void;
-  opened: boolean;
-  overlay: boolean;
-  placement?: "left" | "right";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  text?: string;
-  withinElement?: boolean;
-};
-
-const Drawer = (props: DrawerProps): React.ReactElement => {
+  aria?: { [key: string]: string }
+  behavior?: "floating" | "push"
+  border?: "full" | "none" | "right" | "left"
+  breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl"
+  children: React.ReactNode | React.ReactNode[] | string
+  className?: string
+  data?: { [key: string]: string }
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  id?: string
+  triggerId?: string
+  onClose?: () => void
+  opened: boolean
+  overlay: boolean
+  placement?: "left" | "right" | "top" | "bottom"
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full"
+  text?: string
+  withinElement?: boolean
+}
+
+const Drawer = (props: DrawerProps): React.ReactElement | null => {
   const {
     aria = {},
     behavior = "floating",
     border = "none",
-    openBreakpoint = "none",
-    closeBreakpoint = "none",
+    breakpoint = "none",
     className,
     data = {},
     htmlOptions = {},
     id,
     size = "md",
     children,
-    fullHeight = true,
-    menuButtonID,
+    triggerId,
     opened,
     onClose,
     overlay = true,
     placement = "left",
     withinElement = false,
-  } = props;
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-
-  let globalPropsString: string = globalProps(props);
-
-  // Check if the string contains any of the prefixes
-  const containsPrefix = [
-    "p_",
-    "pb_",
-    "pt_",
-    "pl_",
-    "pr_",
-    "px_",
-    "py_",
-  ].some((prefix) => globalPropsString.includes(prefix));
-
-  // If none of the prefixes are found, append 'p_sm' to the string
-  if (!containsPrefix) {
-    globalPropsString += " p_sm";
-  }
-
-  const drawerClassNames = {
-    base: `${classnames(
-      "pb_drawer",
-      buildCss("pb_drawer", size, placement),
-      {
-        drawer_border_full: border === "full",
-        drawer_border_right: border === "right",
-        drawer_border_left: border === "left",
-        pb_drawer_within_element: withinElement,
-      }
-    )} ${globalPropsString}`,
-    afterOpen: "pb_drawer_after_open",
-    beforeClose: "pb_drawer_before_close",
-  };
-
-  const fullHeightClassNames = () => {
-    if (!fullHeight) return null;
-    return `full_height_${placement}`;
-  };
-
-  const overlayClassNames = {
-    base: `pb_drawer${overlay ? "_overlay" : "_no_overlay"} ${
-      fullHeight !== null && fullHeightClassNames()
-    } ${!overlay ? "no-background" : ""}`,
-    afterOpen: "pb_drawer_overlay_after_open",
-    beforeClose: "pb_drawer_overlay_before_close",
-  };
-
-  const classes = classnames(buildCss("pb_drawer_wrapper"), className);
-  const dynamicInlineProps = globalInlineProps(props)
-  const [menuButtonOpened, setMenuButtonOpened] = useState(false);
-  const [triggerOpened, setTriggerOpened] = useState(false);
-
-  const breakpointWidths: Record<DrawerProps["openBreakpoint"], number> = {
-    none: 0,
-    xs: 575,
-    sm: 768,
-    md: 992,
-    lg: 1200,
-    xl: 1400,
-  };
-
-  const breakpointValues = { 
-    none: 0,
-    xs: 575,
-    sm: 768,
-    md: 992,
-    lg: 1200,
-    xl: 1400,
-  }
-
-  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false);
-  const [isUserClosed, setIsUserClosed] = useState(false);
-
-  useEffect(() => {
-    if (openBreakpoint === "none") return;
-
-    const handleResize = () => {
-      const width = window.innerWidth;
-      const openBreakpointWidth = breakpointWidths[openBreakpoint];
-
-      if (width <= openBreakpointWidth) {
-        setIsOpenBreakpointOpen(true);
-      } else {
-        setIsOpenBreakpointOpen(false);
-        setIsUserClosed(false); // Reset when the breakpoint condition changes
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    // Call handler once on mount to set initial state
-    handleResize();
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [openBreakpoint]);
-
-  useEffect(() => {
-    if (closeBreakpoint === "none") return;
-
-   const handleResize = () => { 
-    const width = window.innerWidth;
-    if (width >= breakpointValues[closeBreakpoint]) {
-      setIsOpenBreakpointOpen(true);
-    } else {
-      setIsOpenBreakpointOpen(false);
-    }
-    }
-
-    window.addEventListener("resize", handleResize);
-
-    handleResize();
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-    
-  }, [closeBreakpoint]);
-
-  //hide menu button if breakpoint opens the drawer  
-  useEffect(() => {
-    if (menuButtonID) {
-      const menuButton = document.getElementById(menuButtonID);
-      if (menuButton) {
-        if (isOpenBreakpointOpen) {
-          menuButton.style.display = 'none';
-        } else {
-          menuButton.style.display = '';
-        }
-      }
-    }
-  }, [menuButtonID, isOpenBreakpointOpen]);
-
-  // Reset isUserClosed when isBreakpointOpen changes
-  useEffect(() => {
-    if (isOpenBreakpointOpen) {
-      setIsUserClosed(false);
+  } = props
+
+  const drawerRef = useRef<HTMLDivElement>(null)
+  const [menuButtonOpened, setMenuButtonOpened] = useState(false)
+  const [shouldRender, setShouldRender] = useState(false)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  const { isOpenBreakpointOpen, isUserClosed, setIsUserClosed } = useBreakpoint(
+    {
+      openBreakpoint: breakpoint,
+      closeBreakpoint: breakpoint,
+      triggerId,
     }
-  }, [isOpenBreakpointOpen]);
+  )
 
   const modalIsOpened =
-    (isOpenBreakpointOpen && !isUserClosed) || menuButtonOpened || opened;
+    (isOpenBreakpointOpen && !isUserClosed) || menuButtonOpened || opened
 
-  const [animationState, setAnimationState] = useState("");
-
-  useEffect(() => {
-    if (modalIsOpened) {
-      setAnimationState("afterOpen");
-    } else if (!modalIsOpened && animationState === "afterOpen") {
-      setAnimationState("beforeClose");
-      setTimeout(() => {
-        setAnimationState("");
-      }, 200); 
-    }
-  }, [modalIsOpened]);
-
-  const isModalVisible = modalIsOpened || animationState === "beforeClose";
 
   useEffect(() => {
     if (withinElement) return;
 
-    const sizeMap: Record<DrawerProps["size"], string> = {
+    const sizeMap: { [key: string]: string } = {
       xl: "365px",
       lg: "300px",
       md: "250px",
       sm: "200px",
       xs: "64px",
+      full: "100%",
     };
     const body = document.querySelector("body");
     if (modalIsOpened && behavior === "push" && body) {
@@ -244,98 +97,143 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     }
   }, [modalIsOpened, behavior, placement, size, withinElement]);
 
-  const api = {
-    onClose: () => {
-      if (menuButtonID) {
-        setMenuButtonOpened(false);
-      }
-      setIsUserClosed(true);
-      if (onClose) {
-        onClose();
-      }
-    },
-  };
+  // Replace useDrawerAnimation with our new animation logic
+  useEffect(() => {
+    if (modalIsOpened) {
+      // Step 1: Mount component
+      setShouldRender(true)
+
+      // Step 2: Measure height and start animation
+      const timer = setTimeout(() => {
+        if (drawerRef.current) {
+          const height = drawerRef.current.scrollHeight;
+          drawerRef.current.style.setProperty('--drawer-height', `${height}px`);
+        }
+        setIsAnimating(true)
+      }, 10)
+      return () => clearTimeout(timer)
+    } else {
+      // Step 3: Start closing animation
+      setIsAnimating(false)
+
+      // Step 4: Unmount after animation completes
+      const timer = setTimeout(() => {
+        setShouldRender(false)
+      }, 250) // Match animation duration
+      return () => clearTimeout(timer)
+    }
+  }, [modalIsOpened])
 
+  // Remove the showElement/hideElement effect since we're handling visibility with CSS
   useEffect(() => {
-    if (menuButtonID) {
-      const menuButton = document.getElementById(menuButtonID);
+    if (drawerRef.current && modalIsOpened) {
+      const height = drawerRef.current.scrollHeight;
+      drawerRef.current.style.setProperty('--drawer-height', `${height}px`);
+    }
+  }, [modalIsOpened])
+
+  // Handle menu button click
+  useEffect(() => {
+    if (triggerId) {
+      const menuButton = document.getElementById(triggerId)
       if (menuButton) {
         const handleMenuButtonClick = () => {
           if (modalIsOpened) {
-            // Drawer is open, close it
-            setMenuButtonOpened(false);
-            setIsUserClosed(true);
+            setMenuButtonOpened(false)
+            setIsUserClosed(true)
           } else {
-            // Drawer is closed, open it
-            setMenuButtonOpened(true);
-            setIsUserClosed(false);
+            setMenuButtonOpened(true)
+            setIsUserClosed(false)
           }
-        };
-        menuButton.addEventListener("click", handleMenuButtonClick);
+        }
+        menuButton.addEventListener("click", handleMenuButtonClick)
         return () => {
-          menuButton.removeEventListener("click", handleMenuButtonClick);
-        };
+          menuButton.removeEventListener("click", handleMenuButtonClick)
+        }
       }
     }
-  }, [menuButtonID, modalIsOpened]);
+  }, [triggerId, modalIsOpened])
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const dynamicInlineProps = globalInlineProps(props)
+
+  const drawerClasses = classnames(
+    "pb_drawer",
+    buildCss("pb_drawer", size as string, placement as string),
+    {
+      "drawer_border-full": border === "full",
+      "drawer_border-right": border === "right",
+      "drawer_border-left": border === "left",
+      pb_drawer_within_element: withinElement,
+      pb_drawer_collapsing: shouldRender && !isAnimating,
+      pb_drawer_after_open: isAnimating,
+      pb_drawer_before_close: !isAnimating && shouldRender,
+    },
+    withinElement ? "shadow_none" : "shadow_deepest",
+    globalProps(props),
+    className
+  )
+
+  const overlayClasses = classnames(
+    `pb_drawer${overlay ? "_overlay" : "_no_overlay"}`,
+    `drawer_content_${placement}`,
+    !overlay && "no-background",
+    {
+      pb_drawer_overlay_after_open: isAnimating,
+      pb_drawer_overlay_before_close: !isAnimating && shouldRender,
+    }
+  )
+
+  const api = {
+    onClose: () => {
+      if (triggerId) {
+        setMenuButtonOpened(false)
+      }
+      setIsUserClosed(true)
+      if (onClose) {
+        onClose()
+      }
+    },
+  }
+
+  const drawerContent = (
+    <div
+        className={drawerClasses}
+        onClick={(e) => e.stopPropagation()}
+        ref={drawerRef}
+    >
+      {children}
+    </div>
+  )
+
+  // Step 5: Only render when shouldRender is true
+  if (!shouldRender) return null
 
   return (
-    <DialogContext.Provider value={api}>
+    <DrawerContext.Provider value={api}>
       {withinElement ? (
-        isModalVisible && (
-          <div
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classnames(drawerClassNames.base, {
-              [drawerClassNames.afterOpen]:
-                animationState === "afterOpen",
-              [drawerClassNames.beforeClose]:
-                animationState === "beforeClose",
-            })}
-              id={id}
-              onClick={(e) => e.stopPropagation()}
-              style={dynamicInlineProps}
-          >
-            {children}
-          </div>
-        )
+        drawerContent
       ) : (
         <div
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
-            className={classes}
+            className={classnames(buildCss("pb_drawer_wrapper"), className)}
+            style={dynamicInlineProps}
         >
-          {isModalVisible && (
-            <div
-                className={classnames(overlayClassNames.base, {
-                [overlayClassNames.afterOpen]:
-                  animationState === "afterOpen",
-                [overlayClassNames.beforeClose]:
-                  animationState === "beforeClose",
-              })}
-                id={id}
-                onClick={overlay ? api.onClose : undefined}
-            >
-              <div
-                  className={classnames(drawerClassNames.base, {
-                  [drawerClassNames.afterOpen]:
-                    animationState === "afterOpen",
-                  [drawerClassNames.beforeClose]:
-                    animationState === "beforeClose",
-                })}
-                  onClick={(e) => e.stopPropagation()}
-                  style={dynamicInlineProps}
-              >
-                {children}
-              </div>
-            </div>
-          )}
+          <div
+              className={overlayClasses}
+              id={id}
+              onClick={overlay ? api.onClose : undefined}
+          >
+            {drawerContent}
+          </div>
         </div>
       )}
-    </DialogContext.Provider>
-  );
-};
+    </DrawerContext.Provider>
+  )
+}
 
-export default Drawer;
+export default Drawer

data/app/pb_kits/playbook/pb_drawer/context.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const noop = (): void => void 0
+
+type DrawerContextType = {
+  onClose: () => void
+}
+
+export const DrawerContext = React.createContext<DrawerContextType>({
+  onClose: noop,
+})

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react"
+import { Button, Drawer, Flex } from "playbook-ui"
+
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+
+  return [opened, toggle]
+}
+
+const DrawerBehavior = () => {
+  const [drawerOpen, toggleDrawerOpen] = useDrawer()
+
+  return (
+    <>
+      <Flex wrap>
+        <Button id='sm'
+            marginRight='md'
+            onClick={toggleDrawerOpen}
+        >
+          {"Push Behavior"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}      
+            onClose={toggleDrawerOpen}
+            opened={drawerOpen}
+            size={"lg"}
+        >
+          Test me (Push Behavior)
+        </Drawer>
+      </Flex>
+    </>
+  )
+}
+
+export default DrawerBehavior

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -6,19 +6,15 @@ const DrawerBorders = () => {
   const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
   const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
   const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
-  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
-  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
 
   // Toggle functions for each drawer
   const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
   const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
   const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
-  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
-  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
 
   return (
     <>
-      <Flex padding="md"
+      <Flex 
           wrap
       >
         <Button marginRight="md"
@@ -36,23 +32,12 @@ const DrawerBorders = () => {
         >
           Drawer with border full
         </Button>
-        <Button marginRight="md"    
-            onClick={toggleBDefaultDrawer}
-        >
-          Default Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBRoundedDrawer}
-        > 
-          Rounded Drawer
-        </Button>
       </Flex>
 
       {/* Drawers for each size */}
       <Drawer
           behavior="float"
           border="right"
-          fullHeight
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
@@ -64,11 +49,10 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="left"
-          fullHeight
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border left
@@ -76,40 +60,14 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="full"
-          fullHeight
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="right"
+          placement="left"
           size="lg"
       >
         This is a Drawer with border full
       </Drawer>
-      <Drawer
-          behavior="float"
-          fullHeight
-          onClose={toggleBDefaultDrawer}
-          opened={openedBDefaultDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >   
-        This is a Default Drawer
-      </Drawer>
-      <Drawer
-          behavior="float"
-          borderRadius="rounded"
-          fullHeight
-          onClose={toggleBRoundedDrawer}
-          opened={openedBRoundedDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
-        This is a Rounded Drawer
-      </div>
-      </Drawer>
     </>
   );
 };

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -26,7 +26,6 @@ const DrawerBreakpoints = () => {
         <Drawer
             behavior={"push"}
             breakpoint="sm"
-            fullHeight
             onClose={toggleSmallDrawer}
             opened={smallDrawerOpened}
             overlay={false}