@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/Carousel/CarouselNavigation.js

@@ -1,98 +1,55 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselNavigation = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const CarouselContext_js_1 = require('./CarouselContext.js');
-const IconButton_js_1 = require('../Buttons/IconButton.js');
-const CarouselDotsList_js_1 = require('./CarouselDotsList.js');
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const CarouselContext_js_1 = require("./CarouselContext.js");
+const IconButton_js_1 = require("../Buttons/IconButton.js");
+const CarouselDotsList_js_1 = require("./CarouselDotsList.js");
+const index_js_1 = require("../utils/index.js");
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-carousel-navigation',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-carousel-navigation-left' },
-          React.createElement(PreviousButton, null),
-        ),
+    const { className, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-navigation', className), ref: ref, ...rest }, children ?? (React.createElement(React.Fragment, null,
+        React.createElement(index_js_1.Box, { className: 'iui-carousel-navigation-left' },
+            React.createElement(PreviousButton, null)),
         React.createElement(CarouselDotsList_js_1.CarouselDotsList, null),
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-carousel-navigation-right' },
-          React.createElement(NextButton, null),
-        ),
-      ),
-  );
+        React.createElement(index_js_1.Box, { className: 'iui-carousel-navigation-right' },
+            React.createElement(NextButton, null))))));
 });
 /** Button for switching to previous slide */
 const PreviousButton = React.forwardRef((props, ref) => {
-  const context = React.useContext(CarouselContext_js_1.CarouselContext);
-  if (!context) {
-    throw new Error('CarouselNavigation should be used inside Carousel');
-  }
-  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return React.createElement(
-    IconButton_js_1.IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      tabIndex: -1,
-      'aria-label': 'Previous',
-      ref: ref,
-      ...props,
-      onClick: (e) => {
-        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-        setCurrentIndex(prevIndex);
-        scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
-        props?.onClick?.(e);
-      },
-    },
-    React.createElement(index_js_1.SvgChevronLeft, null),
-  );
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
+    if (!context) {
+        throw new Error('CarouselNavigation should be used inside Carousel');
+    }
+    const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "aria-label": 'Previous', ref: ref, ...props, onClick: (e) => {
+            const prevIndex = (slideCount + currentIndex - 1) % slideCount;
+            setCurrentIndex(prevIndex);
+            scrollToSlide.current(prevIndex, { instant: e.detail > 3 });
+            props?.onClick?.(e);
+        } },
+        React.createElement(index_js_1.SvgChevronLeft, null)));
 });
 /** Button for switching to next slide */
 const NextButton = React.forwardRef((props, ref) => {
-  const context = React.useContext(CarouselContext_js_1.CarouselContext);
-  if (!context) {
-    throw new Error('CarouselNavigation should be used inside Carousel');
-  }
-  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
-  return React.createElement(
-    IconButton_js_1.IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      tabIndex: -1,
-      'aria-label': 'Next',
-      ref: ref,
-      ...props,
-      onClick: (e) => {
-        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-        setCurrentIndex(nextIndex);
-        scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
-        props?.onClick?.(e);
-      },
-    },
-    React.createElement(index_js_1.SvgChevronRight, null),
-  );
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
+    if (!context) {
+        throw new Error('CarouselNavigation should be used inside Carousel');
+    }
+    const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', tabIndex: -1, "aria-label": 'Next', ref: ref, ...props, onClick: (e) => {
+            const nextIndex = (slideCount + currentIndex + 1) % slideCount;
+            setCurrentIndex(nextIndex);
+            scrollToSlide.current(nextIndex, { instant: e.detail > 3 });
+            props?.onClick?.(e);
+        } },
+        React.createElement(index_js_1.SvgChevronRight, null)));
 });
 /**
  * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
@@ -101,6 +58,6 @@ const NextButton = React.forwardRef((props, ref) => {
  * `children` can be specified to override what is shown in this navigation section.
  */
 exports.CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-  PreviousButton,
