@ringcentral/spring-ui 1.11.2 → 1.13.0

package/TimePicker.js

@@ -1,79 +1,92 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useRef, useLayoutEffect, useState, useMemo } from 'react';
-import { useFocusVisible, useForkRef, combineProps, runKeyHandler, useEventCallback } 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, useClassesWithMode } 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/useHelperTextId.js';
-import './chunks/TextField.js';
-import './chunks/ShowHideEye.js';
-import './chunks/useMotionSafeTransition.js';
-import './chunks/VisuallyHidden.js';
-
-const TimePickerClassesContext = createContext(() => '');
-const useTimePickerClasses = () => useContext(TimePickerClassesContext);
-
-const TimeButton = forwardRef((props, ref) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { combineProps, runKeyHandler, useEventCallback, useFocusVisible, useForkRef } from "@ringcentral/spring-base";
+import { CaretDownMd, CaretUpMd, RecentMd } from "@ringcentral/spring-icon";
+import clsx from "clsx";
+import { useClassesWithMode, useThemeProps } from "@ringcentral/spring-theme";
+import { Icon as Icon_Icon } from "./chunks/8307.js";
+import { IconButton as IconButton_IconButton } from "./IconButton.js";
+import { PickerTextField as PickerTextField_PickerTextField } from "./PickerTextField.js";
+
+
+
+
+
+
+
+
+
+
+
+const TimePickerClassesContext = createContext(()=>'');
+const useTimePickerClasses = ()=>useContext(TimePickerClassesContext);
+
+
+
+
+
+
+
+const TimeButton = /*#__PURE__*/ 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', {
+    return /*#__PURE__*/ jsx("button", {
+        ref: handleRef,
+        className: clsx(className, cls('time-button', {
             selected,
             disabled,
-            focusVisible,
-        })), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+            focusVisible
+        })),
+        ...rest,
+        ...combineProps({
+            onBlur,
+            onFocus
+        }, focusVisibleHandlers),
+        type: "button",
+        children: children
+    });
 });
 TimeButton.displayName = 'SuiTimeButton';
 
+
 function isClick(event) {
     return event.type === 'click';
 }
 
-var TIME_SYSTEM_TEXT;
-(function (TIME_SYSTEM_TEXT) {
+var constant_TIME_SYSTEM_TEXT = /*#__PURE__*/ function(TIME_SYSTEM_TEXT) {
     TIME_SYSTEM_TEXT["PM"] = "PM";
     TIME_SYSTEM_TEXT["AM"] = "AM";
-})(TIME_SYSTEM_TEXT || (TIME_SYSTEM_TEXT = {}));
+    return TIME_SYSTEM_TEXT;
+}(constant_TIME_SYSTEM_TEXT || {});
 const K_ENTER = 'Enter';
 const K_SPACE = ' ';
 
