playbook_ui_docs 14.18.0.pre.rc.4 → 14.18.1.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2900bd6939cc2287d04cfc751885d9682695f2701643cfb71a3b312371bf009
-  data.tar.gz: df922ff349761c2b4ee6fa132dd108d8a66bca141643dd9e4984824238466364
+  metadata.gz: 8226a04e0b9d3a603576e664897af1c78de696a2424bff9d2f1c3cc175eb3b20
+  data.tar.gz: 26908d96a707de26e692d69e82133e030b58f5e182ef7a9c6c78eaf73fd2e8b5
 SHA512:
-  metadata.gz: 17707bc936592cfe9cbe958f2b4bffcc4b0522e7ee4f9c79f4a805638b9097237443fbed67967f29b078729bffaa5bd43dbdc3408ea7f39adcc6990c2fef0c49
-  data.tar.gz: 495536380b0be28825f3b91d710caa7cc70f28de17cd392cb0c15a92ce10766770d5d7ff2bd90a0ddbc2a4bb5417770282bf750e3097f7232542a90abb499912
+  metadata.gz: d87219077de517526d95ae44c9023ac104053e2456fbc257d6f944e7bf3f8ff6fb90d62f3c0b0d066b213a42f6a669ed8a38343bdd90549a3805a9abd81ad7f1
+  data.tar.gz: e0b68d0ae0b60d4e6a368b9db99fc35c1d544387be5e5d3d8d83ffa690a5ac67afbb737bc2642d1091f61eb1d4e1929d47a8379a9f6584810904c55524ce6a44

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>
@@ -18,7 +18,7 @@
     chart_data: data_51,
     id: "with-a-block-2",
     rounded: true,
-}) do %> 
+}) do %>
     <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -13,7 +13,7 @@ const dataWithABlock = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -12,7 +12,7 @@ const dataWithColors = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -14,7 +14,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx

@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ])
@@ -29,7 +29,7 @@ const CircleChartLiveData = (props) => {
       value: 12,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 140,
     },
   ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const baseOptions = {
+  series: [{ data: data }],
+}
+
+const CircleChartPbStyles = () => {
+  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -12,7 +12,7 @@ const dataRounded = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

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

@@ -14,6 +14,7 @@ examples:
 
   react:
   - circle_chart_default: Default Style
+  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block
@@ -22,7 +23,5 @@ examples:
   - circle_chart_with_legend_kit: Legend
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_inner_sizes: Inner Circle Size Options
   - circle_chart_custom_tooltip: Tooltip Customization
-
-

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

@@ -8,4 +8,5 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
 export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
-export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("flex", props: { orientation: "column", gap: "sm" }) do %>
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "plus",
+    size: "sm",
+    variant: "primary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "pen",
+    loading: true,
+    size: "sm",
+    variant: "secondary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    disabled: true,
+    icon: "times",
+    size: "sm"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "info",
+    link: "https://playbook.powerapp.cloud/",
+    size: "sm",
+    target: "child",
+    variant: "link"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import CircleIconButton from '../_circle_icon_button'
+import Flex from '../../pb_flex/_flex'
+
+const CircleIconButtonSize = (props) => (
+  <>
+    <Flex gap="sm"
+        orientation="column"
+    >
+        <CircleIconButton
+            icon="plus"
+            size="sm"
+            variant="primary"
+            {...props}
+        />
+        <CircleIconButton
+            icon="pen"
+            loading
+            size="sm"
+            variant="secondary"
+            {...props}
+        />
+        <CircleIconButton
+            disabled
+            icon="times"
+            size="sm"
+            {...props}
+        />
+        <CircleIconButton
+            icon="info"
+            link="https://playbook.powerapp.cloud/"
+            size="sm"
+            target="child"
+            variant="link"
+            {...props}
+        />
+    </Flex>
+  </>
+)
+
+export default CircleIconButtonSize

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md

@@ -0,0 +1 @@
+The `size` prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size.

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

@@ -4,9 +4,11 @@ examples:
   - circle_icon_button_default: Default
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size

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

@@ -2,3 +2,4 @@ export { default as CircleIconButtonDefault } from './_circle_icon_button_defaul
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
 export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
+export { default as CircleIconButtonSize } from './_circle_icon_button_size.jsx'

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

@@ -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

@@ -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

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

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
+import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error="Invalid date. Please pick a valid date."
+        error={<>
+          <Icon icon="warning" /> Invalid date. Please pick a valid date.
+        </>}
         pickerId="date-picker-error"
         {...props}
     />

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

@@ -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

@@ -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.
+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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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_dialog/docs/_dialog_turbo_frames.html.erb

@@ -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>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md

@@ -0,0 +1,9 @@
+The `custom_event_type` prop allows you to specify custom events that will trigger the dialog's initialization or control its behavior. This is especially useful when working with Turbo Frame updates where standard DOM events might not suffice.
+
+The examples demonstrate two use cases:
+1) Opening a dialog via custom event dispatch: The first example shows how to configure a dialog to listen for a specific custom event (dialogOpen). When this event is dispatched, the dialog will automatically open, making it easy to trigger the dialog from JavaScript or after Turbo Frame operations.
+2) Controlling dialog button actions with custom events: The second example demonstrates how to set up a dialog that can have its confirm button triggered through external events (turboResponse). This pattern is useful when you need to programmatically confirm a dialog after some background operation completes.
+3) Multiple custom events: The third example combines the first two to show how `custom_event_type` prop can support multiple event types separated by a comma.
+
+For Turbo integration, you can use standard Turbo events like turbo:frame-load or turbo:submit-end as your `custom_event_type` to ensure the dialog responds properly after Turbo navigation or form submissions. The dialog component will listen for these events automatically.
+The implementation handles various actions including 'open', 'close', 'clickConfirm', and 'clickCancel', making it flexible for different interaction patterns in your Turbo-enhanced application.

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

@@ -11,6 +11,7 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_turbo_frames: Within Turbo Frames
 
 
   react: