playbook_ui 14.18.0.pre.alpha.dropdownautocomplete7493 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431

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

@@ -1,26 +1,24 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 
-const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
+const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
-const NEEDS_CLONE         = ["shadow", "outline"];   // clone only for these types
 
 export default class PbDraggable extends PbEnhancedElement {
-  static get selector() { return DRAGGABLE_SELECTOR; }
+  static get selector() {
+    return DRAGGABLE_SELECTOR;
+  }
 
   connect() {
     this.state = {
-      items:        [],
-      dragData:     { id: "", initialGroup: "" },
-      isDragging:   "",
-      activeContainer: "",
+      items: [],
+      dragData: { id: "", initialGroup: "" },
+      isDragging: "",
+      activeContainer: ""
     };
 
-    this.draggedItem   = null;
+    this.draggedItem = null;
     this.draggedItemId = null;
-    this.dragGhost     = null;
     this.hasMultipleContainers = false;
-    this.dragZoneType  = "";
-    this.dragZoneColor = "";
 
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
@@ -28,12 +26,13 @@ export default class PbDraggable extends PbEnhancedElement {
   setState(newState) {
     this.state = { ...this.state, ...newState };
     if (newState.items) {
-      this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
+      const customEvent = new CustomEvent('pb-draggable-reorder', {
         detail: {
           reorderedItems: this.state.items,
-          containerId:    this.element.querySelector(DRAGGABLE_CONTAINER).id,
-        },
-      }));
+          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
+        }
+      });
+      this.element.dispatchEvent(customEvent);
     }
   }
 
@@ -44,100 +43,71 @@ export default class PbDraggable extends PbEnhancedElement {
 
     // 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 => img.setAttribute("draggable", "false"));
-
-    this.element.querySelectorAll(".pb_draggable_item")
-      .forEach(item => {
-        item.addEventListener("dragstart", this.handleDragStart.bind(this));
-        item.addEventListener("dragend",   this.handleDragEnd.bind(this));
-        item.addEventListener("dragenter", this.handleDragEnter.bind(this));
-      });
+    this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
+      img.setAttribute("draggable", "false");
+    });
 
