playbook_ui 18.1.0.pre.rc.2 → 18.1.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69806745bf9d406cc340a98ebaa54bbab8fd00312d756cd0bf60e3077db5794e
-  data.tar.gz: 0aef11e0e9dc51c336af96739287476e8b01e8397c2580cfff87d8ef0a17a7eb
+  metadata.gz: 81d76f51de9e88ac32f50756b803e8a063264b582bc8e9797ef49e2dfba04867
+  data.tar.gz: 5a214970102ba6d3a2abe9a4e2342aaf4e79b2e1e55b8ad6acdd597580e678ce
 SHA512:
-  metadata.gz: 590f41d6ac3e5304ad388114c1a0a0264df448ef4e4df753a4e06058c4a80bae552f5aefb78f768ff257073694dcc9433fd697520a7603d7d2ce5b4b314fd5c5
-  data.tar.gz: 4dd0fe2434dc65fd2a2eab892ffd571d6c6f2fcf9d7ea72e5fb83da7d5f5cf44ccaf5c2e579765c2886092779b4b5c7de0007da7a12cc49998c23ca253815208
+  metadata.gz: 7ca0873a34437139622dca8b4848cde6f266bfb059caa97af140a2226e327772bea439c0b90140e9dba01f32082ee6cf8ea066ad1c626a77ea5de7e9efcf88a5
+  data.tar.gz: af0f9628b3defe688b29dacf8beffb13e37235c30e92e1eb6b6cf4af96708ed1c4d0a072704ecb990ae74bd8759b0cbb1dae5a81d2ddea2322cad39a90ebfca3

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -13,6 +13,7 @@ type CopyButtonProps = {
   aria?: { [key: string]: string }
   className?: string
   data?: { [key: string]: string }
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)}
   id?: string
   from?: string
   text?: string
