playbook_ui_docs 16.3.0.pre.alpha.PLAY2779dropdowncustomeventtype14814 → 16.3.0.pre.alpha.PLAY2782RTEPOCs14847

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a202b4c2d3abe944d7248f78ad90917976c11e6176a02cf34028626534ee356d
-  data.tar.gz: 693c9c1f71ae0d1526478936dd9555a57bc84f8600e2c94ee3245a1cee75ce13
+  metadata.gz: efef1934021c9309797dd15f3dbf712e4c95e8e8affebfa7192ff7f70e2048f0
+  data.tar.gz: a8bc4593e2739a3f311a48f2864e4a4591a35efabca6dc37d0633f1fd62e1a1c
 SHA512:
-  metadata.gz: bed570031f4aed95e8ac18ed1e70c97c0d8f6bc00f55274f7c3f3bdc5360a74b402cf9273e8263a037f06222eb614f7bf644eef163efe23eb42cf5f6afd9f4ee
-  data.tar.gz: f805a1699bd6d1d8aeeed6a5d215df5a7d00c81ab10c23276d18d158175b74d438169707f5530470625665b1ffe7f6e2ecd1e8e9cc6b174ae1a03f23d4fb39b8
+  metadata.gz: bce457e3715a19e86a40cd38a254767aa433a05a36722af32916ec8ae03bbab1f69881af873befc897e5db34872d4a8e9397d91aeb4f21b93b11118d37929184
+  data.tar.gz: dc1acc8eb5433d3959757fc1a9a446367fc9a0d47ed0a837a365b808f04156b86827851c9d90d8916089ccee88a517a871329a9f1e277c78910c3b87e59fb089

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

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_lexxy_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor_lexxy", props: { input_options: { id: 'lexxy_editor_id', name: "hidden_input_name" }, placeholder: "Write something…" }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_lexxy_default.md

@@ -0,0 +1 @@
+Lexxy (37signals / Lexical) kit — form-associated custom element; submits with the form like a textarea. Attachments disabled in this demo. Use `pb_rails("rich_text_editor_lexxy", props: { input_options: { id: "...", name: "..." }, placeholder: "..." })`.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor_quill", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.md

@@ -0,0 +1 @@
+Quill kit — framework-agnostic editor with Snow theme. Content is synced to a hidden input for Rails form submission. Use `pb_rails("rich_text_editor_quill", props: { input_options: { id: "...", name: "..." }, value: "..." })`.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor_tiptap", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.md

@@ -0,0 +1 @@
+TipTap (vanilla JS) kit — no React. Same editor core as the React TipTap variant; content is synced to a hidden input for Rails form submission. Use `pb_rails("rich_text_editor_tiptap", props: { input_options: { id: "...", name: "..." }, value: "..." })`.

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

@@ -11,6 +11,9 @@ examples:
   - rich_text_editor_inline: Inline
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
+  - rich_text_editor_tiptap_default: "TipTap (Vanilla JS)"
+  - rich_text_editor_quill_default: "Quill"
+  - rich_text_editor_lexxy_default: "Lexxy"
 
   react:
   - rich_text_editor_default: Default

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.3.0.pre.alpha.PLAY2779dropdowncustomeventtype14814
+  version: 16.3.0.pre.alpha.PLAY2782RTEPOCs14847
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-03-06 00:00:00.000000000 Z
+date: 2026-03-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -863,8 +863,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_closing_options_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_event_type.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb
@@ -1984,10 +1982,14 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_lexxy_default.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_lexxy_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_quill_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
@@ -1997,6 +1999,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.html.erb
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tiptap_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx

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

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

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

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