playbook_ui 16.3.0.pre.alpha.play284914702 → 16.3.0.pre.alpha.play284914770

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4fe55987631151bf94d593a4ba964107a8d9a6f574777caea1985c45774ac05f
-  data.tar.gz: a8f5c270468d49e1f4ab9854610069c9ece935ca9f602f8040a1cd05be38525b
+  metadata.gz: 7b00abe84561a81194a57761780d54f66b81d7242fbd9a5375ceb53f68168b31
+  data.tar.gz: 8915da7876e7d6e0541ac17f82fc7b2dedba1cd78f41b295b2a5162d19b74e8a
 SHA512:
-  metadata.gz: 44528ff333dd050da8f582643d3ea333dba82db57b552a2cd7b8cf17f57e949a973a687a3e06dcf2d5396f931b7af0fac956ca69ba8d0c679e1b7a271cbb7b11
-  data.tar.gz: bdba8e6587e6b7d960165cda7fb92bb6178e8e11aaf2e97e604451338d50f744b8429831a4c7189c6933a69924ae4e18baf1a86ce69007f75401dc2906a02de0
+  metadata.gz: 5bb0b7509dcbede294e117a06019480ab186eef8306eb8bdf08210b88535739526e0b96fa696cc36e3c05c4cfa03eed520b0e177496940b9dbb6fe6ca6ebf99a
+  data.tar.gz: e56a8eef5c977851fda3ccaa58058a577e352bb051a39bd933e38267f950fd7a611f5bb090d5243dfbf1c8d6287a7e6909a9f3f93489d83228dd765ed534e18c

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -11,6 +11,7 @@ import Icon from "../../pb_icon/_icon"
 import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { getDescendantRowIds } from "../Utilities/ExpansionControlHelpers"
 
 interface CustomCellProps {
   getValue?: Getter<string>
@@ -31,13 +32,25 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
-    if (!expandedControl) {
-      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+
+    const willBeExpanded = !row.getIsExpanded();
+    if (willBeExpanded) {
+      if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: true });
+      }
+    } else {
+      if (cascadeCollapse) {
+        const idsToRemove = new Set([row.id, ...getDescendantRowIds(row)]);
+        const nextExpanded = { ...expanded };
+        idsToRemove.forEach((id) => delete nextExpanded[id]);
+        setExpanded(nextExpanded);
+      } else if (!expandedControl) {
+        setExpanded({ ...expanded, [row.id]: false });
+      }
     }
   };
 

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -63,6 +63,7 @@ export const TableHeaderCell = ({
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
+    cascadeCollapse,
   } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -182,7 +183,8 @@ const isToggleExpansionEnabled =
       table.getRowModel(),
       expanded,
       undefined,
-      depth
+      depth,
+      cascadeCollapse
     )
     setExpanded(updated)
   }

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -12,6 +12,7 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
+  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -22,7 +23,8 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination
+  setLocalPagination,
+  cascadeCollapse = false
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -32,15 +34,25 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     if (onToggleExpansionClick) onToggleExpansionClick(row)
-      const updatedExpandedState = await updateExpandAndCollapseState(
-        table.getRowModel(),
-        expanded,
-        row?.parentId,
-        undefined
-      )
 
-      setExpanded(updatedExpandedState)
-  }, [expanded, setExpanded, onToggleExpansionClick, table]);
+    const anyTopLevelExpanded = table.getRowModel().rows.some((r: Row<GenericObject>) => r.getIsExpanded())
+    const isHeaderCollapseAll = row == null && anyTopLevelExpanded
+
+    if (cascadeCollapse && isHeaderCollapseAll) {
+      setExpanded({})
+      return
+    }
+
+    const updatedExpandedState = await updateExpandAndCollapseState(
+      table.getRowModel(),
+      expanded,
+      row?.parentId,
+      undefined,
+      cascadeCollapse
+    )
+
+    setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table, cascadeCollapse]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -11,11 +11,21 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   return expandedState
 }
 
+export const getDescendantRowIds = (row: Row<GenericObject>): string[] => {
+  const ids: string[] = []
+  for (const sub of row.subRows || []) {
+    ids.push(sub.id)
+    ids.push(...getDescendantRowIds(sub))
+  }
+  return ids
+}
+
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
   targetParent?: string,
   targetDepth?: number,
+  cascadeCollapse?: boolean,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
   const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
@@ -51,8 +61,22 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  return filterExpandableRows({
+  const updatedExpandedState = filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
   });
+
+  if (cascadeCollapse && !isExpandAction) {
+    const idsToRemove = new Set<string>();
+    for (const row of rowsToToggle) {
+      const shouldUpdate =
+        targetDepth === undefined ? true : row.depth === targetDepth;
+      if (shouldUpdate) {
+        getDescendantRowIds(row).forEach((id) => idsToRemove.add(id));
+      }
+    }
+    idsToRemove.forEach((id) => delete updatedExpandedState[id]);
+  }
+
+  return updatedExpandedState;
 };

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -31,6 +31,7 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
+  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -80,6 +81,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
+    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -173,7 +175,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination
+    setLocalPagination,
+    cascadeCollapse
   });
 
   // Set table row count for loading state
