@toptal/picasso-timepicker 100.0.3 → 100.1.0

package/src/TimePickerList/TimePickerList.tsx

@@ -0,0 +1,190 @@
+import React, { useMemo, useRef, useState } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { Menu, MenuItem } from '@toptal/picasso-menu'
+import { useIsomorphicLayoutEffect } from '@toptal/picasso-utils'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+import {
+  getCurrentTime,
+  getNearestOptionIndex,
+  getTimeOptions,
+  parseTime,
+} from '../TimePicker/utils'
+import type { HourCycle, TimeOption } from '../TimePicker/utils'
+
+export interface Props extends BaseProps {
+  /** Selected time in 24-hour `HH:mm` format */
+  value?: string
+  /** Interval in minutes between the offered times */
+  minuteStep: number
+  /** Whether the times are labelled on a 12-hour clock with AM/PM or a 24-hour clock */
+  hourCycle: HourCycle
+  /** Moves focus to the selected or nearest time when the list appears */
+  autoFocus?: boolean
+  /** Called with the picked time in 24-hour `HH:mm` format */
+  onChange: (value: string) => void
+  /** Called when the keyboard asks to close the list */
+  onClose: () => void
+}
+
+const OPTION = '[role="option"]'
+
+const preventFocusLoss = (event: React.MouseEvent) => {
+  // Clicking a time must keep the caret in the field, like the browser picker does
+  event.preventDefault()
+}
+
+const getStartingIndex = (
+  options: TimeOption[],
+  minuteStep: number,
+  value?: string
+) => {
+  const selectedIndex = options.findIndex(option => option.value === value)
+
+  return selectedIndex >= 0
+    ? selectedIndex
+    : getNearestOptionIndex(parseTime(value) ?? getCurrentTime(), minuteStep)
+}
+
+const scrollToOption = (list: HTMLElement, option: HTMLElement) => {
+  const listRect = list.getBoundingClientRect()
+  const optionRect = option.getBoundingClientRect()
+
+  list.scrollTop +=
+    optionRect.top - listRect.top - (listRect.height - optionRect.height) / 2
+}
+
+const getNextIndex = (key: string, index: number, count: number) => {
+  switch (key) {
+    case 'ArrowDown':
+      return Math.min(index + 1, count - 1)
+    case 'ArrowUp':
+      return Math.max(index - 1, 0)
+    case 'Home':
+      return 0
+    case 'End':
+      return count - 1
+    default:
+      return undefined
+  }
+}
+
+export const TimePickerList = ({
+  value,
+  minuteStep,
+  hourCycle,
+  autoFocus = false,
+  onChange,
+  onClose,
+  className,
+  style,
+  'data-testid': dataTestId,
+}: Props): React.ReactElement => {
+  const listRef = useRef<HTMLUListElement>(null)
+  const options = useMemo(
+    () => getTimeOptions(minuteStep, hourCycle),
+    [minuteStep, hourCycle]
+  )
+  const [initialIndex] = useState(() =>
+    getStartingIndex(options, minuteStep, value)
+  )
+
+  const getOptionElements = () =>
+    Array.from(listRef.current?.querySelectorAll<HTMLElement>(OPTION) ?? [])
+
+  useIsomorphicLayoutEffect(() => {
+    const list = listRef.current
+    const option = getOptionElements()[initialIndex]
+
+    if (list && option) {
+      scrollToOption(list, option)
+    }
+  }, [initialIndex])
+
+  useIsomorphicLayoutEffect(() => {
+    if (!autoFocus) {
+      return
+    }
+
+    // The value may have been typed since the list opened, so the time to
+    // focus is looked up at the moment focus is requested
+    const list = listRef.current
+    const option =
+      getOptionElements()[getStartingIndex(options, minuteStep, value)]
+
+    if (list && option) {
+      scrollToOption(list, option)
+      option.focus({ preventScroll: true })
+    }
+  }, [autoFocus])
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {
+    const optionElements = getOptionElements()
+    const index = optionElements.indexOf(
+      (event.target as HTMLElement).closest<HTMLElement>(OPTION) as HTMLElement
+    )
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        event.stopPropagation()
+
+        if (index >= 0) {
+          onChange(options[index].value)
+        }
+        break
+      case 'Escape':
+        // Keeps a surrounding Modal or Drawer open while the list closes
+        event.stopPropagation()
+        onClose()
+        break
+      case 'Tab':
+        onClose()
+        break
+      default: {
+        const nextIndex = getNextIndex(event.key, index, options.length)
+
+        if (nextIndex !== undefined) {
+          event.preventDefault()
+          optionElements[nextIndex]?.focus()
+        }
+      }
+    }
+  }
+
+  return (
+    <Menu
+      ref={listRef}
+      role='listbox'
+      aria-label='Choose time'
+      allowNestedNavigation={false}
+      onKeyDown={handleKeyDown}
+      onMouseDown={preventFocusLoss}
+      className={twMerge(
+        'bg-white shadow-5 max-h-[15rem] overflow-y-auto',
+        className
+      )}
+      style={style}
+      data-testid={dataTestId}
+    >
+      {options.map(option => (
+        <MenuItem
+          key={option.value}
+          role='option'
+          aria-selected={option.value === value}
+          checkmarked={option.value === value}
+          titleCase={false}
+          className='tabular-nums'
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </MenuItem>
+      ))}
+    </Menu>
+  )
+}
+
+TimePickerList.displayName = 'TimePickerList'
+
+export default TimePickerList

package/src/TimePickerList/index.ts

@@ -0,0 +1,4 @@
+import type { Props } from './TimePickerList'
+
+export { default as TimePickerList } from './TimePickerList'
+export type TimePickerListProps = Props

package/src/TimePickerTrigger/TimePickerTrigger.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { InputAdornment } from '@toptal/picasso-input-adornment'
+import { Time16 } from '@toptal/picasso-icons'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+export interface Props extends BaseProps {
+  /** Whether the time list is shown */
+  open: boolean
+  /** Whether the trigger ignores clicks */
+  disabled?: boolean
+  /** Called when the trigger is clicked */
+  onClick: () => void
+}
+
+const preventFocusLoss = (event: React.MouseEvent) => event.preventDefault()
+
+export const TimePickerTrigger = ({
+  open,
+  disabled,
+  onClick,
+  className,
+  style,
+  'data-testid': dataTestId,
+}: Props): React.ReactElement => (
+  <InputAdornment position='end'>
+    {/* Touch devices keep the native picker: the button lets taps through to the browser's own picker indicator underneath */}
+    <button
+      type='button'
+      tabIndex={-1}
+      aria-label='Choose time'
+      aria-haspopup='listbox'
+      aria-expanded={open}
+      disabled={disabled}
+      onMouseDown={preventFocusLoss}
+      onClick={onClick}
+      className={twMerge(
+        'absolute right-[0.625rem] flex m-0 p-0 border-none bg-white text-inherit select-none',
+        'cursor-pointer disabled:cursor-default',
+        'pointer-events-none pointer-fine:pointer-events-auto',
+        className
+      )}
+      style={style}
+      data-testid={dataTestId}
+    >
+      <Time16 />
+    </button>
+  </InputAdornment>
+)
+
+TimePickerTrigger.displayName = 'TimePickerTrigger'
+
+export default TimePickerTrigger

package/src/TimePickerTrigger/index.ts

@@ -0,0 +1 @@
+export { default as TimePickerTrigger } from './TimePickerTrigger'