RubyGems - playbook_ui - Versions diffs - 14.17.0 → 14.18.0.pre.alpha.PLAY20787400 - Mend

playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY20787400

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import usePBCopy from '../../pb_copy_button/usePBCopy'
+import Body from '../../pb_body/_body'
+import Textarea from '../../pb_textarea/_textarea'
+import Tooltip from '../../pb_tooltip/_tooltip'
+const CopyButtonHook = ({...props}) => {
+  // This is how you can use the copy button hook to copy text to the clipboard
+  // eslint-disable-next-line no-unused-vars
+  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
+  // I added a tooltip so it looks better in the ui
+  const [showTooltip, setShowTooltip] = useState(false)
+  const handleCopy = () => {
+    copyToClipboard()
+    setShowTooltip(true)
+    setTimeout(() => setShowTooltip(false), 1500)
+  }
+  useEffect(() => {
+    const el = document.getElementById('hookbody')
+    if (!el) return
+    el.addEventListener('click', handleCopy)
+    return () => {
+      el.removeEventListener('click', handleCopy)
+    }
+  }, [copyToClipboard])
+  return (
+    <div>
+      <Tooltip
+          delay={{ close: 1000 }}
+          forceOpenTooltip={showTooltip}
+          placement="top"
+          showTooltip={false}
+          text="Copied!"
+      >
+        <Body
+            cursor="pointer"
+            id="hookbody"
+            text="I'm a custom copy hook! Click this body to copy this text!"
+        />
+      </Tooltip>
+      <Textarea
+          {...props}
+          placeholder="Paste here"
+      />
+    </div>
+  )
+}
+export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md ADDED Viewed

@@ -0,0 +1,3 @@
+We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
+`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb ADDED Viewed

@@ -0,0 +1,14 @@
+<%= pb_rails("body", props: { cursor: "pointer", data: { "external-copy-from": "hookbody"} }) do %>
+  <span id="hookbody">I'm a custom copy hook! Click this body to copy this text!</span>
+<% end %>
+<%= pb_rails("tooltip", props: {
+  trigger_element_selector: "#hookbody",
+  tooltip_id: "hookbody_tooltip",
+  position: 'top',
+  trigger_method: "click"
+}) do %>
+  Copied!
+<% end %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md ADDED Viewed

@@ -0,0 +1,3 @@
+You can use any external control (like the text itself or an icon) to copy. To use this hook, set the `data-external-copy-from` attribute on the external control to the copying ID. This will grab the `innerText` from `your_id` element, or `value` if it is an input element. Alternatively, you can set a `data-external-copy-value` attribute and copy custom text.
+See the code example for details.

data/app/pb_kits/playbook/pb_copy_button/docs/example.yml CHANGED Viewed

@@ -2,7 +2,9 @@ examples:
   rails:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  - copy_button_hook_rails: Copy Hook
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  - copy_button_hook: Copy Hook

data/app/pb_kits/playbook/pb_copy_button/docs/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
-export { default as CopyButtonFrom } from './_copy_button_from.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx'
+export { default as CopyButtonHook } from './_copy_button_hook.jsx'

data/app/pb_kits/playbook/pb_copy_button/index.js CHANGED Viewed

@@ -1,6 +1,33 @@
 import PbEnhancedElement from "../pb_enhanced_element"
-export default class PbCopyButton extends PbEnhancedElement {
+function getTextFromElement(element) {
+  if (!element) return ''
+  return element.tagName.toLowerCase() === 'input'
+    ? element.value
+    : element.innerText
+}
+function copyTextToClipboard(text) {
+  if (!text) return
+  navigator.clipboard.writeText(text)
+    .catch(err => console.error('Failed to copy text:', err))
+}
+function handleExternalControlCopyClick(element) {
+  const value = element.getAttribute('data-external-copy-value')
+  const fromId = element.getAttribute('data-external-copy-from')
+  if (value) {
+    copyTextToClipboard(value)
+  } else if (fromId) {
+    const fromElement = document.querySelector(`#${fromId}`)
+    copyTextToClipboard(getTextFromElement(fromElement))
+  } else {
+    console.warn('Failed to copy:', element)
+  }
+}
+export class PbCopyButton extends PbEnhancedElement {
   static get selector() {
     return '.pb_copy_button_kit'
   }
@@ -20,28 +47,27 @@ export default class PbCopyButton extends PbEnhancedElement {
   }
   handleClick() {
+    const value = this.element.getAttribute('data-copy-value')
     const fromId = this.element.getAttribute('data-from')
-    if (fromId) {
-      const fromElement = document.querySelector(`#${fromId}`)
-      if (fromElement) {
-        let contentToCopy = ''
-        if (fromElement.tagName.toLowerCase() === 'input') {
-          contentToCopy = fromElement.value
-        } else {
-          contentToCopy = fromElement.innerText
-        }
-        navigator.clipboard.writeText(contentToCopy)
-          .catch(err => console.error('Failed to copy text', err))
-        return
-      }
-    }
-    const textToCopy = this.element.getAttribute('data-copy-value')
-    if (textToCopy) {
-      navigator.clipboard.writeText(textToCopy)
-        .catch(err => console.error('Failed to copy text', err))
+    if (value) {
+      copyTextToClipboard(value)
+    } else if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      copyTextToClipboard(getTextFromElement(fromElement))
     } else {
-      console.warn('No data-copy-value attribute found or data-from element')
+      console.warn('No data-copy-value or data-from attribute found')
     }
   }
 }
