playbook_ui 14.25.0.pre.alpha.PLAY2414removedialoghelper10118 → 14.25.0.pre.alpha.PLAY2419dialogaccessibility10271

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb

@@ -1,20 +0,0 @@
-<% if within_element %>
-    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
-        <%= content %>
-    <% end %>
-<% else %>
-    <div class="pb_drawer_wrapper"
-        id="drawer-wrapper-<%= object.id %>"
-        style="display:none;"
-        data-behavior="<%= object.behavior %>"
-        data-size="<%= object.size %>"
-        data-placement="<%= object.placement %>"
-        data-breakpoint="<%= object.breakpoint %>"
-        >
-        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>"> 
-            <%= pb_content_tag do %>
-                <%= content %>
-            <% end %>
-        </div>
-    </div>
-<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -1,56 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDrawer
-    class Drawer < Playbook::KitBase
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[xs sm md lg xl full],
-                  default: "md"
-      prop :placement, type: Playbook::Props::Enum,
-                       values: %w[left right bottom],
-                       default: "left"
-      prop :behavior, type: Playbook::Props::Enum,
-                      values: %w[floating push],
-                      default: "floating"
-      prop :overlay, type: Playbook::Props::Boolean,
-                     default: true
-      prop :within_element, type: Playbook::Props::Boolean,
-                            default: false
-      prop :border, type: Playbook::Props::Enum,
-                    values: %w[full none right left],
-                    default: "none"
-      prop :breakpoint, type: Playbook::Props::Enum,
-                        values: %w[none xs sm md lg xl],
-                        default: "none"
-
-      def classname
-        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
-      end
-
-      def border_classes
-        case border
-        when "full"
-          "drawer_border-full"
-        when "right"
-          "drawer_border-right"
-        when "left"
-          "drawer_border-left"
-        else
-          ""
-        end
-      end
-
-      def overlay_close
-        !should_close_on_overlay_click ? "overlay_close" : ""
-      end
-
-      def within_class
-        within_element ? "pb_drawer_within_element_rails" : ""
-      end
-
-      def overlay_classes
-        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
-      end
-    end
-  end
-end

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

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import { render, fireEvent, screen } from '../utilities/test-utils';
-import { Drawer, Button } from 'playbook-ui';
-import { waitFor } from '@testing-library/react';
-
-const size = 'sm';
-
-function DrawerTest({ props }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const close = () => setIsOpen(false);
-  const open = () => setIsOpen(true);
-
-  return (
-    <>
-    <Button onClick={open}>{'Open Drawer'}</Button>
-      <Drawer
-          className="wrapper"
-          id="drawer-id"
-          onClose={close}
-          opened={isOpen}
-          placement="left"
-          portalClassName="portal"
-          size={size}
-          {...props}
-      >
-        {props && props.children}
-      </Drawer>
-    </>
-  );
-}
-
-test('renders with the right border class when border prop is right', async () => {
-  render(<DrawerTest props={{ border: 'right' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  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-right');
-});
-
-test('renders with the full border class when border prop is full', async () => {
-  render(<DrawerTest props={{ border: 'full' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  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');
-});
-
-test('does not have a border class when border prop is none', async () => {
-  render(<DrawerTest props={{ border: 'none' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  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');
-});
-
-test('renders the correct size class for a large drawer', async () => {
-  render(<DrawerTest props={{ size: 'lg' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  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_drawer/hooks/useBreakpoint.tsx

@@ -1,60 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export const breakpointValues = {
-  none: 0,
-  xs: 575,
-  sm: 768,
-  md: 992,
-  lg: 1200,
-  xl: 1400,
-} as const
-
-type BreakpointSize = keyof typeof breakpointValues
-
-interface UseBreakpointProps {
-  breakpoint?: BreakpointSize
-  triggerId?: string
-}
-
-export const useBreakpoint = ({ 
-  breakpoint = 'none',
-  triggerId 
-}: UseBreakpointProps) => {
-  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false)
-  const [isUserClosed, setIsUserClosed] = useState(false)
-
-  useEffect(() => {
-    if (breakpoint === 'none') return
-
-    const handleResize = () => {
-      const width = window.innerWidth
-      
-        const openBreakpointWidth = breakpointValues[breakpoint]
-        if (width >= openBreakpointWidth) {
-          setIsOpenBreakpointOpen(true)
-        } else {
-          setIsOpenBreakpointOpen(false)
-          setIsUserClosed(false)
-        }
-
-      // Handle menu button visibility
-      if (triggerId) {
-        const menuButton = document.getElementById(triggerId)
-        if (menuButton) {
-          menuButton.style.display = isOpenBreakpointOpen ? 'none' : ''
-        }
-      }
-    }
-
-    window.addEventListener('resize', handleResize)
-    handleResize()
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [breakpoint, triggerId, isOpenBreakpointOpen])
-
-  return {
-    isOpenBreakpointOpen,
-    isUserClosed,
-    setIsUserClosed
-  }
-} 

data/app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx

@@ -1,21 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export const useDrawerAnimation = (isOpen: boolean) => {
-  const [animationState, setAnimationState] = useState('')
-
-  useEffect(() => {
-    if (isOpen) {
-      setAnimationState('afterOpen')
-    } else if (!isOpen && animationState === 'afterOpen') {
-      setAnimationState('beforeClose')
-      setTimeout(() => {
-        setAnimationState('')
-      }, 200)
-    }
-  }, [isOpen])
-
-  return {
-    animationState,
-    isVisible: isOpen || animationState === 'beforeClose'
-  }
-} 

data/app/pb_kits/playbook/pb_drawer/index.js

@@ -1,257 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element"
-
-export default class PbDrawer extends PbEnhancedElement {
-  static get selector() {
-    return ".pb_drawer_wrapper"
-  }
-
-  connect() {
-    this.handleToggleClick = this.handleToggleClick.bind(this)
-    this.handleOutsideClick = this.handleOutsideClick.bind(this)
-    this.handleResize = this.handleResize.bind(this)
-
-    this._toggleTriggers = Array.from(document.querySelectorAll("[data-open-drawer]"))
-    this._toggleTriggers.forEach(el => {
-      el.addEventListener("click", this.handleToggleClick)
-    })
-
-    this._wrappers = Array.from(document.querySelectorAll(".pb_drawer_wrapper"))
-    this._wrappers.forEach(el => {
-      el.addEventListener("mousedown", this.handleOutsideClick)
-    })
-
-    this._withinElementDrawers = Array.from(
-      document.querySelectorAll(".pb_drawer_within_element_rails[data-breakpoint]")
-    )
-
-    window.addEventListener("resize", this.handleResize)
-    this.handleResize()
-  }
-
-  disconnect() {
-    this._toggleTriggers.forEach(el => {
-      el.removeEventListener("click", this.handleToggleClick)
-    })
-    this._wrappers.forEach(el => {
-      el.removeEventListener("mousedown", this.handleOutsideClick)
-    })
-    window.removeEventListener("resize", this.handleResize)
-  }
-
-  getOverlay(wrapper) {
-    if (wrapper.id && wrapper.id.startsWith("drawer-wrapper-")) {
-      const overlayId = wrapper.id.replace("drawer-wrapper-", "drawer-overlay-")
-      return document.getElementById(overlayId)
-    }
-    return wrapper.querySelector(".pb_drawer_overlay") || wrapper.querySelector(".pb_drawer_no_overlay")
-  }
-
-  handleToggleClick(event) {
-    const trigger = event.currentTarget
-    const drawerId = trigger.dataset.openDrawer
-    const dialog = document.getElementById(drawerId)
-    if (!dialog) return
-
-    if (dialog.classList.contains("pb_drawer_within_element_rails")) {
-      if (dialog.classList.contains("open")) {
-        this.closeWithinElementDrawer(dialog)
-        dialog.dataset.manualOpen = "false"
-      } else {
-        this.openWithinElementDrawer(dialog)
-        dialog.dataset.manualOpen = "true"
-      }
-      return
-    }
-
-    const wrapperId = `drawer-wrapper-${drawerId}`
-    const wrapper = document.getElementById(wrapperId)
-    if (!wrapper) return
-
-    if (wrapper !== this.element) return
-
-    if (wrapper.classList.contains("open")) {
-      this.closeDrawer(wrapper, dialog)
-      wrapper.dataset.manualOpen = "false"
-    } else {
-      this.openDrawer(wrapper, dialog)
-      wrapper.dataset.manualOpen = "true"
-    }
-  }
-
-  openWithinElementDrawer(dialog) {
-    if (dialog.classList.contains("open")) return
-    dialog.style.maxHeight = "0px"
-    dialog.offsetHeight
-    dialog.classList.add("open")
-    // Get trigger's height and add it to the final height
-    const trigger = document.querySelector(`[data-open-drawer="${dialog.id}"]`)
-    const triggerHeight = trigger ? trigger.offsetHeight : 0
-    const finalHeight = (dialog.scrollHeight + triggerHeight) + "px"
-    dialog.style.maxHeight = finalHeight
-    dialog.addEventListener("transitionend", function handleOpenEnd(e) {
-      if (e.propertyName === "max-height") {
-        dialog.style.maxHeight = "none"
-        dialog.removeEventListener("transitionend", handleOpenEnd)
-      }
-    })
-  }
-
-  closeWithinElementDrawer(dialog) {
-    if (!dialog.classList.contains("open")) return
-    const currentHeight = dialog.scrollHeight
-    dialog.style.maxHeight = currentHeight + "px"
-    dialog.offsetHeight
-    dialog.classList.remove("open")
-    dialog.style.maxHeight = "0px"
-    dialog.addEventListener("transitionend", function handleCloseEnd(e) {
-      if (e.propertyName === "max-height") {
-        dialog.removeEventListener("transitionend", handleCloseEnd)
-        dialog.style.maxHeight = "0px"
-      }
-    })
-  }
-
-  openDrawer(wrapper, dialog) {
-    const behavior = wrapper.dataset.behavior
-    const size = wrapper.dataset.size
-    const placement = wrapper.dataset.placement
-    this.handlePushOpen(behavior, size, placement)
-
-    wrapper.style.display = ""
-    const overlay = this.getOverlay(wrapper)
-    if (overlay) overlay.style.display = ""
-
-    wrapper.classList.add("open")
-    dialog.classList.add("open")
-  }
-
-  closeDrawer(wrapper, dialog) {
-    const behavior = wrapper.dataset.behavior
-    this.handlePushClose(behavior)
-
-    if (wrapper.className.includes("open")) wrapper.style.display = "none"
-    const overlay = this.getOverlay(wrapper)
-    if (overlay && wrapper.className.includes("open")) overlay.style.display = "none"
-
-    wrapper.classList.remove("open")
-    dialog.classList.remove("open")
-  }
-
-  handleOutsideClick(event) {
-    const wrapper = event.currentTarget
-    const dialog = wrapper.querySelector(".pb_drawer")
-    const overlay = this.getOverlay(wrapper)
-
-    if (dialog && dialog.classList.contains("pb_drawer_within_element_rails")) {
-      return
-    }
-
-    if (wrapper.dataset.overlayClick === "overlay_close" && event.target === overlay) {
-      this.closeDrawer(wrapper, dialog)
-      event.stopPropagation()
-      return
-    }
-
-    const dialogRect = dialog.getBoundingClientRect()
-    const clickedOutside =
-      event.clientX < dialogRect.left ||
-      event.clientX > dialogRect.right ||
-      event.clientY < dialogRect.top ||
-      event.clientY > dialogRect.bottom
-
-    if (clickedOutside) {
-      this.closeDrawer(wrapper, dialog)
-      event.stopPropagation()
-    }
-  }
-
-  handleResize() {
-    const breakpointValues = {
-      none: 0,
-      xs: 575,
-      sm: 768,
-      md: 992,
-      lg: 1200,
-      xl: 1400,
-    }
-
-    // Process wrappers
-    this._wrappers.forEach(wrapper => {
-      const bp = wrapper.dataset.breakpoint || "none"
-      if (bp === "none") return
-
-      const threshold = breakpointValues[bp] || 0
-      const dialog = wrapper.querySelector(".pb_drawer")
-      const trigger = dialog ? document.querySelector(`[data-open-drawer="${dialog.id}"]`) : null
-
-      if (window.innerWidth >= threshold) {
-        if (!wrapper.classList.contains("open")) {
-          this.openDrawer(wrapper, dialog)
-        }
-        if (trigger) trigger.style.display = "none"
-      } else {
-        if (trigger) trigger.style.display = ""
-        if (wrapper.classList.contains("open") && wrapper.dataset.manualOpen !== "true") {
-          this.closeDrawer(wrapper, dialog)
-        }
-      }
-    })
-
-    // Process within element drawers
-    this._withinElementDrawers.forEach(drawer => {
-      const bp = drawer.dataset.breakpoint || "none"
-      if (bp === "none") return
-
-      const threshold = breakpointValues[bp] || 0
-      const trigger = document.querySelector(`[data-open-drawer="${drawer.id}"]`)
-
-      if (window.innerWidth >= threshold) {
-        if (!drawer.classList.contains("open")) {
-          this.openWithinElementDrawer(drawer)
-        }
-        if (trigger) trigger.style.display = "none"
-      } else {
-        if (trigger) trigger.style.display = ""
-        if (drawer.classList.contains("open") && drawer.dataset.manualOpen !== "true") {
-          this.closeWithinElementDrawer(drawer)
-        }
-      }
-    })
-  }
-
-  handlePushOpen(behavior, size, placement) {
-    if (behavior !== "push") return
-
-    const sizeMap = {
-      xl: "365px",
-      lg: "300px",
-      md: "250px",
-      sm: "200px",
-      xs: "64px",
-      full: "100%",
-    }
-
-    const body = document.querySelector("body")
-    if (!body) return
-
-    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")
-  }
-
-  handlePushClose(behavior) {
-    if (behavior !== "push") return
-
-    const body = document.querySelector("body")
-    if (!body) return
-
-    if (body.classList.contains("PBDrawer__Body--open")) {
-      body.classList.add("PBDrawer__Body--close")
-    }
-    body.style.cssText = ""
-    body.classList.remove("PBDrawer__Body--open")
-  }
-}