-  NextButton,
+    PreviousButton,
+    NextButton,
 });

package/cjs/core/Carousel/CarouselSlide.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselSlide = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const CarouselContext_js_1 = require('./CarouselContext.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const CarouselContext_js_1 = require("./CarouselContext.js");
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
  *
@@ -17,47 +17,24 @@ const CarouselContext_js_1 = require('./CarouselContext.js');
  * the dimensions should be the same for all slides.
  */
 exports.CarouselSlide = React.forwardRef((props, ref) => {
-  const { index, className, children, ...rest } = props;
-  const context = React.useContext(CarouselContext_js_1.CarouselContext);
-  if (!context || index == null) {
-    throw new Error('CarouselSlide must be used within Carousel');
-  }
-  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
-  const updateActiveIndexOnScroll = React.useCallback(() => {
-    // only update index if scroll was triggered by browser
-    if (!isManuallyUpdating.current) {
-      setCurrentIndex(index);
+    const { index, className, children, ...rest } = props;
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
+    if (!context || index == null) {
+        throw new Error('CarouselSlide must be used within Carousel');
     }
-  }, [index, isManuallyUpdating, setCurrentIndex]);
-  const intersectionRef = (0, index_js_1.useIntersection)(
-    updateActiveIndexOnScroll,
-    { threshold: 0.5 },
-    false,
-  );
-  const refs = (0, index_js_1.useMergedRefs)(intersectionRef, ref);
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-carousel-slider-item',
-        className,
-      ),
-      role: 'tabpanel',
-      'aria-roledescription': 'slide',
-      tabIndex: index === currentIndex ? 0 : undefined,
-      ref: refs,
-      inert: index !== currentIndex ? '' : undefined,
-      ...rest,
-      onKeyDown: (0, index_js_1.mergeEventHandlers)(
-        props.onKeyDown,
-        (event) => {
-          // prevent default browser scrolling on arrow keys because focus will get lost when slide switches
-          if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-            event.preventDefault();
-          }
-        },
-      ),
-    },
-    children,
-  );
+    const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
+    const updateActiveIndexOnScroll = React.useCallback(() => {
+        // only update index if scroll was triggered by browser
+        if (!isManuallyUpdating.current) {
+            setCurrentIndex(index);
+        }
+    }, [index, isManuallyUpdating, setCurrentIndex]);
+    const intersectionRef = (0, index_js_1.useIntersection)(updateActiveIndexOnScroll, { threshold: 0.5 }, false);
+    const refs = (0, index_js_1.useMergedRefs)(intersectionRef, ref);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-slider-item', className), role: 'tabpanel', "aria-roledescription": 'slide', tabIndex: index === currentIndex ? 0 : undefined, ref: refs, inert: index !== currentIndex ? '' : undefined, ...rest, onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, (event) => {
+            // prevent default browser scrolling on arrow keys because focus will get lost when slide switches
+            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+                event.preventDefault();
+            }
+        }) }, children));
 });

package/cjs/core/Carousel/CarouselSlider.js

@@ -1,77 +1,58 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselSlider = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const CarouselContext_js_1 = require('./CarouselContext.js');
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const CarouselContext_js_1 = require("./CarouselContext.js");
+const index_js_1 = require("../utils/index.js");
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
 exports.CarouselSlider = React.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
