@ringcentral/spring-ui 1.7.0

package/TimePicker.js

@@ -0,0 +1,600 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, forwardRef, useRef, useLayoutEffect, useState, useMemo } from 'react';
+import { useFocusVisible, useForkRef, combineProps, runKeyHandler, useEventCallback, useClasses } from '@ringcentral/spring-base';
+import { CaretUpMd, CaretDownMd, RecentMd } from '@ringcentral/spring-icon';
+import { I as Icon } from './chunks/Icon.js';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import clsx from 'clsx';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { P as PickerTextField } from './chunks/PickerTextField.js';
+import '@mui/base';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'framer-motion';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+import './chunks/Popover.js';
+import './chunks/getGrow.js';
+import './chunks/TextField.js';
+import './chunks/ShowHideEye.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/useHelperTextId.js';
+import './chunks/VisuallyHidden.js';
+
+const TimePickerClassesContext = createContext(() => '');
+const useTimePickerClasses = () => useContext(TimePickerClassesContext);
+
+const TimeButton = forwardRef((props, ref) => {
+    const { value, selected, disabled, children, onFocus, onBlur, className, ...rest } = props;
+    const cls = useTimePickerClasses();
+    const { focusVisible, focusVisibleHandlers, focusVisibleRef } = useFocusVisible();
+    const handleRef = useForkRef(ref, focusVisibleRef);
+    return (jsx("button", { ref: handleRef, className: clsx(className, cls('time-button', {
+            selected,
+            disabled,
+            focusVisible,
+        })), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+});
+TimeButton.displayName = 'SuiTimeButton';
+
+function isClick(event) {
+    return event.type === 'click';
+}
+
+var TIME_SYSTEM_TEXT;
+(function (TIME_SYSTEM_TEXT) {
+    TIME_SYSTEM_TEXT["PM"] = "PM";
+    TIME_SYSTEM_TEXT["AM"] = "AM";
+})(TIME_SYSTEM_TEXT || (TIME_SYSTEM_TEXT = {}));
+const K_ENTER = 'Enter';
+const K_SPACE = ' ';
+
+const parseNumber = (value, isTwelveHourSystem) => {
+    const count = isTwelveHourSystem ? value % 12 : value;
+    if (isTwelveHourSystem && count === 0)
+        return 12;
+    return count;
+};
+const parseNumberToString = (value, isTwelveHourSystem) => {
+    const count = parseNumber(value, isTwelveHourSystem);
+    return pad(count);
+};
+/** add miss zero */
+const pad = (num, size = 2) => {
+    let s = `${num}`;
+    while (s.length < size) {
+        s = `0${s}`;
+    }
+    return s;
+};
+/**
+ * get formatted time hh:mm
+ * @param option `{hour, min, period}`
+ * @param isTwelveHourSystem boolean
+ * @returns `hh:mm AM` or `hh:mm PM` or `hh:mm`
+ */
+const getFormattedTime = ({ hour, minute, period }, isTwelveHourSystem) => {
+    const formattedHour = parseNumberToString(hour, isTwelveHourSystem);
+    const formattedMinute = parseNumberToString(minute);
+    const periodText = isTwelveHourSystem ? ` ${period}` : '';
+    return `${formattedHour}:${formattedMinute}${periodText}`;
+};
+const HALF_DAY_HOURS = 12;
+const HOUR_MINUTES = 60;
+const TIME_GAP = 15;
+const ONE_HOUR = HOUR_MINUTES * HOUR_MINUTES * 1000;
+const ONE_MINUTE = HOUR_MINUTES * 1000;
+const buildConsecutiveNumberToArray = (min, max) => {
+    const array = [];
+    if (min > max)
+        return array;
+    let count = min;
+    while (count <= max) {
+        array.push(count);
+        count++;
+    }
+    return array;
+};
+const twelveHourSystemSource = buildConsecutiveNumberToArray(0, 11);
+const twentyFourHourSystemSource = buildConsecutiveNumberToArray(0, 23);
+const minuteSource = [0, 15, 30, 45];
+const lastMinute = 45;
+/**
+ * hour and minute timestamp
+ */
+const getTimestampFromDate = (date) => {
+    return date.getHours() * ONE_HOUR + date.getMinutes() * ONE_MINUTE;
+};
+/**
+ * hour and minute number
+ */
+const getHourAndMinute = (times) => {
+    if (times === null) {
+        return {
+            hour: 0,
+            minute: 0,
+        };
+    }
+    const minute = times % ONE_HOUR;
+    const hour = (times - minute) / ONE_HOUR;
+    return {
+        hour,
+        minute: Math.floor(minute / ONE_MINUTE),
+    };
+};
+/**
+ * get timestamp from date or timestamp
+ *
+ * if nowTime is number, it must be hour and minute timestamp
+ */
+function getTimestamp(nowTime) {
+    return nowTime instanceof Date ? getTimestampFromDate(nowTime) : nowTime;
+}
+/**
+ * hour and min object to timestamp
+ */
+const getTimestampFromHourAndMin = (option) => {
+    return option.hour * ONE_HOUR + option.minute * ONE_MINUTE;
+};
+/**
+ * get period, `PM` or `AM`
+ */
+function getPeriod(currHour) {
+    return currHour >= HALF_DAY_HOURS ? TIME_SYSTEM_TEXT.PM : TIME_SYSTEM_TEXT.AM;
+}
+const getRecoupHour = (currHour, period) => {
+    switch (period) {
+        case TIME_SYSTEM_TEXT.PM:
+            if (currHour < HALF_DAY_HOURS) {
+                return HALF_DAY_HOURS;
+            }
+            break;
+        case TIME_SYSTEM_TEXT.AM:
+            // FIXME
+            // eslint-disable-next-line sonarjs/no-collapsible-if
+            if (currHour < HALF_DAY_HOURS) {
+                if (currHour >= HALF_DAY_HOURS) {
+                    return -HALF_DAY_HOURS;
+                }
+            }
+            break;
+    }
+    return 0;
+};
+
+const getDateBeginning = () => {
+    const date = new Date();
+    date.setHours(0, 0, 0, 0);
+    return date;
+};
+/**
+ * get target time boundary, what time is nearest time with that timeGap
+ */
+class TimeBoundary {
+    _hour = undefined;
+    value;
+    timeGap;
+    get hour() {
+        return this._hour;
+    }
+    _minute = undefined;
+    get minute() {
+        return this._minute;
+    }
+    _date = undefined;
+    get date() {
+        return this._date;
+    }
+    set date(value) {
+        if (value) {
+            this.timestamp = getTimestampFromDate(value);
+        }
+        this._date = value;
+    }
+    timestamp = 0;
+    constructor(value, direction, timeGap) {
+        this.value = value;
+        this.timeGap = timeGap;
+        if (value) {
+            if (direction === 'after') {
+                this.getAfterNearTime();
+            }
+            else {
+                this.getBeforeNearTime();
+            }
+            this.date = new Date(getDateBeginning().setHours(this.hour, this.minute, 0, 0));
+        }
+    }
+    getAfterNearTime() {
+        const time = this.getDateTime();
+        let hour = time.getHours();
+        let minute = time.getMinutes();
+        const partCount = Math.ceil(minute / this.timeGap);
+        // when time is the latest or more, add one hour
+        if (partCount >= HOUR_MINUTES / this.timeGap) {
+            hour++;
+            minute = 0;
+        }
+        this._hour = hour;
+        this._minute = (partCount * this.timeGap) % HOUR_MINUTES;
+    }
+    getBeforeNearTime() {
+        const time = this.getDateTime();
+        this._hour = time.getHours();
+        this._minute = Math.floor(time.getMinutes() / this.timeGap) * this.timeGap;
+    }
+    getDateTime() {
+        if (this.value instanceof Date) {
+            return this.value;
+        }
+        const { hour, minute } = getHourAndMinute(this.value ?? 0);
+        const date = new Date();
+        date.setHours(hour, minute, 0, 0);
+        return date;
+    }
+}
+const getRangeBoundary = ({ min, max, gap = TIME_GAP, }) => {
+    if (min !== undefined && max !== undefined) {
+        const minTimestamp = getTimestamp(min);
+        const maxTimestamp = getTimestamp(max);
+        if (minTimestamp > maxTimestamp) {
+            throw new Error(`SPRING [TimePicker]: That boundary min ${minTimestamp} is bigger than max ${maxTimestamp}, please confirm your min and max range props`);
+        }
+    }
+    return {
+        min: new TimeBoundary(min, 'after', gap),
+        max: new TimeBoundary(max, 'before', gap),
+    };
+};
+
+/**
+ * get range from current hour
+ */
+function getNumberPickerBoundary(currentHour, { range, isTwelveHourSystem }) {
+    const currentIsPM = currentHour >= HALF_DAY_HOURS;
+    let maxHour = range.max.hour ?? 23;
+    let maxMinute = range.max.minute ?? lastMinute;
+    let minHour = range.min.hour ?? 0;
+    let minMinute = range.min.minute ?? 0;
+    if (isTwelveHourSystem) {
+        if (currentIsPM) {
+            if (minHour < HALF_DAY_HOURS) {
+                minHour = 0;
+                minMinute = 0;
+            }
+        }
+        else if (maxHour >= HALF_DAY_HOURS) {
+            maxHour = 11;
+            maxMinute = lastMinute;
+        }
+    }
+    if (maxMinute !== lastMinute && currentHour < maxHour) {
+        maxMinute = lastMinute;
+    }
+    if (minMinute !== 0 && currentHour > minHour) {
+        minMinute = 0;
+    }
+    if (isTwelveHourSystem) {
+        maxHour = maxHour % HALF_DAY_HOURS;
+        minHour = minHour % HALF_DAY_HOURS;
+    }
+    return {
+        hour: {
+            min: minHour,
+            max: maxHour,
+        },
+        minute: {
+            min: minMinute,
+            max: maxMinute,
+        },
+    };
+}
+
+const NumberPicker = forwardRef((props, ref) => {
+    const { onClick, value, onChange: onUpdate, onKeyDown, source, min, max, step, renderValue, getScreenReaderLabel, autoFocus, ...rest } = props;
+    const { focusVisible, focusVisibleHandlers, focusVisibleRef } = useFocusVisible();
+    const pickerRef = useRef(null);
+    const handlePickerRef = useForkRef(pickerRef, focusVisibleRef);
+    useLayoutEffect(() => {
+        if (autoFocus) {
+            pickerRef.current?.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const index = Math.floor(value / step);
+    const isFirst = index === 0;
+    const isLatest = index === source.length - 1;
+    const firstValue = source[0];
+    const latestValue = source[source.length - 1];
+    const decreaseValue = isFirst ? latestValue : source[index - 1];
+    const increaseValue = isLatest ? firstValue : source[index + 1];
+    const decreaseDisabled = isFirst
+        ? !!(max !== undefined && latestValue > max)
+        : !!(min !== undefined && decreaseValue < min);
+    const increaseDisabled = isLatest
+        ? !!(min !== undefined && firstValue < min)
+        : !!(max !== undefined && increaseValue > max);
+    const showValue = (() => {
+        if (renderValue) {
+            return renderValue(value);
+        }
+        return pad(value);
+    })();
+    const label = getScreenReaderLabel?.(showValue);
+    const handleKeyDown = (event) => {
+        runKeyHandler(event, {
+            ArrowUp: () => {
+                if (increaseDisabled) {
+                    return;
+                }
+                onUpdate(increaseValue, 'arrowKey');
+            },
+            ArrowDown: () => {
+                if (decreaseDisabled) {
+                    return;
+                }
+                onUpdate(decreaseValue, 'arrowKey');
+            },
+        });
+        onKeyDown?.(event);
+    };
+    const cls = useTimePickerClasses();
+    return (jsxs("div", { tabIndex: 0, className: cls('number-picker', { focusVisible }), onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label, ref: handlePickerRef, ...focusVisibleHandlers, ...rest, children: [jsx(IconButton, { shape: 'squircle', variant: 'contained', background: false, color: 'secondary', size: "small", tabIndex: -1, disabled: increaseDisabled, onClick: () => {
+                    onUpdate(increaseValue, 'arrowButton');
+                }, "data-sui-number-picker-previous": true, "aria-label": "Arrow Up", children: jsx(Icon, { size: "medium", symbol: CaretUpMd }) }), jsx(TimeButton, { tabIndex: -1, onClick: onClick, "data-sui-number-picker-text": true, children: showValue }), jsx(IconButton, { shape: 'squircle', variant: 'contained', background: false, color: 'secondary', size: "small", tabIndex: -1, disabled: decreaseDisabled, onClick: () => {
+                    onUpdate(decreaseValue, 'arrowButton');
+                }, "data-sui-number-picker-next": true, "aria-label": "Arrow Down", children: jsx(Icon, { size: "medium", symbol: CaretDownMd }) })] }));
+});
+NumberPicker.displayName = 'SuiNumberPicker';
+
+const SelectionView = (props) => {
+    const { source, onConfirm, value, min: minProp, max: maxProp, isTwelveHourSystem, viewType, } = props;
+    const min = minProp !== undefined && isTwelveHourSystem
+        ? minProp % HALF_DAY_HOURS
+        : minProp;
+    const max = maxProp !== undefined && isTwelveHourSystem
+        ? maxProp % HALF_DAY_HOURS
+        : maxProp;
+    const showValue = parseNumberToString(value, isTwelveHourSystem);
+    const cls = useTimePickerClasses();
+    return (jsx("div", { className: cls(`${viewType}-selection-view`, 'picker-view'), children: source.map((v) => {
+            const disabled = !!((max !== undefined && v > max) ||
+                (min !== undefined && v < min));
+            const itemShowValue = parseNumberToString(v, isTwelveHourSystem);
+            const confirm = () => {
+                if (disabled)
+                    return;
+                onConfirm(v);
+            };
+            return (jsx(TimeButton, { disabled: disabled, onClick: confirm, selected: itemShowValue === showValue, "data-sui-time-button": itemShowValue, children: itemShowValue }, v));
+        }) }));
+};
+SelectionView.displayName = 'SuiSelectionView';
+
+const ToggleText = forwardRef(({ onChange: onUpdate, value, disabled, getScreenReaderLabel, ...rest }, ref) => {
+    const label = getScreenReaderLabel?.(value);
+    const nextValue = value === TIME_SYSTEM_TEXT.AM ? TIME_SYSTEM_TEXT.PM : TIME_SYSTEM_TEXT.AM;
+    const handleClick = useEventCallback((event) => {
+        if (disabled || !isClick(event))
+            return;
+        onUpdate(nextValue, 'arrowButton');
+    });
+    const handleToggleKeyDown = useEventCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        const togglePeriod = () => {
+            onUpdate(nextValue, 'arrowKey');
+        };
+        runKeyHandler(event, {
+            ArrowUp: togglePeriod,
+            ArrowDown: togglePeriod,
+        });
+    });
+    return (jsx(TimeButton, { onClick: handleClick, onKeyDown: handleToggleKeyDown, disabled: disabled, "aria-live": "assertive", "aria-label": label, ...rest, children: value }));
+});
+ToggleText.displayName = 'SuiToggleText';
+
+const PickerView = (props) => {
+    const { isTwelveHourSystem, selectionShowType, onSelectionShowTypeChange, screenReaderProps, defaultValue, onChange, range, afterDraftConfirm, } = props;
+    const [value, setValue] = useState(defaultValue);
+    const handleChange = (toValue, onlyInnerState) => {
+        const resultValue = {
+            hour: toValue.hour ?? value.hour,
+            minute: toValue.minute ?? value.minute,
+            period: toValue.period ?? value.period,
+        };
+        setValue(resultValue);
+        if (!onlyInnerState) {
+            onChange(resultValue);
+        }
+    };
+    // get boundary must use current show value
+    const boundary = useMemo(() => {
+        const originHour = value.hour +
+            (isTwelveHourSystem && value.period === TIME_SYSTEM_TEXT.PM ? 12 : 0);
+        return getNumberPickerBoundary(originHour, {
+            range,
+            isTwelveHourSystem,
+        });
+    }, [range, value, isTwelveHourSystem]);
+    // reset pickerValue if pickerValue is out of range
+    useLayoutEffect(() => {
+        const { hour, minute, period } = value;
+        if (hour > boundary.hour.max || minute > boundary.minute.max) {
+            handleChange({
+                hour: boundary.hour.max,
+                minute: boundary.minute.max,
+                period,
+            }, true);
+        }
+        else if (hour < boundary.hour.min || minute < boundary.minute.min) {
+            handleChange({
+                hour: boundary.hour.min,
+                minute: boundary.minute.min,
+                period,
+            }, true);
+        }
+        // ignore `handleChange`
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [boundary, value]);
+    const isHourView = selectionShowType === 'hour';
+    const { getHourPickerAriaLabel, getMinutePickerAriaLabel, getPeriodToggleAriaLabel, } = screenReaderProps;
+    const toggleTextDisabled = useMemo(() => {
+        return Boolean(range.min.hour &&
+            // * min is pm time
+            (range.min.hour >= HALF_DAY_HOURS ||
+                (range.max.hour &&
+                    // * min and max in same AM period
+                    range.min.hour < HALF_DAY_HOURS &&
+                    range.max.hour < HALF_DAY_HOURS)));
+    }, [range.max.hour, range.min.hour]);
+    const cls = useTimePickerClasses();
+    return selectionShowType === 'none' ? (jsxs("div", { className: cls('main-view', 'picker-view', {
+            'twelve-hour': isTwelveHourSystem,
+        }), onKeyDown: (event) => {
+            const confirm = () => {
+                onChange(value);
+                afterDraftConfirm();
+            };
+            runKeyHandler(event, {
+                Enter: confirm,
+                ' ': confirm,
+            });
+        }, children: [jsx(NumberPicker, { onClick: () => onSelectionShowTypeChange('hour'), value: value.hour, ...boundary.hour, onChange: (hour, reason) => {
+                    handleChange({ hour }, reason === 'arrowKey');
+                }, step: 1, source: isTwelveHourSystem
+                    ? twelveHourSystemSource
+                    : twentyFourHourSystemSource, renderValue: (hourValue) => {
+                    return parseNumberToString(hourValue, isTwelveHourSystem);
+                }, "data-sui-picker-hour": true, autoFocus: true, getScreenReaderLabel: getHourPickerAriaLabel }), jsx("div", { children: ":" }), jsx(NumberPicker, { ...boundary.minute, onChange: (minute, reason) => handleChange({ minute }, reason === 'arrowKey'), onClick: () => onSelectionShowTypeChange('minute'), value: value.minute, source: minuteSource, step: TIME_GAP, "data-sui-picker-minute": true, getScreenReaderLabel: getMinutePickerAriaLabel }), isTwelveHourSystem && (jsx(ToggleText, { disabled: toggleTextDisabled, onChange: (period, reason) => handleChange({ period }, reason === 'arrowKey'), value: value.period, getScreenReaderLabel: getPeriodToggleAriaLabel }))] })) : (jsx(SelectionView, { ...(isHourView ? boundary.hour : boundary.minute), viewType: selectionShowType, source: isHourView
+            ? isTwelveHourSystem
+                ? twelveHourSystemSource
+                : twentyFourHourSystemSource
+            : minuteSource, isTwelveHourSystem: isHourView && isTwelveHourSystem, value: isHourView ? value.hour : value.minute, onConfirm: (toValue) => {
+            handleChange(isHourView ? { hour: toValue } : { minute: toValue }, false);
+            onSelectionShowTypeChange('none');
+        }, "data-sui-picker-selection-view": selectionShowType }));
+};
+
+var TimePicker$1 = {"sui-time-picker-picker-root":"sui-time-picker-picker-root","sui-time-picker-time-button":"sui-time-picker-time-button","sui-focus-visible":"sui-focus-visible","sui-selected":"sui-selected","sui-disabled":"sui-disabled","sui-time-picker-number-picker":"sui-time-picker-number-picker","sui-time-picker-picker-view":"sui-time-picker-picker-view","sui-time-picker-main-view":"sui-time-picker-main-view","sui-time-picker-twelve-hour":"sui-time-picker-twelve-hour","sui-time-picker-minute-selection-view":"sui-time-picker-minute-selection-view","sui-time-picker-hour-selection-view":"sui-time-picker-hour-selection-view"};
+
+const TimePicker = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TimePicker' });
+    const { isTwelveHourSystem = false, value, onChange, disabled, min, max, onKeyDown, onClear, PopoverProps, classes, defaultPickerValue = null, clearBtn = true, dateMode = false, screenReaderProps = {
+        getHourPickerAriaLabel: (hour) => `Hour: ${hour}, use up and down arrow keys to change hour time by 1`,
+        getMinutePickerAriaLabel: (minute) => `Minute: ${minute}, use up and down arrow keys to change minutes time by 15 minutes`,
+        getPeriodToggleAriaLabel: (period) => `${period}, use up or down arrow keys to switch between AM or PM`,
+    }, className, ...rest } = props;
+    const cls = useClasses('time-picker', classes, className);
+    const actionRef = useRef(null);
+    const [selectionShowType, setSelectionType] = useState('none');
+    const pickerValue = value ?? defaultPickerValue;
+    const isDateMode = value instanceof Date || dateMode;
+    const textFieldTimestamp = getTimestamp(value);
+    const { hour: textFieldHour } = getHourAndMinute(textFieldTimestamp);
+    const textFieldPeriod = getPeriod(textFieldHour);
+    const formattedTime = textFieldTimestamp === null
+        ? ''
+        : getFormattedTime({
+            ...getHourAndMinute(textFieldTimestamp),
+            period: textFieldPeriod,
+        }, isTwelveHourSystem);
+    const pickerTimestamp = getTimestamp(pickerValue);
+    const { hour: originPickerHour, minute: originPickerMinute } = getHourAndMinute(pickerTimestamp);
+    const pickerPeriod = getPeriod(originPickerHour);
+    const pickerHour = isTwelveHourSystem
+        ? originPickerHour % HALF_DAY_HOURS
+        : originPickerHour;
+    const pickerMinute = originPickerMinute;
+    const range = useMemo(() => {
+        return getRangeBoundary({ min, max });
+    }, [max, min]);
+    const handleChange = useEventCallback((toValue) => {
+        const update = (toValue) => {
+            onChange?.(toValue);
+        };
+        if (isDateMode) {
+            update(toValue);
+        }
+        else {
+            // * when time is zero emit null
+            update(toValue ? getTimestamp(toValue) : null);
+        }
+    });
+    const getInitialDate = useEventCallback(() => {
+        const date = value !== null ? new Date(value) : new Date();
+        date.setHours(originPickerHour, originPickerMinute, 0, 0);
+        return date;
+    });
+    const updateTime = (option) => {
+        const { hour = originPickerHour, minute = originPickerMinute, period = pickerPeriod, } = option;
+        const recoupHour = isTwelveHourSystem && pickerPeriod === TIME_SYSTEM_TEXT.PM
+            ? HALF_DAY_HOURS
+            : 0;
+        const time = getInitialDate();
+        time.setMinutes(minute);
+        time.setHours(hour + recoupHour);
+        if (isTwelveHourSystem) {
+            const currHour = time.getHours();
+            if (period === TIME_SYSTEM_TEXT.PM) {
+                if (currHour < HALF_DAY_HOURS) {
+                    time.setHours(currHour + HALF_DAY_HOURS);
+                }
+            }
+            else if (currHour >= HALF_DAY_HOURS) {
+                time.setHours(currHour - HALF_DAY_HOURS);
+            }
+        }
+        const toTimestamp = getTimestamp(time);
+        if (range.max.date && toTimestamp > range.max.timestamp) {
+            time.setHours(range.max.hour);
+            time.setMinutes(range.max.minute);
+        }
+        else if (range.min.date && toTimestamp < range.min.timestamp) {
+            time.setHours(range.min.hour);
+            time.setMinutes(range.min.minute);
+        }
+        handleChange(time);
+    };
+    // reset value if value is out of range
+    useLayoutEffect(() => {
+        if (textFieldTimestamp === null)
+            return;
+        const time = getInitialDate();
+        if (range.max.date && textFieldTimestamp > range.max.timestamp) {
+            time.setHours(range.max.hour);
+            time.setMinutes(range.max.minute);
+            handleChange(time);
+        }
+        else if (range.min.date && textFieldTimestamp < range.min.timestamp) {
+            time.setHours(range.min.hour);
+            time.setMinutes(range.min.minute);
+            handleChange(time);
+        }
+    }, [range, handleChange, getInitialDate, textFieldTimestamp]);
+    return (jsx(TimePickerClassesContext.Provider, { value: cls, children: jsx(PickerTextField, { ref: ref, variant: "standard", className: cls('root'), action: actionRef, onClear: (e) => {
+                onClear?.(e);
+                handleChange(null);
+            }, value: formattedTime, disabled: disabled, PopoverProps: combineProps({
+                onExitComplete: () => {
+                    setSelectionType('none');
+                },
+            }, PopoverProps), endIconSymbol: RecentMd, clearBtn: clearBtn, ...rest, children: jsx(PickerView, { isTwelveHourSystem: isTwelveHourSystem, onChange: updateTime, afterDraftConfirm: () => {
+                    actionRef.current?.close();
+                }, defaultValue: {
+                    hour: pickerHour,
+                    minute: pickerMinute,
+                    period: pickerPeriod,
+                }, onSelectionShowTypeChange: setSelectionType, range: range, screenReaderProps: screenReaderProps, selectionShowType: selectionShowType }) }) }));
+});
+TimePicker.displayName = 'SuiTimePicker';
+
+export { HALF_DAY_HOURS, HOUR_MINUTES, K_ENTER, K_SPACE, NumberPicker, ONE_HOUR, PickerView, SelectionView, TIME_GAP, TIME_SYSTEM_TEXT, TimeBoundary, TimeButton, TimePicker, TimePickerClassesContext, ToggleText, getFormattedTime, getHourAndMinute, getNumberPickerBoundary, getPeriod, getRangeBoundary, getRecoupHour, getTimestamp, getTimestampFromDate, getTimestampFromHourAndMin, isClick, lastMinute, minuteSource, pad, parseNumber, parseNumberToString, TimePicker$1 as timePickerStyle, twelveHourSystemSource, twentyFourHourSystemSource, useTimePickerClasses };

package/Tooltip.js

@@ -0,0 +1,23 @@
+export { T as Tooltip, a as TooltipTrigger, b as TooltipView } from './chunks/Tooltip.js';
+export { u as useTooltipForceHide } from './chunks/useTooltipForceHide.js';
+export { w as withTooltip } from './chunks/withTooltip.js';
+import 'react/jsx-runtime';
+import '@ringcentral/spring-theme';
+import 'framer-motion';
+import 'react';
+import '@ringcentral/spring-base';
+import 'clsx';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var TooltipView = {"sui-tooltip-view-root":"sui-tooltip-view-root","sui-tooltip-view-disable-interactions":"sui-tooltip-view-disable-interactions","sui-tooltip-trigger-wrapper":"sui-tooltip-trigger-wrapper","sui-tooltip-view-paper":"sui-tooltip-view-paper","sui-tooltip-view-paper-content":"sui-tooltip-view-paper-content","sui-tooltip-view-paper-content-medium":"sui-tooltip-view-paper-content-medium","sui-tooltip-view-icon":"sui-tooltip-view-icon","sui-tooltip-view-content":"sui-tooltip-view-content","sui-tooltip-view-content-medium":"sui-tooltip-view-content-medium","sui-tooltip-view-neutral":"sui-tooltip-view-neutral","sui-tooltip-view-success":"sui-tooltip-view-success","sui-tooltip-view-danger":"sui-tooltip-view-danger","sui-tooltip-view-inverted":"sui-tooltip-view-inverted","sui-tooltip-view-force-hide":"sui-tooltip-view-force-hide"};
+
+export { TooltipView as tooltipViewStyle };

package/Tray.js

@@ -0,0 +1,13 @@
+export { T as Tray, a as TrayContext, b as TrayPanel, c as useTray, u as useTrayContext, d as useTrayNavigate, e as useTrayPanel } from './chunks/useTrayNavigate.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+
+var Tray = {"sui-tray-root":"sui-tray-root","sui-tray-panel-root":"sui-tray-panel-root","sui-tray-panel-activated":"sui-tray-panel-activated"};
+
+export { Tray as trayStyle };