@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/Buttons/SplitButton.js

@@ -10,7 +10,7 @@ import {
 } from '../../utils/index.js';
 import { Menu } from '../Menu/Menu.js';
 export const SplitButton = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     onClick,
     menuItems,
     className,
@@ -23,21 +23,20 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     portal = true,
     ...rest
   } = props;
-  const [visible, setVisible] = React.useState(false);
-  const menuContent = React.useMemo(() => {
-    if (typeof menuItems === 'function') {
+  let [visible, setVisible] = React.useState(false);
+  let menuContent = React.useMemo(() => {
+    if ('function' == typeof menuItems)
       return menuItems(() => setVisible(false));
-    }
     return menuItems;
   }, [menuItems]);
-  const popoverProps = {
+  let popoverProps = {
     visible,
     onVisibleChange: setVisible,
     placement: menuPlacement,
     matchWidth: true,
   };
-  const labelId = useId();
-  const trigger = React.createElement(
+  let labelId = useId();
+  let trigger = React.createElement(
     IconButton,
     {
       styleType: styleType,
@@ -50,7 +49,7 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
       ? React.createElement(SvgCaretUpSmall, null)
       : React.createElement(SvgCaretDownSmall, null),
   );
-  const [positionReference, setPositionReference] = React.useState(null);
+  let [positionReference, setPositionReference] = React.useState(null);
   return React.createElement(
     Box,
     {
@@ -89,9 +88,7 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         portal: portal,
         positionReference: positionReference,
         onKeyDown: ({ key }) => {
-          if (key === 'Tab') {
-            setVisible(false);
-          }
+          if ('Tab' === key) setVisible(false);
         },
       },
       menuContent,

package/esm/core/Carousel/Carousel.js

@@ -7,9 +7,9 @@ import { CarouselSlide } from './CarouselSlide.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { CarouselDot } from './CarouselDot.js';
 import { CarouselNavigation } from './CarouselNavigation.js';
-const CarouselComponent = React.forwardRef((props, ref) => {
-  const idPrefix = useId();
-  const {
+let CarouselComponent = React.forwardRef((props, ref) => {
+  let idPrefix = useId();
+  let {
     activeSlideIndex: userActiveIndex = 0,
     onSlideChange,
     className,
@@ -17,12 +17,12 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     id = idPrefix,
     ...rest
   } = props;
-  const isManuallyUpdating = React.useRef(false);
-  const carouselRef = React.useRef(null);
-  const refs = useMergedRefs(carouselRef, ref);
-  const [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
-  const scrollToSlide = React.useRef(() => {});
-  const justMounted = React.useRef(true);
+  let isManuallyUpdating = React.useRef(false);
+  let carouselRef = React.useRef(null);
+  let refs = useMergedRefs(carouselRef, ref);
+  let [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
+  let scrollToSlide = React.useRef(() => {});
+  let justMounted = React.useRef(true);
   React.useEffect(() => {
     setCurrentIndex(userActiveIndex);
     scrollToSlide.current(userActiveIndex, {
@@ -30,8 +30,8 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     });
     justMounted.current = false;
   }, [userActiveIndex]);
-  const [slideCount, setSlideCount] = React.useState(0);
-  const userOnSlideChange = useLatestRef(onSlideChange);
+  let [slideCount, setSlideCount] = React.useState(0);
+  let userOnSlideChange = useLatestRef(onSlideChange);
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
   }, [userOnSlideChange, currentIndex]);

package/esm/core/Carousel/CarouselContext.js

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export const CarouselContext = React.createContext(undefined);
+export const CarouselContext = React.createContext(void 0);

package/esm/core/Carousel/CarouselDot.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { ButtonBase } from '../../utils/index.js';
 export const CarouselDot = React.forwardRef((props, ref) => {
-  const { isActive, isSmaller, isSmall, className, ...rest } = props;
+  let { isActive, isSmaller, isSmall, className, ...rest } = props;
   return React.createElement(ButtonBase, {
     role: 'tab',
     tabIndex: isActive ? 0 : -1,

package/esm/core/Carousel/CarouselDotsList.js

@@ -10,7 +10,7 @@ import {
 } from '../../utils/index.js';
 import { CarouselDot } from './CarouselDot.js';
 export const CarouselDotsList = React.forwardRef((props, ref) => {
-  const {
+  let {
     currentIndex: userCurrentIndex,
     length,
     className,
@@ -18,12 +18,12 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const context = React.useContext(CarouselContext);
-  const slideCount =
+  let context = React.useContext(CarouselContext);
+  let slideCount =
     length ?? context?.slideCount ?? React.Children.count(children);
-  const currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
-  const idPrefix = props.id ?? context?.idPrefix;
-  const handleSlideChange = React.useCallback(
+  let currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+  let idPrefix = props.id ?? context?.idPrefix;
+  let handleSlideChange = React.useCallback(
     (index) => {
       if (context) {
         context.setCurrentIndex(index);
@@ -34,21 +34,19 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
     },
     [context, onSlideChange],
   );
-  const justMounted = React.useRef(true);
-  const [visibleCount, setVisibleCount] = React.useState(slideCount);
-  const listRef = React.useRef(null);
-  const [width, setWidth] = React.useState();
-  const [resizeRef, resizeObserver] = useResizeObserver(({ width }) => {
-    if (!listRef.current) {
-      return;
-    }
+  let justMounted = React.useRef(true);
+  let [visibleCount, setVisibleCount] = React.useState(slideCount);
+  let listRef = React.useRef(null);
+  let [width, setWidth] = React.useState();
+  let [resizeRef, resizeObserver] = useResizeObserver(({ width }) => {
+    if (!listRef.current) return;
     setWidth(width);
-    const dotWidth = listRef.current.children[0].offsetWidth;
+    let dotWidth = listRef.current.children[0].offsetWidth;
     setVisibleCount(Math.floor(width / dotWidth));
   });
   React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
-  const refs = useMergedRefs(ref, resizeRef, listRef);
-  const firstVisibleDotIndex = React.useMemo(
+  let refs = useMergedRefs(ref, resizeRef, listRef);
+  let firstVisibleDotIndex = React.useMemo(
     () =>
       getBoundedValue(
         currentIndex - Math.ceil(visibleCount / 2) + 1,
@@ -57,7 +55,7 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
       ),
     [currentIndex, slideCount, visibleCount],
   );
-  const lastVisibleDotIndex = React.useMemo(
+  let lastVisibleDotIndex = React.useMemo(
     () =>
       getBoundedValue(
         currentIndex + Math.floor(visibleCount / 2),
@@ -66,71 +64,64 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
       ),
     [currentIndex, slideCount, visibleCount],
   );
-  const dots = React.useMemo(() => {
-    return Array(slideCount)
-      .fill(null)
-      .map((_, index) => {
-        const isFirstSmallDot =
-          (index === firstVisibleDotIndex && index !== 0) ||
-          (index === lastVisibleDotIndex && index !== slideCount - 1);
-        const isSecondSmallDot =
-          (index === firstVisibleDotIndex + 1 && index !== 1) ||
-          (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
-        const isClipped =
-          index < firstVisibleDotIndex || index > lastVisibleDotIndex;
-        return React.createElement(CarouselDot, {
-          key: index,
-          'aria-label': `Slide ${index + 1}`,
-          isActive: index === currentIndex,
-          onClick: () => handleSlideChange(index),
-          isSmall: isSecondSmallDot,
-          isSmaller: isFirstSmallDot || isClipped,
-          id: idPrefix && `${idPrefix}--dot-${index}`,
-        });
-      });
-  }, [
-    slideCount,
-    firstVisibleDotIndex,
-    lastVisibleDotIndex,
-    currentIndex,
-    idPrefix,
-    handleSlideChange,
-  ]);
+  let dots = React.useMemo(
+    () =>
+      Array(slideCount)
+        .fill(null)
+        .map((_, index) => {
+          let isFirstSmallDot =
+            (index === firstVisibleDotIndex && 0 !== index) ||
+            (index === lastVisibleDotIndex && index !== slideCount - 1);
+          let isSecondSmallDot =
+            (index === firstVisibleDotIndex + 1 && 1 !== index) ||
+            (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
+          let isClipped =
+            index < firstVisibleDotIndex || index > lastVisibleDotIndex;
+          return React.createElement(CarouselDot, {
+            key: index,
+            'aria-label': `Slide ${index + 1}`,
+            isActive: index === currentIndex,
+            onClick: () => handleSlideChange(index),
+            isSmall: isSecondSmallDot,
+            isSmaller: isFirstSmallDot || isClipped,
+            id: idPrefix && `${idPrefix}--dot-${index}`,
+          });
+        }),
+    [
+      slideCount,
+      firstVisibleDotIndex,
+      lastVisibleDotIndex,
+      currentIndex,
+      idPrefix,
+      handleSlideChange,
+    ],
+  );
   React.useEffect(() => {
-    const firstDot = listRef.current?.children[firstVisibleDotIndex];
-    if (!listRef.current || !firstDot) {
-      return;
-    }
-    const motionOk = getWindow()?.matchMedia(
+    let firstDot = listRef.current?.children[firstVisibleDotIndex];
+    if (!listRef.current || !firstDot) return;
+    let motionOk = getWindow()?.matchMedia(
       '(prefers-reduced-motion: no-preference)',
     )?.matches;
     listRef.current.scrollTo({
       left: firstDot.offsetLeft - listRef.current.offsetLeft,
       behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
     });
-    if (justMounted.current) {
-      justMounted.current = false;
-    }
+    if (justMounted.current) justMounted.current = false;
   }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+  let handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
       return;
-    }
-    const key = event.key;
-    if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      event.preventDefault();
-    }
+    let key = event.key;
+    if ('ArrowLeft' === key || 'ArrowRight' === key) event.preventDefault();
   };
-  const handleKeyUp = (event) => {
+  let handleKeyUp = (event) => {
     switch (event.key) {
-      case 'ArrowLeft': {
+      case 'ArrowLeft':
         handleSlideChange((slideCount + currentIndex - 1) % slideCount);
         break;
-      }
-      case 'ArrowRight': {
+      case 'ArrowRight':
         handleSlideChange((slideCount + currentIndex + 1) % slideCount);
         break;
-      }
     }
   };
   return React.createElement(

package/esm/core/Carousel/CarouselNavigation.js

@@ -4,8 +4,8 @@ import { CarouselContext } from './CarouselContext.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { Box, SvgChevronLeft, SvgChevronRight } from '../../utils/index.js';
-const CarouselNavigationComponent = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
+let CarouselNavigationComponent = React.forwardRef((props, ref) => {
+  let { className, children, ...rest } = props;
   return React.createElement(
     Box,
     {
@@ -35,12 +35,11 @@ const CarouselNavigationComponent = React.forwardRef((props, ref) => {
       ),
   );
 });
-const PreviousButton = React.forwardRef((props, ref) => {
-  const context = React.useContext(CarouselContext);
-  if (!context) {
+let PreviousButton = React.forwardRef((props, ref) => {
+  let context = React.useContext(CarouselContext);
+  if (!context)
     throw new Error('CarouselNavigation should be used inside Carousel');
-  }
-  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
     IconButton,
     {
@@ -51,7 +50,7 @@ const PreviousButton = React.forwardRef((props, ref) => {
       ref: ref,
       ...props,
       onClick: (e) => {
-        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+        let prevIndex = (slideCount + currentIndex - 1) % slideCount;
         setCurrentIndex(prevIndex);
         scrollToSlide.current(prevIndex, {
           instant: e.detail > 3,
@@ -62,12 +61,11 @@ const PreviousButton = React.forwardRef((props, ref) => {
     React.createElement(SvgChevronLeft, null),
   );
 });
-const NextButton = React.forwardRef((props, ref) => {
-  const context = React.useContext(CarouselContext);
-  if (!context) {
+let NextButton = React.forwardRef((props, ref) => {
+  let context = React.useContext(CarouselContext);
+  if (!context)
     throw new Error('CarouselNavigation should be used inside Carousel');
-  }
-  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
     IconButton,
     {
@@ -78,7 +76,7 @@ const NextButton = React.forwardRef((props, ref) => {
       ref: ref,
       ...props,
       onClick: (e) => {
-        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+        let nextIndex = (slideCount + currentIndex + 1) % slideCount;
         setCurrentIndex(nextIndex);
         scrollToSlide.current(nextIndex, {
           instant: e.detail > 3,

package/esm/core/Carousel/CarouselSlide.js

@@ -8,39 +8,35 @@ import {
 } from '../../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 export const CarouselSlide = React.forwardRef((props, ref) => {
-  const { index, className, children, ...rest } = props;
-  const context = React.useContext(CarouselContext);
-  if (!context || index == null) {
+  let { index, className, children, ...rest } = props;
+  let context = React.useContext(CarouselContext);
+  if (!context || null == index)
     throw new Error('CarouselSlide must be used within Carousel');
-  }
-  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
-  const updateActiveIndexOnScroll = React.useCallback(() => {
-    if (!isManuallyUpdating.current) {
-      setCurrentIndex(index);
-    }
+  let { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
+  let updateActiveIndexOnScroll = React.useCallback(() => {
+    if (!isManuallyUpdating.current) setCurrentIndex(index);
   }, [index, isManuallyUpdating, setCurrentIndex]);
-  const intersectionRef = useIntersection(
+  let intersectionRef = useIntersection(
     updateActiveIndexOnScroll,
     {
       threshold: 0.5,
     },
     false,
   );
-  const refs = useMergedRefs(intersectionRef, ref);
+  let refs = useMergedRefs(intersectionRef, ref);
   return React.createElement(
     Box,
     {
       className: cx('iui-carousel-slider-item', className),
       role: 'tabpanel',
       'aria-roledescription': 'slide',
-      tabIndex: index === currentIndex ? 0 : undefined,
+      tabIndex: index === currentIndex ? 0 : void 0,
       ref: refs,
-      inert: index !== currentIndex ? '' : undefined,
+      inert: index !== currentIndex ? '' : void 0,
       ...rest,
       onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
-        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        if ('ArrowLeft' === event.key || 'ArrowRight' === event.key)
           event.preventDefault();
-        }
       }),
     },
     children,

package/esm/core/Carousel/CarouselSlider.js

@@ -8,14 +8,11 @@ import {
   Box,
 } from '../../utils/index.js';
 export const CarouselSlider = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const context = React.useContext(CarouselContext);
-  if (!context) {
-    throw new Error('CarouselSlider must be used within Carousel');
-  }
-  const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } =
-    context;
-  const items = React.useMemo(
+  let { children, className, ...rest } = props;
+  let context = React.useContext(CarouselContext);
+  if (!context) throw new Error('CarouselSlider must be used within Carousel');
+  let { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
+  let items = React.useMemo(
     () =>
       React.Children.map(children, (child, index) =>
         React.isValidElement(child)
@@ -31,15 +28,13 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
   useLayoutEffect(() => {
     setSlideCount(items.length);
   }, [items.length, setSlideCount]);
-  const sliderRef = React.useRef(null);
-  const refs = useMergedRefs(sliderRef, ref);
+  let sliderRef = React.useRef(null);
+  let refs = useMergedRefs(sliderRef, ref);
   scrollToSlide.current = (slideIndex, { instant } = {}) => {
     isManuallyUpdating.current = true;
-    const slideToShow = sliderRef.current?.children.item(slideIndex);
-    if (!sliderRef.current || !slideToShow) {
-      return;
-    }
-    const motionOk = getWindow()?.matchMedia(
+    let slideToShow = sliderRef.current?.children.item(slideIndex);
+    if (!sliderRef.current || !slideToShow) return;
+    let motionOk = getWindow()?.matchMedia(
       '(prefers-reduced-motion: no-preference)',
     )?.matches;
     sliderRef.current.scrollTo({
@@ -47,11 +42,9 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
       behavior: instant || !motionOk ? 'instant' : 'smooth',
     });
   };
-  const scrollTimeout = React.useRef();
-  const handleOnScroll = React.useCallback(() => {
-    if (scrollTimeout.current) {
-      getWindow()?.clearTimeout(scrollTimeout.current);
-    }
+  let scrollTimeout = React.useRef();
+  let handleOnScroll = React.useCallback(() => {
+    if (scrollTimeout.current) getWindow()?.clearTimeout(scrollTimeout.current);
     scrollTimeout.current = getWindow()?.setTimeout(() => {
       isManuallyUpdating.current = false;
     }, 100);

package/esm/core/Checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { useMergedRefs, Box } from '../../utils/index.js';
 export const Checkbox = React.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     disabled = false,
     indeterminate = false,
@@ -16,17 +16,16 @@ export const Checkbox = React.forwardRef((props, ref) => {
     style,
     ...rest
   } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = useMergedRefs(inputElementRef, ref);
+  let inputElementRef = React.useRef(null);
+  let refs = useMergedRefs(inputElementRef, ref);
   React.useEffect(() => {
     if (inputElementRef.current) {
       inputElementRef.current.indeterminate = indeterminate;
-      inputElementRef.current.checked = indeterminate
-        ? false
-        : inputElementRef.current.checked;
+      inputElementRef.current.checked =
+        !indeterminate && inputElementRef.current.checked;
     }
   });
-  const checkbox = React.createElement(
+  let checkbox = React.createElement(
     React.Fragment,
     null,
     React.createElement(Box, {
@@ -34,7 +33,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
       className: cx(
         'iui-checkbox',
         {
-          'iui-checkbox-visibility': variant === 'eyeball',
+          'iui-checkbox-visibility': 'eyeball' === variant,
           'iui-loading': isLoading,
         },
         className,
@@ -51,11 +50,10 @@ export const Checkbox = React.forwardRef((props, ref) => {
         indeterminate: true,
       }),
   );
-  const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
-  const { className: labelClassName, ...restLabelProps } = labelProps;
-  return !label
-    ? checkbox
-    : React.createElement(
+  let { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+  let { className: labelClassName, ...restLabelProps } = labelProps;
+  return label
+    ? React.createElement(
         Box,
         {
           as: 'label',
@@ -81,5 +79,6 @@ export const Checkbox = React.forwardRef((props, ref) => {
             },
             label,
           ),
-      );
+      )
+    : checkbox;
 });