playbook_ui 15.4.0 → 15.5.0.pre.alpha.draggablefix12568

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
-  <form>
+  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -13,5 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  </form>
+  <% end %>
 <% end %>

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

@@ -39,6 +39,56 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 
       return { ...state, items: newItems };
     }
+    case 'REORDER_ITEMS_CROSS_CONTAINER': {
+      const { dragId, targetId, newContainer } = 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);
+
+      // Update container temporarily so dropzone preview works correctly
+      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, newContainer } = action.payload;
+      const newItems = [...state.items];
+      const draggedItem = newItems.find(item => item.id === dragId);
+      const draggedIndex = newItems.indexOf(draggedItem);
+
+      // Update container temporarily so dropzone preview works correctly
+      const updatedItem = { ...draggedItem, container: newContainer };
+
+      // Remove from current position
+      newItems.splice(draggedIndex, 1);
+
+      // Find the last item in the target container and insert after it
+      const lastIndexInContainer = newItems.map(item => item.container).lastIndexOf(newContainer);
+      if (lastIndexInContainer === -1) {
+        // Container is empty, add to end
+        newItems.push(updatedItem);
+      } else {
+        // Insert after last item in container
+        newItems.splice(lastIndexInContainer + 1, 0, updatedItem);
+      }
+
+      return { ...state, items: newItems };
+    }
+    case 'RESET_DRAG_CONTAINER': {
+      const { itemId, originalContainer } = action.payload;
+      return {
+        ...state,
+        items: state.items.map(item =>
+          item.id === itemId
+            ? { ...item, container: originalContainer }
+            : item
+        )
+      };
+    }
     default:
       return state;
   }
