@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/TimePicker/TimePicker.js

@@ -1,50 +1,40 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-const isSameHour = (date1, date2, meridiem) => {
-  const adjustedHours = meridiem
+let isSameHour = (date1, date2, meridiem) => {
+  let adjustedHours = meridiem
     ? formatHourFrom12(date1.getHours(), meridiem)
     : date1.getHours();
-  if (!!meridiem) {
+  if (!!meridiem)
     return !!date2 && adjustedHours % 12 === date2.getHours() % 12;
-  }
   return !!date2 && adjustedHours === date2.getHours();
 };
-const isSameMinute = (date1, date2) => {
-  return !!date2 && date1.getMinutes() === date2.getMinutes();
-};
-const isSameSecond = (date1, date2) => {
-  return !!date2 && date1.getSeconds() === date2.getSeconds();
-};
-const isSameTime = (date1, date2, precision, meridiem) => {
+let isSameMinute = (date1, date2) =>
+  !!date2 && date1.getMinutes() === date2.getMinutes();
+let isSameSecond = (date1, date2) =>
+  !!date2 && date1.getSeconds() === date2.getSeconds();
+let isSameTime = (date1, date2, precision, meridiem) => {
   let isSameTime = true;
   switch (precision) {
     case 'seconds':
       isSameTime = isSameSecond(date1, date2);
-      if (!isSameTime) {
-        break;
-      }
+      if (!isSameTime) break;
     case 'minutes':
       isSameTime = isSameMinute(date1, date2);
-      if (!isSameTime) {
-        break;
-      }
+      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)
-  );
-};
-const formatHourFrom12 = (hour, meridiem) => {
-  const adjustedHour = hour % 12;
-  return meridiem === 'PM' ? adjustedHour + 12 : adjustedHour;
+let isSameMeridiem = (meridiem, date) =>
+  !!date && ('AM' === meridiem ? date.getHours() < 12 : date.getHours() >= 12);
+let formatHourFrom12 = (hour, meridiem) => {
+  let adjustedHour = hour % 12;
+  return 'PM' === meridiem ? adjustedHour + 12 : adjustedHour;
 };
-const setHours = (hour, date) => {
-  return new Date(
+let setHours = (hour, date) =>
+  new Date(
     date.getFullYear(),
     date.getMonth(),
     date.getDate(),
@@ -52,33 +42,32 @@ const setHours = (hour, date) => {
     date.getMinutes(),
     date.getSeconds(),
   );
-};
-const defaultCombinedRenderer = (date, precision) => {
+let defaultCombinedRenderer = (date, precision) => {
   let dateString = '';
   switch (precision) {
     case 'seconds':
       dateString =
         ':' +
-        date.getSeconds().toLocaleString(undefined, {
+        date.getSeconds().toLocaleString(void 0, {
           minimumIntegerDigits: 2,
         });
     case 'minutes':
       dateString =
         ':' +
-        date.getMinutes().toLocaleString(undefined, {
+        date.getMinutes().toLocaleString(void 0, {
           minimumIntegerDigits: 2,
         }) +
         dateString;
     case 'hours':
       dateString =
-        date.getHours().toLocaleString(undefined, {
+        date.getHours().toLocaleString(void 0, {
           minimumIntegerDigits: 2,
         }) + dateString;
   }
   return dateString;
 };
 export const TimePicker = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     date,
     onChange,
     use12Hours = false,
@@ -88,15 +77,15 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
     secondStep = 1,
     setFocusHour = false,
     hourRenderer = (date) =>
-      date.getHours().toLocaleString(undefined, {
+      date.getHours().toLocaleString(void 0, {
         minimumIntegerDigits: 2,
       }),
     minuteRenderer = (date) =>
-      date.getMinutes().toLocaleString(undefined, {
+      date.getMinutes().toLocaleString(void 0, {
         minimumIntegerDigits: 2,
       }),
     secondRenderer = (date) =>
-      date.getSeconds().toLocaleString(undefined, {
+      date.getSeconds().toLocaleString(void 0, {
         minimumIntegerDigits: 2,
       }),
     meridiemRenderer = (meridiem) => meridiem,
@@ -105,49 +94,47 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
-  const [selectedTime, setSelectedTime] = React.useState(date);
-  const [focusedTime, setFocusedTime] = React.useState(
+  let [selectedTime, setSelectedTime] = React.useState(date);
+  let [focusedTime, setFocusedTime] = React.useState(
     selectedTime ?? new Date(),
   );
-  const [meridiem, setMeridiem] = React.useState(
-    use12Hours ? (focusedTime?.getHours() > 11 ? 'PM' : 'AM') : undefined,
+  let [meridiem, setMeridiem] = React.useState(
+    use12Hours ? (focusedTime?.getHours() > 11 ? 'PM' : 'AM') : void 0,
   );
   React.useEffect(() => {
     setFocusedTime(date ?? new Date());
     setSelectedTime(date);
   }, [date]);
-  const onHourClick = (date) => {
-    const adjustedHour = use12Hours
+  let onHourClick = (date) => {
+    let adjustedHour = use12Hours
       ? formatHourFrom12(date.getHours(), meridiem)
       : date.getHours();
-    const adjustedSelectedTime = setHours(
+    let adjustedSelectedTime = setHours(
       adjustedHour,
       selectedTime ?? new Date(),
     );
     updateCurrentTime(adjustedSelectedTime);
   };
-  const onTimeClick = (date) => {
-    const adjustedHour = use12Hours
+  let onTimeClick = (date) => {
+    let adjustedHour = use12Hours
       ? formatHourFrom12(date.getHours(), meridiem)
       : date.getHours();
-    const adjustedSelectedTime = setHours(adjustedHour, date);
+    let adjustedSelectedTime = setHours(adjustedHour, date);
     updateCurrentTime(adjustedSelectedTime);
   };
-  const onMeridiemClick = (value) => {
+  let onMeridiemClick = (value) => {
     let adjustedSelectedTime = selectedTime ?? new Date();
-    const currentHours = adjustedSelectedTime.getHours();
+    let currentHours = adjustedSelectedTime.getHours();
     setMeridiem(value);
-    if (value === 'AM' && currentHours > 11) {
+    if ('AM' === value && currentHours > 11)
       adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
-    }
-    if (value === 'PM' && currentHours <= 12) {
+    if ('PM' === value && currentHours <= 12)
       adjustedSelectedTime = setHours(currentHours + 12, adjustedSelectedTime);
-    }
     updateCurrentTime(adjustedSelectedTime);
   };
-  const updateCurrentTime = (time) => {
+  let updateCurrentTime = (time) => {
     let adjustedTime = time;
-    if (precision === 'hours') {
+    if ('hours' === precision)
       adjustedTime = new Date(
         time.getFullYear(),
         time.getMonth(),
@@ -156,8 +143,7 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
         0,
         0,
       );
-    }
-    if (precision === 'minutes') {
+    if ('minutes' === precision)
       adjustedTime = new Date(
         time.getFullYear(),
         time.getMonth(),
@@ -166,59 +152,54 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
         time.getMinutes(),
         0,
       );
-    }
     setFocusedTime(adjustedTime);
     setSelectedTime(adjustedTime);
     onChange?.(adjustedTime);
   };
-  const onHourFocus = (date) => {
-    const adjustedHour = use12Hours
+  let onHourFocus = (date) => {
+    let adjustedHour = use12Hours
       ? formatHourFrom12(date.getHours(), meridiem)
       : date.getHours();
     setFocusedTime(setHours(adjustedHour, focusedTime));
   };
-  const onTimeFocus = (date) => {
-    const adjustedHour = use12Hours
+  let onTimeFocus = (date) => {
+    let adjustedHour = use12Hours
       ? formatHourFrom12(date.getHours(), meridiem)
       : date.getHours();
     setFocusedTime(setHours(adjustedHour, date));
   };
-  const onMeridiemFocus = (value) => {
+  let onMeridiemFocus = (value) => {
     let adjustedSelectedTime = selectedTime ?? new Date();
-    const currentHours = adjustedSelectedTime.getHours();
-    if (value === 'AM' && currentHours > 11) {
+    let currentHours = adjustedSelectedTime.getHours();
+    if ('AM' === value && currentHours > 11) {
       setMeridiem(value);
       adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
     }
-    if (value === 'PM' && currentHours <= 12) {
+    if ('PM' === value && 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));
-      }
-    }
+  let generateDataList = (size, value, step) => {
+    let 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())
+  let time = React.useMemo(() => {
+    let time = selectedTime ?? new Date();
+    let data = [];
+    let 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(
+      .map((i) => (use12Hours && 0 === i ? 12 : i));
+    let minutesArray = Array.from(Array(60).keys()).filter(
       (i) => i % minuteStep === 0,
     );
-    const secondsArray = Array.from(Array(60).keys()).filter(
+    let secondsArray = Array.from(Array(60).keys()).filter(
       (i) => i % secondStep === 0,
     );
     hoursArray.forEach((hour) => {
-      if (precision === 'hours') {
+      if ('hours' === precision)
         data.push(
           new Date(
             time.getFullYear(),
@@ -229,9 +210,9 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
             time.getSeconds(),
           ),
         );
-      } else {
+      else
         minutesArray.forEach((minute) => {
-          if (precision === 'minutes') {
+          if ('minutes' === precision)
             data.push(
               new Date(
                 time.getFullYear(),
@@ -242,7 +223,7 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
                 time.getSeconds(),
               ),
             );
-          } else {
+          else
             secondsArray.forEach((second) => {
               data.push(
                 new Date(
@@ -255,14 +236,12 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
                 ),
               );
             });
-          }
         });
-      }
     });
     return data;
   }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
-  const hours = React.useMemo(() => {
-    const time = selectedTime ?? new Date();
+  let hours = React.useMemo(() => {
+    let time = selectedTime ?? new Date();
     return generateDataList(
       use12Hours ? 12 : 24,
       (i) =>
@@ -270,15 +249,15 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
           time.getFullYear(),
           time.getMonth(),
           time.getDate(),
-          use12Hours && i === 0 ? 12 : i,
+          use12Hours && 0 === i ? 12 : i,
           time.getMinutes(),
           time.getSeconds(),
         ),
       hourStep,
     );
   }, [hourStep, selectedTime, use12Hours]);
-  const minutes = React.useMemo(() => {
-    const time = selectedTime ?? new Date();
+  let minutes = React.useMemo(() => {
+    let time = selectedTime ?? new Date();
     return generateDataList(
       60,
       (i) =>
@@ -293,8 +272,8 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
       minuteStep,
     );
   }, [minuteStep, selectedTime]);
-  const seconds = React.useMemo(() => {
-    const time = selectedTime ?? new Date();
+  let seconds = React.useMemo(() => {
+    let time = selectedTime ?? new Date();
     return generateDataList(
       60,
       (i) =>
@@ -324,14 +303,14 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
               val,
               focusedTime,
               precision,
-              use12Hours ? meridiem : undefined,
+              use12Hours ? meridiem : void 0,
             ),
           isSameSelected: (val) =>
             isSameTime(
               val,
               selectedTime,
               precision,
-              use12Hours ? meridiem : undefined,
+              use12Hours ? meridiem : void 0,
             ),
           onFocusChange: onTimeFocus,
           onSelectChange: onTimeClick,
@@ -345,15 +324,15 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
           React.createElement(TimePickerColumn, {
             data: hours,
             isSameFocused: (val) =>
-              isSameHour(val, focusedTime, use12Hours ? meridiem : undefined),
+              isSameHour(val, focusedTime, use12Hours ? meridiem : void 0),
             isSameSelected: (val) =>
-              isSameHour(val, selectedTime, use12Hours ? meridiem : undefined),
+              isSameHour(val, selectedTime, use12Hours ? meridiem : void 0),
             onFocusChange: onHourFocus,
             onSelectChange: onHourClick,
             setFocus: setFocusHour,
             valueRenderer: hourRenderer,
           }),
-          precision !== 'hours' &&
+          'hours' !== precision &&
             React.createElement(TimePickerColumn, {
               data: minutes,
               isSameFocused: (val) => isSameMinute(val, focusedTime),
@@ -362,7 +341,7 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
               onSelectChange: (date) => updateCurrentTime(date),
               valueRenderer: minuteRenderer,
             }),
-          precision === 'seconds' &&
+          'seconds' === precision &&
             React.createElement(TimePickerColumn, {
               data: seconds,
               isSameFocused: (val) => isSameSecond(val, focusedTime),
@@ -384,8 +363,8 @@ export const TimePicker = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-const TimePickerColumn = (props) => {
-  const {
+let TimePickerColumn = (props) => {
+  let {
     data,
     onFocusChange,
     onSelectChange,
@@ -396,30 +375,24 @@ const TimePickerColumn = (props) => {
     precision = 'minutes',
     className = 'iui-time',
   } = props;
-  const needFocus = React.useRef(setFocus);
-  const handleTimeKeyDown = (
+  let needFocus = React.useRef(setFocus);
+  let handleTimeKeyDown = (
     event,
     maxValue,
     onFocus,
     onSelect,
     currentValue,
   ) => {
-    if (event.altKey) {
-      return;
-    }
+    if (event.altKey) return;
     switch (event.key) {
       case 'ArrowDown':
-        if (currentValue + 1 > maxValue) {
-          break;
-        }
+        if (currentValue + 1 > maxValue) break;
         onFocus(currentValue + 1);
         needFocus.current = true;
         event.preventDefault();
         break;
       case 'ArrowUp':
-        if (currentValue - 1 < 0) {
-          break;
-        }
+        if (currentValue - 1 < 0) break;
         onFocus(currentValue - 1);
         needFocus.current = true;
         event.preventDefault();
@@ -441,7 +414,7 @@ const TimePickerColumn = (props) => {
       'ol',
       null,
       data.map((value, index) => {
-        const isSameFocus = isSameFocused(value);
+        let isSameFocus = isSameFocused(value);
         return React.createElement(
           Box,
           {
@@ -459,11 +432,9 @@ const TimePickerColumn = (props) => {
               'iui-selected': isSameSelected(value),
             }),
             key: index,
-            tabIndex: isSameFocus ? 0 : undefined,
+            tabIndex: isSameFocus ? 0 : void 0,
             ref: (ref) => {
-              if (!ref || !isSameFocus) {
-                return;
-              }
+              if (!ref || !isSameFocus) return;
               setTimeout(() => {
                 ref.scrollIntoView({
                   block: 'nearest',

package/esm/core/Toast/Toast.js

@@ -11,10 +11,10 @@ import {
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { ToasterStateContext } from './Toaster.js';
-const isMotionOk = () =>
+let isMotionOk = () =>
   getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
 export const Toast = (props) => {
-  const {
+  let {
     content,
     category,
     type = 'temporary',
@@ -26,66 +26,59 @@ export const Toast = (props) => {
     animateOutTo,
     domProps,
   } = props;
-  const closeTimeout = React.useRef(0);
-  const { placement } = useSafeContext(ToasterStateContext).settings;
-  const placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
-  const [visible, setVisible] = React.useState(isVisibleProp ?? true);
-  const isVisible = isVisibleProp ?? visible;
-  const [height, setHeight] = React.useState(0);
-  const thisElement = React.useRef(null);
-  const [margin, setMargin] = React.useState(0);
-  const marginStyle = () => {
-    if (placementPosition === 'top') {
+  let closeTimeout = React.useRef(0);
+  let { placement } = useSafeContext(ToasterStateContext).settings;
+  let placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+  let [visible, setVisible] = React.useState(isVisibleProp ?? true);
+  let isVisible = isVisibleProp ?? visible;
+  let [height, setHeight] = React.useState(0);
+  let thisElement = React.useRef(null);
+  let [margin, setMargin] = React.useState(0);
+  let marginStyle = () => {
+    if ('top' === placementPosition)
       return {
         marginBlockEnd: margin,
       };
-    }
     return {
       marginBlockStart: margin,
     };
   };
   React.useEffect(() => {
-    if (type === 'temporary') {
-      setCloseTimeout(duration);
-    }
+    if ('temporary' === type) setCloseTimeout(duration);
     return () => {
       clearCloseTimeout();
     };
   }, [duration, type]);
   React.useEffect(() => {
-    if (!isVisible && !animateOutTo) {
-      setMargin(-height);
-    }
+    if (!isVisible && !animateOutTo) setMargin(-height);
   }, [isVisible, animateOutTo, setMargin, height]);
-  const close = () => {
+  let close = () => {
     clearCloseTimeout();
     setMargin(-height);
     setVisible(false);
   };
-  const setCloseTimeout = (timeout) => {
-    const definedWindow = getWindow();
-    if (!definedWindow) {
-      return;
-    }
+  let setCloseTimeout = (timeout) => {
+    let definedWindow = getWindow();
+    if (!definedWindow) return;
     closeTimeout.current = definedWindow.setTimeout(() => {
       close();
     }, timeout);
   };
-  const clearCloseTimeout = () => {
+  let clearCloseTimeout = () => {
     getWindow()?.clearTimeout(closeTimeout.current);
   };
-  const onRef = (ref) => {
+  let onRef = (ref) => {
     if (ref) {
-      const { height } = ref.getBoundingClientRect();
+      let { height } = ref.getBoundingClientRect();
       setHeight(height);
     }
   };
-  const calculateOutAnimation = (node) => {
+  let calculateOutAnimation = (node) => {
     let translateX = 0;
     let translateY = 0;
     if (animateOutTo && node) {
-      const { x: startX, y: startY } = node.getBoundingClientRect();
-      const { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
+      let { x: startX, y: startY } = node.getBoundingClientRect();
+      let { x: endX, y: endY } = animateOutTo.getBoundingClientRect();
       translateX = endX - startX;
       translateY = endY - startY;
     }
@@ -111,16 +104,14 @@ export const Toast = (props) => {
         }
       },
       onEntered: (node) => {
-        if (isMotionOk()) {
-          node.style.transform = 'translateY(0)';
-        }
+        if (isMotionOk()) node.style.transform = 'translateY(0)';
       },
       onExiting: (node) => {
         if (isMotionOk()) {
-          const { translateX, translateY } = calculateOutAnimation(node);
+          let { translateX, translateY } = calculateOutAnimation(node);
           node.style.transform = animateOutTo
             ? `scale(0.9) translate(${translateX}px,${translateY}px)`
-            : `scale(0.9)`;
+            : 'scale(0.9)';
           node.style.opacity = '0';
           node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
           node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
@@ -159,7 +150,7 @@ export const Toast = (props) => {
   );
 };
 export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     content,
     category,
     type = 'temporary',
@@ -170,7 +161,7 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
     contentProps,
     ...rest
   } = props;
-  const StatusIcon = StatusIconMap[category];
+  let StatusIcon = StatusIconMap[category];
   return React.createElement(
     Box,
     {
@@ -202,13 +193,13 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
         {
           ...link,
           className: cx('iui-anchor', 'iui-toast-anchor', link.className),
-          title: undefined,
+          title: void 0,
           'data-iui-status': category,
           'data-iui-underline': true,
         },
         link.title,
       ),
-    (type === 'persisting' || hasCloseButton) &&
+    ('persisting' === type || hasCloseButton) &&
       React.createElement(
         IconButton,
         {