playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_time_picker/_time_picker.tsx

@@ -1,4 +1,12 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react'
+import React, {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useMemo,
+  useContext,
+} from 'react'
+import { createPortal } from 'react-dom'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
@@ -6,6 +14,18 @@ import Caption from '../pb_caption/_caption'
 import SelectableCard from '../pb_selectable_card/_selectable_card'
 import TextInput from '../pb_text_input/_text_input'
 import colors from '../tokens/exports/_colors.module.scss'
+import { DialogContext } from '../pb_dialog/_dialog_context'
+import {
+  announceFloatingKitOpen,
+  nextPortaledFloatingZIndex,
+  positionDropdownPortalToWrapper,
+  resolveFloatingOwnerId,
+  resolvePortaledFloatingZIndex,
+  resolvePortaledKitHost,
+  setFloatingOwnerAttribute,
+  subscribeFloatingKitOpen,
+  subscribeFloatingKitReposition,
+} from '../utilities/floatingPortalHosts'
 
 import {
   parseTime,
@@ -91,6 +111,10 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
 
   const fieldName = name || `${uniqueId}-time`
 
+  const dialogCtx = useContext(DialogContext)
+  const timePickerPanelPortalRef = useRef<HTMLDivElement | null>(null)
+  const triggerWrapperRef = useRef<HTMLDivElement | null>(null)
+
   useEffect(() => {
     const handleInvalid = (event: Event) => {
       const target = event.target as HTMLInputElement
@@ -181,6 +205,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
   const amInputRef = useRef<HTMLInputElement | null>(null)
   const pmInputRef = useRef<HTMLInputElement | null>(null)
   const timePickerWrapperRef = useRef<HTMLDivElement>(null)
+  const activePortalZIndexRef = useRef<string | undefined>()
   const hourDropdownRef = useRef<HTMLDivElement>(null)
   const minuteDropdownRef = useRef<HTMLDivElement>(null)
   const [showDropdown, setShowDropdown] = useState(false)
@@ -657,16 +682,44 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
   }, [showDropdown, timeFormat, uniqueId, meridiem])
   
   useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (timePickerWrapperRef.current && !timePickerWrapperRef.current.contains(event.target as Node)) {
-        closeDropdown()
+    return subscribeFloatingKitOpen(({ kitKind }) => {
+      if (kitKind !== 'time-picker') {
+        setShowHourDropdown(false)
+        setShowMinuteDropdown(false)
+        setShowDropdown(false)
       }
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!showDropdown || disabled) return
+    const host = resolvePortaledKitHost(
+      timePickerWrapperRef.current,
+      dialogCtx?.selectMenuPortalTarget ?? null,
+    )
+    if (!host) return
+    activePortalZIndexRef.current = resolvePortaledFloatingZIndex(
+      host,
+      nextPortaledFloatingZIndex(),
+    )
+    announceFloatingKitOpen(
+      'time-picker',
+      resolveFloatingOwnerId(timePickerWrapperRef.current),
+    )
+  }, [showDropdown, disabled, dialogCtx?.selectMenuPortalTarget])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (timePickerWrapperRef.current?.contains(target)) return
+      if (timePickerPanelPortalRef.current?.contains(target)) return
+      closeDropdown()
     }
 
     if (showDropdown) {
-      document.addEventListener('mousedown', handleClickOutside)
+      document.addEventListener('mousedown', handleClickOutside, true)
       return () => {
-        document.removeEventListener('mousedown', handleClickOutside)
+        document.removeEventListener('mousedown', handleClickOutside, true)
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -692,12 +745,238 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
   // Get hour constraints for the input
   const { maxHour, minHour } = getHourConstraints(timeFormat)
 
+  const timePickerContainerClass = classnames(
+    'pb_time_picker_container',
+    timeFormat === '24hour' && 'pb_time_picker_container_24hour',
+  )
+
+  const portaledPanelRootClass = classnames(
+    buildCss('pb_time_picker'),
+    'pb_time_picker_panel_portal',
+    errorDisplay ? 'error' : null,
+    disabled ? 'disabled' : null,
+    dark ? 'dark' : null,
+  )
+
+  const timeSelectionInner = (
+    <div className="pb_time_selection">
+      <div className="time_input_wrapper">
+        <label htmlFor={`${uniqueId}-hour`}>
+          <Caption
+              className="time_input_label"
+              color="lighter"
+              dark={dark}
+              size="sm"
+              text="Hour"
+          />
+        </label>
+        <input
+            className={`time_input time-hour ${hasSelectedTime && !isCurrentTimeValid(hour, minute, meridiem) ? 'invalid' : ''}`}
+            id={`${uniqueId}-hour`}
+            inputMode="numeric"
+            max={maxHour}
+            maxLength={2}
+            min={minHour}
+            name={`${uniqueId}-hour`}
+            onBlur={handleHourBlur}
+            onChange={handleHourChange}
+            onClick={() => { setShowHourDropdown(!showHourDropdown); setShowMinuteDropdown(false) }}
+            onFocus={handleHourFocus}
+            onKeyDown={handleHourKeyDown}
+            pattern="[0-9]*"
+            ref={hourInputRef}
+            step={1}
+            tabIndex={0}
+            type="number"
+            value={hourInputValue}
+        />
+        {showHourDropdown && (
+          <div
+              className="time_dropdown"
+              ref={hourDropdownRef}
+          >
+            {generateHourOptions(timeFormat).map((h) => (
+              <div
+                  className={`time_dropdown_option ${hour === h ? 'selected' : ''}`}
+                  key={h}
+                  onClick={() => handleHourOptionClick(h)}
+              >
+                {timeFormat === '24hour' ? h.toString().padStart(2, '0') : h}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <span className="time-separator">{':'}</span>
+      <div className="time_input_wrapper">
+        <label htmlFor={`${uniqueId}-minute`}>
+          <Caption
+              className="time_input_label"
+              color="lighter"
+              dark={dark}
+              size="sm"
+              text="Minute"
+          />
+        </label>
+        <input
+            className={`time_input time-minute ${hasSelectedTime && !isCurrentTimeValid(hour, minute, meridiem) ? 'invalid' : ''}`}
+            id={`${uniqueId}-minute`}
+            inputMode="numeric"
+            max={59}
+            maxLength={2}
+            min={0}
+            name={`${uniqueId}-minute`}
+            onBlur={handleMinuteBlur}
+            onChange={handleMinuteChange}
+            onClick={() => { setShowMinuteDropdown(!showMinuteDropdown); setShowHourDropdown(false) }}
+            onFocus={handleMinuteFocus}
+            onKeyDown={handleMinuteKeyDown}
+            pattern="[0-9]*"
+            ref={minuteInputRef}
+            step={1}
+            tabIndex={0}
+            type="number"
+            value={minuteInputValue}
+        />
+        {showMinuteDropdown && (
+          <div
+              className="time_dropdown"
+              ref={minuteDropdownRef}
+          >
+            {generateMinuteOptions().map((m) => (
+              <div
+                  className={`time_dropdown_option ${minute === m ? 'selected' : ''}`}
+                  key={m}
+                  onClick={() => handleMinuteOptionClick(m)}
+              >
+                {m.toString().padStart(2, '0')}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {timeFormat === 'AMPM' && (
+        <div className="meridiem">
+          <Caption
+              className="time_input_label"
+              color="lighter"
+              dark={dark}
+              size="sm"
+              text="Period"
+          />
+          <div className="pb_form_group_kit">
+            <SelectableCard
+                checked={meridiem === 'AM'}
+                className={!isAnyAMTimeValid() ? 'disabled_meridiem' : ''}
+                dark={dark}
+                disabled={!isAnyAMTimeValid()}
+                inputId={`${uniqueId}-am`}
+                multi={false}
+                name={`${uniqueId}-meridiem`}
+                onChange={() => handleMeridiemChange('AM')}
+                text="AM"
+                value="AM"
+            />
+            <SelectableCard
+                checked={meridiem === 'PM'}
+                className={!isAnyPMTimeValid() ? 'disabled_meridiem' : ''}
+                dark={dark}
+                disabled={!isAnyPMTimeValid()}
+                inputId={`${uniqueId}-pm`}
+                multi={false}
+                name={`${uniqueId}-meridiem`}
+                onChange={() => handleMeridiemChange('PM')}
+                text="PM"
+                value="PM"
+            />
+          </div>
+        </div>
+      )}
+      {hasSelectedTime && !isCurrentTimeValid(hour, minute, meridiem) && (
+        <div className="time_range_error">
+          <Caption
+              className="time_range_error_text"
+              dark={dark}
+              marginTop="sm"
+              size="xs"
+              text={getTimeRangeErrorMessage(minTime, maxTime, timeFormat)}
+          />
+        </div>
+      )}
+      {showTimezone && (
+        <Caption
+            color="lighter"
+            dark={dark}
+            lineHeight="tight"
+            marginTop="sm"
+            size="xs"
+            text={getTimezoneText()}
+        />
+      )}
+    </div>
+  )
+
+  const portaledMenuHost =
+    typeof document !== "undefined"
+      ? resolvePortaledKitHost(
+          timePickerWrapperRef.current,
+          dialogCtx?.selectMenuPortalTarget ?? null,
+        )
+      : null
+
+  useLayoutEffect(() => {
+    if (!showDropdown || disabled) return
+
+    const resolvedHost = resolvePortaledKitHost(
+      timePickerWrapperRef.current,
+      dialogCtx?.selectMenuPortalTarget ?? null,
+    )
+    if (!resolvedHost) return
+
+    const applyPortalPosition = () => {
+      const panel = timePickerPanelPortalRef.current
+      const wrap = triggerWrapperRef.current
+      if (!panel || !wrap) return
+
+      positionDropdownPortalToWrapper({
+        panel,
+        wrapperViewportRect: wrap.getBoundingClientRect(),
+        positionHost: resolvedHost,
+        preferBelow: true,
+        zIndex: activePortalZIndexRef.current,
+      })
+      if (panel && activePortalZIndexRef.current) {
+        panel.style.zIndex = activePortalZIndexRef.current
+      }
+    }
+
+    setFloatingOwnerAttribute(
+      timePickerPanelPortalRef.current,
+      resolveFloatingOwnerId(timePickerWrapperRef.current),
+    )
+
+    applyPortalPosition()
+    const raf = window.requestAnimationFrame(applyPortalPosition)
+    const unsubscribeReposition = subscribeFloatingKitReposition(applyPortalPosition)
+    return () => {
+      window.cancelAnimationFrame(raf)
+      unsubscribeReposition()
+    }
+  }, [
+    showDropdown,
+    disabled,
+    dialogCtx?.selectMenuPortalTarget,
+    uniqueId,
+  ])
+
   return (
+    <>
     <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
+        data-pb-time-picker-id={uniqueId}
         id={uniqueId}
         ref={timePickerWrapperRef}
         style={{ position: 'relative' }}
@@ -726,7 +1005,10 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
           )}
         </label>
       )}
-      <div className="time_picker_wrapper">
+      <div
+          className="time_picker_wrapper"
+          ref={triggerWrapperRef}
+      >
         <TextInput
             addOn={{ icon: 'clock', alignment: 'right', border: true }}
             cursor="pointer"
@@ -760,169 +1042,29 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
               {...inputHtmlProps}
           />
         </TextInput>
-        
-        {showDropdown && !disabled && (
-          <div className={`pb_time_picker_container ${timeFormat === '24hour' ? 'pb_time_picker_container_24hour' : ''}`}>
-            <div className="pb_time_selection">
-              <div className="time_input_wrapper">
-                <label htmlFor={`${uniqueId}-hour`}>
-                  <Caption
-                      className="time_input_label"
-                      color="lighter"
-                      dark={dark}
-                      size="sm"
-                      text="Hour"
-                  />
-                </label>
-                <input
-                    className={`time_input time-hour ${hasSelectedTime && !isCurrentTimeValid(hour, minute, meridiem) ? 'invalid' : ''}`}
-                    id={`${uniqueId}-hour`}
-                    inputMode="numeric"
-                    max={maxHour}
-                    maxLength={2}
-                    min={minHour}
-                    name={`${uniqueId}-hour`}
-                    onBlur={handleHourBlur}
-                    onChange={handleHourChange}
-                    onClick={() => { setShowHourDropdown(!showHourDropdown); setShowMinuteDropdown(false) }}
-                    onFocus={handleHourFocus}
-                    onKeyDown={handleHourKeyDown}
-                    pattern="[0-9]*"
-                    ref={hourInputRef}
-                    step={1}
-                    tabIndex={0}
-                    type="number"
-                    value={hourInputValue}
-                />
-                {showHourDropdown && (
-                  <div 
-                      className="time_dropdown"
-                      ref={hourDropdownRef}
-                  >
-                    {generateHourOptions(timeFormat).map((h) => (
-                      <div
-                          className={`time_dropdown_option ${hour === h ? 'selected' : ''}`}
-                          key={h}
-                          onClick={() => handleHourOptionClick(h)}
-                      >
-                        {timeFormat === '24hour' ? h.toString().padStart(2, '0') : h}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              <span className="time-separator">{':'}</span>
-              <div className="time_input_wrapper">
-                <label htmlFor={`${uniqueId}-minute`}>
-                  <Caption
-                      className="time_input_label"
-                      color="lighter"
-                      dark={dark}
-                      size="sm"
-                      text="Minute"
-                  />
-                </label>
-                <input
-                    className={`time_input time-minute ${hasSelectedTime && !isCurrentTimeValid(hour, minute, meridiem) ? 'invalid' : ''}`}
-                    id={`${uniqueId}-minute`}
-                    inputMode="numeric"
-                    max={59}
-                    maxLength={2}
-                    min={0}
-                    name={`${uniqueId}-minute`}
-                    onBlur={handleMinuteBlur}
-                    onChange={handleMinuteChange}
-                    onClick={() => { setShowMinuteDropdown(!showMinuteDropdown); setShowHourDropdown(false) }}
-                    onFocus={handleMinuteFocus}
-                    onKeyDown={handleMinuteKeyDown}
-                    pattern="[0-9]*"
-                    ref={minuteInputRef}
-                    step={1}
-                    tabIndex={0}
-                    type="number"
-                    value={minuteInputValue}
-                />
-                {showMinuteDropdown && (
-                  <div 
-                      className="time_dropdown"
-                      ref={minuteDropdownRef}
-                  >
-                    {generateMinuteOptions().map((m) => (
-                      <div
-                          className={`time_dropdown_option ${minute === m ? 'selected' : ''}`}
-                          key={m}
-                          onClick={() => handleMinuteOptionClick(m)}
-                      >
-                        {m.toString().padStart(2, '0')}
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-              {timeFormat === 'AMPM' && (
-                <div className="meridiem">
-                  <Caption
-                      className="time_input_label"
-                      color="lighter"
-                      dark={dark}
-                      size="sm"
-                      text="Period"
-                  />
-                  <div className="pb_form_group_kit">
-                    <SelectableCard
-                        checked={meridiem === 'AM'}
-                        className={!isAnyAMTimeValid() ? 'disabled_meridiem' : ''}
-                        dark={dark}
-                        disabled={!isAnyAMTimeValid()}
-                        inputId={`${uniqueId}-am`}
-                        multi={false}
-                        name={`${uniqueId}-meridiem`}
-                        onChange={() => handleMeridiemChange('AM')}
-                        text="AM"
-                        value="AM"
-                    />
-                    <SelectableCard
-                        checked={meridiem === 'PM'}
-                        className={!isAnyPMTimeValid() ? 'disabled_meridiem' : ''}
-                        dark={dark}
-                        disabled={!isAnyPMTimeValid()}
-                        inputId={`${uniqueId}-pm`}
-                        multi={false}
-                        name={`${uniqueId}-meridiem`}
-                        onChange={() => handleMeridiemChange('PM')}
-                        text="PM"
-                        value="PM"
-                    />
-                  </div>
-                </div>
-              )}
-              {/* Show validation error in dropdownwhen time is out of range */}
-              {hasSelectedTime && !isCurrentTimeValid(hour, minute, meridiem) && (
-                <div className="time_range_error">
-                  <Caption
-                      className="time_range_error_text"
-                      dark={dark}
-                      marginTop="sm"
-                      size="xs"
-                      text={getTimeRangeErrorMessage(minTime, maxTime, timeFormat)}
-                  />
-                </div>
-              )}
-              {showTimezone && (
-                <Caption
-                    color="lighter"
-                    dark={dark}
-                    lineHeight="tight"
-                    marginTop="sm"
-                    size="xs"
-                    text={getTimezoneText()}
-                />
-              )}
-            </div>
-          </div>
+
+        {showDropdown && !disabled && !portaledMenuHost && (
+          <div className={timePickerContainerClass}>{timeSelectionInner}</div>
         )}
       </div>
     </div>
+
+    {showDropdown && portaledMenuHost && !disabled
+      ? createPortal(
+          <div
+              className={portaledPanelRootClass}
+              data-pb-time-picker-id={uniqueId}
+              onMouseDown={(e) => {
+                e.stopPropagation()
+              }}
+              ref={timePickerPanelPortalRef}
+          >
+            <div className={timePickerContainerClass}>{timeSelectionInner}</div>
+          </div>,
+          portaledMenuHost,
+        )
+      : null}
+    </>
   )
 }
 

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

@@ -16,7 +16,6 @@
       "props": [
         "label",
         "name",
-        "value",
         "defaultTime"
       ]
     },
@@ -24,7 +23,8 @@
       "name": "Appearance",
       "props": [
         "timeFormat",
-        "showTimezone"
+        "showTimezone",
+        "dark"
       ]
     },
     {
@@ -38,14 +38,6 @@
         "error",
         "validationMessage"
       ]
-    },
-    {
-      "name": "Advanced",
-      "props": [
-        "inputOptions",
-        "onChange",
-        "onClose"
-      ]
     }
   ],
   "presets": [
@@ -86,7 +78,7 @@
       }
     },
     {
-      "name": "Required field",
+      "name": "Required Field",
       "props": {
         "label": "Appointment",
         "name": "appointment_time",
@@ -94,26 +86,40 @@
         "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"
+    }
+  },
+  "hiddenProps": [
+    "inputOptions",
+    "onChange",
+    "onClose",
+    "value"
+  ]
 }