@toptal/picasso-timepicker 100.0.3 → 100.1.0

package/dist-package/src/TimePickerList/TimePickerList.js

@@ -0,0 +1,97 @@
+import React, { useMemo, useRef, useState } from 'react';
+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';
+const OPTION = '[role="option"]';
+const preventFocusLoss = (event) => {
+    // Clicking a time must keep the caret in the field, like the browser picker does
+    event.preventDefault();
+};
+const getStartingIndex = (options, minuteStep, value) => {
+    var _a;
+    const selectedIndex = options.findIndex(option => option.value === value);
+    return selectedIndex >= 0
+        ? selectedIndex
+        : getNearestOptionIndex((_a = parseTime(value)) !== null && _a !== void 0 ? _a : getCurrentTime(), minuteStep);
+};
+const scrollToOption = (list, option) => {
+    const listRect = list.getBoundingClientRect();
+    const optionRect = option.getBoundingClientRect();
+    list.scrollTop +=
+        optionRect.top - listRect.top - (listRect.height - optionRect.height) / 2;
+};
+const getNextIndex = (key, index, count) => {
+    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, }) => {
+    const listRef = useRef(null);
+    const options = useMemo(() => getTimeOptions(minuteStep, hourCycle), [minuteStep, hourCycle]);
+    const [initialIndex] = useState(() => getStartingIndex(options, minuteStep, value));
+    const getOptionElements = () => { var _a, _b; return Array.from((_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(OPTION)) !== null && _b !== void 0 ? _b : []); };
+    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) => {
+        var _a;
+        const optionElements = getOptionElements();
+        const index = optionElements.indexOf(event.target.closest(OPTION));
+        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();
+                    (_a = optionElements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }
+        }
+    };
+    return (React.createElement(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 => (React.createElement(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)))));
+};
+TimePickerList.displayName = 'TimePickerList';
+export default TimePickerList;
+//# sourceMappingURL=TimePickerList.js.map

package/dist-package/src/TimePickerList/TimePickerList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerList.js","sourceRoot":"","sources":["../../../src/TimePickerList/TimePickerList.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/TimePickerList/index.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './TimePickerList';
+export { default as TimePickerList } from './TimePickerList';
+export type TimePickerListProps = Props;
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/TimePickerList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TimePickerList/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAE7C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAA"}

package/dist-package/src/TimePickerList/index.js

@@ -0,0 +1,2 @@
+export { default as TimePickerList } from './TimePickerList';
+//# sourceMappingURL=index.js.map

package/dist-package/src/TimePickerList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TimePickerList/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/dist-package/src/TimePickerTrigger/TimePickerTrigger.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { BaseProps } from '@toptal/picasso-shared';
+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;
+}
+export declare const TimePickerTrigger: {
+    ({ open, disabled, onClick, className, style, "data-testid": dataTestId, }: Props): React.ReactElement;
+    displayName: string;
+};
+export default TimePickerTrigger;
+//# sourceMappingURL=TimePickerTrigger.d.ts.map

package/dist-package/src/TimePickerTrigger/TimePickerTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerTrigger.d.ts","sourceRoot":"","sources":["../../../src/TimePickerTrigger/TimePickerTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,qCAAqC;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAID,eAAO,MAAM,iBAAiB;gFAO3B,KAAK,GAAG,KAAK,CAAC,YAAY;;CAwB5B,CAAA;AAID,eAAe,iBAAiB,CAAA"}

package/dist-package/src/TimePickerTrigger/TimePickerTrigger.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputAdornment } from '@toptal/picasso-input-adornment';
+import { Time16 } from '@toptal/picasso-icons';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+const preventFocusLoss = (event) => event.preventDefault();
+export const TimePickerTrigger = ({ open, disabled, onClick, className, style, 'data-testid': dataTestId, }) => (React.createElement(InputAdornment, { position: 'end' },
+    React.createElement("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 },
+        React.createElement(Time16, null))));
+TimePickerTrigger.displayName = 'TimePickerTrigger';
+export default TimePickerTrigger;
+//# sourceMappingURL=TimePickerTrigger.js.map

package/dist-package/src/TimePickerTrigger/TimePickerTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerTrigger.js","sourceRoot":"","sources":["../../../src/TimePickerTrigger/TimePickerTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAWxD,MAAM,gBAAgB,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,CAAA;AAE5E,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,GACnB,EAAsB,EAAE,CAAC,CAC/B,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;IAE5B,gCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,gBACD,aAAa,mBACV,SAAS,mBACR,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,CAChB,sFAAsF,EACtF,wCAAwC,EACxC,sDAAsD,EACtD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,iBACC,UAAU;QAEvB,oBAAC,MAAM,OAAG,CACH,CACM,CAClB,CAAA;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;AAEnD,eAAe,iBAAiB,CAAA"}

