playbook_ui 18.1.0.pre.rc.0 → 18.1.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 73aa2379cffe56b84ee997cf41ef0b64612bfe0d9759f98dc44b2ced32b2ec10
-  data.tar.gz: 3b9a750583ef9058572ea2490712624b6cd1a69ece3435388fd55bcd88259820
+  metadata.gz: 8885b14507b1ffa09091188f028bc63097b1d187eae55a40673ac13a0a8d67c1
+  data.tar.gz: b5266d626ee2c9c069c5e18f7bf9b55c7e62d04f394645c1babca4bf7f1f0bf0
 SHA512:
-  metadata.gz: 76deee8035672747d6d959b378ab0f04f6c10bbf4eb7029ad346977b1d1b687b3560ebd6707e4daf978a2c4b8069834f9017842da346afb92ca258232d68230b
-  data.tar.gz: 8f1d3ea325d14bd6fdb3f179d818c44fe016535608370bb838620ed958ad8a0d7b26b5319e9021416b2e6eb4b08414bf933dd634a957543556b1254467a75c85
+  metadata.gz: 641e3a2789ab3416e5f5f594c0c33fe31510e55750c4d1432b9acfa35a9f5f50529e1eb1663244c4faefbd353ebf15731f470c457fe365954125bd18c7e55183
+  data.tar.gz: 90781fad9169b4c1a23c078ec59a38448562d6cee63811282cbddb011a9269ac177bf5435472d2164aeebe2c36139e0d3763cf52539a03aee3865c54c409fa46

data/app/pb_kits/playbook/pb_form/docs/_form_model_values.html.erb

