playbook_ui 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6462

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb

@@ -0,0 +1,99 @@
+<% containers = [
+  "To Do",
+  "In Progress",
+  "Done"
+] %>
+
+<% items_data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+] %>
+
+<%= pb_rails("draggable", props: { initial_items: items_data }) do %>
+  <%= pb_rails("flex", props: { justify_content: "center" }) do %>
+    <% containers.each do |container| %>
+      <%= pb_rails("draggable/draggable_container", props: {
+          container: container,
+          width: "xs",
+          padding: "sm",
+          data: { container: container }
+      }) do %>
+        <%= pb_rails("caption", props: { text_align: "center" }) do %><%= container %><% end %>
+        <%= pb_rails("flex", props: {align_items: "stretch", orientation: "column"}) do %>
+          <% items_data.select { |item| item[:container] == container }.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props: {
+                container: container,
+                drag_id: item[:id]
+            }) do %>
+              <%= pb_rails("card", props: { margin_bottom: "sm", padding: "sm"}) do %>
+                <%= pb_rails("flex", props: { justify: "between" }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("flex") do %>
+                      <%= pb_rails("avatar", props: {
+                          image_url: item[:assignee_img],
+                          name: item[:assignee_name],
+                          size: "xxs"
+                      }) %>
+                      <%= pb_rails("title", props: {
+                          padding_left: "xs",
+                          size: 4,
+                          text: item[:title]
+                      }) %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+                <%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md

@@ -0,0 +1 @@
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb

@@ -0,0 +1,61 @@
+<% initial_items = [
+  {
+    id: "1",
+    title: "Task 1",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "2",
+    title: "Task 2",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "3",
+    title: "Task 3",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "4",
+    title: "Task 4",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "5",
+    title: "Task 5",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  }
+] %>
+
+
+
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("table", props: { size: "sm", responsive:"none" }) do %>
+    <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "id"}) %>
+        <%= pb_rails("table/table_header", props: { text: "name"}) %>
+        <%= pb_rails("table/table_header", props: { text: "task number"}) %>
+      <% end %>
+    <% end %>
+
+    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
+          <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
+          <%= pb_rails("table/table_cell") do %>
+            <%= pb_rails("flex", props:{align:"center"}) do %>
+              <%= pb_rails("avatar", props: {size: "xs", image_url: item[:assignee_img]}) %>
+              <%= pb_rails("body", props: {text: item[:assignee_name], padding_left:"sm"}) %>
+            <% end %>
+          <% end %>
+          <%= pb_rails("table/table_cell", props: { text: item[:title]}) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md

@@ -0,0 +1,4 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+
+- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
+- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here. 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+
+// Initial items to be dragged
+const data = [
+    {
+        id: "1",
+        task: "Task 1",
+        assignee_name: "Terry Miles",
+        assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+      },
+      {
+        id: "2",
+        task: "Task 2",
+        assignee_name: "Sophia Miles",
+        assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+      },
+      {
+        id: "3",
+        task: "Task 3",
+        assignee_name: "Alice Jones",
+        assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+      },
+      {
+        id: "4",
+        task: "Task 4",
+        assignee_name: "Mike James",
+        assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+      },
+      {
+        id: "5",
+        task: "Task 5",
+        assignee_name: "James Guy",
+        assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+      }
+];
+
+const DraggableWithTableReact = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Table
+            responsive="none"
+            size="sm" 
+            {...props}
+        >
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>{"id"}</Table.Header>
+              <Table.Header>{"name"}</Table.Header>
+              <Table.Header>{"task number"}</Table.Header>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body draggableContainer>
+            {initialState.map(({ id, task, assignee_name, assignee_img }) => (
+              <Table.Row 
+                  dragId={id} 
+                  draggableItem
+                  key={id}
+              >
+                <Table.Cell>{id}</Table.Cell>
+                <Table.Cell>
+                  <Flex align="center">
+                    <Avatar 
+                        imageUrl={assignee_img} 
+                        size="xs" 
+                    />
+                    <Body 
+                        paddingLeft="xxs" 
+                        text={assignee_name} 
+                        {...props}
+                    />
+                  </Flex>
+                </Table.Cell>
+                <Table.Cell>{task}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableWithTableReact;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md

@@ -0,0 +1,5 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+
+- Wrap the Table with the `DraggableProvider` and manage state as shown. 
+- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 

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

@@ -1,18 +1,17 @@
 examples:
-  
-  
   react:
   - draggable_default: Default
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
+  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  
+
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
   - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
+  - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 
-
-  

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

@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +1,3 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(object.tag) do %>
     <%= content.presence %>
-  <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -3,6 +3,11 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
+      prop :tag, type: Playbook::Props::String,
+                 default: "div"
+      prop :container, type: Playbook::Props::String,
+                       default: ""
+
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, {
+<%= pb_content_tag(object.tag, {
 id: "item_#{object.drag_id}",
 draggable: true
 }) do %>

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -5,6 +5,10 @@ module Playbook
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
+      prop :tag, type: Playbook::Props::String,
+                 default: "div"
+      prop :container, type: Playbook::Props::String,
+                       default: ""
 
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)

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_draggable/subcomponents/DraggableContainer.tsx

@@ -17,10 +17,11 @@ type DraggableContainerProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableContainer = (props: DraggableContainerProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
 
   const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
 
@@ -28,6 +29,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
+  const Tag: React.ReactElement | any = `${tag}`;
+
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
@@ -36,18 +39,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   );
 
   return (
-    <div
+    <Tag
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
         id={id}
         key={container}
-        onDragOver={(e) => handleDragOver(e, container)}
+        onDragOver={(e: Event) => handleDragOver(e, container)}
         onDrop={() => handleDrop(container)}
     >
       {children}
-    </div>
+    </Tag>
   );
 };
 

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -18,10 +18,11 @@ type DraggableItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   dragId?: string;
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
 
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -30,6 +31,8 @@ const DraggableItem = (props: DraggableItemProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
+  const Tag: React.ReactElement | any = `${tag}`;
+  
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -38,7 +41,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
 
   return (
-    <div
+    <Tag
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -51,7 +54,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
-    </div>
+    </Tag>
   );
 };