@itwin/itwinui-react/cjs/core/Carousel/CarouselSlider.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'CarouselSlider', {
  enumerable: true,
  get: function () {
    return CarouselSlider;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _CarouselContext = require('./CarouselContext.js');
const _index = require('../../utils/index.js');
const CarouselSlider = _react.forwardRef((props, ref) => {
  let { children, className, ...rest } = props;
  let context = _react.useContext(_CarouselContext.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)
          ? _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]);
  let sliderRef = _react.useRef(null);
  let refs = (0, _index.useMergedRefs)(sliderRef, ref);
  let motionOk = (0, _index.useMediaQuery)(
    '(prefers-reduced-motion: no-preference)',
  );
  scrollToSlide.current = (slideIndex, { instant } = {}) => {
    isManuallyUpdating.current = true;
    let slideToShow = sliderRef.current?.children.item(slideIndex);
    if (!sliderRef.current || !slideToShow) return;
    sliderRef.current.scrollTo({
      left: slideToShow.offsetLeft - sliderRef.current.offsetLeft,
      behavior: instant || !motionOk ? 'instant' : 'smooth',
    });
  };
  let scrollTimeout = _react.useRef(void 0);
  let handleOnScroll = _react.useCallback(() => {
    if (scrollTimeout.current)
      (0, _index.getWindow)()?.clearTimeout(scrollTimeout.current);
    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,
  );
});
if ('development' === process.env.NODE_ENV)
  CarouselSlider.displayName = 'Carousel.Slider';