playbook_ui 16.5.0.pre.rc.2 → 16.5.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98207b8b5cdcfbfb88cfdb2a778ca623f572afc5e5817ce9d3cd0f1117b336b0
-  data.tar.gz: e603e243afe259f96d162f5bbdef58cb7efdb2ca05fabf942a0ae8f6452dc629
+  metadata.gz: 50ca8e58f947f8dbec4fc7f659410b09588f9b11d0404c18824a67866c5773e7
+  data.tar.gz: d3e1e785a1f9b4f24910a199890f6c8342a5a479f7a3ec948d0f9bed0d88fed4
 SHA512:
-  metadata.gz: 97ced981390eabf50717b0270dd0db9ba7798c0edcdfa0ef2eac929fa3aba2fa8a09492f4e76d26f077a0c37f58a479494d2c5ee2e36e2cedc4ada8158633711
-  data.tar.gz: 39b0df5624e178851b72acd00d548e346c0ab0526ac23f42f4bbb6718db73ccd6e6104edb780885eb7b45954a1368e6b1d6972105d2f93659451ccc66d1ed878
+  metadata.gz: cb09d5d1204fb4929189c91eab464aec3e55257119016aacf4c307a93a7b5626026a633e69905b17ea8c1f9f81e391e8311919fae5bab6f9a2ff6e53f83ff454
+  data.tar.gz: 1a84b06d8c5943f8466234897a3218b27ff344ed65bdc0a96b67a0aa74d6337040ebff422ebcfae70d1cf4fb20b3e5a64ca5975e97d9f70a3878b6248bc0f246

data/app/pb_kits/playbook/pb_table/docs/_sections.yml

@@ -55,6 +55,7 @@ sections:
       - table_with_clickable_rows
       - table_with_selectable_rows
       - table_with_filter_variant
+      - table_with_filter_variant_external_filter_rails
       - table_with_filter_variant_with_pagination
       - table_disable_hover
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.html.erb

