@alto-avios/alto-ui 3.5.2-alpha.1 → 3.5.2-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/assets/Carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._carouselWrapper_1a1ml_2{box-sizing:border-box;margin:0;max-width:100%;padding:0;position:relative;width:100%}._carouselWrapper_1a1ml_2,._carouselWrapper_1a1ml_2._showPartialItems_1a1ml_14,._carouselWrapper_1a1ml_2._showPartialItems_1a1ml_14 ._carousel_1a1ml_2{overflow-x:visible;overflow-y:hidden}._carouselWrapper_1a1ml_2._hasScrollPadding_1a1ml_25,._carouselWrapper_1a1ml_2._hasScrollPadding_1a1ml_25 ._carousel_1a1ml_2{overflow-x:visible!important;overflow-y:hidden!important}._carousel_1a1ml_2{overflow-x:visible;position:relative;width:100%}._carousel_1a1ml_2,._scroller_1a1ml_43{box-sizing:border-box;overflow-y:hidden}._scroller_1a1ml_43{display:grid;grid-auto-columns:100%;grid-auto-flow:column;overflow-x:auto;-ms-overflow-style:none;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;height:auto;padding:0 1px;transition:all .3s ease}._scroller_1a1ml_43:focus{outline-offset:-2px;outline-width:2px}._scroller_1a1ml_43::-webkit-scrollbar{display:none}._carouselWrapper_1a1ml_2 [data-dragging=true] ._scroller_1a1ml_43{cursor:grabbing;scroll-behavior:auto;touch-action:pan-x}._carouselWrapper_1a1ml_2 ._scroller_1a1ml_43:hover{cursor:grab;touch-action:pan-x}._item_1a1ml_85{box-sizing:border-box;height:auto;max-width:100%;min-height:100%;overflow-y:hidden;scroll-snap-align:start;scroll-snap-stop:always}._carouselWrapper_1a1ml_2 ._carousel_1a1ml_2 ._scroller_1a1ml_43 ._item_1a1ml_85>*{display:block;height:auto;width:100%}[data-scroll-padding=true],[data-scroll-padding=true] ._carousel_1a1ml_2,[data-scroll-padding=true] ._scroller_1a1ml_43{overflow-x:visible!important;overflow-y:hidden!important}[data-scroll-padding=true] ._item_1a1ml_85{scroll-snap-align:start}._slideLeft_1a1ml_123{animation:_slideLeftAnimation_1a1ml_1 1s cubic-bezier(.25,0,.85,.1)}._slideRight_1a1ml_127{animation:_slideRightAnimation_1a1ml_1 1s cubic-bezier(.25,0,.85,.1)}@keyframes _slideLeftAnimation_1a1ml_1{0%{transform:translate(0)}to{transform:translate(0)}}@keyframes _slideRightAnimation_1a1ml_1{0%{transform:translate(0)}to{transform:translate(0)}}._controls_1a1ml_150{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._showOnHover_1a1ml_161 ._arrowContainer_1a1ml_161{opacity:0;transition:opacity .3s ease}._carouselWrapper_1a1ml_2 [data-arrows-visible=true] ._showOnHover_1a1ml_161 ._arrowContainer_1a1ml_161{opacity:1}._hidden_1a1ml_171{opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}._dotsContainerWrapper_1a1ml_180{pointer-events:auto;z-index:2}._dotsContainer_1a1ml_180{position:relative}@media (max-width:768px){._carouselWrapper_1a1ml_2 ._dotsContainerWrapper_1a1ml_180{cursor:pointer}._carouselWrapper_1a1ml_2 ._dotsContainerWrapper_1a1ml_180:active{opacity:.8}}._hiddenTabs_1a1ml_202{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}._tapEnabled_1a1ml_215{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_1a1ml_230{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._carouselDefault_1a1ml_244{height:100%;overflow-x:hidden;width:361px}._carouselDefault_1a1ml_244 ._prevButton_1a1ml_249{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1a1ml_244 ._nextButton_1a1ml_256{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1a1ml_244 ._dotsContainer_1a1ml_180{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1a1ml_274{position:relative;width:100%}._carouselWithAutoPlay_1a1ml_274 ._prevButton_1a1ml_249{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1a1ml_274 ._nextButton_1a1ml_256{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1a1ml_274 ._dotsContainer_1a1ml_180{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1a1ml_274 ._autoplayControl_1a1ml_230{pointer-events:auto!important;position:absolute!important;right:16px!important;top:16px!important;z-index:20!important}._carouselWithScrollPeek_1a1ml_310{position:relative}._carouselWithScrollPeek_1a1ml_310,._carouselWithScrollPeek_1a1ml_310 ._carousel_1a1ml_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithScrollPeek_1a1ml_310 ._prevButton_1a1ml_249{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1a1ml_310 ._nextButton_1a1ml_256{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1a1ml_310 ._dotsContainer_1a1ml_180{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithFractionalItems_1a1ml_344{position:relative}._carouselWithFractionalItems_1a1ml_344,._carouselWithFractionalItems_1a1ml_344 ._carousel_1a1ml_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithFractionalItems_1a1ml_344 ._prevButton_1a1ml_249{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1a1ml_344 ._nextButton_1a1ml_256{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1a1ml_344 ._dotsContainer_1a1ml_180{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._paginationDotsDefault_1a1ml_378{position:relative;width:100%}._paginationDotsDefault_1a1ml_378 ._prevButton_1a1ml_249{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1a1ml_378 ._nextButton_1a1ml_256{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1a1ml_378 ._dotsContainer_1a1ml_180{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._hoverArrowsDefault_1a1ml_407{height:100%;overflow-x:hidden;width:361px}._hoverArrowsDefault_1a1ml_407 ._prevButton_1a1ml_249{left:10px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1a1ml_407 ._nextButton_1a1ml_256{opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1a1ml_407:focus-within ._nextButton_1a1ml_256,._hoverArrowsDefault_1a1ml_407:focus-within ._prevButton_1a1ml_249,._hoverArrowsDefault_1a1ml_407:hover ._nextButton_1a1ml_256,._hoverArrowsDefault_1a1ml_407:hover ._prevButton_1a1ml_249{opacity:1}._hoverArrowsDefault_1a1ml_407 ._dotsContainer_1a1ml_180{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}
|
|
@@ -62,6 +62,7 @@ export interface CarouselBaseProps {
|
|
|
62
62
|
arrowSize?: 'sm' | 'md' | 'lg';
|
|
63
63
|
/**
|
|
64
64
|
* Whether to hide navigation buttons when disabled
|
|
65
|
+
* Note: Navigation buttons are automatically hidden when all items fit on one page
|
|
65
66
|
* @default false
|
|
66
67
|
*/
|
|
67
68
|
hideDisabledArrow?: boolean;
|
|
@@ -87,6 +88,7 @@ export interface CarouselBaseProps {
|
|
|
87
88
|
dotsVariant?: 'standard' | 'transparent';
|
|
88
89
|
/**
|
|
89
90
|
* Whether to hide pagination dots
|
|
91
|
+
* Note: Dots are automatically hidden when there's only one page
|
|
90
92
|
* @default false
|
|
91
93
|
*/
|
|
92
94
|
hideDots?: boolean;
|
|
@@ -9,36 +9,36 @@ import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
|
|
|
9
9
|
import { useFocusRing } from "@react-aria/focus";
|
|
10
10
|
import { resolveResponsiveProp } from "../../utils/breakpoint/responsive.js";
|
|
11
11
|
import { useBreakpoint } from "../../utils/breakpoint/hooks/useBreakpoint.js";
|
|
12
|
-
import '../../assets/Carousel.css';const carouselWrapper = "
|
|
13
|
-
const showPartialItems = "
|
|
14
|
-
const carousel$1 = "
|
|
15
|
-
const hasScrollPadding = "
|
|
16
|
-
const scroller = "
|
|
17
|
-
const item = "
|
|
18
|
-
const slideLeft = "
|
|
19
|
-
const slideLeftAnimation = "
|
|
20
|
-
const slideRight = "
|
|
21
|
-
const slideRightAnimation = "
|
|
22
|
-
const controls = "
|
|
23
|
-
const showOnHover = "
|
|
24
|
-
const arrowContainer = "
|
|
25
|
-
const hidden = "
|
|
26
|
-
const dotsContainerWrapper = "
|
|
27
|
-
const dotsContainer = "
|
|
28
|
-
const hiddenTabs = "
|
|
29
|
-
const tapEnabled = "
|
|
30
|
-
const infinite = "
|
|
31
|
-
const native = "
|
|
32
|
-
const autoplayControlWrapper = "
|
|
33
|
-
const carouselDefault = "
|
|
34
|
-
const prevButton = "
|
|
35
|
-
const nextButton = "
|
|
36
|
-
const carouselWithAutoPlay = "
|
|
37
|
-
const autoplayControl = "
|
|
38
|
-
const carouselWithScrollPeek = "
|
|
39
|
-
const carouselWithFractionalItems = "
|
|
40
|
-
const paginationDotsDefault = "
|
|
41
|
-
const hoverArrowsDefault = "
|
|
12
|
+
import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_1a1ml_2";
|
|
13
|
+
const showPartialItems = "_showPartialItems_1a1ml_14";
|
|
14
|
+
const carousel$1 = "_carousel_1a1ml_2";
|
|
15
|
+
const hasScrollPadding = "_hasScrollPadding_1a1ml_25";
|
|
16
|
+
const scroller = "_scroller_1a1ml_43";
|
|
17
|
+
const item = "_item_1a1ml_85";
|
|
18
|
+
const slideLeft = "_slideLeft_1a1ml_123";
|
|
19
|
+
const slideLeftAnimation = "_slideLeftAnimation_1a1ml_1";
|
|
20
|
+
const slideRight = "_slideRight_1a1ml_127";
|
|
21
|
+
const slideRightAnimation = "_slideRightAnimation_1a1ml_1";
|
|
22
|
+
const controls = "_controls_1a1ml_150";
|
|
23
|
+
const showOnHover = "_showOnHover_1a1ml_161";
|
|
24
|
+
const arrowContainer = "_arrowContainer_1a1ml_161";
|
|
25
|
+
const hidden = "_hidden_1a1ml_171";
|
|
26
|
+
const dotsContainerWrapper = "_dotsContainerWrapper_1a1ml_180";
|
|
27
|
+
const dotsContainer = "_dotsContainer_1a1ml_180";
|
|
28
|
+
const hiddenTabs = "_hiddenTabs_1a1ml_202";
|
|
29
|
+
const tapEnabled = "_tapEnabled_1a1ml_215";
|
|
30
|
+
const infinite = "_infinite_1a1ml_221";
|
|
31
|
+
const native = "_native_1a1ml_226";
|
|
32
|
+
const autoplayControlWrapper = "_autoplayControlWrapper_1a1ml_230";
|
|
33
|
+
const carouselDefault = "_carouselDefault_1a1ml_244";
|
|
34
|
+
const prevButton = "_prevButton_1a1ml_249";
|
|
35
|
+
const nextButton = "_nextButton_1a1ml_256";
|
|
36
|
+
const carouselWithAutoPlay = "_carouselWithAutoPlay_1a1ml_274";
|
|
37
|
+
const autoplayControl = "_autoplayControl_1a1ml_230";
|
|
38
|
+
const carouselWithScrollPeek = "_carouselWithScrollPeek_1a1ml_310";
|
|
39
|
+
const carouselWithFractionalItems = "_carouselWithFractionalItems_1a1ml_344";
|
|
40
|
+
const paginationDotsDefault = "_paginationDotsDefault_1a1ml_378";
|
|
41
|
+
const hoverArrowsDefault = "_hoverArrowsDefault_1a1ml_407";
|
|
42
42
|
const styles = {
|
|
43
43
|
carouselWrapper,
|
|
44
44
|
showPartialItems,
|
|
@@ -133,6 +133,7 @@ const Carousel = ({
|
|
|
133
133
|
const resolvedArrowSize = resolveResponsiveProp(arrowSize, breakpoint) ?? "md";
|
|
134
134
|
const safeItemsPerPage = Math.max(1, resolvedItemsPerPage);
|
|
135
135
|
const totalPages = Math.ceil(totalItems / safeItemsPerPage);
|
|
136
|
+
const shouldShowDots = !hideDots && totalPages > 1;
|
|
136
137
|
const carouselRef = useRef(null);
|
|
137
138
|
const ariaCarouselRef = useRef(null);
|
|
138
139
|
const [currentPage, setCurrentPage] = useState(0);
|
|
@@ -186,15 +187,15 @@ const Carousel = ({
|
|
|
186
187
|
}
|
|
187
188
|
setIsTransitioning(true);
|
|
188
189
|
setPrevPage(currentPage);
|
|
189
|
-
|
|
190
|
+
if (nativeTab) {
|
|
191
|
+
nativeTab.click();
|
|
192
|
+
}
|
|
190
193
|
setTimeout(() => {
|
|
191
|
-
|
|
192
|
-
nativeTab.click();
|
|
193
|
-
}
|
|
194
|
+
setCurrentPage(index);
|
|
194
195
|
setTimeout(() => {
|
|
195
196
|
setIsTransitioning(false);
|
|
196
|
-
},
|
|
197
|
-
},
|
|
197
|
+
}, 500);
|
|
198
|
+
}, 50);
|
|
198
199
|
};
|
|
199
200
|
useEffect(() => {
|
|
200
201
|
if (!carouselRef.current || !mouseDragging) return;
|
|
@@ -336,7 +337,8 @@ const Carousel = ({
|
|
|
336
337
|
}
|
|
337
338
|
}
|
|
338
339
|
} : {};
|
|
339
|
-
const
|
|
340
|
+
const shouldShowArrows = totalPages > 1;
|
|
341
|
+
const arrowsVisible = shouldShowArrows && (!showArrowsOnHover || isHovered || isFocused);
|
|
340
342
|
const cssVars = getCssVariables();
|
|
341
343
|
const {
|
|
342
344
|
focusProps,
|
|
@@ -409,7 +411,7 @@ const Carousel = ({
|
|
|
409
411
|
] }),
|
|
410
412
|
/* @__PURE__ */ jsx("div", { className: styles.hiddenTabs, children: /* @__PURE__ */ jsx(CarouselTabs, { children: (page) => /* @__PURE__ */ jsx(CarouselTab, { index: page.index, "data-index": page.index, "data-slide-tab": "true", tabIndex: -1 }, page.index) }) }),
|
|
411
413
|
autoPlay && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${autoplayControlClassName || ""}`, children: /* @__PURE__ */ jsx(AutoplayControl, { variant: autoPlayStyleVariant, size: autoPlayControlSize, className: "" }) }),
|
|
412
|
-
|
|
414
|
+
shouldShowDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => navigateToSlide(index), focusStyle, dotsSize, variant: dotsVariant, className: `${dotsContainerClassName}`, dotsWrapperClassName, dotClassName, activeDotClassName, isTransitioning })
|
|
413
415
|
] }) });
|
|
414
416
|
};
|
|
415
417
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|