playbook_ui 16.2.0.pre.alpha.PLAY2828alphafortempo14533 → 16.2.0.pre.alpha.advancedtablecascadingcollapsereact14676

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 28cd9a824fc08c1c05900604d456aa161b4ea960f839abd9d7d656d40aa4bd69
-  data.tar.gz: ef72ce4efcf711790c2db9b3bdb5e975341b4de9c7ce0ab0463fb22cf0d1981b
+  metadata.gz: 3310889318a881050c07f029fb5257de930342ee8eef612020cab8aae49ad888
+  data.tar.gz: b45cc744fe4dfccfab3660baef4909a91278e7551c7de2b6cae8d4abf98849b5
 SHA512:
-  metadata.gz: 267fefb43c858e4925b6547c8b1a0418e377cbece041024ad67ee1c01781844614aa784cbc20882d695090614af4cd644e8040c602ccff99f196943d558fd960
-  data.tar.gz: 5f57f8d288e6790d48837373d7da228726ec934c3ba701cac34dfdda1c1095b3a0430485504150f274b1b25b22b9fd570609843b45c7f5eaba6584cb2e13275f
+  metadata.gz: 29ba51ada748179cd73e7227ea9981f7fc252cc36e644b2e99447e86092f846ec0ca34c5f633070832c861a58f55b5339c8315757e1db2bacf3a61d5301843d4
+  data.tar.gz: d033429369a41a1c3a0785f96b16c45b49378118dfb37d10937a0766803b141ad41e67800d2ba58c1ffd2a2c3927ee7749bacc70062ca5747af694accd8565e6

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_body/_body.scss

