playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -6,8 +6,23 @@ import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
 import { getAllIcons } from '../utilities/icons/allicons';
-
-const angleDown = getAllIcons().angleDown.string
+import {
+  announceFloatingKitOpen,
+  nextPortaledFloatingZIndex,
+  positionDropdownPortalToWrapper,
+  resolveFloatingOwnerId,
+  resolvePortaledFloatingZIndex,
+  resolvePortaledKitHost,
+  kitRequiresPortaledFloatingUi,
+  setFloatingOwnerAttribute,
+  subscribeFloatingKitOpen,
+  subscribeFloatingKitReposition,
+} from '../utilities/floatingPortalHosts'
+
+const { angleDown, angleLeft, angleRight } = getAllIcons()
+const angleDownString = angleDown.string
+const angleLeftString = angleLeft.string
+const angleRightString = angleRight.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -32,12 +47,15 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
+  yearAscending?: boolean,
   yearRange: number[],
   controlsStartId?: string,
     controlsEndId?: string,
     syncStartWith?: string,
     syncEndWith?: string,
-} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
+  /** React Dialog floating root; omit in Rails (DOM resolution only). */
+  dialogPortalTarget?: HTMLElement | null,
+} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" | "inline" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
   const noop = () => {
@@ -70,13 +88,98 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
+    yearAscending,
     yearRange,
     controlsStartId,
     controlsEndId,
     syncStartWith,
     syncEndWith,
+    dialogPortalTarget,
+    inline = false,
   } = config
 
+  const inputElForPortal =
+    typeof document !== "undefined"
+      ? document.querySelector<HTMLElement>(`#${String(pickerId)}`)
+      : null
+  const kitRootForPortal = inputElForPortal?.closest(".pb_date_picker_kit") as HTMLElement | null
+  const portalHost =
+    !inline && kitRootForPortal && kitRequiresPortaledFloatingUi(kitRootForPortal)
+      ? resolvePortaledKitHost(kitRootForPortal, dialogPortalTarget ?? null)
+      : null
+
+  const floatingOwnerId = resolveFloatingOwnerId(kitRootForPortal)
+  const effectiveStatic = portalHost ? false : staticPosition
+
+  type DatePickerInputEl = HTMLElement & {
+    _flatpickr?: Instance
+    _pbDatePickerOpenUnsub?: () => void
+  }
+
+  const existingInput = document.querySelector(`#${String(pickerId)}`) as DatePickerInputEl | null
+  if (existingInput?._pbDatePickerOpenUnsub) {
+    existingInput._pbDatePickerOpenUnsub()
+    delete existingInput._pbDatePickerOpenUnsub
+  }
+  if (existingInput?._flatpickr) {
+    existingInput._flatpickr.destroy()
+  }
+
+  let portalAppendShell: HTMLElement | undefined
+
+  const removePortalShell = (): void => {
+    if (!portalHost) return
+
+    const shellSelector = `[data-pb-date-picker-floating-shell="${String(pickerId)}"]`
+    const shell =
+      portalAppendShell?.isConnected
+        ? portalAppendShell
+        : (portalHost.querySelector(shellSelector) as HTMLElement | undefined)
+
+    shell?.remove()
+    portalAppendShell = undefined
+  }
+
+  const ensurePortalShell = (): HTMLElement | undefined => {
+    if (!portalHost) return undefined
+    if (portalAppendShell?.isConnected) return portalAppendShell
+
+    const shellSelector = `[data-pb-date-picker-floating-shell="${String(pickerId)}"]`
+    portalAppendShell =
+      portalHost.querySelector(shellSelector) as HTMLElement | undefined
+
+    if (!portalAppendShell) {
+      portalAppendShell = document.createElement("div")
+      portalAppendShell.className = "pb_date_picker_floating_shell pb_date_picker_kit"
+      portalAppendShell.setAttribute(
+        "data-pb-date-picker-floating-shell",
+        String(pickerId),
+      )
+      portalAppendShell.addEventListener("mousedown", (e) => {
+        e.stopPropagation()
+      })
+      portalAppendShell.addEventListener("click", (e) => {
+        e.stopPropagation()
+      })
+      portalHost.appendChild(portalAppendShell)
+    }
+
+    setFloatingOwnerAttribute(portalAppendShell, floatingOwnerId)
+    return portalAppendShell
+  }
+
+  const mountCalendarInPortalShell = (fp: Instance): void => {
+    const shell = ensurePortalShell()
+    if (!shell?.isConnected || !fp.calendarContainer) return
+    if (fp.calendarContainer.parentElement !== shell) {
+      shell.appendChild(fp.calendarContainer)
+    }
+  }
+
+  let activePortalZIndex: string | undefined
+
+  let unsubscribeFloatingReposition: (() => void) | null = null
+
   // ===========================================================
   // |                   Hook Definitions                      |
   // ===========================================================