@@ -339,6 +342,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         {renderFullscreenHeader()}
         <AdvancedTableProvider
+            cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}

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

@@ -1015,4 +1015,77 @@ test("columnStyling.headerFontColor works as excpected", () => {
 
   const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
   expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
-});
+});
+
+test("cascadeCollapse=false (default) preserves existing behavior when parent is re-expanded", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
+  const parentButton = getParentExpandButton()
+  expect(parentButton).toBeInTheDocument()
+  parentButton.click()
+  let subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+  getParentExpandButton().click()
+  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).not.toBeInTheDocument()
+  getParentExpandButton().click()
+  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
+  expect(subRow).toBeInTheDocument()
+})
+
+test("cascadeCollapse=true collapses all descendants when parent is collapsed", () => {
+  render(
+    <AdvancedTable
+        cascadeCollapse
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
+  const parentButton = getParentExpandButton()
+  expect(parentButton).toBeInTheDocument()
+  parentButton.click()
+  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  getParentExpandButton().click()
+  expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
+  getParentExpandButton().click()
+  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+})
+
+test("cascadeCollapse=true with header toggle all: collapse all then expand all shows only direct children", async () => {
+  render(
+    <AdvancedTable
+        cascadeCollapse
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const toggleAllButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(toggleAllButton).toBeInTheDocument()
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  })
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
+  })
+  toggleAllButton.click()
+  await waitFor(() => {
+    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,50 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCascadeCollapse = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          cascadeCollapse
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableCascadeCollapse

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.md

@@ -0,0 +1 @@
+`cascadeCollapse` is an optional prop that is set to 'false' by default. If set to 'true', collapsing any parent row itself or by using the toggle exapansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.

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

@@ -42,6 +42,7 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
+  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

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

@@ -48,4 +48,5 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'

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

@@ -0,0 +1,224 @@
+<%
+  default_options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'India', id: 'in' },
+    { label: 'Mexico', value: 'Mexico', id: 'mx' },
+  ]
+
+  multi_options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+  ]
+
+  autocomplete_options = [
+    { label: "United States", value: "unitedStates", areaCode: "+1", icon: "🇺🇸", id: "us" },
+    { label: "United Kingdom", value: "unitedKingdom", areaCode: "+44", icon: "🇬🇧", id: "gb" },
+    { label: "Pakistan", value: "pakistan", areaCode: "+92", icon: "🇵🇰", id: "pk" },
+  ]
+
+  custom_display_options = [
+    { label: "Strong Bad", value: "strongBad", id: "strong-bad", status: "Offline" },
+    { label: "Strong Mad", value: "strongMad", id: "strong-mad", status: "Online" },
+    { label: "Strong Sad", value: "strongSad", id: "strong-sad", status: "Away" },
+  ]
+
+  custom_display_content = capture do
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "cet-dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "cet-dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "cet-dropdown-avatar-status" }))
+    end
+  end
+%>
+
+<!-- Example 1: Default dropdown -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-default-cet",
+  label: "Default dropdown",
+  margin_bottom: "sm",
+  options: default_options,
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-default-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-default-cet", text: "Select Canada", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-default-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-default-cet";
+    document.getElementById("clear-default-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-default-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "ca" } }));
+    });
+    document.getElementById("simulate-default-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 2: Multi select -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-multi-cet",
+  label: "Multi select dropdown",
+  margin_bottom: "sm",
+  multi_select: true,
+  options: multi_options,
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-multi-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-multi-cet", text: "Select US + UK", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-multi-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-multi-cet";
+    document.getElementById("clear-multi-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-multi-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionIds: ["us", "uk"] } }));
+    });
+    document.getElementById("simulate-multi-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 3: Autocomplete -->
+<%= pb_rails("dropdown", props: {
+  autocomplete: true,
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-autocomplete-cet",
+  label: "Autocomplete dropdown",
+  margin_bottom: "sm",
+  options: autocomplete_options,
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-autocomplete-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-autocomplete-cet", text: "Select Pakistan", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-autocomplete-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-autocomplete-cet";
+    document.getElementById("clear-autocomplete-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-autocomplete-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "pk" } }));
+    });
+    document.getElementById("simulate-autocomplete-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 4: Quick pick (Date Range) -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-quickpick-cet",
+  label: "Quickpick dropdown",
+  margin_bottom: "sm",
+  variant: "quickpick",
+}) %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-quickpick-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-quickpick-cet", text: "Select This Week", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-quickpick-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-quickpick-cet";
+    document.getElementById("clear-quickpick-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-quickpick-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "quickpick-this-week" } }));
+    });
+    document.getElementById("simulate-quickpick-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+  })();
+</script>
+
+<!-- Example 5: Custom display -->
+<%= pb_rails("dropdown", props: {
+  custom_event_type: "form:submitted,pb:dropdown:clearRequest",
+  id: "dropdown-custom-display-cet",
+  label: "Custom display (Subcomponent) dropdown",
+  margin_bottom: "sm",
+  options: custom_display_options,
+}) do %>
+  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display_content }) %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% custom_display_options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal" }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex", props: { wrap: true, gap: "sm", align: "center", margin_bottom: "md" }) do %>
+  <%= pb_rails("button", props: { id: "clear-custom-display-cet", text: "Clear", variant: "primary" }) %>
+  <%= pb_rails("button", props: { id: "select-custom-display-cet", text: "Select Strong Sad", variant: "secondary" }) %>
+  <%= pb_rails("button", props: { id: "simulate-custom-display-cet", text: "Simulate form submit", variant: "secondary" }) %>
+<% end %>
+
+<script>
+  (function() {
+    var id = "dropdown-custom-display-cet";
+    document.getElementById("clear-custom-display-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:clearRequest", { detail: { dropdownId: id } }));
+    });
+    document.getElementById("select-custom-display-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("pb:dropdown:select", { detail: { dropdownId: id, optionId: "strong-sad" } }));
+    });
+    document.getElementById("simulate-custom-display-cet").addEventListener("click", function() {
+      document.dispatchEvent(new CustomEvent("form:submitted", { detail: { dropdownId: id } }));
+    });
+
+    document.addEventListener("pb:dropdown:selected", function(e) {
+      if (e.target && e.target.id === id && e.detail) {
+        var display = e.target.querySelector("[data-dropdown-trigger-custom-display]");
+        if (!display) return;
+        var nameEl = display.querySelector("#cet-dropdown-avatar-name");
+        if (nameEl) nameEl.textContent = e.detail.label;
+        var avatarEl = display.querySelector("#cet-dropdown-avatar");
+        if (avatarEl) {
+          var wrapper = avatarEl.querySelector(".avatar_wrapper");
+          if (wrapper) {
+            var initials = (e.detail.label[0] + (e.detail.label.split(" ").pop() || "")[0]).toUpperCase();
+            wrapper.dataset.name = e.detail.label;
+            wrapper.setAttribute("data-initials", initials);
+          }
+        }
+        var badgeEl = display.querySelector("#cet-dropdown-avatar-status");
+        if (badgeEl && e.detail.status) {
+          var variant = e.detail.status === "Online" ? "success" : e.detail.status === "Offline" ? "neutral" : "warning";
+          badgeEl.querySelector("span").textContent = e.detail.status;
+          badgeEl.className = "pb_badge_kit_" + variant;
+        }
+      }
+    });
+  })();
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md

