@alto-avios/alto-ui 3.6.0-alpha.0 → 3.6.0-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 +1 -1
- package/dist/components/Carousel/Carousel.d.ts +1 -1
- package/dist/components/Carousel/Carousel.js +70 -106
- package/dist/components/Carousel/Carousel.js.map +1 -1
- package/dist/components/Carousel/CarouselControls.js +2 -2
- package/dist/components/Carousel/CarouselDots/CarouselDots.js +19 -18
- package/dist/components/Carousel/CarouselDots/CarouselDots.js.map +1 -1
- package/package.json +1 -1
package/dist/assets/Carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._carouselWrapper_53fml_2{box-sizing:border-box;margin:0;max-width:100%;padding:0;position:relative;width:100%}._carouselWrapper_53fml_2,._carouselWrapper_53fml_2._showPartialItems_53fml_14,._carouselWrapper_53fml_2._showPartialItems_53fml_14 ._carousel_53fml_2{overflow-x:visible;overflow-y:hidden}._carouselWrapper_53fml_2._hasScrollPadding_53fml_25,._carouselWrapper_53fml_2._hasScrollPadding_53fml_25 ._carousel_53fml_2{overflow-x:visible!important;overflow-y:hidden!important}._carousel_53fml_2{overflow-x:visible;position:relative;width:100%}._carousel_53fml_2,._scroller_53fml_43{box-sizing:border-box;overflow-y:hidden}._scroller_53fml_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_53fml_43:focus{outline-offset:-2px;outline-width:2px}._scroller_53fml_43::-webkit-scrollbar{display:none}._carouselWrapper_53fml_2 [data-dragging=true] ._scroller_53fml_43{cursor:grabbing;scroll-behavior:auto;touch-action:pan-x}._carouselWrapper_53fml_2 ._scroller_53fml_43:hover{cursor:grab;touch-action:pan-x}._item_53fml_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_53fml_2 ._carousel_53fml_2 ._scroller_53fml_43 ._item_53fml_85>*{display:block;height:auto;width:100%}[data-scroll-padding=true],[data-scroll-padding=true] ._carousel_53fml_2,[data-scroll-padding=true] ._scroller_53fml_43{overflow-x:visible!important;overflow-y:hidden!important}[data-scroll-padding=true] ._item_53fml_85{scroll-snap-align:start}._slideLeft_53fml_123{animation:_slideLeftAnimation_53fml_1 1s cubic-bezier(.25,0,.85,.1)}._slideRight_53fml_127{animation:_slideRightAnimation_53fml_1 1s cubic-bezier(.25,0,.85,.1)}@keyframes _slideLeftAnimation_53fml_1{0%{transform:translate(0)}to{transform:translate(0)}}@keyframes _slideRightAnimation_53fml_1{0%{transform:translate(0)}to{transform:translate(0)}}._controls_53fml_150{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._carouselWrapper_53fml_2 ._controls_53fml_150 ._defaultPrevButton_53fml_161{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWrapper_53fml_2 ._controls_53fml_150 ._defaultNextButton_53fml_169{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWrapper_53fml_2 ._defaultDotsContainer_53fml_178{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._defaultCarouselWrapper_53fml_189{margin:0 auto;max-width:800px;width:360px}._carouselWrapper_53fml_2 ._autoplayControlWrapper_53fml_196 ._defaultAutoplayControl_53fml_196{pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._showOnHover_53fml_205 ._arrowContainer_53fml_205{opacity:0;transition:opacity .3s ease}._carouselWrapper_53fml_2 [data-arrows-visible=true] ._showOnHover_53fml_205 ._arrowContainer_53fml_205{opacity:1}._hidden_53fml_215{opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}._dotsContainerWrapper_53fml_224{pointer-events:auto;z-index:2}._dotsContainer_53fml_224{position:relative}@media (max-width:768px){._carouselWrapper_53fml_2 ._dotsContainerWrapper_53fml_224{cursor:pointer}._carouselWrapper_53fml_2 ._dotsContainerWrapper_53fml_224:active{opacity:.8}}._hiddenTabs_53fml_246{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_53fml_259{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_53fml_196{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._carouselDefault_53fml_288{height:100%;overflow-x:hidden;width:361px}._carouselDefault_53fml_288 ._prevButton_53fml_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_53fml_288 ._nextButton_53fml_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_53fml_288 ._dotsContainer_53fml_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_53fml_318{position:relative;width:100%}._carouselWithAutoPlay_53fml_318 ._prevButton_53fml_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_53fml_318 ._nextButton_53fml_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_53fml_318 ._dotsContainer_53fml_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_53fml_318 ._autoplayControl_53fml_196{pointer-events:auto!important;position:absolute!important;right:16px!important;top:16px!important;z-index:20!important}._carouselWithScrollPeek_53fml_354{position:relative}._carouselWithScrollPeek_53fml_354,._carouselWithScrollPeek_53fml_354 ._carousel_53fml_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithScrollPeek_53fml_354 ._prevButton_53fml_293{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_53fml_354 ._nextButton_53fml_300{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_53fml_354 ._dotsContainer_53fml_224{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithFractionalItems_53fml_388{position:relative}._carouselWithFractionalItems_53fml_388,._carouselWithFractionalItems_53fml_388 ._carousel_53fml_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithFractionalItems_53fml_388 ._prevButton_53fml_293{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_53fml_388 ._nextButton_53fml_300{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_53fml_388 ._dotsContainer_53fml_224{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._paginationDotsDefault_53fml_422{position:relative;width:100%}._paginationDotsDefault_53fml_422 ._prevButton_53fml_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_53fml_422 ._nextButton_53fml_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_53fml_422 ._dotsContainer_53fml_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._hoverArrowsDefault_53fml_451{height:100%;overflow-x:hidden;width:361px}._hoverArrowsDefault_53fml_451 ._prevButton_53fml_293{left:10px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_53fml_451 ._nextButton_53fml_300{opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_53fml_451:focus-within ._nextButton_53fml_300,._hoverArrowsDefault_53fml_451:focus-within ._prevButton_53fml_293,._hoverArrowsDefault_53fml_451:hover ._nextButton_53fml_300,._hoverArrowsDefault_53fml_451:hover ._prevButton_53fml_293{opacity:1}._hoverArrowsDefault_53fml_451 ._dotsContainer_53fml_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}
|
|
@@ -165,7 +165,7 @@ export interface CarouselBaseProps {
|
|
|
165
165
|
*/
|
|
166
166
|
activeItemClassName?: string;
|
|
167
167
|
}
|
|
168
|
-
type ResponsiveKeys = 'itemsPerPage' | 'spaceBetweenItems' | 'scrollPadding' | 'showArrowsOnHover' | 'arrowSize';
|
|
168
|
+
type ResponsiveKeys = 'itemsPerPage' | 'spaceBetweenItems' | 'scrollPadding' | 'showArrowsOnHover' | 'arrowSize' | 'hideDots';
|
|
169
169
|
export type CarouselProps = WithResponsive<CarouselBaseProps, ResponsiveKeys>;
|
|
170
170
|
export declare const Carousel: ({ children, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, looping, itemsPerPage, spaceBetweenItems, scrollPadding, iconType, arrowStyleVariant, arrowSize, hideDisabledArrow, showArrowsOnHover, focusStyle, dotsSize, dotsVariant, hideDots, autoPlay, autoPlayInterval, autoPlayStyleVariant, autoPlayControlSize, mouseDragging, carouselWrapperClassName, prevArrowClassName, nextArrowClassName, autoplayControlClassName, dotsContainerClassName, dotsWrapperClassName, dotClassName, activeDotClassName, itemWrapperClassName, activeItemClassName, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
|
|
171
171
|
export default Carousel;
|
|
@@ -9,41 +9,41 @@ 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 defaultPrevButton = "
|
|
24
|
-
const defaultNextButton = "
|
|
25
|
-
const defaultDotsContainer = "
|
|
26
|
-
const defaultCarouselWrapper = "
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const carouselDefault = "
|
|
39
|
-
const prevButton = "
|
|
40
|
-
const nextButton = "
|
|
41
|
-
const carouselWithAutoPlay = "
|
|
42
|
-
const autoplayControl = "
|
|
43
|
-
const carouselWithScrollPeek = "
|
|
44
|
-
const carouselWithFractionalItems = "
|
|
45
|
-
const paginationDotsDefault = "
|
|
46
|
-
const hoverArrowsDefault = "
|
|
12
|
+
import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_53fml_2";
|
|
13
|
+
const showPartialItems = "_showPartialItems_53fml_14";
|
|
14
|
+
const carousel$1 = "_carousel_53fml_2";
|
|
15
|
+
const hasScrollPadding = "_hasScrollPadding_53fml_25";
|
|
16
|
+
const scroller = "_scroller_53fml_43";
|
|
17
|
+
const item = "_item_53fml_85";
|
|
18
|
+
const slideLeft = "_slideLeft_53fml_123";
|
|
19
|
+
const slideLeftAnimation = "_slideLeftAnimation_53fml_1";
|
|
20
|
+
const slideRight = "_slideRight_53fml_127";
|
|
21
|
+
const slideRightAnimation = "_slideRightAnimation_53fml_1";
|
|
22
|
+
const controls = "_controls_53fml_150";
|
|
23
|
+
const defaultPrevButton = "_defaultPrevButton_53fml_161";
|
|
24
|
+
const defaultNextButton = "_defaultNextButton_53fml_169";
|
|
25
|
+
const defaultDotsContainer = "_defaultDotsContainer_53fml_178";
|
|
26
|
+
const defaultCarouselWrapper = "_defaultCarouselWrapper_53fml_189";
|
|
27
|
+
const autoplayControlWrapper = "_autoplayControlWrapper_53fml_196";
|
|
28
|
+
const defaultAutoplayControl = "_defaultAutoplayControl_53fml_196";
|
|
29
|
+
const showOnHover = "_showOnHover_53fml_205";
|
|
30
|
+
const arrowContainer = "_arrowContainer_53fml_205";
|
|
31
|
+
const hidden = "_hidden_53fml_215";
|
|
32
|
+
const dotsContainerWrapper = "_dotsContainerWrapper_53fml_224";
|
|
33
|
+
const dotsContainer = "_dotsContainer_53fml_224";
|
|
34
|
+
const hiddenTabs = "_hiddenTabs_53fml_246";
|
|
35
|
+
const tapEnabled = "_tapEnabled_53fml_259";
|
|
36
|
+
const infinite = "_infinite_53fml_265";
|
|
37
|
+
const native = "_native_53fml_270";
|
|
38
|
+
const carouselDefault = "_carouselDefault_53fml_288";
|
|
39
|
+
const prevButton = "_prevButton_53fml_293";
|
|
40
|
+
const nextButton = "_nextButton_53fml_300";
|
|
41
|
+
const carouselWithAutoPlay = "_carouselWithAutoPlay_53fml_318";
|
|
42
|
+
const autoplayControl = "_autoplayControl_53fml_196";
|
|
43
|
+
const carouselWithScrollPeek = "_carouselWithScrollPeek_53fml_354";
|
|
44
|
+
const carouselWithFractionalItems = "_carouselWithFractionalItems_53fml_388";
|
|
45
|
+
const paginationDotsDefault = "_paginationDotsDefault_53fml_422";
|
|
46
|
+
const hoverArrowsDefault = "_hoverArrowsDefault_53fml_451";
|
|
47
47
|
const styles = {
|
|
48
48
|
carouselWrapper,
|
|
49
49
|
showPartialItems,
|
|
@@ -60,6 +60,7 @@ const styles = {
|
|
|
60
60
|
defaultNextButton,
|
|
61
61
|
defaultDotsContainer,
|
|
62
62
|
defaultCarouselWrapper,
|
|
63
|
+
autoplayControlWrapper,
|
|
63
64
|
defaultAutoplayControl,
|
|
64
65
|
showOnHover,
|
|
65
66
|
arrowContainer,
|
|
@@ -70,7 +71,6 @@ const styles = {
|
|
|
70
71
|
tapEnabled,
|
|
71
72
|
infinite,
|
|
72
73
|
native,
|
|
73
|
-
autoplayControlWrapper,
|
|
74
74
|
carouselDefault,
|
|
75
75
|
prevButton,
|
|
76
76
|
nextButton,
|
|
@@ -141,9 +141,10 @@ const Carousel = ({
|
|
|
141
141
|
const resolvedSpaceBetweenItems = resolveResponsiveProp(spaceBetweenItems, breakpoint) ?? 0;
|
|
142
142
|
const resolvedScrollPadding = resolveResponsiveProp(scrollPadding, breakpoint) ?? void 0;
|
|
143
143
|
const resolvedArrowSize = resolveResponsiveProp(arrowSize, breakpoint) ?? "md";
|
|
144
|
+
const resolvedHideDots = resolveResponsiveProp(hideDots, breakpoint) ?? false;
|
|
144
145
|
const safeItemsPerPage = Math.max(1, resolvedItemsPerPage);
|
|
145
146
|
const totalPages = Math.ceil(totalItems / safeItemsPerPage);
|
|
146
|
-
const shouldShowDots = !
|
|
147
|
+
const shouldShowDots = !resolvedHideDots && totalPages > 1;
|
|
147
148
|
const carouselRef = useRef(null);
|
|
148
149
|
const ariaCarouselRef = useRef(null);
|
|
149
150
|
const [currentPage, setCurrentPage] = useState(0);
|
|
@@ -151,7 +152,7 @@ const Carousel = ({
|
|
|
151
152
|
const [isDragging, setIsDragging] = useState(false);
|
|
152
153
|
const [isHovered, setIsHovered] = useState(false);
|
|
153
154
|
const [isFocused, setIsFocused] = useState(false);
|
|
154
|
-
const [isTransitioning
|
|
155
|
+
const [isTransitioning] = useState(false);
|
|
155
156
|
const [dragStartPosition, setDragStartPosition] = useState(null);
|
|
156
157
|
const dragThreshold = 5;
|
|
157
158
|
const getClassNameWithDefault = (customClassName, defaultClassName) => {
|
|
@@ -170,10 +171,7 @@ const Carousel = ({
|
|
|
170
171
|
} else {
|
|
171
172
|
classes.push(styles.defaultCarouselWrapper);
|
|
172
173
|
}
|
|
173
|
-
|
|
174
|
-
console.log("Carousel wrapper classes:", finalClasses);
|
|
175
|
-
console.log("Default wrapper class from styles:", styles.defaultCarouselWrapper);
|
|
176
|
-
return finalClasses;
|
|
174
|
+
return classes.join(" ");
|
|
177
175
|
};
|
|
178
176
|
const getCssVariables = () => {
|
|
179
177
|
const cssVars2 = {};
|
|
@@ -198,22 +196,15 @@ const Carousel = ({
|
|
|
198
196
|
return activeIndices;
|
|
199
197
|
};
|
|
200
198
|
const navigateToSlide = (index) => {
|
|
201
|
-
if (index === currentPage ||
|
|
202
|
-
|
|
203
|
-
if (carouselRef.current) {
|
|
204
|
-
nativeTab = carouselRef.current.querySelector(`[data-index="${index}"]`);
|
|
199
|
+
if (index === currentPage || index < 0 || index >= totalPages) {
|
|
200
|
+
return;
|
|
205
201
|
}
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
202
|
+
if (carouselRef.current) {
|
|
203
|
+
const targetTab = carouselRef.current.querySelector(`[data-slide-tab="true"][data-index="${index}"]`);
|
|
204
|
+
if (targetTab) {
|
|
205
|
+
targetTab.click();
|
|
206
|
+
}
|
|
210
207
|
}
|
|
211
|
-
setTimeout(() => {
|
|
212
|
-
setCurrentPage(index);
|
|
213
|
-
setTimeout(() => {
|
|
214
|
-
setIsTransitioning(false);
|
|
215
|
-
}, 500);
|
|
216
|
-
}, 50);
|
|
217
208
|
};
|
|
218
209
|
useEffect(() => {
|
|
219
210
|
if (!carouselRef.current || !mouseDragging) return;
|
|
@@ -279,72 +270,45 @@ const Carousel = ({
|
|
|
279
270
|
}, [currentPage, prevPage]);
|
|
280
271
|
useEffect(() => {
|
|
281
272
|
if (!carouselRef.current) return;
|
|
282
|
-
const
|
|
273
|
+
const checkCurrentPage = () => {
|
|
283
274
|
if (!carouselRef.current) return;
|
|
284
|
-
const selectedTab = carouselRef.current.querySelector('[aria-selected="true"]');
|
|
285
|
-
if (selectedTab
|
|
286
|
-
const
|
|
287
|
-
if (
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
}
|
|
291
|
-
} else {
|
|
292
|
-
const visibleSlide = carouselRef.current.querySelector('[role="tabpanel"]:not([aria-hidden="true"])');
|
|
293
|
-
if (visibleSlide && visibleSlide.hasAttribute("data-index")) {
|
|
294
|
-
const index = parseInt(visibleSlide.getAttribute("data-index") || "0", 10);
|
|
295
|
-
if (!isNaN(index) && index !== currentPage) {
|
|
275
|
+
const selectedTab = carouselRef.current.querySelector('[data-slide-tab="true"][aria-selected="true"]');
|
|
276
|
+
if (selectedTab) {
|
|
277
|
+
const indexStr = selectedTab.getAttribute("data-index");
|
|
278
|
+
if (indexStr) {
|
|
279
|
+
const newIndex = parseInt(indexStr, 10);
|
|
280
|
+
if (!isNaN(newIndex) && newIndex !== currentPage && newIndex >= 0 && newIndex < totalPages) {
|
|
296
281
|
setPrevPage(currentPage);
|
|
297
|
-
setCurrentPage(
|
|
282
|
+
setCurrentPage(newIndex);
|
|
298
283
|
}
|
|
299
284
|
}
|
|
300
285
|
}
|
|
301
286
|
};
|
|
302
|
-
const prevButton2 = carouselRef.current.querySelector('[dir="prev"]');
|
|
303
|
-
const nextButton2 = carouselRef.current.querySelector('[dir="next"]');
|
|
304
|
-
const handleButtonClick = () => {
|
|
305
|
-
setTimeout(updateCurrentPage, 50);
|
|
306
|
-
};
|
|
307
|
-
prevButton2 == null ? void 0 : prevButton2.addEventListener("click", handleButtonClick);
|
|
308
|
-
nextButton2 == null ? void 0 : nextButton2.addEventListener("click", handleButtonClick);
|
|
309
287
|
const observer = new MutationObserver((mutations) => {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
288
|
+
let shouldCheck = false;
|
|
289
|
+
mutations.forEach((mutation) => {
|
|
290
|
+
if (mutation.type === "attributes" && mutation.attributeName === "aria-selected") {
|
|
291
|
+
shouldCheck = true;
|
|
313
292
|
}
|
|
293
|
+
});
|
|
294
|
+
if (shouldCheck) {
|
|
295
|
+
setTimeout(checkCurrentPage, 10);
|
|
314
296
|
}
|
|
315
297
|
});
|
|
316
|
-
const
|
|
317
|
-
|
|
298
|
+
const hiddenTabs2 = carouselRef.current.querySelectorAll('[data-slide-tab="true"]');
|
|
299
|
+
hiddenTabs2.forEach((tab) => {
|
|
318
300
|
observer.observe(tab, {
|
|
319
|
-
attributes: true
|
|
301
|
+
attributes: true,
|
|
302
|
+
attributeFilter: ["aria-selected"]
|
|
320
303
|
});
|
|
321
304
|
});
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
observer.observe(scroller2, {
|
|
325
|
-
attributes: true
|
|
326
|
-
});
|
|
327
|
-
}
|
|
328
|
-
const handleSlideTransition = () => {
|
|
329
|
-
updateCurrentPage();
|
|
330
|
-
setIsTransitioning(false);
|
|
331
|
-
};
|
|
332
|
-
const scrollerElement = carouselRef.current.querySelector(`.${styles.scroller}`);
|
|
333
|
-
if (scrollerElement) {
|
|
334
|
-
scrollerElement.addEventListener("transitionend", handleSlideTransition);
|
|
335
|
-
}
|
|
336
|
-
updateCurrentPage();
|
|
337
|
-
const checkInterval = setInterval(updateCurrentPage, 300);
|
|
305
|
+
checkCurrentPage();
|
|
306
|
+
const interval = setInterval(checkCurrentPage, 500);
|
|
338
307
|
return () => {
|
|
339
308
|
observer.disconnect();
|
|
340
|
-
|
|
341
|
-
nextButton2 == null ? void 0 : nextButton2.removeEventListener("click", handleButtonClick);
|
|
342
|
-
if (scrollerElement) {
|
|
343
|
-
scrollerElement.removeEventListener("transitionend", handleSlideTransition);
|
|
344
|
-
}
|
|
345
|
-
clearInterval(checkInterval);
|
|
309
|
+
clearInterval(interval);
|
|
346
310
|
};
|
|
347
|
-
}, [currentPage]);
|
|
311
|
+
}, [currentPage, totalPages]);
|
|
348
312
|
const interactionHandlers = showArrowsOnHover ? {
|
|
349
313
|
onMouseEnter: () => setIsHovered(true),
|
|
350
314
|
onMouseLeave: () => setIsHovered(false),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -133,11 +133,11 @@ const carouselArgTypes = {
|
|
|
133
133
|
// Dots/Pagination
|
|
134
134
|
hideDots: {
|
|
135
135
|
control: "boolean",
|
|
136
|
-
description: "Whether to hide pagination dots.
|
|
136
|
+
description: "Whether to hide pagination dots. Can be set responsively to show/hide dots at different breakpoints",
|
|
137
137
|
defaultValue: false,
|
|
138
138
|
table: {
|
|
139
139
|
category: "Dots/Pagination",
|
|
140
|
-
type: { summary: "boolean" },
|
|
140
|
+
type: { summary: "boolean | ResponsiveValue<boolean>" },
|
|
141
141
|
defaultValue: { summary: "false" }
|
|
142
142
|
}
|
|
143
143
|
},
|
|
@@ -89,9 +89,8 @@ const CarouselDots = ({
|
|
|
89
89
|
return classes.join(" ");
|
|
90
90
|
};
|
|
91
91
|
const handleDotClick = (index) => {
|
|
92
|
-
if (
|
|
93
|
-
|
|
94
|
-
}
|
|
92
|
+
if (isTransitioning) return;
|
|
93
|
+
onDotClick(index);
|
|
95
94
|
};
|
|
96
95
|
const handleDotKeyDown = (e, index) => {
|
|
97
96
|
if (isTransitioning) return;
|
|
@@ -109,28 +108,29 @@ const CarouselDots = ({
|
|
|
109
108
|
const getContainerAriaLabel = () => {
|
|
110
109
|
return `Slide pagination, ${totalItems} slides, currently on slide ${currentPage + 1}`;
|
|
111
110
|
};
|
|
112
|
-
const getDotClasses = (index) => {
|
|
113
|
-
const isActive = index === currentPage;
|
|
114
|
-
const classes = [
|
|
115
|
-
styles.tab,
|
|
116
|
-
styles[dotsSize === "lg" ? "tabLg" : "tabMd"],
|
|
117
|
-
// Use CSS classes for sizing
|
|
118
|
-
isActive ? styles.activeTab : "",
|
|
119
|
-
dotClassName || "",
|
|
120
|
-
isActive && activeDotClassName ? activeDotClassName : ""
|
|
121
|
-
].filter(Boolean);
|
|
122
|
-
return classes.join(" ");
|
|
123
|
-
};
|
|
124
111
|
return /* @__PURE__ */ jsx("div", { className: getContainerClasses(), ref: wrapperRef, "data-dot-size": dotsSize, "data-transitioning": isTransitioning ? "true" : void 0, children: /* @__PURE__ */ jsx("div", { className: getDotsWrapperClasses(), ref: tabsRef, tabIndex: 0, role: "tablist", "aria-label": getContainerAriaLabel(), onKeyDown: handleKeyDown, "data-focused": isFocusVisible ? true : void 0, "data-focus-visible": isFocusVisible ? true : void 0, "data-hovered": isHovered ? true : void 0, "aria-activedescendant": `dot-${currentPage}`, ...focusProps, ...hoverProps, children: /* @__PURE__ */ jsx("div", { className: styles.dotsScroller, children: Array.from({
|
|
125
112
|
length: totalItems
|
|
126
113
|
}, (_, index) => {
|
|
127
114
|
const isActive = index === currentPage;
|
|
115
|
+
const baseStyle = {
|
|
116
|
+
width: dotsSize === "lg" ? "12px" : "8px",
|
|
117
|
+
height: dotsSize === "lg" ? "12px" : "8px",
|
|
118
|
+
borderRadius: "50%",
|
|
119
|
+
backgroundColor: isActive ? "var(--alto-sem-color-fg-primary)" : "rgba(0, 0, 0, 0.3)",
|
|
120
|
+
border: "none",
|
|
121
|
+
padding: 0,
|
|
122
|
+
cursor: isTransitioning ? "default" : "pointer",
|
|
123
|
+
display: "block",
|
|
124
|
+
flexShrink: 0,
|
|
125
|
+
margin: 0,
|
|
126
|
+
transition: "background-color 0.2s ease"
|
|
127
|
+
};
|
|
128
128
|
return /* @__PURE__ */ jsx(
|
|
129
129
|
"button",
|
|
130
130
|
{
|
|
131
131
|
id: `dot-${index}`,
|
|
132
132
|
type: "button",
|
|
133
|
-
className:
|
|
133
|
+
className: `${styles.tab} ${isActive ? styles.activeTab : ""} ${dotClassName || ""} ${isActive && activeDotClassName ? activeDotClassName : ""}`,
|
|
134
134
|
onClick: () => handleDotClick(index),
|
|
135
135
|
onKeyDown: (e) => handleDotKeyDown(e, index),
|
|
136
136
|
"aria-label": getDotAriaLabel(index),
|
|
@@ -139,8 +139,9 @@ const CarouselDots = ({
|
|
|
139
139
|
role: "tab",
|
|
140
140
|
"data-tab-index": index,
|
|
141
141
|
tabIndex: -1,
|
|
142
|
-
|
|
143
|
-
"aria-hidden": "true"
|
|
142
|
+
style: baseStyle,
|
|
143
|
+
"aria-hidden": "true",
|
|
144
|
+
disabled: isTransitioning
|
|
144
145
|
},
|
|
145
146
|
index
|
|
146
147
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|