playbook_ui 14.11.1.pre.alpha.PLAY17445539 → 14.11.1.pre.alpha.hfhbrakemanplaybook5370

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

@@ -1,83 +1,230 @@
-import React, { useState, useEffect, useRef } from "react"
-import classnames from "classnames"
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
 
 import {
   buildAriaProps,
   buildCss,
   buildDataProps,
   buildHtmlProps,
-} from "../utilities/props"
-import { globalProps, globalInlineProps } from "../utilities/globalProps"
-import { DrawerContext } from "./context"
-import { useBreakpoint } from "./hooks/useBreakpoint"
+} from "../utilities/props";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
+
+import { DialogContext } from "../pb_dialog/_dialog_context";
 
 type DrawerProps = {
-  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 => {
+  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 => {
   const {
     aria = {},
     behavior = "floating",
     border = "none",
-    breakpoint = "none",
+    openBreakpoint = "none",
+    closeBreakpoint = "none",
     className,
     data = {},
     htmlOptions = {},
     id,
     size = "md",
     children,
-    triggerId,
+    fullHeight = true,
+    menuButtonID,
     opened,
     onClose,
     overlay = true,
     placement = "left",
     withinElement = 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,
+  } = 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);
     }
-  )
+  }, [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: { [key: string]: string } = {
+    const sizeMap: Record<DrawerProps["size"], string> = {
       xl: "365px",
       lg: "300px",
       md: "250px",
       sm: "200px",
       xs: "64px",
-      full: "100%",
     };
     const body = document.querySelector("body");
     if (modalIsOpened && behavior === "push" && body) {
@@ -97,143 +244,98 @@ const Drawer = (props: DrawerProps): React.ReactElement | null => {
     }
   }, [modalIsOpened, behavior, placement, size, withinElement]);
 
-  // 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 (drawerRef.current && modalIsOpened) {
-      const height = drawerRef.current.scrollHeight;
-      drawerRef.current.style.setProperty('--drawer-height', `${height}px`);
-    }
-  }, [modalIsOpened])
+  const api = {
+    onClose: () => {
+      if (menuButtonID) {
+        setMenuButtonOpened(false);
+      }
+      setIsUserClosed(true);
+      if (onClose) {
+        onClose();
+      }
+    },
+  };
 
-  // Handle menu button click
   useEffect(() => {
-    if (triggerId) {
-      const menuButton = document.getElementById(triggerId)
+    if (menuButtonID) {
+      const menuButton = document.getElementById(menuButtonID);
       if (menuButton) {
         const handleMenuButtonClick = () => {
           if (modalIsOpened) {
-            setMenuButtonOpened(false)
-            setIsUserClosed(true)
+            // Drawer is open, close it
+            setMenuButtonOpened(false);
+            setIsUserClosed(true);
           } else {
-            setMenuButtonOpened(true)
-            setIsUserClosed(false)
+            // Drawer is closed, open it
+            setMenuButtonOpened(true);
+            setIsUserClosed(false);
           }
-        }
-        menuButton.addEventListener("click", handleMenuButtonClick)
+        };
+        menuButton.addEventListener("click", handleMenuButtonClick);
         return () => {
-          menuButton.removeEventListener("click", handleMenuButtonClick)
-        }
+          menuButton.removeEventListener("click", handleMenuButtonClick);
+        };
       }
     }
-  }, [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
+  }, [menuButtonID, modalIsOpened]);
 
   return (
-    <DrawerContext.Provider value={api}>
+    <DialogContext.Provider value={api}>
       {withinElement ? (
-        drawerContent
+        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>
+        )
       ) : (
         <div
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
-            className={classnames(buildCss("pb_drawer_wrapper"), className)}
-            style={dynamicInlineProps}
+            className={classes}
         >
-          <div
-              className={overlayClasses}
-              id={id}
-              onClick={overlay ? api.onClose : undefined}
-          >
-            {drawerContent}
-          </div>
+          {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>
       )}
-    </DrawerContext.Provider>
-  )
-}
+    </DialogContext.Provider>
+  );
+};
 
-export default Drawer
+export default Drawer;

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

@@ -6,15 +6,19 @@ 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 
+      <Flex padding="md"
           wrap
       >
         <Button marginRight="md"
@@ -32,12 +36,23 @@ 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}
@@ -49,10 +64,11 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="left"
+          fullHeight
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -60,14 +76,40 @@ const DrawerBorders = () => {
       <Drawer
           behavior="float"
           border="full"
+          fullHeight
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           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,6 +26,7 @@ const DrawerBreakpoints = () => {
         <Drawer
             behavior={"push"}
             breakpoint="sm"
+            fullHeight
             onClose={toggleSmallDrawer}
             opened={smallDrawerOpened}
             overlay={false}

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

@@ -9,8 +9,8 @@ const useDrawer = (visible = false) => {
 };
 
 const DrawerDefault = () => {
-  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
-  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
+  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
+  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
 
   return (
     <>
@@ -18,13 +18,13 @@ const DrawerDefault = () => {
         <Button
             id="sm"
             marginRight="md"
-            onClick={toggleDrawerLeftOpen}
+            onClick={toggleHeaderSeparatorDrawer}
         >
           {"Left Drawer"}
         </Button>
         <Button
             marginRight="xl"
-            onClick={toggleDrawerRightOpen}
+            onClick={toggleBothSeparatorsDrawer}
         >
           {"Right Drawer"}
         </Button>
@@ -32,8 +32,12 @@ const DrawerDefault = () => {
       <Flex>
         {/* Left Drawer */}
         <Drawer
-            onClose={toggleDrawerLeftOpen}
-            opened={drawerLeftOpen}
+            behavior={"push"}
+            fullHeight
+            onClose={toggleHeaderSeparatorDrawer}
+            opened={headerSeparatorDrawerOpened}
+            overlay
+            placement={"left"}
             size={"lg"}
         >
           Test me (Left Drawer)
@@ -41,8 +45,11 @@ const DrawerDefault = () => {
 
         {/* Right Drawer */}
         <Drawer
-            onClose={toggleDrawerRightOpen}
-            opened={drawerRightOpen}
+            behavior={"push"}
+            fullHeight
+            onClose={toggleBothSeparatorsDrawer}
+            opened={bothSeparatorsDrawerOpened}
+            overlay
             placement={"right"}
             size={"lg"}
         >
@@ -53,4 +60,4 @@ const DrawerDefault = () => {
   );
 };
 
-export default DrawerDefault;
+export default DrawerDefault;