+export function addCopyEventListeners() {
+  const externalCopyElements = [
+    ...document.querySelectorAll('div[data-external-copy-value]'),
+    ...document.querySelectorAll('div[data-external-copy-from]')
+  ]
+  externalCopyElements.forEach(element => {
+    element.addEventListener('click', () => handleExternalControlCopyClick(element))
+  })
+}

data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts ADDED Viewed

@@ -0,0 +1,45 @@
+import { useState, useRef, useEffect } from 'react'
+type UsePBCopyProps = {
+  value?: string
+  from?: string
+  timeout?: number
+}
+export default function usePBCopy({
+  value = '',
+  from = '',
+  timeout = 0,
+}: UsePBCopyProps) {
+  const [copied, setCopied] = useState(false)
+  const timerRef = useRef<number>()
+  const copy = () => {
+    if (!value && !from) return
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else {
+      const el = document.getElementById(from)
+      let text = el?.innerText
+      if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
+        text = el.value
+      }
+      if (text) navigator.clipboard.writeText(text)
+    }
+    setCopied(true)
+    window.clearTimeout(timerRef.current)
+    timerRef.current = window.setTimeout(() => {
+      setCopied(false)
+    }, timeout)
+  }
+  useEffect(() => {
+    return () => {
+      window.clearTimeout(timerRef.current)
+    }
+  }, [])
+  return [copied, copy] as const
+}

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

@@ -50,6 +50,10 @@ type DatePickerProps = {
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
+  controlsStartId?: string,
+    controlsEndId?: string,
+    syncStartWith?: string,
+    syncEndWith?: string,
 } & GlobalProps
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
@@ -98,6 +102,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     staticPosition = true,
     thisRangesEndToday = false,
     yearRange = [1900, 2100],
+    controlsStartId,
+    controlsEndId,
+    syncStartWith,
+    syncEndWith,
   } = props
   const ariaProps = buildAriaProps(aria)
@@ -134,6 +142,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       staticPosition,
       thisRangesEndToday,
       yearRange,
+      controlsStartId,
+      controlsEndId,
+      syncStartWith,
+      syncEndWith,
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb CHANGED Viewed

@@ -77,6 +77,14 @@ module Playbook
                                default: ""
       prop :validation_message, type: Playbook::Props::String,
                                 default: ""
+      prop :controls_start_id, type: Playbook::Props::String,
+                               default: ""
+      prop :controls_end_id, type: Playbook::Props::String,
+                             default: ""
+      prop :sync_start_with, type: Playbook::Props::String,
+                             default: ""
+      prop :sync_end_with, type: Playbook::Props::String,
+                           default: ""
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -108,6 +116,10 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
+          controlsStartId: controls_start_id,
+          controlsEndId: controls_end_id,
+          syncStartWith: sync_start_with,
+          syncEndWith: sync_end_with,
         }.to_json.html_safe
       end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts CHANGED Viewed

@@ -32,7 +32,11 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
-  yearRange: number[]
+  yearRange: number[],
+  controlsStartId?: string,
+    controlsEndId?: string,
+    syncStartWith?: string,
+    syncEndWith?: string,
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
@@ -67,6 +71,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
+    controlsStartId,
+    controlsEndId,
+    syncStartWith,
+    syncEndWith,
   } = config
   // ===========================================================
@@ -275,6 +283,47 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
+  // === Automatic Sync Logic for 3 input range pattern===
+  // If this is a quickpick that controls start and end
+  if (selectionType === "quickpick" && (controlsStartId || controlsEndId)) {
+    picker.config.onClose.push((selectedDates:string) => {
+      const [start, end] = selectedDates;
+      if (controlsStartId) {
+        const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        startPicker?.setDate(start, true);
+      }
+      if (controlsEndId) {
+        const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        endPicker?.setDate(end, true);
+      }
+    });
+  }
+  // If this is a start picker that syncs with a quickpick
+  if (syncStartWith) {
+    picker.config.onClose.push((selectedDates: string) => {
+      if (selectedDates?.length) {
+        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
+      }
+    });
+  }
+  // If this is an end picker that syncs with a quickpick
+  if (syncEndWith) {
+    picker.config.onClose.push((selectedDates: string) => {
+      if (selectedDates?.length) {
+        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
+      }
+    });
+  }
+// === End of Automatic Sync Logic ===
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md CHANGED Viewed

