playbook_ui 14.16.0 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -106,41 +106,41 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
-useEffect(() => {
-  datePickerHelper({
-    allowInput,
-    customQuickPickDates,
-    defaultDate,
-    disableDate,
-    disableRange,
-    disableWeekdays,
-    enableTime,
-    format,
-    hideIcon,
-    inLine,
-    maxDate,
-    minDate,
-    mode,
-    onChange,
-    onClose,
-    pickerId,
-    plugins,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    position,
-    positionElement,
-    selectionType,
-    showTimezone,
-    staticPosition,
-    thisRangesEndToday,
-    yearRange,
-    required: false,
-  }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+  useEffect(() => {
+    datePickerHelper({
+      allowInput,
+      customQuickPickDates,
+      defaultDate,
+      disableDate,
+      disableRange,
+      disableWeekdays,
+      enableTime,
+      format,
+      hideIcon,
+      inLine,
+      maxDate,
+      minDate,
+      mode,
+      onChange,
+      onClose,
+      pickerId,
+      plugins,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      position,
+      positionElement,
+      selectionType,
+      showTimezone,
+      staticPosition,
+      thisRangesEndToday,
+      yearRange,
+      required: false,
+    }, scrollContainer)
+  }, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
-  } 
+  }
   delete filteredProps?.position
 
   const classes = classnames(
@@ -221,7 +221,7 @@ useEffect(() => {
             {hideIcon && inLine ?
               <div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
                     id={`${pickerId}-icon-plus`}
                 >
                   <Icon
@@ -230,7 +230,7 @@ useEffect(() => {
                   />
                 </div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -44,7 +44,7 @@
     <% if object.hide_icon && object.inline %>
       <!-- Plus Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
           id="<%= object.picker_id %>-icon-plus"
       >
         <%= pb_rails("icon", props: {
@@ -55,7 +55,7 @@
 
       <!-- Angle Down Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
           id="<%= object.picker_id %>-angle-down"
       >
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -174,6 +174,21 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       yearInput.value = fp.currentYear?.toString()
   }
 
+  const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
+    const inputEl = fp.input
+
+    if (inputEl) {
+      const inlineDatePickerElem = inputEl.closest('.inline-date-picker')
+      if (inlineDatePickerElem) {
+        if (selectedDates && selectedDates.length > 0) {
+          inlineDatePickerElem.classList.add('show-angle-down-icon')
+        } else {
+          inlineDatePickerElem.classList.remove('show-angle-down-icon')
+        }
+      }
+    }
+  }
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -204,6 +219,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
+      handleDatePickerChange(fp, selectedDates)
       yearChangeHook(fp)
       onChange(dateStr, selectedDates)
     }],

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -4,14 +4,3 @@
   inline: true,
   picker_id: "date-picker-inline"
 }) %>
-
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", (event) => {
-    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
-    <!-- Display the angle-down icon when a date has been selected -->
-    const showAngleDownHandler = () => {
-      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
-    }
-    fpInline.config.onChange.push(showAngleDownHandler)
-  })
-<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx

@@ -3,19 +3,12 @@ import React from 'react'
 import DatePicker from '../_date_picker'
 
 const DatePickerInline = (props) => {
-  const showAngleDownHandler = (dateSelected) => {
-    if (dateSelected) {
-      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
-    }
-  }
-
   return (
     <div>
       <DatePicker
           className="inline-date-picker"
           hideIcon
           inLine
-          onChange={showAngleDownHandler}
           pickerId="date-picker-inline"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss

@@ -14,12 +14,12 @@
       opacity: 1;
     }
     &:not(:hover) {
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           color: $slate;
           display: inline-block;
@@ -33,12 +33,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $primary;
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $primary;
@@ -47,32 +47,34 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        #date-picker-inline-angle-down {
+        .date-picker-inline-angle-down.cal_icon_wrapper {
           svg {
             display: inline-block;
             color: $text_lt_light;
           }
         }
-        #date-picker-inline-icon-plus {
+        .date-picker-inline-icon-plus.cal_icon_wrapper {
           svg {
             display: none;
           }
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $primary;
         }
       }
     }
-    #date-picker-inline,
-    #date-picker-inline .active {
+    .date_picker_input.flatpickr-input,
+    .date_picker_input.flatpickr-input .active,
+    .text_input.flatpickr-input,
+    .text_input.flatpickr-input .active      {
       border: none;
       padding: 5px 5px 5px 10px;
       background-color: #FFF;
@@ -82,8 +84,8 @@
         box-shadow: none;
       }
     }
-    #date-picker-inline-angle-down,
-    #date-picker-inline-icon-plus {
+    .date-picker-inline-angle-down.cal_icon_wrapper,
+    .date-picker-inline-icon-plus.cal_icon_wrapper {
       height: 33px;
       border: none;
     }
@@ -96,12 +98,12 @@
 [class^=pb_date_picker_kit].dark {
   &.inline-date-picker {
     &:not(:hover) {
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
@@ -115,12 +117,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $white;
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
@@ -129,32 +131,34 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        #date-picker-inline-angle-down {
+        .date-picker-inline-angle-down.cal_icon_wrapper {
           svg {
             display: inline-block;
             color: $white;
           }
         }
-        #date-picker-inline-icon-plus {
+        .date-picker-inline-icon-plus.cal_icon_wrapper {
           svg {
             display: none;
           }
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
         }
       }
     }
-    #date-picker-inline,
-    #date-picker-inline .active {
+    .date_picker_input.flatpickr-input,
+    .date_picker_input.flatpickr-input .active,
+    .text_input.flatpickr-input,
+    .text_input.flatpickr-input .active {
       background-color: rgba($white,.10);
       border: none;
       padding: 5px 5px 5px 10px;
@@ -164,8 +168,8 @@
         box-shadow: none;
       }
     }
-    #date-picker-inline-angle-down,
-    #date-picker-inline-icon-plus {
+    .date-picker-inline-angle-down.cal_icon_wrapper,
+    .date-picker-inline-icon-plus.cal_icon_wrapper {
       height: 33px;
       border: none;
     }

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -62,7 +62,7 @@ describe("DateRangeInline Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const arrow = kit.querySelector('.pb_icon_kit.fa-fw.fa-long-arrow-right')
+        const arrow = kit.querySelector('.pb_custom_icon')
         expect(arrow).toBeInTheDocument()
     })
 