-  const context = React.useContext(CarouselContext_js_1.CarouselContext);
-  if (!context) {
-    throw new Error('CarouselSlider must be used within Carousel');
-  }
-  const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } =
-    context;
-  const items = React.useMemo(
-    () =>
-      React.Children.map(children, (child, index) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child, {
-              id: `${idPrefix}--slide-${index}`,
-              'aria-labelledby': `${idPrefix}--dot-${index}`,
-              index,
-            })
-          : child,
-      ) ?? [],
-    [children, idPrefix],
-  );
-  (0, index_js_1.useIsomorphicLayoutEffect)(() => {
-    setSlideCount(items.length);
-  }, [items.length, setSlideCount]);
-  const sliderRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(sliderRef, ref);
-  scrollToSlide.current = (slideIndex, { instant } = {}) => {
-    isManuallyUpdating.current = true; // start manual update
-    const slideToShow = sliderRef.current?.children.item(slideIndex);
-    if (!sliderRef.current || !slideToShow) {
-      return;
+    const { children, className, ...rest } = props;
+    const context = React.useContext(CarouselContext_js_1.CarouselContext);
+    if (!context) {
+        throw new Error('CarouselSlider must be used within Carousel');
     }
-    const motionOk = (0, index_js_1.getWindow)()?.matchMedia(
-      '(prefers-reduced-motion: no-preference)',
-    )?.matches;
-    sliderRef.current.scrollTo({
-      left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
-      behavior: instant || !motionOk ? 'instant' : 'smooth', // scrollTo accepts 'instant' but ScrollBehavior type is wrong
-    });
-  };
-  const scrollTimeout = React.useRef();
-  // reset isManuallyUpdating.current to false after the last scroll event
-  const handleOnScroll = React.useCallback(() => {
-    if (scrollTimeout.current) {
-      (0, index_js_1.getWindow)()?.clearTimeout(scrollTimeout.current);
-    }
-    scrollTimeout.current = (0, index_js_1.getWindow)()?.setTimeout(() => {
-      isManuallyUpdating.current = false;
-    }, 100);
-  }, [isManuallyUpdating]);
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-carousel-slider', className),
-      ref: refs,
-      onScroll: handleOnScroll,
-      tabIndex: -1,
-      ...rest,
-    },
-    items,
-  );
+    const { setSlideCount, idPrefix, scrollToSlide, isManuallyUpdating } = context;
+    const items = React.useMemo(() => React.Children.map(children, (child, index) => React.isValidElement(child)
+        ? React.cloneElement(child, {
+            id: `${idPrefix}--slide-${index}`,
+            'aria-labelledby': `${idPrefix}--dot-${index}`,
+            index,
+        })
+        : child) ?? [], [children, idPrefix]);
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        setSlideCount(items.length);
+    }, [items.length, setSlideCount]);
+    const sliderRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(sliderRef, ref);
+    scrollToSlide.current = (slideIndex, { instant } = {}) => {
+        isManuallyUpdating.current = true; // start manual update
+        const slideToShow = sliderRef.current?.children.item(slideIndex);
+        if (!sliderRef.current || !slideToShow) {
+            return;
+        }
+        const motionOk = (0, index_js_1.getWindow)()?.matchMedia('(prefers-reduced-motion: no-preference)')?.matches;
+        sliderRef.current.scrollTo({
+            left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+            behavior: (instant || !motionOk ? 'instant' : 'smooth'), // scrollTo accepts 'instant' but ScrollBehavior type is wrong
+        });
+    };
+    const scrollTimeout = React.useRef();
+    // reset isManuallyUpdating.current to false after the last scroll event
+    const handleOnScroll = React.useCallback(() => {
+        if (scrollTimeout.current) {
+            (0, index_js_1.getWindow)()?.clearTimeout(scrollTimeout.current);
+        }
+        scrollTimeout.current = (0, index_js_1.getWindow)()?.setTimeout(() => {
+            isManuallyUpdating.current = false;
+        }, 100);
+    }, [isManuallyUpdating]);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-carousel-slider', className), ref: refs, onScroll: handleOnScroll, tabIndex: -1, ...rest }, items));
 });

