playbook_ui 15.7.0.pre.rc.2 → 15.7.0.pre.rc.3

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

@@ -28,6 +28,9 @@ export default class PbDropdown extends PbEnhancedElement {
   clearBtn = null;
 
   connect() {
+    // Store instance on element for DatePicker sync
+    this.element._pbDropdownInstance = this;
+    
     this.keyboardHandler = new PbDropdownKeyboard(this);
     this.isMultiSelect = this.element.dataset.pbDropdownMultiSelect === "true";
     this.formPillProps = this.element.dataset.formPillProps
@@ -252,6 +255,67 @@ export default class PbDropdown extends PbEnhancedElement {
         const selectedLabel = JSON.parse(value).label;
         triggerElement.textContent = selectedLabel;
         this.emitSelectionChange();
+        
+        // Handle quickpick variant: populate start/end date hidden inputs
+        const optionData = JSON.parse(value);
+        const startDateId = this.element.dataset.startDateId;
+        const endDateId = this.element.dataset.endDateId;
+        const controlsStartId = this.element.dataset.controlsStartId;
+        const controlsEndId = this.element.dataset.controlsEndId;
+        
+        if (optionData.formatted_start_date && optionData.formatted_end_date) {
+          // Populate date inputs when option has date fields
+          if (startDateId) {
+            const startDateInput = document.getElementById(startDateId);
+            if (startDateInput) startDateInput.value = optionData.formatted_start_date;
+          }
+          
+          if (endDateId) {
+            const endDateInput = document.getElementById(endDateId);
+            if (endDateInput) endDateInput.value = optionData.formatted_end_date;
+          }
+          
+          // Sync with DatePickers if controlsStartId/controlsEndId are present
+          if (controlsStartId) {
+            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            if (startPicker) {
+              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+            }
+          }
+        } else if (startDateId || endDateId) {
+          // Clear date inputs when option doesn't have date fields (e.g., blank selection)
+          if (startDateId) {
+            const startDateInput = document.getElementById(startDateId);
+            if (startDateInput) startDateInput.value = "";
+          }
+          
+          if (endDateId) {
+            const endDateInput = document.getElementById(endDateId);
+            if (endDateInput) endDateInput.value = "";
+          }
+          
+          // Clear DatePickers as well
+          if (controlsStartId) {
+            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            if (startPicker) {
+              startPicker.clear();
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.clear();
+            }
+          }
+        }
       }
       if (customDisplayElement) {
         triggerElement.textContent = "";
@@ -432,9 +496,50 @@ export default class PbDropdown extends PbEnhancedElement {
       if (!selectedOption) return;
 
       selectedOption.classList.add("pb_dropdown_option_selected");
-      this.setTriggerElementText(
-        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
-      );
+      const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
+      this.setTriggerElementText(optionData.label);
+      
+      // Handle quickpick variant: populate start/end date hidden inputs and sync DatePickers
+      if (optionData.formatted_start_date && optionData.formatted_end_date) {
+        const startDateId = this.element.dataset.startDateId;
+        const endDateId = this.element.dataset.endDateId;
+        const controlsStartId = this.element.dataset.controlsStartId;
+        const controlsEndId = this.element.dataset.controlsEndId;
+        
+        if (startDateId) {
+          const startDateInput = document.getElementById(startDateId);
+          if (startDateInput) startDateInput.value = optionData.formatted_start_date;
+        }
+        
+        if (endDateId) {
+          const endDateInput = document.getElementById(endDateId);
+          if (endDateInput) endDateInput.value = optionData.formatted_end_date;
+        }
+        
+        // Sync with DatePickers - retry with delays to ensure DatePickers are initialized
+        const syncDatePickers = () => {
+          if (controlsStartId) {
+            const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+            if (startPicker) {
+              startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+            }
+          }
+          
+          if (controlsEndId) {
+            const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+            if (endPicker) {
+              endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+            }
+          }
+        };
+        
+        // Try immediately
+        syncDatePickers();
+        
+        // Retry after short delay in case DatePickers aren't ready yet
+        setTimeout(syncDatePickers, 100);
+        setTimeout(syncDatePickers, 300);
+      }
     }
   }
 
@@ -571,6 +676,37 @@ export default class PbDropdown extends PbEnhancedElement {
     if (customDisplay) {
       customDisplay.style.display = "none";
     }
+    
+    // Clear quickpick hidden inputs
+    const startDateId = this.element.dataset.startDateId;
+    const endDateId = this.element.dataset.endDateId;
+    const controlsStartId = this.element.dataset.controlsStartId;
+    const controlsEndId = this.element.dataset.controlsEndId;
+    
+    if (startDateId) {
+      const startDateInput = document.getElementById(startDateId);
+      if (startDateInput) startDateInput.value = "";
+    }
+    if (endDateId) {
+      const endDateInput = document.getElementById(endDateId);
+      if (endDateInput) endDateInput.value = "";
+    }
+    
+    // Clear linked DatePickers if controlsStartId/controlsEndId are present
+    if (controlsStartId) {
+      const startPicker = document.querySelector(`#${controlsStartId}`)?._flatpickr;
+      if (startPicker) {
+        startPicker.clear();
+      }
+    }
+    
+    if (controlsEndId) {
+      const endPicker = document.querySelector(`#${controlsEndId}`)?._flatpickr;
+      if (endPicker) {
+        endPicker.clear();
+      }
+    }
+    
     this.resetDropdownValue();
     this.updatePills();
     this.updateClearButton();
@@ -578,6 +714,38 @@ export default class PbDropdown extends PbEnhancedElement {
     this.emitSelectionChange();
   }
 
+  // Method for DatePicker sync - only clears the dropdown, not the DatePickers
+  clearSelected() {
+    // Only clear if this is a single-select quickpick variant
+    if (this.element.dataset.pbDropdownVariant !== "quickpick" || this.isMultiSelect) {
+      return;
+    }
+    
+    const customDisplay = this.element.querySelector(
+      "#dropdown_trigger_custom_display"
+    );
+    if (customDisplay) {
+      customDisplay.style.display = "none";
+    }
+    
+    // Clear quickpick hidden inputs only (not the DatePickers)
+    const startDateId = this.element.dataset.startDateId;
+    const endDateId = this.element.dataset.endDateId;
+    
+    if (startDateId) {
+      const startDateInput = document.getElementById(startDateId);
+      if (startDateInput) startDateInput.value = "";
+    }
+    if (endDateId) {
+      const endDateInput = document.getElementById(endDateId);
+      if (endDateInput) endDateInput.value = "";
+    }
+    
+    this.resetDropdownValue();
+    this.updateClearButton();
+    this.emitSelectionChange();
+  }
+
   syncHiddenInputs() {
     if (!this.isMultiSelect) return;
     this.element

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    module QuickpickHelper
+      class << self
+        def get_quickpick_options(range_ends_today: false)
+          today = Date.today
+          yesterday = today - 1.day
+
+          this_week_start_date = first_day_of_week(today)
+          this_week_end_date = range_ends_today ? today : last_day_of_week(today)
+          last_week_start_date = previous_week_start_date(today)
+          last_week_end_date = previous_week_end_date(today)
+
+          this_month_start_date = today.beginning_of_month
+          this_month_end_date = range_ends_today ? today : today.end_of_month
+          last_month_start_date = (today - 1.month).beginning_of_month
+          last_month_end_date = (today - 1.month).end_of_month
+
+          this_quarter_start_date = today.beginning_of_quarter
+          this_quarter_end_date = range_ends_today ? today : today.end_of_quarter
+          last_quarter_start_date = (today - 3.months).beginning_of_quarter
+          last_quarter_end_date = (today - 3.months).end_of_quarter
+
+          this_year_start_date = today.beginning_of_year
+          this_year_end_date = range_ends_today ? today : today.end_of_year
+          last_year_start_date = (today - 1.year).beginning_of_year
+          last_year_end_date = (today - 1.year).end_of_year
+
+          [
+            { id: "quickpick-today", label: "Today", value: [today.to_s, today.to_s], formatted_start_date: format_date(today), formatted_end_date: format_date(today) },
+            { id: "quickpick-yesterday", label: "Yesterday", value: [yesterday.to_s, yesterday.to_s], formatted_start_date: format_date(yesterday), formatted_end_date: format_date(yesterday) },
+            { id: "quickpick-this-week", label: "This Week", value: [this_week_start_date.to_s, this_week_end_date.to_s], formatted_start_date: format_date(this_week_start_date), formatted_end_date: format_date(this_week_end_date) },
+            { id: "quickpick-this-month", label: "This Month", value: [this_month_start_date.to_s, this_month_end_date.to_s], formatted_start_date: format_date(this_month_start_date), formatted_end_date: format_date(this_month_end_date) },
+            { id: "quickpick-this-quarter", label: "This Quarter", value: [this_quarter_start_date.to_s, this_quarter_end_date.to_s], formatted_start_date: format_date(this_quarter_start_date), formatted_end_date: format_date(this_quarter_end_date) },
+            { id: "quickpick-this-year", label: "This Year", value: [this_year_start_date.to_s, this_year_end_date.to_s], formatted_start_date: format_date(this_year_start_date), formatted_end_date: format_date(this_year_end_date) },
+            { id: "quickpick-last-week", label: "Last Week", value: [last_week_start_date.to_s, last_week_end_date.to_s], formatted_start_date: format_date(last_week_start_date), formatted_end_date: format_date(last_week_end_date) },
+            { id: "quickpick-last-month", label: "Last Month", value: [last_month_start_date.to_s, last_month_end_date.to_s], formatted_start_date: format_date(last_month_start_date), formatted_end_date: format_date(last_month_end_date) },
+            { id: "quickpick-last-quarter", label: "Last Quarter", value: [last_quarter_start_date.to_s, last_quarter_end_date.to_s], formatted_start_date: format_date(last_quarter_start_date), formatted_end_date: format_date(last_quarter_end_date) },
+            { id: "quickpick-last-year", label: "Last Year", value: [last_year_start_date.to_s, last_year_end_date.to_s], formatted_start_date: format_date(last_year_start_date), formatted_end_date: format_date(last_year_end_date) },
+          ]
+        end
+
+      private
+
+        def format_date(date)
+          date.strftime("%m/%d/%Y")
+        end
+
+        def format_date_range(start_date, end_date)
+          "#{format_date(start_date)} - #{format_date(end_date)}"
+        end
+
+        def first_day_of_week(date)
+          # Monday as first day of week
+          date.beginning_of_week(:monday)
+        end
+
+        def last_day_of_week(date)
+          # Sunday as last day of week
+          date.end_of_week(:monday)
+        end
+
+        def previous_week_start_date(date)
+          first_day_of_week(date) - 1.week
+        end
+
+        def previous_week_end_date(date)
+          last_day_of_week(date) - 1.week
+        end
+      end
+    end
+  end
+end

data/dist/chunks/{_typeahead-CHwm9MTE.js → _typeahead-CbjBmIDu.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,useEffect,useMemo,useContext,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{c as getDefaultExportFromCjs,S as filter,T as omit,n as noop$2,u as useCollapsible,U as get,g as getAllIcons,V as createPopper,W as uniqueId,X as flip$2,Y as offset$2,Z as shift$2,$ as arrow$3,a0 as computePosition$1,a1 as createCoords$1,a2 as round$1,a3 as max$1,a4 as min$1,a5 as rectToClientRect$1,h as colors$1,k as highchartsTheme,a6 as merge,l as highchartsDarkTheme,N as typography,a7 as cloneDeep,i as isEmpty$1,a8 as isString}from"./lib-Cugvy62C.js";import{TrixEditor}from"react-trix";import Trix from"trix";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:"",originId:""},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 draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}case"REORDER_ITEMS_CROSS_CONTAINER":{const{dragId:dragId,targetId:targetId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));if(!draggedItem)return state;const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item&&item.id===targetId));if(draggedIndex===-1||targetIndex===-1)return state;const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,updatedItem);return{...state,items:newItems}}case"MOVE_TO_CONTAINER_END":{const{dragId:dragId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));if(!draggedItem)return state;const draggedIndex=newItems.indexOf(draggedItem);if(draggedIndex===-1)return state;const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);const lastIndexInContainer=newItems.map((item=>item&&item.container)).lastIndexOf(newContainer);if(lastIndexInContainer===-1){newItems.push(updatedItem)}else{newItems.splice(lastIndexInContainer+1,0,updatedItem)}return{...state,items:newItems}}case"RESET_DRAG_CONTAINER":{const{itemId:itemId,originalContainer:originalContainer,originalIndex:originalIndex}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===itemId));if(!draggedItem)return state;const currentIndex=newItems.indexOf(draggedItem);newItems.splice(currentIndex,1);const restoredItem={...draggedItem,container:originalContainer};if(originalIndex!==void 0&&originalIndex>=0){newItems.splice(originalIndex,0,restoredItem)}else{newItems.push(restoredItem)}return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);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"},providerId:providerId="default",enableCrossContainerPreview:enableCrossContainerPreview=false})=>{const[state,dispatch]=useReducer(reducer,initialState);const dragStateRef=useRef({isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false});const stateRef=useRef(state);useEffect((()=>{stateRef.current=state}),[state]);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})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);useEffect((()=>{if(!enableCrossContainerPreview)return;const handleGlobalDragOver=e=>{if(dragStateRef.current.isDragging){e.preventDefault()}};const handleGlobalDrop=e=>{if(!dragStateRef.current.isDragging)return;if(dragStateRef.current.dropOccurred)return;e.preventDefault();const originalContainer=dragStateRef.current.originalContainer;dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:originalContainer,originalIndex:dragStateRef.current.originalIndex}});dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}};const handleGlobalMouseUp=()=>{if(dragStateRef.current.isDragging){setTimeout((()=>{const currentContainer=dragStateRef.current.currentContainer;if(dragStateRef.current.isDragging&&!dragStateRef.current.dropOccurred){if(currentContainer&&currentContainer!==dragStateRef.current.originalContainer){if(onDrop){const draggedItem=stateRef.current.items.find((item=>item&&item.id===dragStateRef.current.draggedItemId));const updatedItem=draggedItem?{...draggedItem,container:currentContainer}:null;const itemsInContainer=stateRef.current.items.filter((item=>item&&item.container===currentContainer));const indexInContainer=itemsInContainer.findIndex((item=>item&&item.id===dragStateRef.current.draggedItemId));const itemAbove=indexInContainer>0?itemsInContainer[indexInContainer-1]:null;const itemBelow=indexInContainer<itemsInContainer.length-1?itemsInContainer[indexInContainer+1]:null;onDrop(dragStateRef.current.draggedItemId,currentContainer,dragStateRef.current.originalContainer,updatedItem,itemAbove,itemBelow)}}else{dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:dragStateRef.current.originalContainer,originalIndex:dragStateRef.current.originalIndex}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}}}),50)}};const handleDragLeave=e=>{if(!e.relatedTarget&&dragStateRef.current.isDragging&&!dragStateRef.current.dropOccurred){dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:dragStateRef.current.originalContainer,originalIndex:dragStateRef.current.originalIndex}});dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}}};document.addEventListener("dragover",handleGlobalDragOver);document.addEventListener("drop",handleGlobalDrop);document.addEventListener("dragleave",handleDragLeave);document.addEventListener("mouseup",handleGlobalMouseUp);document.addEventListener("pointerup",handleGlobalMouseUp);return()=>{document.removeEventListener("dragover",handleGlobalDragOver);document.removeEventListener("drop",handleGlobalDrop);document.removeEventListener("dragleave",handleDragLeave);document.removeEventListener("mouseup",handleGlobalMouseUp);document.removeEventListener("pointerup",handleGlobalMouseUp)}}),[enableCrossContainerPreview]);const prevIsDraggingRef=useRef(state.isDragging);useEffect((()=>{if(!enableCrossContainerPreview)return;const wasDragging=prevIsDraggingRef.current;const isNowDragging=state.isDragging;if(wasDragging&&!isNowDragging){if(!dragStateRef.current.dropOccurred&&dragStateRef.current.draggedItemId){dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:dragStateRef.current.originalContainer,originalIndex:dragStateRef.current.originalIndex}})}dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}}prevIsDraggingRef.current=isNowDragging}),[state.isDragging,enableCrossContainerPreview]);const handleDragStart=(id,container)=>{if(enableCrossContainerPreview){const originalIndex=state.items.findIndex((item=>item&&item.id===id));dragStateRef.current={isDragging:true,draggedItemId:id,originalContainer:container,originalIndex:originalIndex,currentContainer:container,dropOccurred:false}}dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container,originId:providerId}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.originId!==providerId)return;if(state.dragData.id!==id){if(enableCrossContainerPreview){const draggedItem=state.items.find((item=>item&&item.id===state.dragData.id));const currentContainer=draggedItem&&draggedItem.container?draggedItem.container:state.dragData.initialGroup;const isCrossContainer=currentContainer!==container&&(currentContainer!==void 0||container!==void 0);if(isCrossContainer){dispatch({type:"REORDER_ITEMS_CROSS_CONTAINER",payload:{dragId:state.dragData.id,targetId:id,newContainer:container}});if(enableCrossContainerPreview){dragStateRef.current.currentContainer=container}}else{dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}})}}else{dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}})}const newInitialGroup=enableCrossContainerPreview?state.dragData.initialGroup:container;dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:newInitialGroup,originId:providerId}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;if(enableCrossContainerPreview&&!dragStateRef.current.dropOccurred&&draggedItemId&&originalContainer){dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:draggedItemId,originalContainer:originalContainer,originalIndex:dragStateRef.current.originalIndex}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});if(enableCrossContainerPreview&&dragStateRef.current.dropOccurred){return}if(onDragEnd){if(!enableCrossContainerPreview){onDragEnd()}else{const draggedItem=stateRef.current.items.find((item=>item&&item.id===draggedItemId));const finalContainer=draggedItem?draggedItem.container:originalContainer;const itemsInContainer=stateRef.current.items.filter((item=>item&&item.container===finalContainer));const indexInContainer=itemsInContainer.findIndex((item=>item&&item.id===draggedItemId));const itemAbove=indexInContainer>0?itemsInContainer[indexInContainer-1]:null;const itemBelow=indexInContainer<itemsInContainer.length-1?itemsInContainer[indexInContainer+1]:null;onDragEnd(draggedItemId,finalContainer,originalContainer,itemAbove,itemBelow)}}};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{if(state.dragData.originId!==providerId)return;const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;if(enableCrossContainerPreview){dragStateRef.current.dropOccurred=true}const isCrossContainer=container!==originalContainer;let callbackData=null;if(enableCrossContainerPreview){const draggedItem=stateRef.current.items.find((item=>item&&item.id===draggedItemId));const updatedItem=draggedItem?{...draggedItem,container:container}:null;const itemsInContainer=stateRef.current.items.filter((item=>item&&item.container===container));const indexInContainer=itemsInContainer.findIndex((item=>item&&item.id===draggedItemId));const itemAbove=indexInContainer>0?itemsInContainer[indexInContainer-1]:null;const itemBelow=indexInContainer<itemsInContainer.length-1?itemsInContainer[indexInContainer+1]:null;callbackData={updatedItem:updatedItem,itemAbove:itemAbove,itemBelow:itemBelow}}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});changeCategory(state.dragData.id,container);if(onDrop){if(!enableCrossContainerPreview){onDrop(container)}else{onDrop(draggedItemId,container,originalContainer,callbackData.updatedItem,callbackData.itemAbove,callbackData.itemBelow)}}if(enableCrossContainerPreview&&isCrossContainer&&onDragEnd&&callbackData){onDragEnd(draggedItemId,container,originalContainer,callbackData.itemAbove,callbackData.itemBelow)}};const handleDragOver=(e,container)=>{if(state.dragData.originId!==providerId)return;e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(enableCrossContainerPreview&&state.dragData.id){const draggedItem=state.items.find((item=>item&&item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"MOVE_TO_CONTAINER_END",payload:{dragId:state.dragData.id,newContainer:container}});dragStateRef.current.currentContainer=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]);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,useEffect,useMemo,useContext,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{c as getDefaultExportFromCjs,S as filter,T as omit,n as noop$2,u as useCollapsible,U as get,g as getAllIcons,V as createPopper,W as uniqueId,X as flip$2,Y as offset$2,Z as shift$2,$ as arrow$3,a0 as computePosition$1,a1 as createCoords$1,a2 as round$1,a3 as max$1,a4 as min$1,a5 as rectToClientRect$1,h as colors$1,k as highchartsTheme,a6 as merge,l as highchartsDarkTheme,N as typography,a7 as cloneDeep,i as isEmpty$1,a8 as isString}from"./lib-DxDBrGZX.js";import{TrixEditor}from"react-trix";import Trix from"trix";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:"",originId:""},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 draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}case"REORDER_ITEMS_CROSS_CONTAINER":{const{dragId:dragId,targetId:targetId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));if(!draggedItem)return state;const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item&&item.id===targetId));if(draggedIndex===-1||targetIndex===-1)return state;const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,updatedItem);return{...state,items:newItems}}case"MOVE_TO_CONTAINER_END":{const{dragId:dragId,newContainer:newContainer}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===dragId));if(!draggedItem)return state;const draggedIndex=newItems.indexOf(draggedItem);if(draggedIndex===-1)return state;const updatedItem={...draggedItem,container:newContainer};newItems.splice(draggedIndex,1);const lastIndexInContainer=newItems.map((item=>item&&item.container)).lastIndexOf(newContainer);if(lastIndexInContainer===-1){newItems.push(updatedItem)}else{newItems.splice(lastIndexInContainer+1,0,updatedItem)}return{...state,items:newItems}}case"RESET_DRAG_CONTAINER":{const{itemId:itemId,originalContainer:originalContainer,originalIndex:originalIndex}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item&&item.id===itemId));if(!draggedItem)return state;const currentIndex=newItems.indexOf(draggedItem);newItems.splice(currentIndex,1);const restoredItem={...draggedItem,container:originalContainer};if(originalIndex!==void 0&&originalIndex>=0){newItems.splice(originalIndex,0,restoredItem)}else{newItems.push(restoredItem)}return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);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"},providerId:providerId="default",enableCrossContainerPreview:enableCrossContainerPreview=false})=>{const[state,dispatch]=useReducer(reducer,initialState);const dragStateRef=useRef({isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false});const stateRef=useRef(state);useEffect((()=>{stateRef.current=state}),[state]);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})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);useEffect((()=>{if(!enableCrossContainerPreview)return;const handleGlobalDragOver=e=>{if(dragStateRef.current.isDragging){e.preventDefault()}};const handleGlobalDrop=e=>{if(!dragStateRef.current.isDragging)return;if(dragStateRef.current.dropOccurred)return;e.preventDefault();const originalContainer=dragStateRef.current.originalContainer;dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:originalContainer,originalIndex:dragStateRef.current.originalIndex}});dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}};const handleGlobalMouseUp=()=>{if(dragStateRef.current.isDragging){setTimeout((()=>{const currentContainer=dragStateRef.current.currentContainer;if(dragStateRef.current.isDragging&&!dragStateRef.current.dropOccurred){if(currentContainer&&currentContainer!==dragStateRef.current.originalContainer){if(onDrop){const draggedItem=stateRef.current.items.find((item=>item&&item.id===dragStateRef.current.draggedItemId));const updatedItem=draggedItem?{...draggedItem,container:currentContainer}:null;const itemsInContainer=stateRef.current.items.filter((item=>item&&item.container===currentContainer));const indexInContainer=itemsInContainer.findIndex((item=>item&&item.id===dragStateRef.current.draggedItemId));const itemAbove=indexInContainer>0?itemsInContainer[indexInContainer-1]:null;const itemBelow=indexInContainer<itemsInContainer.length-1?itemsInContainer[indexInContainer+1]:null;onDrop(dragStateRef.current.draggedItemId,currentContainer,dragStateRef.current.originalContainer,updatedItem,itemAbove,itemBelow)}}else{dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:dragStateRef.current.originalContainer,originalIndex:dragStateRef.current.originalIndex}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}}}),50)}};const handleDragLeave=e=>{if(!e.relatedTarget&&dragStateRef.current.isDragging&&!dragStateRef.current.dropOccurred){dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:dragStateRef.current.originalContainer,originalIndex:dragStateRef.current.originalIndex}});dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}}};document.addEventListener("dragover",handleGlobalDragOver);document.addEventListener("drop",handleGlobalDrop);document.addEventListener("dragleave",handleDragLeave);document.addEventListener("mouseup",handleGlobalMouseUp);document.addEventListener("pointerup",handleGlobalMouseUp);return()=>{document.removeEventListener("dragover",handleGlobalDragOver);document.removeEventListener("drop",handleGlobalDrop);document.removeEventListener("dragleave",handleDragLeave);document.removeEventListener("mouseup",handleGlobalMouseUp);document.removeEventListener("pointerup",handleGlobalMouseUp)}}),[enableCrossContainerPreview]);const prevIsDraggingRef=useRef(state.isDragging);useEffect((()=>{if(!enableCrossContainerPreview)return;const wasDragging=prevIsDraggingRef.current;const isNowDragging=state.isDragging;if(wasDragging&&!isNowDragging){if(!dragStateRef.current.dropOccurred&&dragStateRef.current.draggedItemId){dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:dragStateRef.current.draggedItemId,originalContainer:dragStateRef.current.originalContainer,originalIndex:dragStateRef.current.originalIndex}})}dragStateRef.current={isDragging:false,draggedItemId:"",originalContainer:"",originalIndex:-1,currentContainer:"",dropOccurred:false}}prevIsDraggingRef.current=isNowDragging}),[state.isDragging,enableCrossContainerPreview]);const handleDragStart=(id,container)=>{if(enableCrossContainerPreview){const originalIndex=state.items.findIndex((item=>item&&item.id===id));dragStateRef.current={isDragging:true,draggedItemId:id,originalContainer:container,originalIndex:originalIndex,currentContainer:container,dropOccurred:false}}dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container,originId:providerId}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.originId!==providerId)return;if(state.dragData.id!==id){if(enableCrossContainerPreview){const draggedItem=state.items.find((item=>item&&item.id===state.dragData.id));const currentContainer=draggedItem&&draggedItem.container?draggedItem.container:state.dragData.initialGroup;const isCrossContainer=currentContainer!==container&&(currentContainer!==void 0||container!==void 0);if(isCrossContainer){dispatch({type:"REORDER_ITEMS_CROSS_CONTAINER",payload:{dragId:state.dragData.id,targetId:id,newContainer:container}});if(enableCrossContainerPreview){dragStateRef.current.currentContainer=container}}else{dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}})}}else{dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}})}const newInitialGroup=enableCrossContainerPreview?state.dragData.initialGroup:container;dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:newInitialGroup,originId:providerId}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;if(enableCrossContainerPreview&&!dragStateRef.current.dropOccurred&&draggedItemId&&originalContainer){dispatch({type:"RESET_DRAG_CONTAINER",payload:{itemId:draggedItemId,originalContainer:originalContainer,originalIndex:dragStateRef.current.originalIndex}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});if(enableCrossContainerPreview&&dragStateRef.current.dropOccurred){return}if(onDragEnd){if(!enableCrossContainerPreview){onDragEnd()}else{const draggedItem=stateRef.current.items.find((item=>item&&item.id===draggedItemId));const finalContainer=draggedItem?draggedItem.container:originalContainer;const itemsInContainer=stateRef.current.items.filter((item=>item&&item.container===finalContainer));const indexInContainer=itemsInContainer.findIndex((item=>item&&item.id===draggedItemId));const itemAbove=indexInContainer>0?itemsInContainer[indexInContainer-1]:null;const itemBelow=indexInContainer<itemsInContainer.length-1?itemsInContainer[indexInContainer+1]:null;onDragEnd(draggedItemId,finalContainer,originalContainer,itemAbove,itemBelow)}}};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{if(state.dragData.originId!==providerId)return;const draggedItemId=state.dragData.id;const originalContainer=state.dragData.initialGroup;if(enableCrossContainerPreview){dragStateRef.current.dropOccurred=true}const isCrossContainer=container!==originalContainer;let callbackData=null;if(enableCrossContainerPreview){const draggedItem=stateRef.current.items.find((item=>item&&item.id===draggedItemId));const updatedItem=draggedItem?{...draggedItem,container:container}:null;const itemsInContainer=stateRef.current.items.filter((item=>item&&item.container===container));const indexInContainer=itemsInContainer.findIndex((item=>item&&item.id===draggedItemId));const itemAbove=indexInContainer>0?itemsInContainer[indexInContainer-1]:null;const itemBelow=indexInContainer<itemsInContainer.length-1?itemsInContainer[indexInContainer+1]:null;callbackData={updatedItem:updatedItem,itemAbove:itemAbove,itemBelow:itemBelow}}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});dispatch({type:"SET_DRAG_DATA",payload:{id:"",initialGroup:"",originId:""}});changeCategory(state.dragData.id,container);if(onDrop){if(!enableCrossContainerPreview){onDrop(container)}else{onDrop(draggedItemId,container,originalContainer,callbackData.updatedItem,callbackData.itemAbove,callbackData.itemBelow)}}if(enableCrossContainerPreview&&isCrossContainer&&onDragEnd&&callbackData){onDragEnd(draggedItemId,container,originalContainer,callbackData.itemAbove,callbackData.itemBelow)}};const handleDragOver=(e,container)=>{if(state.dragData.originId!==providerId)return;e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(enableCrossContainerPreview&&state.dragData.id){const draggedItem=state.items.find((item=>item&&item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"MOVE_TO_CONTAINER_END",payload:{dragId:state.dragData.id,newContainer:container}});dragStateRef.current.currentContainer=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]);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