@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/TimePicker/TimePicker.js

@@ -1,263 +1,494 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import {
+  jsx as _jsx,
+  jsxs as _jsxs,
+  Fragment as _Fragment,
+} from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
 const isSameHour = (date1, date2, meridiem) => {
-    const adjustedHours = meridiem
-        ? formatHourFrom12(date1.getHours(), meridiem)
-        : date1.getHours();
-    if (!!meridiem) {
-        return !!date2 && adjustedHours % 12 === date2.getHours() % 12;
-    }
-    return !!date2 && adjustedHours === date2.getHours();
+  const adjustedHours = meridiem
+    ? formatHourFrom12(date1.getHours(), meridiem)
+    : date1.getHours();
+  if (!!meridiem) {
+    return !!date2 && adjustedHours % 12 === date2.getHours() % 12;
+  }
+  return !!date2 && adjustedHours === date2.getHours();
 };
 const isSameMinute = (date1, date2) => {
-    return !!date2 && date1.getMinutes() === date2.getMinutes();
+  return !!date2 && date1.getMinutes() === date2.getMinutes();
 };
 const isSameSecond = (date1, date2) => {
-    return !!date2 && date1.getSeconds() === date2.getSeconds();
+  return !!date2 && date1.getSeconds() === date2.getSeconds();
 };
 const isSameTime = (date1, date2, precision, meridiem) => {
-    let isSameTime = true;
-    switch (precision) {
-        case 'seconds':
-            isSameTime = isSameSecond(date1, date2);
-            if (!isSameTime) {
-                break;
-            }
-        case 'minutes':
-            isSameTime = isSameMinute(date1, date2);
-            if (!isSameTime) {
-                break;
-            }
-        case 'hours':
-            isSameTime = isSameHour(date1, date2, meridiem);
-    }
-    return isSameTime;
+  let isSameTime = true;
+  switch (precision) {
+    case 'seconds':
+      isSameTime = isSameSecond(date1, date2);
+      if (!isSameTime) {
+        break;
+      }
+    case 'minutes':
+      isSameTime = isSameMinute(date1, date2);
+      if (!isSameTime) {
+        break;
+      }
+    case 'hours':
+      isSameTime = isSameHour(date1, date2, meridiem);
+  }
+  return isSameTime;
 };
 const isSameMeridiem = (meridiem, date) => {
-    return (!!date && (meridiem === 'AM' ? date.getHours() < 12 : date.getHours() >= 12));
+  return (
+    !!date && (meridiem === 'AM' ? date.getHours() < 12 : date.getHours() >= 12)
+  );
 };
 const formatHourFrom12 = (hour, meridiem) => {
-    const adjustedHour = hour % 12;
-    return meridiem === 'PM' ? adjustedHour + 12 : adjustedHour;
+  const adjustedHour = hour % 12;
+  return meridiem === 'PM' ? adjustedHour + 12 : adjustedHour;
 };
 const setHours = (hour, date) => {
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hour, date.getMinutes(), date.getSeconds());
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    hour,
+    date.getMinutes(),
+    date.getSeconds(),
+  );
 };
 const defaultCombinedRenderer = (date, precision) => {
-    let dateString = '';
-    switch (precision) {
-        case 'seconds':
-            dateString =
-                ':' +
-                    date
-                        .getSeconds()
-                        .toLocaleString(undefined, { minimumIntegerDigits: 2 });
-        case 'minutes':
-            dateString =
-                ':' +
-                    date
-                        .getMinutes()
-                        .toLocaleString(undefined, { minimumIntegerDigits: 2 }) +
-                    dateString;
-        case 'hours':
-            dateString =
-                date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }) +
-                    dateString;
-    }
-    return dateString;
+  let dateString = '';
+  switch (precision) {
+    case 'seconds':
+      dateString =
+        ':' +
+        date.getSeconds().toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+        });
+    case 'minutes':
+      dateString =
+        ':' +
+        date.getMinutes().toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+        }) +
+        dateString;
+    case 'hours':
+      dateString =
+        date.getHours().toLocaleString(undefined, {
+          minimumIntegerDigits: 2,
+        }) + dateString;
+  }
+  return dateString;
 };
