playbook_ui 18.2.0.pre.rc.2 → 18.2.0

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -2,6 +2,13 @@
 // This provides date range options similar to the DatePicker QuickPick functionality
 
 import DateTime from '../../pb_kit/dateTime';
+import {
+  endOfDay,
+  parseQuickPickDateOnly,
+  parseQuickPickDateTime,
+  startOfDay,
+  stringHasExplicitTime,
+} from '../utilities/quickpickDateSync';
 
 type QuickPickOption = {
   label: string;
@@ -13,7 +20,7 @@ type QuickPickOption = {
 
 type CustomQuickPickDate = {
   label: string;
-  value: string[] | { timePeriod: string; amount: number };
+  value: Array<Date | string> | { timePeriod: string; amount: number };
 };
 
 type CustomQuickPickDates = {
@@ -21,6 +28,11 @@ type CustomQuickPickDates = {
   dates: CustomQuickPickDate[];
 };
 
+const toQuickPickRange = (start: Date, end: Date): Date[] => [
+  startOfDay(start),
+  endOfDay(end),
+];
+
 // Helper function to calculate date range from timePeriod and amount
 const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
   const endDate = new Date();
@@ -45,7 +57,7 @@ const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
     default:
       throw new Error('Invalid time period');
   }
-  return [startDate, endDate];
+  return toQuickPickRange(startDate, endDate);
 };
 
 // Helper to format date for display
@@ -57,13 +69,32 @@ const formatDate = (date: Date) => {
   return `${month}/${day}/${year}`;
 };
 
+// Date objects keep their authored time (including midnight / 23:59:00).
+// Date-only strings get SOD/EOD; timed strings keep their parsed time.
+const parseCustomDateBoundary = (value: Date | string): Date => {
+  if (value instanceof Date) return value;
+  if (stringHasExplicitTime(value)) {
+    return parseQuickPickDateTime(value) ?? new Date(value);
+  }
+  return parseQuickPickDateOnly(value) ?? new Date(value);
+};
+
+const boundaryHasExplicitTime = (value: Date | string): boolean =>
+  value instanceof Date || stringHasExplicitTime(value);
+
 // Helper to create a QuickPickOption from a custom date
 const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickOption => {
   let dateRange: Date[];
-  
+
   if (Array.isArray(customDate.value)) {
-    // Explicit date range as string array
-    dateRange = customDate.value.map((dateStr: string) => new Date(dateStr));
+    const startRaw = parseCustomDateBoundary(customDate.value[0]);
+    const endRaw = parseCustomDateBoundary(customDate.value[1]);
+    const startHasTime = boundaryHasExplicitTime(customDate.value[0]);
+    const endHasTime = boundaryHasExplicitTime(customDate.value[1]);
+    dateRange = [
+      startHasTime ? startRaw : startOfDay(startRaw),
+      endHasTime ? endRaw : endOfDay(endRaw),
+    ];
   } else {
     // Calculate from timePeriod and amount
     dateRange = calculateDateRange(
@@ -81,6 +112,17 @@ const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickO
   };
 };
 
+const option = (label: string, start: Date, end: Date, id: string): QuickPickOption => {
+  const value = toQuickPickRange(start, end);
+  return {
+    label,
+    value,
+    formattedStartDate: formatDate(value[0]),
+    formattedEndDate: formatDate(value[1]),
+    id,
+  };
+};
+
 // Helper to get QuickPick options with date ranges
 const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: CustomQuickPickDates): QuickPickOption[] => {
   const today = new Date();
@@ -107,30 +149,30 @@ const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: Cust
   const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
 
   const defaultOptions: QuickPickOption[] = [
-    { label: 'Today', value: [today, today], id: 'quickpick-today' },
-    { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
-    { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
-    { label: 'This Month', value: [thisMonthStartDate, thisMonthEndDate], formattedStartDate: `${formatDate(thisMonthStartDate)}`, formattedEndDate: `${formatDate(thisMonthEndDate)}`, id: 'quickpick-this-month' },
-    { label: 'This Quarter', value: [thisQuarterStartDate, thisQuarterEndDate], formattedStartDate: `${formatDate(thisQuarterStartDate)}`, formattedEndDate: `${formatDate(thisQuarterEndDate)}`, id: 'quickpick-this-quarter' },
-    { label: 'This Year', value: [thisYearStartDate, thisYearEndDate], formattedStartDate: `${formatDate(thisYearStartDate)}`, formattedEndDate: `${formatDate(thisYearEndDate)}`, id: 'quickpick-this-year' },
-    { label: 'Last Week', value: [lastWeekStartDate, lastWeekEndDate], formattedStartDate: `${formatDate(lastWeekStartDate)}`, formattedEndDate: `${formatDate(lastWeekEndDate)}`, id: 'quickpick-last-week' },
-    { label: 'Last Month', value: [lastMonthStartDate, lastMonthEndDate], formattedStartDate: `${formatDate(lastMonthStartDate)}`, formattedEndDate: `${formatDate(lastMonthEndDate)}`, id: 'quickpick-last-month' },
-    { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
-    { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
+    option('Today', today, today, 'quickpick-today'),
+    option('Yesterday', yesterday, yesterday, 'quickpick-yesterday'),
+    option('This Week', thisWeekStartDate, thisWeekEndDate, 'quickpick-this-week'),
+    option('This Month', thisMonthStartDate, thisMonthEndDate, 'quickpick-this-month'),
+    option('This Quarter', thisQuarterStartDate, thisQuarterEndDate, 'quickpick-this-quarter'),
+    option('This Year', thisYearStartDate, thisYearEndDate, 'quickpick-this-year'),
+    option('Last Week', lastWeekStartDate, lastWeekEndDate, 'quickpick-last-week'),
+    option('Last Month', lastMonthStartDate, lastMonthEndDate, 'quickpick-last-month'),
+    option('Last Quarter', lastQuarterStartDate, lastQuarterEndDate, 'quickpick-last-quarter'),
+    option('Last Year', lastYearStartDate, lastYearEndDate, 'quickpick-last-year'),
   ];
 
   // Handle customQuickPickDates and override logic
   if (customQuickPickDates && customQuickPickDates.dates && customQuickPickDates.dates.length > 0) {
     const customOptions = customQuickPickDates.dates.map(createOptionFromCustomDate);
-    
+
     if (customQuickPickDates.override === false) {
       return [...defaultOptions, ...customOptions];
     }
-    
+
     return customOptions;
   }
 
   return defaultOptions;
 };
 
-export default getQuickPickOptions
+export default getQuickPickOptions

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -3,6 +3,16 @@
 module Playbook
   module PbDropdown
     module QuickpickHelper
+      # Marker for absolute ISO boundaries (Z / numeric offset). Wall-clock
+      # DateTime.civil also has offset 0, so offset alone cannot distinguish —
+      # format_date / format_value use this flag to preserve Z/±HH:MM on emit.
+      module AbsoluteInstant
+        def absolute_instant?
+          true
+        end
+      end
+      private_constant :AbsoluteInstant
+
       class << self
         def get_quickpick_options(range_ends_today: false, custom_quick_pick_dates: {})
           default_options = build_default_options(range_ends_today)
@@ -77,7 +87,7 @@ module Playbook
           {
             id: "quickpick-#{label.downcase.gsub(/\s+/, '-')}",
             label: label,
-            value: [start_date.to_s, end_date.to_s],
+            value: [format_value(start_date), format_value(end_date)],
             formatted_start_date: format_date(start_date),
             formatted_end_date: format_date(end_date),
           }
@@ -86,7 +96,7 @@ module Playbook
         def calculate_date_range(value)
           # Parse date strings if value is an array
           if value.is_a?(Array)
-            [parse_date_string(value[0]), parse_date_string(value[1])]
+            [parse_boundary(value[0]), parse_boundary(value[1])]
           else
             # Calculate date range from time_period and amount
             time_period = value[:time_period] || value["time_period"] || value[:timePeriod] || value["timePeriod"]
@@ -99,6 +109,19 @@ module Playbook
           end
         end
 
+        def parse_boundary(date_str)
+          date_str = date_str.to_s
+          if string_has_explicit_time?(date_str)
+            parse_datetime_string(date_str)
+          else
+            parse_date_string(date_str)
+          end
+        end
+
+        def string_has_explicit_time?(value)
+          value.match?(/[T\s]\d{1,2}:\d{2}/) || value.match?(/\d{1,2}:\d{2}\s*(AM|PM)/i)
+        end
+
         def parse_date_string(date_str)
           # Handle US date format (MM/DD/YYYY) because Ruby's Date.parse defaults to European format (DD/MM/YYYY)
           if date_str.include?("/")
@@ -108,6 +131,40 @@ module Playbook
           end
         end
 
+        # Parses timed custom boundaries. Mirrors React parseQuickPickDateTime:
+        # 1) US m/d/Y + time (optional :SS / AM|PM) → DateTime.civil (wall-clock)
+        # 2) Offset-less YYYY-MM-DDTHH:MM:SS → DateTime.civil (wall-clock; not Time.parse)
+        # 3) ISO with Z / numeric offset → DateTime.iso8601 (absolute; emit keeps offset)
+        # Unsupported timed strings raise — no process-TZ Time.parse fallback.
+        # Date-only boundaries stay on parse_date_string (unchanged).
+        def parse_datetime_string(date_str)
+          trimmed = date_str.to_s.strip
+
+          if (match = trimmed.match(%r{\A(\d{1,2})/(\d{1,2})/(\d{4})\s+(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)?\z}i))
+            month, day, year, hour, min, sec, meridiem = match.captures
+            hour = hour.to_i
+            min = min.to_i
+            sec = (sec || 0).to_i
+            if meridiem
+              meridiem = meridiem.upcase
+              hour = 0 if meridiem == "AM" && hour == 12
+              hour += 12 if meridiem == "PM" && hour != 12
+            end
+            return DateTime.civil(year.to_i, month.to_i, day.to_i, hour, min, sec)
+          end
+
+          # Offset-less wall-clock ISO (same shape as WALL_CLOCK_ISO in quickpickDateSync.ts).
+          if (match = trimmed.match(/\A(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?(?:\.\d+)?\z/))
+            year, month, day, hour, min, sec = match.captures
+            return DateTime.civil(year.to_i, month.to_i, day.to_i, hour.to_i, min.to_i, (sec || 0).to_i)
+          end
+
+          # Absolute ISO with Z or numeric offset (React: new Date(iso)).
+          return DateTime.iso8601(trimmed).extend(AbsoluteInstant) if trimmed.match?(/\A\d{4}-\d{2}-\d{2}T/) && trimmed.match?(/[Zz]|[+-]\d{2}:?\d{2}\z/)
+
+          raise ArgumentError, "Unsupported QuickPick timed value: #{date_str.inspect}"
+        end
+
         def calculate_start_date(time_period, amount, end_date)
           case time_period.to_s
           when "days"
@@ -125,8 +182,40 @@ module Playbook
           end
         end
 
+        # Date-only → m/d/Y (SOD/EOD applied at sync when enableTime).
+        # Wall-clock Time/DateTime → offset-less YYYY-MM-DDTHH:MM:SS (local clock face).
+        # Absolute ISO (AbsoluteInstant) → iso8601 with Z/±HH:MM so JS new Date keeps
+        # the same instant (React parseQuickPickDateTime already handles both).
         def format_date(date)
-          date.strftime("%m/%d/%Y")
+          if time_like?(date)
+            format_timed(date)
+          else
+            date.strftime("%m/%d/%Y")
+          end
+        end
+
+        def format_value(date)
+          if time_like?(date)
+            format_timed(date)
+          else
+            date.to_s
+          end
+        end
+
+        def format_timed(date)
+          if absolute_instant?(date)
+            date.iso8601
+          else
+            date.strftime("%Y-%m-%dT%H:%M:%S")
+          end
+        end
+
+        def absolute_instant?(date)
+          date.respond_to?(:absolute_instant?) && date.absolute_instant?
+        end
+
+        def time_like?(date)
+          date.is_a?(Time) || date.is_a?(DateTime) || defined?(ActiveSupport::TimeWithZone) && date.is_a?(ActiveSupport::TimeWithZone)
         end
 
         def format_date_range(start_date, end_date)

data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts

@@ -1,2 +1,9 @@
 export { separateChildComponents, prepareSubcomponents } from './subComponentHelper';
-export { handleClickOutside } from './clickOutsideHelper';
+export { handleClickOutside } from './clickOutsideHelper';
+export {
+  endOfDay,
+  parseQuickPickDateOnly,
+  setQuickPickDateOnPicker,
+  startOfDay,
+  stringHasExplicitTime,
+} from './quickpickDateSync';

data/app/pb_kits/playbook/pb_dropdown/utilities/quickpickDateSync.ts

@@ -0,0 +1,137 @@
+// QuickPick → DatePicker sync helpers.
+// End-of-day uses 23:59:00 to match DatePicker enableTime minute precision
+// (default timeFormat has no seconds).
+//
+// Contract when the target Flatpickr has enableTime:
+// - Date-only strings (e.g. m/d/Y) → start of day / end of day by bound
+// - Timed strings → parse to Date and pass through unchanged
+// - Date objects → pass through unchanged (presets already SOD/EOD via toQuickPickRange;
+//   custom values may intentionally use midnight or 23:59:00)
+
+type FlatpickrLike = {
+  setDate: (date: Date | string, triggerChange?: boolean, format?: string) => void
+  config?: { enableTime?: boolean }
+}
+
+export type QuickPickDateBound = "start" | "end"
+
+const DATE_ONLY_MDY = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/
+// Mirrors Rails QuickpickHelper#parse_datetime_string for US m/d/Y + optional AM/PM.
+const MDY_WITH_TIME =
+  /^(\d{1,2})\/(\d{1,2})\/(\d{4})\s+(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)?$/i
+// Offset-less wall-clock from Rails format_date / format_value (no Z / ±HH:MM).
+const WALL_CLOCK_ISO =
+  /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?(?:\.\d+)?$/
+
+export const startOfDay = (date: Date): Date => {
+  const next = new Date(date.getTime())
+  next.setHours(0, 0, 0, 0)
+  return next
+}
+
+export const endOfDay = (date: Date): Date => {
+  const next = new Date(date.getTime())
+  next.setHours(23, 59, 0, 0)
+  return next
+}
+
+export const stringHasExplicitTime = (value: string): boolean => {
+  return /[T\s]\d{1,2}:\d{2}/.test(value) || /\d{1,2}:\d{2}\s*(AM|PM)/i.test(value)
+}
+
+export const parseQuickPickDateOnly = (value: string): Date | null => {
+  const match = value.trim().match(DATE_ONLY_MDY)
+  if (!match) return null
+  const month = Number(match[1])
+  const day = Number(match[2])
+  const year = Number(match[3])
+  return new Date(year, month - 1, day)
+}
+
+/**
+ * Parse timed QuickPick custom strings to a local Date.
+ * - m/d/Y + time (optional seconds / AM|PM) → wall-clock components (Safari-safe)
+ * - Offset-less YYYY-MM-DDTHH:MM:SS → wall-clock components
+ * - ISO with Z / offset → absolute instant via Date constructor
+ */
+export const parseQuickPickDateTime = (value: string): Date | null => {
+  const trimmed = value.trim()
+
+  const mdy = trimmed.match(MDY_WITH_TIME)
+  if (mdy) {
+    const month = Number(mdy[1])
+    const day = Number(mdy[2])
+    const year = Number(mdy[3])
+    let hour = Number(mdy[4])
+    const minute = Number(mdy[5])
+    const second = mdy[6] != null ? Number(mdy[6]) : 0
+    const meridiem = mdy[7]?.toUpperCase()
+    if (meridiem === "AM" && hour === 12) hour = 0
+    if (meridiem === "PM" && hour !== 12) hour += 12
+    return new Date(year, month - 1, day, hour, minute, second)
+  }
+
+  const wallClock = trimmed.match(WALL_CLOCK_ISO)
+  if (wallClock) {
+    const year = Number(wallClock[1])
+    const month = Number(wallClock[2])
+    const day = Number(wallClock[3])
+    const hour = Number(wallClock[4])
+    const minute = Number(wallClock[5])
+    const second = wallClock[6] != null ? Number(wallClock[6]) : 0
+    return new Date(year, month - 1, day, hour, minute, second)
+  }
+
+  const parsed = new Date(trimmed)
+  if (Number.isNaN(parsed.getTime())) return null
+  return parsed
+}
+
+/**
+ * Apply a QuickPick date to a Flatpickr instance.
+ * With enableTime and a date-only string: start → 00:00:00, end → 23:59:00.
+ * Timed strings and Date values are passed through unchanged.
+ * Date-only pickers keep the existing m/d/Y string path for date-only values.
+ */
+export const setQuickPickDateOnPicker = (
+  picker: FlatpickrLike | null | undefined,
+  value: Date | string | null | undefined,
+  bound: QuickPickDateBound,
+): void => {
+  if (!picker || value == null || value === "") return
+
+  const enableTime = Boolean(picker.config?.enableTime)
+
+  if (!enableTime) {
+    if (typeof value === "string") {
+      // Timed payloads (ISO / datetime) are not valid for Flatpickr's m/d/Y format.
+      if (stringHasExplicitTime(value)) {
+        const parsed = parseQuickPickDateTime(value)
+        if (!parsed) return
+        picker.setDate(parsed, true)
+        return
+      }
+      picker.setDate(value, true, "m/d/Y")
+    } else {
+      picker.setDate(value, true)
+    }
+    return
+  }
+
+  if (typeof value === "string") {
+    if (stringHasExplicitTime(value)) {
+      const parsed = parseQuickPickDateTime(value)
+      if (!parsed) return
+      picker.setDate(parsed, true)
+      return
+    }
+
+    let date = parseQuickPickDateOnly(value) ?? new Date(value)
+    if (Number.isNaN(date.getTime())) return
+    date = bound === "start" ? startOfDay(date) : endOfDay(date)
+    picker.setDate(date, true)
+    return
+  }
+
+  picker.setDate(value, true)
+}

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

@@ -28,7 +28,7 @@ export type DropdownInteractiveConfig = {
     override?: boolean,
     dates: {
       label: string,
-      value: string[] | { timePeriod: string, amount: number },
+      value: Array<Date | string> | { timePeriod: string, amount: number },
     }[],
   },
   value?: string,

data/app/pb_kits/playbook/pb_highlight/_highlight.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalEventProps, GlobalEventProps } from '../utilities/globalEventProps'
 import { buildDataProps, buildHtmlProps } from '../utilities/props'
 import { findHighlightChunks } from './_highlightChunks'
 
@@ -12,7 +13,7 @@ type HighlightProps = {
   children?: React.ReactChild[] | React.ReactChild | string,
   text?: string,
   highlightedText?: string[],
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const Highlight = (props: HighlightProps): React.ReactElement => {
   const {
@@ -35,6 +36,7 @@ const Highlight = (props: HighlightProps): React.ReactElement => {
     <span
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         id={id}
     >
       {chunks.map((chunk, index) => {

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

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

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,7 +34,7 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -94,6 +95,7 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx

@@ -3,6 +3,7 @@ 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 Icon from '../pb_icon/_icon'
@@ -18,7 +19,7 @@ type IconValueProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
-}
+} & GlobalEventProps
 
 const IconValue = (props: IconValueProps): React.ReactElement => {
   const {
@@ -46,6 +47,7 @@ const IconValue = (props: IconValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_label_value/_label_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 DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -25,7 +26,7 @@ type LabelValueProps = {
   icon?: string;
   description?: string;
   title?: string;
-};
+} & GlobalEventProps;
 
 const dateString = (value: Date) => {
   const month = DateTime.toMonthNum(value);
@@ -67,6 +68,7 @@ const LabelValue = (props: LabelValueProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
         title={title}

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

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

data/app/pb_kits/playbook/pb_map/docs/_map_default.md

@@ -1,9 +1,9 @@
 This kit provides a wrapping class to place around the MapLibre library. Complete docs for using the library can be found [here](https://maplibre.org/maplibre-gl-js-docs/api/).
 
 Basic setup to start using MapLibre:
-- Install the npm package using `yarn add maplibre-gl`
-- To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: `@import url("https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.css");`
- OR include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.css' rel='stylesheet' />`
+- Install the npm package using `yarn add maplibre-gl@6.4.1`
+- To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: `@import url("https://unpkg.com/maplibre-gl@6.4.1/dist/maplibre-gl.css");`
+ OR include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@6.4.1/dist/maplibre-gl.css' rel='stylesheet' />`
 - You can now use MapLibre within the Map Kit as shown in this example.
 
 __Notes__ : 

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
@@ -28,7 +29,7 @@ type MessageProps = {
   timestampObject?: Date,
   timezone?: string,
   alignTimestamp?: string,
-}
+} & GlobalEventProps
 
 const Message = (props: MessageProps) => {
   const {
@@ -68,6 +69,7 @@ const Message = (props: MessageProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Tooltip from '../pb_tooltip/_tooltip'
@@ -19,7 +20,7 @@ type MultipleUsersProps = {
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   withTooltip?: boolean,
   users: Array<{ [key: string]: string }>,
-}
+} & GlobalEventProps
 
 const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   const {
@@ -126,6 +127,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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