@@ -183,6 +286,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   const positionCalendarIfNeeded = (fp: Instance) => {
+    if (portalHost) {
+      mountCalendarInPortalShell(fp)
+      fp._positionCalendar()
+      return
+    }
+
     const cal = document.querySelector(`#cal-${pickerId}`) as HTMLElement
     if (!cal) return
 
@@ -192,7 +301,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     const spaceAbove = inputRect.top
 
     if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
-      if (staticPosition) {
+      if (effectiveStatic) {
         cal.style.top = 'auto'
         cal.style.bottom = 'calc(100% + 5px)'
       } else {
@@ -200,7 +309,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
         cal.style.top = `${Math.max(10, inputRect.top - h - 5)}px`
         cal.style.left = `${inputRect.left}px`
       }
-    } else if (staticPosition) {
+    } else if (effectiveStatic) {
       cal.style.top = ''
       cal.style.bottom = ''
     } else {
@@ -234,9 +343,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   // Attach / detach to / from scroll events
-  const initialPicker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   const scrollEvent = () => {
-    initialPicker._positionCalendar()
+    const fp = document.querySelector<HTMLElement & { _flatpickr?: Instance }>(`#${pickerId}`)
+      ?._flatpickr
+    fp?._positionCalendar()
   }
   function attachToScroll(scrollParent: string | HTMLElement) {
     document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
@@ -245,10 +355,23 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
   }
 
+  const yearSelectId = `year-${pickerId}`
+
+  const yearDropdownFromCalendar = (fp: Instance): HTMLSelectElement | null => {
+    return fp.calendarContainer?.querySelector<HTMLSelectElement>(`#${yearSelectId}`) ?? null
+  }
+
+  const yearDropdownIsReady = (fp: Instance): boolean => {
+    const dropdown = yearDropdownFromCalendar(fp)
+    return dropdown !== null && dropdown.options.length > 0
+  }
+
   // two way binding
   const yearChangeHook = (fp: Instance) => {
-      const yearInput = document.querySelector(`#year-${fp.input.id}`) as HTMLInputElement
+    const yearInput = yearDropdownFromCalendar(fp)
+    if (yearInput) {
       yearInput.value = fp.currentYear?.toString()
+    }
   }
 
   const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
@@ -350,7 +473,94 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     : setMaxDate
   
   // End of Default Date + Min/Max Date Initialization Helper Functions section ----/
-  
+  const resolveDatePickerPortalWrapper = (input: HTMLElement): HTMLElement | null => {
+    return (
+      (input.closest(".date_picker_input_wrapper") as HTMLElement | null) ??
+      (input.closest(".text_input_wrapper") as HTMLElement | null) ??
+      (input.closest(".input_wrapper") as HTMLElement | null) ??
+      (input.closest(".pb_date_picker_kit") as HTMLElement | null)
+    )
+  }
+
+  const portalPositionFn: ((self: Instance) => void) | undefined = portalHost
+    ? (self: Instance) => {
+        mountCalendarInPortalShell(self)
+        const shell = ensurePortalShell()
+        const cal = self.calendarContainer
+        if (!cal || !shell) return
+        const wrap = resolveDatePickerPortalWrapper(self.input)
+        const host = shell.parentElement as HTMLElement | null
+        if (!wrap || !host) return
+        positionDropdownPortalToWrapper({
+          panel: cal,
+          wrapperViewportRect: wrap.getBoundingClientRect(),
+          positionHost: host,
+          matchWrapperWidth: selectionType === "quickpick",
+          zIndex: activePortalZIndex,
+        })
+      }
+    : undefined
+
+  const setupYearMonthDropdowns = (fp: Instance) => {
+    if (yearDropdownIsReady(fp) || !fp.yearElements?.[0]?.parentElement) return
+
+    fp.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="${yearSelectId}"></select>`
+
+    let years = ''
+    if (yearAscending) {
+      for (let year = setMinYear; year <= setMaxYear; year++) {
+        years += `<option value="${year}">${year}</option>`
+      }
+    } else {
+      for (let year = setMaxYear; year >= setMinYear; year--) {
+        years += `<option value="${year}">${year}</option>`
+      }
+    }
+
+    const dropdown = yearDropdownFromCalendar(fp)
+    if (!dropdown) return
+
+    dropdown.innerHTML = years
+    dropdown.value = String(fp.currentYear)
+
+    dropdown.addEventListener('input', (e: Event & { target: { value: string }}) => {
+      fp.changeYear(Number(e.target.value))
+    })
+
+    if (fp.input.form) {
+      fp.input.form.addEventListener('reset', () => {
+        setTimeout(() => {
+          dropdown.value = String(fp.currentYear)
+          if (fp.monthsDropdownContainer) {
+            fp.monthsDropdownContainer.value = String(fp.currentMonth)
+          }
+
+          if (defaultDate) {
+            fp.setDate(defaultDate)
+            yearChangeHook(fp)
+          }
+        }, 0)
+      })
+    }
+
+    if (!dropdown.nextElementSibling?.classList.contains('year-dropdown-icon')) {
+      dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDownString}</i>`)
+    }
+    if (
+      fp.monthElements[0]?.parentElement &&
+      !fp.calendarContainer?.querySelector('.month-dropdown-icon')
+    ) {
+      fp.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDownString}</i>`)
+    }
+  }
+
+  const assignCalendarId = (fp: Instance): void => {
+    const calEl = fp.calendarContainer ?? fp.innerContainer?.parentElement
+    if (calEl) {
+      calEl.id = `cal-${pickerId}`
+    }
+  }
+
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -365,8 +575,27 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     maxDate: effectiveMaxDate,
     minDate: effectiveMinDate,
     mode,
-    nextArrow: '<i class="far fa-angle-right"></i>',
+    nextArrow: `<div style="height: 14px;">${angleRightString}</div>`,
     onOpen: [(_selectedDates, _dateStr, fp) => {
+      activePortalZIndex = portalHost
+        ? resolvePortaledFloatingZIndex(
+            portalHost,
+            nextPortaledFloatingZIndex(),
+          )
+        : undefined
+      if (portalHost) {
+        mountCalendarInPortalShell(fp)
+      }
+      if (portalAppendShell) {
+        portalAppendShell.style.zIndex = activePortalZIndex
+        setFloatingOwnerAttribute(portalAppendShell, floatingOwnerId)
+      }
+      if (fp.calendarContainer) {
+        fp.calendarContainer.style.zIndex = activePortalZIndex
+        setFloatingOwnerAttribute(fp.calendarContainer, floatingOwnerId)
+      }
+      announceFloatingKitOpen('date-picker', floatingOwnerId)
+
       // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
       if (hasOutOfRangeDefault) {
         const dateObj = toDateObject(defaultDateValue)
@@ -397,15 +626,37 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
         positionCalendarIfNeeded(fp)
       }
       window.addEventListener('resize', resizeRepositionHandlerRef)
-      if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
+      if (!effectiveStatic && scrollContainer) attachToScroll(scrollContainer)
+      if (portalHost) {
+        unsubscribeFloatingReposition = subscribeFloatingKitReposition(() => {
+          positionCalendarIfNeeded(fp)
+        })
+      }
+      assignCalendarId(fp)
       positionCalendarIfNeeded(fp)
+      setupYearMonthDropdowns(fp)
+    }],
+    onDestroy: [() => {
+      if (unsubscribeFloatingReposition) {
+        unsubscribeFloatingReposition()
+        unsubscribeFloatingReposition = null
+      }
+      if (resizeRepositionHandlerRef) {
+        window.removeEventListener('resize', resizeRepositionHandlerRef)
+        resizeRepositionHandlerRef = null
+      }
+      removePortalShell()
     }],
     onClose: [(selectedDates, dateStr, fp) => {
+      if (unsubscribeFloatingReposition) {
+        unsubscribeFloatingReposition()
+        unsubscribeFloatingReposition = null
+      }
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
         resizeRepositionHandlerRef = null
       }
-      if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      if (!effectiveStatic && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
       
       // If defaultDate was out of range and no date was selected, preserve the default date
       if (hasOutOfRangeDefault && (!selectedDates || selectedDates.length === 0)) {
@@ -435,15 +686,17 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       yearChangeHook(fp)
     }],
     plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
-    position,
+    position: portalPositionFn ?? position,
     positionElement: getPositionElement(positionElement),
-    prevArrow: '<i class="far fa-angle-left"></i>',
-    static: staticPosition,
+    prevArrow: `<div style="height: 14px;">${angleLeftString}</div>`,
+    static: effectiveStatic,
   })
 
   // Assign dynamically sourced flatpickr instance to variable
-  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
-  picker.innerContainer.parentElement.id = `cal-${pickerId}`
+  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)?._flatpickr
+  if (!picker) return
+
+  assignCalendarId(picker)
 
   // If defaultDate was out of range, restore the original minDate/maxDate after initialization (defaultDate displayed, still cannot select dates outside the actual range via user provided minDate/maxDate constraints)
   if ((isBeforeMin || isAfterMax) && defaultDateValue) {
@@ -510,45 +763,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }, 10)
   }
 
-  // replace year selector with dropdown
-  picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
-
-  // create html option tags for desired years
-  let years = ''
-  for (let year = setMaxYear; year >= setMinYear; year--) {
-    years += `<option value="${year}">${year}</option>`
-  }
-
-  // variablize each dropdown selector
-  const dropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
-
-  // inject year options into dropdown and assign it the flatpickr's current year value
-  dropdown.innerHTML = years
-  dropdown.value = picker.currentYear
-
-  // whenever a new year is selected from dropdown update flatpickr's current year value
-  dropdown.addEventListener('input', (e: Event & { target: { value: string}}) => {
-    picker.changeYear(Number(e.target.value))
-  })
-
-  // Reverse month and year dropdown reset on form.reset()
-  if (picker.input.form) {
-    picker.input.form.addEventListener('reset', () => {
-      // Code block triggers after form.reset() is called and executed
-      setTimeout(() => {
-        dropdown.value = picker.currentYear
-        if (picker.monthsDropdownContainer) {
-          picker.monthsDropdownContainer.value = picker.currentMonth
-        }
-
-        /* Reset date picker to default value on form.reset() */
-        if (defaultDate){
-          picker.setDate(defaultDate)
-          yearChangeHook(picker)
-        }
-      }, 0)
-    })
-  }
+  setupYearMonthDropdowns(picker)
 
   // === Automatic Sync Logic for 3 input range pattern===
 
@@ -650,14 +865,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  // Adding dropdown icons to year and month select
-  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
-  if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
-  // if (picker.weekElements[0].parentElement){
-  //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
-  // }
-
   // Remove readonly attribute for validation and or text input
   if (allowInput){
     picker.input.removeAttribute('readonly')
@@ -669,8 +876,55 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     picker.input.style.cursor = 'pointer'
   }
 
+  const stopPointerForFlatpickrDocClose = (e: Event) => {
+    e.stopPropagation()
+  }
+
+  // Prevent flatpickr's document mousedown listener from treating the opening click as outside.
+  picker.input.addEventListener('mousedown', stopPointerForFlatpickrDocClose)
+  picker.input.addEventListener('touchstart', stopPointerForFlatpickrDocClose, { passive: true })
+
+  const calIconWrapper = document.querySelector(`#cal-icon-${pickerId}`) as HTMLElement | null
+  const isPointerInCalIcon = (e: MouseEvent) => {
+    if (!calIconWrapper) return false
+    const rect = calIconWrapper.getBoundingClientRect()
+    return (
+      e.clientX >= rect.left &&
+      e.clientX <= rect.right &&
+      e.clientY >= rect.top &&
+      e.clientY <= rect.bottom
+    )
+  }
+
+  const openDatePickerFromUi = (e: MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (picker.input.disabled) return
+    if (picker.isOpen) {
+      picker.close()
+      return
+    }
+    picker.open()
+    picker.input.focus()
+  }
+
+  const textInputWrapper = picker.input.closest('.text_input_wrapper') as HTMLElement | null
+  const inputWrapper = picker.input.closest('.input_wrapper') as HTMLElement | null
+  inputWrapper?.addEventListener('click', (e: MouseEvent) => {
+    if (e.target === picker.input) return
+    if (!isPointerInCalIcon(e) && !textInputWrapper?.contains(e.target as Node)) return
+    openDatePickerFromUi(e)
+  })
+
+  const pickerInput = picker.input as DatePickerInputEl
+  pickerInput._pbDatePickerOpenUnsub = subscribeFloatingKitOpen(({ kitKind }) => {
+    if (kitKind !== 'date-picker' && picker.isOpen) {
+      picker.close()
+    }
+  })
+
   // Fix event bubbling bug on wrapper
-  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
+  document.querySelector(`#${pickerId}`)?.parentElement?.addEventListener('click', (e) => e.stopPropagation())
 }
 
 export default datePickerHelper

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