@@ -1,3 +1,7 @@
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selection_type` must be set to `quickpick`
 This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
 Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md CHANGED Viewed

	@@ -1 +1 @@
1	- ~~Because~~ ~~the~~ ~~Quick~~ ~~Pick~~ ~~variant~~ ~~has~~ ~~`allowInput`~~ ~~set~~ to ~~`true`~~ by ~~default~~, ~~use~~ ~~the~~ ~~`onClose`~~ ~~handler~~ ~~function~~ to ~~access~~ ~~the~~ ~~startDate~~ ~~and~~ ~~endDate~~ ~~values.~~ ~~See~~ the `~~onClose~~` ~~example~~ ~~for~~ ~~details~~.
1	+ Use `this_ranges_end_today`/`thisRangesEndToday` to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the `this_ranges_end_today`/`thisRangesEndToday` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md CHANGED Viewed

@@ -1 +1,5 @@
-Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selectionType` must be set to `quickpick`
+Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import React from "react";
+import DatePicker from "../_date_picker";
+const DatePickerRangePattern = (props) => {
+  return (
+    <>
+      <DatePicker
+          controlsEndId="end-date-picker"
+          controlsStartId="start-date-picker"
+          mode="range"
+          pickerId="quickpick-for-range"
+          placeholder="Select a Range"
+          selectionType="quickpick"
+          {...props}
+      />
+      <DatePicker
+          pickerId="start-date-picker"
+          placeholder="Select a Start Date"
+          syncStartWith="quickpick-for-range"
+          {...props}
+      />
+      <DatePicker
+          pickerId="end-date-picker"
+          placeholder="Select a End Date"
+          syncEndWith="quickpick-for-range"
+          {...props}
+      />
+    </>
+  );
+};
+export default DatePickerRangePattern;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md ADDED Viewed

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+**For the Quickpick DatePicker**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb ADDED Viewed

@@ -0,0 +1,20 @@
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "quick-pick-date-range",
+  placeholder: "Select a Date Range",
+  selection_type: "quickpick",
+  controls_end_id: "quick-pick-date-range-end",
+  controls_start_id: "quick-pick-date-range-start",
+}) %>
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-start",
+  placeholder: "Select a Start Date",
+  sync_start_with:"quick-pick-date-range",
+}) %>
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-end",
+  placeholder: "Select an End Date",
+  sync_end_with:"quick-pick-date-range",
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md ADDED Viewed

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+**For the Quickpick DatePicker**:
+`controls_start_id`: ID of the DatePicker that should receive the start date.
+`controls_end_id`: ID of the DatePicker that should receive the end date.
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+**For the Start/End DatePickers**:
+`sync_start_with`: ID of the quickpick this start date is synced to.
+`sync_end_with`: ID of the quickpick this end date is synced to.
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml CHANGED Viewed

@@ -15,6 +15,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -47,6 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js CHANGED Viewed

@@ -26,3 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx CHANGED Viewed

