playbook_ui 14.7.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4523 → 14.7.0.pre.alpha.spacingquickchange4482

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f74c864e0b28a72c58ed441ea7c3e26d913a0f5d43d478ed4e25a9cdb8305e28
-  data.tar.gz: f1197937eed8354a6deb1fa7a25903cf2884af86f2f11c080aed2f45b3525f8c
+  metadata.gz: eb4670689518bf254b63ee24477971a5e2c1666b7f452199ad898551857bd62a
+  data.tar.gz: d334c3d12c391703d725f9a608c454087732ed3beda3cdca6e5b0bbb000dde49
 SHA512:
-  metadata.gz: fb2220fe41c9c975e651cad80ea071f1b563713d1b037fd7d7b2561113adc6c44f0cdbb51f85ef29cceb2f79aabf1a82b184483eee9ce738be2b7d44e8cae80a
-  data.tar.gz: 349fd43db3d601210f1cc77adbec7fffa313e5dcef5924aabdee3cf5671e85eabbe201d731f15ed1637c1c19fc3f83f1f400c5e46040df4c9676735fa1eca7ad
+  metadata.gz: '05496ee6555f50603e6fec1676da0f40c0fc2de7d90869409cd06b2de2d7e7a70896d6129480363fc6f908b22e6413406bbe29177a468480daca64af5f0fae5d'
+  data.tar.gz: bb61330ca3b6dc7340b0773eb0fcb3c7ad5312413c61d82f0ef6b070e7b8db8c044ec504c6ad67358135c8b16888c7615da8793114c715e4da8482879ccee752

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -143,7 +143,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
-      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates, defaultDate as string))
+      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
     }
 
     // time selection

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -12,7 +12,6 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
-  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -43,7 +42,6 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
-  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -25,4 +25,3 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
-export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -26,7 +26,7 @@ type customQuickPickDatesType = {
 
 let activeLabel = ""
 
-const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined, defaultDate: string) => {
+const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined) => {
   return function (fp: FpTypes & any): any {
     const today = new Date()
     const yesterday = DateTime.getYesterdayDate(new Date())
@@ -185,8 +185,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
     return {
       // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
-        let defaultDateRange
-
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
@@ -203,14 +201,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
               fp.close();
             }
           });
-
-          // check if there is a default date and set the default date range and label for quick pick
-          if (defaultDate) {
-            if (label.toLowerCase() === defaultDate.toLowerCase()) {
-              activeLabel = label
-              defaultDateRange = range
-            }
-          }
         }
         // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
         if (pluginData.rangesNav.children.length > 0) {
@@ -226,12 +216,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
           // function to give the active button the active class
           selectActiveRangeButton(selectedDates);
         }
