playbook_ui 18.2.0.pre.rc.2 → 18.2.0

data/app/pb_kits/playbook/utilities/test/globalProps/onClick.test.js

@@ -1,21 +1,53 @@
 import React from 'react'
 import { fireEvent, render, screen } from '../../test-utils'
+import Background from '../../../pb_background/_background'
 import Body from '../../../pb_body/_body'
 import Button from '../../../pb_button/_button'
 import ButtonToolbar from '../../../pb_button_toolbar/_button_toolbar'
+import Caption from '../../../pb_caption/_caption'
 import Card from '../../../pb_card/_card'
+import Container from '../../../pb_container/_container'
+import Currency from '../../../pb_currency/_currency'
+import DashboardValue from '../../../pb_dashboard_value/_dashboard_value'
+import Detail from '../../../pb_detail/_detail'
 import Flex from '../../../pb_flex/_flex'
 import FormPill from '../../../pb_form_pill/_form_pill'
+import Highlight from '../../../pb_highlight/_highlight'
+import IconStatValue from '../../../pb_icon_stat_value/_icon_stat_value'
+import IconValue from '../../../pb_icon_value/_icon_value'
+import LabelValue from '../../../pb_label_value/_label_value'
+import Message from '../../../pb_message/_message'
+import MultipleUsers from '../../../pb_multiple_users/_multiple_users'
+import MultipleUsersStacked from '../../../pb_multiple_users_stacked/_multiple_users_stacked'
 import StarRating from '../../../pb_star_rating/_star_rating'
+import StatValue from '../../../pb_stat_value/_stat_value'
 import Title from '../../../pb_title/_title'