@@ -238,6 +238,16 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       },
       onClose(selectedDates: Array<Date>) {
+        // Patch .clear() to also remove active state if cleared
+        const originalClear = fp.clear;
+        fp.clear = function (...args: any) {
+          const current = pluginData.rangesNav.querySelector('.active');
+          if (current) {
+            current.classList.remove('active');
+          }
+          activeLabel = "";
+          return originalClear.apply(this, args);
+        };
         // remove the active class from the button if the selected dates don't match the label
         if (!isLabelMatchingSelectedDates(selectedDates)) {
           pluginData.rangesButtons[activeLabel]?.classList.remove('active');

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb CHANGED Viewed

@@ -1,7 +1,16 @@
 <div
     class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
     data-pb-dialog-wrapper="true"
-    data-overlay-click= <%= object.overlay_close %>
+    data-overlay-click="<%= object.overlay_close %>"
+    <% if object.custom_event_type.present? %>
+        data-custom-event-type="<%= object.custom_event_type %>"
+    <% end %>
+    <% if object.confirm_button_id.present? %>
+        data-confirm-button-id="<%= object.confirm_button_id %>"
+    <% end %>
+    <% if object.cancel_button_id.present? %>
+        data-cancel-button-id="<%= object.cancel_button_id %>"
+    <% end %>
 >
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>

data/app/pb_kits/playbook/pb_dialog/dialog.rb CHANGED Viewed

@@ -21,6 +21,8 @@ module Playbook
       prop :status, type: Playbook::Props::Enum,
                     values: ["info", "caution", "delete", "error", "success", "default", ""],
                     default: ""
+      prop :custom_event_type, type: Playbook::Props::String,
+                               default: ""
       def classname
         generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb ADDED Viewed

@@ -0,0 +1,117 @@
+<%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
+    <%= pb_rails("button", props: { id: "button-open-example-turbo-frames", margin_right: "md", text: "Open Dialog via Custom Event" }) %>
+    <%= pb_rails("button", props: { id: "open-dialog-button", data: { open_dialog: "dialog-confirm-turbo-frames" }, margin_right: "md", text: "Custom Event Linked to Confirm Button" }) %>
+    <%= pb_rails("button", props: { id: "button-open-multi-dialog", text: "Mutliple Events Example" }) %>
+<% end %>
+<!-- Example 1: Basic dialog with custom event opening -->
+<%= pb_rails("dialog", props: {
+  id: "dialog-open-turbo-frames",
+  title: "Click Event Simulation",
+  text: "Demonstrating Opening the Dialog with a Custom Event.",
+  custom_event_type: "dialogOpen",
+  cancel_button: "Cancel Button",
+  confirm_button: "Okay",
+  confirm_button_id: "confirm-button-turbo-frames"
+}) %>
+<script>
+    document.getElementById("button-open-example-turbo-frames").addEventListener("click", () => {
+        console.log("📣 Dispatching 'dialogOpen' custom event")
+        window.dispatchEvent(new CustomEvent("dialogOpen", {
+            bubbles: true,
+            detail: {
+                dialogId: "dialog-open-turbo-frames",
+                action: "open"
+            }
+        }))
+        console.log("✅ Custom event dispatched - dialog should open")
+    })
+</script>
+<!-- Example 2: Dialog with custom event linking confirm button to closing the dialog-->
+<%= pb_rails("dialog", props: {
+  id: "dialog-confirm-turbo-frames",
+  title: "Custom Event Button Action",
+  text: "Clicking this dialog's confirm button triggers closing the dialog as well.",
+  custom_event_type: "turboResponse",
+  cancel_button: "Cancel",
+  cancel_button_id: "cancel-button-id-turbo-frames",
+  confirm_button: "Confirm Button",
+  confirm_button_id: "confirm-button-id-turbo-frames"
+}) %>
+<script>
+  window.addEventListener("turboResponse", (event) => {
+    const { dialogId, action, cancelButtonId } = event.detail || {}
+    console.log("📦 turboResponse event triggered:", { dialogId, action, cancelButtonId })
+    if (action === "close" && cancelButtonId) {
+        const dialog = document.getElementById(dialogId)
+        if (dialog?.close) {
+          console.log("🚪 Closing dialog programmatically")
+          dialog.close()
+        }
+    }
+  })
+  document.getElementById("confirm-button-id-turbo-frames").addEventListener("click", function () {
+    console.log("✅ Confirm button clicked! Triggering cancel via turboResponse")
+    window.dispatchEvent(new CustomEvent("turboResponse", {
+      detail: {
+        dialogId: "dialog-confirm-turbo-frames",
+        action: "close",
+        cancelButtonId: "cancel-button-id-turbo-frames"
+      }
+    }))
+  })
+</script>
+<!-- Example 3: Dialog with multiple custom event types -->
+<%= pb_rails("dialog", props: {
+  id: "multi-event-dialog",
+  title: "Multiple Event Types",
+  text: "This dialog responds to multiple custom event types - see console logs.",
+  custom_event_type: "dialogOpenMutli,turboResponseMulti",
+  cancel_button: "Cancel",
+  cancel_button_id: "multi-event-cancel",
+  confirm_button: "Confirm",
+  confirm_button_id: "multi-event-confirm"
+}) %>
+<script>
+  document.getElementById("button-open-multi-dialog").addEventListener("click", () => {
+    console.log("📣 Dispatching 'dialogOpenMutli' custom event")
+    window.dispatchEvent(new CustomEvent("dialogOpenMutli", {
+      detail: {
+        dialogId: "multi-event-dialog",
+        action: "open"
+      }
+    }))
+  })
+  document.getElementById("multi-event-confirm")?.addEventListener("click", function() {
+    console.log("✅ Confirm clicked — dispatching 'turboResponseMulti' to simulate dialog close")
+    window.dispatchEvent(new CustomEvent("turboResponseMulti", {
+      detail: {
+        dialogId: "multi-event-dialog",
+        action: "close",
+        cancelButtonId: "multi-event-cancel"
+      }
+    }))
+  })
+  window.addEventListener("turboResponseMulti", (event) => {
+    const { dialogId, action, cancelButtonId } = event.detail || {}
+    if (action === "close" && dialogId) {
+      const dialog = document.getElementById(dialogId)
+      dialog.close?.()
+      console.log("🚪 Closing dialog programmatically")
+    }
+  })
+</script>