playbook_ui 14.20.0.pre.alpha.play2224scrollbarfix7991 → 14.20.0.pre.alpha.revert4453PBNTR933reactdraggablebugdragbtwnexamples7854

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

@@ -1,11 +1,11 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } 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,23 +31,9 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       const { dragId, 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 draggedIndex = newItems.indexOf(draggedItem);
       const targetIndex = newItems.findIndex(item => item.id === targetId);
 
-      if (draggedIndex === -1 || targetIndex === -1) {
-        return state;
-      }
-
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
 
@@ -62,11 +48,7 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
-  const context = useContext(DragContext);
-  if (context === undefined) {
-    throw new Error('DraggableContext must be used within a DraggableProvider');
-  }
-  return context;
+  return useContext(DragContext);
 };
 
 export const DraggableProvider = ({
@@ -81,11 +63,7 @@ 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';
@@ -108,64 +86,45 @@ export const DraggableProvider = ({
 
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
-    initialItemsRef.current = initialItems;
   }, [initialItems]);
 
   useEffect(() => {
-    if (onReorder) {
-      onReorder(state.items);
-    }
-  }, [state.items, onReorder]);
+    onReorder(state.items);
+  }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    setIsDragging(true);
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
+    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: string, container: string) => {
-    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;
+    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 } });
     }
-
-    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: 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 } });
-    }
+  const changeCategory = (itemId: string, container: string) => {
+    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
+  };
 
+  const handleDrop = (container: string) => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-
-    setIsDragging(false);
+    changeCategory(state.dragData.id, container);
     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);
   };
@@ -185,7 +144,7 @@ export const DraggableProvider = ({
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state, dropZoneType, dropZoneColor, dropZoneDirection,  handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
+  }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen, fireEvent } from "../utilities/test-utils"
+import { render, screen } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 
@@ -263,110 +263,4 @@ test("searchbar prop to render TextInput in container", () => {
   const kit = screen.getByTestId(testId)
   const searchbar = kit.querySelector('.pb_text_input_kit')
   expect(searchbar).toBeInTheDocument()
-})
-
-test("MultiSelect prop to allow multiple selections + add correct Form Pills", () => {
-  render(
-    <Dropdown 
-        data={{ testid: testId }} 
-        multiSelect 
-        options={options} 
-    />
- );
-
-  const kit = screen.getByTestId(testId);
-  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
-  fireEvent.click(option[0]); // Select first option
-  fireEvent.click(option[1]); // Select second option
-  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
-  expect(formPills.length).toBe(2);
-  expect(formPills[0]).toHaveTextContent("United States");
-  expect(formPills[1]).toHaveTextContent("Canada");
-});
-
- test("hides each selected option from the dropdown", () => {
-
-    render(
-      <Dropdown 
-          data={{ testid: testId }} 
-          multiSelect 
-          options={options} 
-      />
-    );
-
-  const kit = screen.getByTestId(testId);
-  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
-  const firstOpt = options[0].label
-  fireEvent.click(option[0]);
-  const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
-  expect(option2[0]).not.toHaveTextContent(firstOpt)
-  })
-
-test("renders form pills inside trigger", () => {
-      render(
-        <Dropdown 
-            data={{ testid: testId }} 
-            multiSelect 
-            options={options} 
-        />
-      );
-
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
-  expect(formPill).toBeInTheDocument()
-  })
-
-test("multiSelect and autocomplete to work together", () => {
-  render (
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        multiSelect
-        options={options}
-    />   
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = kit.querySelector('.dropdown_input')
-  expect(input).toBeInTheDocument()
-    const option = kit.querySelector('.pb_dropdown_option_list')
-  fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
-  expect(formPill).toBeInTheDocument()
-})
-
-test("renders form pills with size and color", () => {
-      render(
-        <Dropdown 
-            data={{ testid: testId }} 
-            formPillProps={{ size: "small", color: "neutral" }}
-            multiSelect 
-            options={options} 
-        />
-      );
-
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
-  expect(formPill).toBeInTheDocument()
-  expect(formPill).toHaveClass("small")
-  })
-
-test("defaultValue works with multiSelect", () => {
-    render(
-      <Dropdown
-          data={{ testid: testId }}
-          defaultValue={[options[0], options[2]]}
-          multiSelect
-          options={options}
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
-    const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
-    const firstOpt = options[0].label
-    expect(option2[0]).not.toHaveTextContent(firstOpt)
-  })
+})

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

@@ -115,7 +115,6 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
-    let hasMatch = false
     this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
       //make it so that if the option is selected, it will not show up in the search results
       if (this.isMultiSelect && this.selectedOptions.has(opt.dataset.dropdownOptionLabel)) {
@@ -129,32 +128,9 @@ export default class PbDropdown extends PbEnhancedElement {
       // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
-      if (match) hasMatch = true
     });
 
     this.adjustDropdownHeight();
-
-    this.removeNoOptionsMessage()
-    if (!hasMatch) {
-      this.showNoOptionsMessage()
-    }
-  }
-
-  showNoOptionsMessage() {
-    if (this.element.querySelector(".dropdown_no_options")) return;
-
-    const noOptionElement = document.createElement("div");
-    noOptionElement.className = "pb_body_kit_light dropdown_no_options pb_item_kit p_xs display_flex justify_content_center";
-    noOptionElement.textContent = "no option";
-
-    this.target.appendChild(noOptionElement);
-  }
-
-  removeNoOptionsMessage() {
-    const existing = this.element.querySelector(".dropdown_no_options");
-    if (existing) {
-      existing.remove();
-    }
   }
 
   handleOptionClick(event) {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -33,7 +33,6 @@ type PhoneNumberInputProps = {
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
-  excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
@@ -89,7 +88,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     },
     onValidate = () => null,
     onlyCountries = [],
-    excludeCountries = [],
     required = false,
     preferredCountries = [],
     value = "",
@@ -236,7 +234,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   const fallbackCountry =
     preferredCountries.length > 0 ? preferredCountries[0] :
       onlyCountries.length > 0 ? onlyCountries.sort()[0] :
-      excludeCountries.length > 0 ? excludeCountries.sort()[0] :
         "af";
 
   useEffect(() => {
@@ -247,7 +244,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
-      excludeCountries,
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -6,7 +6,7 @@ const PhoneNumberInputOnlyCountries = (props) => (
     <PhoneNumberInput
         id='only'
         onlyCountries={['us', 'br']}
-        {...props}
+        {...props} 
     />
   </>
 )

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

@@ -4,8 +4,7 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Only Countries
-  - phone_number_input_exclude_countries: Exclude Countries
+  - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
@@ -16,9 +15,9 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Only Countries
-  - phone_number_input_exclude_countries: Exclude Countries
+  - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
+  

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -2,7 +2,6 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
-export { default as PhoneNumberInputExcludeCountries } from './_phone_number_input_exclude_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -15,8 +15,6 @@ module Playbook
                   default: ""
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
-      prop :exclude_countries, type: Playbook::Props::Array,
-                               default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
       prop :error, type: Playbook::Props::String,
@@ -46,7 +44,6 @@ module Playbook
           label: label,
           name: name,
           onlyCountries: only_countries,
-          excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
           value: value,

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

@@ -8,7 +8,6 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
@@ -26,7 +25,6 @@ examples:
   - select_required: Required Select Field
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
-  - select_custom_select_subheaders: Custom Select Subheaders
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_show_arrow: Select Inline (Always Show Arrow)

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -11,4 +11,3 @@ export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.js
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
-export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'