-const parseNumber = (value, isTwelveHourSystem) => {
+
+
+const parseNumber = (value, isTwelveHourSystem)=>{
     const count = isTwelveHourSystem ? value % 12 : value;
-    if (isTwelveHourSystem && count === 0)
-        return 12;
+    if (isTwelveHourSystem && count === 0) return 12;
     return count;
 };
-const parseNumberToString = (value, isTwelveHourSystem) => {
+const parseNumberToString = (value, isTwelveHourSystem)=>{
     const count = parseNumber(value, isTwelveHourSystem);
     return pad(count);
 };
-const pad = (num, size = 2) => {
+/** add miss zero */ const pad = (num, size = 2)=>{
     let s = `${num}`;
-    while (s.length < size) {
+    while(s.length < size){
         s = `0${s}`;
     }
     return s;
 };
-const getFormattedTime = ({ hour, minute, period }, isTwelveHourSystem) => {
+/**
+ * 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}` : '';
@@ -84,12 +97,11 @@ 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 buildConsecutiveNumberToArray = (min, max)=>{
     const array = [];
-    if (min > max)
-        return array;
+    if (min > max) return array;
     let count = min;
-    while (count <= max) {
+    while(count <= max){
         array.push(count);
         count++;
     }
@@ -97,69 +109,89 @@ const buildConsecutiveNumberToArray = (min, max) => {
 };
 const twelveHourSystemSource = buildConsecutiveNumberToArray(0, 11);
 const twentyFourHourSystemSource = buildConsecutiveNumberToArray(0, 23);
-const minuteSource = [0, 15, 30, 45];
+const minuteSource = [
+    0,
+    15,
+    30,
+    45
+];
 const lastMinute = 45;
-const getTimestampFromDate = (date) => {
+/**
+ * hour and minute timestamp
+ */ const getTimestampFromDate = (date)=>{
     return date.getHours() * ONE_HOUR + date.getMinutes() * ONE_MINUTE;
 };
-const getHourAndMinute = (times) => {
+/**
+ * hour and minute number
+ */ const getHourAndMinute = (times)=>{
     if (times === null) {
         return {
             hour: 0,
-            minute: 0,
+            minute: 0
         };
     }
     const minute = times % ONE_HOUR;
     const hour = (times - minute) / ONE_HOUR;
     return {
         hour,
-        minute: Math.floor(minute / ONE_MINUTE),
+        minute: Math.floor(minute / ONE_MINUTE)
     };
 };
-function getTimestamp(nowTime) {
+/**
+ * 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;
 }
-const getTimestampFromHourAndMin = (option) => {
+/**
+ * hour and min object to timestamp
+ */ const getTimestampFromHourAndMin = (option)=>{
     return option.hour * ONE_HOUR + option.minute * ONE_MINUTE;
 };
-function getPeriod(currHour) {
-    return currHour >= HALF_DAY_HOURS ? TIME_SYSTEM_TEXT.PM : TIME_SYSTEM_TEXT.AM;
+/**
+ * get period, `PM` or `AM`
+ */ function getPeriod(currHour) {
+    return currHour >= HALF_DAY_HOURS ? constant_TIME_SYSTEM_TEXT.PM : constant_TIME_SYSTEM_TEXT.AM;
 }
-const getRecoupHour = (currHour, period) => {
-    switch (period) {
-        case TIME_SYSTEM_TEXT.PM:
+const getRecoupHour = (currHour, period)=>{
+    switch(period){
+        case constant_TIME_SYSTEM_TEXT.PM:
             if (currHour < HALF_DAY_HOURS) {
                 return HALF_DAY_HOURS;
             }
             break;
-        case TIME_SYSTEM_TEXT.AM:
+        case constant_TIME_SYSTEM_TEXT.AM:
+            // FIXME
+            // oxlint-disable-next-line sonarjs/no-collapsible-if
             if (currHour < HALF_DAY_HOURS) {
                 if (currHour >= HALF_DAY_HOURS) {
                     return -HALF_DAY_HOURS;
                 }
             }
             break;
+        default:
+            break;
     }
     return 0;
 };
 
-const getDateBeginning = () => {
+
+
+const getDateBeginning = ()=>{
     const date = new Date();
     date.setHours(0, 0, 0, 0);
     return date;
 };
-class TimeBoundary {
-    _hour = undefined;
-    value;
-    timeGap;
+/**
+ * get target time boundary, what time is nearest time with that timeGap
+ */ class TimeBoundary {
     get hour() {
         return this._hour;
     }
-    _minute = undefined;
     get minute() {
         return this._minute;
     }
-    _date = undefined;
     get date() {
         return this._date;
     }
@@ -169,15 +201,17 @@ class TimeBoundary {
         }
         this._date = value;
     }
-    timestamp = 0;
-    constructor(value, direction, timeGap) {
+    constructor(value, direction, timeGap){
+        this._hour = undefined;
+        this._minute = undefined;
+        this._date = undefined;
+        this.timestamp = 0;
         this.value = value;
         this.timeGap = timeGap;
         if (value) {
             if (direction === 'after') {
                 this.getAfterNearTime();
-            }
-            else {
+            } else {
                 this.getBeforeNearTime();
             }
             this.date = new Date(getDateBeginning().setHours(this.hour, this.minute, 0, 0));
@@ -188,12 +222,13 @@ class TimeBoundary {
         let hour = time.getHours();
         let minute = time.getMinutes();
         const partCount = Math.ceil(minute / this.timeGap);
-        if (partCount >= HOUR_MINUTES / this.timeGap) {
+        // when time is the latest or more, add one hour
+        if (partCount >= (/* inlined export .HOUR_MINUTES */60) / this.timeGap) {
             hour++;
             minute = 0;
         }
         this._hour = hour;
-        this._minute = (partCount * this.timeGap) % HOUR_MINUTES;
+        this._minute = partCount * this.timeGap % (/* inlined export .HOUR_MINUTES */60);
     }
     getBeforeNearTime() {
         const time = this.getDateTime();
@@ -210,7 +245,7 @@ class TimeBoundary {
         return date;
     }
 }
-const getRangeBoundary = ({ min, max, gap = TIME_GAP, }) => {
+const getRangeBoundary = ({ min, max, gap = (/* inlined export .TIME_GAP */15) })=>{
     if (min !== undefined && max !== undefined) {
         const minTimestamp = getTimestamp(min);
         const maxTimestamp = getTimestamp(max);
@@ -220,59 +255,76 @@ const getRangeBoundary = ({ min, max, gap = TIME_GAP, }) => {
     }
     return {
         min: new TimeBoundary(min, 'after', gap),
-        max: new TimeBoundary(max, 'before', gap),
+        max: new TimeBoundary(max, 'before', gap)
     };
 };
 
-function getNumberPickerBoundary(currentHour, { range, isTwelveHourSystem }) {
-    const currentIsPM = currentHour >= HALF_DAY_HOURS;
+
+/**
+ * get range from current hour
+ */ function getNumberPickerBoundary(currentHour, { range, isTwelveHourSystem }) {
+    const currentIsPM = currentHour >= (/* inlined export .HALF_DAY_HOURS */12);
     let maxHour = range.max.hour ?? 23;
-    let maxMinute = range.max.minute ?? lastMinute;
+    let maxMinute = range.max.minute ?? (/* inlined export .lastMinute */45);
     let minHour = range.min.hour ?? 0;
     let minMinute = range.min.minute ?? 0;
     if (isTwelveHourSystem) {
         if (currentIsPM) {
-            if (minHour < HALF_DAY_HOURS) {
+            if (minHour < (/* inlined export .HALF_DAY_HOURS */12)) {
                 minHour = 0;
                 minMinute = 0;
             }
-        }
-        else if (maxHour >= HALF_DAY_HOURS) {
+        } else if (maxHour >= (/* inlined export .HALF_DAY_HOURS */12)) {
             maxHour = 11;
-            maxMinute = lastMinute;
+            maxMinute = (/* inlined export .lastMinute */45);
         }
     }
-    if (maxMinute !== lastMinute && currentHour < maxHour) {
-        maxMinute = lastMinute;
+    if (maxMinute !== (/* inlined export .lastMinute */45) && currentHour < maxHour) {
+        maxMinute = (/* inlined export .lastMinute */45);
     }
     if (minMinute !== 0 && currentHour > minHour) {
         minMinute = 0;
     }
     if (isTwelveHourSystem) {
-        maxHour = maxHour % HALF_DAY_HOURS;
-        minHour = minHour % HALF_DAY_HOURS;
+        maxHour = maxHour % (/* inlined export .HALF_DAY_HOURS */12);
+        minHour = minHour % (/* inlined export .HALF_DAY_HOURS */12);
     }
     return {
         hour: {
             min: minHour,
-            max: maxHour,
+            max: maxHour
         },
         minute: {
             min: minMinute,
-            max: maxMinute,
-        },
+            max: maxMinute
+        }
     };
 }
 
-const NumberPicker = forwardRef((props, ref) => {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const NumberPicker = /*#__PURE__*/ 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(() => {
+    useLayoutEffect(()=>{
         if (autoFocus) {
             pickerRef.current?.focus();
         }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const index = Math.floor(value / step);
     const isFirst = index === 0;
@@ -281,179 +333,347 @@ const NumberPicker = forwardRef((props, ref) => {
     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 = (() => {
+    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) => {
+    const handleKeyDown = (event)=>{
         runKeyHandler(event, {
-            ArrowUp: () => {
+            ArrowUp: ()=>{
                 if (increaseDisabled) {
                     return;
                 }
                 onUpdate(increaseValue, 'arrowKey');
             },
-            ArrowDown: () => {
+            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: () => {
+    return /*#__PURE__*/ jsxs("div", {
+        tabIndex: 0,
+        className: cls('number-picker', {
+            focusVisible
+        }),
+        onKeyDown: handleKeyDown,
+        "aria-live": "assertive",
+        "aria-label": label,
+        ref: handlePickerRef,
+        ...focusVisibleHandlers,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(IconButton_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: () => {
+                },
+                "data-sui-number-picker-previous": true,
+                "aria-label": "Arrow Up",
+                children: /*#__PURE__*/ jsx(Icon_Icon, {
+                    size: "medium",
+                    symbol: CaretUpMd
+                })
+            }),
+            /*#__PURE__*/ jsx(TimeButton, {
+                tabIndex: -1,
+                onClick: onClick,
+                "data-sui-number-picker-text": true,
+                children: showValue
+            }),
+            /*#__PURE__*/ jsx(IconButton_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 }) })] }));
+                },
+                "data-sui-number-picker-next": true,
+                "aria-label": "Arrow Down",
+                children: /*#__PURE__*/ jsx(Icon_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 SelectionView = (props)=>{
+    const { source, onConfirm, value, min: minProp, max: maxProp, isTwelveHourSystem, viewType } = props;
+    const min = minProp !== undefined && isTwelveHourSystem ? minProp % (/* inlined export .HALF_DAY_HOURS */12) : minProp;
+    const max = maxProp !== undefined && isTwelveHourSystem ? maxProp % (/* inlined export .HALF_DAY_HOURS */12) : 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));
+    return /*#__PURE__*/ 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;
+            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));
-        }) }));
+            return /*#__PURE__*/ 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 ToggleText = /*#__PURE__*/ 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;
+    const nextValue = value === constant_TIME_SYSTEM_TEXT.AM ? constant_TIME_SYSTEM_TEXT.PM : constant_TIME_SYSTEM_TEXT.AM;
+    const handleClick = useEventCallback((event)=>{
+        if (disabled || !isClick(event)) return;
         onUpdate(nextValue, 'arrowButton');
     });
-    const handleToggleKeyDown = useEventCallback((event) => {
+    const handleToggleKeyDown = useEventCallback((event)=>{
         if (disabled) {
             return;
         }
-        const togglePeriod = () => {
+        const togglePeriod = ()=>{
             onUpdate(nextValue, 'arrowKey');
         };
         runKeyHandler(event, {
             ArrowUp: togglePeriod,
-            ArrowDown: togglePeriod,
+            ArrowDown: togglePeriod
         });
     });
-    return (jsx(TimeButton, { onClick: handleClick, onKeyDown: handleToggleKeyDown, disabled: disabled, "aria-live": "assertive", "aria-label": label, ...rest, children: value }));
+    return /*#__PURE__*/ 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 PickerView = (props)=>{
+    const { isTwelveHourSystem, selectionShowType, onSelectionShowTypeChange, screenReaderProps, defaultValue, onChange, range, afterDraftConfirm } = props;
     const [value, setValue] = useState(defaultValue);
-    const handleChange = (toValue, onlyInnerState) => {
+    const handleChange = (toValue, onlyInnerState)=>{
         const resultValue = {
             hour: toValue.hour ?? value.hour,
             minute: toValue.minute ?? value.minute,
-            period: toValue.period ?? value.period,
+            period: toValue.period ?? value.period
         };
         setValue(resultValue);
         if (!onlyInnerState) {
             onChange(resultValue);
         }
     };
-    const boundary = useMemo(() => {
-        const originHour = value.hour +
-            (isTwelveHourSystem && value.period === TIME_SYSTEM_TEXT.PM ? 12 : 0);
+    // get boundary must use current show value
+    const boundary = useMemo(()=>{
+        const originHour = value.hour + (isTwelveHourSystem && value.period === constant_TIME_SYSTEM_TEXT.PM ? 12 : 0);
         return getNumberPickerBoundary(originHour, {
             range,
-            isTwelveHourSystem,
+            isTwelveHourSystem
         });
-    }, [range, value, isTwelveHourSystem]);
-    useLayoutEffect(() => {
+    }, [
+        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,
+                period
             }, true);
-        }
-        else if (hour < boundary.hour.min || minute < boundary.minute.min) {
+        } else if (hour < boundary.hour.min || minute < boundary.minute.min) {
             handleChange({
                 hour: boundary.hour.min,
                 minute: boundary.minute.min,
-                period,
+                period
             }, true);
         }
-    }, [boundary, value]);
+    // ignore `handleChange`
+    // oxlint-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 &&
-            (range.min.hour >= HALF_DAY_HOURS ||
-                (range.max.hour &&
-                    range.min.hour < HALF_DAY_HOURS &&
-                    range.max.hour < HALF_DAY_HOURS)));
-    }, [range.max.hour, range.min.hour]);
+    const { getHourPickerAriaLabel, getMinutePickerAriaLabel, getPeriodToggleAriaLabel } = screenReaderProps;
+    const toggleTextDisabled = useMemo(()=>{
+        return Boolean(range.min.hour && // * min is pm time
+        (range.min.hour >= (/* inlined export .HALF_DAY_HOURS */12) || range.max.hour && // * min and max in same AM period
+        range.min.hour < (/* inlined export .HALF_DAY_HOURS */12) && range.max.hour < (/* inlined export .HALF_DAY_HOURS */12)));
+    }, [
+        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 = () => {
+    return selectionShowType === 'none' ? /*#__PURE__*/ jsxs("div", {
+        className: cls('main-view', 'picker-view', {
+            'twelve-hour': isTwelveHourSystem
+        }),
+        onKeyDown: (event)=>{
+            const confirm = ()=>{
                 onChange(value);
                 afterDraftConfirm();
             };
             runKeyHandler(event, {
                 Enter: confirm,
-                ' ': 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) => {
+        },
+        children: [
+            /*#__PURE__*/ 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);
+                },
+                "data-sui-picker-hour": true,
+                autoFocus: true,
+                getScreenReaderLabel: getHourPickerAriaLabel
+            }),
+            /*#__PURE__*/ jsx("div", {
+                children: ":"
+            }),
+            /*#__PURE__*/ jsx(NumberPicker, {
+                ...boundary.minute,
+                onChange: (minute, reason)=>handleChange({
+                        minute
+                    }, reason === 'arrowKey'),
+                onClick: ()=>onSelectionShowTypeChange('minute'),
+                value: value.minute,
+                source: minuteSource,
+                step: (/* inlined export .TIME_GAP */15),
+                "data-sui-picker-minute": true,
+                getScreenReaderLabel: getMinutePickerAriaLabel
+            }),
+            isTwelveHourSystem && /*#__PURE__*/ jsx(ToggleText, {
+                disabled: toggleTextDisabled,
+                onChange: (period, reason)=>handleChange({
+                        period
+                    }, reason === 'arrowKey'),
+                value: value.period,
+                getScreenReaderLabel: getPeriodToggleAriaLabel
+            })
+        ]
+    }) : /*#__PURE__*/ 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 }));
+        },
+        "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","sui-compact":"sui-compact"};
 
-const TimePicker = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TimePicker' });
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var TimePicker = ({"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","sui-compact":"sui-compact"});
+
+/* oxlint-disable @typescript-eslint/no-non-null-assertion */ 
+
+
+
+
+
+
+
+
+
+const TimePicker_TimePicker = /*#__PURE__*/ 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`,
+        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 = useClassesWithMode('time-picker', classes, className, ['main-view', 'hour-selection-view', 'minute-selection-view']);
+    const cls = useClassesWithMode('time-picker', classes, className, [
+        'main-view',
+        'hour-selection-view',
+        'minute-selection-view'
+    ]);
     const actionRef = useRef(null);
     const [selectionShowType, setSelectionType] = useState('none');
     const pickerValue = value ?? defaultPickerValue;
@@ -461,101 +681,141 @@ const TimePicker = forwardRef((inProps, ref) => {
     const textFieldTimestamp = getTimestamp(value);
     const { hour: textFieldHour } = getHourAndMinute(textFieldTimestamp);
     const textFieldPeriod = getPeriod(textFieldHour);
-    const formattedTime = textFieldTimestamp === null
-        ? ''
-        : getFormattedTime({
-            ...getHourAndMinute(textFieldTimestamp),
-            period: textFieldPeriod,
-        }, isTwelveHourSystem);
+    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 pickerHour = isTwelveHourSystem ? originPickerHour % (/* inlined export .HALF_DAY_HOURS */12) : originPickerHour;
     const pickerMinute = originPickerMinute;
-    const range = useMemo(() => {
-        return getRangeBoundary({ min, max });
-    }, [max, min]);
-    const handleChange = useEventCallback((toValue) => {
-        const update = (toValue) => {
+    const range = useMemo(()=>{
+        return getRangeBoundary({
+            min,
+            max
+        });
+    }, [
+        max,
+        min
+    ]);
+    const handleChange = useEventCallback((toValue)=>{
+        const update = (toValue)=>{
             onChange?.(toValue);
         };
         if (isDateMode) {
             update(toValue);
-        }
-        else {
+        } else {
+            // * when time is zero emit null
             update(toValue ? getTimestamp(toValue) : null);
         }
     });
-    const getInitialDate = useEventCallback(() => {
+    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 updateTime = (option)=>{
+        const { hour = originPickerHour, minute = originPickerMinute, period = pickerPeriod } = option;
+        const recoupHour = isTwelveHourSystem && pickerPeriod === constant_TIME_SYSTEM_TEXT.PM ? (/* inlined export .HALF_DAY_HOURS */12) : 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);
+            if (period === constant_TIME_SYSTEM_TEXT.PM) {
+                if (currHour < (/* inlined export .HALF_DAY_HOURS */12)) {
+                    time.setHours(currHour + (/* inlined export .HALF_DAY_HOURS */12));
                 }
-            }
-            else if (currHour >= HALF_DAY_HOURS) {
-                time.setHours(currHour - HALF_DAY_HOURS);
+            } else if (currHour >= (/* inlined export .HALF_DAY_HOURS */12)) {
+                time.setHours(currHour - (/* inlined export .HALF_DAY_HOURS */12));
             }
         }
         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) {
+        } else if (range.min.date && toTimestamp < range.min.timestamp) {
             time.setHours(range.min.hour);
             time.setMinutes(range.min.minute);
         }
         handleChange(time);
     };
-    useLayoutEffect(() => {
-        if (textFieldTimestamp === null)
-            return;
+    // 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) {
+        } 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) => {
+    }, [
+        range,
+        handleChange,
+        getInitialDate,
+        textFieldTimestamp
+    ]);
+    return /*#__PURE__*/ jsx(TimePickerClassesContext.Provider, {
+        value: cls,
+        children: /*#__PURE__*/ jsx(PickerTextField_PickerTextField, {
+            ref: ref,
+            variant: "standard",
+            className: cls('root'),
+            action: actionRef,
+            onClear: (e)=>{
                 onClear?.(e);
                 handleChange(null);
-            }, value: formattedTime, disabled: disabled, PopoverProps: combineProps({
-                onExitComplete: () => {
+            },
+            value: formattedTime,
+            disabled: disabled,
+            PopoverProps: combineProps({
+                onExitComplete: ()=>{
                     setSelectionType('none');
-                },
-                PopperProps: {
-                    offset: 4,
-                },
-            }, PopoverProps), endIconSymbol: RecentMd, clearBtn: clearBtn, ...rest, children: jsx(PickerView, { isTwelveHourSystem: isTwelveHourSystem, onChange: updateTime, afterDraftConfirm: () => {
+                }
+            }, PopoverProps),
+            endIconSymbol: RecentMd,
+            clearBtn: clearBtn,
+            ...rest,
+            children: /*#__PURE__*/ jsx(PickerView, {
+                isTwelveHourSystem: isTwelveHourSystem,
+                onChange: updateTime,
+                afterDraftConfirm: ()=>{
                     actionRef.current?.close();
-                }, defaultValue: {
+                },
+                defaultValue: {
                     hour: pickerHour,
                     minute: pickerMinute,
-                    period: pickerPeriod,
-                }, onSelectionShowTypeChange: setSelectionType, range: range, screenReaderProps: screenReaderProps, selectionShowType: selectionShowType }) }) }));
+                    period: pickerPeriod
+                },
+                onSelectionShowTypeChange: setSelectionType,
+                range: range,
+                screenReaderProps: screenReaderProps,
+                selectionShowType: selectionShowType
+            })
+        })
+    });
 });
-TimePicker.displayName = 'SuiTimePicker';
+TimePicker_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 };
+export { HALF_DAY_HOURS, HOUR_MINUTES, K_ENTER, K_SPACE, NumberPicker, ONE_HOUR, PickerView, SelectionView, TIME_GAP, TimeBoundary, TimeButton, TimePicker as timePickerStyle, TimePickerClassesContext, TimePicker_TimePicker as TimePicker, ToggleText, constant_TIME_SYSTEM_TEXT as TIME_SYSTEM_TEXT, getFormattedTime, getHourAndMinute, getNumberPickerBoundary, getPeriod, getRangeBoundary, getRecoupHour, getTimestamp, getTimestampFromDate, getTimestampFromHourAndMin, isClick, lastMinute, minuteSource, pad, parseNumber, parseNumberToString, twelveHourSystemSource, twentyFourHourSystemSource, useTimePickerClasses };