playbook_ui 18.2.0.pre.rc.1 → 18.2.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5db309b02e5dd780da0f53f519c006634be2dd50e13553ce229ddd8be84a5527
-  data.tar.gz: dd7da084d43bf1060792d5dcc88dcc5fe2eaabe30d143f262083c80bef7f0a90
+  metadata.gz: 1c86866d416fa61cd6ef95462feacdaab4821a38f7512d171709d74ae355ca79
+  data.tar.gz: 881dc11beb08455d597c2fef659070af84626c562597566f69fcdb773a61f5e7
 SHA512:
-  metadata.gz: fcc52f997e3940eae2b3c00d36620ab00d2f44fddbce652671a6a3f6223877ce3cce1310d994e405dffad6fa92629727c8b1651a777cf379dd198a810ba1c93d
-  data.tar.gz: 18cd7637fe9d879a22a4df5505afda151de2e0a8f6bb02dc742016efe4bf4692bc2d08b50c88f078be99b0ea95c95e543dea5061489c4ffe9eada2799900a509
+  metadata.gz: 2a6e88281370f5ce11a7467aab89ed9db923a593f34748c39f43143488daa0f92b9f55b8eb9c1636c2f2c64215a3b092cdd5fbc3702315cc9612ef9cfe2327b0
+  data.tar.gz: 398a941db88d54157eb9ca15fb952d290961fc05074a7c62ec0e6246cf315ae9d75da943f31d57b6c654d99652f32036b33c4dc1fda9bd3b2454e1cf524dae50

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -491,12 +491,10 @@
     }
   }
 
-  // First column separator/border
+  // First data column separator/border (Year when no separate checkbox column)
   .table-header-cells:first-child,
