@itwin/itwinui-react 3.13.3 → 3.14.0

package/DEV-cjs/core/Carousel/Carousel.js

@@ -1,74 +1,84 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "Carousel", {
-    enumerable: true,
-    get: function() {
-        return Carousel;
-    }
+Object.defineProperty(exports, 'Carousel', {
+  enumerable: true,
+  get: function () {
+    return 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 _CarouselSlider = require("./CarouselSlider.js");
-const _CarouselSlide = require("./CarouselSlide.js");
-const _CarouselDotsList = require("./CarouselDotsList.js");
-const _CarouselDot = require("./CarouselDot.js");
-const _CarouselNavigation = require("./CarouselNavigation.js");
-const CarouselComponent = _react.forwardRef((props, ref)=>{
-    let idPrefix = (0, _index.useId)();
-    let { activeSlideIndex: userActiveIndex = 0, onSlideChange, className, children, id = idPrefix, ...rest } = props;
-    let isManuallyUpdating = _react.useRef(false);
-    let carouselRef = _react.useRef(null);
-    let refs = (0, _index.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, {
-            instant: justMounted.current
-        });
-        justMounted.current = false;
-    }, [
-        userActiveIndex
-    ]);
-    let [slideCount, setSlideCount] = _react.useState(0);
-    let userOnSlideChange = (0, _index.useLatestRef)(onSlideChange);
-    _react.useEffect(()=>{
-        userOnSlideChange.current?.(currentIndex);
-    }, [
-        userOnSlideChange,
-        currentIndex
-    ]);
-    return _react.createElement(_index.Box, {
-        as: "section",
-        "aria-roledescription": "carousel",
-        ref: refs,
-        className: (0, _classnames.default)('iui-carousel', className),
-        ...rest,
-        id: id
-    }, _react.createElement(_CarouselContext.CarouselContext.Provider, {
+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 _CarouselSlider = require('./CarouselSlider.js');
+const _CarouselSlide = require('./CarouselSlide.js');
+const _CarouselDotsList = require('./CarouselDotsList.js');
+const _CarouselDot = require('./CarouselDot.js');
+const _CarouselNavigation = require('./CarouselNavigation.js');
+const CarouselComponent = _react.forwardRef((props, ref) => {
+  let idPrefix = (0, _index.useId)();
+  let {
+    activeSlideIndex: userActiveIndex = 0,
+    onSlideChange,
+    className,
+    children,
+    id = idPrefix,
+    ...rest
+  } = props;
+  let isManuallyUpdating = _react.useRef(false);
+  let carouselRef = _react.useRef(null);
+  let refs = (0, _index.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, {
+      instant: justMounted.current,
+    });
+    justMounted.current = false;
+  }, [userActiveIndex]);
+  let [slideCount, setSlideCount] = _react.useState(0);
+  let userOnSlideChange = (0, _index.useLatestRef)(onSlideChange);
+  _react.useEffect(() => {
+    userOnSlideChange.current?.(currentIndex);
+  }, [userOnSlideChange, currentIndex]);
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'section',
+      'aria-roledescription': 'carousel',
+      ref: refs,
+      className: (0, _classnames.default)('iui-carousel', className),
+      ...rest,
+      id: id,
+    },
+    _react.createElement(
+      _CarouselContext.CarouselContext.Provider,
+      {
         value: {
-            currentIndex,
-            setCurrentIndex,
-            slideCount,
-            setSlideCount,
-            idPrefix: id,
-            isManuallyUpdating,
-            scrollToSlide
-        }
-    }, children));
+          currentIndex,
+          setCurrentIndex,
+          slideCount,
+          setSlideCount,
+          idPrefix: id,
+          isManuallyUpdating,
+          scrollToSlide,
+        },
+      },
+      children,
+    ),
+  );
 });
 CarouselComponent.displayName = 'Carousel';
 const Carousel = Object.assign(CarouselComponent, {
-    Slider: _CarouselSlider.CarouselSlider,
-    Slide: _CarouselSlide.CarouselSlide,
-    Navigation: _CarouselNavigation.CarouselNavigation,
-    DotsList: _CarouselDotsList.CarouselDotsList,
-    Dot: _CarouselDot.CarouselDot
+  Slider: _CarouselSlider.CarouselSlider,
+  Slide: _CarouselSlide.CarouselSlide,
+  Navigation: _CarouselNavigation.CarouselNavigation,
+  DotsList: _CarouselDotsList.CarouselDotsList,
+  Dot: _CarouselDot.CarouselDot,
 });

package/DEV-cjs/core/Carousel/CarouselContext.js

