playbook_ui 18.2.0.pre.rc.3 → 18.2.0

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

@@ -7,12 +7,23 @@ 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'
 
@@ -22,10 +33,21 @@ const optedInKits = [
   { 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', () => {
@@ -53,6 +75,7 @@ describe('onClick GlobalEventProps', () => {
         render(
           <Kit
               data={{ testid: testId }}
+              htmlOptions={{ 'data-testid': testId }}
               onClick={onClick}
               {...extraProps}
           />
@@ -219,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

@@ -3778,6 +3778,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Currency } from 'playbook-ui'",
@@ -3838,6 +3839,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { DashboardValue } from 'playbook-ui'",
@@ -7798,6 +7800,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { IconStatValue } from 'playbook-ui'",
@@ -7857,6 +7860,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { IconValue } from 'playbook-ui'",
@@ -8085,6 +8089,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { LabelValue } from 'playbook-ui'",
@@ -8780,6 +8785,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { Message } from 'playbook-ui'",
@@ -9243,6 +9249,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { MultipleUsers } from 'playbook-ui'",
@@ -9308,6 +9315,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { MultipleUsersStacked } from 'playbook-ui'",
@@ -12805,6 +12813,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { StatValue } from 'playbook-ui'",
@@ -15065,6 +15074,7 @@
         }
       },
       "globalProps": true,
+      "globalEventProps": true,
       "usage": {
         "react": {
           "import": "import { TitleCount } from 'playbook-ui'",
@@ -15118,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.3",
+  "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.3",
+  "version": "18.2.0",
   "metadataVersion": 1,
   "forms": "forms.json",
-  "generated": "2026-10-20T17:53:24.606Z",
+  "generated": "2026-10-22T17:59:05.292Z",
   "schemas": {
     "globalProps": "global-props.schema.json",
     "globalEventProps": "global-event-props.schema.json",

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/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'",