package/dist-package/src/TimePickerTrigger/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TimePickerTrigger } from './TimePickerTrigger';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/TimePickerTrigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TimePickerTrigger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist-package/src/TimePickerTrigger/index.js

@@ -0,0 +1,2 @@
+export { default as TimePickerTrigger } from './TimePickerTrigger';
+//# sourceMappingURL=index.js.map

package/dist-package/src/TimePickerTrigger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TimePickerTrigger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-timepicker",
-  "version": "100.0.3",
+  "version": "100.1.0",
   "description": "Toptal UI components library - Timepicker",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,10 @@
     "react-input-mask": "^3.0.0-alpha.2",
     "@toptal/picasso-icons": "100.0.1",
     "@toptal/picasso-input": "100.0.3",
+    "@toptal/picasso-input-adornment": "100.0.1",
+    "@toptal/picasso-menu": "100.0.3",
     "@toptal/picasso-outlined-input": "100.1.0",
+    "@toptal/picasso-popper": "100.0.2",
     "@toptal/picasso-utils": "100.0.1"
   },
   "sideEffects": [

package/src/TimePicker/TimePicker.tsx

@@ -8,6 +8,11 @@ import type { InputProps } from '@toptal/picasso-input'
 import type { Status } from '@toptal/picasso-outlined-input'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
+import { TimePickerDropdown } from '../TimePickerDropdown'
+import { TimePickerTrigger } from '../TimePickerTrigger'
+import { useTimePickerPopover } from './use-time-picker-popover'
+import { VALID_TIME_REGEX, getHourCycle } from './utils'
+
 export interface Props
   extends BaseProps,
     Omit<
@@ -38,22 +43,50 @@ export interface Props
   status?: Extract<Status, 'error' | 'warning' | 'default'>
   /** Called on input change */
   onChange?: (value: string) => void
+  /** Interval in minutes between the times offered in a dropdown list. When omitted, the browser's own time picker is used */
+  minuteStep?: 5 | 10 | 15 | 20 | 30 | 60
 }
 
-const VALID_TIME_REGEX = new RegExp(/^([0-1][0-9]|2[0-3]):[0-5][0-9]$/)
+const NATIVE_PICKER_CLASS_NAME = `-mr-2 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-2
+    [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:bg-none`
+
+const TIME_LIST_CLASS_NAME = `${NATIVE_PICKER_CLASS_NAME} pointer-fine:[&::-webkit-calendar-picker-indicator]:hidden`
+
+const nativePickerIcon = (
+  <Time16
+    classes={{
+      root: 'bg-white absolute right-[0.625rem] pointer-events-none m-0 select-none',
+    }}
+  />
+)
 
