playbook_ui 14.7.0 → 14.8.0.pre.alpha.PBNTR713dropdowncustomtriggerbug4696

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

@@ -7,54 +7,76 @@
 @import "../tokens/animation-curves";
 @import "../tokens/positioning";
 
+$gutter: $space_lg;
+$xsmall: 64px;
+$small: 200px;
+$medium: 250px;
+$large: 300px;
+$xlarge: 365px;
+$animation-duration: 0.4s;
+$z-index: $z_7;
+
 // Drawer animations
-// Drawer animations for fading in and out from the center
-@keyframes modalFadeIn {
+@keyframes modalFadeInLeft {
   from {
-    transform: translate3d(0, -100%, 0);
-    opacity: 0;
+    transform: translateX(-100%);
   }
   to {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
+    transform: translateX(0);
   }
 }
 
-@keyframes modalFadeOut {
+@keyframes modalFadeOutLeft {
   from {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
+    transform: translateX(0);
   }
   to {
-    transform: translate3d(0, -50%, 0);
-    opacity: 0;
+    transform: translateX(-100%);
   }
 }
 
-// Drawer animations for fading in and out from the right side
+@keyframes modalFadeInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
 
-@keyframes overlayFade {
+@keyframes modalFadeOutRight {
   from {
-    opacity: 0;
-    transform: translateY(0);
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes modalFadeIn {
+  from {
+    transform: translateY(-100%);
   }
   to {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes overlayFadeOut {
+@keyframes modalFadeOut {
   from {
-    opacity: 1;
+    transform: translateY(0);
   }
   to {
-    opacity: 0;
+    transform: translateY(-100%);
   }
 }
 
-body.ReactModal__Body--open {
-  transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
+body.PBDrawer__Body--open {
+  transition: margin-left $animation-duration ease-in, margin-right $animation-duration ease-in;
+}
+
+body.PBDrawer__Body--close {
+  transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
 .pb_drawer_lg_left.pb_drawer {
@@ -66,28 +88,21 @@ body.ReactModal__Body--open {
 }
 
 .pb_drawer.pb_drawer_after_open {
-  transform: translateX(0); /* Slide in */
+  transform: translate3d(0, 0, 0);
 }
+
 // Drawer Styles
 .pb_drawer {
-
-  // Local Variables
-  $gutter: $space_lg;
-  $xsmall: 64px;
-  $small: 200px;
-  $medium: 250px;
-  $large: 300px;
-  $xlarge: 365px;
-  $animation-duration: .2s;
-  $z-index: 100;
-  $opacity_visible: 1;
-  $opacity_hidden: 0;
+   will-change: transform;
+   backface-visibility: hidden;
 
   .drawer {
     position: sticky;
+    will-change: transform;
+    backface-visibility: hidden;
     top: 0;
     background-color: $white;
-    z-index: $z_8;
+    z-index: $z_9;
   }
 
   // @include pb_card;
@@ -97,41 +112,31 @@ body.ReactModal__Body--open {
   max-height: calc(100vh - #{$gutter * 2});
   max-width: calc(100vw - #{$gutter * 2});
   overflow: auto;
-  animation-name: modalFadeIn;
   animation-duration: $animation-duration;
   outline: none;
-  animation-timing-function: $easeInOutQuint;
-  transition: transform 0.3s ease-in-out;
 
-  &.drawer_border_full {
-    box-shadow: none;
-    border: 2px solid #f3f7fb;
-  }
-
-  &.drawer_border_right {
-    border-right: 2px solid #f3f7fb;
-  }
-
-  &.drawer_border_left {
-    border-left: 2px solid #f3f7fb;
+  // General _before_close styles
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
   }
 
   &[class*="_left"] {
     animation-name: modalFadeInLeft;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutLeft;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
+  }
+
+  &[class*="_left"][class*="_before_close"] {
+    animation-name: modalFadeOutLeft;
+    animation-duration: $animation-duration;
   }
 
   &[class*="_right"] {
     animation-name: modalFadeInRight;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutRight;
-      animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
-    }
+  }
+
+  &[class*="_right"][class*="_before_close"] {
+    animation-name: modalFadeOutRight;
+    animation-duration: $animation-duration;
   }
 
   &[class*="_xs_"] {
@@ -164,17 +169,23 @@ body.ReactModal__Body--open {
   }
 
   &_after_open {
-    opacity: $opacity_visible;
   }
 
-  &.no-background {
-    background-color: transparent; 
+  &.drawer_border_full {
+    box-shadow: none;
+    border: 2px solid #f3f7fb;
   }
 
-  &[class*="_before_close"] {
-    animation-name: modalFadeOut;
-    animation-duration: $animation-duration;
-    opacity: $opacity_hidden;
+  &.drawer_border_right {
+    border-right: 2px solid #f3f7fb;
+  }
+
+  &.drawer_border_left {
+    border-left: 2px solid #f3f7fb;
+  }
+
+  &.no-background {
+    background-color: transparent; 
   }
 
   &_close_icon {
@@ -196,12 +207,10 @@ body.ReactModal__Body--open {
     animation-duration: $animation-duration;
 
     &_after_open {
-      opacity: $opacity_visible;
     }
     &_before_close {
       animation-name: overlayFadeOut;
       animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
     }
     &[class*="full_height"] {
       &[class*="_left"]{
@@ -258,12 +267,12 @@ body.ReactModal__Body--open {
         &[class*="_xl_"] {
           width: $xlarge;
           .dialog_footer {
-          width: $xlarge;
+            width: $xlarge;
+          }
         }
       }
     }
   }
-}
 
   &_no_overlay {
     position: fixed;
@@ -280,20 +289,18 @@ body.ReactModal__Body--open {
     overflow: none; /* Ensure body remains scrollable */
     pointer-events: none; /* Allow interaction inside the drawer itself */
 
-    body.ReactModal__Body--open {
+    body.PBDrawer--open {
       overflow: none; /* Ensure body remains scrollable */
       pointer-events: none; /* Allow interaction inside the drawer itself */
     }
 
     &_after_open {
-      opacity: $opacity_visible;
       overflow: none; /* Ensure body remains scrollable */
       pointer-events: none; /* Allow interaction inside the drawer itself */
     }
     &_before_close {
       animation-name: overlayFadeOut;
       animation-duration: $animation-duration;
-      opacity: $opacity_hidden;
     }
     &[class*="full_height"] {
       &[class*="_left"]{
@@ -350,116 +357,22 @@ body.ReactModal__Body--open {
         &[class*="_xl_"] {
           width: $xlarge;
           .dialog_footer {
-          width: $xlarge;
-        }
-      }
-    }
-  }
-}
-
-[class*="drawer_body"] {
-  padding: $space_sm;
-}
-
-[class*="drawer_header"] {
-  padding: $space_sm;
-}
-
-[class*="drawer_footer"] {
-  padding: $space_sm;
-}
-
-//styles specific to rails version of kit
-// rails version has own wrapper because of the way the overlay functions for the HTML drawer used to create this
-.pb_drawer_wrapper_rails {
-  $medium: 500px;
-  $large: 800px;
-  $xlarge: 1150px;
-
-  &[class*="full_height"] {
-    &[class*="_left"]{
-      .pb_drawer_rails {
-        margin: unset !important;
-        margin-right: auto !important;
-      }
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
-    &[class*="_right"]{
-      .pb_drawer_rails {
-        margin: unset !important;
-        margin-left: auto !important;
-      }
-    }
-
-    .pb_drawer {
-      height: 100% !important;
-      max-height: 100% !important;
-      max-width: 100%;
-      // This empty div only has height when drawer is full height.
-      // Fix for drawer body content disappearing behind sticky footer
-      .drawer-pseudo-footer {
-        height: $space_xl * 2;
-      }
-      .drawer_footer {
-        position:fixed;
-        bottom: 0;
-        background-color: $white;
-        max-width: 100%;
-      }
-      &[class*="_sm"] {
-        width: $medium;
-        .drawer_footer {
-          width: $medium;
-        }
-      }
-      &[class*="_md"] {
-        width: $large;
-        .drawer_footer {
-          width: $large;
-        }
-      }
-      &[class*="_lg"] {
-        width: $xlarge;
-        .drawer_footer {
-          width: $xlarge;
+            width: $xlarge;
+          }
         }
       }
     }
   }
 
-  // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
-  // Conflicts were only apparent in nitro, not in playbook local env
-  .pb_drawer_rails {
-    position: fixed !important;
-    top: 0 !important;
-    padding: unset !important;
-    margin: auto;
-
+  [class*="drawer_body"] {
+    padding: $space_sm;
   }
 
-  // Overlay for rails kit
-  drawer::backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba($bg_dark, $opacity_4);
-    animation-name: overlayFade;
-    animation-duration: 0.2s;
+  [class*="drawer_header"] {
+    padding: $space_sm;
   }
 
-  .drawer-button-class {
-    background-color: unset;
-    border: none;
-    cursor: pointer;
+  [class*="drawer_footer"] {
+    padding: $space_sm;
   }
 }
-}

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

@@ -1,8 +1,12 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
-import Modal from "react-modal";
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
@@ -53,13 +57,19 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   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)
-  );
+  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';
+    globalPropsString += " p_sm";
   }
 
   const drawerClassNames = {
@@ -67,9 +77,9 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       "pb_drawer",
       buildCss("pb_drawer", size, placement),
       {
-        "drawer_border_full": border === "full",
-        "drawer_border_right": border === "right",
-        "drawer_border_left": border === "left",
+        drawer_border_full: border === "full",
+        drawer_border_right: border === "right",
+        drawer_border_left: border === "left",
       }
     )} ${globalPropsString}`,
     afterOpen: "pb_drawer_after_open",
@@ -82,19 +92,18 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   };
 
   const overlayClassNames = {
-    base: `pb_drawer${overlay ? '_overlay' : '_no_overlay'} ${fullHeight !== null && fullHeightClassNames()} ${!overlay ? 'no-background' : ''}`,
+    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 classes = classnames(buildCss("pb_drawer_wrapper"), className);
 
   const [triggerOpened, setTriggerOpened] = useState(false);
 
-  const breakpointWidths: Record<DrawerProps['breakpoint'], number> = {
+  const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
     none: 0,
     xs: 575,
     sm: 768,
@@ -107,7 +116,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   const [isBreakpointOpen, setIsBreakpointOpen] = useState(false);
 
   useEffect(() => {
-    if (breakpoint === 'none') return;
+    if (breakpoint === "none") return;
 
     const handleResize = () => {
       const width = window.innerWidth;
@@ -120,39 +129,57 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
       }
     };
 
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
 
     // Call handler once on mount to set initial state
     handleResize();
 
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, [breakpoint]);
 
-  const modalIsOpened = trigger ? triggerOpened : (opened || isBreakpointOpen);
+  const modalIsOpened = trigger ? triggerOpened : opened || isBreakpointOpen;
+
+  const [animationState, setAnimationState] = useState("");
+
+  useEffect(() => {
+    if (modalIsOpened) {
+      setAnimationState("afterOpen");
+    } else if (!modalIsOpened && animationState === "afterOpen") {
+      setAnimationState("beforeClose");
+      setTimeout(() => {
+        setAnimationState("");
+      }, 200); // closeTimeoutMS
+    }
+  }, [modalIsOpened]);
+
+  const isModalVisible = modalIsOpened || animationState === "beforeClose";
 
   useEffect(() => {
-    const sizeMap: Record<DrawerProps['size'], string> = {
-      xl: '365px',
-      lg: '300px',
-      md: '250px',
-      sm: '200px',
-      xs: '64px',
+    const sizeMap: Record<DrawerProps["size"], string> = {
+      xl: "365px",
+      lg: "300px",
+      md: "250px",
+      sm: "200px",
+      xs: "64px",
     };
-    const body = document.querySelector('body');
+    const body = document.querySelector("body");
 
-    if (modalIsOpened && behavior === 'push' && body) {
-      if (placement === 'left') {
+    if (modalIsOpened && behavior === "push" && body) {
+      if (placement === "left") {
         body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`;
-      } else if (placement === 'right') {
+      } else if (placement === "right") {
         body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`;
       }
 
-      body.classList.add('ReactModal__Body--open');
+      body.classList.add("PBDrawer__Body--open");
     } else if (body) {
-      body.style.cssText = ''; // Clear the styles when modal is closed or behavior is not 'push'
-      body.classList.remove('ReactModal__Body--open');
+      if (body.classList.contains("PBDrawer__Body--open")) {
+        body.classList.add("PBDrawer__Body--close");
+      }
+      body.style.cssText = ""; // Clear the styles when modal is closed or behavior is not 'push'
+      body.classList.remove("PBDrawer__Body--open");
     }
   }, [modalIsOpened, behavior, placement, size]);
 
@@ -172,22 +199,27 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
           {...htmlProps}
           className={classes}
       >
-        <Modal
-            ariaHideApp={false}
-            className={drawerClassNames}
-            closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
-            id={id}
-            isOpen={modalIsOpened}
-            onRequestClose={onClose}
-            overlayClassName={overlayClassNames}
-            shouldCloseOnOverlayClick={overlay}
-        >
-          <>
+          {isModalVisible && (
+            <div
+                className={classnames(overlayClassNames.base, {
+              [overlayClassNames.afterOpen]: animationState === "afterOpen",
+              [overlayClassNames.beforeClose]: animationState === "beforeClose",
+            })}
+                id={id}
+                onClick={overlay ? onClose : undefined}
+            >
+            <div
+                className={classnames(drawerClassNames.base, {
+              [drawerClassNames.afterOpen]: animationState === "afterOpen",
+              [drawerClassNames.beforeClose]: animationState === "beforeClose",
+            })}
+                onClick={(e) => e.stopPropagation()}
+            >
             {children}
-          </>
-        </Modal>
-      </div>
+            </div>
+            </div>
+          )}
+          </div>
     </DialogContext.Provider>
   );
 };

data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { render, cleanup, fireEvent, screen } from '../utilities/test-utils';
+import { render, fireEvent, screen } from '../utilities/test-utils';
 import { Drawer, Button } from 'playbook-ui';
+import { waitFor } from '@testing-library/react';
 
 const size = 'sm';
 
@@ -11,9 +12,10 @@ function DrawerTest({ props }) {
 
   return (
     <>
-      <Button onClick={open}>{'Open Drawer'}</Button>
+    <Button onClick={open}>{'Open Drawer'}</Button>
       <Drawer
           className="wrapper"
+          id="drawer-id"
           onClose={close}
           opened={isOpen}
           placement="left"
@@ -27,24 +29,17 @@ function DrawerTest({ props }) {
   );
 }
 
-afterEach(cleanup);
-
 test('renders with the right border class when border prop is right', async () => {
   render(<DrawerTest props={{ border: 'right' }} />);
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  const drawer = await screen.findByRole('dialog');
-  expect(drawer).toHaveClass('drawer_border_right');
-});
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
 
-test('renders with the left border class when border prop is left', async () => {
-  render(<DrawerTest props={{ border: 'left' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
 
-  const drawer = await screen.findByRole('dialog');
-  expect(drawer).toHaveClass('drawer_border_left');
+  expect(drawer).toHaveClass('drawer_border_right');
 });
 
 test('renders with the full border class when border prop is full', async () => {
@@ -52,7 +47,10 @@ test('renders with the full border class when border prop is full', async () =>
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  const drawer = await screen.findByRole('dialog');
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
   expect(drawer).toHaveClass('drawer_border_full');
 });
 
@@ -61,7 +59,10 @@ test('does not have a border class when border prop is none', async () => {
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  const drawer = await screen.findByRole('dialog');
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
   expect(drawer).not.toHaveClass('drawer_border_right');
   expect(drawer).not.toHaveClass('drawer_border_left');
   expect(drawer).not.toHaveClass('drawer_border_full');
@@ -72,6 +73,9 @@ test('renders the correct size class for a large drawer', async () => {
 
   fireEvent.click(screen.getByText('Open Drawer'));
 
-  const drawer = await screen.findByRole('dialog');
+  await waitFor(() => expect(document.getElementById('drawer-id')).toBeInTheDocument());
+
+  const container = document.getElementById('drawer-id');
+  const drawer = container.querySelector('#drawer-id .pb_drawer');
   expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
 });

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -53,6 +53,7 @@
     }
 
     .pb_dropdown_container {
+      position: absolute;
       background-color: $white;
       overflow: hidden;
       box-shadow: $shadow_deep;