playbook_ui 14.25.0.pre.alpha.PLAY2451navnavitemaccessibility10054 → 14.25.0.pre.alpha.dialogfix10270

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.25.0"
-  VERSION = "14.25.0.pre.alpha.PLAY2451navnavitemaccessibility10054"
+  VERSION = "14.25.0.pre.alpha.dialogfix10270"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.25.0.pre.alpha.PLAY2451navnavitemaccessibility10054
+  version: 14.25.0.pre.alpha.dialogfix10270
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-28 00:00:00.000000000 Z
+date: 2025-09-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1337,35 +1337,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/index.js
 - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx
 - app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx
-- app/pb_kits/playbook/pb_drawer/_close_icon.tsx
-- app/pb_kits/playbook/pb_drawer/_drawer.scss
-- app/pb_kits/playbook/pb_drawer/_drawer.tsx
-- app/pb_kits/playbook/pb_drawer/_drawer_context.tsx
-- app/pb_kits/playbook/pb_drawer/context.ts
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx
-- app/pb_kits/playbook/pb_drawer/docs/example.yml
-- app/pb_kits/playbook/pb_drawer/docs/index.js
-- app/pb_kits/playbook/pb_drawer/drawer.html.erb
-- app/pb_kits/playbook/pb_drawer/drawer.rb
-- app/pb_kits/playbook/pb_drawer/drawer.test.jsx
-- app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx
-- app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx
-- app/pb_kits/playbook/pb_drawer/index.js
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss
@@ -3649,9 +3620,9 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_line_graph-DneDB2OG.js
-- dist/chunks/_typeahead-DZeo2GyK.js
-- dist/chunks/_weekday_stacked-BkgJ1KTM.js
+- dist/chunks/_line_graph-CApw7aQD.js
+- dist/chunks/_typeahead-J1_avqdO.js
+- dist/chunks/_weekday_stacked-Bugv1mOh.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-CY5ZPzic.js
 - dist/chunks/pb_form_validation-D3b0JKHH.js

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

@@ -1,25 +0,0 @@
-import React from 'react'
-import Icon from '../pb_icon/_icon'
-
-import { getAllIcons } from "../utilities/icons/allicons"
-
-type CloseIconProps = {
-  onClose: () => void,
-}
-
-export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
-  const { onClose } = props
-  const timesIcon = getAllIcons()["times"]
-  return (
-    <div
-        className="pb_dialog_close_icon"
-        onClick={onClose}
-    >
-      <Icon
-          className="svg-inline--fa"
-          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
-          fixedWidth
-      />
-    </div>
-  )
-}

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

