playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_time_picker/docs/_playground.overrides.json

@@ -1,12 +1,13 @@
 {
+  "hiddenProps": ["inputOptions", "onChange", "onClose", "value"],
   "groups": [
     {
       "name": "Content",
-      "props": ["label", "name", "value", "defaultTime"]
+      "props": ["label", "name", "defaultTime"]
     },
     {
       "name": "Appearance",
-      "props": ["timeFormat", "showTimezone"]
+      "props": ["timeFormat", "showTimezone", "dark"]
     },
     {
       "name": "Validation",
@@ -19,10 +20,6 @@
         "error",
         "validationMessage"
       ]
-    },
-    {
-      "name": "Advanced",
-      "props": ["inputOptions", "onChange", "onClose"]
     }
   ],
   "presets": [
@@ -63,7 +60,7 @@
       }
     },
     {
-      "name": "Required field",
+      "name": "Required Field",
       "props": {
         "label": "Appointment",
         "name": "appointment_time",
@@ -71,26 +68,34 @@
         "requiredIndicator": true,
         "defaultTime": "10:00 AM"
       }
-    },
-    {
-      "name": "Disabled",
-      "props": {
-        "label": "Locked",
-        "name": "locked_time",
-        "disabled": true,
-        "defaultTime": "12:00 PM"
-      }
-    },
-    {
-      "name": "Error state",
-      "props": {
-        "label": "Invalid slot",
-        "name": "error_time",
-        "error": "Selected time is unavailable",
-        "defaultTime": "11:45 AM"
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default uses defaultTime so the picker initializes with a value while remaining internally editable.",
+      "type": "info"
+    },
+    "twenty_four_hour": {
+      "presetName": "24-hour",
+      "message": "24-hour switches timeFormat to the 24hour display and input pattern.",
+      "type": "info"
+    },
+    "with_timezone": {
+      "presetName": "With timezone",
+      "message": "With timezone shows the timezone label next to the selected time.",
+      "type": "info"
+    },
+    "business_hours": {
+      "presetName": "Business hours",
+      "message": "Business hours combines minTime and maxTime to constrain available selections.",
+      "type": "info"
+    },
+    "required_field": {
+      "presetName": "Required Field",
+      "message": "Required Field combines required and requiredIndicator for validation-ready forms.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_time_picker/index.ts

@@ -1,4 +1,16 @@
 import PbEnhancedElement from '../pb_enhanced_element'
+import {
+  announceFloatingKitOpen,
+  nextPortaledFloatingZIndex,
+  PB_FLOATING_OWNER_ATTR,
+  positionDropdownPortalToWrapper,
+  recordPortaledMenuPointerDown,
+  resolveFloatingOwnerId,
+  resolvePortaledFloatingZIndex,
+  resolvePortaledKitHost,
+  subscribeFloatingKitOpen,
+  subscribeFloatingKitReposition,
+} from '../utilities/floatingPortalHosts'
 import {
   parseTime,
   parseTimeToMinutes,
@@ -80,6 +92,20 @@ export default class PbTimePicker extends PbEnhancedElement {
   private formElement: HTMLFormElement | null = null
   private initialized = false
 
+  private portalHost: HTMLElement | null = null
+  private floatingOwnerId: string | null = null
+  private useMenuPortal = false
+  private portalShell: HTMLElement | null = null
+  private _portalParent: Node | null = null
+  private _portalNext: ChildNode | null = null
+  private _floatingResolved = false
+  private _unsubscribePortalReposition: (() => void) | null = null
+  private boundApplyPortalPosition: (() => void) | null = null
+  private timePickerWrapper: HTMLElement | null = null
+  private _popoverObserver: MutationObserver | null = null
+  private _unsubscribeKitOpen: (() => void) | null = null
+  private _activePortalZIndex: string | undefined
+
   private initializeState(): void {
     if (this.initialized) return
     this.initialized = true
@@ -131,6 +157,8 @@ export default class PbTimePicker extends PbEnhancedElement {
     this.amCard = element.querySelector('.pb_time_picker_meridiem_am') as HTMLElement | null
     this.pmCard = element.querySelector('.pb_time_picker_meridiem_pm') as HTMLElement | null
 
+    this.timePickerWrapper = element.querySelector('.time_picker_wrapper')
+
     this.handleInvalidBound = this.handleInvalid.bind(this)
     this.handleClickOutsideBound = this.handleClickOutside.bind(this)
     this.handleMeridiemKeyDownBound = this.handleMeridiemKeyDown.bind(this)
@@ -146,13 +174,24 @@ export default class PbTimePicker extends PbEnhancedElement {
     this.updateUI()
     this.bindEvents()
     this.bindFormValidation()
+    this.bindPopoverHideClose()
+    this._unsubscribeKitOpen = subscribeFloatingKitOpen(({ kitKind }) => {
+      if (kitKind !== 'time-picker' && this.showDropdown) {
+        this.closeDropdown(true)
+      }
+    })
     document.addEventListener('invalid', this.handleInvalidBound, true)
   }
 
   disconnect(): void {
+    this._unsubscribeKitOpen?.()
+    this._unsubscribeKitOpen = null
+    this._popoverObserver?.disconnect()
+    this._popoverObserver = null
+    this.unmountPortalMenu()
     this.formElement?.removeEventListener('submit', this.handleFormSubmitBound, true)
     document.removeEventListener('invalid', this.handleInvalidBound, true)
-    document.removeEventListener('mousedown', this.handleClickOutsideBound)
+    document.removeEventListener('mousedown', this.handleClickOutsideBound, true)
     this.amRadio?.removeEventListener('keydown', this.handleMeridiemKeyDownBound)
     this.pmRadio?.removeEventListener('keydown', this.handleMeridiemKeyDownBound)
     this.unbindMainInputEvents()
@@ -204,7 +243,11 @@ export default class PbTimePicker extends PbEnhancedElement {
       option.dataset.hour = h.toString()
       option.textContent = this.timeFormat === '24hour' ? h.toString().padStart(2, '0') : h.toString()
       option.addEventListener('mousedown', (e) => {
-        e.preventDefault()
+        e.stopPropagation()
+        this.recordPortaledMenuPointer(e)
+      })
+      option.addEventListener('click', (e) => {
+        e.stopPropagation()
         this.handleHourOptionClick(h)
       })
       this.hourDropdown.appendChild(option)
@@ -217,7 +260,11 @@ export default class PbTimePicker extends PbEnhancedElement {
       option.dataset.minute = m.toString()
       option.textContent = m.toString().padStart(2, '0')
       option.addEventListener('mousedown', (e) => {
-        e.preventDefault()
+        e.stopPropagation()
+        this.recordPortaledMenuPointer(e)
+      })
+      option.addEventListener('click', (e) => {
+        e.stopPropagation()
         this.handleMinuteOptionClick(m)
       })
       this.minuteDropdown.appendChild(option)
@@ -263,10 +310,32 @@ export default class PbTimePicker extends PbEnhancedElement {
     this.hourInput.classList.toggle('invalid', invalidSelection)
     this.minuteInput.classList.toggle('invalid', invalidSelection)
 
-    this.dropdownContainer.hidden = !this.showDropdown || this.disabled
+    const isPortaled = this.dropdownContainer.dataset.pbTimePickerPortaled === 'true'
+    if (!isPortaled) {
+      this.dropdownContainer.hidden = !this.showDropdown || this.disabled
+    } else if (!this.showDropdown || this.disabled) {
+      this.dropdownContainer.hidden = true
+    } else {
+      this.dropdownContainer.hidden = false
+    }
+
     this.hourDropdown.hidden = !this.showHourDropdown
     this.minuteDropdown.hidden = !this.showMinuteDropdown
 
+    if (isPortaled && this._activePortalZIndex) {
+      const portalZIndex = this._activePortalZIndex
+      if (this.showHourDropdown) {
+        this.hourDropdown.style.zIndex = portalZIndex
+      } else {
+        this.hourDropdown.style.removeProperty('z-index')
+      }
+      if (this.showMinuteDropdown) {
+        this.minuteDropdown.style.zIndex = portalZIndex
+      } else {
+        this.minuteDropdown.style.removeProperty('z-index')
+      }
+    }
+
     this.hourDropdown.querySelectorAll('.time_dropdown_option').forEach((el) => {
       const option = el as HTMLElement
       const h = parseInt(option.dataset.hour || '0', 10)
@@ -317,6 +386,13 @@ export default class PbTimePicker extends PbEnhancedElement {
       this.removeValidationErrorMessage()
     }
 
+    if (
+      this.showDropdown &&
+      this.useMenuPortal &&
+      this.dropdownContainer.dataset.pbTimePickerPortaled === 'true'
+    ) {
+      requestAnimationFrame(() => this.applyPortalPosition())
+    }
   }
 
   private scrollHourDropdownToSelected(): void {
@@ -469,19 +545,191 @@ export default class PbTimePicker extends PbEnhancedElement {
     this.element.querySelector(VALIDATION_ERROR_SELECTOR)?.remove()
   }
 
+  private recordPortaledMenuPointer(event: MouseEvent): void {
+    if (!this.useMenuPortal || !this.floatingOwnerId) return
+    recordPortaledMenuPointerDown(
+      this.floatingOwnerId,
+      event.clientX,
+      event.clientY,
+    )
+  }
+
+  private ensureFloatingPortalConfig(): void {
+    if (!this._floatingResolved) {
+      this.portalHost = resolvePortaledKitHost(this.element as HTMLElement, null)
+      this.useMenuPortal = Boolean(this.portalHost)
+      this._floatingResolved = true
+    }
+    this.floatingOwnerId = resolveFloatingOwnerId(this.element as HTMLElement)
+  }
+
+  private mountPortalMenu(): void {
+    if (!this.useMenuPortal || !this.portalHost) return
+    const container = this.dropdownContainer
+    if (container.dataset.pbTimePickerPortaled === 'true') return
+
+    this._portalParent = container.parentNode
+    this._portalNext = container.nextSibling
+
+    const shell = document.createElement('div')
+    const shellClasses = [
+      'pb_time_picker',
+      'pb_time_picker_floating_shell',
+      'pb_time_picker_panel_portal',
+      this.element.classList.contains('error') ? 'error' : '',
+      this.element.classList.contains('disabled') ? 'disabled' : '',
+      this.element.classList.contains('dark') ? 'dark' : '',
+    ].filter(Boolean)
+    shell.className = shellClasses.join(' ')
+    const ownerId = this.floatingOwnerId ?? resolveFloatingOwnerId(this.element as HTMLElement)
+    if (ownerId) {
+      shell.setAttribute(PB_FLOATING_OWNER_ATTR, ownerId)
+      container.setAttribute(PB_FLOATING_OWNER_ATTR, ownerId)
+      this.hourDropdown?.setAttribute(PB_FLOATING_OWNER_ATTR, ownerId)
+      this.minuteDropdown?.setAttribute(PB_FLOATING_OWNER_ATTR, ownerId)
+    }
+
+    shell.appendChild(container)
+    this.portalHost.appendChild(shell)
+    this.portalShell = shell
+    container.dataset.pbTimePickerPortaled = 'true'
+  }
+
+  private clearPortalPanelStyles(panel: HTMLElement): void {
+    panel.style.removeProperty('position')
+    panel.style.removeProperty('left')
+    panel.style.removeProperty('top')
+    panel.style.removeProperty('width')
+    panel.style.removeProperty('margin')
+    panel.style.removeProperty('pointer-events')
+    panel.style.removeProperty('z-index')
+
+    const selection = panel.querySelector('.pb_time_selection') as HTMLElement | null
+    if (selection) {
+      selection.style.removeProperty('max-height')
+      selection.style.removeProperty('overflow')
+    }
+  }
+
+  private closeHourMinuteDropdowns(): void {
+    this.showHourDropdown = false
+    this.showMinuteDropdown = false
+    if (this.hourDropdown) this.hourDropdown.hidden = true
+    if (this.minuteDropdown) this.minuteDropdown.hidden = true
+  }
+
+  private unmountPortalMenu(): void {
+    if (this._unsubscribePortalReposition) {
+      this._unsubscribePortalReposition()
+      this._unsubscribePortalReposition = null
+    }
+    if (this.boundApplyPortalPosition) {
+      window.removeEventListener('resize', this.boundApplyPortalPosition)
+      this.boundApplyPortalPosition = null
+    }
+
+    const container = this.dropdownContainer
+    if (!container || container.dataset.pbTimePickerPortaled !== 'true') {
+      return
+    }
+
+    this.closeHourMinuteDropdowns()
+
+    delete container.dataset.pbTimePickerPortaled
+    container.removeAttribute(PB_FLOATING_OWNER_ATTR)
+    this.hourDropdown?.removeAttribute(PB_FLOATING_OWNER_ATTR)
+    this.minuteDropdown?.removeAttribute(PB_FLOATING_OWNER_ATTR)
+    this.clearPortalPanelStyles(container)
+
+    if (container.parentNode === this.portalShell && this._portalParent) {
+      if (this._portalNext && this._portalNext.parentNode === this._portalParent) {
+        this._portalParent.insertBefore(container, this._portalNext)
+      } else {
+        this._portalParent.appendChild(container)
+      }
+    }
+    this._portalParent = null
+    this._portalNext = null
+
+    if (this.portalShell) {
+      this.portalShell.remove()
+    }
+    this.portalShell = null
+  }
+
+  private bindPopoverHideClose(): void {
+    const tooltip = this.element.closest('.pb_popover_tooltip') as HTMLElement | null
+    if (!tooltip) return
+
+    this._popoverObserver = new MutationObserver(() => {
+      if (!tooltip.classList.contains('show') && (this.showDropdown || this.portalShell)) {
+        this.showDropdown = false
+        document.removeEventListener('mousedown', this.handleClickOutsideBound, true)
+        this.unmountPortalMenu()
+        this.updateUI()
+      }
+    })
+    this._popoverObserver.observe(tooltip, { attributes: true, attributeFilter: ['class'] })
+  }
+
+  private applyPortalPosition(): void {
+    if (
+      !this.useMenuPortal ||
+      !this.portalHost ||
+      !this.portalShell ||
+      !this.timePickerWrapper
+    ) {
+      return
+    }
+
+    positionDropdownPortalToWrapper({
+      panel: this.portalShell,
+      wrapperViewportRect: this.timePickerWrapper.getBoundingClientRect(),
+      positionHost: this.portalHost,
+      preferBelow: true,
+      matchWrapperWidth: false,
+      zIndex: this._activePortalZIndex,
+    })
+  }
+
   private openDropdown(): void {
+    this.ensureFloatingPortalConfig()
+    this._activePortalZIndex = this.portalHost
+      ? resolvePortaledFloatingZIndex(
+          this.portalHost,
+          nextPortaledFloatingZIndex(),
+        )
+      : undefined
+    announceFloatingKitOpen('time-picker', this.floatingOwnerId)
+    if (this.useMenuPortal) {
+      this.mountPortalMenu()
+    }
+
     this.showDropdown = true
-    document.addEventListener('mousedown', this.handleClickOutsideBound)
+    document.addEventListener('mousedown', this.handleClickOutsideBound, true)
     this.updateUI()
+
+    if (this.useMenuPortal) {
+      this.applyPortalPosition()
+      this.boundApplyPortalPosition = this.applyPortalPosition.bind(this)
+      window.addEventListener('resize', this.boundApplyPortalPosition)
+      if (this._unsubscribePortalReposition) {
+        this._unsubscribePortalReposition()
+      }
+      this._unsubscribePortalReposition = subscribeFloatingKitReposition(
+        this.boundApplyPortalPosition,
+      )
+      window.requestAnimationFrame(() => this.applyPortalPosition())
+    }
   }
 
   private closeDropdown(skipValidation = false): void {
-    this.showHourDropdown = false
-    this.showMinuteDropdown = false
-    document.removeEventListener('mousedown', this.handleClickOutsideBound)
+    this.closeHourMinuteDropdowns()
+    document.removeEventListener('mousedown', this.handleClickOutsideBound, true)
 
     if (!this.hasSelectedTime) {
       this.showDropdown = false
+      this.unmountPortalMenu()
       this.updateUI()
       return
     }
@@ -520,6 +768,9 @@ export default class PbTimePicker extends PbEnhancedElement {
       this.showDropdown = false
     }
 
+    if (!this.showDropdown) {
+      this.unmountPortalMenu()
+    }
     this.updateUI()
   }
 
@@ -546,9 +797,10 @@ export default class PbTimePicker extends PbEnhancedElement {
   }
 
   private handleClickOutside(event: MouseEvent): void {
-    if (!this.element.contains(event.target as Node)) {
-      this.closeDropdown()
-    }
+    const target = event.target as Node
+    if (this.element.contains(target)) return
+    if (this.portalShell?.contains(target)) return
+    this.closeDropdown()
   }
 
   private handleInputKeyDown = (e: KeyboardEvent): void => {

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

@@ -9,24 +9,78 @@
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "alignment",
-        "size",
-        "dark",
-        "icon",
-        "timezone",
         "startTime",
-        "endTime"
+        "endTime",
+        "timezone"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "icon",
+        "size",
+        "alignment",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z"
+      }
+    },
+    {
+      "name": "Compact",
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z",
+        "size": "xs"
+      }
+    },
+    {
+      "name": "With Icon",
+      "props": {
+        "startTime": "2026-04-09T09:00:00.000Z",
+        "endTime": "2026-04-09T10:30:00.000Z",
+        "icon": true
+      }
+    },
+    {
+      "name": "Vertical Timezone",
+      "props": {
+        "startTime": "2026-04-09T20:00:00.000Z",
+        "endTime": "2026-04-09T21:30:00.000Z",
+        "alignment": "vertical",
+        "timezone": true
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a start and end Date as an inline time range.",
+      "type": "info"
+    },
+    "compact": {
+      "presetName": "Compact",
+      "message": "Compact switches size to xs for denser layouts.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon before the range.",
+      "type": "info"
+    },
+    "vertical_timezone": {
+      "presetName": "Vertical Timezone",
+      "message": "Vertical Timezone stacks the range and includes the timezone label.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_time_range_inline/docs/_playground.overrides.json

@@ -0,0 +1,69 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["startTime", "endTime", "timezone"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["icon", "size", "alignment", "dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z"
+      }
+    },
+    {
+      "name": "Compact",
+      "props": {
+        "startTime": "2026-04-09T15:30:00.000Z",
+        "endTime": "2026-04-09T17:00:00.000Z",
+        "size": "xs"
+      }
+    },
+    {
+      "name": "With Icon",
+      "props": {
+        "startTime": "2026-04-09T09:00:00.000Z",
+        "endTime": "2026-04-09T10:30:00.000Z",
+        "icon": true
+      }
+    },
+    {
+      "name": "Vertical Timezone",
+      "props": {
+        "startTime": "2026-04-09T20:00:00.000Z",
+        "endTime": "2026-04-09T21:30:00.000Z",
+        "alignment": "vertical",
+        "timezone": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders a start and end Date as an inline time range.",
+      "type": "info"
+    },
+    "compact": {
+      "presetName": "Compact",
+      "message": "Compact switches size to xs for denser layouts.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds the clock icon before the range.",
+      "type": "info"
+    },
+    "vertical_timezone": {
+      "presetName": "Vertical Timezone",
+      "message": "Vertical Timezone stacks the range and includes the timezone label.",
+      "type": "info"
+    }
+  }
+}

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

@@ -9,14 +9,14 @@
       "name": "Content",
       "props": [
         "time",
-        "date",
         "timeZone"
       ]
     },
     {
       "name": "Appearance",
       "props": [
-        "align"
+        "align",
+        "dark"
       ]
     }
   ],
@@ -35,20 +35,41 @@
       }
     },
     {
-      "name": "London",
+      "name": "Right aligned",
       "props": {
-        "time": 1775748600000,
-        "timeZone": "Europe/London"
+        "time": 1775764800000,
+        "align": "right"
       }
     },
     {
-      "name": "Evening slot",
+      "name": "London Time",
       "props": {
-        "time": 1775764800000,
-        "align": "right"
+        "time": 1775748600000,
+        "timeZone": "Europe/London"
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders the time and timezone in a stacked layout.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Centered changes align to center while keeping the same timestamp.",
+      "type": "info"
+    },
+    "right_aligned": {
+      "presetName": "Right aligned",
+      "message": "Right aligned uses align=\"right\" for end-aligned stacked time displays.",
+      "type": "info"
+    },
+    "london_time": {
+      "presetName": "London Time",
+      "message": "London Time uses timeZone to render the timestamp in a specific timezone.",
+      "type": "info"
+    }
+  }
 }