-    containers.forEach(c => {
-      c.addEventListener("dragover", this.handleDragOver.bind(this));
-      c.addEventListener("drop",     this.handleDrop.bind(this));
+    this.element.querySelectorAll(".pb_draggable_item").forEach(item => {
+      item.addEventListener("dragstart", this.handleDragStart.bind(this));
+      item.addEventListener("dragend", this.handleDragEnd.bind(this));
+      item.addEventListener("dragenter", this.handleDragEnter.bind(this));
+    });
+
+    containers.forEach(container => {
+      container.addEventListener("dragover", this.handleDragOver.bind(this));
+      container.addEventListener("drop", this.handleDrop.bind(this));
     });
   }
 
-  /* ---------------- DRAG START ---------------- */
   handleDragStart(event) {
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
-    if (event.target.tagName.toLowerCase() === "img") {
+    if (event.target.tagName.toLowerCase() === 'img') {
       event.preventDefault();
       return;
     }
 
-    const container    = event.target.closest(DRAGGABLE_CONTAINER);
-    this.draggedItem   = event.target;
+    const container = event.target.closest(DRAGGABLE_CONTAINER);
+    this.draggedItem = event.target;
     this.draggedItemId = event.target.id;
-    this.dragZoneType  = this.element.dataset.dropZoneType  || "";
-    this.dragZoneColor = this.element.dataset.dropZoneColor || "";
 
     this.setState({
-      dragData:   { id: this.draggedItemId, initialGroup: container.id },
-      isDragging: this.draggedItemId,
+      dragData: { id: this.draggedItemId, initialGroup: container.id },
+      isDragging: this.draggedItemId
     });
 
-    this.draggedItem.classList.add(
-      "is_dragging",
-      `drop_zone_${this.dragZoneType}`,
-      `drop_zone_color_${this.dragZoneColor}`,
-    );
-
+    event.target.classList.add("is_dragging");
     if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData("text/plain", this.draggedItemId);
-
-      /* ---------- custom ghost clone (shadow + outline only) ---------- */
-      if (NEEDS_CLONE.includes(this.dragZoneType)) {
-        const ghost = this.draggedItem.cloneNode(true);
-        ghost.classList.remove(
-          "is_dragging",
-          `drop_zone_${this.dragZoneType}`,
-          `drop_zone_color_${this.dragZoneColor}`,
-        );
-        const { width, height } = this.draggedItem.getBoundingClientRect();
-        Object.assign(ghost.style, {
-          border:    "none",
-          width:     `${width}px`,
-          height:    `${height}px`,
-          position:  "absolute",
-          top:      "-9999px",
-          left:     "-9999px",
-          boxSizing: "border-box",
-          zIndex:    "9999",
-        });
-        document.body.appendChild(ghost);
-        this.dragGhost = ghost;
-        event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
-      }
-      /* ---------------------------------------------------------------- */
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', this.draggedItemId);
     }
 
-    requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
+    setTimeout(() => {
+      event.target.style.opacity = '0.5';
+    }, 0);
   }
 
-  /* ---------------- DRAG ENTER ---------------- */
   handleDragEnter(event) {
     if (!this.draggedItem || event.target === this.draggedItem) return;
-    this.hasMultipleContainers
-      ? this.handleMultiContainerDragEnter(event)
-      : this.handleSingleContainerDragEnter(event);
+
+    if (this.hasMultipleContainers) {
+      this.handleMultiContainerDragEnter(event);
+    } else {
+      this.handleSingleContainerDragEnter(event);
+    }
   }
 
   handleSingleContainerDragEnter(event) {
-    const targetItem = event.target.closest(".pb_draggable_item");
-    // If we're entering a container directly or there's no target item
+    const targetItem = event.target.closest('.pb_draggable_item');
     if (!targetItem) return;
 
     const container = targetItem.parentNode;
-    const items     = Array.from(container.children);
-    const fromIdx   = items.indexOf(this.draggedItem);
-    const toIdx     = items.indexOf(targetItem);
+    const items = Array.from(container.children);
 
-    if (fromIdx > toIdx) {
+    const draggedIndex = items.indexOf(this.draggedItem);
+    const targetIndex = items.indexOf(targetItem);
+
+    if (draggedIndex > targetIndex) {
       container.insertBefore(this.draggedItem, targetItem);
     } else {
       container.insertBefore(this.draggedItem, targetItem.nextSibling);
@@ -146,113 +116,146 @@ export default class PbDraggable extends PbEnhancedElement {
 
   handleMultiContainerDragEnter(event) {
     const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
-    const targetItem      = event.target.closest(".pb_draggable_item");
+    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 last = targetContainer.querySelector(".pb_draggable_item:last-child");
-      last
-        ? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
-        : targetContainer.appendChild(this.draggedItem);
+      const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
+      if (lastItem) {
+        targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
+      } else {
+        targetContainer.appendChild(this.draggedItem);
+      }
       return;
     }
 
-    const items = Array.from(targetContainer.children);
-    this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
+    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 midY = targetItem.getBoundingClientRect().top +
-                 targetItem.getBoundingClientRect().height / 2;
+    const rect = targetItem.getBoundingClientRect();
+    const middleY = rect.top + rect.height / 2;
 
-    if (event.clientY < midY) {
-      targetContainer.insertBefore(this.draggedItem, targetItem);
+    if (event.clientY < middleY) {
+      container.insertBefore(this.draggedItem, targetItem);
     } else {
-      targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
+      container.insertBefore(this.draggedItem, targetItem.nextSibling);
     }
   }
 
-  /* ---------------- DRAG OVER ---------------- */
   handleDragOver(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.hasMultipleContainers
-      ? this.handleMultiContainerDragOver(event)
-      : this.handleSingleContainerDragOver(event);
+
+    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");
+    if (container) {
+      container.classList.add("active_container");
+    }
   }
 
   handleMultiContainerDragOver(event) {
-    const container = event.target.matches(DRAGGABLE_CONTAINER)
-      ? event.target
-      : event.target.closest(DRAGGABLE_CONTAINER);
-    if (!container) return;
-
-    this.setState({ activeContainer: container.id });
-    container.classList.add("active_container");
-
-    const last = container.querySelector(".pb_draggable_item:last-child");
-    if (!last || event.clientY > last.getBoundingClientRect().bottom) {
-      if (this.draggedItem && this.draggedItem.parentNode !== container) {
-        container.appendChild(this.draggedItem);
+    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);
+        }
       }
     }
   }
 
-  /* ---------------- DROP ---------------- */
   handleDrop(event) {
     event.preventDefault();
     event.stopPropagation();
 
-    const container = event.target.matches(DRAGGABLE_CONTAINER)
-      ? event.target
-      : event.target.closest(DRAGGABLE_CONTAINER);
+    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";
+    this.draggedItem.style.opacity = '1';
 
     // Handle empty containers
-    if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
+    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(this.element.querySelectorAll(".pb_draggable_item"))
-      .map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
-
-    container.dataset.reorderedItems = JSON.stringify(reorderedItems);
-    this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
-      detail: { reorderedItems, containerId: container.id },
+    const reorderedItems = Array.from(
+      this.element.querySelectorAll('.pb_draggable_item')
+    ).map(item => ({
+      id: item.id,
+      container: item.closest(DRAGGABLE_CONTAINER).id
     }));
 
-    this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
-    this.draggedItem   = null;
+    // 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;
   }
 
-  /* ---------------- DRAG END ---------------- */
   handleDragEnd(event) {
-    event.target.classList.remove(
-      "is_dragging",
-      `drop_zone_${this.dragZoneType}`,
-      `drop_zone_color_${this.dragZoneColor}`,
-    );
-    event.target.style.opacity = "1";
-
-    if (this.dragGhost) {
-      document.body.removeChild(this.dragGhost);
-      this.dragGhost = null;
-    }
-
-    this.setState({ isDragging: "", activeContainer: "" });
+    event.target.classList.remove("is_dragging");
+    event.target.style.opacity = '1';
 
-    this.element.querySelectorAll(DRAGGABLE_CONTAINER)
-      .forEach(c => c.classList.remove("active_container"));
+    this.setState({
+      isDragging: "",
+      activeContainer: ""
+    });
 
-    this.draggedItem   = null;
+    this.draggedItem = null;
     this.draggedItemId = null;
+
+    this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => {
+      container.classList.remove("active_container");
+    });
   }
 }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -41,11 +41,6 @@
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }
-      &:focus-within {
-        box-shadow: 0px 0px 0 1px $primary !important;
-        outline: unset;
-        transition: box-shadow 0.15s ease-in-out;
-      }
 
       &[class*="_select_only"] {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -36,6 +36,7 @@ type DropdownProps = {
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     separators?: boolean;
+    triggerRef?: any;
     variant?: "default" | "subtle";
 };
 
@@ -64,6 +65,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         onSelect,
         options,
         separators = true,
+        triggerRef,
         variant = "default",
     } = props;
 
