playbook_ui 14.12.0 → 14.13.0.pre.alpha.play1834depupdatesass6024

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

@@ -9,12 +9,38 @@ export default class PbDraggable extends PbEnhancedElement {
   }
 
   connect() {
+    this.state = {
+      items: [],
+      dragData: { id: "", initialGroup: "" },
+      isDragging: "",
+      activeContainer: ""
+    };
+
     this.draggedItem = null;
     this.draggedItemId = null;
+    this.hasMultipleContainers = false;
+
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
 
+  setState(newState) {
+    this.state = { ...this.state, ...newState };
+    if (newState.items) {
+      const customEvent = new CustomEvent('pb-draggable-reorder', {
+        detail: {
+          reorderedItems: this.state.items,
+          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
+        }
+      });
+      this.element.dispatchEvent(customEvent);
+    }
+  }
+
   bindEventListeners() {
+    // Check for multiple containers
+    const containers = this.element.querySelectorAll(DRAGGABLE_CONTAINER);
+    this.hasMultipleContainers = containers.length > 1;
+
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
     this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
@@ -27,11 +53,10 @@ export default class PbDraggable extends PbEnhancedElement {
       item.addEventListener("dragenter", this.handleDragEnter.bind(this));
     });
 
-    const container = this.element.querySelector(DRAGGABLE_CONTAINER);
-    if (container) {
+    containers.forEach(container => {
       container.addEventListener("dragover", this.handleDragOver.bind(this));
       container.addEventListener("drop", this.handleDrop.bind(this));
-    }
+    });
   }
 
   handleDragStart(event) {
@@ -41,11 +66,17 @@ export default class PbDraggable extends PbEnhancedElement {
       event.preventDefault();
       return;
     }
-    
+
+    const container = event.target.closest(DRAGGABLE_CONTAINER);
     this.draggedItem = event.target;
     this.draggedItemId = event.target.id;
-    event.target.classList.add("is_dragging");
 
+    this.setState({
+      dragData: { id: this.draggedItemId, initialGroup: container.id },
+      isDragging: this.draggedItemId
+    });
+
+    event.target.classList.add("is_dragging");
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = 'move';
       event.dataTransfer.setData('text/plain', this.draggedItemId);
@@ -59,11 +90,20 @@ export default class PbDraggable extends PbEnhancedElement {
   handleDragEnter(event) {
     if (!this.draggedItem || event.target === this.draggedItem) return;
 
+    if (this.hasMultipleContainers) {
+      this.handleMultiContainerDragEnter(event);
+    } else {
+      this.handleSingleContainerDragEnter(event);
+    }
+  }
+
+  handleSingleContainerDragEnter(event) {
     const targetItem = event.target.closest('.pb_draggable_item');
     if (!targetItem) return;
 
     const container = targetItem.parentNode;
     const items = Array.from(container.children);
+
     const draggedIndex = items.indexOf(this.draggedItem);
     const targetIndex = items.indexOf(targetItem);
 
@@ -74,47 +114,143 @@ export default class PbDraggable extends PbEnhancedElement {
     }
   }
 
+  handleMultiContainerDragEnter(event) {
+    const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
+    const targetItem = event.target.closest('.pb_draggable_item');
+
+    if (!targetContainer) return;
+
+    // If we're entering a container directly or there's no target item
+    if (!targetItem) {
+      const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
+      if (lastItem) {
+        targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
+      } else {
+        targetContainer.appendChild(this.draggedItem);
+      }
+      return;
+    }
+
+    const container = targetItem.parentNode;
+    const items = Array.from(container.children);
+
+    const newItems = [...items].map(item => ({
+      id: item.id,
+      container: container.id
+    }));
+
+    this.setState({ items: newItems });
+
+    const rect = targetItem.getBoundingClientRect();
+    const middleY = rect.top + rect.height / 2;
+
+    if (event.clientY < middleY) {
+      container.insertBefore(this.draggedItem, targetItem);
+    } else {
+      container.insertBefore(this.draggedItem, targetItem.nextSibling);
+    }
+  }
+
   handleDragOver(event) {
     event.preventDefault();
+    event.stopPropagation();
+
+    if (this.hasMultipleContainers) {
+      this.handleMultiContainerDragOver(event);
+    } else {
+      this.handleSingleContainerDragOver(event);
+    }
+  }
+
+  handleSingleContainerDragOver(event) {
     const container = event.target.closest(DRAGGABLE_CONTAINER);
+    if (container) {
+      container.classList.add("active_container");
+    }
+  }
+
+  handleMultiContainerDragOver(event) {
+    let container;
+    if (event.target.matches(DRAGGABLE_CONTAINER)) {
+      container = event.target;
+    } else {
+      container = event.target.closest(DRAGGABLE_CONTAINER);
+    }
 
     if (container) {
+      this.setState({ activeContainer: container.id });
       container.classList.add("active_container");
+
+      // If dragging over empty container or below last item
+      const lastItem = container.querySelector('.pb_draggable_item:last-child');
+      if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
+        if (this.draggedItem && this.draggedItem.parentNode !== container) {
+          container.appendChild(this.draggedItem);
+        }
+      }
     }
   }
 
   handleDrop(event) {
     event.preventDefault();
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
+    event.stopPropagation();
+
+    let container;
+    if (event.target.matches(DRAGGABLE_CONTAINER)) {
+      container = event.target;
+    } else {
+      container = event.target.closest(DRAGGABLE_CONTAINER);
+    }
+
     if (!container || !this.draggedItem) return;
-  
+
     container.classList.remove("active_container");
     this.draggedItem.style.opacity = '1';
-  
+
+    // Handle empty containers
+    if (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
+      container.appendChild(this.draggedItem);
+    }
+
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(container.children)
-      .filter(item => item.classList.contains("pb_draggable_item"))
-      .map(item => item.id.replace("item_", "")); 
-  
+    const reorderedItems = Array.from(
+      this.element.querySelectorAll('.pb_draggable_item')
+    ).map(item => ({
+      id: item.id,
+      container: item.closest(DRAGGABLE_CONTAINER).id
+    }));
+
     // Store reordered items in a data attribute on the container
     container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
-  
+
     const customEvent = new CustomEvent('pb-draggable-reorder', {
       detail: {
         reorderedItems,
         containerId: container.id,
       }
     });
+
     this.element.dispatchEvent(customEvent);
-  
+
+    this.setState({
+      items: reorderedItems,
+      isDragging: "",
+      activeContainer: ""
+    });
+
     this.draggedItem = null;
     this.draggedItemId = null;
   }
-  
 
   handleDragEnd(event) {
     event.target.classList.remove("is_dragging");
     event.target.style.opacity = '1';
+
+    this.setState({
+      isDragging: "",
+      activeContainer: ""
+    });
+
     this.draggedItem = null;
     this.draggedItemId = null;
 

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag("div",
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
+<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 3000,
+  classname: "toast-to-hide",
+  id: "toast-auto-close",
+  text: "I will disappear in 3 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 10000,
+  closeable: true,
+  id: "toast-auto-close-closeable",
+  text: "I will disappear in 10 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize toast elements and buttons
+  const toasts = {
+    '#toast-auto-close': document.querySelector("#toast-auto-close"),
+    '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
+  }
+  
+  const buttons = {
+    '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
+    '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
+  }
+
+  // Store original toasts and remove them from DOM
+  const originalToasts = {}
+  Object.entries(toasts).forEach(([id, toast]) => {
+    if (toast) {
+      originalToasts[id] = toast.cloneNode(true)
+      toast.remove()
+    }
+  })
+
+  // Set up button click handlers
+  Object.keys(buttons).forEach((toastId) => {
+    const button = buttons[toastId]
+    if (button) {
+      button.onclick = () => {
+        const newToast = originalToasts[toastId].cloneNode(true)
+        newToast.style.display = "flex"
+        document.body.appendChild(newToast)
+      }
+    }
+  })
+})
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md

@@ -0,0 +1,3 @@
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
+
+The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

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

@@ -5,6 +5,7 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
   

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

@@ -2,16 +2,18 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbFixedConfirmationToast extends PbEnhancedElement {
   static get selector() {
-    return '.remove_toast'
+    return '[class*="pb_fixed_confirmation_toast_kit"]'
   }
 
   connect() {
     this.self = this.element
     this.autoCloseToast(this.self)
 
-    this.self.addEventListener('click', () => {
-      this.removeToast(this.self)
-    })
+    if (this.self.classList.contains('remove_toast')) {
+      this.self.addEventListener('click', () => {
+        this.removeToast(this.self)
+      })
+    }
   }
 
   removeToast(elem) {
@@ -32,4 +34,4 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
       }, autoCloseIntValue)
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
+<%= pb_content_tag(:div, class: object.classname + object.size_class, tabindex: object.tabindex) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
     <% if object.truncate %>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -18,6 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  preserveCase?: boolean,
   emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
@@ -43,6 +44,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
+    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -77,6 +79,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
+  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
+
   return (
     <div
         className={classes(className, dark)}
@@ -91,7 +95,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -101,14 +105,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -118,7 +122,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state}`}
+              {`${titleize(city)}, ${state.toUpperCase()}`}
             </Title>
             <Body
                 color="light"
@@ -132,15 +136,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{titleize(addressCont)}</Body>
+          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 pRoSpEcT ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  preserve_case: true,
+  state: "pa",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetFormatting = (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 pRoSpEcT ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId="8250263"
+        homeUrl="https://powerhrg.com/"
+        preserveCase
+        state="pa"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetFormatting

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md

@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md

@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.

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

@@ -5,12 +5,14 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
+export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -18,6 +18,7 @@ module Playbook
       prop :state
       prop :zipcode
       prop :territory
+      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -29,7 +30,7 @@ module Playbook
       end
 
       def city_state
-        [city&.titleize, state].join(", ")
+        [city&.titleize, state&.upcase].join(", ")
       end
 
       def zip
@@ -37,7 +38,7 @@ module Playbook
       end
 
       def address_house_style
-        [address&.titleize, house_style].join(separator)
+        [format_street_address, house_style].join(separator)
       end
 
       def address_house_style2
@@ -48,6 +49,16 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
+      def format_street_address
+        preserve_case ? address : custom_titleize(address)
+      end
+
+      def custom_titleize(str)
+        return "" if str.nil?
+
+        str.split(" ").map(&:capitalize).join(" ")
+      end
+
       def city_emphasis_props
         {
           address_house_style: address_house_style,

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -5,12 +5,8 @@
     <%= object.icon.html_safe %>
   </span>
 <% else %>
-  <%= content_tag(:i, nil,
-      id: object.id,
-      data: object.data,
-      class: object.classname,
-      **combined_html_options
-  ) %>
+  <%= pb_content_tag(:i) do %>
+  <% end %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),
       hidden: true

data/app/pb_kits/playbook/pb_layout/body.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/footer.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/item.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div, object.text,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
     <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>
     <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>