@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/TimePicker/TimePicker.js

@@ -6,79 +6,70 @@ 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
@@ -86,399 +77,188 @@ const defaultCombinedRenderer = (date, precision) => {
  * <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;
+        // 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));
+                        });
+                    }
+                });
+            }
         });
-      }
-    });
-    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 (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' }))));
 });
 const TimePickerColumn = (props) => {
-  const {
-    data,
-    onFocusChange,
-    onSelectChange,
-    isSameFocused,
-    isSameSelected,
-    setFocus = false,
-    valueRenderer,
-    precision = 'minutes',
-    className = 'iui-time',
-  } = props;
-  const needFocus = React.useRef(setFocus);
-  // Used to focus row only when changed (keyboard navigation)
-  // e.g. without this on every rerender it would be focused
-  React.useEffect(() => {
-    if (needFocus.current) {
-      needFocus.current = false;
-    }
-  });
-  const scrollIntoView = (ref, isSame) => {
-    isSame && ref?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-  };
-  const handleTimeKeyDown = (
-    event,
-    maxValue,
-    onFocus,
-    onSelect,
-    currentValue,
-  ) => {
-    if (event.altKey) {
-      return;
-    }
-    switch (event.key) {
-      case 'ArrowDown':
-        if (currentValue + 1 > maxValue) {
-          break;
+    const { data, onFocusChange, onSelectChange, isSameFocused, isSameSelected, setFocus = false, valueRenderer, precision = 'minutes', className = 'iui-time', } = props;
+    const needFocus = React.useRef(setFocus);
+    // Used to focus row only when changed (keyboard navigation)
+    // e.g. without this on every rerender it would be focused
+    React.useEffect(() => {
+        if (needFocus.current) {
+            needFocus.current = false;
         }
-        onFocus(currentValue + 1);
-        needFocus.current = true;
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-        if (currentValue - 1 < 0) {
-          break;
+    });
+    const scrollIntoView = (ref, isSame) => {
+        isSame && ref?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    };
+    const handleTimeKeyDown = (event, maxValue, onFocus, onSelect, currentValue) => {
+        if (event.altKey) {
+            return;
         }
-        onFocus(currentValue - 1);
-        needFocus.current = true;
-        event.preventDefault();
-        break;
-      case 'Enter':
-      case ' ':
-      case 'Spacebar':
-        onSelect(currentValue);
-        event.preventDefault();
-        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) => {
-              scrollIntoView(ref, isSameFocus);
-              needFocus.current && isSameFocus && ref?.focus();
-            },
-            onClick: () => {
-              onSelectChange(value);
-            },
-          },
-          valueRenderer(value, precision),
-        );
-      }),
-    ),
-  );
+        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;
+        }
+    };
+    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) => {
+                    scrollIntoView(ref, isSameFocus);
+                    needFocus.current && isSameFocus && ref?.focus();
+                }, onClick: () => {
+                    onSelectChange(value);
+                } }, valueRenderer(value, precision)));
+        }))));
 };
 export default TimePicker;