-
-        // set the default date range if there is one and select the active button
-        if (defaultDateRange) {
-          fp.setDate(defaultDateRange, false);
-          selectActiveRangeButton(defaultDateRange);
-        }
       },
       onValueUpdate(selectedDates: Array<Date>) {
         selectActiveRangeButton(selectedDates)

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

@@ -7,76 +7,54 @@
 @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
-@keyframes modalFadeInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes modalFadeOutLeft {
+// Drawer animations for fading in and out from the center
+@keyframes modalFadeIn {
   from {
-    transform: translateX(0);
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
   }
   to {
-    transform: translateX(-100%);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
 }
 
-@keyframes modalFadeInRight {
+@keyframes modalFadeOut {
   from {
-    transform: translateX(100%);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
   to {
-    transform: translateX(0);
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
   }
 }
 
-@keyframes modalFadeOutRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
+// Drawer animations for fading in and out from the right side
 
-@keyframes modalFadeIn {
+@keyframes overlayFade {
   from {
-    transform: translateY(-100%);
+    opacity: 0;
+    transform: translateY(0);
   }
   to {
+    opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes modalFadeOut {
+@keyframes overlayFadeOut {
   from {
-    transform: translateY(0);
+    opacity: 1;
   }
   to {
-    transform: translateY(-100%);
+    opacity: 0;
   }
 }
 
-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;
+body.ReactModal__Body--open {
+  transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
 }
 
 .pb_drawer_lg_left.pb_drawer {
@@ -88,21 +66,28 @@ body.PBDrawer__Body--close {
 }
 
 .pb_drawer.pb_drawer_after_open {
-  transform: translate3d(0, 0, 0);
+  transform: translateX(0); /* Slide in */
 }
-
 // Drawer Styles
 .pb_drawer {
-   will-change: transform;
-   backface-visibility: hidden;
+
+  // 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;
 
   .drawer {
     position: sticky;
-    will-change: transform;
-    backface-visibility: hidden;
     top: 0;
     background-color: $white;
-    z-index: $z_9;
+    z-index: $z_8;
   }
 
   // @include pb_card;
@@ -112,31 +97,41 @@ body.PBDrawer__Body--close {
   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;
 
-  // General _before_close styles
-  &[class*="_before_close"] {
-    animation-name: modalFadeOut;
-    animation-duration: $animation-duration;
+  &.drawer_border_full {
+    box-shadow: none;
+    border: 2px solid #f3f7fb;
   }
 
-  &[class*="_left"] {
-    animation-name: modalFadeInLeft;
+  &.drawer_border_right {
+    border-right: 2px solid #f3f7fb;
   }
 
-  &[class*="_left"][class*="_before_close"] {
-    animation-name: modalFadeOutLeft;
-    animation-duration: $animation-duration;
+  &.drawer_border_left {
+    border-left: 2px solid #f3f7fb;
   }
 
-  &[class*="_right"] {
-    animation-name: modalFadeInRight;
+  &[class*="_left"] {
+    animation-name: modalFadeInLeft;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutLeft;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
   }
 
-  &[class*="_right"][class*="_before_close"] {
-    animation-name: modalFadeOutRight;
-    animation-duration: $animation-duration;
+  &[class*="_right"] {
+    animation-name: modalFadeInRight;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutRight;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
   }
 
   &[class*="_xs_"] {
@@ -169,25 +164,19 @@ body.PBDrawer__Body--close {
   }
 
   &_after_open {
-  }
-
-  &.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;
+    opacity: $opacity_visible;
   }
 
   &.no-background {
     background-color: transparent; 
   }
 
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
+    opacity: $opacity_hidden;
+  }
+
   &_close_icon {
     cursor: pointer;
   }
@@ -207,10 +196,12 @@ body.PBDrawer__Body--close {
     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"]{
@@ -267,12 +258,12 @@ body.PBDrawer__Body--close {
         &[class*="_xl_"] {
           width: $xlarge;
           .dialog_footer {
-            width: $xlarge;
-          }
+          width: $xlarge;
         }
       }
     }
   }
+}
 
   &_no_overlay {
     position: fixed;
@@ -289,18 +280,20 @@ body.PBDrawer__Body--close {
     overflow: none; /* Ensure body remains scrollable */
     pointer-events: none; /* Allow interaction inside the drawer itself */
 
-    body.PBDrawer--open {
+    body.ReactModal__Body--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"]{
@@ -357,22 +350,116 @@ body.PBDrawer__Body--close {
         &[class*="_xl_"] {
           width: $xlarge;
           .dialog_footer {
-            width: $xlarge;
-          }
+          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;
+        }
+      }
+    }
+  }
+
+  // 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;
   }
 
-  [class*="drawer_header"] {
-    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_footer"] {
-    padding: $space_sm;
+  .drawer-button-class {
+    background-color: unset;
+    border: none;
+    cursor: pointer;
   }
 }
+}

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

@@ -1,12 +1,8 @@
 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";
@@ -57,19 +53,13 @@ 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 = {
@@ -77,9 +67,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",
@@ -92,18 +82,19 @@ 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,
@@ -116,7 +107,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;
@@ -129,57 +120,39 @@ 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 [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";
+  const modalIsOpened = trigger ? triggerOpened : (opened || isBreakpointOpen);
 
   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("PBDrawer__Body--open");
+      body.classList.add('ReactModal__Body--open');
     } else if (body) {
-      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");
+      body.style.cssText = ''; // Clear the styles when modal is closed or behavior is not 'push'
+      body.classList.remove('ReactModal__Body--open');
     }
   }, [modalIsOpened, behavior, placement, size]);
 
@@ -199,27 +172,22 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
           {...htmlProps}
           className={classes}
       >
-          {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()}
-            >
+        <Modal
+            ariaHideApp={false}
+            className={drawerClassNames}
+            closeTimeoutMS={200}
+            contentLabel="Minimal Modal Example"
+            id={id}
+            isOpen={modalIsOpened}
+            onRequestClose={onClose}
+            overlayClassName={overlayClassNames}
+            shouldCloseOnOverlayClick={overlay}
+        >
+          <>
             {children}
-            </div>
-            </div>
-          )}
-          </div>
+          </>
+        </Modal>
+      </div>
     </DialogContext.Provider>
   );
 };