@@ -0,0 +1,43 @@
+<%
+  load Playbook.kit_path("form", "docs", "_sample_data.ruby").to_s
+
+  dropdown_options = [
+    { label: "Open", value: "open", id: "status-open" },
+    { label: "Closed", value: "closed", id: "status-closed" },
+  ]
+
+  example_model = Class.new do
+    include ActiveModel::Model
+    attr_accessor :name, :spots, :starts_at, :ends_at, :status, :phone
+
+    def self.name
+      "Example"
+    end
+  end.new(
+    name: "Gary 🎉",
+    spots: 42,
+    starts_at: Time.utc(2026, 8, 22, 19, 37, 0),
+    ends_at: Time.utc(2026, 8, 20, 23, 59, 0),
+    status: "open",
+    phone: "+15551234567"
+  )
+  example_model.errors.add(:name, "cannot contain emoji")
+  example_model.errors.add(:spots, "must be 20 or fewer")
+  example_model.errors.add(:starts_at, "must be before ends at")
+%>
+
+<%= pb_rails("card", props: PlaybookFormDocsSampleData.demo_form_card_props) do %>
+  <%= pb_form_with(model: example_model, method: :get, url: "", html: { onsubmit: "return false;" }) do |form| %>
+    <%= form.text_field :name, props: { label: true } %>
+    <%= form.number_field :spots, props: { label: true } %>
+    <%= form.date_picker :starts_at, props: { label: true } %>
+    <%= form.date_picker :ends_at, props: { label: true } %>
+    <%= form.dropdown_field :status, props: { label: true, options: dropdown_options } %>
+    <%= form.phone_number_field :phone, props: { label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit %>
+      <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_model_values.md

@@ -0,0 +1,22 @@
+When the form is bound to a model (`model:` / `options: { model: ... }`), builder fields read attribute values and validation errors automatically — similar to Rails `text_field`. You usually do not need `default_date`, `value`, `default_value`, `selected_ids`, or `error`:
+
+```erb
+<%= form.date_picker :starts_at, props: { label: true } %>
+```
+
+This example is an edit form after a failed validation: values come from the model, and errors appear under invalid attributes. Explicit props still win when you pass them.
+
+| Field | Auto value | Auto error |
+| --- | --- | --- |
+| `date_picker` | `default_date` (wall-clock `YYYY-MM-DDT00:00:00`) | yes |
+| `time_picker` | `default_time` (HH:MM) | yes |
+| `dropdown_field` | `default_value` (matched via `options`) | yes |
+| `star_rating_field` | `default_value` | n/a |
+| `multi_level_select` | `selected_ids` | yes |
+| `phone_number_field` / `intl_telephone` | `value` | yes |
+| `typeahead` | `default_options` only if already option-shaped | yes |
+| text / textarea / select / `collection_select` | via Rails | yes |
+
+**Notes**
+- Dropdown needs `options` so a stored id/value can resolve to an option hash; unmatched ids are left unset.
+- Typeahead only auto-binds when the attribute is `{ label, value }` (or an array of those). A bare database id still needs explicit `default_options`.

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

@@ -4,5 +4,6 @@ examples:
   - form_defaults: Defaults
   - form_validation: Validation and Error Messages
   - form_default_values: Default Values
+  - form_model_values: Model Values + Errors
   - form_loading: Loading
   - form_multi_column: Multi-Column Layout

data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx

@@ -1,3 +1,14 @@
+// selected_ids / tree_data ids may be strings or numbers; includes() is strict.
+export const selectedIdsInclude = (
+  selectedIds: Array<string | number> | null | undefined,
+  id: string | number
+): boolean => {
+  if (!selectedIds || !selectedIds.length) return false
+
+  const target = String(id)
+  return selectedIds.some((selectedId) => String(selectedId) === target)
+};
+
 // Function is going over formattedData and returning all objects that match the
 // ID of the clicked item from the dropdown
 export const filterFormattedDataById = (
@@ -160,7 +171,7 @@ export const getExpandedItems = (
 
       // Only expand based on selected items if showCheckedChildren is true
       if (showCheckedChildren) {
-        if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+        if (selectedIdsInclude(selectedIds, item.id)) {
           expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
         }
         if (Array.isArray(item.children)) {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -32,6 +32,7 @@ import {
   getDefaultCheckedItems,
   recursiveCheckParent,
   getExpandedItems,
+  selectedIdsInclude,
 } from "./_helper_functions";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
@@ -248,9 +249,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
         const isDisabled =
           item.disabled || (parentDisabled && !returnAllSelected);
 
-          const explicitlySelected = Boolean(
-            selectedIds && selectedIds?.length && selectedIds.includes(item.id)
-          );
+          const explicitlySelected = selectedIdsInclude(selectedIds, item.id);
 
           const checked =
           !isDisabled &&

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -546,6 +546,32 @@ describe('MultiLevelSelect tree_helpers', () => {
       expect(formatted[0].children[1].checked).toBe(false)
     })
 
+    test('matches selected ids when selected_ids are numbers and tree ids are strings', () => {
+      const numericTree = [
+        {
+          id: '101',
+          label: 'Parent',
+          children: [{ id: '102', label: 'Child' }],
+        },
+      ]
+      const formatted = addCheckedAndParentProperty(cloneTree(numericTree), [102])
+      expect(formatted[0].children[0].checked).toBe(true)
+      expect(formatted[0].checked).toBe(false)
+    })
+
+    test('matches selected ids when selected_ids are strings and tree ids are numbers', () => {
+      const numericTree = [
+        {
+          id: 101,
+          label: 'Parent',
+          children: [{ id: 102, label: 'Child' }],
+        },
+      ]
+      const formatted = addCheckedAndParentProperty(cloneTree(numericTree), ['102'])
+      expect(formatted[0].children[0].checked).toBe(true)
+      expect(formatted[0].checked).toBe(false)
+    })
+
     test('cascades checked state to children in default multi mode', () => {
       const formatted = addCheckedAndParentProperty(cloneTree(helperTree), ['parent'])
       expect(formatted[0].checked).toBe(true)

data/app/pb_kits/playbook/pb_multi_level_select/tree_helpers.js

@@ -1,5 +1,13 @@
 export const cloneTree = (value) => JSON.parse(JSON.stringify(value))
 
+// selected_ids / tree_data ids may be strings or numbers; includes() is strict.
+export const selectedIdsInclude = (selectedIds, id) => {
+  if (!selectedIds || !selectedIds.length) return false
+
+  const target = String(id)
+  return selectedIds.some((selectedId) => String(selectedId) === target)
+}
+
 export const filterFormattedDataById = (formattedData, id) => {
   const matched = []
   const recursiveSearch = (data, term) => {
@@ -138,7 +146,7 @@ export const getExpandedItems = (
       }
 
       if (showCheckedChildren) {
-        if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+        if (selectedIdsInclude(selectedIds, item.id)) {
           expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id))
         }
         if (Array.isArray(item.children)) {
@@ -193,9 +201,7 @@ export const addCheckedAndParentProperty = (
     const isDisabled =
       item.disabled || (parentDisabled && !returnAllSelected)
 
-    const explicitlySelected = Boolean(
-      selectedIds && selectedIds.length && selectedIds.includes(item.id)
-    )
+    const explicitlySelected = selectedIdsInclude(selectedIds, item.id)
 
     const checked =
       !isDisabled &&