@toptal/picasso-timepicker 100.0.4-alpha-pf-react-19-improvements-970580a42.0 → 100.1.0

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { BaseProps } from '@toptal/picasso-shared';
 import type { InputProps } from '@toptal/picasso-input';
 import type { Status } from '@toptal/picasso-outlined-input';
@@ -8,9 +9,11 @@ export interface Props extends BaseProps, Omit<InputProps, 'id' | 'value' | 'onS
     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;
 }
 export declare const TimePicker: {
-    ({ status, ...props }: Props): JSX.Element;
+    ({ status, ...props }: Props): React.ReactElement;
     displayName: string;
 };
 export default TimePicker;

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAG5D,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CACF,UAAU,EACR,IAAI,GACJ,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,WAAW,GACX,MAAM,GACN,cAAc,GACd,MAAM,GACN,MAAM,GACN,cAAc,GACd,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,oBAAoB,GACpB,SAAS,GACT,OAAO,GACP,aAAa,GACb,QAAQ,CACX;IACH,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA;IACzD,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,UAAU;2BAAsC,KAAK;;CAoEjE,CAAA;AAID,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAQ5D,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CACF,UAAU,EACR,IAAI,GACJ,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,WAAW,GACX,MAAM,GACN,cAAc,GACd,MAAM,GACN,MAAM,GACN,cAAc,GACd,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,oBAAoB,GACpB,SAAS,GACT,OAAO,GACP,aAAa,GACb,QAAQ,CACX;IACH,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA;IACzD,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4HAA4H;IAC5H,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;CACxC;AAqBD,eAAO,MAAM,UAAU;2BAGpB,KAAK,GAAG,KAAK,CAAC,YAAY;;CAmL5B,CAAA;AAID,eAAe,UAAU,CAAA"}

package/dist-package/src/TimePicker/TimePicker.js

@@ -10,22 +10,39 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect, useState } from 'react';
+import InputMask from 'react-input-mask';
+import { detect } from 'detect-browser';
 import { Input } from '@toptal/picasso-input';
 import { Time16 } from '@toptal/picasso-icons';
 import { twMerge } from '@toptal/picasso-tailwind-merge';
-const VALID_TIME_REGEX = new RegExp(/^([0-1][0-9]|2[0-3]):[0-5][0-9]$/);
+import { TimePickerDropdown } from '../TimePickerDropdown';
+import { TimePickerTrigger } from '../TimePickerTrigger';
+import { useTimePickerPopover } from './use-time-picker-popover';
+import { VALID_TIME_REGEX, getHourCycle } from './utils';
+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 = (React.createElement(Time16, { classes: {
+        root: 'bg-white absolute right-[0.625rem] pointer-events-none m-0 select-none',
+    } }));
+const getInputMask = (value) => {
+    const startsWithTwo = value && value[0] === '2';
+    return [/[0-2]/, startsWithTwo ? /[0-3]/ : /[0-9]/, ':', /[0-5]/, /[0-9]/];
+};
 export const TimePicker = (_a) => {
+    var _b;
     var { status = 'default' } = _a, props = __rest(_a, ["status"]);
-    const { onChange: externalOnChange, value: externalValue, width, className, highlight, size } = props, rest = __rest(props, ["onChange", "value", "width", "className", "highlight", "size"]);
+    const { onChange: externalOnChange, onKeyDown: externalOnKeyDown, onBlur: externalOnBlur, onFocus: externalOnFocus, value: externalValue, width, className, highlight, size, minuteStep } = props, rest = __rest(props, ["onChange", "onKeyDown", "onBlur", "onFocus", "value", "width", "className", "highlight", "size", "minuteStep"]);
     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
         if (externalValue && VALID_TIME_REGEX.test(externalValue)) {
             setValue(externalValue);
         }
     }, [externalValue]);