-/**
- * Time picker component
- * @example
- * <TimePicker date={new Date()} onChange={(e) => console.log('New time value: ' + e)} />
- */
 export const TimePicker = React.forwardRef((props, forwardedRef) => {
-    const { date, onChange, use12Hours = false, precision = 'minutes', hourStep = 1, minuteStep = 1, secondStep = 1, setFocusHour = false, hourRenderer = (date) => date.getHours().toLocaleString(undefined, { minimumIntegerDigits: 2 }), minuteRenderer = (date) => date.getMinutes().toLocaleString(undefined, { minimumIntegerDigits: 2 }), secondRenderer = (date) => date.getSeconds().toLocaleString(undefined, { minimumIntegerDigits: 2 }), meridiemRenderer = (meridiem) => meridiem, useCombinedRenderer = false, combinedRenderer = defaultCombinedRenderer, className, ...rest } = props;
-    const [selectedTime, setSelectedTime] = React.useState(date);
-    const [focusedTime, setFocusedTime] = React.useState(selectedTime ?? new Date());
-    const [meridiem, setMeridiem] = React.useState(use12Hours ? (focusedTime?.getHours() > 11 ? 'PM' : 'AM') : undefined);
-    React.useEffect(() => {
-        setFocusedTime(date ?? new Date());
-        setSelectedTime(date);
-    }, [date]);
-    const onHourClick = (date) => {
-        const adjustedHour = use12Hours
-            ? formatHourFrom12(date.getHours(), meridiem)
-            : date.getHours();
-        const adjustedSelectedTime = setHours(adjustedHour, selectedTime ?? new Date());
-        updateCurrentTime(adjustedSelectedTime);
-    };
-    const onTimeClick = (date) => {
-        const adjustedHour = use12Hours
-            ? formatHourFrom12(date.getHours(), meridiem)
-            : date.getHours();
-        const adjustedSelectedTime = setHours(adjustedHour, date);
-        updateCurrentTime(adjustedSelectedTime);
-    };
-    const onMeridiemClick = (value) => {
-        let adjustedSelectedTime = selectedTime ?? new Date();
-        const currentHours = adjustedSelectedTime.getHours();
-        setMeridiem(value);
-        if (value === 'AM' && currentHours > 11) {
-            adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
-        }
-        if (value === 'PM' && currentHours <= 12) {
-            adjustedSelectedTime = setHours(currentHours + 12, adjustedSelectedTime);
-        }
-        updateCurrentTime(adjustedSelectedTime);
-    };
-    const updateCurrentTime = (time) => {
-        let adjustedTime = time;
-        // Nullify other values, according to precision
-        if (precision === 'hours') {
-            adjustedTime = new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), 0, 0);
-        }
-        if (precision === 'minutes') {
-            adjustedTime = new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), 0);
-        }
-        setFocusedTime(adjustedTime);
-        setSelectedTime(adjustedTime);
-        onChange?.(adjustedTime);
-    };
-    const onHourFocus = (date) => {
-        const adjustedHour = use12Hours
-            ? formatHourFrom12(date.getHours(), meridiem)
-            : date.getHours();
-        setFocusedTime(setHours(adjustedHour, focusedTime));
-    };
-    const onTimeFocus = (date) => {
-        const adjustedHour = use12Hours
-            ? formatHourFrom12(date.getHours(), meridiem)
-            : date.getHours();
-        setFocusedTime(setHours(adjustedHour, date));
-    };
-    const onMeridiemFocus = (value) => {
-        let adjustedSelectedTime = selectedTime ?? new Date();
-        const currentHours = adjustedSelectedTime.getHours();
-        if (value === 'AM' && currentHours > 11) {
-            setMeridiem(value);
-            adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
-        }
-        if (value === 'PM' && currentHours <= 12) {
-            setMeridiem(value);
-            adjustedSelectedTime = setHours(currentHours + 12, adjustedSelectedTime);
-        }
-        setFocusedTime(adjustedSelectedTime);
-    };
-    const generateDataList = (size, value, step) => {
-        const data = [];
-        for (let i = 0; i < size; i++) {
-            if (i % step === 0) {
-                data.push(value(i));
-            }
-        }
-        return data;
-    };
-    const time = React.useMemo(() => {
-        const time = selectedTime ?? new Date();
-        const data = [];
-        const hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
-            .filter((i) => i % hourStep === 0)
-            .map((i) => (use12Hours && i === 0 ? 12 : i));
-        const minutesArray = Array.from(Array(60).keys()).filter((i) => i % minuteStep === 0);
-        const secondsArray = Array.from(Array(60).keys()).filter((i) => i % secondStep === 0);
-        hoursArray.forEach((hour) => {
-            if (precision === 'hours') {
-                data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, time.getMinutes(), time.getSeconds()));
-            }
-            else {
-                minutesArray.forEach((minute) => {
-                    if (precision === 'minutes') {
-                        data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, minute, time.getSeconds()));
-                    }
-                    else {
-                        secondsArray.forEach((second) => {
-                            data.push(new Date(time.getFullYear(), time.getMonth(), time.getDate(), hour, minute, second));
-                        });
-                    }
-                });
-            }
+  const {
+    date,
+    onChange,
+    use12Hours = false,
+    precision = 'minutes',
+    hourStep = 1,
+    minuteStep = 1,
+    secondStep = 1,
+    setFocusHour = false,
+    hourRenderer = (date) =>
+      date.getHours().toLocaleString(undefined, {
+        minimumIntegerDigits: 2,
+      }),
+    minuteRenderer = (date) =>
+      date.getMinutes().toLocaleString(undefined, {
+        minimumIntegerDigits: 2,
+      }),
+    secondRenderer = (date) =>
+      date.getSeconds().toLocaleString(undefined, {
+        minimumIntegerDigits: 2,
+      }),
+    meridiemRenderer = (meridiem) => meridiem,
+    useCombinedRenderer = false,
+    combinedRenderer = defaultCombinedRenderer,
+    className,
+    ...rest
+  } = props;
+  const [selectedTime, setSelectedTime] = React.useState(date);
+  const [focusedTime, setFocusedTime] = React.useState(
+    selectedTime ?? new Date(),
+  );
+  const [meridiem, setMeridiem] = React.useState(
+    use12Hours ? (focusedTime?.getHours() > 11 ? 'PM' : 'AM') : undefined,
+  );
+  React.useEffect(() => {
+    setFocusedTime(date ?? new Date());
+    setSelectedTime(date);
+  }, [date]);
+  const onHourClick = (date) => {
+    const adjustedHour = use12Hours
+      ? formatHourFrom12(date.getHours(), meridiem)
+      : date.getHours();
+    const adjustedSelectedTime = setHours(
+      adjustedHour,
+      selectedTime ?? new Date(),
+    );
+    updateCurrentTime(adjustedSelectedTime);
+  };
+  const onTimeClick = (date) => {
+    const adjustedHour = use12Hours
+      ? formatHourFrom12(date.getHours(), meridiem)
+      : date.getHours();
+    const adjustedSelectedTime = setHours(adjustedHour, date);
+    updateCurrentTime(adjustedSelectedTime);
+  };
+  const onMeridiemClick = (value) => {
+    let adjustedSelectedTime = selectedTime ?? new Date();
+    const currentHours = adjustedSelectedTime.getHours();
+    setMeridiem(value);
+    if (value === 'AM' && currentHours > 11) {
+      adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
+    }
+    if (value === 'PM' && currentHours <= 12) {
+      adjustedSelectedTime = setHours(currentHours + 12, adjustedSelectedTime);
+    }
+    updateCurrentTime(adjustedSelectedTime);
+  };
+  const updateCurrentTime = (time) => {
+    let adjustedTime = time;
+    if (precision === 'hours') {
+      adjustedTime = new Date(
+        time.getFullYear(),
+        time.getMonth(),
+        time.getDate(),
+        time.getHours(),
+        0,
+        0,
+      );
+    }
+    if (precision === 'minutes') {
+      adjustedTime = new Date(
+        time.getFullYear(),
+        time.getMonth(),
+        time.getDate(),
+        time.getHours(),
+        time.getMinutes(),
+        0,
+      );
+    }
+    setFocusedTime(adjustedTime);
+    setSelectedTime(adjustedTime);
+    onChange?.(adjustedTime);
+  };
+  const onHourFocus = (date) => {
+    const adjustedHour = use12Hours
+      ? formatHourFrom12(date.getHours(), meridiem)
+      : date.getHours();
+    setFocusedTime(setHours(adjustedHour, focusedTime));
+  };
+  const onTimeFocus = (date) => {
+    const adjustedHour = use12Hours
+      ? formatHourFrom12(date.getHours(), meridiem)
+      : date.getHours();
+    setFocusedTime(setHours(adjustedHour, date));
+  };
+  const onMeridiemFocus = (value) => {
+    let adjustedSelectedTime = selectedTime ?? new Date();
+    const currentHours = adjustedSelectedTime.getHours();
+    if (value === 'AM' && currentHours > 11) {
+      setMeridiem(value);
+      adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
+    }
+    if (value === 'PM' && currentHours <= 12) {
+      setMeridiem(value);
+      adjustedSelectedTime = setHours(currentHours + 12, adjustedSelectedTime);
+    }
+    setFocusedTime(adjustedSelectedTime);
+  };
+  const generateDataList = (size, value, step) => {
+    const data = [];
+    for (let i = 0; i < size; i++) {
+      if (i % step === 0) {
+        data.push(value(i));
+      }
+    }
+    return data;
+  };
+  const time = React.useMemo(() => {
+    const time = selectedTime ?? new Date();
+    const data = [];
+    const hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
+      .filter((i) => i % hourStep === 0)
+      .map((i) => (use12Hours && i === 0 ? 12 : i));
+    const minutesArray = Array.from(Array(60).keys()).filter(
+      (i) => i % minuteStep === 0,
+    );
+    const secondsArray = Array.from(Array(60).keys()).filter(
+      (i) => i % secondStep === 0,
+    );
+    hoursArray.forEach((hour) => {
+      if (precision === 'hours') {
+        data.push(
+          new Date(
+            time.getFullYear(),
+            time.getMonth(),
+            time.getDate(),
+            hour,
+            time.getMinutes(),
+            time.getSeconds(),
+          ),
+        );
+      } else {
+        minutesArray.forEach((minute) => {
+          if (precision === 'minutes') {
+            data.push(
+              new Date(
+                time.getFullYear(),
+                time.getMonth(),
+                time.getDate(),
+                hour,
+                minute,
+                time.getSeconds(),
+              ),
+            );
+          } else {
+            secondsArray.forEach((second) => {
+              data.push(
+                new Date(
+                  time.getFullYear(),
+                  time.getMonth(),
+                  time.getDate(),
+                  hour,
+                  minute,
+                  second,
+                ),
+              );
+            });
+          }
         });
-        return data;
-    }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
-    const hours = React.useMemo(() => {
-        const time = selectedTime ?? new Date();
-        return generateDataList(use12Hours ? 12 : 24, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), use12Hours && i === 0 ? 12 : i, time.getMinutes(), time.getSeconds()), hourStep);
-    }, [hourStep, selectedTime, use12Hours]);
-    const minutes = React.useMemo(() => {
-        const time = selectedTime ?? new Date();
-        return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), i, time.getSeconds()), minuteStep);
-    }, [minuteStep, selectedTime]);
-    const seconds = React.useMemo(() => {
-        const time = selectedTime ?? new Date();
-        return generateDataList(60, (i) => new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours(), time.getMinutes(), i), secondStep);
-    }, [secondStep, selectedTime]);
-    return (React.createElement(Box, { className: cx('iui-time-picker', className), ref: forwardedRef, ...rest },
-        useCombinedRenderer ? (React.createElement(TimePickerColumn, { data: time, isSameFocused: (val) => isSameTime(val, focusedTime, precision, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameTime(val, selectedTime, precision, use12Hours ? meridiem : undefined), onFocusChange: onTimeFocus, onSelectChange: onTimeClick, setFocus: setFocusHour, precision: precision, valueRenderer: combinedRenderer })) : (React.createElement(React.Fragment, null,
-            React.createElement(TimePickerColumn, { data: hours, isSameFocused: (val) => isSameHour(val, focusedTime, use12Hours ? meridiem : undefined), isSameSelected: (val) => isSameHour(val, selectedTime, use12Hours ? meridiem : undefined), onFocusChange: onHourFocus, onSelectChange: onHourClick, setFocus: setFocusHour, valueRenderer: hourRenderer }),
-            precision !== 'hours' && (React.createElement(TimePickerColumn, { data: minutes, isSameFocused: (val) => isSameMinute(val, focusedTime), isSameSelected: (val) => isSameMinute(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: minuteRenderer })),
-            precision === 'seconds' && (React.createElement(TimePickerColumn, { data: seconds, isSameFocused: (val) => isSameSecond(val, focusedTime), isSameSelected: (val) => isSameSecond(val, selectedTime), onFocusChange: (date) => setFocusedTime(date), onSelectChange: (date) => updateCurrentTime(date), valueRenderer: secondRenderer })))),
-        use12Hours && (React.createElement(TimePickerColumn, { data: ['AM', 'PM'], isSameFocused: (val) => isSameMeridiem(val, focusedTime), isSameSelected: (val) => isSameMeridiem(val, selectedTime), onFocusChange: (date) => onMeridiemFocus(date), onSelectChange: (value) => onMeridiemClick(value), valueRenderer: meridiemRenderer, className: 'iui-period' }))));
+      }
+    });
+    return data;
+  }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
+  const hours = React.useMemo(() => {
+    const time = selectedTime ?? new Date();
+    return generateDataList(
+      use12Hours ? 12 : 24,
+      (i) =>
+        new Date(
+          time.getFullYear(),
+          time.getMonth(),
+          time.getDate(),
+          use12Hours && i === 0 ? 12 : i,
+          time.getMinutes(),
+          time.getSeconds(),
+        ),
+      hourStep,
+    );
+  }, [hourStep, selectedTime, use12Hours]);
+  const minutes = React.useMemo(() => {
+    const time = selectedTime ?? new Date();
+    return generateDataList(
+      60,
+      (i) =>
+        new Date(
+          time.getFullYear(),
+          time.getMonth(),
+          time.getDate(),
+          time.getHours(),
+          i,
+          time.getSeconds(),
+        ),
+      minuteStep,
+    );
+  }, [minuteStep, selectedTime]);
+  const seconds = React.useMemo(() => {
+    const time = selectedTime ?? new Date();
+    return generateDataList(
+      60,
+      (i) =>
+        new Date(
+          time.getFullYear(),
+          time.getMonth(),
+          time.getDate(),
+          time.getHours(),
+          time.getMinutes(),
+          i,
+        ),
+      secondStep,
+    );
+  }, [secondStep, selectedTime]);
+  return _jsxs(Box, {
+    className: cx('iui-time-picker', className),
+    ref: forwardedRef,
+    ...rest,
+    children: [
+      useCombinedRenderer
+        ? _jsx(TimePickerColumn, {
+            data: time,
+            isSameFocused: (val) =>
+              isSameTime(
+                val,
+                focusedTime,
+                precision,
+                use12Hours ? meridiem : undefined,
+              ),
+            isSameSelected: (val) =>
+              isSameTime(
+                val,
+                selectedTime,
+                precision,
+                use12Hours ? meridiem : undefined,
+              ),
+            onFocusChange: onTimeFocus,
+            onSelectChange: onTimeClick,
+            setFocus: setFocusHour,
+            precision: precision,
+            valueRenderer: combinedRenderer,
+          })
+        : _jsxs(_Fragment, {
+            children: [
+              _jsx(TimePickerColumn, {
+                data: hours,
+                isSameFocused: (val) =>
+                  isSameHour(
+                    val,
+                    focusedTime,
+                    use12Hours ? meridiem : undefined,
+                  ),
+                isSameSelected: (val) =>
+                  isSameHour(
+                    val,
+                    selectedTime,
+                    use12Hours ? meridiem : undefined,
+                  ),
+                onFocusChange: onHourFocus,
+                onSelectChange: onHourClick,
+                setFocus: setFocusHour,
+                valueRenderer: hourRenderer,
+              }),
+              precision !== 'hours' &&
+                _jsx(TimePickerColumn, {
+                  data: minutes,
+                  isSameFocused: (val) => isSameMinute(val, focusedTime),
+                  isSameSelected: (val) => isSameMinute(val, selectedTime),
+                  onFocusChange: (date) => setFocusedTime(date),
+                  onSelectChange: (date) => updateCurrentTime(date),
+                  valueRenderer: minuteRenderer,
+                }),
+              precision === 'seconds' &&
+                _jsx(TimePickerColumn, {
+                  data: seconds,
+                  isSameFocused: (val) => isSameSecond(val, focusedTime),
+                  isSameSelected: (val) => isSameSecond(val, selectedTime),
+                  onFocusChange: (date) => setFocusedTime(date),
+                  onSelectChange: (date) => updateCurrentTime(date),
+                  valueRenderer: secondRenderer,
+                }),
+            ],
+          }),
+      use12Hours &&
+        _jsx(TimePickerColumn, {
+          data: ['AM', 'PM'],
+          isSameFocused: (val) => isSameMeridiem(val, focusedTime),
+          isSameSelected: (val) => isSameMeridiem(val, selectedTime),
+          onFocusChange: (date) => onMeridiemFocus(date),
+          onSelectChange: (value) => onMeridiemClick(value),
+          valueRenderer: meridiemRenderer,
+          className: 'iui-period',
+        }),
+    ],
+  });
 });
 const TimePickerColumn = (props) => {
-    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
-    const needFocus = React.useRef(setFocus);
-    const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
-        if (event.altKey) {
-            return;
+  const {
+    data,
+    onFocusChange,
+    onSelectChange,
+    isSameFocused,
+    isSameSelected,
+    setFocus = false,
+    valueRenderer,
+    precision = 'minutes',
+    className = 'iui-time',
+  } = props;
+  const needFocus = React.useRef(setFocus);
+  const handleTimeKeyDown = (
+    event,
+    maxValue,
+    onFocus,
+    onSelect,
+    currentValue,
+  ) => {
+    if (event.altKey) {
+      return;
+    }
+    switch (event.key) {
+      case 'ArrowDown':
+        if (currentValue + 1 > maxValue) {
+          break;
         }
-        switch (event.key) {
-            case 'ArrowDown':
-                if (currentValue + 1 > maxValue) {
-                    break;
-                }
-                onFocus(currentValue + 1);
-                needFocus.current = true;
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                if (currentValue - 1 < 0) {
-                    break;
-                }
-                onFocus(currentValue - 1);
-                needFocus.current = true;
-                event.preventDefault();
-                break;
-            case 'Enter':
-            case ' ':
-            case 'Spacebar':
-                onSelect(currentValue);
-                event.preventDefault();
-                break;
+        onFocus(currentValue + 1);
+        needFocus.current = true;
+        event.preventDefault();
+        break;
+      case 'ArrowUp':
+        if (currentValue - 1 < 0) {
+          break;
         }
-    };
-    return (React.createElement(Box, { className: `${className}` },
-        React.createElement("ol", null, data.map((value, index) => {
-            const isSameFocus = isSameFocused(value);
-            return (React.createElement(Box, { as: 'li', onKeyDown: (event) => {
-                    handleTimeKeyDown(event, data.length - 1, (index) => onFocusChange(data[index]), (index) => onSelectChange(data[index]), index);
-                }, className: cx({
-                    'iui-selected': isSameSelected(value),
-                }), key: index, tabIndex: isSameFocus ? 0 : undefined, ref: (ref) => {
-                    if (!ref || !isSameFocus) {
-                        return;
-                    }
-                    // Move focus/scroll in the next task, after the DOM has stabilized.
-                    // This gives it priority over other conflicting logic (e.g. from floating-ui/Popover).
-                    setTimeout(() => {
-                        ref.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-                        if (needFocus.current) {
-                            ref.focus();
-                            needFocus.current = false;
-                        }
-                    });
-                }, onClick: () => {
-                    onSelectChange(value);
-                } }, valueRenderer(value, precision)));
-        }))));
+        onFocus(currentValue - 1);
+        needFocus.current = true;
+        event.preventDefault();
+        break;
+      case 'Enter':
+      case ' ':
+      case 'Spacebar':
+        onSelect(currentValue);
+        event.preventDefault();
+        break;
+    }
+  };
+  return _jsx(Box, {
+    className: `${className}`,
+    children: _jsx('ol', {
+      children: data.map((value, index) => {
+        const isSameFocus = isSameFocused(value);
+        return _jsx(
+          Box,
+          {
+            as: 'li',
+            onKeyDown: (event) => {
+              handleTimeKeyDown(
+                event,
+                data.length - 1,
+                (index) => onFocusChange(data[index]),
+                (index) => onSelectChange(data[index]),
+                index,
+              );
+            },
+            className: cx({
+              'iui-selected': isSameSelected(value),
+            }),
+            tabIndex: isSameFocus ? 0 : undefined,
+            ref: (ref) => {
+              if (!ref || !isSameFocus) {
+                return;
+              }
+              setTimeout(() => {
+                ref.scrollIntoView({
+                  block: 'nearest',
+                  inline: 'nearest',
+                });
+                if (needFocus.current) {
+                  ref.focus();
+                  needFocus.current = false;
+                }
+              });
+            },
+            onClick: () => {
+              onSelectChange(value);
+            },
+            children: valueRenderer(value, precision),
+          },
+          index,
+        );
+      }),
+    }),
+  });
 };