@amaui/ui-react/esm/Carousel/Carousel.js

UI for React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["tonal", "color", "version", "valueDefault", "value", "onChange", "id", "items", "orientation", "itemSize", "gap", "move", "moveValue", "moveItems", "moveBeyondEdge", "free", "swipe", "background", "index", "autoPlay", "autoHeight", "autoHeightDelay", "autoPlayInterval", "pauseOnHover", "round", "arrows", "mouseScroll", "momentum", "previousSub", "nextSub", "updateSub", "arrowsVisibility", "arrowHideOnStartEnd", "renderProgress", "renderArrowPrevious", "renderArrowNext", "progress", "progressVisibility", "start", "end", "noTransition", "onUpdatePosition", "onInit", "onUpdateItems", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "TransitionComponent", "ProgressTransitionComponent", "ArrowTransitionComponent", "ArrowPreviousTransitionComponent", "ArrowNextTransitionComponent", "IconButtonPrevious", "IconButtonNext", "IconPrevious", "IconNext", "ArrowProps", "ArrowPreviousProps", "ArrowNextProps", "CarouselProps", "TransitionsProps", "TransitionComponentProps", "ArrowTransitionComponentProps", "ArrowPreviousTransitionComponentProps", "ArrowNextTransitionComponentProps", "ProgressTransitionComponentProps", "ItemWrapperProps", "Component", "className", "children"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is, unique, clamp, debounce, equalDeep, isEnvironment } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import IconMaterialNavigateBefore from '@amaui/icons-material-rounded-react/IconMaterialNavigateBeforeW100';
import IconMaterialNavigateNext from '@amaui/icons-material-rounded-react/IconMaterialNavigateNextW100';
import LineElement from '../Line';
import FadeElement from '../Fade';
import IconButtonElement from '../IconButton';
import TransitionsElement from '../Transitions';
import SurfaceElement from '../Surface';
import useMediaQuery from '../useMediaQuery';
import { valueBreakpoints, staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
  root: {
    position: 'relative',
    width: '100%',
    height: '540px',
    overflow: 'hidden'
  },
  autoHeight: {
    transition: theme.methods.transitions.make('height')
  },
  item: {
    width: '100%',
    height: '100%',
    flex: '0 0 auto',
    '& img': {
      width: 'auto',
      maxHeight: '100%'
    }
  },
  item_transition: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    '& img': {
      width: 'auto',
      maxHeight: '100%'
    }
  },
  item_version_regular_autoHeight: {
    width: '100%',
    height: 'unset'
  },
  item_version_transition_autoHeight: {
    width: '100%',
    height: 'unset'
  },
  item_itemSize_auto: {
    width: 'auto',
    height: 'auto'
  },
  background: {
    width: '100%',
    height: '100%',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    backgroundSize: 'cover'
  },
  carousel: {
    position: 'relative',
    width: '100%',
    height: '100%',
    touchAction: 'none'
  },
  carousel_version_regular: {
    transition: theme.methods.transitions.make('transform')
  },
  progress: {
    position: 'absolute'
  },
  progress_orientation_horizontal: {
    width: '100%',
    left: '50%',
    transform: 'translateX(-50%)',
    bottom: '24px'
  },
  progress_orientation_vertical: {
    height: '100%',
    top: '50%',
    transform: 'translateY(-50%)',
    right: '24px'
  },
  progress_item: {
    width: '5px',
    height: '5px',
    backgroundColor: 'currentColor',
    borderRadius: theme.methods.shape.radius.value(40, 'px'),
    cursor: 'pointer',
    transition: theme.methods.transitions.make('transform'),
    '&:hover': {
      transform: 'scale(1.4)'
    }
  },
  progress_item_active: {
    transform: 'scale(1.7)'
  },
  arrow: {
    position: 'absolute !important'
  },
  arrow_previous: {},
  arrow_previous_orientation_horizontal: {
    top: '50%',
    transform: 'translateY(-50%)',
    left: '24px'
  },
  arrow_previous_orientation_vertical: {
    left: '50%',
    transform: 'translateX(-50%)',
    top: '24px'
  },
  arrow_next: {},
  arrow_next_orientation_horizontal: {
    top: '50%',
    transform: 'translateY(-50%)',
    right: '24px'
  },
  arrow_next_orientation_vertical: {
    left: '50%',
    transform: 'translateX(-50%)',
    bottom: '24px'
  },
  icon_previous_orientation_vertical: {
    transform: 'rotate(90deg)'
  },
  icon_next_orientation_vertical: {
    transform: 'rotate(90deg)'
  }
}), {
  name: 'amaui-Carousel'
});
const Carousel = /*#__PURE__*/React.forwardRef((props_, ref) => {
  const theme = useAmauiTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiCarousel?.props?.default), props_), [props_]);
  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
  const Transitions = React.useMemo(() => theme?.elements?.Transitions || TransitionsElement, [theme]);
  const {
      tonal = true,
      color = 'default',
      version: version_,
      valueDefault,
      value: value_,
      onChange,
      // id if it updates
      // update items
      id,
      // Array of string or object
      // object having element as a string or element
      // and a transition element
      items: items_,
      orientation: orientation_,
      itemSize: itemSize_,
      gap: gap_,
      move: move_,
      moveValue: moveValue_,
      moveItems: moveItems_,
      moveBeyondEdge: moveBeyondEdge_,
      free: free_,
      swipe: swipe_,
      background: background_,
      index: index_,
      autoPlay: autoPlay_,
      autoHeight: autoHeight_,
      autoHeightDelay = theme.transitions.duration.rg + 14,
      autoPlayInterval = 4000,
      pauseOnHover = true,
      round: round_,
      arrows: arrows_,
      mouseScroll,
      momentum: momentum_,
      // AmauiSubscription methods
      previousSub,
      nextSub,
      updateSub,
      // on mobile visible
      arrowsVisibility: arrowsVisibility_,
      arrowHideOnStartEnd: arrowHideOnStartEnd_,
      renderProgress,
      renderArrowPrevious,
      renderArrowNext,
      progress: progress_,
      // on mobile visible
      progressVisibility: progressVisibility_,
      start: start_,
      end: end_,
      noTransition: noTransition_,
      onUpdatePosition: onUpdatePosition_,
      onInit,
      onUpdateItems,
      onBlur: onBlur_,
      onFocus: onFocus_,
      onMouseEnter: onMouseEnter_,
      onMouseLeave: onMouseLeave_,
      TransitionComponent: TransitionComponent_ = Fade,
      ProgressTransitionComponent = Fade,
      ArrowTransitionComponent = Fade,
      ArrowPreviousTransitionComponent,
      ArrowNextTransitionComponent,
      IconButtonPrevious,
      IconButtonNext,
      IconPrevious = IconMaterialNavigateBefore,
      IconNext = IconMaterialNavigateNext,
      ArrowProps,
      ArrowPreviousProps: ArrowPreviousProps_,
      ArrowNextProps: ArrowNextProps_,
      CarouselProps,
      TransitionsProps,
      TransitionComponentProps,
      ArrowTransitionComponentProps,
      ArrowPreviousTransitionComponentProps,
      ArrowNextTransitionComponentProps,
      ProgressTransitionComponentProps,
      ItemWrapperProps,
      Component = 'div',
      className,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const refs = {
    root: React.useRef(undefined),
    item: React.useRef(undefined),
    items: React.useRef(undefined),
    value: React.useRef(undefined),
    autoPlayTimeout: React.useRef(undefined),
    autoPlay: React.useRef(undefined),
    carousel: React.useRef(undefined),
    mouseDown: React.useRef(undefined),
    focus: React.useRef(undefined),
    gap: React.useRef(undefined),
    previousMouseEvent: React.useRef(undefined),
    move: React.useRef(undefined),
    moveValue: React.useRef(undefined),
    moveItems: React.useRef(undefined),
    moveBeyondEdge: React.useRef(undefined),
    free: React.useRef(undefined),
    swipe: React.useRef(undefined),
    mouseDownPosition: React.useRef(undefined),
    mouseDownStart: React.useRef(undefined),
    mouseDownDuration: React.useRef(undefined),
    orientation: React.useRef(undefined),
    version: React.useRef(undefined),
    itemSize: React.useRef(undefined),
    itemsLength: React.useRef(undefined),
    momentum: React.useRef(undefined),
    round: React.useRef(undefined),
    velocity: React.useRef(undefined),
    momentumID: React.useRef(undefined),
    width: React.useRef(undefined),
    onInit: React.useRef(undefined),
    ids: {
      items: React.useId()
    }
  };
  const keys = React.useMemo(() => {
    const result = [];
    const properties = [version_, orientation_, itemSize_, gap_, move_, moveValue_, moveItems_, moveBeyondEdge_, swipe_, background_, autoPlay_, autoHeight_, round_, arrows_, arrowsVisibility_, arrowHideOnStartEnd_, progress_, progressVisibility_, noTransition_];
    properties.forEach(item => {
      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
    });
    return unique(result);
  }, [version_, orientation_, itemSize_, gap_, move_, moveValue_, moveItems_, moveBeyondEdge_, swipe_, background_, autoPlay_, autoHeight_, round_, arrows_, arrowsVisibility_, arrowHideOnStartEnd_, progress_, progressVisibility_, noTransition_]);
  const breakpoints = {};
  keys.forEach(key => {
    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
      element: refs.root.current
    });
  });
  const version = valueBreakpoints(version_, 'regular', breakpoints, theme);
  const orientation = valueBreakpoints(orientation_, 'horizontal', breakpoints, theme);
  const itemSize = valueBreakpoints(itemSize_, undefined, breakpoints, theme);
  const gap = valueBreakpoints(gap_, 4, breakpoints, theme);
  const move = valueBreakpoints(move_, true, breakpoints, theme);
  const moveValue = valueBreakpoints(moveValue_, undefined, breakpoints, theme);
  const moveItems = valueBreakpoints(moveItems_, undefined, breakpoints, theme);
  const moveBeyondEdge = valueBreakpoints(moveBeyondEdge_, true, breakpoints, theme);
  const swipe = valueBreakpoints(swipe_, true, breakpoints, theme);
  const background = valueBreakpoints(background_, true, breakpoints, theme);
  const autoPlay = valueBreakpoints(autoPlay_, undefined, breakpoints, theme);
  const autoHeight = valueBreakpoints(autoHeight_, undefined, breakpoints, theme);
  const round = valueBreakpoints(round_, true, breakpoints, theme);
  const arrows = valueBreakpoints(arrows_, true, breakpoints, theme);
  const arrowsVisibility = valueBreakpoints(arrowsVisibility_, 'hover', breakpoints, theme);
  const arrowHideOnStartEnd = valueBreakpoints(arrowHideOnStartEnd_, undefined, breakpoints, theme);
  const progress = valueBreakpoints(progress_, true, breakpoints, theme);
  const progressVisibility = valueBreakpoints(progressVisibility_, 'hover', breakpoints, theme);
  const noTransition = valueBreakpoints(noTransition_, undefined, breakpoints, theme);
  let free = valueBreakpoints(free_, undefined, breakpoints, theme);
  let momentum = valueBreakpoints(momentum_, undefined, breakpoints, theme);
  if (momentum && version !== 'regular') momentum = false;
  if (momentum) free = true;
  if (free && momentum === undefined) momentum = true;
  const [init, setInit] = React.useState();
  const [items, setItems] = React.useState(items_ || []);
  const [value, setValue] = React.useState(valueDefault !== undefined ? valueDefault : value_);
  const [hover, setHover] = React.useState();
  const [mouseDown, setMouseDown] = React.useState();
  const [focus, setFocus] = React.useState();
  const styles = {
    carousel: {}
  };
  refs.items.current = items;
  refs.value.current = value;
  refs.gap.current = gap;
  refs.mouseDown.current = mouseDown;
  refs.focus.current = focus;
  refs.move.current = move;
  refs.moveValue.current = moveValue;
  refs.moveItems.current = moveItems;
  refs.moveBeyondEdge.current = moveBeyondEdge;
  refs.free.current = free;
  refs.swipe.current = swipe;
  refs.orientation.current = orientation;
  refs.version.current = version;
  refs.itemSize.current = itemSize;
  refs.momentum.current = momentum;
  refs.round.current = round;
  refs.onInit.current = onInit;
  const {
    scrollWidth,
    scrollHeight
  } = refs.carousel.current || {};
  const {
    width,
    height
  } = refs.carousel.current?.getBoundingClientRect() || {};
  refs.width.current = width;
  refs.itemsLength.current = items.length;
  if (itemSize === 'auto') {
    if (moveValue) refs.itemsLength.current = orientation === 'horizontal' ? Math.ceil(scrollWidth / moveValue) : Math.ceil(scrollHeight / moveValue);
    if (moveItems) refs.itemsLength.current = Math.ceil(items.length / clamp(moveItems, 1, items.length));
  }
  const updateValue = valueNew => {
    setValue(valueNew);
    if (is('function', onChange)) onChange(valueNew);
  };
  const momentumClear = () => {
    cancelAnimationFrame(refs.momentumID.current);
  };
  const momentumMethod = () => {
    const valueNew = refs.orientation.current === 'horizontal' ? (refs.value.current?.x || 0) + refs.velocity.current : (refs.value.current?.y || 0) + refs.velocity.current;
    const {
      width: width_,
      height: height_
    } = refs.carousel.current.getBoundingClientRect();
    const {
      scrollWidth: scrollWidth_,
      scrollHeight: scrollHeight_
    } = refs.carousel.current;
    if (refs.orientation.current === 'horizontal') {
      const min = 0;
      let max = (width_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
      if (refs.itemSize.current === 'auto') {
        max = scrollWidth_ - scrollWidth_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
      }
      refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
        index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))),
        x: valueNew
      });
      if (valueNew <= min || valueNew >= max) {
        // Done
        return refs.carousel.current?.style.removeProperty('transition');
      } else {
        refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
          index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))),
          x: valueNew
        });
        onUpdatePosition(refs.value.current);
      }
    }
    if (refs.orientation.current === 'vertical') {
      const min = 0;
      let max = (height_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
      if (refs.itemSize.current === 'auto') {
        max = scrollHeight_ - scrollHeight_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
      }
      if (valueNew <= min || valueNew >= max) {
        // Done
        return refs.carousel.current?.style.removeProperty('transition');
      } else {
        refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
          index: Math.floor(valueNew / (max / (refs.itemsLength.current - 1))),
          y: valueNew
        });
        onUpdatePosition(refs.value.current);
      }
    }
    refs.velocity.current *= 0.95;
    if (Math.abs(refs.velocity.current) > 0.5) refs.momentumID.current = requestAnimationFrame(momentumMethod);else {
      // Done
      refs.carousel.current?.style.removeProperty('transition');
    }
  };
  const momentumStart = () => {
    refs.momentumID.current = requestAnimationFrame(momentumMethod);
  };
  const onUpdatePosition = valuePosition_ => {
    // Momentum
    momentumClear();
    const valueNew = _objectSpread(_objectSpread({}, valuePosition_), {}, {
      additional: 0
    });
    if (valuePosition_.additional === undefined && refs.version.current === 'regular' && refs.itemSize.current !== 'auto') {
      const max = refs.width.current / 2;
      const valuePosition = valueNew[refs.orientation.current === 'horizontal' ? 'x' : 'y'];
      const part = valuePosition - (refs.mouseDownPosition.current?.[refs.orientation.current === 'horizontal' ? 'x' : 'y'] || 0);
      const additional = part / max * 100;
      valueNew.additional = additional;
    }
    updateValue(valueNew);
    if (is('function', onUpdatePosition_)) onUpdatePosition_(valueNew);
  };
  const onUpdate = React.useCallback(function () {
    let to = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'next';
    let values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refs.items.current;
    // Momentum
    momentumClear();

    // Momentum clean up
    refs.carousel.current?.style.removeProperty('transition');
    let index = refs.value.current?.index;
    if (index === undefined) index = 0;else if (is('number', to)) index = clamp(to, 0, refs.itemsLength.current - 1);else {
      index = to === 'next' ? index + 1 : index - 1;
      if (index < 0) index = refs.round.current ? refs.itemsLength.current - 1 : 0;
      if (index > refs.itemsLength.current - 1) index = refs.round.current ? 0 : refs.itemsLength.current - 1;
    }

    // Regular
    if (version === 'regular' && refs.carousel.current) {
      if (refs.orientation.current === 'horizontal') {
        if (refs.itemSize.current === 'auto' && refs.moveValue.current !== undefined) {
          const x = index * refs.moveValue.current;
          onUpdatePosition({
            index,
            x,
            additional: 0
          });
        } else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
          let item = index * clamp(moveItems, 1, refs.items.current.length);
          item = refs.carousel.current.children[item];
          if (item) {
            const x = item.offsetLeft;
            onUpdatePosition({
              index,
              x,
              additional: 0
            });
          }
        } else {
          const width_ = refs.carousel.current.getBoundingClientRect().width;
          const scrollWidth_ = refs.carousel.current.scrollWidth;
          const part = refs.itemSize.current === 'auto' ? scrollWidth_ / refs.itemsLength.current : width_;
          const x = index * part + index * (gap * theme.space.unit);
          onUpdatePosition({
            index,
            x,
            additional: 0
          });
        }
      }
      if (refs.orientation.current === 'vertical') {
        if (refs.itemSize.current === 'auto' && refs.moveValue.current !== undefined) {
          const y = index * refs.moveValue.current;
          onUpdatePosition({
            index,
            y,
            additional: 0
          });
        } else if (refs.itemSize.current === 'auto' && refs.moveItems.current !== undefined) {
          let item = index * clamp(moveItems, 1, refs.items.current.length);
          item = refs.carousel.current.children[item];
          if (item) {
            const y = item.offsetTop;
            onUpdatePosition({
              index,
              y,
              additional: 0
            });
          }
        } else {
          const height_ = refs.carousel.current.getBoundingClientRect().height;
          const scrollHeight_ = refs.carousel.current.scrollHeight;
          const part = refs.itemSize.current === 'auto' ? scrollHeight_ / refs.itemsLength.current : height_;
          const y = index * part + index * (gap * theme.space.unit);
          onUpdatePosition({
            index,
            y,
            additional: 0
          });
        }
      }
    }

    // Transition
    const itemNew = values[index];
    if (itemNew) {
      if (version === 'transition') updateValue({
        index,
        element: itemNew
      });
      if (autoHeight) {
        if (version === 'regular') {
          setTimeout(() => {
            const height_ = refs.carousel.current.children[refs.value.current?.index]?.children[0]?.getBoundingClientRect().height;
            if (height_ > 0) refs.root.current.style.height = `${height_}px`;
          }, 1);
        }
        if (version === 'transition') {
          setTimeout(() => {
            const height_ = refs.carousel.current.children[0]?.children[0]?.getBoundingClientRect().height;
            if (height_ > 0) refs.root.current.style.height = `${height_}px`;
          }, autoHeightDelay);
        }
      }
    }
  }, [gap, version, autoHeight, autoHeightDelay]);
  const onMouseUp = React.useCallback(event => {
    if (refs.mouseDown.current) {
      if (refs.mouseDown.current && !refs.momentum.current) refs.carousel.current?.style.removeProperty('transition');
      refs.mouseDownDuration.current = new Date().getTime() - refs.mouseDownStart.current;
      if (refs.free.current) {
        setMouseDown(false);
        if (refs.momentum.current) momentumStart();
        refs.previousMouseEvent.current = undefined;
        return;
      }

      // Swipe
      // less than 140 ms
      if (refs.swipe.current && refs.mouseDownDuration.current <= 140) {
        const {
          clientX: previousClientX,
          clientY: previousClientY
        } = refs.mouseDown.current.touches?.[0] || refs.mouseDown.current;
        const {
          clientX,
          clientY
        } = refs.previousMouseEvent.current || event;
        refs.previousMouseEvent.current = undefined;
        setMouseDown(false);
        if (refs.orientation.current === 'horizontal') {
          // As move already updates the index
          // so move to that index
          if (previousClientX < clientX) return onUpdate(refs.value.current?.index);
          if (previousClientX > clientX) return onUpdate('next');
        }
        if (refs.orientation.current === 'vertical') {
          if (previousClientY < clientY) return onUpdate(refs.value.current?.index);
          if (previousClientY > clientY) return onUpdate('next');
        }
      }

      // Move
      if (refs.version.current === 'regular' && refs.value.current) {
        if (refs.orientation.current === 'horizontal') {
          const {
            x
          } = refs.value.current;
          let index = refs.value.current.index;
          if (refs.mouseDownPosition.current?.x > x) index++;
          const width_ = refs.carousel.current.getBoundingClientRect().width;
          const original = index * width_ + index * (gap * theme.space.unit);
          const threshold = width_ / 4;
          const moved = Math.abs(original - x);
          if (x > 0 && x < original && moved >= threshold) onUpdate(index - 1);else if (x > original && moved >= threshold) onUpdate(index + 1);else onUpdate(index);
        }
        if (refs.orientation.current === 'vertical') {
          const {
            y
          } = refs.value.current;
          let index = refs.value.current.index;
          if (refs.mouseDownPosition.current?.y > y) index++;
          const height_ = refs.carousel.current.getBoundingClientRect().height;
          const original = index * height_ + index * (gap * theme.space.unit);
          const threshold = height_ / 4;
          const moved = Math.abs(original - y);
          if (y > 0 && y < original && moved >= threshold) onUpdate(index - 1);else if (y > original && moved >= threshold) onUpdate(index + 1);else onUpdate(index);
        }
      }
      setMouseDown(false);
      refs.previousMouseEvent.current = undefined;
    }
  }, []);
  React.useEffect(() => {
    const onKeyDown = event => {
      if (refs.focus.current) {
        switch (event.key) {
          case 'ArrowLeft':
            return onUpdate('previous');
          case 'ArrowRight':
            return onUpdate('next');
          default:
            break;
        }
      }
    };
    const onMove = (x_, y_) => {
      if (refs.version.current === 'regular' && refs.move.current && refs.mouseDown.current && refs.previousMouseEvent.current) {
        const incX = x_ - refs.previousMouseEvent.current.clientX;
        const incY = y_ - refs.previousMouseEvent.current.clientY;
        const {
          width: width_,
          height: height_
        } = refs.carousel.current.getBoundingClientRect();
        const {
          scrollWidth: scrollWidth_,
          scrollHeight: scrollHeight_
        } = refs.carousel.current;
        if (refs.orientation.current === 'horizontal' && incX !== 0) {
          const min = 0;
          let max = (width_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
          if (refs.itemSize.current === 'auto') {
            max = scrollWidth_ - scrollWidth_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
          }
          let x = (refs.value.current?.x || 0) - incX;
          if (refs.free.current || !refs.moveBeyondEdge.current) x = clamp(x, min, max);

          // Move beyond min, max
          if (x < min || x > max) x = (refs.value.current?.x || 0) - incX / 1.7;
          refs.velocity.current = x - (refs.value.current?.x || 0);
          onUpdatePosition({
            index: Math.floor(x / (max / (refs.itemsLength.current - 1))),
            x
          });
        }
        if (refs.orientation.current === 'vertical' && incY !== 0) {
          const min = 0;
          let max = (height_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
          if (refs.itemSize.current === 'auto') {
            max = scrollHeight_ - scrollHeight_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
          }
          let y = (refs.value.current?.y || 0) - incY;
          if (refs.free.current || !refs.moveBeyondEdge.current) y = clamp(y, min, max);

          // Move beyond min, max
          if (y < min || y > max) y = (refs.value.current?.y || 0) - incY / 1.7;
          refs.velocity.current = y - (refs.value.current?.y || 0);
          onUpdatePosition({
            index: Math.floor(y / (max / (refs.itemsLength.current - 1))),
            y
          });
        }
      }
    };

    // Mouse move
    const onMouseMove = event => {
      if (refs.mouseDown.current) {
        const {
          clientY,
          clientX
        } = event;
        onMove(clientX, clientY);
        refs.previousMouseEvent.current = event;
      }
    };

    // Touch move
    const onTouchMove = event => {
      if (refs.mouseDown.current) {
        const {
          clientY,
          clientX
        } = event.touches[0];
        onMove(clientX, clientY);
        refs.previousMouseEvent.current = event;

        // Normalize for use as a mouseDown value
        refs.previousMouseEvent.current.clientY = clientY;
        refs.previousMouseEvent.current.clientX = clientX;
      }
    };
    const method = () => onUpdate(refs.value.current?.index);
    const observer = new ResizeObserver(method);
    method();
    observer.observe(refs.root.current);
    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
    rootDocument.addEventListener('keydown', onKeyDown);
    rootDocument.addEventListener('mouseup', onMouseUp);
    rootDocument.addEventListener('mousemove', onMouseMove);
    rootDocument.addEventListener('touchend', onMouseUp);
    rootDocument.addEventListener('touchmove', onTouchMove, {
      passive: true
    });
    setInit(true);
    if (is('function', refs.onInit.current)) refs.onInit.current();
    return () => {
      observer.disconnect();
      rootDocument.removeEventListener('keydown', onKeyDown);
      rootDocument.removeEventListener('mousemove', onMouseMove);
      rootDocument.removeEventListener('mouseup', onMouseUp);
      rootDocument.removeEventListener('touchmove', onTouchMove);
      rootDocument.removeEventListener('touchend', onMouseUp);
    };
  }, []);
  React.useEffect(() => {
    if (value_ !== undefined && !equalDeep(value_, refs.value.current)) setValue(valuePrevious => _objectSpread(_objectSpread({}, valuePrevious), value_));
  }, [value_]);
  React.useEffect(() => {
    if (init) {
      if (index_ >= 0 && index_ <= refs.itemsLength.current && index_ !== refs.value.current?.index) onUpdate(index_);
    }
  }, [index_]);
  React.useEffect(() => {
    if (is('function', onUpdateItems)) onUpdateItems();
  }, [items, onUpdateItems, theme.palette.light]);
  React.useEffect(() => {
    setItems(items_);
  }, [id, items_]);
  const onPrevious = () => onUpdate('previous');
  const onNext = () => onUpdate('next');
  const clear = () => {
    clearTimeout(refs.autoPlayTimeout.current);
    refs.autoPlay.current = false;
  };
  const start = () => {
    clear();
    if (!autoPlay || mouseDown || focus) return;
    if (pauseOnHover && hover) return;
    refs.autoPlayTimeout.current = setTimeout(onUpdate, autoPlayInterval);
    refs.autoPlay.current = true;
  };

  // autoPlay
  React.useEffect(() => {
    start();
  }, [items, value, autoPlay, autoPlayInterval]);

  // AmauiSubscription methods
  React.useEffect(() => {
    const method = function () {
      return onUpdate(...arguments);
    };
    if (is('function', updateSub?.subscribe)) updateSub?.subscribe(method);
    return () => {
      if (is('function', updateSub?.unsubscribe)) updateSub?.unsubscribe(method);
    };
  }, [updateSub]);
  React.useEffect(() => {
    const method = function () {
      return onUpdate(...arguments);
    };
    if (is('function', previousSub?.subscribe)) previousSub?.subscribe(method);
    return () => {
      if (is('function', previousSub?.unsubscribe)) previousSub?.unsubscribe(method);
    };
  }, [previousSub]);
  React.useEffect(() => {
    const method = function () {
      return onUpdate(...arguments);
    };
    if (is('function', nextSub?.subscribe)) nextSub?.subscribe(method);
    return () => {
      if (is('function', nextSub?.unsubscribe)) nextSub?.unsubscribe(method);
    };
  }, [nextSub]);
  React.useEffect(() => {
    const values = unique([...items_, ...React.Children.toArray(children)]).filter(Boolean);
    const previous = refs.items.current.reduce((result, item) => result += is('string', item) ? item : item?.key, '');
    const updated = values.reduce((result, item) => result += is('string', item) ? item : item?.key, '');
    if (updated !== previous) {
      onUpdate('next', values);
      setItems(values);
    }
  }, [items_, background, children]);
  const onWheel = React.useCallback(debounce(event => {
    if (refs.orientation.current === 'horizontal' && event.deltaX < 0 || refs.orientation.current === 'vertical' && event.deltaY < 0) {
      event.preventDefault();
      event.stopPropagation();
      return onUpdate('previous');
    }
    if (refs.orientation.current === 'horizontal' && event.deltaX > 0 || refs.orientation.current === 'vertical' && event.deltaY > 0) {
      event.preventDefault();
      event.stopPropagation();
      return onUpdate('next');
    }
  }, 40), []);
  const onBlur = React.useCallback(event => {
    setFocus(false);
    if (is('function', onBlur_)) onBlur_(event);
  }, []);
  const onFocus = React.useCallback(event => {
    setFocus(true);
    if (is('function', onFocus_)) onFocus_(event);
  }, []);
  const onMouseDown = React.useCallback(event => {
    // Momentum
    momentumClear();
    setMouseDown(event);
    refs.mouseDownPosition.current = _objectSpread({}, refs.value.current);
    refs.mouseDownStart.current = new Date().getTime();
    refs.carousel.current.style.transition = 'none';
  }, []);
  const onMouseEnter = React.useCallback(event => {
    setHover(true);
    if (refs.autoPlay.current) clear();
    if (is('function', onMouseEnter_)) onMouseEnter_(event);
  }, []);
  const onMouseLeave = React.useCallback(event => {
    setFocus(false);
    setHover(false);
    if (!refs.autoPlay.current) start();
    if (is('function', onMouseLeave_)) onMouseLeave_(event);
  }, []);
  const onArrowMouseEnter = React.useCallback(event => {
    setHover(true);
    if (refs.autoPlay.current) clear();
  }, []);
  const ArrowPreviousTransitionComponent_ = ArrowPreviousTransitionComponent || ArrowTransitionComponent;
  const ArrowNextTransitionComponent_ = ArrowNextTransitionComponent || ArrowTransitionComponent;
  let TransitionComponent = TransitionComponent_;
  if (noTransition) TransitionComponent = React.Fragment;
  if (version === 'regular') {
    styles.carousel.transform = `translate3d(${orientation === 'horizontal' ? `${-(value?.x || 0)}px, 0` : `0, ${-(value?.y || 0)}px`}, 0)`;
  }
  const indexActive = value?.index;
  let arrowPreviousIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
  let arrowNextIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
  if (arrowHideOnStartEnd) {
    const min = 0;
    let maxX = (width + gap * theme.space.unit) * (refs.itemsLength.current - 1);
    let maxY = (height + gap * theme.space.unit) * (refs.itemsLength.current - 1);
    if (refs.itemSize.current === 'auto') {
      maxX = scrollWidth - scrollWidth / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
      maxY = scrollHeight - scrollHeight / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
    }
    if (value?.x === min || value?.y === min) arrowPreviousIn = false;
    if (itemSize === 'auto') {
      if (value?.x !== undefined && value?.x + 1 >= maxX || value?.y !== undefined && value?.y + 1 >= maxY) arrowNextIn = false;
    } else {
      if (value?.x !== undefined && value?.x + 1 >= maxX || value?.y + 1 !== undefined && value?.y >= maxY) arrowNextIn = false;
    }
  }
  const ArrowPreviousProps = _objectSpread(_objectSpread({}, ArrowPreviousProps_), {}, {
    'aria-label': 'Arrow previous',
    'aria-controls': refs.ids.items
  });
  const ArrowNextProps = _objectSpread(_objectSpread({}, ArrowNextProps_), {}, {
    'aria-label': 'Arrow next',
    'aria-controls': refs.ids.items
  });
  const resolveItem = Item => {
    if (!Item) return null;
    if (is('string', Item)) {
      if (background) return /*#__PURE__*/React.createElement("div", {
        className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-background'], classes.background]),
        style: {
          backgroundImage: `url(${Item})`
        }
      });
      return /*#__PURE__*/React.createElement("img", {
        src: Item,
        alt: ""
      });
    }
    if (is('function', Item)) return Item(refs.value.current);
    if (Item?.element) return /*#__PURE__*/React.cloneElement(Item.element);
    return /*#__PURE__*/React.cloneElement(Item);
  };
  return /*#__PURE__*/React.createElement(Surface, _extends({
    ref: item => {
      if (ref) {
        if (is('function', ref)) ref(item);else ref.current = item;
      }
      refs.root.current = item;
    },
    tabIndex: "0",
    role: "region",
    "aria-roledescription": "carousel",
    tonal: tonal,
    color: color,
    onFocus: onFocus,
    onBlur: onBlur,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    Component: Component,
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-root'], className, classes.root, autoHeight && classes.autoHeight])
  }, other), start_, version === 'regular' && /*#__PURE__*/React.createElement(Line, _extends({
    ref: refs.carousel,
    gap: gap,
    direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
    align: "center",
    justify: "flex-start",
    onWheel: mouseScroll && onWheel,
    onMouseDown: onMouseDown,
    onTouchStart: onMouseDown,
    onMouseUp: onMouseUp,
    onTouchEnd: onMouseUp,
    id: refs.ids.items,
    "aria-live": "polite"
  }, CarouselProps, {
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-carousel'], CarouselProps?.className, classes.carousel, classes[`carousel_version_${version}`]]),
    style: _objectSpread(_objectSpread({}, styles.carousel), CarouselProps?.style)
  }), items.map((item, index) => /*#__PURE__*/React.createElement(Line, _extends({
    key: index,
    gap: 0,
    direction: "column",
    align: "center",
    justify: "center",
    role: "group",
    "aria-roledescription": "slide",
    "aria-label": `${index + 1} out of ${refs.itemsLength.current}`
  }, ItemWrapperProps, {
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-item'], ItemWrapperProps?.className, classes.item, autoHeight && classes[`item_version_${version}_autoHeight`], itemSize && classes[`item_itemSize_${itemSize}`]])
  }), resolveItem(item)))), version === 'transition' && /*#__PURE__*/React.createElement(Line, _extends({
    ref: refs.carousel,
    gap: 0.5,
    direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
    align: "center",
    justify: "center",
    onWheel: mouseScroll && onWheel,
    onMouseDown: onMouseDown,
    onTouchStart: onMouseDown,
    onMouseUp: onMouseUp,
    onTouchEnd: onMouseUp,
    id: refs.ids.items,
    "aria-live": "polite"
  }, CarouselProps, {
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-carousel'], CarouselProps?.className, classes.carousel])
  }), value && /*#__PURE__*/React.createElement(Transitions, _extends({
    mode: "in-out-follow",
    switch: true
  }, TransitionsProps), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
    key: indexActive
  }, TransitionComponentProps), /*#__PURE__*/React.createElement(Line, {
    ref: refs.item,
    gap: 0,
    direction: "column",
    align: "center",
    justify: "center",
    role: "group",
    "aria-roledescription": "slide",
    "aria-label": `${value.index + 1} out of ${refs.itemsLength.current}`,
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-item-transition'], classes.item_transition, autoHeight && classes[`item_version_${version}_autoHeight`]])
  }, resolveItem(value.element))))), progress && /*#__PURE__*/React.createElement(ProgressTransitionComponent, _extends({
    in: focus || progressVisibility === 'hover' && hover || progressVisibility === 'visible'
  }, ProgressTransitionComponentProps), is('function', renderProgress) ? renderProgress(onUpdate) : /*#__PURE__*/React.createElement(Line, {
    gap: 1,
    direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
    align: "center",
    justify: "center",
    wrap: "wrap",
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-progress'], classes.progress, classes[`progress_orientation_${orientation}`]])
  }, Array.from({
    length: refs.itemsLength.current
  }).map((item, index) => /*#__PURE__*/React.createElement("span", {
    key: index,
    onClick: () => onUpdate(index),
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-progress-item', indexActive === index && 'amaui-Carousel-progress-item-active'], classes.progress_item, indexActive === index && classes.progress_item_active])
  })))), arrows && /*#__PURE__*/React.createElement(ArrowPreviousTransitionComponent_, _extends({
    in: arrowPreviousIn
  }, ArrowTransitionComponentProps, ArrowPreviousTransitionComponentProps), is('function', renderArrowPrevious) ? renderArrowPrevious(() => onUpdate('previous')) : IconButtonPrevious ? /*#__PURE__*/React.cloneElement(IconButtonPrevious, _objectSpread(_objectSpread(_objectSpread({
    tonal,
    color,
    onClick: onPrevious,
    onMouseEnter: onArrowMouseEnter
  }, ArrowProps), ArrowPreviousProps), {}, {
    disabled: !round && indexActive === 0,
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-arrow', 'amaui-Carousel-arrow-previous'], ArrowProps?.className, ArrowPreviousProps?.className, classes.arrow, classes.arrow_previous, classes[`arrow_previous_orientation_${orientation}`]])
  })) : /*#__PURE__*/React.createElement(IconButton, _extends({
    tonal: tonal,
    color: color,
    version: "filled",
    onClick: onPrevious,
    onMouseEnter: onArrowMouseEnter
  }, ArrowProps, ArrowPreviousProps, {
    disabled: !round && indexActive === 0,
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-arrow', 'amaui-Carousel-arrow-previous'], ArrowProps?.className, ArrowPreviousProps?.className, classes.arrow, classes.arrow_previous, classes[`arrow_previous_orientation_${orientation}`]])
  }), /*#__PURE__*/React.createElement(IconPrevious, {
    noRtl: true,
    className: classNames([classes[`icon_previous_orientation_${orientation}`]])
  }))), arrows && /*#__PURE__*/React.createElement(ArrowNextTransitionComponent_, _extends({
    in: arrowNextIn
  }, ArrowTransitionComponentProps, ArrowNextTransitionComponentProps), is('function', renderArrowNext) ? renderArrowNext(() => onUpdate('next')) : IconButtonNext ? /*#__PURE__*/React.cloneElement(IconButtonNext, _objectSpread(_objectSpread(_objectSpread({
    tonal,
    color,
    onClick: onNext,
    onMouseEnter: onArrowMouseEnter
  }, ArrowProps), ArrowNextProps), {}, {
    disabled: !round && indexActive === items.length - 1,
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-arrow', 'amaui-Carousel-arrow-next'], ArrowProps?.className, ArrowNextProps?.className, classes.arrow, classes.arrow_next, classes[`arrow_next_orientation_${orientation}`]])
  })) : /*#__PURE__*/React.createElement(IconButton, _extends({
    tonal: tonal,
    color: color,
    version: "filled",
    onClick: onNext,
    onMouseEnter: onArrowMouseEnter
  }, ArrowProps, ArrowNextProps, {
    disabled: !round && indexActive === items.length - 1,
    className: classNames([staticClassName('Carousel', theme) && ['amaui-Carousel-arrow', 'amaui-Carousel-arrow-next'], ArrowProps?.className, ArrowNextProps?.className, classes.arrow, classes.arrow_next, classes[`arrow_next_orientation_${orientation}`]])
  }), /*#__PURE__*/React.createElement(IconNext, {
    noRtl: true,
    className: classNames([classes[`icon_next_orientation_${orientation}`]])
  }))), end_);
});
Carousel.displayName = 'amaui-Carousel';
export default Carousel;