-    const onChange = (event) => {
-        const newValue = event.target.value;
+    const changeValue = (newValue) => {
         setValue(newValue);
         if (newValue && VALID_TIME_REGEX.test(newValue)) {
             externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange(newValue);
@@ -34,13 +51,50 @@ export const TimePicker = (_a) => {
             externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange('');
         }
     };
-    const icon = (React.createElement(Time16, { classes: {
-            root: 'bg-white absolute right-[0.625rem] pointer-events-none m-0 select-none',
-        } }));
+    const onChange = (event) => changeValue(event.target.value);
+    const isSafari = ((_b = detect()) === null || _b === void 0 ? void 0 : _b.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) => {
+        changeValue(time);
+        closeAndFocusField();
+    };
+    const handleKeyDown = (event) => {
+        externalOnKeyDown === null || externalOnKeyDown === void 0 ? void 0 : externalOnKeyDown(event);
+        handleFieldKeyDown(event);
+    };
+    const handleBlur = (event) => {
+        if (!isFocusChangeWithinList(event)) {
+            externalOnBlur === null || externalOnBlur === void 0 ? void 0 : externalOnBlur(event);
+        }
+    };
+    const handleFocus = (event) => {
+        handleFieldFocus();
+        if (!isFocusChangeWithinList(event)) {
+            externalOnFocus === null || externalOnFocus === void 0 ? void 0 : externalOnFocus(event);
+        }
+    };
+    const adornmentProps = hasTimeList
+        ? {
+            endAdornment: (React.createElement(TimePickerTrigger, { open: isOpen, disabled: !interactive, onClick: handleTriggerClick })),
+        }
+        : { iconPosition: 'end', icon: nativePickerIcon };
+    const timeList = hasTimeList && (React.createElement(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`;
-    return (React.createElement(Input, { type: 'time', value: value, className: inputClassName, onChange: onChange, iconPosition: 'end', highlight: highlight, icon: icon, width: width, size: size, status: status, inputProps: Object.assign({ className: inputPropClassName, step: 60 }, rest) }));
+    const inputPropClassName = hasTimeList
+        ? TIME_LIST_CLASS_NAME
+        : NATIVE_PICKER_CLASS_NAME;
+    if (isSafari) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Input, Object.assign({ type: 'text', readOnly: true }, adornmentProps, { width: width, status: status, className: inputClassName, highlight: highlight, size: size, outlineRef: anchorRef, inputProps: Object.assign({ className: inputPropClassName }, rest), startAdornment: React.createElement(InputMask, { mask: getInputMask(value), alwaysShowMask: true, maskPlaceholder: '-', value: value, onChange: onChange, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: handleFocus, className: 'text-sm border-none p-0 m-0 outline-hidden' }) })),
+            timeList));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, Object.assign({ 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: Object.assign({ className: inputPropClassName, step: 60 }, rest) })),
+        timeList));
 };
 TimePicker.displayName = 'TimePicker';
 export default TimePicker;

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAkCxD,MAAM,gBAAgB,GAAG,IAAI,MAAM,CAAC,kCAAkC,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,MAAM,GAAG,SAAS,OAAmB,EAAd,KAAK,cAA9B,UAAgC,CAAF;IACvD,MAAM,EACJ,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,aAAa,EACpB,KAAK,EACL,SAAS,EACT,SAAS,EACT,IAAI,KAEF,KAAK,EADJ,IAAI,UACL,KAAK,EARH,gEAQL,CAAQ,CAAA;IAET,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,uEAAuE;QACvE,IAAI,aAAa,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;YAC1D,QAAQ,CAAC,aAAa,CAAC,CAAA;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,MAAM,QAAQ,GAAG,CACf,KAEC,EACD,EAAE;QACF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;QAEnC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QAElB,IAAI,QAAQ,IAAI,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,CAAC,CAAA;QAC9B,CAAC;aAAM,CAAC;YACN,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,EAAE,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,CACX,oBAAC,MAAM,IACL,OAAO,EAAE;YACP,IAAI,EAAE,wEAAwE;SAC/E,GACD,CACH,CAAA;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;IAE3D,MAAM,kBAAkB,GAAG;yGAC4E,CAAA;IAEvG,OAAO,CACL,oBAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,kBACR,SAAS,EAAE,kBAAkB,EAC7B,IAAI,EAAE,EAAE,IACL,IAAI,IAET,CACH,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/TimePicker/use-time-picker-popover.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { HourCycle } from './utils';
+interface Options {
+    enabled: boolean;
+    getHourCycle: () => HourCycle;
+}
+export declare const useTimePickerPopover: ({ enabled, getHourCycle }: Options) => {
+    isOpen: boolean;
+    hourCycle: HourCycle;
+    anchorRef: React.RefObject<HTMLElement>;
+    listRef: React.RefObject<HTMLDivElement>;
+    focusList: boolean;
+    isFocusChangeWithinList: (event: React.FocusEvent) => boolean;
+    handleTriggerClick: () => void;
+    handleClickAway: (event: React.MouseEvent) => void;
+    closeAndFocusField: () => void;
+    handleFieldFocus: () => void;
+    handleFieldKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};
+//# sourceMappingURL=use-time-picker-popover.d.ts.map

package/dist-package/src/TimePicker/use-time-picker-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-time-picker-popover.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/use-time-picker-popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC,UAAU,OAAO;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,MAAM,SAAS,CAAA;CAC9B;AAMD,eAAO,MAAM,oBAAoB,8BAA+B,OAAO;;;;;;qCAgD7B,KAAK,CAAC,UAAU;;6BANxB,KAAK,CAAC,UAAU;;;gCAgBb,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;CA+CzE,CAAA"}

package/dist-package/src/TimePicker/use-time-picker-popover.js

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from 'react';
+// The shortcuts a browser uses to open the native time picker
+const isOpenShortcut = (event) => event.key === ' ' || (event.key === 'ArrowDown' && event.altKey);
+export const useTimePickerPopover = ({ enabled, getHourCycle }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusList, setFocusList] = useState(false);
+    const [hourCycle, setHourCycle] = useState(24);
+    const anchorRef = useRef(null);
+    const listRef = useRef(null);
+    const focusField = () => {
+        var _a, _b;
+        return (_b = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input:not([readonly])')) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    const open = ({ focusList: shouldFocusList }) => {
+        setFocusList(shouldFocusList);
+        setHourCycle(getHourCycle());
+        setIsOpen(true);
+    };
+    const close = () => setIsOpen(false);
+    useEffect(() => {
+        if (!enabled) {
+            close();
+        }
+    }, [enabled]);
+    const closeAndFocusField = () => {
+        close();
+        focusField();
+    };
+    const handleTriggerClick = () => {
+        if (isOpen) {
+            closeAndFocusField();
+            return;
+        }
+        open({ focusList: false });
+        focusField();
+    };
+    const handleClickAway = (event) => {
+        var _a;
+        if (!((_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            close();
+        }
+    };
+    const isFocusChangeWithinList = (event) => {
+        var _a;
+        return event.relatedTarget instanceof Node &&
+            Boolean((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget));
+    };
+    const handleFieldFocus = () => {
+        // Focus is back in the field, so the next shortcut must be able to move it
+        // into the list again
+        setFocusList(false);
+    };
+    const handleFieldKeyDown = (event) => {
+        if (!isOpen) {
+            if (enabled && isOpenShortcut(event)) {
+                event.preventDefault();
+                open({ focusList: true });
+            }
+            return;
+        }
+        if (isOpenShortcut(event)) {
+            // Keeps the browser from opening its own time picker over the list
+            event.preventDefault();
+            setFocusList(true);
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                // Keeps a surrounding Modal or Drawer open while the list closes
+                event.stopPropagation();
+                close();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                close();
+                break;
+            case 'Tab':
+                close();
+                break;
+        }
+    };
+    return {
+        isOpen,
+        hourCycle,
+        anchorRef,
+        listRef,
+        focusList,
+        isFocusChangeWithinList,
+        handleTriggerClick,
+        handleClickAway,
+        closeAndFocusField,
+        handleFieldFocus,
+        handleFieldKeyDown,
+    };
+};
+//# sourceMappingURL=use-time-picker-popover.js.map

package/dist-package/src/TimePicker/use-time-picker-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-time-picker-popover.js","sourceRoot":"","sources":["../../../src/TimePicker/use-time-picker-popover.ts"],"names":[],"mappings":"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"}

package/dist-package/src/TimePicker/utils/get-hour-cycle.d.ts

@@ -0,0 +1,3 @@
+export type HourCycle = 12 | 24;
+export declare const getHourCycle: (locale?: string) => HourCycle;
+//# sourceMappingURL=get-hour-cycle.d.ts.map

package/dist-package/src/TimePicker/utils/get-hour-cycle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-hour-cycle.d.ts","sourceRoot":"","sources":["../../../../src/TimePicker/utils/get-hour-cycle.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAA;AA6D/B,eAAO,MAAM,YAAY,YAAa,MAAM,KAAG,SACU,CAAA"}

package/dist-package/src/TimePicker/utils/get-hour-cycle.js

@@ -0,0 +1,42 @@
+const PROBE_CLASS_NAME = 'fixed top-0 left-0 invisible pointer-events-none h-auto p-0 border-0';
+// Blink calls the AM/PM segment `ampm-field`, WebKit calls it `meridiem-field`
+const SEGMENT_CLASS_NAMES = {
+    hour: '[&::-webkit-datetime-edit-hour-field]:inline-block [&::-webkit-datetime-edit-hour-field]:h-screen',
+    ampm: '[&::-webkit-datetime-edit-ampm-field]:inline-block [&::-webkit-datetime-edit-ampm-field]:h-screen [&::-webkit-datetime-edit-meridiem-field]:inline-block [&::-webkit-datetime-edit-meridiem-field]:h-screen',
+};
+const measureProbe = (segment) => {
+    const probe = document.createElement('input');
+    probe.type = 'time';
+    probe.tabIndex = -1;
+    probe.setAttribute('aria-hidden', 'true');
+    probe.className = PROBE_CLASS_NAME;
+    if (segment) {
+        probe.className += ` ${SEGMENT_CLASS_NAMES[segment]}`;
+        probe.setAttribute('data-testid', `time-picker-probe-${segment}`);
+    }
+    document.body.appendChild(probe);
+    const height = probe.offsetHeight;
+    probe.remove();
+    return height;
+};
+// The native field follows the operating system's 12/24-hour setting, which
+// `Intl` does not see, so the field itself is the only reliable source
+const getNativeFieldHourCycle = () => {
+    if (typeof document === 'undefined') {
+        return undefined;
+    }
+    const stretchedHeight = measureProbe() * 2;
+    const rendersSegment = (segment) => measureProbe(segment) > stretchedHeight;
+    if (!rendersSegment('hour')) {
+        return undefined;
+    }
+    return rendersSegment('ampm') ? 12 : 24;
+};
+const getLocaleHourCycle = (locale) => {
+    const { hour12 } = new Intl.DateTimeFormat(locale, {
+        hour: 'numeric',
+    }).resolvedOptions();
+    return hour12 ? 12 : 24;
+};
+export const getHourCycle = (locale) => { var _a; return (_a = getNativeFieldHourCycle()) !== null && _a !== void 0 ? _a : getLocaleHourCycle(locale); };
+//# sourceMappingURL=get-hour-cycle.js.map

package/dist-package/src/TimePicker/utils/get-hour-cycle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-hour-cycle.js","sourceRoot":"","sources":["../../../../src/TimePicker/utils/get-hour-cycle.ts"],"names":[],"mappings":"AAIA,MAAM,gBAAgB,GACpB,sEAAsE,CAAA;AAExE,+EAA+E;AAC/E,MAAM,mBAAmB,GAA4B;IACnD,IAAI,EAAE,mGAAmG;IACzG,IAAI,EAAE,6MAA6M;CACpN,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,OAAiB,EAAE,EAAE;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAE7C,KAAK,CAAC,IAAI,GAAG,MAAM,CAAA;IACnB,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;IACnB,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IACzC,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAA;IAElC,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,SAAS,IAAI,IAAI,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAA;QACrD,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,qBAAqB,OAAO,EAAE,CAAC,CAAA;IACnE,CAAC;IAED,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAEhC,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;IAEjC,KAAK,CAAC,MAAM,EAAE,CAAA;IAEd,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,4EAA4E;AAC5E,uEAAuE;AACvE,MAAM,uBAAuB,GAAG,GAA0B,EAAE;IAC1D,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,MAAM,eAAe,GAAG,YAAY,EAAE,GAAG,CAAC,CAAA;IAC1C,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,EAAE,CAC1C,YAAY,CAAC,OAAO,CAAC,GAAG,eAAe,CAAA;IAEzC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;QAC5B,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;AACzC,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,CAAC,MAAe,EAAa,EAAE;IACxD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;QACjD,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC,eAAe,EAAE,CAAA;IAEpB,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAe,EAAa,EAAE,WACzD,OAAA,MAAA,uBAAuB,EAAE,mCAAI,kBAAkB,CAAC,MAAM,CAAC,CAAA,EAAA,CAAA"}

package/dist-package/src/TimePicker/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { getHourCycle } from './get-hour-cycle';
+export type { HourCycle } from './get-hour-cycle';
+export { VALID_TIME_REGEX, getCurrentTime, getNearestOptionIndex, getTimeOptions, parseTime, } from './time';
+export type { Time, TimeOption } from './time';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/TimePicker/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/TimePicker/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,SAAS,GACV,MAAM,QAAQ,CAAA;AACf,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA"}

package/dist-package/src/TimePicker/utils/index.js

@@ -0,0 +1,3 @@
+export { getHourCycle } from './get-hour-cycle';
+export { VALID_TIME_REGEX, getCurrentTime, getNearestOptionIndex, getTimeOptions, parseTime, } from './time';
+//# sourceMappingURL=index.js.map

package/dist-package/src/TimePicker/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/TimePicker/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,SAAS,GACV,MAAM,QAAQ,CAAA"}

package/dist-package/src/TimePicker/utils/time.d.ts

@@ -0,0 +1,16 @@
+import type { HourCycle } from './get-hour-cycle';
+export interface Time {
+    hours: number;
+    minutes: number;
+}
+export interface TimeOption {
+    value: string;
+    label: string;
+}
+export declare const VALID_TIME_REGEX: RegExp;
+export declare const parseTime: (value?: string) => Time | undefined;
+export declare const formatTime: ({ hours, minutes }: Time) => string;
+export declare const getCurrentTime: () => Time;
+export declare const getTimeOptions: (minuteStep: number, hourCycle: HourCycle) => TimeOption[];
+export declare const getNearestOptionIndex: (time: Time, minuteStep: number) => number;
+//# sourceMappingURL=time.d.ts.map

package/dist-package/src/TimePicker/utils/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../../src/TimePicker/utils/time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,gBAAgB,QAAqC,CAAA;AAQlE,eAAO,MAAM,SAAS,WAAY,MAAM,KAAG,IAAI,GAAG,SAQjD,CAAA;AAED,eAAO,MAAM,UAAU,uBAAwB,IAAI,WACF,CAAA;AAEjD,eAAO,MAAM,cAAc,QAAO,IAIjC,CAAA;AAaD,eAAO,MAAM,cAAc,eACb,MAAM,aACP,SAAS,KACnB,UAAU,EAgBZ,CAAA;AAED,eAAO,MAAM,qBAAqB,SAAU,IAAI,cAAc,MAAM,WAIjE,CAAA"}

package/dist-package/src/TimePicker/utils/time.js

@@ -0,0 +1,41 @@
+export const VALID_TIME_REGEX = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/;
+const MINUTES_IN_HOUR = 60;
+const MINUTES_IN_DAY = 24 * MINUTES_IN_HOUR;
+const HALF_DAY = 12;
+const padTimePart = (part) => String(part).padStart(2, '0');
+export const parseTime = (value) => {
+    if (!value || !VALID_TIME_REGEX.test(value)) {
+        return undefined;
+    }
+    const [hours, minutes] = value.split(':').map(Number);
+    return { hours, minutes };
+};
+export const formatTime = ({ hours, minutes }) => `${padTimePart(hours)}:${padTimePart(minutes)}`;
+export const getCurrentTime = () => {
+    const now = new Date();
+    return { hours: now.getHours(), minutes: now.getMinutes() };
+};
+const formatLabel = (time, hourCycle) => {
+    if (hourCycle === 24) {
+        return formatTime(time);
+    }
+    const hours = time.hours % HALF_DAY || HALF_DAY;
+    const period = time.hours < HALF_DAY ? 'AM' : 'PM';
+    return `${formatTime({ hours, minutes: time.minutes })} ${period}`;
+};
+export const getTimeOptions = (minuteStep, hourCycle) => {
+    const options = [];
+    for (let minutes = 0; minutes < MINUTES_IN_DAY; minutes += minuteStep) {
+        const time = {
+            hours: Math.floor(minutes / MINUTES_IN_HOUR),
+            minutes: minutes % MINUTES_IN_HOUR,
+        };
+        options.push({
+            value: formatTime(time),
+            label: formatLabel(time, hourCycle),
+        });
+    }
+    return options;
+};
+export const getNearestOptionIndex = (time, minuteStep) => Math.min(Math.round((time.hours * MINUTES_IN_HOUR + time.minutes) / minuteStep), Math.ceil(MINUTES_IN_DAY / minuteStep) - 1);
+//# sourceMappingURL=time.js.map

package/dist-package/src/TimePicker/utils/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../../../src/TimePicker/utils/time.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,gBAAgB,GAAG,kCAAkC,CAAA;AAElE,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,cAAc,GAAG,EAAE,GAAG,eAAe,CAAA;AAC3C,MAAM,QAAQ,GAAG,EAAE,CAAA;AAEnB,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAc,EAAoB,EAAE;IAC5D,IAAI,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5C,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAErD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAA;AAC3B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAQ,EAAE,EAAE,CACrD,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE,CAAA;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,GAAS,EAAE;IACvC,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAA;IAEtB,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE,EAAE,CAAA;AAC7D,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,IAAU,EAAE,SAAoB,EAAE,EAAE;IACvD,IAAI,SAAS,KAAK,EAAE,EAAE,CAAC;QACrB,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,QAAQ,IAAI,QAAQ,CAAA;IAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAElD,OAAO,GAAG,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,MAAM,EAAE,CAAA;AACpE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,UAAkB,EAClB,SAAoB,EACN,EAAE;IAChB,MAAM,OAAO,GAAiB,EAAE,CAAA;IAEhC,KAAK,IAAI,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,cAAc,EAAE,OAAO,IAAI,UAAU,EAAE,CAAC;QACtE,MAAM,IAAI,GAAG;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,eAAe,CAAC;YAC5C,OAAO,EAAE,OAAO,GAAG,eAAe;SACnC,CAAA;QAED,OAAO,CAAC,IAAI,CAAC;YACX,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;YACvB,KAAK,EAAE,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC;SACpC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,IAAU,EAAE,UAAkB,EAAE,EAAE,CACtE,IAAI,CAAC,GAAG,CACN,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,EACtE,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,GAAG,CAAC,CAC3C,CAAA"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TimePickerListProps } from '../TimePickerList';
+export interface Props extends TimePickerListProps {
+    /** Whether the dropdown is shown */
+    open: boolean;
+    /** Element the dropdown is positioned under */
+    anchorEl: HTMLElement | null;
+    /** Called when a click lands outside of the dropdown */
+    onClickAway: (event: React.MouseEvent) => void;
+}
+export declare const TimePickerDropdown: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default TimePickerDropdown;
+//# sourceMappingURL=TimePickerDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerDropdown.d.ts","sourceRoot":"","sources":["../../../src/TimePickerDropdown/TimePickerDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D,MAAM,WAAW,KAAM,SAAQ,mBAAmB;IAChD,oCAAoC;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,+CAA+C;IAC/C,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,wDAAwD;IACxD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CAC/C;AAED,eAAO,MAAM,kBAAkB,8EAwB9B,CAAA;AAID,eAAe,kBAAkB,CAAA"}

package/dist-package/src/TimePickerDropdown/TimePickerDropdown.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { Popper } from '@toptal/picasso-popper';
+import { ClickAwayListener } from '@toptal/picasso-utils';
+import { TimePickerList } from '../TimePickerList';
+export const TimePickerDropdown = forwardRef(function TimePickerDropdown(_a, ref) {
+    var { open, anchorEl, onClickAway } = _a, rest = __rest(_a, ["open", "anchorEl", "onClickAway"]);
+    if (!open || !anchorEl) {
+        return null;
+    }
+    return (React.createElement(Popper, { open: true, role: 'presentation', anchorEl: anchorEl, placement: 'bottom-start' },
+        React.createElement(ClickAwayListener, { onClickAway: onClickAway },
+            React.createElement("div", { ref: ref },
+                React.createElement(TimePickerList, Object.assign({}, rest))))));
+});
+TimePickerDropdown.displayName = 'TimePickerDropdown';
+export default TimePickerDropdown;
+//# sourceMappingURL=TimePickerDropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerDropdown.js","sourceRoot":"","sources":["../../../src/TimePickerDropdown/TimePickerDropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAYlD,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,SAAS,kBAAkB,CACzB,EAA+C,EAC/C,GAAG;QADH,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,OAAkB,EAAb,IAAI,cAAtC,mCAAwC,CAAF;IAGtC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QACvB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,QACJ,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,cAAc;QAExB,oBAAC,iBAAiB,IAAC,WAAW,EAAE,WAAW;YACzC,6BAAK,GAAG,EAAE,GAAG;gBACX,oBAAC,cAAc,oBAAK,IAAI,EAAI,CACxB,CACY,CACb,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA;AAErD,eAAe,kBAAkB,CAAA"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { BaseProps } from '@toptal/picasso-shared';
+import type { HourCycle } 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;
+}
+export declare const TimePickerList: {
+    ({ value, minuteStep, hourCycle, autoFocus, onChange, onClose, className, style, "data-testid": dataTestId, }: Props): React.ReactElement;
+    displayName: string;
+};
+export default TimePickerList;
+//# sourceMappingURL=TimePickerList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerList.d.ts","sourceRoot":"","sources":["../../../src/TimePickerList/TimePickerList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAWvD,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,qBAAqB,CAAA;AAEhE,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAA;IAClB,sFAAsF;IACtF,SAAS,EAAE,SAAS,CAAA;IACpB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AA4CD,eAAO,MAAM,cAAc;mHAUxB,KAAK,GAAG,KAAK,CAAC,YAAY;;CAwG5B,CAAA;AAID,eAAe,cAAc,CAAA"}

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