@@ -0,0 +1,7 @@
+The `custom_event_type` prop lets the dropdown clear when specific events are dispatched. Set it to a comma-separated list of event names (e.g. Turbo or app-specific); when any of those events fire with optional `detail: { dropdownId }`, the matching dropdown clears. You can also listen for selection changes (`pb:dropdown:selected`), clear by dispatching `pb:dropdown:clear`, or set the selection by dispatching `pb:dropdown:select` with `detail: { dropdownId, optionId }` (or `optionIds` for multi-select).
+
+The examples show five distinct variants (default, multi select, autocomplete, quick pick, custom display). In each example, the first button clears the dropdown by dispatching a custom event that the dropdown listens for via `custom_event_type`. The second button sets the selection by dispatching `pb:dropdown:select`. The third button simulates a form submit by dispatching another custom event in `custom_event_type`, so the dropdown clears as it would after a real form submission.
+
+Turbo events (e.g. `turbo:frame-load`, `turbo:frame-render`, `turbo:submit-end`) often fire for many actions or across the page, so using them as `custom_event_type` can clear the dropdown more often than intended. Use them when that scope is what you want; otherwise use app-specific event names and dispatch with `detail: { dropdownId }` when the action happens, or dispatch `pb:dropdown:clear` from your own handler.
+
+Dropdowns with subcomponent structures that show custom displays (e.g. custom trigger or custom display) require a `pb:dropdown:selected` listener to update the visible UI from `event.detail` when a selection is made; clear is handled by the kit.

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

@@ -32,6 +32,7 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
+  - dropdown_custom_event_type: Custom Event Type
 
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -52,6 +52,8 @@ module Playbook
                               default: false
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
+      prop :custom_event_type, type: Playbook::Props::String,
+                               default: ""
 
       def data
         Hash(prop(:data)).merge(
@@ -63,7 +65,8 @@ module Playbook
           start_date_id: variant == "quickpick" ? start_date_id : nil,
           end_date_id: variant == "quickpick" ? end_date_id : nil,
           controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
-          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil
+          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil,
+          custom_event_type: custom_event_type.presence
         ).compact
       end