playbook_ui 14.21.0.pre.alpha.renovatenpmtrixvulnerability8103 → 14.21.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -3,12 +3,6 @@ import { render, screen, waitFor } from "../utilities/test-utils"
 
 import { AdvancedTable, Pill } from "playbook-ui"
 
-global.ResizeObserver = class {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
-
 const MOCK_DATA = [
   {
     year: "2021",
@@ -78,36 +72,6 @@ const MOCK_DATA_LOADING = [
   },
 ]
 
-const MOCK_DATA_WITH_ID = [
-  {
-    id: "1",
-    year: "2021",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "20",
-    scheduledMeetings: "10",
-  },
-  {
-    id: "2", 
-    year: "2022",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "25",
-    scheduledMeetings: "15",
-  },
-  {
-    id: "3",
-    year: "2023", 
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "30",
-    scheduledMeetings: "20",
-  },
-]
-
 const columnDefinitions = [
   {
     accessor: "year",
@@ -548,28 +512,3 @@ test("allowFullScreen prop adds fullscreen class", () => {
   const tableContainer = screen.getByRole("table").closest("div")
   expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
 })
-
-test("pinnedRows prop renders pinned rows at top", () => {
-  const pinnedRowsControl = {
-    value: { top: ["1", "3"] },
-    onChange: jest.fn()
-  }
-
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        pinnedRows={pinnedRowsControl}
-        tableData={MOCK_DATA_WITH_ID}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const pinnedRows = kit.querySelectorAll(".pinned-row")
-  
-  expect(pinnedRows).toHaveLength(2)
-  
-  const firstPinnedRow = pinnedRows[0]
-  expect(firstPinnedRow).toHaveStyle("position: sticky")
-  expect(firstPinnedRow).toHaveStyle("background-color: white")
-})

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx

@@ -39,6 +39,7 @@ const AdvancedTableNoSubrows = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
           tableData={MOCK_DATA}
           {...props}
       />

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

@@ -13,12 +13,10 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_border_color_rails: Column Group Border Color
-  - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
-  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -44,7 +42,7 @@ examples:
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   - advanced_table_column_border_color: Column Group Border Color
-  - advanced_table_no_subrows: Table with No Subrows or Expansion
+  # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
@@ -54,6 +52,4 @@ examples:
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
-  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
-  - advanced_table_pinned_rows: Pinned Rows
-  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns

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

@@ -31,6 +31,4 @@ export { default as AdvancedTableColumnBorderColor} from './_advanced_table_colu
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
 export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
 export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
-export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
-export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
-export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
+export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'

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

@@ -569,8 +569,6 @@ class PbAdvancedTableActionBar {
     actionBar.style.height = 'auto';
     actionBar.style.overflow = 'visible';
     actionBar.style.opacity = '1';
-    actionBar.style.transitionProperty = 'all';
-    actionBar.style.transitionTimingFunction = 'ease-in-out';
     actionBar.classList.remove("p_none");
     actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,9 +1,16 @@
 <%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
-  <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
-    <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
-    <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
-  </span>
+  <% if object.indeterminate %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
+    </span>
+  <% else %>
+    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+      <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
+    </span>
+  <% end %>
   <span class="pb_checkbox_label">
     <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -5,8 +5,7 @@ module Playbook
     class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_parent
+      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -20,7 +19,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_checkbox_kit", checked_class) + error_class
+        generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end
 
       def input
@@ -31,13 +30,6 @@ module Playbook
         error ? "negative" : nil
       end
 
-      def data
-        Hash(prop(:data)).merge(
-          pb_checkbox_indeterminate_main: indeterminate_main,
-          pb_checkbox_indeterminate_parent: indeterminate_parent
-        )
-      end
-
     private
 
       def error_class
@@ -47,6 +39,10 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
+
+      def indeterminate_class
+        indeterminate ? " indeterminate" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,11 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          checked: true,
           text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
-          indeterminate_main: true,
+          indeterminate: true,
           id: "indeterminate-checkbox"
         }) %>
       </th>
@@ -29,10 +30,55 @@
             value: checkbox[:id],
             name: "#{checkbox[:id]}-indeterminate-checkbox",
             id: "#{checkbox[:id]}-indeterminate-checkbox",
-            indeterminate_parent: "indeterminate-checkbox",
           }) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 <% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
+    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
+    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    mainCheckbox.addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  });
+</script>

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_dropdown/_dropdown.tsx

@@ -25,7 +25,6 @@ type DropdownProps = {
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
-    closeOnSelection?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -56,7 +55,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
-        closeOnSelection = true,
         dark = false,
         data = {},
         defaultValue = {},
@@ -154,7 +152,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         if (!multiSelect) return optionsWithBlankSelection;
         return optionsWithBlankSelection.filter((option: GenericObject) => !selectedArray.some((sel) => sel.label === option.label));
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
-
+    
     const filteredOptions = useMemo(() => {
           return availableOptions.filter((opt: GenericObject) =>
             String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
@@ -194,18 +192,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        return next;
                    });
                    setFilterItem("");
-                   // Only close dropdown if closeOnSelection is true
-                   if (closeOnSelection) {
-                       setIsDropDownClosed(true);
-                   }
+                   setIsDropDownClosed(true);
                } else {
                    setSelected(clickedItem);
                    setFilterItem("");
+                   setIsDropDownClosed(true);
                    onSelect && onSelect(clickedItem);
-                   // Only close dropdown if closeOnSelection is true
-                   if (closeOnSelection) {
-                       setIsDropDownClosed(true);
-                   }
             }
              };
 
@@ -260,7 +252,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
             <DropdownContext.Provider
                 value={{
                     autocomplete,
-                    closeOnSelection,
                     dropdownContainerRef,
                     filteredOptions,
                     filterItem,

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

@@ -44,6 +44,4 @@ examples:
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
-  - dropdown_close_on_select: Close On Selection
-
 

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

@@ -19,5 +19,4 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
-export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'

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) {