@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/core/Carousel/CarouselNavigation.js

@@ -1,88 +1,107 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CarouselNavigation = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_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)),
-        React.createElement(CarouselDotsList_js_1.CarouselDotsList, null),
-        React.createElement(index_js_1.Box, { className: 'iui-carousel-navigation-right' },
-            React.createElement(NextButton, null))))));
+Object.defineProperty(exports, 'CarouselNavigation', {
+  enumerable: true,
+  get: function () {
+    return CarouselNavigation;
+  },
 });
-/** 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 _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _CarouselContext = require('./CarouselContext.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _CarouselDotsList = require('./CarouselDotsList.js');
+const _index = require('../../utils/index.js');
+const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-carousel-navigation', className),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      _react.createElement(
+        _react.Fragment,
+        null,
+        _react.createElement(
+          _index.Box,
+          {
+            className: 'iui-carousel-navigation-left',
+          },
+          _react.createElement(PreviousButton, null),
+        ),
+        _react.createElement(_CarouselDotsList.CarouselDotsList, null),
+        _react.createElement(
+          _index.Box,
+          {
+            className: 'iui-carousel-navigation-right',
+          },
+          _react.createElement(NextButton, 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 PreviousButton = _react.forwardRef((props, ref) => {
+  const context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  return _react.createElement(
+    _IconButton.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.SvgChevronLeft, null),
+  );
 });
-/**
- * The `CarouselNavigation` component by default consists of the `PreviousButton` and `NextButton`
- * shown on the left and right, and the `CarouselDotsList` component shown in the middle.
- *
- * `children` can be specified to override what is shown in this navigation section.
- */
-exports.CarouselNavigation = Object.assign(CarouselNavigationComponent, {
-    PreviousButton,
-    NextButton,
+const NextButton = _react.forwardRef((props, ref) => {
+  const context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context) {
+    throw new Error('CarouselNavigation should be used inside Carousel');
+  }
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
+  return _react.createElement(
+    _IconButton.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.SvgChevronRight, null),
+  );
+});
+const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
+  PreviousButton,
+  NextButton,
 });

package/cjs/core/Carousel/CarouselSlide.js

@@ -1,65 +1,58 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'CarouselSlide', {
+  enumerable: true,
+  get: function () {
+    return CarouselSlide;
+  },
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CarouselSlide = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_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`.
- *
- * It is recommended that the slide content bring its own dimensions (esp. height) and that
- * 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 _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _index = require('../../utils/index.js');
+const _CarouselContext = require('./CarouselContext.js');
+const CarouselSlide = _react.forwardRef((props, ref) => {
+  const { index, className, children, ...rest } = props;
+  const context = _react.useContext(_CarouselContext.CarouselContext);
+  if (!context || index == null) {
+    throw new Error('CarouselSlide must be used within Carousel');
+  }
+  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
+  const updateActiveIndexOnScroll = _react.useCallback(() => {
+    if (!isManuallyUpdating.current) {
+      setCurrentIndex(index);
     }
-    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.useIntersection)(
+    updateActiveIndexOnScroll,
+    {
+      threshold: 0.5,
+    },
+    false,
+  );
+  const refs = (0, _index.useMergedRefs)(intersectionRef, ref);
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.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.mergeEventHandlers)(props.onKeyDown, (event) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          event.preventDefault();
         }
-    }, [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));
+      }),
+    },
+    children,
+  );
 });

package/cjs/core/Carousel/CarouselSlider.d.ts

@@ -2,4 +2,4 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export declare const CarouselSlider: PolymorphicForwardRefComponent<"div", {}>;
+export declare const CarouselSlider: PolymorphicForwardRefComponent<"div">;

package/cjs/core/Carousel/CarouselSlider.js

@@ -1,83 +1,77 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'CarouselSlider', {
+  enumerable: true,
+  get: function () {
+    return CarouselSlider;
+  },
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CarouselSlider = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_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 _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _classnames = _interop_require_default._(require('classnames'));
+const _CarouselContext = require('./CarouselContext.js');
+const _index = require('../../utils/index.js');
+const CarouselSlider = _react.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const context = _react.useContext(_CarouselContext.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.useLayoutEffect)(() => {
+    setSlideCount(items.length);
+  }, [items.length, setSlideCount]);
+  const sliderRef = _react.useRef(null);
+  const refs = (0, _index.useMergedRefs)(sliderRef, ref);
+  scrollToSlide.current = (slideIndex, { instant } = {}) => {
+    isManuallyUpdating.current = true;
+    const slideToShow = sliderRef.current?.children.item(slideIndex);
+    if (!sliderRef.current || !slideToShow) {
+      return;
+    }
+    const motionOk = (0, _index.getWindow)()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.matches;
+    sliderRef.current.scrollTo({
+      left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
+      behavior: instant || !motionOk ? 'instant' : 'smooth',
+    });
+  };
+  const scrollTimeout = _react.useRef();
+  const handleOnScroll = _react.useCallback(() => {
+    if (scrollTimeout.current) {
+      (0, _index.getWindow)()?.clearTimeout(scrollTimeout.current);
     }
-    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.useLayoutEffect)(() => {
-        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));
+    scrollTimeout.current = (0, _index.getWindow)()?.setTimeout(() => {
+      isManuallyUpdating.current = false;
+    }, 100);
+  }, [isManuallyUpdating]);
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)('iui-carousel-slider', className),
+      ref: refs,
+      onScroll: handleOnScroll,
+      tabIndex: -1,
+      ...rest,
+    },
+    items,
+  );
 });