playbook_ui 18.2.0.pre.rc.2 → 18.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbc2a1ba01cca1bd4a5b48488fafecee3697e273fd940d942a9de5de93a76921
-  data.tar.gz: e8cf1cc4ec63bd1957d455ed4766db51865e0f42b9369ae59065f89bb7d78946
+  metadata.gz: b5ac75f8f899c8e692ebc15d9e4c233540f1b055707c362099ca5f6bd23da085
+  data.tar.gz: 96f74ff346de6735599cbd46bf9d8b81e541b7ad7b258275e4174a922fe637ac
 SHA512:
-  metadata.gz: f5af4f9cf873c44ba0c76176e17130f0cf77fbd9c526ccea6041a70b0e1da2951a16da702259a01d16df03628a30402bcc1fdc47f32675af28aaf16f1fdb8ffb
-  data.tar.gz: 598126c77b37bd8885bfeb8fa1ebcc30d5f30adab8dcd92b46ea71ce8b038314dda4e774d3fea789ba3e7462ff5ea83276bd10229ce43efaa767e33fe5c430c4
+  metadata.gz: c8dc8cf0775094f3d738ff9fdb1bc5a7101d9f950c6503dd75c598da03e0a4353d9466a864947fbc905a42997a60f3e8ee29569179106b9c8fc796feb2fe6819
+  data.tar.gz: 119a30f2687af34eb8bfbc1c942182d128838437cb8c15f71a061600892d9fe5498fe400db526ee306120e4b90f220d0f97bb1467e829191e6b5fe9c35a09eaf

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
@@ -35,7 +36,7 @@ type BackgroundProps = {
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
   transition?: 'fade' | 'blur' | 'scale',
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 type ResponsiveProp<T> = T | {
   xs?: T,
@@ -166,6 +167,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         alt={alt}
         className={classes}
         id={id}

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

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

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 type CaptionProps = {
   aria?: {[key: string]: string},
@@ -15,7 +16,7 @@ type CaptionProps = {
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-} & GlobalProps;
+} & GlobalProps & GlobalEventProps;
 
 const Caption = (props: CaptionProps): React.ReactElement => {
   if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
@@ -62,6 +63,7 @@ const Caption = (props: CaptionProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_container/_container.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 type ContainerProps = {
   aria?: { [key: string]: string },
@@ -11,7 +12,7 @@ type ContainerProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any },
   tag?: "div" | "span" | "a" | "button" | "option" | "table" | "tbody" | "thead" | "tfoot" | "tr" | "td" | "th" | "img" | "section" | "article" | "main" | "header" | "footer" | "nav" | "aside"
   id?: string,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const Container = (props: ContainerProps): React.ReactElement => {
   const {
@@ -36,6 +37,7 @@ const Container = (props: ContainerProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -28,7 +29,7 @@ type CurrencyProps = {
   unit?: string,
   unstyled?: boolean,
   commaSeparator?: boolean,
-}
+} & GlobalEventProps
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
   lg: 1,
@@ -132,6 +133,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import StatChange from '../pb_stat_change/_stat_change'
@@ -23,7 +24,7 @@ type DashboardValueProps = {
     unit?: string,
     value?: string | number
   }
-}
+} & GlobalEventProps
 
 const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
   const {
@@ -52,6 +53,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalEventProps, GlobalEventProps } from '../utilities/globalEventProps'
 
 type DetailProps = {
   aria?: { [key: string]: string },
@@ -15,7 +16,7 @@ type DetailProps = {
   id?: string,
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const Detail = (props: DetailProps): React.ReactElement => {
   const {
@@ -48,6 +49,7 @@ const Detail = (props: DetailProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -20,6 +20,7 @@ import {
     separateChildComponents,
     prepareSubcomponents,
     handleClickOutside,
+    setQuickPickDateOnPicker,
 } from "./utilities";
 
 import { DialogContext } from "../pb_dialog/_dialog_context";
@@ -87,7 +88,7 @@ const asyncOptionValue = (option: GenericObject) => option.value ?? option.id ??
 
 type CustomQuickPickDate = {
     label: string;
-    value: string[] | { timePeriod: string; amount: number };
+    value: Array<Date | string> | { timePeriod: string; amount: number };
 };
 
 type CustomQuickPickDates = {
@@ -594,12 +595,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        
                        if (controlsStartId) {
                            const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-                           startPicker?.setDate(start, true);
+                           setQuickPickDateOnPicker(startPicker, start, "start");
                        }
                        
                        if (controlsEndId) {
                            const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-                           endPicker?.setDate(end, true);
+                           setQuickPickDateOnPicker(endPicker, end, "end");
                        }
                    }
             }
@@ -711,12 +712,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
           setTimeout(() => {
             if (controlsStartId) {
               const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-              startPicker?.setDate(start, true);
+              setQuickPickDateOnPicker(startPicker, start, "start");
             }
             
             if (controlsEndId) {
               const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-              endPicker?.setDate(end, true);
+              setQuickPickDateOnPicker(endPicker, end, "end");
             }
           }, 0);
         }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md

@@ -1,10 +1,15 @@
 The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
 
 **The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
-- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An array of two date strings (or `Date` objects) representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`).
+  - **Date-only** strings get start-of-day / end-of-day when synced to `enableTime` DatePickers.
+  - **Timed** strings use the same formats as Rails QuickPick customs:
+    - US `m/d/Y` + time (optional `:SS`, optional `AM`/`PM`) — wall-clock; emit offset-less `YYYY-MM-DDTHH:MM:SS`
+    - Offset-less `YYYY-MM-DDTHH:MM:SS` — wall-clock; emit offset-less
+    - ISO-8601 with `Z` or numeric offset — absolute instant; emit keeps offset/`Z` so `new Date(iso)` preserves the instant
+  - `Date` objects keep their authored time (including intentional midnight / `23:59:00`).
 - An object with `timePeriod` and `amount` properties for dynamic date calculations:
   - The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
   - The `amount` property accepts any number.
 
 **The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
-

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md

@@ -1,10 +1,15 @@
 The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
 
 **The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
-- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`).
+  - **Date-only** strings stay date-only on the option payload (SOD/EOD applied at sync when `enable_time`).
+  - **Timed** strings use the same formats as React QuickPick customs:
+    - US `m/d/Y` + time (optional `:SS`, optional `AM`/`PM`) — wall-clock (e.g. `"06/01/2022 9:30 AM"`); emit offset-less `YYYY-MM-DDTHH:MM:SS`
+    - Offset-less `YYYY-MM-DDTHH:MM:SS` — wall-clock (e.g. `"2026-03-08T02:30:00"`); emit offset-less
+    - ISO-8601 with `Z` or numeric offset — absolute instant; emit keeps offset/`Z` (e.g. `…+00:00` / `…-05:00`) so JS `new Date(iso)` preserves the same instant
+  - Wall-clock and absolute emit differ on purpose: offset-less keeps the authored clock face; offset-bearing strings keep the absolute instant across Rails ↔ React. Unsupported timed free text raises.
 - An object with `time_period` and `amount` properties for dynamic date calculations:
   - The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
   - The `amount` property accepts any number.
 
 **The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
-

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_enable_time.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("dropdown", props: {
+  id: "dropdown-quickpick-enable-time",
+  label: "Date Range",
+  name: "date_range_enable_time",
+  margin_bottom: "sm",
+  variant: "quickpick",
+  controls_start_id: "start-date-picker-enable-time",
+  controls_end_id: "end-date-picker-enable-time",
+  start_date_id: "quickpick_enable_time_start_date",
+  start_date_name: "start_date_enable_time",
+  end_date_id: "quickpick_enable_time_end_date",
+  end_date_name: "end_date_enable_time"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "start-date-picker-enable-time",
+  label: "Start Date",
+  name: "start_date_picker_enable_time",
+  placeholder: "Select Start Date",
+  enable_time: true,
+  close_on_select: false,
+  sync_start_with: "dropdown-quickpick-enable-time"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "end-date-picker-enable-time",
+  label: "End Date",
+  name: "end_date_picker_enable_time",
+  placeholder: "Select End Date",
+  enable_time: true,
+  close_on_select: false,
+  sync_end_with: "dropdown-quickpick-enable-time"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_enable_time.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Dropdown from "../../pb_dropdown/_dropdown";
+import DatePicker from "../../pb_date_picker/_date_picker";
+
+const DropdownQuickpickEnableTime = (props) => {
+  return (
+    <>
+      <Dropdown
+          {...props}
+          controlsEndId="end-date-picker-enable-time"
+          controlsStartId="start-date-picker-enable-time"
+          id="dropdown-quickpick-enable-time"
+          label="Range"
+          marginBottom="sm"
+          placeholder="Select a Date Range"
+          variant="quickpick"
+      />
+
+      <DatePicker
+          {...props}
+          enableTime
+          initializeOnce
+          label="Start Date"
+          pickerId="start-date-picker-enable-time"
+          placeholder="Select a Start Date"
+          syncStartWith="dropdown-quickpick-enable-time"
+      />
+
+      <DatePicker
+          {...props}
+          enableTime
+          initializeOnce
+          label="End Date"
+          pickerId="end-date-picker-enable-time"
+          placeholder="Select an End Date"
+          syncEndWith="dropdown-quickpick-enable-time"
+      />
+    </>
+  );
+};
+
+export default DropdownQuickpickEnableTime;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_enable_time.md

@@ -0,0 +1,24 @@
+When linked DatePickers use `enable_time` / `enableTime`, QuickPick presets that do not include an explicit time apply **start of day** (12:00 AM) to the start picker and **end of day** (11:59 PM) to the end picker. That matches DatePicker minute precision and inclusive datetime filters for ranges like Today and Yesterday.
+
+**Supported timed custom formats (Rails and React — same contract):**
+
+| Format | Example | Semantics |
+|--------|---------|-----------|
+| US `m/d/Y` + time (optional `:SS`, optional `AM`/`PM`) | `"06/01/2022 9:30 AM"` | Wall-clock — literal hour/minute/second labels |
+| Offset-less ISO datetime (`T` separator) | `"2026-03-08T02:30:00"` | Wall-clock — same as above (not server-TZ) |
+| ISO-8601 with `Z` or numeric offset | `"2026-03-08T07:30:00Z"`, `"2026-03-08T02:30:00-05:00"` | Absolute instant |
+
+**Emit (Rails and React — same contract):**
+
+| Input kind | Emit |
+|------------|------|
+| Wall-clock (US `m/d/Y` + time, or offset-less `YYYY-MM-DDTHH:MM:SS`) | Offset-less `YYYY-MM-DDTHH:MM:SS` — authored clock face |
+| Absolute (`Z` or numeric offset) | Keeps offset / `Z` (e.g. `…Z` or `…±HH:MM`) so `parseQuickPickDateTime` / `new Date(iso)` preserve the same instant |
+
+React also accepts `Date` objects (times kept as authored, including intentional midnight / `23:59:00`).
+
+Date-only custom strings (e.g. `"06/01/2022"`) still get SOD/EOD at sync when `enableTime` is on. Other free-text / undocumented timed strings are not supported.
+
+On Rails, wall-clock customs go to the option payload as offset-less datetimes; absolute customs keep their offset so linked `enableTime` DatePickers sync to the correct instant (not a misread local wall-clock).
+
+Alternate configuration: QuickPick + Time can also be handled by a Date-only QuickPick (Dropdown QuickPick + two DatePickers without time selection) paired with two TimePickers for start + end time selection in the same form.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_highlight.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
+
+const USERS = [
+  {
+    label: "Wade Winningham",
+    title: "Nitro Principal Developer",
+    territory: "PHL",
+    value: "wadeWinningham",
+  },
+  {
+    label: "Carlos Lima",
+    title: "Nitro Developer",
+    territory: "PHL",
+    value: "carlosLima",
+  },
+  {
+    label: "Stephen Marshall",
+    title: "Senior Nitro Developer",
+    territory: "PHL",
+    value: "stephenMarshall",
+  },
+  {
+    label: "Jasper Furniss",
+    title: "Lead User Experience Engineer",
+    territory: "PHL",
+    value: "jasperFurniss",
+  },
+]
+
+const escapeRegExp = (value = "") => (
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+)
+
+const highlighted = (text, searchInput) => {
+  if (!searchInput) return text
+
+  const regex = new RegExp(`(${escapeRegExp(searchInput)})`, 'gi')
+
+  return text.split(regex).map((part, index) => (
+    part.toLowerCase() === searchInput.toLowerCase()
+      ? <mark key={`${part}-${index}`}>{part}</mark>
+      : <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
+  ))
+}
+
+const loadUsers = (searchInput) => {
+  const normalizedInput = searchInput.toLowerCase()
+
+  return Promise.resolve(USERS.filter(({ label, title }) => (
+    `${label} ${title}`.toLowerCase().includes(normalizedInput)
+  )))
+}
+
+const DropdownWithHighlight = (props) => {
+  const [searchInput, setSearchInput] = useState("")
+
+  const renderUser = ({ label, territory, title }) => (
+    <Flex>
+      <FlexItem>
+        <Avatar
+            marginRight="sm"
+            name={label}
+            size="sm"
+        />
+      </FlexItem>
+      <FlexItem>
+        <Title size={4}>
+          {highlighted(label, searchInput)}
+        </Title>
+        <Body color="light">
+          {highlighted(title, searchInput)}{" • "}
+          {territory}
+        </Body>
+      </FlexItem>
+    </Flex>
+  )
+
+  return (
+    <Dropdown
+        async
+        autocomplete
+        defaultOptions={USERS}
+        label="Users"
+        loadOptions={loadUsers}
+        onInputChange={(input) => setSearchInput(input)}
+        onSelect={() => setSearchInput("")}
+        placeholder="Search users"
+        renderOption={renderUser}
+        {...props}
+    />
+  )
+}
+
+export default DropdownWithHighlight

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_highlight.md

@@ -0,0 +1,3 @@
+Use `onInputChange` to track the current search and `renderOption` to customize each option row. Split each field by the search input, then render matching text inside `<mark>` so users can quickly see why a result matched.
+
+This example uses `loadOptions` to search both the user's name and title.

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

@@ -36,6 +36,7 @@ examples:
   - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
+  - dropdown_quickpick_enable_time: Quick Pick with Date Pickers (Enable Time)
   - dropdown_required_indicator: Required Indicator
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
@@ -50,6 +51,7 @@ examples:
   react:
   - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
+  - dropdown_with_highlight: With Highlight
   - dropdown_multi_select: Multi Select
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display: Multi Select with Form Pill Props
@@ -86,6 +88,7 @@ examples:
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
+  - dropdown_quickpick_enable_time: Quick Pick with Date Pickers (Enable Time)
   - dropdown_required_indicator: Required Indicator
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options

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

@@ -47,3 +47,5 @@ export { default as DropdownAsyncMultiSelect } from './_dropdown_async_multi_sel
 export { default as DropdownAsyncRichResults } from './_dropdown_async_rich_results.jsx'
 export { default as DropdownAsyncInitialOptions } from './_dropdown_async_initial_options.jsx'
 export { default as DropdownExternalSearch } from './_dropdown_external_search.jsx'
+export { default as DropdownQuickpickEnableTime } from './_dropdown_quickpick_enable_time.jsx'
+export { default as DropdownWithHighlight } from './_dropdown_with_highlight.jsx'

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -2,6 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
 import { PbDropdownKeyboard } from "./keyboard_accessibility";
 import { setArrowVisibility, toggleVisibility } from "../utilities/domHelpers";
 import { subscribeFloatingKitReposition, positionDropdownPortalToWrapper } from "../utilities/floatingPortalHosts";
+import { setQuickPickDateOnPicker } from "./utilities/quickpickDateSync";
 
 const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
 const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
@@ -1313,11 +1314,11 @@ export default class PbDropdown extends PbEnhancedElement {
       const syncDatePickers = () => {
         if (controlsStartId) {
           const startPicker = document.querySelector(`#${CSS.escape(controlsStartId)}`)?._flatpickr;
-          if (startPicker) startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
+          setQuickPickDateOnPicker(startPicker, optionData.formatted_start_date, "start");
         }
         if (controlsEndId) {
           const endPicker = document.querySelector(`#${CSS.escape(controlsEndId)}`)?._flatpickr;
-          if (endPicker) endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+          setQuickPickDateOnPicker(endPicker, optionData.formatted_end_date, "end");
         }
       };
       syncDatePickers();
@@ -1447,10 +1448,10 @@ export default class PbDropdown extends PbEnhancedElement {
               `#${controlsStartId}`,
             )?._flatpickr;
             if (startPicker) {
-              startPicker.setDate(
+              setQuickPickDateOnPicker(
+                startPicker,
                 optionData.formatted_start_date,
-                true,
-                "m/d/Y",
+                "start",
               );
             }
           }
@@ -1460,7 +1461,11 @@ export default class PbDropdown extends PbEnhancedElement {
               `#${controlsEndId}`,
             )?._flatpickr;
             if (endPicker) {
-              endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+              setQuickPickDateOnPicker(
+                endPicker,
+                optionData.formatted_end_date,
+                "end",
+              );
             }
           }
         } else if (startDateId || endDateId) {
@@ -1793,10 +1798,10 @@ export default class PbDropdown extends PbEnhancedElement {
               `#${controlsStartId}`,
             )?._flatpickr;
             if (startPicker) {
-              startPicker.setDate(
+              setQuickPickDateOnPicker(
+                startPicker,
                 optionData.formatted_start_date,
-                true,
-                "m/d/Y",
+                "start",
               );
             }
           }
@@ -1806,7 +1811,11 @@ export default class PbDropdown extends PbEnhancedElement {
               `#${controlsEndId}`,
             )?._flatpickr;
             if (endPicker) {
-              endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
+              setQuickPickDateOnPicker(
+                endPicker,
+                optionData.formatted_end_date,
+                "end",
+              );
             }
           }
         };