playbook_ui_docs 16.3.0 → 16.4.0.pre.alpha.displaybreakpoints15091

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c30a1eb8819bc6eed0fb4ac8ed734d16c3998584733bc0688ea9bd737b3de932
-  data.tar.gz: 9b4e571da9f7698c37254f5124664a9d4d0638526f66856a42dbe2a1437864d3
+  metadata.gz: 4d76349497c9aed9fbdb3db641ffc35173b5b359a82e3002169c22dac3bd7bd5
+  data.tar.gz: 93ac2b9d7fb72999554b19883582e24168ec8e00ebc57cc6a4a01aefeb81b1e0
 SHA512:
-  metadata.gz: a654f7d5a8939fe9c334afba17c2ed0709598b9615508d0c4bb6035560d5a9cb10ee215d15f6ba6e16a47ef1e407c6ff331e37adfde700d86a896c43219182c3
-  data.tar.gz: 88a2f58003dbf098870ad2cc694e249a5f7fefed1b359a1be4d4d6949440554316b7564d26c469c290a5848b249ed4ee5be1cad292bd59e05f7573a8e1ef9bf4
+  metadata.gz: 5f7a324c2d795c8f7950252bc26fda991c90b20a71620f53646fcae7dea1e12c3f2e3fe777f51dae18f6b82cb74a9ef5483a4fd355847b51305353d96a8698a2
+  data.tar.gz: ac4f91556a586902d24d8a647dee141c1501dea08671ac8791ec2decb7b5942bf2949f8220f774dd38d46854c6cce8c9ca511cdb8e5d8d31426a69fe1e32ba16

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/_advanced_table_sort_parent_only.jsx

@@ -0,0 +1,175 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+import Caption from "../../pb_caption/_caption"
+
+const sharedColumnDefinitions = [
+  {
+    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",
+  },
+]
+
+const sortByColumnDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+    enableSort: true,
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+    enableSort: true,
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  },
+]
+
+const sortByColumnMultiDefinitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+            enableSort: true,
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+            enableSort: true,
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const AdvancedTableSortParentOnly = (props) => {
+  return (
+    <div>
+      <Caption text="Enable Sorting (first column) + sortParentOnly" />
+      <AdvancedTable
+          columnDefinitions={sharedColumnDefinitions}
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md" 
+          text="Sort by column + sortParentOnly"
+      />
+      <AdvancedTable
+          columnDefinitions={sortByColumnDefinitions}
+          enableSortingRemoval
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+      <Caption marginTop="md" 
+          text="Sort by column (multi-column) + sortParentOnly"
+      />
+      <AdvancedTable
+          columnDefinitions={sortByColumnMultiDefinitions}
+          enableSortingRemoval
+          sortParentOnly
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSortParentOnly

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

@@ -0,0 +1,5 @@
+The `sortParentOnly` prop is a boolean set to `false` by default. When set to `true`, only parent (depth-0) rows are re-ordered when sorting; children and grandchildren stay grouped under their parent and keep their original order.
+
+`sortParentOnly` works with every sorting mode: `enableSorting` on the header, per-column `enableSort: true`, and sortable leaf columns in the multi-header variant. Sort indicators behave as usual.
+
+When omitted or `false`, sorting applies to all levels.

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

@@ -39,9 +39,11 @@ examples:
   - advanced_table_sort_per_column: Enable Sort By Column
   - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
+  - advanced_table_sort_parent_only: Sort Parent Only
   - 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,6 @@ 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'
+export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'

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

@@ -28,7 +28,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
 import Button from '../../pb_button/_button'
 import Caption from '../../pb_caption/_caption'
 import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const DialogCompound = () => {
@@ -25,8 +25,11 @@ const DialogCompound = () => {
           <Body>{'What do you need us to take care of?'}</Body>
         </Dialog.Header>
         <Dialog.Body>
-          <Caption marginBottom="xs">{'Description'}</Caption>
-          <RichTextEditor />
+          <Textarea
+              id="default-example-1"
+              label="Description"
+              rows={4}
+          />
           <br />
           <Caption>
             {

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

@@ -12,7 +12,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-7"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
 
@@ -31,7 +31,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-8"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     
@@ -49,7 +49,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-9"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -77,8 +77,11 @@ const DialogFullHeight = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id="default-example-1"
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

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

@@ -13,7 +13,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-2"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     <% end %>
@@ -32,7 +32,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-3"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>
@@ -50,7 +50,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-4"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from "../../pb_textarea/_textarea";
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -76,8 +76,11 @@ const DialogFullHeightPlacement = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id={`default-example-2-${index}`}
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

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

@@ -0,0 +1,16 @@
+<%
+  options = [
+    { label: "United States", value: "unitedStates", id: "us" },
+    { label: "Canada", value: "canada", id: "ca" },
+    { label: "Pakistan", value: "pakistan", id: "pk" },
+  ]
+%>
+
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Any" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "any", margin_bottom: "md" }) %>
+
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "outside", margin_bottom: "md" }) %>
+
+<%= pb_rails("caption", props: { margin_bottom: "xs", text: "Inside" }) %>
+<%= pb_rails("dropdown", props: { options: options, close_on_click: "inside" }) %>

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

@@ -0,0 +1 @@
+The `close_on_click` prop allows you to control when the Dropdown closes in response to click interactions. The value `any` reflects the default behavior, where the dropdown will close after any click. Set it to `outside` to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to `inside` for a dropdown that only closes when the input or dropdown menu is clicked.

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>