@itwin/itwinui-react/DEV-esm/core/Carousel/CarouselSlide.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import {
  Box,
  mergeEventHandlers,
  useIntersection,
  useMergedRefs,
} from '../../utils/index.js';
import { CarouselContext } from './CarouselContext.js';
export const CarouselSlide = React.forwardRef((props, ref) => {
  let { index, className, children, ...rest } = props;
  let context = React.useContext(CarouselContext);
  if (!context || null == index)
    throw new Error('CarouselSlide must be used within Carousel');
  let { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
  let updateActiveIndexOnScroll = React.useCallback(() => {
    if (!isManuallyUpdating.current) setCurrentIndex(index);
  }, [index, isManuallyUpdating, setCurrentIndex]);
  let intersectionRef = useIntersection(
    updateActiveIndexOnScroll,
    {
      threshold: 0.5,
    },
    false,
  );
  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 : void 0,
      ref: refs,
      inert: index !== currentIndex ? 'true' : void 0,
      ...rest,
      onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
        if ('ArrowLeft' === event.key || 'ArrowRight' === event.key)
          event.preventDefault();
      }),
    },
    children,
  );
});
if ('development' === process.env.NODE_ENV)
  CarouselSlide.displayName = 'Carousel.Slide';