@@ -1,381 +0,0 @@
-@import "../tokens/positioning";
-@import "../tokens/colors";
-@import "../pb_card/card_mixin";
-@import "../tokens/shadows";
-@import "../tokens/border_radius";
-@import "../tokens/spacing";
-@import "../tokens/animation-curves";
-@import "../tokens/positioning";
-
-$gutter: $space_lg;
-$xsmall: 64px;
-$small: 200px;
-$medium: 250px;
-$large: 300px;
-$xlarge: 365px;
-$animation-duration: .25s;
-$z-index: $z_7;
-
-@keyframes modalFadeInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes modalFadeOutLeft {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes modalFadeInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes modalFadeOutRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@keyframes modalFadeIn {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes overlayFade {
-  from {
-    opacity: 0;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes overlayFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes modalFadeDownIn {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeDownOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes modalFadeUpIn {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeUpOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-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 {
-  transform: translateX(-100%);
-}
-
-.pb_drawer_lg_right .pb_drawer {
-  transform: translateX(100%);
-}
-
-.pb_drawer.pb_drawer_after_open {
-  pointer-events: auto;
-  transform: translate3d(0, 0, 0);
-}
-
-// Drawer Styles
-.pb_drawer {
-  background-color: $white;
-  z-index: $z-index;
-  border: 0;
-  height: 100%;
-  overflow: auto;
-  animation-duration: $animation-duration;
-  outline: none;
-
- &.pb_drawer_within_element_rails {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-
-    // Use max-height for a smooth accordion-like animation
-    max-height: 0;
-    transition: max-height $animation-duration ease-in-out;
-    z-index: 1;
-
-    &.open {
-      max-height: 1000px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
-  &.pb_drawer_within_element {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-    transition: height $animation-duration ease-in-out;
-    height: var(--drawer-height);
-    z-index: 1;
-
-    &.pb_drawer_before_close {
-      height: 0;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
-  .toggle-content.is-visible {
-    display: block;
-    height: auto;
-  }
-
-  .drawer {
-    position: sticky;
-    will-change: transform;
-    top: 0;
-    background-color: $white;
-    z-index: $z_9;
-  }
-
-  &[class*="_left"] {
-    animation-name: modalFadeInLeft;
-  }
-
-  &[class*="_left"][class*="_before_close"] {
-    animation-name: modalFadeOutLeft;
-    animation-duration: $animation-duration;
-    transform: translateX(-100%);
-  }
-
-  &[class*="_right"] {
-    animation-name: modalFadeInRight;
-    justify-content: flex-end;
-  }
-
-  &[class*="_right"][class*="_before_close"] {
-    animation-name: modalFadeOutRight;
-    animation-duration: $animation-duration;
-    transform: translateX(100%);
-  }
-
-  &[class*="_bottom"] {
-    animation: none;
-    transform: none;
-  }
-
-  &[class*="_bottom"][class*="_before_close"] {
-    animation: none;
-    transform: none;
-  }
-
-  &[class*="_top"] {
-    animation-name: modalFadeUpIn;
-  }
-
-  &[class*="_top"][class*="_before_close"] {
-    animation-name: modalFadeUpOut;
-    animation-duration: $animation-duration;
-  }
-
-
-  &[class*="_xs_"] {
-    width: $xsmall;
-    max-width: $xsmall;
-  }
-
-  &[class*="_sm_"] {
-    width: $small;
-    max-width: $small;
-  }
-
-  &[class*="_md_"] {
-    width: $medium;
-    max-width: $medium;
-  }
-
-  &[class*="_lg_"] {
-    width: $large;
-    max-width: $large; 
-  }
-
-  &[class*="_xl_"] {
-    width: $xlarge;
-    max-width: $xlarge; 
-  }
-
-  &[class*="_full_"] {
-    width: 100%;
-    max-width: 100%; 
-  }
-
-  &.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;
-  }
-
-  &.no-background {
-    background-color: transparent; 
-  }
-
-  &_close_icon {
-    cursor: pointer;
-  }
-
-  &_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    background-color: rgba($bg_dark, $opacity_4);
-    z-index: $z-index;
-    animation: overlayFade $animation-duration ease-in-out forwards;
-    
-    &[class*="_left"]{
-      justify-content: flex-start;
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
-    &[class*="_right"]{
-      justify-content: flex-end;
-    }
-    
-    &_before_close {
-      animation: overlayFadeOut $animation-duration ease-in-out forwards;
-      opacity: 0;
-      // height: 0;
-    }
-  }
-
-  &_no_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    z-index: $z-index;
-    opacity: 1;
-    pointer-events: none;
-
-    &[class*="_right"]{
-      justify-content: flex-end;
-    }
-
-    &[class*="_left"]{
-      justify-content: flex-start;
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
-    &_before_close {
-      height: 0;
-    }
-  }
-
-
-  &.pb_drawer_before_close {
-    transform: translateX(-100%);
-  }
-}

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

@@ -1,231 +0,0 @@
-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 { DrawerContext } from "./context"
-import { useBreakpoint } from "./hooks/useBreakpoint"
-
-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 => {
-  const {
-    aria = {},
-    behavior = "floating",
-    border = "none",
-    breakpoint = "none",
-    className,
-    data = {},
-    htmlOptions = {},
-    id,
-    size = "md",
-    children,
-    triggerId,
-    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(
-    {
-      breakpoint: breakpoint,
-      triggerId,
-    }
-  )
-
-  const modalIsOpened =
-    (isOpenBreakpointOpen && !isUserClosed) || menuButtonOpened || opened
-
-  useEffect(() => {
-    if (withinElement) return;
-
-    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) {
-      if (placement === "left") {
-        body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`;
-      } else if (placement === "right") {
-        body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`;
-      }
-
-      body.classList.add("PBDrawer__Body--open");
-    } else if (body) {
-      if (body.classList.contains("PBDrawer__Body--open")) {
-        body.classList.add("PBDrawer__Body--close");
-      }
-      body.style.cssText = "";
-      body.classList.remove("PBDrawer__Body--open");
-    }
-  }, [modalIsOpened]);
-
-  // Helper functions
-  const updateDrawerHeight = () => {
-    if (drawerRef.current) {
-      const height = drawerRef.current.scrollHeight;
-      drawerRef.current.style.setProperty('--drawer-height', `${height}px`);
-    }
-  }
-  
-  useEffect(() => {
-    if (modalIsOpened) {
-      setShouldRender(true)
-      if (withinElement) {
-        const timer = setTimeout(() => {
-          updateDrawerHeight()
-          setIsAnimating(true)
-        }, 10)
-        return () => clearTimeout(timer)
-      } else {
-        setIsAnimating(true)
-      }
-    } else {
-      setIsAnimating(false)
-      const timer = setTimeout(() => {
-        setShouldRender(false)
-      }, 250)
-      return () => clearTimeout(timer)
-    }
-  }, [modalIsOpened])
-
-
-
-  const handleMenuButtonClick = () => {
-    if (modalIsOpened) {
-      setMenuButtonOpened(false)
-      setIsUserClosed(true)
-    } else {
-      setMenuButtonOpened(true)
-      setIsUserClosed(false)
-    }
-  }
-
-  // Setup menu button click handler
-  useEffect(() => {
-    if (!triggerId) return;
-    
-    const menuButton = document.getElementById(triggerId)
-    if (menuButton) {
-      menuButton.addEventListener("click", handleMenuButtonClick)
-      return () => menuButton.removeEventListener("click", handleMenuButtonClick)
-    }
-  }, [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_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 (
-    <DrawerContext.Provider value={api}>
-      {withinElement ? (
-        drawerContent
-      ) : (
-        <div
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classnames(buildCss("pb_drawer_wrapper"), className)}
-            style={dynamicInlineProps}
-        >
-          <div
-              className={overlayClasses}
-              id={id}
-              onClick={overlay ? api.onClose : undefined}
-          >
-            {drawerContent}
-          </div>
-        </div>
-      )}
-    </DrawerContext.Provider>
-  )
-}
-
-export default Drawer

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

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const DrawerContext = React.createContext(null);