@@ -29,6 +30,7 @@ const CopyButton = (props: CopyButtonProps) => {
     className,
     data = {},
     from = '',
+    htmlOptions = {},
     id,
     text = 'Copy',
     timeout = 1000,
@@ -42,12 +44,14 @@ const CopyButton = (props: CopyButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
     <div 
         {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -86,3 +86,15 @@ test('passes text and tooltip props to button', () => {
   const tooltip = kit.querySelector('.pb_tooltip_kit')
   expect(tooltip).toBeInTheDocument()
 })
+
+test('applies htmlOptions to the root element', () => {
+  render(
+      <CopyButton
+          data={{ testid: 'html-options-test' }}
+          htmlOptions={{ title: 'copy title' }}
+          value="copy"
+      />
+  )
+
+  expect(screen.getByTestId('html-options-test')).toHaveAttribute('title', 'copy title')
+})

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -52,6 +52,7 @@ type DatePickerProps = {
   allowInput?: boolean,
   aria?: { [key: string]: string },
   className?: string,
+  closeOnSelect?: boolean,
   customQuickPickDates: { override: boolean, dates: any[] },
   dark?: boolean,
   data?: { [key: string]: string },
@@ -103,6 +104,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     allowInput = false,
     aria = {},
     className,
+    closeOnSelect = true,
     customQuickPickDates,
     dark = false,
     data = {},
@@ -180,6 +182,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   useEffect(() => {
     datePickerHelper({
       allowInput,
+      closeOnSelect,
       customQuickPickDates,
       defaultDate: normalizedDefaultDate,
       disableDate,

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -91,6 +91,8 @@ module Playbook
                     default: "pointer"
       prop :year_ascending, type: Playbook::Props::Boolean,
                             default: false
+      prop :close_on_select, type: Playbook::Props::Boolean,
+                             default: true
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -101,6 +103,7 @@ module Playbook
       def date_picker_config
         {
           allowInput: allow_input,
+          closeOnSelect: close_on_select,
           customQuickPickDates: custom_quick_pick_dates,
           defaultDate: default_date,
           disableDate: disable_date,

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -510,4 +510,18 @@ describe('DatePicker Kit', () => {
       )
     })
   })
+
+  test('passes closeOnSelect to flatpickr', async () => {
+    render(
+      <DatePicker
+          closeOnSelect={false}
+          pickerId="date-picker-close-on-select"
+      />
+    )
+
+    await waitFor(() => {
+      const input = document.getElementById('date-picker-close-on-select')
+      expect(input._flatpickr.config.closeOnSelect).toBe(false)
+    })
+  })
 })

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_close_on_select.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  close_on_select: false,
+  default_date: DateTime.now.utc.iso8601,
+  picker_id: "date-picker-close-on-select"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_close_on_select.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DEFAULT_DATE = new Date()
+
+const DatePickerCloseOnSelect = (props) => {
+  return (
+    <>
+      <DatePicker
+          closeOnSelect={false}
+          defaultDate={DEFAULT_DATE}
+          initializeOnce
+          pickerId="date-picker-close-on-select"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DatePickerCloseOnSelect

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_close_on_select.md

@@ -0,0 +1,3 @@
+When `closeOnSelect` / `close_on_select` is set to `false`, the DatePicker remains open after a date is selected and closes when the user clicks outside it. The prop defaults to `true`.
+
+In React, use `initializeOnce` when the change handler updates state so that rerendering does not reinitialize and close the DatePicker.

data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "allowInput": false,
+    "closeOnSelect": true,
     "dark": false,
     "defaultDate": "",
     "disableInput": false,

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

@@ -33,6 +33,7 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
   - date_picker_required_indicator: Required Indicator
+  - date_picker_close_on_select: Close on Select
   - date_picker_turbo_frames: Within Turbo Frames
 
   react:
@@ -68,4 +69,5 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
   - date_picker_required_indicator: Required Indicator
+  - date_picker_close_on_select: Close on Select
   - date_picker_dialog_submission: Dialog Form Submission

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -31,3 +31,4 @@ export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdo
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
 export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";
 export { default as DatePickerYearAsc } from './_date_picker_year_asc.jsx'
+export { default as DatePickerCloseOnSelect } from './_date_picker_close_on_select.jsx'

data/app/pb_kits/playbook/pb_date_picker/kit.schema.json

@@ -15,6 +15,14 @@
       ],
       "default": false
     },
+    "closeOnSelect": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": true
+    },
     "customQuickPickDates": {
       "type": "GenericObject",
       "platforms": [

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react'
+import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
@@ -11,6 +12,7 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
 import DateStacked from '../pb_date_stacked/_date_stacked'
 
 type DateTimeStackedProps = {
+  className?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   date: Date,
@@ -27,20 +29,25 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     date,
     datetime,
     dark,
+    className,
     htmlOptions = {},
     timeZone = 'America/New_York',
     showCurrentYear = false,
   } = props
 
-  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(
+    buildCss('pb_date_time_stacked_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <Flex
+        htmlOptions={htmlOptions}
         inline={false}
         vertical="stretch"
-        {...htmlProps}
         {...props}
+        className={classes}
     >
       <FlexItem>
         <DateStacked
@@ -58,7 +65,6 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
       />
       <FlexItem>
         <TimeStacked
-            className={classes}
             dark={dark}
             date={date || datetime}
             timeZone={timeZone}

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -74,3 +74,15 @@ test('hides current year by default', () => {
     expect(yearElement).toBeNull()
   }
 })
+
+test('applies kit class and global props to the root', () => {
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-root' },
+    datetime,
+    dark: false,
+    margin: 'md',
+  })
+
+  expect(kit).toHaveClass('pb_date_time_stacked_kit')
+  expect(kit).toHaveClass('m_md')
+})

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx

@@ -1,22 +1,27 @@
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../../utilities/props'
+import { buildCss, buildHtmlProps } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps'
 
 type DialogBodyProps = {
   children: React.ReactNode | React.ReactNode[] | string,
   padding?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
-  className?: string
+  className?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
 } 
 
 // Body component
 const DialogBody = (props: DialogBodyProps): React.ReactElement => {
-  const { children, className } = props
+  const { children, className, htmlOptions = {} } = props
   const bodyCSS = buildCss("dialog_body")
   const bodySpacing = globalProps(props)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={classnames(bodyCSS, bodySpacing, className)}>
+    <div
+        {...htmlProps}
+        className={classnames(bodyCSS, bodySpacing, className)}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -268,3 +268,13 @@ describe('isNativeSelectMenuInteraction', () => {
     expect(isNativeSelectMenuInteraction(dialog, select)).toBe(false)
   })
 })
+
+test("applies htmlOptions to Dialog.Body", () => {
+  render(
+    <Dialog.Body htmlOptions={{ title: "body title" }}>
+      {"Body content"}
+    </Dialog.Body>
+  )
+
+  expect(document.querySelector(".dialog_body")).toHaveAttribute("title", "body title")
+})

data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx

@@ -2,7 +2,7 @@
 import React from "react"
 import ReactDOMServer from "react-dom/server"
 import classnames from "classnames"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
 import { globalProps } from "../utilities/globalProps"
 import Title from "../pb_title/_title"
 import Body from "../pb_body/_body"
@@ -22,6 +22,7 @@ type EmptyStateProps = {
   data?: { [key: string]: string },
   description?: string,
   header?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   image?: string,
   linkButton?: string,
@@ -40,6 +41,7 @@ const EmptyState = (props: EmptyStateProps) => {
     data = {},
     description,
     header = "",
+    htmlOptions = {},
     id,
     image,
     linkButton,
@@ -52,6 +54,7 @@ const EmptyState = (props: EmptyStateProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss("pb_empty_state_kit"), globalProps(props), className)
 
   const renderContent = () => {
@@ -137,6 +140,7 @@ const EmptyState = (props: EmptyStateProps) => {
     const layout = (
       <div {...ariaProps}
           {...dataProps}
+          {...htmlProps}
           className={classes}
           id={id}
       >

data/app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx

@@ -14,4 +14,15 @@ test('returns namespaced class name', () => {
 
   const kit = screen.getByTestId('primary-test')
   expect(kit).toHaveClass('pb_empty_state_kit')
+})
+
+test('applies htmlOptions to the root element', () => {
+  render(
+    <EmptyState
+        data={{ testid: 'html-options-test' }}
+        htmlOptions={{ title: 'empty state title' }}
+    />
+  )
+
+  expect(screen.getByTestId('html-options-test')).toHaveAttribute('title', 'empty state title')
 })

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import { buildHtmlProps } from '../../utilities/props'
 import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Card from '../../pb_card/_card'
@@ -10,13 +11,18 @@ export type FilterBackgroundProps = {
   className?: string,
   children?: React.ReactChild[] | React.ReactChild,
   dark?: boolean,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {
-  const { background = true, className, children, dark } = props
+  const { background = true, className, children, dark, htmlOptions = {} } = props
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
+    <div
+        {...htmlProps}
+        className={classnames(`pb_filter_kit ${className}`, globalProps(props))}
+    >
       { background ? 
           <Card
               dark={dark}

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -21,7 +21,7 @@ const nextValue = (value: SortValue[], name: string): SortValue => {
 }
 
 const directionIcon = (dir: Direction) => (
-  dir == 'asc' ? 'arrow-up-short-wide' : 'arrow-down-wide-short'
+  dir == 'asc' ? 'arrow-up-wide-short' : 'arrow-down-short-wide'
 )
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -115,9 +115,9 @@ module Playbook
       def sort_icon(direction)
         case direction
         when "asc"
-          "arrow-up-short-wide"
+          "arrow-up-wide-short"
         when "desc"
-          "arrow-down-wide-short"
+          "arrow-down-short-wide"
         else
           ""
         end

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -153,6 +153,20 @@ test("generates quickpick options for interactive dropdown filters", () => {
   expect(handleChange).toHaveBeenCalledWith("quickpick-last-month");
 });
 
+test("applies htmlOptions to the root element", () => {
+  render(
+    <Filter
+        htmlOptions={{ title: "filter title" }}
+        results={1}
+    />
+  );
+
+  expect(document.querySelector(".pb_filter_kit")).toHaveAttribute(
+    "title",
+    "filter title"
+  );
+});
+
 test("renders double layout when double is true", () => {
   render(<FilterTest double />);
 

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -32,7 +33,7 @@ const ProgressStepItem = (props: ProgressStepItemProps): React.ReactElement => {
     <li 
         {...dataProps}
         {...htmlProps}
-        className={classnames(progressStepItem, className)}
+        className={classnames(progressStepItem, globalProps(props), className)}
     >
       <div className="box">
         <div className="circle">

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -108,6 +108,22 @@ test('should render the children elements', () => {
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
 
+test('should apply global props to ProgressStepItem', () => {
+  render(
+      <ProgressStep>
+        <ProgressStepItem
+            data={{ testid: step1Id }}
+            margin="md"
+            status="complete"
+        >
+            {'Step 1'}
+        </ProgressStepItem>
+      </ProgressStep>
+  )
+
+  expect(screen.getByTestId(step1Id)).toHaveClass('m_md')
+})
+
 test('should render info color', () => {
 render( 
         <ProgressStep

data/app/pb_kits/playbook/pb_source/_source.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildDataProps, buildAriaProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 import { titleize } from '../utilities/text'
 
 import Avatar, { AvatarProps } from '../pb_avatar/_avatar'
@@ -22,23 +23,25 @@ type SourceProps = {
   user: AvatarProps,
 }
 
-const Source = ({
-  aria = {},
-  className,
-  data = {},
-  hideIcon = false,
-  htmlOptions = {},
-  id,
-  source,
-  type = 'inbound',
-  user = {},
-}: SourceProps): React.ReactElement => {
+const Source = (props: SourceProps): React.ReactElement => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    hideIcon = false,
+    htmlOptions = {},
+    id,
+    source,
+    type = 'inbound',
+    user = {},
+  } = props
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const ariaProps = buildAriaProps(aria)
 
   const css = classnames([
     'pb_source_kit',
+    globalProps(props),
     className,
   ])
 

data/app/pb_kits/playbook/pb_source/source.test.js

@@ -80,3 +80,9 @@ test('should pass user prop', () => {
     kit = screen.getByText(user.userId)
     expect(kit).toBeInTheDocument()
 })
+
+test('should apply global props to the root element', () => {
+    render(<SourceDefault margin="md" />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('m_md')
+})

data/dist/ai/all-schemas.json

@@ -3972,6 +3972,14 @@
           ],
           "default": false
         },
+        "closeOnSelect": {
+          "type": "boolean",
+          "platforms": [
+            "react",
+            "rails"
+          ],
+          "default": true
+        },
         "customQuickPickDates": {
           "type": "GenericObject",
           "platforms": [

data/dist/ai/forms.json

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

data/dist/ai/index.json

@@ -1,8 +1,8 @@
 {
-  "version": "18.1.0-rc.2",
+  "version": "18.1.0-rc.4",
   "metadataVersion": 1,
   "forms": "forms.json",
-  "generated": "2026-09-29T19:21:09.246Z",
+  "generated": "2026-10-02T20:48:38.790Z",
   "schemas": {
     "globalProps": "global-props.schema.json",
     "globalEventProps": "global-event-props.schema.json",

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

@@ -15,6 +15,14 @@
       ],
       "default": false
     },
+    "closeOnSelect": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": true
+    },
     "customQuickPickDates": {
       "type": "GenericObject",
       "platforms": [