@@ -0,0 +1,45 @@
+<%# External filter: capture any filter markup and pass it via the filter prop.
+    Use your own helper (e.g. a search/filter form) or pb_rails("filter") as shown here. %>
+<% users = [
+  { name: "Alex", role: "Engineer" },
+  { name: "Sam", role: "Designer" },
+  { name: "Jordan", role: "Manager" },
+] %>
+
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: {
+    id: "external-filter-demo",
+    template: "single",
+    results: 3,
+    background: false,
+    sort_menu: [
+      { item: "Name", link: "#", active: true, direction: "asc" },
+      { item: "Role", link: "#", active: false },
+    ],
+  }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("text_input", props: { label: "Role", placeholder: "e.g. Engineer, Designer" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "Table with External Filter",
+  filter: filter_output,
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Role" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell") { user[:name] } %>
+        <%= pb_rails("table/table_cell") { user[:role] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md

@@ -0,0 +1,39 @@
+Use the **"with_filter"** variant with an **external filter** (Option B): pass pre-rendered filter markup via the `filter` prop. Same layout as Variant with Filter (card, title, separator, flex); only the filter slot is supplied by you. Use this when you need:
+
+- **Manual filter submission** – Apply / Filter button instead of automatic application
+- **Full control** – Over filter props, template, sort menu, and submission
+- **Custom or app-specific filter helpers** – Any helper that returns filter markup (e.g. search/filter forms)
+
+#### Required props
+
+- `variant: "with_filter"`
+- `filter` – Pre-rendered filter HTML (e.g. from `capture { ... }`)
+
+When `filter` is present, `filter_content` and `filter_props` are ignored.
+
+#### How to do it
+
+1. **Render your filter** (e.g. `pb_rails("filter", ...)` or any helper that returns filter markup).
+2. **Capture the output** with `capture do ... end`.
+3. **Pass it to the Table** as the `filter` prop.
+
+**Example (generic pattern):**
+
+```erb
+<% filter_output = capture do %>
+  <%= pb_rails("filter", props: { template: "single", results: 10, background: false }) do %>
+    <%= pb_rails("text_input", props: { label: "Name", placeholder: "Search by name" }) %>
+    <%= pb_rails("button", props: { text: "Apply" }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "My Table",
+  filter: filter_output,
+}) do %>
+  <%# table_head / table_body ... %>
+<% end %>
+```
+
+For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_rails.md

@@ -26,8 +26,9 @@ The Table kit automatically sets these Filter defaults (which you can override v
 - `min_width: "xs"`
 - `popover_props: { width: "350px" }`
 
+Alternatively, you can pass pre-rendered filter markup via the `filter` prop (e.g. for manual submission or custom filter helpers)—scroll down for that approach.
 
 **IMPORTANT NOTE**: 
 The purpose of this variant is to provide an easy way to set up a Table with a Filter with Design standards applied by default.
 
-If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrating in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).
+If you are looking for more customization than this embedded variant provides, you may be better served by using the individual kits as demonstrated in our Table Filter Card Building Block as seen [here](https://playbook.powerapp.cloud/building_blocks/table_filter_card/rails).

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

@@ -41,6 +41,7 @@ examples:
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
     - table_with_filter_variant_rails: Variant with Filter
+    - table_with_filter_variant_external_filter_rails: Variant with Filter (External Filter)
     - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
     - table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
 

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -16,7 +16,10 @@
       flex_direction: "column",
       gap: "none"
     }) do %>
-      <% if object.filter_content.present? %>
+      <% has_filter = object.filter.present? || object.filter_content.present? %>
+      <% if object.filter.present? %>
+        <%= object.filter %>
+      <% elsif object.filter_content.present? %>
         <%
           default_filter_props = {
             background: false,
@@ -31,7 +34,7 @@
           <%= object.filter_content %>
         <% end %>
       <% end %>
-      <%= pb_rails("section_separator") if object.filter_content.present? %>
+      <%= pb_rails("section_separator") if has_filter %>
       <% if object.pagination.present? %>
         <%= object.pagination %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_table/table.rb

@@ -46,6 +46,10 @@ module Playbook
       prop :filter_props, type: Playbook::Props::HashProp,
                           default: {}
       prop :filter_content
+      # Pre-rendered filter slot (e.g. output of capture { your_filter_helper }).
+      # When present, this is rendered as-is; filter_content and filter_props are ignored.
+      # Use this for manual filter submission or app-specific filter helpers.
+      prop :filter
       prop :pagination
       prop :title, type: Playbook::Props::String,
                    default: nil

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-danger */
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from 'react'
@@ -38,14 +37,26 @@ const TypeaheadWithHighlight = (props) => {
   const [selectedUser, setSelectedUser] = useState()
 
   const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
+    const escapeRegExp = (value = "") => (
+      value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    )
 
-    const highlighted = (text) => {
+    const highlighted = (text = "") => {
       if (!inputValue.length) return text
-      return text.replace(
-        new RegExp(inputValue, 'gi'),
-        (highlighted) => `<mark>${highlighted}</mark>`
-      )
+
+      const escapedInputValue = escapeRegExp(inputValue)
+      const regex = new RegExp(`(${escapedInputValue})`, 'gi')
+      const parts = text.split(regex)
+
+      return parts.map((part, index) => {
+        if (part.toLowerCase() === inputValue.toLowerCase()) {
+          return <mark key={`${part}-${index}`}>{part}</mark>
+        }
+
+        return <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
+      })
     }
+
     return (
       <Flex>
         <FlexItem>
@@ -61,11 +72,12 @@ const TypeaheadWithHighlight = (props) => {
               size={4}
               {...props}
           >
-            <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+            {highlighted(name)}
+          </Title>
           <Body color="light"
               {...props}
           >
-            <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
+            {highlighted(title)}{" • "}
             {territory}
           </Body>
         </FlexItem>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.md

@@ -0,0 +1,3 @@
+Use `formatOptionLabel` to customize each option row and highlight text that matches the current search input. Split each field (for example, `name` and `title`) by the typed value, then render matching parts inside `<mark>` so users can quickly see why a result matched.
+
+See the code snippet below for more details.

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -21,7 +21,8 @@
 }
 
 @mixin hover-underline {
-  .hover_underline:hover {
+  .hover_underline:hover,
+  .group_hover:hover .group_hover.hover_underline {
     text-decoration: underline;
     transition: text-decoration $transition-speed ease;
   }
@@ -29,11 +30,13 @@
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .hover_background-#{"" + $name}:hover {
+      .hover_background-#{"" + $name}:hover,
+      .group_hover:hover .group_hover.hover_background-#{"" + $name} {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
-      .hover_color-#{"" + $name}:hover {
+      .hover_color-#{"" + $name}:hover,
+      .group_hover:hover .group_hover.hover_color-#{"" + $name} {
         color: $color !important;
         transition: color $transition-speed ease;
       }