@@ -1,14 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "CarouselContext", {
-    enumerable: true,
-    get: function() {
-        return CarouselContext;
-    }
+Object.defineProperty(exports, 'CarouselContext', {
+  enumerable: true,
+  get: function () {
+    return CarouselContext;
+  },
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = _interop_require_wildcard._(require("react"));
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
 const CarouselContext = _react.createContext(void 0);
 CarouselContext.displayName = 'CarouselContext';

package/DEV-cjs/core/Carousel/CarouselDot.js

@@ -1,31 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "CarouselDot", {
-    enumerable: true,
-    get: function() {
-        return CarouselDot;
-    }
+Object.defineProperty(exports, 'CarouselDot', {
+  enumerable: true,
+  get: function () {
+    return CarouselDot;
+  },
 });
-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 CarouselDot = _react.forwardRef((props, ref)=>{
-    let { isActive, isSmaller, isSmall, className, ...rest } = props;
-    return _react.createElement(_index.ButtonBase, {
-        role: "tab",
-        tabIndex: isActive ? 0 : -1,
-        className: (0, _classnames.default)('iui-carousel-navigation-dot', {
-            'iui-active': isActive,
-            'iui-first': isSmaller,
-            'iui-second': isSmall
-        }, className),
-        "aria-selected": isActive,
-        ref: ref,
-        ...rest
-    });
+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 CarouselDot = _react.forwardRef((props, ref) => {
+  let { isActive, isSmaller, isSmall, className, ...rest } = props;
+  return _react.createElement(_index.ButtonBase, {
+    role: 'tab',
+    tabIndex: isActive ? 0 : -1,
+    className: (0, _classnames.default)(
+      'iui-carousel-navigation-dot',
+      {
+        'iui-active': isActive,
+        'iui-first': isSmaller,
+        'iui-second': isSmall,
+      },
+      className,
+    ),
+    'aria-selected': isActive,
+    ref: ref,
+    ...rest,
+  });
 });
 CarouselDot.displayName = 'Carousel.Dot';

package/DEV-cjs/core/Carousel/CarouselDotsList.js

@@ -1,122 +1,157 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-Object.defineProperty(exports, "CarouselDotsList", {
-    enumerable: true,
-    get: function() {
-        return CarouselDotsList;
-    }
+Object.defineProperty(exports, 'CarouselDotsList', {
+  enumerable: true,
+  get: function () {
+    return CarouselDotsList;
+  },
 });
-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 _CarouselDot = require("./CarouselDot.js");
-const CarouselDotsList = _react.forwardRef((props, ref)=>{
-    let { currentIndex: userCurrentIndex, length, className, onSlideChange, children, ...rest } = props;
-    let context = _react.useContext(_CarouselContext.CarouselContext);
-    let slideCount = length ?? context?.slideCount ?? _react.Children.count(children);
-    let currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
-    let idPrefix = props.id ?? context?.idPrefix;
-    let handleSlideChange = _react.useCallback((index)=>{
-        if (context) {
-            context.setCurrentIndex(index);
-            context.scrollToSlide.current(index);
-        }
-        listRef.current?.children[index]?.focus();
-        onSlideChange?.(index);
-    }, [
-        context,
-        onSlideChange
-    ]);
-    let justMounted = _react.useRef(true);
-    let [visibleCount, setVisibleCount] = _react.useState(slideCount);
-    let listRef = _react.useRef(null);
-    let [width, setWidth] = _react.useState();
-    let [resizeRef, resizeObserver] = (0, _index.useResizeObserver)(({ width })=>{
-        if (!listRef.current) return;
-        setWidth(width);
-        let dotWidth = listRef.current.children[0].offsetWidth;
-        setVisibleCount(Math.floor(width / dotWidth));
+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 _CarouselDot = require('./CarouselDot.js');
+const CarouselDotsList = _react.forwardRef((props, ref) => {
+  let {
+    currentIndex: userCurrentIndex,
+    length,
+    className,
+    onSlideChange,
+    children,
+    ...rest
+  } = props;
+  let context = _react.useContext(_CarouselContext.CarouselContext);
+  let slideCount =
+    length ?? context?.slideCount ?? _react.Children.count(children);
+  let currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
+  let idPrefix = props.id ?? context?.idPrefix;
+  let handleSlideChange = _react.useCallback(
+    (index) => {
+      if (context) {
+        context.setCurrentIndex(index);
+        context.scrollToSlide.current(index);
+      }
+      listRef.current?.children[index]?.focus();
+      onSlideChange?.(index);
+    },
+    [context, onSlideChange],
+  );
+  let justMounted = _react.useRef(true);
+  let [visibleCount, setVisibleCount] = _react.useState(slideCount);
+  let listRef = _react.useRef(null);
+  let [width, setWidth] = _react.useState();
+  let [resizeRef, resizeObserver] = (0, _index.useResizeObserver)(
+    ({ width }) => {
+      if (!listRef.current) return;
+      setWidth(width);
+      let dotWidth = listRef.current.children[0].offsetWidth;
+      setVisibleCount(Math.floor(width / dotWidth));
+    },
+  );
+  _react.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
+  let refs = (0, _index.useMergedRefs)(ref, resizeRef, listRef);
+  let firstVisibleDotIndex = _react.useMemo(
+    () =>
+      (0, _index.getBoundedValue)(
+        currentIndex - Math.ceil(visibleCount / 2) + 1,
+        0,
+        slideCount - visibleCount,
+      ),
+    [currentIndex, slideCount, visibleCount],
+  );
+  let lastVisibleDotIndex = _react.useMemo(
+    () =>
+      (0, _index.getBoundedValue)(
+        currentIndex + Math.floor(visibleCount / 2),
+        visibleCount - 1,
+        slideCount - 1,
+      ),
+    [currentIndex, slideCount, visibleCount],
+  );
+  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.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(() => {
+    let firstDot = listRef.current?.children[firstVisibleDotIndex];
+    if (!listRef.current || !firstDot) return;
+    let motionOk = (0, _index.getWindow)()?.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    )?.matches;
+    listRef.current.scrollTo({
+      left: firstDot.offsetLeft - listRef.current.offsetLeft,
+      behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
     });
-    _react.useEffect(()=>resizeObserver?.disconnect(), [
-        resizeObserver
-    ]);
-    let refs = (0, _index.useMergedRefs)(ref, resizeRef, listRef);
-    let firstVisibleDotIndex = _react.useMemo(()=>(0, _index.getBoundedValue)(currentIndex - Math.ceil(visibleCount / 2) + 1, 0, slideCount - visibleCount), [
-        currentIndex,
-        slideCount,
-        visibleCount
-    ]);
-    let lastVisibleDotIndex = _react.useMemo(()=>(0, _index.getBoundedValue)(currentIndex + Math.floor(visibleCount / 2), visibleCount - 1, slideCount - 1), [
-        currentIndex,
-        slideCount,
-        visibleCount
-    ]);
-    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.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(()=>{
-        let firstDot = listRef.current?.children[firstVisibleDotIndex];
-        if (!listRef.current || !firstDot) return;
-        let motionOk = (0, _index.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;
-    }, [
-        currentIndex,
-        firstVisibleDotIndex,
-        slideCount,
-        visibleCount,
-        width
-    ]);
-    let handleKeyDown = (event)=>{
-        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
-        let key = event.key;
-        if ('ArrowLeft' === key || 'ArrowRight' === key) event.preventDefault();
-    };
-    let handleKeyUp = (event)=>{
-        switch(event.key){
-            case 'ArrowLeft':
-                handleSlideChange((slideCount + currentIndex - 1) % slideCount);
-                break;
-            case 'ArrowRight':
-                handleSlideChange((slideCount + currentIndex + 1) % slideCount);
-                break;
-        }
-    };
-    return _react.createElement(_react.Fragment, null, _react.createElement(_index.Box, {
-        className: (0, _classnames.default)('iui-carousel-navigation-dots', className),
-        role: "tablist",
-        "aria-label": "Slides",
+    if (justMounted.current) justMounted.current = false;
+  }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  let handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+      return;
+    let key = event.key;
+    if ('ArrowLeft' === key || 'ArrowRight' === key) event.preventDefault();
+  };
+  let handleKeyUp = (event) => {
+    switch (event.key) {
+      case 'ArrowLeft':
+        handleSlideChange((slideCount + currentIndex - 1) % slideCount);
+        break;
+      case 'ArrowRight':
+        handleSlideChange((slideCount + currentIndex + 1) % slideCount);
+        break;
+    }
+  };
+  return _react.createElement(
+    _react.Fragment,
+    null,
+    _react.createElement(
+      _index.Box,
+      {
+        className: (0, _classnames.default)(
+          'iui-carousel-navigation-dots',
+          className,
+        ),
+        role: 'tablist',
+        'aria-label': 'Slides',
         ref: refs,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
         tabIndex: -1,
-        ...rest
-    }, children ?? dots));
+        ...rest,
+      },
+      children ?? dots,
+    ),
+  );
 });
 CarouselDotsList.displayName = 'Carousel.DotsList';