playbook_ui 14.17.0.pre.rc.0 → 14.17.0

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"
     }

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

@@ -1,10 +1,10 @@
 <% 
-  options = [
+   options = [
     {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -17,22 +17,22 @@
       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/dropdown.test.jsx

@@ -95,7 +95,7 @@ test('generated customDisplay for trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customDisplay = trigger.querySelector('.fa-flag.pb_icon_kit.fa-fw')
+  const customDisplay = trigger.querySelector('.pb_custom_icon')
   expect(customDisplay).toBeInTheDocument()
 })
 
@@ -170,7 +170,7 @@ test('generated custom Trigger', () => {
         options={options}
     >
       <Dropdown.Trigger>
-          <Icon icon="elephant" />
+          <Icon icon="flag" />
       </Dropdown.Trigger>
       {options.map((option) => (
       <Dropdown.Option key={option.id} 
@@ -182,7 +182,7 @@ test('generated custom Trigger', () => {
 
   const kit = screen.getByTestId(testId)
   const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customTrigger = trigger.querySelector('.fa-elephant.pb_icon_kit.fa-fw')
+  const customTrigger = trigger.querySelector('.pb_custom_icon')
   expect(customTrigger).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { map } from 'lodash'
-import { isEmpty, omitBy } from '../../utilities/object'
+import { isEmpty, omitBy, map } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -46,12 +45,12 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                     dark={dark}
                     size={4}
                     tag="h4"
-                    text={name}
+                    text={`${name}`}
                 /> :
                 <div>
                   <Caption
                       dark={dark}
-                      text={name}
+                      text={`${name}`}
                   />
                   <Title
                       dark={dark}

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import { map } from 'lodash'
-import { find, partial } from  '../../utilities/object'
+import { find, partial, map } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'
@@ -27,7 +26,7 @@ const directionIcon = (dir: Direction) => (
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
-    const next = nextValue(value, name)
+    const next = nextValue(value, String(name))
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from 'lodash'
+import { debounce } from '../utilities/object'
 
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -205,4 +205,26 @@
       border-top-left-radius: 0;
     }
   }
+
+  .pb_text_input_kit.error {
+    .text_input_wrapper {
+      input:focus {
+        outline: none;
+      }
+    }
+
+    & + * input,
+    & + * select {
+      border-left-color: $red;
+    }
+  }
+
+  .pb_text_input_kit:not(.error):focus-within + .error,
+  .pb_text_input_kit:not(.error):focus-within + .pb_select .error {
+    input,
+    select {
+      border-left: none;
+      padding-left: calc(var(--iti-flag-width) + 1px);
+    }
+  }
 }