@@ -93,7 +93,7 @@ describe("DateRangeInline Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const calendar = kit.querySelector('.pb_icon_kit.fa-fw.fa-calendar-alt')
+        const calendar = kit.querySelector('.pb_custom_icon')
         expect(calendar).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js

@@ -58,7 +58,7 @@ describe("DateRangeStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const arrowicon = kit.querySelector('.pb_icon_kit.fa-fw.pb_date_range_stacked_arrow')
+        const arrowicon = kit.querySelector('.pb_custom_icon')
         expect(arrowicon).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -1,11 +1,11 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
   dragData: { id: "", initialGroup: "" },
   isDragging: "",
-  activeContainer: ""
+  activeContainer: "",
 };
 
 const reducer = (state: InitialStateType, action: ActionType) => {
@@ -31,9 +31,23 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
       const draggedItem = newItems.find(item => item.id === dragId);
-      const draggedIndex = newItems.indexOf(draggedItem);
+      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);
 
@@ -48,7 +62,11 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
-  return useContext(DragContext);
+  const context = useContext(DragContext);
+  if (context === undefined) {
+    throw new Error('DraggableContext must be used within a DraggableProvider');
+  }
+  return context;
 };
 
 export const DraggableProvider = ({
@@ -63,7 +81,11 @@ export const DraggableProvider = ({
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-
+  
+  // Store initial items in a ref to use if needed (for consistency when needed in future updates)
+  const initialItemsRef = useRef(initialItems);
+  const [isDragging, setIsDragging] = useState(false);
+  
   // Parse dropZone prop - handle both string format (backward compatibility) and object format
   let dropZoneType = 'ghost';
   let dropZoneColor = 'neutral';
@@ -86,45 +108,64 @@ export const DraggableProvider = ({
 
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
+    initialItemsRef.current = initialItems;
   }, [initialItems]);
 
   useEffect(() => {
-    onReorder(state.items);
-  }, [state.items]);
+    if (onReorder) {
+      onReorder(state.items);
+    }
+  }, [state.items, onReorder]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
+    setIsDragging(true);
+    dispatch({ type: 'SET_DRAG_DATA', payload: { 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: string, container: string) => {
-    if (state.dragData.id !== id) {
-      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: 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 changeCategory = (itemId: string, container: string) => {
-    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
-  };
-
   const handleDrop = (container: string) => {
+    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 } });
+    }
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    changeCategory(state.dragData.id, container);
+
+    setIsDragging(false);
     if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
+    e.stopPropagation();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);
   };
@@ -144,7 +185,7 @@ export const DraggableProvider = ({
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
+  }), [state, dropZoneType, dropZoneColor, dropZoneDirection,  handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -165,7 +165,7 @@ test("generated dragHandle with List", () => {
 
   const list = kit.querySelector(".pb_list_kit");
   expect(list).toBeInTheDocument();
-  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = list.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -175,7 +175,7 @@ test("generated dragHandle with SelectableList", () => {
 
   const selectabellist = kit.querySelector(".pb_selectable_list_kit");
   expect(selectabellist).toBeInTheDocument();
-  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = selectabellist.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -185,6 +185,6 @@ test("generated dragHandle with Card", () => {
 
   const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
   expect(card).toBeInTheDocument();
-  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
+  const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });

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

@@ -12,7 +12,7 @@ const DropdownWithAutocomplete = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -25,18 +25,18 @@ const DropdownWithAutocomplete = (props) => {
       status: "Away"
     },
     {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
+      label: "Carlos Lima",
+      value: "Carlos Lima",
       territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
+      title: "Nitro Developer",
+      id: "carlos-lima",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "UX Design Mentor",
+      title: "Lead UX Designer",
       id: "courtney-long",
       status: "Online"
     }

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

@@ -15,7 +15,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -28,18 +28,18 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       status: "Away"
     },
     {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
+      label: "Carlos Lima",
+      value: "Carlos Lima",
       territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
+      title: "Nitro Developer",
+      id: "carlos-lima",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "UX Design Mentor",
+      title: "Lead UX Designer",
       id: "courtney-long",
       status: "Online"
     }

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

@@ -15,7 +15,7 @@ const DropdownWithCustomDisplay = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -28,18 +28,18 @@ const DropdownWithCustomDisplay = (props) => {
       status: "Away"
     },
     {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
+      label: "Carlos Lima",
+      value: "Carlos Lima",
       territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
+      title: "Nitro Developer",
+      id: "carlos-lima",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "UX Design Mentor",
+      title: "Lead UX Designer",
       id: "courtney-long",
       status: "Online"
     }