+import TitleCount from '../../../pb_title_count/_title_count'
+import TitleDetail from '../../../pb_title_detail/_title_detail'
 import { globalProps } from '../../globalProps'
 import { globalEventProps } from '../../globalEventProps'
 
 const optedInKits = [
+  { Kit: Background, name: 'Background', extraProps: { children: 'Test' } },
   { Kit: Body, name: 'Body', extraProps: { text: 'Test' } },
+  { Kit: Caption, name: 'Caption', extraProps: { text: 'Test' } },
   { Kit: Card, name: 'Card', extraProps: { children: 'Test' } },
+  { Kit: Container, name: 'Container', extraProps: { children: 'Test' } },
+  { Kit: Currency, name: 'Currency', extraProps: { amount: '100.00', label: 'Total' } },
+  { Kit: DashboardValue, name: 'DashboardValue', extraProps: { statLabel: 'Sales', statValue: { value: 100 } } },
+  { Kit: Detail, name: 'Detail', extraProps: { text: 'Test' } },
   { Kit: Flex, name: 'Flex', extraProps: { children: 'Test' } },
+  { Kit: Highlight, name: 'Highlight', extraProps: { text: 'Test' } },
+  { Kit: IconStatValue, name: 'IconStatValue', extraProps: { icon: 'heart', text: 'Likes', value: 42 } },
+  { Kit: IconValue, name: 'IconValue', extraProps: { icon: 'heart', text: 'Favorites' } },
+  { Kit: LabelValue, name: 'LabelValue', extraProps: { label: 'Label', value: 'Value' } },
+  { Kit: Message, name: 'Message', extraProps: { label: 'Sender', message: 'Test' } },
+  { Kit: MultipleUsers, name: 'MultipleUsers', extraProps: { users: [{ name: 'Pat' }] } },
+  { Kit: MultipleUsersStacked, name: 'MultipleUsersStacked', extraProps: { users: [{ name: 'Pat' }] } },
+  { Kit: StatValue, name: 'StatValue', extraProps: { unit: 'mg', value: 100 } },
   { Kit: Title, name: 'Title', extraProps: { text: 'Test' } },
+  { Kit: TitleCount, name: 'TitleCount', extraProps: { count: 12, title: 'Items' } },
+  { Kit: TitleDetail, name: 'TitleDetail', extraProps: { detail: 'Detail', title: 'Title' } },
 ]
 
 describe('onClick GlobalEventProps', () => {
@@ -43,6 +75,7 @@ describe('onClick GlobalEventProps', () => {
         render(
           <Kit
               data={{ testid: testId }}
+              htmlOptions={{ 'data-testid': testId }}
               onClick={onClick}
               {...extraProps}
           />
@@ -209,4 +242,208 @@ describe('onClick GlobalEventProps', () => {
       expect(cardOnClick).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('value and summary kits fire once from nested regions', () => {
+    test('Currency label and value regions each invoke onClick once', () => {
+      const onClick = jest.fn()
+      const { container } = render(
+        <Currency
+            amount="42.00"
+            data={{ testid: 'onclick-currency-regions' }}
+            label="Balance"
+            onClick={onClick}
+        />
+      )
+
+      fireEvent.click(screen.getByText('Balance'))
+      fireEvent.click(container.querySelector('.pb_currency_value'))
+      expect(onClick).toHaveBeenCalledTimes(2)
+    })
+
+    test('Currency unstyled branch still attaches root onClick', () => {
+      const onClick = jest.fn()
+      render(
+        <Currency
+            amount="10.00"
+            data={{ testid: 'onclick-currency-unstyled' }}
+            label="Cash"
+            onClick={onClick}
+            unstyled
+        />
+      )
+
+      fireEvent.click(screen.getByTestId('onclick-currency-unstyled'))
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    test('LabelValue default and details variants fire once', () => {
+      const defaultOnClick = jest.fn()
+      const detailsOnClick = jest.fn()
+      render(
+        <>
+          <LabelValue
+              data={{ testid: 'onclick-label-value-default' }}
+              label="Status"
+              onClick={defaultOnClick}
+              value="Open"
+          />
+          <LabelValue
+              data={{ testid: 'onclick-label-value-details' }}
+              description="Meta"
+              icon="calendar"
+              label="Event"
+              onClick={detailsOnClick}
+              title="Kickoff"
+              variant="details"
+          />
+        </>
+      )
+
+      fireEvent.click(screen.getByText('Status'))
+      fireEvent.click(screen.getByText('Open'))
+      expect(defaultOnClick).toHaveBeenCalledTimes(2)
+
+      fireEvent.click(screen.getByText('Event'))
+      fireEvent.click(screen.getByText('Kickoff'))
+      expect(detailsOnClick).toHaveBeenCalledTimes(2)
+    })
+
+    test('IconStatValue icon and value regions fire once each', () => {
+      const onClick = jest.fn()
+      const { container } = render(
+        <IconStatValue
+            data={{ testid: 'onclick-icon-stat-value' }}
+            icon="heart"
+            onClick={onClick}
+            text="Likes"
+            value={7}
+        />
+      )
+
+      fireEvent.click(container.querySelector('[class*="pb_icon_circle_kit"]'))
+      fireEvent.click(screen.getByText('7'))
+      fireEvent.click(screen.getByText('Likes'))
+      expect(onClick).toHaveBeenCalledTimes(3)
+    })
+
+    test('DashboardValue nested StatValue does not duplicate the handler', () => {
+      const onClick = jest.fn()
+      render(
+        <DashboardValue
+            data={{ testid: 'onclick-dashboard-value' }}
+            onClick={onClick}
+            statLabel="Revenue"
+            statValue={{ unit: 'USD', value: 99 }}
+        />
+      )
+
+      fireEvent.click(screen.getByText('Revenue'))
+      fireEvent.click(screen.getByText('99'))
+      expect(onClick).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('whole-kit handlers preserve nested content behavior', () => {
+    test('Message nested content fires once with the Message root as currentTarget', () => {
+      const currentTargets = []
+      const onClick = jest.fn((event) => currentTargets.push(event.currentTarget))
+      render(
+        <Message
+            data={{ testid: 'onclick-message' }}
+            label="Sender"
+            message="Click this message"
+            onClick={onClick}
+        />
+      )
+
+      fireEvent.click(screen.getByText('Click this message'))
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+      expect(currentTargets[0]).toBe(screen.getByTestId('onclick-message'))
+    })
+
+    test('Message child handlers still fire and bubble once to the Message root', () => {
+      const messageOnClick = jest.fn()
+      const buttonOnClick = jest.fn()
+      render(
+        <Message
+            label="Sender"
+            message="Message"
+            onClick={messageOnClick}
+        >
+          <Button
+              onClick={buttonOnClick}
+              text="Reply"
+          />
+        </Message>
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Reply' }))
+
+      expect(buttonOnClick).toHaveBeenCalledTimes(1)
+      expect(messageOnClick).toHaveBeenCalledTimes(1)
+    })
+
+    test('MultipleUsers tooltip avatar fires once with the kit root as currentTarget', () => {
+      const currentTargets = []
+      const onClick = jest.fn((event) => currentTargets.push(event.currentTarget))
+      render(
+        <MultipleUsers
+            data={{ testid: 'onclick-multiple-users' }}
+            onClick={onClick}
+            users={[{ imageUrl: 'pat.jpg', name: 'Pat', tooltip: 'Pat tooltip' }]}
+            withTooltip
+        />
+      )
+
+      fireEvent.click(screen.getByAltText('Pat'))
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+      expect(currentTargets[0]).toBe(screen.getByTestId('onclick-multiple-users'))
+    })
+
+    test('MultipleUsers overflow count fires the whole-kit handler once', () => {
+      const onClick = jest.fn()
+      render(
+        <MultipleUsers
+            maxDisplayedUsers={2}
+            onClick={onClick}
+            users={[
+              { imageUrl: 'pat.jpg', name: 'Pat' },
+              { name: 'Sam' },
+              { name: 'Alex' },
+            ]}
+        />
+      )
+
+      fireEvent.click(screen.getByText('+2'))
+
+      expect(onClick).toHaveBeenCalledTimes(1)
+    })
+
+    test('MultipleUsersStacked avatar and overflow badge each fire once from the root', () => {
+      const currentTargets = []
+      const onClick = jest.fn((event) => currentTargets.push(event.currentTarget))
+      render(
+        <MultipleUsersStacked
+            data={{ testid: 'onclick-multiple-users-stacked' }}
+            onClick={onClick}
+            users={[
+              { imageUrl: 'pat.jpg', name: 'Pat' },
+              { name: 'Sam' },
+              { name: 'Alex' },
+            ]}
+        />
+      )
+
+      fireEvent.click(screen.getByAltText('Pat'))
+      fireEvent.click(screen.getByText('+2'))
+
+      expect(onClick).toHaveBeenCalledTimes(2)
+      expect(currentTargets).toEqual([
+        screen.getByTestId('onclick-multiple-users-stacked'),
+        screen.getByTestId('onclick-multiple-users-stacked'),
+      ])
+    })
+  })
 })

data/dist/ai/all-schemas.json

@@ -1950,6 +1950,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Background } from 'playbook-ui'",
@@ -2634,6 +2635,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Caption } from 'playbook-ui'",
@@ -3523,6 +3525,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Container } from 'playbook-ui'",
@@ -3775,6 +3778,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Currency } from 'playbook-ui'",
@@ -3835,6 +3839,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { DashboardValue } from 'playbook-ui'",
@@ -5075,6 +5080,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Detail } from 'playbook-ui'",
@@ -7267,6 +7273,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Highlight } from 'playbook-ui'",
@@ -7793,6 +7800,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { IconStatValue } from 'playbook-ui'",
@@ -7852,6 +7860,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { IconValue } from 'playbook-ui'",
@@ -8080,6 +8089,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { LabelValue } from 'playbook-ui'",
@@ -8775,6 +8785,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Message } from 'playbook-ui'",
@@ -9238,6 +9249,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { MultipleUsers } from 'playbook-ui'",
@@ -9303,6 +9315,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { MultipleUsersStacked } from 'playbook-ui'",
@@ -12800,6 +12813,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { StatValue } from 'playbook-ui'",
@@ -15060,6 +15074,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { TitleCount } from 'playbook-ui'",
@@ -15113,6 +15128,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { TitleDetail } from 'playbook-ui'",

data/dist/ai/forms.json

@@ -1,6 +1,6 @@
 {
   "metadataVersion": 1,
-  "version": "18.2.0-rc.2",
+  "version": "18.2.0",
   "builder": {
     "class": "Playbook::Forms::Builder",
     "helper": "pb_form_with",

data/dist/ai/index.json

@@ -1,8 +1,8 @@
 {
-  "version": "18.2.0-rc.2",
+  "version": "18.2.0",
   "metadataVersion": 1,
   "forms": "forms.json",
-  "generated": "2026-10-14T19:32:26.642Z",
+  "generated": "2026-10-22T17:59:05.292Z",
   "schemas": {
     "globalProps": "global-props.schema.json",
     "globalEventProps": "global-event-props.schema.json",

data/dist/ai/kits/background.schema.json

@@ -221,6 +221,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Background } from 'playbook-ui'",

data/dist/ai/kits/caption.schema.json

@@ -78,6 +78,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Caption } from 'playbook-ui'",

data/dist/ai/kits/container.schema.json

@@ -39,6 +39,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Container } from 'playbook-ui'",

data/dist/ai/kits/currency.schema.json

@@ -137,6 +137,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Currency } from 'playbook-ui'",

data/dist/ai/kits/dashboard_value.schema.json

@@ -43,6 +43,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DashboardValue } from 'playbook-ui'",

data/dist/ai/kits/detail.schema.json

@@ -65,6 +65,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Detail } from 'playbook-ui'",

data/dist/ai/kits/highlight.schema.json

@@ -22,6 +22,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Highlight } from 'playbook-ui'",

data/dist/ai/kits/icon_stat_value.schema.json

@@ -89,6 +89,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { IconStatValue } from 'playbook-ui'",

data/dist/ai/kits/icon_value.schema.json

@@ -42,6 +42,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { IconValue } from 'playbook-ui'",

data/dist/ai/kits/label_value.schema.json

@@ -77,6 +77,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { LabelValue } from 'playbook-ui'",

data/dist/ai/kits/message.schema.json

@@ -94,6 +94,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Message } from 'playbook-ui'",

data/dist/ai/kits/multiple_users.schema.json

@@ -60,6 +60,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { MultipleUsers } from 'playbook-ui'",

data/dist/ai/kits/multiple_users_stacked.schema.json

@@ -48,6 +48,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { MultipleUsersStacked } from 'playbook-ui'",

data/dist/ai/kits/stat_value.schema.json

@@ -32,6 +32,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { StatValue } from 'playbook-ui'",

data/dist/ai/kits/title_count.schema.json

@@ -54,6 +54,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { TitleCount } from 'playbook-ui'",

data/dist/ai/kits/title_detail.schema.json

@@ -36,6 +36,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { TitleDetail } from 'playbook-ui'",

data/dist/ai/playgrounds/rich_text_editor.json

@@ -1 +1 @@
-{"presets":[{"name":"Default","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Description","name":"description"}},{"name":"Simple","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Notes","name":"notes","simple":true}},{"name":"Focus Toolbar","structureMode":"advanced","props":{"advancedEditorToolbar":false,"focus":true,"label":"Focus editor"}},{"name":"Tall Editor","structureMode":"advanced","props":{"inputHeight":"lg","inputMinHeight":"md","label":"Tall editor"}},{"name":"Required","structureMode":"advanced","props":{"label":"Description","name":"description","requiredIndicator":true}},{"name":"Sticky","structureMode":"advanced","props":{"label":"Sticky editor","sticky":true}}],"hints":{"advanced":{"presetName":"Default","message":"The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.","type":"info"},"focus":{"when":{"focus":true},"message":"Focus Toolbar shows the toolbar when the advanced editor receives focus.","type":"info"}},"conditionals":{"advancedEditorToolbar":{"structureMode":"advanced"},"inputHeight":{"structureMode":"advanced"},"inputMinHeight":{"structureMode":"advanced"},"sticky":{"structureMode":"advanced"}},"structureModes":{"default":"advanced","modes":{"advanced":{"label":"Advanced","template":"<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>","children":"","wrapper":"const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit, TipTapLink],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />","externalImports":["import { useEditor, EditorContent } from '@tiptap/react'","import StarterKit from '@tiptap/starter-kit'","import TipTapLink from '@tiptap/extension-link'"]}}},"template":"<RichTextEditor{{props}} />","propTargets":{},"externalDependencies":{"packages":["react-trix","trix","@tiptap/react","@tiptap/starter-kit","@tiptap/extension-link","prosemirror-markdown","prosemirror-model"],"optional":true,"note":"Default React editor uses Trix (pass TrixEditor from react-trix). Advanced React editor uses TipTap, and the host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails loads TipTap from esm.sh and accepts only these extension strings: underline, text_align, horizontal_rule, image."}}
+{"presets":[{"name":"Default","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Description","name":"description"}},{"name":"Simple","structureMode":"advanced","props":{"advancedEditorToolbar":true,"label":"Notes","name":"notes","simple":true}},{"name":"Focus Toolbar","structureMode":"advanced","props":{"advancedEditorToolbar":false,"focus":true,"label":"Focus editor"}},{"name":"Tall Editor","structureMode":"advanced","props":{"inputHeight":"lg","inputMinHeight":"md","label":"Tall editor"}},{"name":"Required","structureMode":"advanced","props":{"label":"Description","name":"description","requiredIndicator":true}},{"name":"Sticky","structureMode":"advanced","props":{"label":"Sticky editor","sticky":true}}],"hints":{"advanced":{"presetName":"Default","message":"The Advanced structure wraps RichTextEditor with TipTap useEditor and EditorContent.","type":"info"},"focus":{"when":{"focus":true},"message":"Focus Toolbar shows the toolbar when the advanced editor receives focus.","type":"info"}},"conditionals":{"advancedEditorToolbar":{"structureMode":"advanced"},"inputHeight":{"structureMode":"advanced"},"inputMinHeight":{"structureMode":"advanced"},"sticky":{"structureMode":"advanced"}},"structureModes":{"default":"advanced","modes":{"advanced":{"label":"Advanced","template":"<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>","children":"","wrapper":"const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit.configure({ trailingNode: false })],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />","externalImports":["import { useEditor, EditorContent } from '@tiptap/react'","import StarterKit from '@tiptap/starter-kit'"]}}},"template":"<RichTextEditor{{props}} />","propTargets":{},"externalDependencies":{"packages":["react-trix","trix","@tiptap/react","@tiptap/starter-kit","@tiptap/extension-link","prosemirror-markdown","prosemirror-model"],"optional":true,"note":"Default React editor uses Trix (pass TrixEditor from react-trix). Advanced React editor uses TipTap, and the host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails loads TipTap from esm.sh and accepts only these extension strings: underline, text_align, horizontal_rule, image."}}