@onesy/ui-react
Version:
UI for React
1,001 lines (988 loc) • 53.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialNavigateBeforeW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
var _IconMaterialNavigateNextW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
var _Line = _interopRequireDefault(require("../Line"));
var _Fade = _interopRequireDefault(require("../Fade"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Transitions = _interopRequireDefault(require("../Transitions"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(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: 'onesy-Carousel'
});
const Carousel = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _refs$carousel$curren;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCarousel) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
const Fade = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Fade) || _Fade.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
const Transitions = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Transitions) || _Transitions.default;
const {
ref,
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_,
// OnesySubscription 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 = _IconMaterialNavigateBeforeW.default,
IconNext = _IconMaterialNavigateNextW.default,
ArrowProps,
ArrowPreviousProps: ArrowPreviousProps_,
ArrowNextProps: ArrowNextProps_,
CarouselProps,
TransitionsProps,
TransitionComponentProps,
ArrowTransitionComponentProps,
ArrowPreviousTransitionComponentProps,
ArrowNextTransitionComponentProps,
ProgressTransitionComponentProps,
ItemWrapperProps,
Component = 'div',
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
item: _react.default.useRef(undefined),
items: _react.default.useRef(undefined),
value: _react.default.useRef(undefined),
autoPlayTimeout: _react.default.useRef(undefined),
autoPlay: _react.default.useRef(undefined),
carousel: _react.default.useRef(undefined),
mouseDown: _react.default.useRef(undefined),
focus: _react.default.useRef(undefined),
gap: _react.default.useRef(undefined),
previousMouseEvent: _react.default.useRef(undefined),
move: _react.default.useRef(undefined),
moveValue: _react.default.useRef(undefined),
moveItems: _react.default.useRef(undefined),
moveBeyondEdge: _react.default.useRef(undefined),
free: _react.default.useRef(undefined),
swipe: _react.default.useRef(undefined),
mouseDownPosition: _react.default.useRef(undefined),
mouseDownStart: _react.default.useRef(undefined),
mouseDownDuration: _react.default.useRef(undefined),
orientation: _react.default.useRef(undefined),
version: _react.default.useRef(undefined),
itemSize: _react.default.useRef(undefined),
itemsLength: _react.default.useRef(undefined),
momentum: _react.default.useRef(undefined),
round: _react.default.useRef(undefined),
velocity: _react.default.useRef(undefined),
momentumID: _react.default.useRef(undefined),
width: _react.default.useRef(undefined),
onInit: _react.default.useRef(undefined),
ids: {
items: _react.default.useId()
}
};
const keys = _react.default.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 ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.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_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const version = (0, _utils2.valueBreakpoints)(version_, 'regular', breakpoints, theme);
const orientation = (0, _utils2.valueBreakpoints)(orientation_, 'horizontal', breakpoints, theme);
const itemSize = (0, _utils2.valueBreakpoints)(itemSize_, undefined, breakpoints, theme);
const gap = (0, _utils2.valueBreakpoints)(gap_, 4, breakpoints, theme);
const move = (0, _utils2.valueBreakpoints)(move_, true, breakpoints, theme);
const moveValue = (0, _utils2.valueBreakpoints)(moveValue_, undefined, breakpoints, theme);
const moveItems = (0, _utils2.valueBreakpoints)(moveItems_, undefined, breakpoints, theme);
const moveBeyondEdge = (0, _utils2.valueBreakpoints)(moveBeyondEdge_, true, breakpoints, theme);
const swipe = (0, _utils2.valueBreakpoints)(swipe_, true, breakpoints, theme);
const background = (0, _utils2.valueBreakpoints)(background_, true, breakpoints, theme);
const autoPlay = (0, _utils2.valueBreakpoints)(autoPlay_, undefined, breakpoints, theme);
const autoHeight = (0, _utils2.valueBreakpoints)(autoHeight_, undefined, breakpoints, theme);
const round = (0, _utils2.valueBreakpoints)(round_, true, breakpoints, theme);
const arrows = (0, _utils2.valueBreakpoints)(arrows_, true, breakpoints, theme);
const arrowsVisibility = (0, _utils2.valueBreakpoints)(arrowsVisibility_, 'hover', breakpoints, theme);
const arrowHideOnStartEnd = (0, _utils2.valueBreakpoints)(arrowHideOnStartEnd_, undefined, breakpoints, theme);
const progress = (0, _utils2.valueBreakpoints)(progress_, true, breakpoints, theme);
const progressVisibility = (0, _utils2.valueBreakpoints)(progressVisibility_, 'hover', breakpoints, theme);
const noTransition = (0, _utils2.valueBreakpoints)(noTransition_, undefined, breakpoints, theme);
let free = (0, _utils2.valueBreakpoints)(free_, undefined, breakpoints, theme);
let momentum = (0, _utils2.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.default.useState();
const [items, setItems] = _react.default.useState(items_ || []);
const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
const [hover, setHover] = _react.default.useState();
const [mouseDown, setMouseDown] = _react.default.useState();
const [focus, setFocus] = _react.default.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$curren = refs.carousel.current) === null || _refs$carousel$curren === void 0 ? void 0 : _refs$carousel$curren.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 / (0, _utils.clamp)(moveItems, 1, items.length));
}
const updateValue = valueNew => {
setValue(valueNew);
if ((0, _utils.is)('function', onChange)) onChange(valueNew);
};
const momentumClear = () => {
cancelAnimationFrame(refs.momentumID.current);
};
const momentumMethod = () => {
var _refs$value$current, _refs$value$current2;
const valueNew_0 = refs.orientation.current === 'horizontal' ? (((_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current.x) || 0) + refs.velocity.current : (((_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.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_0 / (max / (refs.itemsLength.current - 1))),
x: valueNew_0
});
if (valueNew_0 <= min || valueNew_0 >= max) {
var _refs$carousel$curren2;
// Done
return (_refs$carousel$curren2 = refs.carousel.current) === null || _refs$carousel$curren2 === void 0 ? void 0 : _refs$carousel$curren2.style.removeProperty('transition');
} else {
refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
index: Math.floor(valueNew_0 / (max / (refs.itemsLength.current - 1))),
x: valueNew_0
});
onUpdatePosition(refs.value.current);
}
}
if (refs.orientation.current === 'vertical') {
const min_0 = 0;
let max_0 = (height_ + gap * theme.space.unit) * (refs.itemsLength.current - 1);
if (refs.itemSize.current === 'auto') {
max_0 = scrollHeight_ - scrollHeight_ / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
}
if (valueNew_0 <= min_0 || valueNew_0 >= max_0) {
var _refs$carousel$curren3;
// Done
return (_refs$carousel$curren3 = refs.carousel.current) === null || _refs$carousel$curren3 === void 0 ? void 0 : _refs$carousel$curren3.style.removeProperty('transition');
} else {
refs.value.current = _objectSpread(_objectSpread({}, refs.value.current), {}, {
index: Math.floor(valueNew_0 / (max_0 / (refs.itemsLength.current - 1))),
y: valueNew_0
});
onUpdatePosition(refs.value.current);
}
}
refs.velocity.current *= 0.95;
if (Math.abs(refs.velocity.current) > 0.5) refs.momentumID.current = requestAnimationFrame(momentumMethod);else {
var _refs$carousel$curren4;
// Done
(_refs$carousel$curren4 = refs.carousel.current) === null || _refs$carousel$curren4 === void 0 || _refs$carousel$curren4.style.removeProperty('transition');
}
};
const momentumStart = () => {
refs.momentumID.current = requestAnimationFrame(momentumMethod);
};
const onUpdatePosition = valuePosition_ => {
// Momentum
momentumClear();
const valueNew_1 = _objectSpread(_objectSpread({}, valuePosition_), {}, {
additional: 0
});
if (valuePosition_.additional === undefined && refs.version.current === 'regular' && refs.itemSize.current !== 'auto') {
var _refs$mouseDownPositi;
const max_1 = refs.width.current / 2;
const valuePosition = valueNew_1[refs.orientation.current === 'horizontal' ? 'x' : 'y'];
const part = valuePosition - (((_refs$mouseDownPositi = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi === void 0 ? void 0 : _refs$mouseDownPositi[refs.orientation.current === 'horizontal' ? 'x' : 'y']) || 0);
const additional = part / max_1 * 100;
valueNew_1.additional = additional;
}
updateValue(valueNew_1);
if ((0, _utils.is)('function', onUpdatePosition_)) onUpdatePosition_(valueNew_1);
};
const onUpdate = (to = 'next', values = refs.items.current) => {
var _refs$carousel$curren5, _refs$value$current3;
// Momentum
momentumClear();
// Momentum clean up
(_refs$carousel$curren5 = refs.carousel.current) === null || _refs$carousel$curren5 === void 0 || _refs$carousel$curren5.style.removeProperty('transition');
let index = (_refs$value$current3 = refs.value.current) === null || _refs$value$current3 === void 0 ? void 0 : _refs$value$current3.index;
if (index === undefined) index = 0;else if ((0, _utils.is)('number', to)) index = (0, _utils.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_0 = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
item_0 = refs.carousel.current.children[item_0];
if (item_0) {
const x_0 = item_0.offsetLeft;
onUpdatePosition({
index,
x: x_0,
additional: 0
});
}
} else {
const width__0 = refs.carousel.current.getBoundingClientRect().width;
const scrollWidth__0 = refs.carousel.current.scrollWidth;
const part_0 = refs.itemSize.current === 'auto' ? scrollWidth__0 / refs.itemsLength.current : width__0;
const x_1 = index * part_0 + index * (gap * theme.space.unit);
onUpdatePosition({
index,
x: x_1,
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_1 = index * (0, _utils.clamp)(moveItems, 1, refs.items.current.length);
item_1 = refs.carousel.current.children[item_1];
if (item_1) {
const y_0 = item_1.offsetTop;
onUpdatePosition({
index,
y: y_0,
additional: 0
});
}
} else {
const height__0 = refs.carousel.current.getBoundingClientRect().height;
const scrollHeight__0 = refs.carousel.current.scrollHeight;
const part_1 = refs.itemSize.current === 'auto' ? scrollHeight__0 / refs.itemsLength.current : height__0;
const y_1 = index * part_1 + index * (gap * theme.space.unit);
onUpdatePosition({
index,
y: y_1,
additional: 0
});
}
}
}
// Transition
const itemNew = values[index];
if (itemNew) {
if (version === 'transition') updateValue({
index,
element: itemNew
});
if (autoHeight) {
if (version === 'regular') {
setTimeout(() => {
var _refs$carousel$curren6, _refs$value$current4;
const height__1 = (_refs$carousel$curren6 = refs.carousel.current.children[(_refs$value$current4 = refs.value.current) === null || _refs$value$current4 === void 0 ? void 0 : _refs$value$current4.index]) === null || _refs$carousel$curren6 === void 0 || (_refs$carousel$curren6 = _refs$carousel$curren6.children[0]) === null || _refs$carousel$curren6 === void 0 ? void 0 : _refs$carousel$curren6.getBoundingClientRect().height;
if (height__1 > 0) refs.root.current.style.height = `${height__1}px`;
}, 1);
}
if (version === 'transition') {
setTimeout(() => {
var _refs$carousel$curren7;
const height__2 = (_refs$carousel$curren7 = refs.carousel.current.children[0]) === null || _refs$carousel$curren7 === void 0 || (_refs$carousel$curren7 = _refs$carousel$curren7.children[0]) === null || _refs$carousel$curren7 === void 0 ? void 0 : _refs$carousel$curren7.getBoundingClientRect().height;
if (height__2 > 0) refs.root.current.style.height = `${height__2}px`;
}, autoHeightDelay);
}
}
}
};
const onMouseUp = event => {
if (refs.mouseDown.current) {
var _refs$carousel$curren8;
if (refs.mouseDown.current && !refs.momentum.current) (_refs$carousel$curren8 = refs.carousel.current) === null || _refs$carousel$curren8 === void 0 || _refs$carousel$curren8.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) {
var _refs$mouseDown$curre;
const {
clientX: previousClientX,
clientY: previousClientY
} = ((_refs$mouseDown$curre = refs.mouseDown.current.touches) === null || _refs$mouseDown$curre === void 0 ? void 0 : _refs$mouseDown$curre[0]) || refs.mouseDown.current;
const {
clientX,
clientY
} = refs.previousMouseEvent.current || event;
refs.previousMouseEvent.current = undefined;
setMouseDown(false);
if (refs.orientation.current === 'horizontal') {
var _refs$value$current5;
// As move already updates the index
// so move to that index
if (previousClientX < clientX) return onUpdate((_refs$value$current5 = refs.value.current) === null || _refs$value$current5 === void 0 ? void 0 : _refs$value$current5.index);
if (previousClientX > clientX) return onUpdate('next');
}
if (refs.orientation.current === 'vertical') {
var _refs$value$current6;
if (previousClientY < clientY) return onUpdate((_refs$value$current6 = refs.value.current) === null || _refs$value$current6 === void 0 ? void 0 : _refs$value$current6.index);
if (previousClientY > clientY) return onUpdate('next');
}
}
// Move
if (refs.version.current === 'regular' && refs.value.current) {
if (refs.orientation.current === 'horizontal') {
var _refs$mouseDownPositi2;
const {
x: x_2
} = refs.value.current;
let index_0 = refs.value.current.index;
if (((_refs$mouseDownPositi2 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi2 === void 0 ? void 0 : _refs$mouseDownPositi2.x) > x_2) index_0++;
const width__1 = refs.carousel.current.getBoundingClientRect().width;
const original = index_0 * width__1 + index_0 * (gap * theme.space.unit);
const threshold = width__1 / 4;
const moved = Math.abs(original - x_2);
if (x_2 > 0 && x_2 < original && moved >= threshold) onUpdate(index_0 - 1);else if (x_2 > original && moved >= threshold) onUpdate(index_0 + 1);else onUpdate(index_0);
}
if (refs.orientation.current === 'vertical') {
var _refs$mouseDownPositi3;
const {
y: y_2
} = refs.value.current;
let index_1 = refs.value.current.index;
if (((_refs$mouseDownPositi3 = refs.mouseDownPosition.current) === null || _refs$mouseDownPositi3 === void 0 ? void 0 : _refs$mouseDownPositi3.y) > y_2) index_1++;
const height__3 = refs.carousel.current.getBoundingClientRect().height;
const original_0 = index_1 * height__3 + index_1 * (gap * theme.space.unit);
const threshold_0 = height__3 / 4;
const moved_0 = Math.abs(original_0 - y_2);
if (y_2 > 0 && y_2 < original_0 && moved_0 >= threshold_0) onUpdate(index_1 - 1);else if (y_2 > original_0 && moved_0 >= threshold_0) onUpdate(index_1 + 1);else onUpdate(index_1);
}
}
setMouseDown(false);
refs.previousMouseEvent.current = undefined;
}
};
_react.default.useEffect(() => {
var _refs$root$current;
const onKeyDown = event_0 => {
if (refs.focus.current) {
switch (event_0.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__2,
height: height__4
} = refs.carousel.current.getBoundingClientRect();
const {
scrollWidth: scrollWidth__1,
scrollHeight: scrollHeight__1
} = refs.carousel.current;
if (refs.orientation.current === 'horizontal' && incX !== 0) {
var _refs$value$current7, _refs$value$current8, _refs$value$current9;
const min_1 = 0;
let max_2 = (width__2 + gap * theme.space.unit) * (refs.itemsLength.current - 1);
if (refs.itemSize.current === 'auto') {
max_2 = scrollWidth__1 - scrollWidth__1 / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
}
let x_3 = (((_refs$value$current7 = refs.value.current) === null || _refs$value$current7 === void 0 ? void 0 : _refs$value$current7.x) || 0) - incX;
if (refs.free.current || !refs.moveBeyondEdge.current) x_3 = (0, _utils.clamp)(x_3, min_1, max_2);
// Move beyond min, max
if (x_3 < min_1 || x_3 > max_2) x_3 = (((_refs$value$current8 = refs.value.current) === null || _refs$value$current8 === void 0 ? void 0 : _refs$value$current8.x) || 0) - incX / 1.7;
refs.velocity.current = x_3 - (((_refs$value$current9 = refs.value.current) === null || _refs$value$current9 === void 0 ? void 0 : _refs$value$current9.x) || 0);
onUpdatePosition({
index: Math.floor(x_3 / (max_2 / (refs.itemsLength.current - 1))),
x: x_3
});
}
if (refs.orientation.current === 'vertical' && incY !== 0) {
var _refs$value$current0, _refs$value$current1, _refs$value$current10;
const min_2 = 0;
let max_3 = (height__4 + gap * theme.space.unit) * (refs.itemsLength.current - 1);
if (refs.itemSize.current === 'auto') {
max_3 = scrollHeight__1 - scrollHeight__1 / refs.itemsLength.current + gap * theme.space.unit * (refs.itemsLength.current - 1);
}
let y_3 = (((_refs$value$current0 = refs.value.current) === null || _refs$value$current0 === void 0 ? void 0 : _refs$value$current0.y) || 0) - incY;
if (refs.free.current || !refs.moveBeyondEdge.current) y_3 = (0, _utils.clamp)(y_3, min_2, max_3);
// Move beyond min, max
if (y_3 < min_2 || y_3 > max_3) y_3 = (((_refs$value$current1 = refs.value.current) === null || _refs$value$current1 === void 0 ? void 0 : _refs$value$current1.y) || 0) - incY / 1.7;
refs.velocity.current = y_3 - (((_refs$value$current10 = refs.value.current) === null || _refs$value$current10 === void 0 ? void 0 : _refs$value$current10.y) || 0);
onUpdatePosition({
index: Math.floor(y_3 / (max_3 / (refs.itemsLength.current - 1))),
y: y_3
});
}
}
};
// Mouse move
const onMouseMove = event_1 => {
if (refs.mouseDown.current) {
const {
clientY: clientY_0,
clientX: clientX_0
} = event_1;
onMove(clientX_0, clientY_0);
refs.previousMouseEvent.current = event_1;
}
};
// Touch move
const onTouchMove = event_2 => {
if (refs.mouseDown.current) {
const {
clientY: clientY_1,
clientX: clientX_1
} = event_2.touches[0];
onMove(clientX_1, clientY_1);
refs.previousMouseEvent.current = event_2;
// Normalize for use as a mouseDown value
refs.previousMouseEvent.current.clientY = clientY_1;
refs.previousMouseEvent.current.clientX = clientX_1;
}
};
const method = () => {
var _refs$value$current11;
return onUpdate((_refs$value$current11 = refs.value.current) === null || _refs$value$current11 === void 0 ? void 0 : _refs$value$current11.index);
};
const observer = new ResizeObserver(method);
method();
observer.observe(refs.root.current);
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _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 ((0, _utils.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.default.useEffect(() => {
if (value_ !== undefined && !(0, _utils.equalDeep)(value_, refs.value.current)) setValue(valuePrevious => _objectSpread(_objectSpread({}, valuePrevious), value_));
}, [value_]);
_react.default.useEffect(() => {
if (init) {
var _refs$value$current12;
if (index_ >= 0 && index_ <= refs.itemsLength.current && index_ !== ((_refs$value$current12 = refs.value.current) === null || _refs$value$current12 === void 0 ? void 0 : _refs$value$current12.index)) onUpdate(index_);
}
}, [index_]);
_react.default.useEffect(() => {
if ((0, _utils.is)('function', onUpdateItems)) onUpdateItems();
}, [items, theme.palette.light]);
_react.default.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.default.useEffect(() => {
start();
}, [items, value, autoPlay, autoPlayInterval]);
// OnesySubscription methods
_react.default.useEffect(() => {
const method_0 = (...args) => onUpdate(...args);
if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.subscribe)) updateSub === null || updateSub === void 0 || updateSub.subscribe(method_0);
return () => {
if ((0, _utils.is)('function', updateSub === null || updateSub === void 0 ? void 0 : updateSub.unsubscribe)) updateSub === null || updateSub === void 0 || updateSub.unsubscribe(method_0);
};
}, [updateSub]);
_react.default.useEffect(() => {
const method_1 = (...args_0) => onUpdate(...args_0);
if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.subscribe)) previousSub === null || previousSub === void 0 || previousSub.subscribe(method_1);
return () => {
if ((0, _utils.is)('function', previousSub === null || previousSub === void 0 ? void 0 : previousSub.unsubscribe)) previousSub === null || previousSub === void 0 || previousSub.unsubscribe(method_1);
};
}, [previousSub]);
_react.default.useEffect(() => {
const method_2 = (...args_1) => onUpdate(...args_1);
if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.subscribe)) nextSub === null || nextSub === void 0 || nextSub.subscribe(method_2);
return () => {
if ((0, _utils.is)('function', nextSub === null || nextSub === void 0 ? void 0 : nextSub.unsubscribe)) nextSub === null || nextSub === void 0 || nextSub.unsubscribe(method_2);
};
}, [nextSub]);
_react.default.useEffect(() => {
const values_0 = (0, _utils.unique)([...items_, ..._react.default.Children.toArray(children)]).filter(Boolean);
const previous = refs.items.current.reduce((result_0, item_2) => result_0 += (0, _utils.is)('string', item_2) ? item_2 : item_2 === null || item_2 === void 0 ? void 0 : item_2.key, '');
const updated = values_0.reduce((result_1, item_3) => result_1 += (0, _utils.is)('string', item_3) ? item_3 : item_3 === null || item_3 === void 0 ? void 0 : item_3.key, '');
if (updated !== previous) {
onUpdate('next', values_0);
setItems(values_0);
}
}, [items_, background, children]);
const onWheel = (0, _utils.debounce)(event_3 => {
if (refs.orientation.current === 'horizontal' && event_3.deltaX < 0 || refs.orientation.current === 'vertical' && event_3.deltaY < 0) {
event_3.preventDefault();
event_3.stopPropagation();
return onUpdate('previous');
}
if (refs.orientation.current === 'horizontal' && event_3.deltaX > 0 || refs.orientation.current === 'vertical' && event_3.deltaY > 0) {
event_3.preventDefault();
event_3.stopPropagation();
return onUpdate('next');
}
}, 40);
const onBlur = event_4 => {
setFocus(false);
if ((0, _utils.is)('function', onBlur_)) onBlur_(event_4);
};
const onFocus = event_5 => {
setFocus(true);
if ((0, _utils.is)('function', onFocus_)) onFocus_(event_5);
};
const onMouseDown = event_6 => {
// Momentum
momentumClear();
setMouseDown(event_6);
refs.mouseDownPosition.current = _objectSpread({}, refs.value.current);
refs.mouseDownStart.current = new Date().getTime();
refs.carousel.current.style.transition = 'none';
};
const onMouseEnter = event_7 => {
setHover(true);
if (refs.autoPlay.current) clear();
if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_7);
};
const onMouseLeave = event_8 => {
setFocus(false);
setHover(false);
if (!refs.autoPlay.current) start();
if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_8);
};
const onArrowMouseEnter = event_9 => {
setHover(true);
if (refs.autoPlay.current) clear();
};
const ArrowPreviousTransitionComponent_ = ArrowPreviousTransitionComponent || ArrowTransitionComponent;
const ArrowNextTransitionComponent_ = ArrowNextTransitionComponent || ArrowTransitionComponent;
let TransitionComponent = TransitionComponent_;
if (noTransition) TransitionComponent = _react.default.Fragment;
if (version === 'regular') {
styles.carousel.transform = `translate3d(${orientation === 'horizontal' ? `${-((value === null || value === void 0 ? void 0 : value.x) || 0)}px, 0` : `0, ${-((value === null || value === void 0 ? void 0 : value.y) || 0)}px`}, 0)`;
}
const indexActive = value === null || value === void 0 ? void 0 : value.index;
let arrowPreviousIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
let arrowNextIn = focus || arrowsVisibility === 'hover' && hover || arrowsVisibility === 'visible';
if (arrowHideOnStartEnd) {
const min_3 = 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 === null || value === void 0 ? void 0 : value.x) === min_3 || (value === null || value === void 0 ? void 0 : value.y) === min_3) arrowPreviousIn = false;
if (itemSize === 'auto') {
if ((value === null || value === void 0 ? void 0 : value.x) !== undefined && (value === null || value === void 0 ? void 0 : value.x) + 1 >= maxX || (value === null || value === void 0 ? void 0 : value.y) !== undefined && (value === null || value === void 0 ? void 0 : value.y) + 1 >= maxY) arrowNextIn = false;
} else {
if ((value === null || value === void 0 ? void 0 : value.x) !== undefined && (value === null || value === void 0 ? void 0 : value.x) + 1 >= maxX || (value === null || value === void 0 ? void 0 : value.y) + 1 !== undefined && (value === null || value === void 0 ? void 0 : 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 ((0, _utils.is)('string', Item)) {
if (background) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-background'], classes.background]),
style: {
backgroundImage: `url(${Item})`
}
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: Item,
alt: ""
});
}
if ((0, _utils.is)('function', Item)) return Item(refs.value.current);
if (Item !== null && Item !== void 0 && Item.element) return /*#__PURE__*/_react.default.cloneElement(Item.element);
return /*#__PURE__*/_react.default.cloneElement(Item);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item_4 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_4);else ref.current = item_4;
}
refs.root.current = item_4;
},
tabIndex: "0",
role: "region",
"aria-roledescription": "carousel",
tonal: tonal,
color: color,
onFocus: onFocus,
onBlur: onBlur,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-root'], className, classes.root, autoHeight && classes.autoHeight])
}, other), {}, {
children: [start_, version === 'regular' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-carousel'], CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.className, classes.carousel, classes[`carousel_version_${version}`]]),
style: _objectSpread(_objectSpread({}, styles.carousel), CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.style),
children: items.map((item_5, index_2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
gap: 0,
direction: "column",
align: "center",
justify: "center",
role: "group",
"aria-roledescription": "slide",
"aria-label": `${index_2 + 1} out of ${refs.itemsLength.current}`
}, ItemWrapperProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-item'], ItemWrapperProps === null || ItemWrapperProps === void 0 ? void 0 : ItemWrapperProps.className, classes.item, autoHeight && classes[`item_version_${version}_autoHeight`], itemSize && classes[`item_itemSize_${itemSize}`]]),
children: resolveItem(item_5)
}), index_2))
})), version === 'transition' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-carousel'], CarouselProps === null || CarouselProps === void 0 ? void 0 : CarouselProps.className, classes.carousel]),
children: value && /*#__PURE__*/(0, _jsxRuntime.jsx)(Transitions, _objectSpread(_objectSpread({
mode: "in-out-follow",
switch: true
}, TransitionsProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-item-transition'], classes.item_transition, autoHeight && classes[`item_version_${version}_autoHeight`]]),
children: resolveItem(value.element)
})
}), indexActive)
}))
})), progress && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressTransitionComponent, _objectSpread(_objectSpread({
in: focus || progressVisibility === 'hover' && hover || progressVisibility === 'visible'
}, ProgressTransitionComponentProps), {}, {
children: (0, _utils.is)('function', renderProgress) ? renderProgress(onUpdate) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
direction: orientation === 'horizontal' ? theme.direction === 'ltr' ? 'row' : 'row-reverse' : 'column',
align: "center",
justify: "center",
wrap: "wrap",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-progress'], classes.progress, classes[`progress_orientation_${orientation}`]]),
children: Array.from({
length: refs.itemsLength.current
}).map((item_6, index_3) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
onClick: () => onUpdate(index_3),
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-progress-item', indexActive === index_3 && 'onesy-Carousel-progress-item-active'], classes.progress_item, indexActive === index_3 && classes.progress_item_active])
}, index_3))
})
})), arrows && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowPreviousTransitionComponent_, _objectSpread(_objectSpread(_objectSpread({
in: arrowPreviousIn
}, ArrowTransitionComponentProps), ArrowPreviousTransitionComponentProps), {}, {
children: (0, _utils.is)('function', renderArrowPrevious) ? renderArrowPrevious(() => onUpdate('previous')) : IconButtonPrevious ? /*#__PURE__*/_react.default.cloneElement(IconButtonPrevious, _objectSpread(_objectSpread(_objectSpread({
tonal,
color,
onClick: onPrevious,
onMouseEnter: onArrowMouseEnter
}, ArrowProps), ArrowPreviousProps), {}, {
disabled: !round && indexActive === 0,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Carousel', theme) && ['onesy-Carousel-arrow', 'onesy-Carousel-arrow-previous'], ArrowProps === null || ArrowProps === void 0 ? void 0 : ArrowProps.