playbook_ui 18.2.0.pre.rc.2 → 18.2.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbc2a1ba01cca1bd4a5b48488fafecee3697e273fd940d942a9de5de93a76921
-  data.tar.gz: e8cf1cc4ec63bd1957d455ed4766db51865e0f42b9369ae59065f89bb7d78946
+  metadata.gz: 1c86866d416fa61cd6ef95462feacdaab4821a38f7512d171709d74ae355ca79
+  data.tar.gz: 881dc11beb08455d597c2fef659070af84626c562597566f69fcdb773a61f5e7
 SHA512:
-  metadata.gz: f5af4f9cf873c44ba0c76176e17130f0cf77fbd9c526ccea6041a70b0e1da2951a16da702259a01d16df03628a30402bcc1fdc47f32675af28aaf16f1fdb8ffb
-  data.tar.gz: 598126c77b37bd8885bfeb8fa1ebcc30d5f30adab8dcd92b46ea71ce8b038314dda4e774d3fea789ba3e7462ff5ea83276bd10229ce43efaa767e33fe5c430c4
+  metadata.gz: 2a6e88281370f5ce11a7467aab89ed9db923a593f34748c39f43143488daa0f92b9f55b8eb9c1636c2f2c64215a3b092cdd5fbc3702315cc9612ef9cfe2327b0
+  data.tar.gz: 398a941db88d54157eb9ca15fb952d290961fc05074a7c62ec0e6246cf315ae9d75da943f31d57b6c654d99652f32036b33c4dc1fda9bd3b2454e1cf524dae50

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_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/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
@@ -86,6 +87,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,4 @@ 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'

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",
+              );
             }
           }
         };

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