@@ -0,0 +1 @@
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-date-asc", year_ascending: true}) %>

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

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerYearAsc = (props) => (
+  <div>
+    <DatePicker
+        pickerId="date-picker-date-asc"
+        yearAscending
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerYearAsc

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

@@ -0,0 +1 @@
+`yearAscending`/`year_ascending` is a boolean prop that if set to true, will render the years in the year dropdown in chronological order. This prop is set to false by default. 

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

@@ -16,6 +16,7 @@
     "showTimezone": false,
     "staticPosition": true,
     "thisRangesEndToday": false,
+    "yearAscending": false,
     "controlsStartId": "",
     "controlsEndId": "",
     "syncStartWith": "",

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

@@ -23,6 +23,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_year_asc: Year Ascending
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
@@ -58,6 +59,7 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_year_asc: Year Ascending
   - date_picker_margin_bottom: Margin Bottom
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only

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

@@ -30,3 +30,4 @@ export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
 export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
 export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";
+export { default as DatePickerYearAsc } from './_date_picker_year_asc.jsx'

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

@@ -131,7 +131,7 @@
       ]
     },
     "inputOnChange": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]
@@ -257,6 +257,14 @@
         "react"
       ]
     },
+    "yearAscending": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "yearRange": {
       "type": "array",
       "platforms": [

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

@@ -72,7 +72,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "Date"
     },
     "timezone": {
       "platforms": [

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

@@ -44,7 +44,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "Date"
     },
     "timezone": {
       "platforms": [

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -151,11 +151,33 @@
   border-radius: $border_radius_md;
   max-height: calc(100vh - #{$gutter * 2});
   max-width: calc(100vw - #{$gutter * 2});
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: visible;
   animation-name: modalFadeIn;
   animation-duration: $animation-duration;
   outline: none;
   animation-timing-function: $easeInOutQuint;
+
+  .pb_dialog_scroll_region {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pb_dialog_floating_root {
+    flex: 0 0 auto;
+    min-height: 0;
+    pointer-events: none;
+    position: relative;
+    z-index: 1;
+  }
+
+  .pb_dialog_floating_root > * {
+    pointer-events: auto;
+  }
 }
 
 // Left placement animations
@@ -584,4 +606,35 @@
     border: none;
     cursor: pointer;
   }
+
+  // Rails native dialog: scroll region + floating portal host for portaled form inputs
+  dialog.pb_dialog_rails:not([open]) {
+    display: none !important;
+  }
+
+  .pb_dialog_rails[open] {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .pb_dialog_scroll_region {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pb_dialog_floating_root {
+    flex: 0 0 auto;
+    min-height: 0;
+    pointer-events: none;
+    position: relative;
+    z-index: 1;
+  }
+
+  .pb_dialog_floating_root > * {
+    pointer-events: auto;
+  }
 }