playbook_ui 14.18.0.pre.alpha.play2034zonesandcolors7407 → 14.18.0.pre.alpha.play2042addturbosupporttopopoverkit7423

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_filter/docs/_filter_within_turbo_frames.html.erb

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_within_trubo_frames",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { append_to: "parent"  },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md

@@ -0,0 +1 @@
+By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -11,6 +11,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -0,0 +1,46 @@
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center",
+    margin_bottom: "md"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "append-to-popover-1"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "append-to-popover-1",
+        tooltip_id: "append-to-tooltip-1",
+        offset: true,
+        position: "top",
+        append_to: "parent",
+    }) do %>
+        I'm a popover. I have been appended to my parent element.
+    <% end %>
+<% end %>
+
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "append-to-popover-2"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "append-to-popover-2",
+        tooltip_id: "append-to-tooltip-2",
+        offset: true,
+        position: "top",
+        append_to: ".kit-show-wrapper",
+    }) do %>
+        I'm a popover. I have been appended to the .kit-show-wrapper.
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md

@@ -0,0 +1 @@
+By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -6,6 +6,7 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
+    - popover_append_to: Append To
 
   react:
     - popover_default: Default

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -13,7 +13,15 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   moveTooltip() {
-    document.querySelector('body').appendChild(this.tooltip)
+    let container: HTMLElement | null;
+
+    if (this.appendTo === "parent") {
+      container = this.element.parentElement;
+    } else if (this.appendTo) {
+      container = document.querySelector(this.appendTo);
+    }
+
+    (container || document.body).appendChild(this.tooltip);
   }
 
   connect() {
@@ -108,4 +116,8 @@ export default class PbPopover extends PbEnhancedElement {
   get closeOnClick() {
     return this.element.dataset.pbPopoverCloseOnClick
   }
+
+  get appendTo() {
+    return this.element.dataset.pbPopoverAppendTo;
+  }
 }

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -3,6 +3,7 @@
 module Playbook
   module PbPopover
     class Popover < Playbook::KitBase
+      prop :append_to, type: Playbook::Props::String, default: "body"
       prop :position, type: Playbook::Props::Enum,
                       values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                       default: "left"
@@ -47,6 +48,7 @@ module Playbook
 
       def data
         Hash(values[:data]).merge(
+          pb_popover_append_to: append_to,
           pb_popover_kit: true,
           pb_popover_position: position,
           pb_popover_trigger_element_id: trigger_element_id,

data/dist/chunks/{_typeahead-CvkGr9xV.js → _typeahead-COZRQUuU.js}

@@ -1,4 +1,4 @@
-import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-yWHJ_8mm.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const targetItem=newItems.find((item=>item.id===targetId));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return state}if(dragId===targetId){return state}const draggedIndex=newItems.findIndex((item=>item.id===dragId));const targetIndex=newItems.findIndex((item=>item.id===targetId));if(draggedIndex===-1||targetIndex===-1){return state}newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>{const context=useContext(DragContext);if(context===void 0){throw new Error("DraggableContext must be used within a DraggableProvider")}return context};const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);const initialItemsRef=useRef(initialItems);const[isDragging,setIsDragging]=useState(false);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems});initialItemsRef.current=initialItems}),[initialItems]);useEffect((()=>{if(onReorder){onReorder(state.items)}}),[state.items,onReorder]);const handleDragStart=(id,container)=>{setIsDragging(true);dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(!isDragging||container!==state.activeContainer)return;if(state.dragData.id===id)return;const draggedItem=state.items.find((item=>item.id===state.dragData.id));const targetItem=state.items.find((item=>item.id===id));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return}dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{setIsDragging(false);dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const handleDrop=container=>{const draggedItem=state.items.find((item=>item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"CHANGE_CATEGORY",payload:{itemId:state.dragData.id,container:container}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});setIsDragging(false);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();e.stopPropagation();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection,handleDragStart,handleDragEnter,handleDragEnd,handleDrop,handleDragOver]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
+import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-ClNg0TLS.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const targetItem=newItems.find((item=>item.id===targetId));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return state}if(dragId===targetId){return state}const draggedIndex=newItems.findIndex((item=>item.id===dragId));const targetIndex=newItems.findIndex((item=>item.id===targetId));if(draggedIndex===-1||targetIndex===-1){return state}newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>{const context=useContext(DragContext);if(context===void 0){throw new Error("DraggableContext must be used within a DraggableProvider")}return context};const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);const initialItemsRef=useRef(initialItems);const[isDragging,setIsDragging]=useState(false);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems});initialItemsRef.current=initialItems}),[initialItems]);useEffect((()=>{if(onReorder){onReorder(state.items)}}),[state.items,onReorder]);const handleDragStart=(id,container)=>{setIsDragging(true);dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(!isDragging||container!==state.activeContainer)return;if(state.dragData.id===id)return;const draggedItem=state.items.find((item=>item.id===state.dragData.id));const targetItem=state.items.find((item=>item.id===id));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return}dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{setIsDragging(false);dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const handleDrop=container=>{const draggedItem=state.items.find((item=>item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"CHANGE_CATEGORY",payload:{itemId:state.dragData.id,container:container}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});setIsDragging(false);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();e.stopPropagation();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection,handleDragStart,handleDragEnter,handleDragEnd,handleDrop,handleDragOver]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see