-export const TimePicker = ({ status = 'default', ...props }: Props) => {
+const getInputMask = (value?: string) => {
+  const startsWithTwo = value && value[0] === '2'
+
+  return [/[0-2]/, startsWithTwo ? /[0-3]/ : /[0-9]/, ':', /[0-5]/, /[0-9]/]
+}
+
+export const TimePicker = ({
+  status = 'default',
+  ...props
+}: Props): React.ReactElement => {
   const {
     onChange: externalOnChange,
+    onKeyDown: externalOnKeyDown,
+    onBlur: externalOnBlur,
+    onFocus: externalOnFocus,
     value: externalValue,
     width,
     className,
     highlight,
     size,
+    minuteStep,
     ...rest
   } = props
 
   const [value, setValue] = useState(externalValue)
+  const hasTimeList = minuteStep !== undefined
+  const interactive = hasTimeList && !rest.disabled && !rest.readOnly
 
   useEffect(() => {
     // Set internal value based on the provided one if the later is correct
@@ -62,13 +95,7 @@ export const TimePicker = ({ status = 'default', ...props }: Props) => {
     }
   }, [externalValue])
 
-  const onChange = (
-    event: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
-  ) => {
-    const newValue = event.target.value
-
+  const changeValue = (newValue: string) => {
     setValue(newValue)
 
     if (newValue && VALID_TIME_REGEX.test(newValue)) {
@@ -78,79 +105,148 @@ export const TimePicker = ({ status = 'default', ...props }: Props) => {
     }
   }
 
-  const browser = detect()
-  const isSafari = browser?.name === 'safari'
-  const startsWithTwo = value && value[0] === '2'
+  const onChange = (
+    event: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => changeValue(event.target.value)
+
+  const isSafari = detect()?.name === 'safari'
+
+  const {
+    isOpen,
+    hourCycle,
+    anchorRef,
+    listRef,
+    focusList,
+    isFocusChangeWithinList,
+    handleTriggerClick,
+    handleClickAway,
+    closeAndFocusField,
+    handleFieldFocus,
+    handleFieldKeyDown,
+  } = useTimePickerPopover({
+    enabled: interactive,
+    // Safari renders its own 24-hour masked field, so the list has to match it
+    getHourCycle: () => (isSafari ? 24 : getHourCycle()),
+  })
+
+  const handleTimePick = (time: string) => {
+    changeValue(time)
+    closeAndFocusField()
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    externalOnKeyDown?.(event)
+    handleFieldKeyDown(event)
+  }
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    if (!isFocusChangeWithinList(event)) {
+      externalOnBlur?.(event)
+    }
+  }
 
-  const inputMask = [
-    /[0-2]/,
-    startsWithTwo ? /[0-3]/ : /[0-9]/,
-    ':',
-    /[0-5]/,
-    /[0-9]/,
-  ]
-
-  const icon = (
-    <Time16
-      classes={{
-        root: 'bg-white absolute right-[0.625rem] pointer-events-none m-0 select-none',
-      }}
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    handleFieldFocus()
+
+    if (!isFocusChangeWithinList(event)) {
+      externalOnFocus?.(event)
+    }
+  }
+
+  const adornmentProps = hasTimeList
+    ? {
+        endAdornment: (
+          <TimePickerTrigger
+            open={isOpen}
+            disabled={!interactive}
+            onClick={handleTriggerClick}
+          />
+        ),
+      }
+    : { iconPosition: 'end' as const, icon: nativePickerIcon }
+
+  const timeList = hasTimeList && (
+    <TimePickerDropdown
+      ref={listRef}
+      open={isOpen}
+      anchorEl={anchorRef.current}
+      onClickAway={handleClickAway}
+      value={value}
+      minuteStep={minuteStep}
+      hourCycle={hourCycle}
+      autoFocus={focusList}
+      onChange={handleTimePick}
+      onClose={closeAndFocusField}
     />
   )
 
   const inputClassName = twMerge('cursor-default', className)
-
-  const inputPropClassName = `-mr-[8px] [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-2
-    [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:bg-none`
+  const inputPropClassName = hasTimeList
+    ? TIME_LIST_CLASS_NAME
+    : NATIVE_PICKER_CLASS_NAME
 
   if (isSafari) {
     return (
+      <>
+        <Input
+          type='text'
+          readOnly
+          {...adornmentProps}
+          width={width}
+          status={status}
+          className={inputClassName}
+          highlight={highlight}
+          size={size}
+          outlineRef={anchorRef}
+          inputProps={{
+            className: inputPropClassName,
+            ...rest,
+          }}
+          startAdornment={
+            <InputMask
+              mask={getInputMask(value)}
+              alwaysShowMask
+              maskPlaceholder='-'
+              value={value}
+              onChange={onChange}
+              onKeyDown={handleKeyDown}
+              onBlur={handleBlur}
+              onFocus={handleFocus}
+              className={'text-sm border-none p-0 m-0 outline-hidden'}
+            />
+          }
+        />
+        {timeList}
+      </>
+    )
+  }
+
+  return (
+    <>
       <Input
-        type='text'
-        readOnly
-        iconPosition='end'
-        icon={icon}
-        width={width}
-        status={status}
+        type='time'
+        value={value}
         className={inputClassName}
+        onChange={onChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        {...adornmentProps}
         highlight={highlight}
+        width={width}
         size={size}
+        status={status}
+        outlineRef={anchorRef}
         inputProps={{
           className: inputPropClassName,
+          step: 60, // 1 min
           ...rest,
         }}
-        startAdornment={
-          <InputMask
-            mask={inputMask}
-            alwaysShowMask
-            maskPlaceholder='-'
-            value={value}
-            onChange={onChange}
-            className={'text-sm border-none p-0 m-0 outline-hidden'}
-          />
-        }
       />
-    )
-  }
-
-  return (
-    <Input
-      type='time'
-      value={value}
-      className={inputClassName}
-      onChange={onChange}
-      iconPosition='end'
-      highlight={highlight}
-      icon={icon}
-      width={width}
-      size={size}
-      status={status}
-      inputProps={{
-        className: inputPropClassName,
-        step: 60, // 1 min
-        ...rest,
-      }}
-    />
+      {timeList}
+    </>
   )
 }
 

package/src/TimePicker/story/MinuteStep.example.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import { TimePicker } from '@toptal/picasso'
+
+const MinuteStepExample = () => {
+  const [timepickerValue, setTimepickerValue] = useState('09:30')
+
+  return (
+    <TimePicker
+      onChange={setTimepickerValue}
+      value={timepickerValue}
+      minuteStep={15}
+    />
+  )
+}
+
+export default MinuteStepExample

package/src/TimePicker/story/index.jsx

@@ -30,3 +30,13 @@ page
     },
     'base/Timepicker'
   )
+  .addExample(
+    'TimePicker/story/MinuteStep.example.tsx',
+    {
+      title: 'Minute step',
+      description:
+        'Pass `minuteStep` to replace the browser time picker with a list of times at that interval. Any other time can still be typed',
+      takeScreenshot: false,
+    },
+    'base/Timepicker'
+  )