@@ -38,7 +38,7 @@
   }
 
   a {
-    color: $primary;
+    color: $text_link;
     &:hover {
       color: $text_default_color;
     }

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -6,7 +6,7 @@ $pb_body_colors: (
   default: $text_default_color,
   light: $text_light,
   lighter: $text_lighter,
-  link: $primary,
+  link: $text_link,
   error: $text_error,
   success: $text_success,
 );

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -115,9 +115,10 @@ $pb_button_sizes: (
 
   // Icon-only button (icon prop set, no text) - square with equal padding
   // Rails: uses .pb_button_icon_only class
-  // React: detects when pb_button_content has an empty text span
+  // React: when pb_button_content is empty (no text). Do not match when content has
+  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
   &.pb_button_icon_only,
-  &:has(.pb_button_content > span:empty) {
+  &:has(.pb_button_content:empty) {
     aspect-ratio: 1;
     min-width: auto;
     width: auto;

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -88,7 +88,7 @@
 .pb_caption_kit_base_link,
 .pb_caption_kit_lg_link,
 .pb_caption_kit_xl_link {
-  color: $primary;
+  color: $text_link;
 }
 
 // Dark theme variants

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -4,7 +4,7 @@
 $pb_caption_colors: (
   default:        $text_default_color,
   light:          $text_light,
-  link:           $primary,
+  link:           $text_link,
   lighter:        $text_lighter,
   success:        $text_success,
   error:          $text_error,

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -62,16 +62,16 @@ $transition: $transition_cubic;
     left: $offscreen;
 
     &:focus ~ .pb_checkbox_checkmark {
-        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
+        box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $input_border_state;
     }
     &:checked ~ .pb_checkbox_checkmark,
     & ~ .pb_checkbox_indeterminate {
       background-color: $primary_action;
-      border-color: $primary_action;
+      border-color: $input_border_state;
 
       &:hover {
         background-color: $primary_action;
-        border-color: $primary_action;
+        border-color: $input_border_state;
       }
     }
     &:checked ~ .pb_checkbox_checkmark,
@@ -112,7 +112,7 @@ $transition: $transition_cubic;
   &.dark {
     input {
       &:focus ~ .pb_checkbox_checkmark {
-        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
+        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $input_border_state_dark;      
       }
 
       &:disabled ~ .pb_checkbox_checkmark {
@@ -154,9 +154,9 @@ $transition: $transition_cubic;
        input {
         &:checked ~ .pb_checkbox_checkmark,
         & ~ .pb_checkbox_indeterminate {
-          border-color: $primary;
+          border-color: $input_border_state_dark;
           &:hover {
-            border-color: $primary;
+            border-color: $input_border_state_dark;
           }
         }
       }

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

@@ -11,9 +11,11 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   connect() {
-    this.element.addEventListener('click', () => {
+    this.clickHandler = () => {
       this.toggleElement(this.target)
-    })
+    }
+    this.element.addEventListener('click', this.clickHandler)
+    
      // Check the initial state of the collapsible content and set the arrow accordingly
      if (this.target.classList.contains('is-visible')) {
       this.displayUpArrow()
@@ -21,9 +23,19 @@ export default class PbCollapsible extends PbEnhancedElement {
       this.displayDownArrow()
     }
     // Listen for a custom event to toggle the collapsible
-    document.addEventListener(`${this.target.id}`, () => {
+    this.customEventHandler = () => {
       this.toggleElement(this.target)
-    })
+    }
+    document.addEventListener(`${this.target.id}`, this.customEventHandler)
+  }
+
+  disconnect() {
+    if (this.clickHandler) {
+      this.element.removeEventListener('click', this.clickHandler)
+    }
+    if (this.customEventHandler && this.target) {
+      document.removeEventListener(`${this.target.id}`, this.customEventHandler)
+    }
   }
 
   get target() {

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -28,10 +28,10 @@
     div.cal_icon_wrapper,
     input.date_picker_input {
       @include transition_default;
-      border-color: $primary;
+      border-color: $status_border_primary;
     }
     .add-on-card {
-      border-color: $primary;
+      border-color: $status_border_primary;
     }
   }
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -221,11 +221,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         {!hideLabel && (
            <label htmlFor={pickerId}>
             {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label">
+              <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
+              >
                 {label} <span style={{ color: `${colors.error}` }}>*</span>
               </Caption>
             ) : (
               <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
                   text={label}
               />
             )}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -7,11 +7,11 @@
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
         <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) do %>
             <%= object.label %><span style="color: #DA0014;"> *</span>
           <% end %>
         <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
+          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) %>
         <% end %>
       </label>
     <% end %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -35,7 +35,6 @@
     .date_picker_input:-webkit-autofill:focus {
       @include pb_textarea_focus_light;
       @include transition_default;
-      border-color: $primary;
     }
 
     input:disabled,

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -13,7 +13,7 @@
 
   // Base styles
   a {
-    color: $primary;
+    color: $text_link;
     &:hover {
       cursor: pointer;
       color: $text_default_color;
@@ -44,7 +44,7 @@
 }
 
 .pb_detail_kit_color_link {
-  @include pb_detail($primary);
+  @include pb_detail($text_link);
 }
 
 .pb_detail_kit_color_error {

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss

@@ -6,7 +6,7 @@ $pb_detail_colors: (
   light:          $text_light,
   default:        $text_default_color,
   lighter:        $text_lighter,
-  link:           $primary,
+  link:           $text_link,
   error:          $text_error,
   success:        $text_success,
 );

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

@@ -8,8 +8,16 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   connect() {
-    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
-    window.addEventListener("turbo:frame-load", () => this.setupDialog())
+    // Store references to this instance's specific elements
+    this.dialogElement = this.element.querySelector(".pb_dialog_rails")
+    this.dialogId = this.dialogElement?.id
+    this.managedTriggers = new Set()
+    
+    this.domContentLoadedHandler = () => this.setupDialog()
+    this.turboFrameLoadHandler = () => this.setupDialog()
+    
+    window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    window.addEventListener("turbo:frame-load", this.turboFrameLoadHandler)
 
     // Code for custom_event_type setup (can take multiple events in a string separated by commas)
     const customEventTypeString = this.element.dataset.customEventType
@@ -24,11 +32,38 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   disconnect() {
+    // Clean up window event listeners
+    if (this.domContentLoadedHandler) {
+      window.removeEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    }
+    if (this.turboFrameLoadHandler) {
+      window.removeEventListener("turbo:frame-load", this.turboFrameLoadHandler)
+    }
+
+    // Clean up custom event listeners
     if (this.customEventTypes && Array.isArray(this.customEventTypes)) {
       this.customEventTypes.forEach(eventType => {
         window.removeEventListener(eventType, this.handleCustomEvent)
       })
     }
+
+    // Clean up only the triggers that this instance managed
+    this.managedTriggers.forEach((trigger) => {
+      if (trigger._openDialogClickHandler) {
+        trigger.removeEventListener("click", trigger._openDialogClickHandler)
+        delete trigger._openDialogClickHandler
+      }
+      if (trigger._closeDialogClickHandler) {
+        trigger.removeEventListener("click", trigger._closeDialogClickHandler)
+        delete trigger._closeDialogClickHandler
+      }
+    })
+
+    // Clean up this dialog's outside click handler
+    if (this.dialogElement && this.dialogElement._outsideClickHandler) {
+      this.dialogElement.removeEventListener("mousedown", this.dialogElement._outsideClickHandler)
+      delete this.dialogElement._outsideClickHandler
+    }
   }
 
   handleCustomEvent = (event) => {
@@ -88,9 +123,12 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   setupDialog() {
-    const openTrigger = document.querySelectorAll("[data-open-dialog]");
-    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
-    const dialogs = document.querySelectorAll(".pb_dialog_rails")
+    // Only set up triggers and dialogs that belong to this instance
+    if (!this.dialogId) return
+    
+    const openTrigger = document.querySelectorAll(`[data-open-dialog="${this.dialogId}"]`);
+    const closeTrigger = document.querySelectorAll(`[data-close-dialog="${this.dialogId}"]`);
+    const dialogs = this.dialogElement ? [this.dialogElement] : []
 
     const loadingButton = document.querySelector('[data-disable-with="Loading"]');
     if (loadingButton && !loadingButton.dataset.listenerAttached) {
@@ -126,6 +164,7 @@ export default class PbDialog extends PbEnhancedElement {
       };
 
       open.addEventListener("click", open._openDialogClickHandler)
+      this.managedTriggers.add(open)
     });
 
     closeTrigger.forEach((close) => {
@@ -139,6 +178,7 @@ export default class PbDialog extends PbEnhancedElement {
       };
 
       close.addEventListener("click", close._closeDialogClickHandler)
+      this.managedTriggers.add(close)
     });
 
     // Close dialog box on outside click