-  .table-header-cells-custom:first-child,
-  td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child {
+  td:first-child:not(.checkbox-cell),
+  .pb_table_td:first-child:not(.checkbox-cell) {
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
@@ -504,6 +502,14 @@
     box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  // Separate checkbox column (Rails + React): separator on the first data column
+  .table-header-cells-custom + th[colspan="1"],
+  .table-header-cells-custom + .table-header-cells[colspan="1"],
+  td.checkbox-cell + td,
+  td.checkbox-cell + .pb_table_td {
+    box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -715,6 +721,12 @@
         box-shadow: 0 0 0 0 !important;
       }
 
+      // Re-apply after the nth-child(2) clear above (checkbox column layouts)
+      td.checkbox-cell + td,
+      td.checkbox-cell + .pb_table_td {
+        box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,
@@ -816,10 +828,15 @@
     }
 
     .table-header-cells:first-child,
-    .table-header-cells-custom:first-child,
-    td:first-child,
-    .pb_table_td:first-child,
-    .checkbox-cell.checkbox-cell-header:first-child {
+    td:first-child:not(.checkbox-cell),
+    .pb_table_td:first-child:not(.checkbox-cell) {
+      box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
+    }
+
+    .table-header-cells-custom + th[colspan="1"],
+    .table-header-cells-custom + .table-header-cells[colspan="1"],
+    td.checkbox-cell + td,
+    td.checkbox-cell + .pb_table_td {
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,14 +1,19 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
+    <% is_lowest_header_row = row_index == header_rows.size - 1 %>
     <%= pb_rails("table/table_row") do %>
-      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
-        <%= object.render_select_all_header %>
+      <% if object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <% if is_lowest_header_row %>
+          <%= object.render_select_all_header %>
+        <% else %>
+          <%= object.render_select_all_header_spacer %>
+        <% end %>
       <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
           <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
-            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+            <% if cell_index.zero? && is_lowest_header_row %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
                   <%= object.render_select_all_checkbox %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -58,13 +58,8 @@ module Playbook
       # Selectable Rows No Subrows - checkboxes in their own first cell
       def render_select_all_header
         if selectable_rows
-          additional_classes = []
-          additional_classes << "table-header-cells-custom"
-          additional_classes << "header-cells-with-actions" if show_actions_bar
-          additional_classes << "checkbox-cell-header"
-          additional_classes << "pinned-left" if responsive == "scroll"
           pb_rails("table/table_header", props: {
-                     classname: additional_classes.join(" "),
+                     classname: select_all_header_classname,
                    }) do
             pb_rails("checkbox", props: {
                        id: "#{table_id ? "#{table_id}-" : ''}select-all-rows",
@@ -76,6 +71,15 @@ module Playbook
         end
       end
 
+      # Empty checkbox-column cell for upper multi-header rows so columns stay aligned
+      def render_select_all_header_spacer
+        if selectable_rows
+          pb_rails("table/table_header", props: {
+                     classname: select_all_header_classname,
+                   })
+        end
+      end
+
       # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
       def render_select_all_checkbox
         if selectable_rows
@@ -212,6 +216,15 @@ module Playbook
 
     private
 
+      def select_all_header_classname
+        additional_classes = []
+        additional_classes << "table-header-cells-custom"
+        additional_classes << "header-cells-with-actions" if show_actions_bar
+        additional_classes << "checkbox-cell-header"
+        additional_classes << "pinned-left" if responsive == "scroll"
+        additional_classes.join(" ")
+      end
+
       def header_layout_styles(cell)
         original_def = find_original_column_def_for_cell(cell)
         return {} unless original_def

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -189,7 +189,7 @@ module Playbook
 
           pb_rails("checkbox", props: {
                      id: "#{prefix}select-row-#{row_id || row.object_id}",
-                     indeterminate_main: !last_row,
+                     indeterminate_main: row_children.present?,
                      indeterminate_main_labels: ["", ""],
                      indeterminate_parent: indeterminate_parent,
                      name: "#{prefix}select-row-#{row_id || row.object_id}",

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_date_picker/_date_picker.scss

@@ -16,6 +16,10 @@
       display: block;
     }
 
+    .date_picker_input_container {
+      position: relative;
+    }
+    
     @import "./sass_partials/calendar_input_icon";
   }
 

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

@@ -297,19 +297,57 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         )}
           <>
             <div className="date_picker_input_wrapper">
-              <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
-                  autoComplete="off"
-                  className="date_picker_input"
-                  disabled={disableInput}
-                  id={pickerId}
-                  name={name}
-                  onChange={inputOnChange}
-                  placeholder={placeholder}
-                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
-                  value={inputValue}
-              />
+              <div className="date_picker_input_container">
+                <input
+                    aria-describedby={errorId}
+                    aria-invalid={!!error}
+                    autoComplete="off"
+                    className="date_picker_input"
+                    disabled={disableInput}
+                    id={pickerId}
+                    name={name}
+                    onChange={inputOnChange}
+                    placeholder={placeholder}
+                    style={{ cursor: getCursorStyle(filteredProps.cursor) }}
+                    value={inputValue}
+                />
+
+                {!hideIcon && !inLine &&
+                  <div
+                      className={iconWrapperClass()}
+                      id={`cal-icon-${pickerId}`}
+                  >
+                    <Icon
+                        className="cal_icon"
+                        icon="calendar-alt"
+                    />
+                  </div>
+                }
+
+                {inLine ?
+                  <div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
+                        id={`${pickerId}-icon-plus`}
+                    >
+                      <Icon
+                          className="date-picker-plus-icon"
+                          icon="plus"
+                      />
+                    </div>
+                    <div
+                        className={`${iconWrapperClass()} date-picker-inline-angle-down`}
+                        id={`${pickerId}-angle-down`}
+                    >
+                      <Icon
+                          className="angle_down_icon svg-inline--fa"
+                          customIcon={angleDown}
+                      />
+                    </div>
+                  </div>
+                  : null
+                }
+              </div>
 
               {error &&
                   <Body
@@ -322,42 +360,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   />
               }
             </div>
-
-            {!hideIcon && !inLine &&
-              <div
-                  className={iconWrapperClass()}
-                  id={`cal-icon-${pickerId}`}
-              >
-                <Icon
-                    className="cal_icon"
-                    icon="calendar-alt"
-                />
-              </div>
-            }
-
-            {inLine ?
-              <div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
-                    id={`${pickerId}-icon-plus`}
-                >
-                  <Icon
-                      className="date-picker-plus-icon"
-                      icon="plus"
-                  />
-                </div>
-                <div
-                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
-                    id={`${pickerId}-angle-down`}
-                >
-                  <Icon
-                      className="angle_down_icon svg-inline--fa"
-                      customIcon={angleDown}
-                  />
-                </div>
-              </div>
-              : null
-            }
           </>
       </div>
     </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -18,66 +18,66 @@
         <% end %>
       </label>
     <% end %>
-    <% if content.present? %>
-      <%= content %>
-    <% else %>
-    <%= pb_rails("text_input", props: {
-      aria: object.input_aria,
-      autocomplete: false,
-      cursor: object.cursor,
-      dark: object.dark,
-      data: object.input_data,
-      disabled: object.disable_input,
-      error: object.error,
-      id: object.picker_id,
-      margin_bottom: "none",
-      name: object.name,
-      placeholder: object.placeholder,
-      required: object.required,
-      validation: object.validation_message.present? ? { message: object.validation_message } : {},
-    }) %>
-    <% end %>
+    <div class="date_picker_input_container">
+      <% if content.present? %>
+        <%= content %>
+      <% else %>
+        <%= pb_rails("text_input", props: {
+          aria: object.input_aria,
+          autocomplete: false,
+          cursor: object.cursor,
+          dark: object.dark,
+          data: object.input_data,
+          disabled: object.disable_input,
+          error: object.error,
+          id: object.picker_id,
+          margin_bottom: "none",
+          name: object.name,
+          placeholder: object.placeholder,
+          required: object.required,
+          validation: object.validation_message.present? ? { message: object.validation_message } : {},
+        }) %>
+      <% end %>
+      <% if !object.hide_icon && !object.inline %>
+        <div
+          class="<%= object.icon_wrapper_class %>"
+          id="cal-icon-<%= object.picker_id %>"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "cal_icon",
+            icon: "calendar-alt"
+          }) %>
+        </div>
+      <% end %>
+       <!-- Inline -->
+      <% if object.inline %>
+        <!-- Plus Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
+            id="<%= object.picker_id %>-icon-plus"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "plus-icon",
+            icon: "plus"
+          }) %>
+        </div>
+
+        <!-- Angle Down Icon -->
+        <div
+            class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
+            id="<%= object.picker_id %>-angle-down"
+        >
+          <%= pb_rails("icon", props: {
+            classname: "angle_down_icon",
+            custom_icon: Playbook::Engine::root.join(angle_down_path)
+          }) %>
+        </div>
+      <% end %>
+    </div>
     <% if object.selection_type == "quickpick" %>
       <input type="hidden" id="<%= "#{object.start_date_id}" %>" name="<%= "#{object.start_date_name}" %>">
       <input type="hidden" id="<%= "#{object.end_date_id}" %>" name="<%= "#{object.end_date_name}" %>">
     <% end %>
-
-    <% if !object.hide_icon && !object.inline %>
-      <div
-          class="<%= object.icon_wrapper_class %>"
-          id="cal-icon-<%= object.picker_id %>"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "cal_icon",
-          icon: "calendar-alt"
-        }) %>
-      </div>
-    <% end %>
-
-    <!-- Inline -->
-    <% if object.inline %>
-      <!-- Plus Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
-          id="<%= object.picker_id %>-icon-plus"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "plus-icon",
-          icon: "plus"
-        }) %>
-      </div>
-
-      <!-- Angle Down Icon -->
-      <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
-          id="<%= object.picker_id %>-angle-down"
-      >
-        <%= pb_rails("icon", props: {
-          classname: "angle_down_icon",
-          custom_icon: Playbook::Engine::root.join(angle_down_path)
-        }) %>
-      </div>
-    <% end %>
   </div>
 
   <%= javascript_tag do %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -3,7 +3,7 @@
 .cal_icon_wrapper {
   pointer-events: none;
   position: absolute;
-  top: $space_md + 2;
+  top: 0;
   right: 0;
   border-left: 1px solid $input_border_default;
   width: $space_xl + $space_xs;

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.
-