playbook_ui 14.13.0.pre.rc.10 → 14.13.0

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_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 }) %>

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

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

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -38,7 +38,7 @@
     margin_bottom: "md",
     name: "currency_name",
     id: "example-currency",
-    placeholder: "$0.00",
+    value: "$99.99",
   }) %>
 
 <style>