@@ -89,7 +91,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
 
     const dropdownRef = useRef(null);
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
@@ -97,7 +99,15 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         separateChildComponents(children);
 
     useEffect(() => {
-     // Handle clicks outside the dropdown
+        // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
+        //Only needed for when useDropdown hook used with external trigger
+        if (triggerRef?.current) {
+            const parentElement = triggerRef.current.parentNode;
+            if (parentElement) {
+                parentElement.style.position = 'relative';
+            }
+        }
+        // Handle clicks outside the dropdown
         const handleClick = handleClickOutside({
             inputWrapperRef,
             dropdownContainerRef,
@@ -157,7 +167,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     };
 
     const handleWrapperClick = () => {
-        autocomplete && inputRef?.current?.focus();
+        autocomplete && inputRef.current.focus();
         toggleDropdown();
     };
 
@@ -192,7 +202,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             {...htmlProps}
             className={classes}
             id={id}
-            style={{position: "relative"}}
+            style={triggerRef ? { position: "absolute" } : { position: "relative" }}
         >
             <DropdownContext.Provider
                 value={{
@@ -215,7 +225,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     setIsDropDownClosed,
                     setIsInputFocused,
                     setSelected,
-                    toggleDropdown
+                    toggleDropdown,
+                    triggerRef
                 }}
             >
                 {label &&

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,4 +1,4 @@
-<%
+<% 
   options = [
     { label: 'United States', value: 'United States', id: 'us' },
     { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,7 +6,4 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
-  options: options
-}) %>
+<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -1,39 +1,86 @@
 import React from 'react'
 
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 
   const options = [
     {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
     },
     {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧", 
-      id: "gb"
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Away"
     },
     {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
+      label: "Carlos Lima",
+      value: "Carlos Lima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
     }
-  ]
+  ];
+
 
   return (
   <div>
     <Dropdown autocomplete
         options={options}
         {...props}
-    /> 
+    >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
   </div>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_with_subcomponents.jsx → _dropdown_with_autocomplete_and_custom_display.jsx}

@@ -1,13 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-import Dropdown from '../_dropdown'
+import Dropdown from '../../pb_dropdown/_dropdown'
 import Badge from '../../pb_badge/_badge'
-import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
 
 
-const DropdownWithAutocompleteWithSubcomponents = (props) => {
+const DropdownWithAutocompleteAndCustomDisplay = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
   const options = [
     {
       label: "Jasper Furniss",
@@ -43,21 +45,34 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     }
   ];
 
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+        )
+      }
+    </>
+    )
+  };
 
   return (
   <div>
     <Dropdown autocomplete
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >
+        <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <User
                     align="left"
@@ -70,7 +85,6 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
               </FlexItem>
               <FlexItem>
                 <Badge
-                    dark
                     rounded
                     text={option.status}
                     variant={`${
@@ -82,7 +96,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
                     }`}
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
     </Dropdown>
@@ -90,4 +104,4 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
   )
 }
 
-export default  DropdownWithAutocompleteWithSubcomponents
+export default  DropdownWithAutocompleteAndCustomDisplay