@@ -103,17 +153,47 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     if (state.dragData.id !== id) {
-      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+      // Check if this is a cross-container drag
+      const isCrossContainer = state.dragData.initialGroup !== container;
+      
+      if (isCrossContainer) {
+        // Use cross-container reorder to update container temporarily for dropzone preview
+        dispatch({ type: 'REORDER_ITEMS_CROSS_CONTAINER', payload: { dragId: state.dragData.id, targetId: id, newContainer: container } });
+      } else {
+        // Same container: use normal reorder no need to be fancy nancy
+        dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+      }
       dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
+    const draggedItemId = state.dragData.id;
+    const originalContainer = state.dragData.initialGroup;
+    
+    if (!draggedItemId) {
+      dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+      return;
+    }
+    
+    const draggedItem = state.items.find(item => item.id === draggedItemId);
+    const finalContainer = draggedItem ? draggedItem.container : originalContainer;
+    
+    // Find items above and below in the same container
+    const itemsInContainer = state.items.filter(item => item.container === finalContainer);
+    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+    const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-    if (onDragEnd) onDragEnd();
+    
+    // Pass enhanced info to onDragEnd callback to give dev more context
+    if (onDragEnd) onDragEnd(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow);
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -123,10 +203,37 @@ export const DraggableProvider = ({
   const handleDrop = (container: string) => {
     if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
 
+    const draggedItemId = state.dragData.id;
+    const originalContainer = state.dragData.initialGroup;
+    
+    if (!draggedItemId) return; // Guard against missing drag data when dropping too quickly
+    
+    const draggedItem = state.items.find(item => item.id === draggedItemId);
+    
+    if (!draggedItem) {
+      // Item not found in state - clear drag state and exit
+      dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+      return;
+    }
+    
+    // Find items above and below in the same container (before changeCategory updates it)
+    const itemsInContainer = state.items.filter(item => item.container === container);
+    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+    const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    changeCategory(state.dragData.id, container);
-    if (onDrop) onDrop(container);
+    // changeCategory will ensure the container is set correctly on drop for cross container and same container drops
+    changeCategory(draggedItemId, container);
+    
+    // Pass enhanced info to onDrop callback so devs have more context
+    if (onDrop) {
+      const updatedItem = { ...draggedItem, container };
+      onDrop(draggedItemId, container, originalContainer, updatedItem, itemAbove, itemBelow);
+    }
   };
 
   const handleDragOver = (e: Event, container: string) => {
@@ -134,6 +241,17 @@ export const DraggableProvider = ({
 
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+    
+    // Check if we're dragging over a different container than where the item currently is
+    if (!state.dragData.id) return; // Guard against missing drag ID when dragging too quickly
+    
+    const draggedItem = state.items.find(item => item.id === state.dragData.id);
+    if (draggedItem && draggedItem.container !== container) {
+      // This handles the case when dragging to empty space at bottom of container OR in empty container
+      dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: state.dragData.id, newContainer: container } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+    }
+    
     if (onDragOver) onDragOver(e, container);
   };
 

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -19,7 +19,10 @@ export type ActionType =
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } }
+  | { type: 'REORDER_ITEMS_CROSS_CONTAINER'; payload: { dragId: string; targetId: string; newContainer: string } }
+  | { type: 'MOVE_TO_CONTAINER_END'; payload: { dragId: string; newContainer: string } }
+  | { type: 'RESET_DRAG_CONTAINER'; payload: { itemId: string; originalContainer: string } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';
@@ -33,8 +36,8 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: () => void;
-    onDrop?: (container: string) => void;
+    onDragEnd?: (draggedItemId: string, finalContainer: string, originalContainer: string, itemAbove: ItemType | null, itemBelow: ItemType | null) => void;
+    onDrop?: (draggedItemId: string, droppedContainer: string, originalContainer: string, item: ItemType, itemAbove: ItemType | null, itemBelow: ItemType | null) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
     providerId?: string;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -0,0 +1,179 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+
+// Initial groups to drag between
+const containers = ["To Do", "In Progress", "Done"];
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+];
+
+const DraggableMultipleContainersDropzone = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  const badgeProperties = (container) => {
+    switch (container) {
+      case "To Do":
+        return { text: "queue", color: "warning" };
+      case "In Progress":
+        return { text: "progress", color: "primary" };
+      default:
+        return { text: "done", color: "success" };
+    }
+  };
+
+  return (
+    <DraggableProvider 
+        dropZone={{type: "outline"}}
+        initialItems={data}
+        onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Final Container: ${finalContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Dropped Container: ${droppedContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Dropped Item:', item);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <Flex
+          justifyContent="center"
+          {...props}
+      >
+          {containers?.map((container) => (
+            <Draggable.Container 
+                container={container}
+                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
+                key={container} 
+                padding="sm"
+            >
+                <Caption textAlign="center">{container}</Caption>
+                <Flex 
+                    alignItems="stretch"
+                    gap="sm"
+                    orientation="column" 
+                >
+                  {initialState
+                    .filter((item) => item.container === container)
+                    .map(
+                      ({
+                        assignee_img,
+                        assignee_name,
+                        description,
+                        id,
+                        title,
+                      }) => (
+                        <Draggable.Item 
+                            container={container}
+                            dragId={id} 
+                            key={id}
+                        >
+                          <Card
+                              padding="sm"
+                              {...props}
+                          >
+                            <Flex justify="between">
+                              <FlexItem>
+                                <Flex>
+                                  <Avatar
+                                      imageUrl={assignee_img}
+                                      name={assignee_name}
+                                      size="xxs"
+                                  />
+                                  <Title paddingLeft="xs" 
+                                      size={4}
+                                      text={title}
+                                      {...props}
+                                  />
+                                </Flex>
+                              </FlexItem>
+                              <Badge
+                                  marginLeft="sm"
+                                  rounded
+                                  text={badgeProperties(container).text}
+                                  variant={badgeProperties(container).color}
+                                  {...props}
+                              />
+                            </Flex>
+                            <Body paddingTop="xs"
+                                text={description} 
+                                {...props}
+                            />
+                          </Card>
+                        </Draggable.Item>
+                      )
+                    )}
+                </Flex>
+            </Draggable.Container>
+          ))}
+      </Flex>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainersDropzone;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -0,0 +1,20 @@
+The multiple container functionality also supports customized dropzone styling as shown here. 
+
+In addition to this, the `onDrop` and `onDragEnd` event listeners provide several arguments to allow developers more context from the drag event.
+
+The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `droppedContainer` - The container where the item was dropped
+- `originalContainer` - The container where the drag started
+- `item` - The complete item object with all properties (including the updated container)
+- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
+
+The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
+- `originalContainer` - The container where the drag started
+- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

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

@@ -5,11 +5,12 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -17,8 +18,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers

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

@@ -7,4 +7,5 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'

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

@@ -255,4 +255,80 @@ test("line dropZone with horizontal direction applies 'line_horizontal' class to
   const container = kit.querySelector(".pb_draggable_container");
   
   expect(container).toHaveClass("line_horizontal");
-});
+});
+
+// Cross-container drag tests
+const multiContainerData = [
+  { id: "1", container: "To Do", text: "Task 1" },
+  { id: "2", container: "To Do", text: "Task 2" },
+  { id: "3", container: "In Progress", text: "Task 3" },
+  { id: "4", container: "Done", text: "Task 4" },
+];
+
+const containers = ["To Do", "In Progress", "Done"];
+
+const DraggableMultipleContainers = () => {
+  const [initialState, setInitialState] = useState(multiContainerData);
+
+  return (
+    <div data-testid={testId}>
+      <DraggableProvider
+          dropZone={{ type: "outline" }}
+          initialItems={multiContainerData}
+          onReorder={(items) => setInitialState(items)}
+      >
+        {containers.map((container) => (
+          <Draggable.Container
+              container={container}
+              data={{testid:`container-${container}`}}
+              key={container}
+          >
+            {initialState
+              .filter((item) => item.container === container)
+              .map(({ id, text }) => (
+                <Draggable.Item
+                    container={container}
+                    data-testid={`item-${id}`}
+                    dragId={id}
+                    key={id}
+                >
+                  {text}
+                </Draggable.Item>
+              ))}
+          </Draggable.Container>
+        ))}
+      </DraggableProvider>
+    </div>
+  );
+};
+
+test("renders multiple containers with correct items", () => {
+  render(<DraggableMultipleContainers />);
+  
+  const kit = screen.getByTestId(testId);
+  expect(kit).toBeInTheDocument();
+  
+  containers.forEach((container) => {
+    const containerEl = kit.querySelector(`[data-testid="container-${container}"]`);
+    expect(containerEl).toBeInTheDocument();
+  });
+  
+  // Check items are in correct containers
+  expect(screen.getByText("Task 1")).toBeInTheDocument();
+  expect(screen.getByText("Task 2")).toBeInTheDocument();
+  expect(screen.getByText("Task 3")).toBeInTheDocument();
+  expect(screen.getByText("Task 4")).toBeInTheDocument();
+});
+
+test("items have correct container association", () => {
+  const { container } = render(<DraggableMultipleContainers />);
+  
+  // items rendered within their respective containers
+  const todoContainer = container.querySelector('[data-testid="container-To Do"]');
+  const inProgressContainer = container.querySelector('[data-testid="container-In Progress"]');
+  const doneContainer = container.querySelector('[data-testid="container-Done"]');
+  
+  expect(todoContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(2);
+  expect(inProgressContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
+  expect(doneContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
+})

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

@@ -33,6 +33,8 @@ export default class PbDropdown extends PbEnhancedElement {
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
+    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
+    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -126,7 +128,7 @@ export default class PbDropdown extends PbEnhancedElement {
         .label.toString()
         .toLowerCase();
 
-      // hide or show option
+    // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
       if (match) hasMatch = true
@@ -356,17 +358,6 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   clearFormValidation(input) {
-    if (input.checkValidity()) {
-      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
-      dropdownWrapperElement.classList.remove("error");
-
-      const errorLabelElement = dropdownWrapperElement.querySelector(
-        ".pb_body_kit_negative"
-      );
-      if (errorLabelElement) {
-        errorLabelElement.remove();
-      }
-    }
     if (this.isMultiSelect) {
       if (this.selectedOptions.size > 0) {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
@@ -377,6 +368,19 @@ export default class PbDropdown extends PbEnhancedElement {
         if (errorLabelElement) {
           errorLabelElement.remove();
         }
+        return;
+      }
+    }
+    
+    if (input.checkValidity()) {
+      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+      dropdownWrapperElement.classList.remove("error");
+
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
+      if (errorLabelElement) {
+        errorLabelElement.remove();
       }
     }
   }
@@ -585,7 +589,9 @@ export default class PbDropdown extends PbEnhancedElement {
     // for multi_select, for each selectedOption, create a hidden input
     const name = baseInput.getAttribute("name");
     this.selectedOptions.forEach((raw) => {
-      const id = JSON.parse(raw).id;
+      const optionData = JSON.parse(raw);
+      // Use id if available, otherwise fall back to value
+      const id = optionData.id || optionData.value;
       const inp = document.createElement("input");
       inp.type = "hidden";
       inp.name = name;
@@ -593,7 +599,19 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    baseInput.value = "";
+    
+    // For multi-select, remove required from base input when there are selections
+    // The generated inputs handle the form submission with actual values
+    // Restore required attribute when there are no selections (if it was originally required)
+    if (this.selectedOptions.size > 0) {
+      baseInput.value = "";
+      baseInput.removeAttribute("required");
+    } else {
+      baseInput.value = "";
+      if (this.wasOriginallyRequired) {
+        baseInput.setAttribute("required", "");
+      }
+    }
   }
 
   handleBackspaceClear() {

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"