package/cjs/core/Checkbox/Checkbox.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const ProgressRadial_js_1 = require('../ProgressIndicators/ProgressRadial.js');
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const ProgressRadial_js_1 = require("../ProgressIndicators/ProgressRadial.js");
+const index_js_1 = require("../utils/index.js");
 /**
  * Simple input checkbox
  * @example
@@ -23,87 +23,31 @@ const index_js_1 = require('../utils/index.js');
  * <Checkbox label='Visibility Checkbox' variant='eyeball' />
  */
 exports.Checkbox = React.forwardRef((props, ref) => {
-  const {
-    className,
-    disabled = false,
-    indeterminate = false,
-    label,
-    status,
-    variant = 'default',
-    isLoading = false,
-    wrapperProps = {},
-    labelProps = {},
-    style,
-    ...rest
-  } = props;
-  const inputElementRef = React.useRef(null);
-  const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
-  React.useEffect(() => {
-    if (inputElementRef.current) {
-      inputElementRef.current.indeterminate = indeterminate;
-      inputElementRef.current.checked = indeterminate
-        ? false
-        : inputElementRef.current.checked;
-    }
-  });
-  const checkbox = React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(index_js_1.Box, {
-      as: 'input',
-      className: (0, classnames_1.default)(
-        'iui-checkbox',
-        {
-          'iui-checkbox-visibility': variant === 'eyeball',
-          'iui-loading': isLoading,
-        },
-        className,
-      ),
-      style: style,
-      disabled: disabled || isLoading,
-      type: 'checkbox',
-      ref: refs,
-      ...rest,
-    }),
-    isLoading &&
-      React.createElement(ProgressRadial_js_1.ProgressRadial, {
-        size: 'x-small',
-        indeterminate: true,
-      }),
-  );
-  const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
-  const { className: labelClassName, ...restLabelProps } = labelProps;
-  return !label
-    ? checkbox
-    : React.createElement(
-        index_js_1.Box,
-        {
-          as: 'label',
-          className: (0, classnames_1.default)(
-            'iui-checkbox-wrapper',
-            {
-              'iui-disabled': disabled,
-              [`iui-${status}`]: !!status,
-              'iui-loading': isLoading,
-            },
-            wrapperClassName,
-          ),
-          ...restWrapperProps,
-        },
+    const { className, disabled = false, indeterminate = false, label, status, variant = 'default', isLoading = false, wrapperProps = {}, labelProps = {}, style, ...rest } = props;
+    const inputElementRef = React.useRef(null);
+    const refs = (0, index_js_1.useMergedRefs)(inputElementRef, ref);
+    React.useEffect(() => {
+        if (inputElementRef.current) {
+            inputElementRef.current.indeterminate = indeterminate;
+            inputElementRef.current.checked = indeterminate
+                ? false
+                : inputElementRef.current.checked;
+        }
+    });
+    const checkbox = (React.createElement(React.Fragment, null,
+        React.createElement(index_js_1.Box, { as: 'input', className: (0, classnames_1.default)('iui-checkbox', {
+                'iui-checkbox-visibility': variant === 'eyeball',
+                'iui-loading': isLoading,
+            }, className), style: style, disabled: disabled || isLoading, type: 'checkbox', ref: refs, ...rest }),
+        isLoading && React.createElement(ProgressRadial_js_1.ProgressRadial, { size: 'x-small', indeterminate: true })));
+    const { className: wrapperClassName, ...restWrapperProps } = wrapperProps;
+    const { className: labelClassName, ...restLabelProps } = labelProps;
+    return !label ? (checkbox) : (React.createElement(index_js_1.Box, { as: 'label', className: (0, classnames_1.default)('iui-checkbox-wrapper', {
+            'iui-disabled': disabled,
+            [`iui-${status}`]: !!status,
+            'iui-loading': isLoading,
+        }, wrapperClassName), ...restWrapperProps },
         checkbox,
-        label &&
-          React.createElement(
-            index_js_1.Box,
-            {
-              as: 'span',
-              className: (0, classnames_1.default)(
-                'iui-checkbox-label',
-                labelClassName,
-              ),
-              ...restLabelProps,
-            },
-            label,
-          ),
-      );
+        label && (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-checkbox-label', labelClassName), ...restLabelProps }, label))));
 });
 exports.default = exports.Checkbox;