playbook_ui 14.14.0.pre.alpha.play1868dependencyremovallodash6286 → 14.14.0.pre.alpha.play1872verticaltimelineresponsiveissue6409

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

@@ -0,0 +1,257 @@
+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")
+  }
+}

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty, map, omitBy } from '../../utilities/object'
+import { isEmpty, map, omitBy } from 'lodash'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -40,13 +40,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                   className="filter"
                   key={`filter-${name}`}
               >
-                { value === true ?
+                { value === true ? 
                 <Title
                     dark={dark}
                     size={4}
                     tag="h4"
                     text={name}
-                /> :
+                /> : 
                 <div>
                   <Caption
                       dark={dark}
@@ -58,7 +58,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                       tag="h4"
                       text={value}
                   />
-                </div>
+                </div>    
                 }
               </div>
             ))}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty } from '../../utilities/object'
+import { isEmpty } from 'lodash'
 
 import Flex from '../../pb_flex/_flex'
 
@@ -46,7 +46,7 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        { children &&
+        { children && 
           <>
             <FiltersPopover
                 dark={dark}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -32,7 +32,7 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
+    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
+        <% 15.times do %>
+            <%= pb_rails("flex/flex_item") do %>
+                <%= pb_rails("card") do %>
+                    Card content
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md

@@ -0,0 +1 @@
+Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.

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

@@ -8,4 +8,5 @@ examples:
   rails:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

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

@@ -0,0 +1,61 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const OVERLAY_SELECTOR = '[data-pb-overlay]'
+const OVERLAY_SCROLL_ELEMENT = '[data-overlay-scroll-element]'
+const PREVIOUS_OVERLAY_CLASSNAME = '[data-previous-overlay-classname]'
+const SUBSEQUENT_OVERLAY_CLASSNAME = '[data-subsequent-overlay-classname]'
+
+export default class PbOverlay extends PbEnhancedElement {
+    static get selector() {
+        return OVERLAY_SELECTOR
+    }
+
+    get target() {
+        return this.element.querySelector(OVERLAY_SCROLL_ELEMENT).children[0]
+    }
+
+    connect() {
+        this.handleOverlayDynamic()
+    }
+
+    handleOverlayDynamic() {
+        const isOverlayDynamic = this.element.dataset?.overlayDynamic
+
+        if (isOverlayDynamic) {
+            const previousOverlayElement = this.element.querySelector(PREVIOUS_OVERLAY_CLASSNAME)
+            const previousOverlayClassname = previousOverlayElement?.dataset?.previousOverlayClassname
+            const subsequentOverlayElement = this.element.querySelector(SUBSEQUENT_OVERLAY_CLASSNAME)
+            const subsequentOverlayClassname = subsequentOverlayElement?.dataset?.subsequentOverlayClassname
+
+            const handleScrollChange = (target) => {
+                const { scrollLeft, scrollWidth, clientWidth } = target
+                const isScrollAtStart = scrollLeft === 0
+                const isScrollAtEnd = scrollLeft + clientWidth >= scrollWidth - 1
+        
+                if (isScrollAtStart) {
+                    previousOverlayElement.classList.remove(previousOverlayClassname)
+                } else {
+                    previousOverlayElement.classList.add(previousOverlayClassname)
+                }
+        
+                if (isScrollAtEnd) {
+                    subsequentOverlayElement.classList.remove(subsequentOverlayClassname)
+                } else {
+                    subsequentOverlayElement.classList.add(subsequentOverlayClassname)
+                }
+            }
+
+            this.target.addEventListener('scroll', (event) => {
+                handleScrollChange(event.target)
+            })
+
+            handleScrollChange(this.target)
+        }
+    }
+
+    disconnect() {
+        if (this.element.dataset?.overlayDynamic) {
+            this.target.removeEventListener('scroll')
+        }
+    }
+}

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -16,12 +16,14 @@ id: object.id,
         <% end %>
 
     <% else %>
-        <div class="<%= previous_overlay_class_name %>"></div>
+        <div class="<%= previous_overlay_class_name %>" data-previous-overlay-classname="<%= previous_overlay_class_name %>"></div>
 
-        <%= content.presence %>
+        <div data-overlay-scroll-element="true">
+            <%= content.presence %>
+        </div>
 
         <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>"></div>
+            <div class="<%= subsequent_overlay_class_name %>" data-subsequent-overlay-classname="<%= subsequent_overlay_class_name %>"></div>
         <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.rb

@@ -8,6 +8,8 @@ module Playbook
                    default: "card_light"
       prop :layout, type: Playbook::Props::HashProp,
                     default: { "bottom": "full" }
+      prop :dynamic, type: Playbook::Props::Boolean,
+                     default: false
 
       def classname
         generate_classname("pb_overlay")
@@ -105,6 +107,13 @@ module Playbook
           "bg_dark": "#0a0527",
         }
       end
+
+      def data_attributes
+        data ||= {}
+        data.merge!("data-pb-overlay" => true)
+        data.merge!("data-overlay-dynamic" => true) if dynamic
+        data
+      end
     end
   end
 end

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

@@ -0,0 +1,38 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const SELECT_WRAPPER_SELECTOR = "[data-pb-select]";
+const SELECT_VALIDATION_MESSAGE_CLASS = ".pb_body_kit_negative";
+
+export default class PbSelect extends PbEnhancedElement {
+  static get selector() {
+    return SELECT_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    this.setValidationMessage();
+  }
+
+  setValidationMessage() {
+    const validationMessage = this.element.dataset?.validationMessage;
+
+    if (validationMessage) {
+      const selectElement = this.element.querySelector("select");
+      const setErrorTextContent = (text, timeout) => {
+        setTimeout(() => {
+          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
+          if (errorMessageElement) {
+            errorMessageElement.textContent = text;
+          } else {
+            setErrorTextContent(text, 100);
+          }
+        }, timeout);
+      };
+
+      selectElement.addEventListener("change", (e) => {
+        if (!e.target.checkValidity()) {
+          setErrorTextContent(validationMessage, 300);
+        }
+      });
+    }
+  }
+}

data/app/pb_kits/playbook/pb_select/select.rb

@@ -21,6 +21,7 @@ module Playbook
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
       prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
+      prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
         classname + inline_class + compact_class + show_arrow_class
@@ -88,6 +89,13 @@ module Playbook
         "app/pb_kits/playbook/utilities/icons/angle-down.svg"
       end
 
+      def data_attributes
+        data = attributes[:data] || {}
+        data.merge!("data-pb-select" => true)
+        data.merge!("data-validation-message" => validation_message) if validation_message.present?
+        data
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -243,7 +243,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        width: $space_lg;
+                        min-width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);
@@ -263,7 +263,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        width: $space_lg;
+                        min-width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -141,7 +141,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
-    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -156,7 +155,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
-    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -169,7 +167,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
-    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
+  <% end %>
+
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-delay",
+      tooltip_id: "delay-tooltip",
+      position: 'top',
+      delay_open: 1000,
+      delay_close: 1000
+    }) do %>
+        1s open/close delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-open-delay",
+      tooltip_id: "open-tooltip",
+      position: 'top',
+      delay_open: 1000
+    }) do %>
+        1s open delay 
+  <% end %>
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: ".tooltip-close-delay",
+      tooltip_id: "close-tooltip",
+      position: 'top',
+      delay_close: 1000
+    }) do %>
+        1s close delay 
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md

@@ -0,0 +1,3 @@
+Waits for the specified time when the event listener runs before triggering the tooltip.
+
+The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-interaction",
+      tooltip_id: "tooltip-with-interaction",
+      position: 'top',
+      interaction: true
+    }) do %>
+        You can copy me
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
+
+    <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "#tooltip-no-interaction",
+      tooltip_id: "tooltip-without-interaction",
+      position: 'top',
+    }) do %>
+        I'm just a regular tooltip
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -2,8 +2,10 @@ examples:
 
   rails:
   - tooltip_default: Default
+  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
   - tooltip_with_icon_circle: Icon Circle Tooltip
+  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react: