@alto-avios/alto-ui 3.5.2-alpha.0 → 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 +1 -1
- package/dist/assets/CarouselButton.css +1 -1
- package/dist/components/Carousel/Carousel.d.ts +2 -0
- package/dist/components/Carousel/Carousel.js +40 -38
- package/dist/components/Carousel/Carousel.js.map +1 -1
- package/dist/components/Carousel/CarouselButton/CarouselButton.js +55 -16
- package/dist/components/Carousel/CarouselButton/CarouselButton.js.map +1 -1
- package/package.json +1 -1
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}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._arrowContainer_f9nx_1{background:none;border:none;box-shadow:none!important;outline:none!important;padding:0;pointer-events:auto;position:relative;z-index:2}._arrowContainer_f9nx_1:focus,._arrowContainer_f9nx_1:focus-visible{box-shadow:none!important;outline:none!important}._iconButton_f9nx_20{align-items:center;display:flex;justify-content:center}._arrowContainer_f9nx_1._hideDisabledArrow_f9nx_26[aria-disabled=true]{display:none}._arrowContainer_f9nx_1._neutral_f9nx_32 ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._neutral_f9nx_32 ._iconButton_f9nx_20[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._arrowContainer_f9nx_1:not([aria-disabled]) ._neutral_f9nx_32 ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active)}._arrowContainer_f9nx_1._white_f9nx_44 ._iconButton_f9nx_20{background-color:transparent;border:none;border-radius:0}._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-lighten-hover)}._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._arrowContainer_f9nx_1._shapeFlat_f9nx_62:not([aria-disabled]) ._iconButton_f9nx_20{background-color:var(--alto-sem-color-bg-white-vibrant-default)}._arrowContainer_f9nx_1._shapeFlat_f9nx_62:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20{background-color:var(--alto-sem-color-bg-white-vibrant-default);box-shadow:0 11.4px 9.12px #2f2a850d,0 2.59px 4.4px #2f2a850d,0 6.99px 18.18px #2f2a8514}._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20{background:linear-gradient(90deg,#fefefe 50%,#fff0);border:none;border-radius:0;height:100%}._arrowContainer_f9nx_1._gradient_f9nx_93._next_f9nx_100:not([aria-disabled]) ._iconButton_f9nx_20{background:linear-gradient(90deg,#fff0,#fefefe 50%)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background:linear-gradient(90deg,#fefefe 50%,#fff0);color:var(--alto-sem-color-fg-accent-primary)}._arrowContainer_f9nx_1._gradient_f9nx_93._next_f9nx_100:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._gradient_f9nx_93._next_f9nx_100:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background:linear-gradient(90deg,#fff0,#fefefe 50%);color:var(--alto-sem-color-fg-accent-primary)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-focused],._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20{outline-offset:var(--alto-sem-border-width-none)}._arrowContainer_f9nx_1[aria-disabled] ._iconButton_f9nx_20{background-color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;opacity:var(--alto-sem-opacity-30)}._arrowContainer_f9nx_1._fullHeight_f9nx_137{align-items:center;bottom:0;cursor:pointer;display:flex;height:100%;top:0;transform:none}._arrowContainer_f9nx_1._fullHeight_f9nx_137._prev_f9nx_148{justify-content:flex-start;left:0}._arrowContainer_f9nx_1._fullHeight_f9nx_137._next_f9nx_100{justify-content:flex-end;right:0}._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20{border:none!important;box-shadow:none!important;outline:none!important;position:relative;z-index:2}._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20:focus,._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20:focus-visible,._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20[data-focus-visible=true],._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20[data-focused=true]{border:none!important;box-shadow:none!important;outline:none!important}._arrowContainer_f9nx_1:not(._fullHeight_f9nx_137){box-shadow:none!important;outline:none!important}._arrowContainer_f9nx_1:not(._fullHeight_f9nx_137):focus,._arrowContainer_f9nx_1:not(._fullHeight_f9nx_137):focus-visible{box-shadow:none!important;outline:none!important}
|
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,17 +5,17 @@ import { useFocusRing } from "@react-aria/focus";
|
|
|
5
5
|
import { i as iconButtonStyles } from "../../../IconButton.module-DcfPVyUX.js";
|
|
6
6
|
import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
|
|
7
7
|
import { Icon } from "../../Icon/Icon.js";
|
|
8
|
-
import '../../../assets/CarouselButton.css';const arrowContainer = "
|
|
9
|
-
const iconButton = "
|
|
10
|
-
const hideDisabledArrow = "
|
|
11
|
-
const neutral = "
|
|
12
|
-
const white = "
|
|
13
|
-
const shapeFlat = "
|
|
14
|
-
const shapeElevated = "
|
|
15
|
-
const gradient = "
|
|
16
|
-
const next = "
|
|
17
|
-
const fullHeight = "
|
|
18
|
-
const prev = "
|
|
8
|
+
import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_f9nx_1";
|
|
9
|
+
const iconButton = "_iconButton_f9nx_20";
|
|
10
|
+
const hideDisabledArrow = "_hideDisabledArrow_f9nx_26";
|
|
11
|
+
const neutral = "_neutral_f9nx_32";
|
|
12
|
+
const white = "_white_f9nx_44";
|
|
13
|
+
const shapeFlat = "_shapeFlat_f9nx_62";
|
|
14
|
+
const shapeElevated = "_shapeElevated_f9nx_72";
|
|
15
|
+
const gradient = "_gradient_f9nx_93";
|
|
16
|
+
const next = "_next_f9nx_100";
|
|
17
|
+
const fullHeight = "_fullHeight_f9nx_137";
|
|
18
|
+
const prev = "_prev_f9nx_148";
|
|
19
19
|
const styles = {
|
|
20
20
|
arrowContainer,
|
|
21
21
|
iconButton,
|
|
@@ -50,6 +50,7 @@ const CarouselButton = ({
|
|
|
50
50
|
const [isHovered, setIsHovered] = useState(false);
|
|
51
51
|
const [isPressed, setIsPressed] = useState(false);
|
|
52
52
|
const [isDisabled, setIsDisabled] = useState(false);
|
|
53
|
+
const [shouldShowFocusRing, setShouldShowFocusRing] = useState(false);
|
|
53
54
|
const variantStyleClass = variant ? styles[variant] : "";
|
|
54
55
|
const shouldBeFullHeight = fullHeight2 || variant === "gradient";
|
|
55
56
|
const buttonRef = useRef(null);
|
|
@@ -65,6 +66,7 @@ const CarouselButton = ({
|
|
|
65
66
|
if (isCurrentlyDisabled) {
|
|
66
67
|
setIsHovered(false);
|
|
67
68
|
setIsPressed(false);
|
|
69
|
+
setShouldShowFocusRing(false);
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
});
|
|
@@ -77,6 +79,45 @@ const CarouselButton = ({
|
|
|
77
79
|
observer.disconnect();
|
|
78
80
|
};
|
|
79
81
|
}, []);
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
if (!buttonRef.current) return;
|
|
84
|
+
const element = buttonRef.current;
|
|
85
|
+
const handleFocus = (e) => {
|
|
86
|
+
if (e.target === element && isFocusVisible) {
|
|
87
|
+
setShouldShowFocusRing(true);
|
|
88
|
+
const carouselContainer = element.closest('[role="region"][aria-roledescription="carousel"], .carouselWrapper');
|
|
89
|
+
if (carouselContainer) {
|
|
90
|
+
const siblingButtons = carouselContainer.querySelectorAll('[dir="prev"], [dir="next"]');
|
|
91
|
+
siblingButtons.forEach((button) => {
|
|
92
|
+
if (button !== element && button instanceof HTMLElement) {
|
|
93
|
+
button.dispatchEvent(new CustomEvent("carousel:hideFocus"));
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
const handleBlur = () => {
|
|
100
|
+
setShouldShowFocusRing(false);
|
|
101
|
+
};
|
|
102
|
+
const handleHideFocus = () => {
|
|
103
|
+
setShouldShowFocusRing(false);
|
|
104
|
+
};
|
|
105
|
+
element.addEventListener("focus", handleFocus);
|
|
106
|
+
element.addEventListener("blur", handleBlur);
|
|
107
|
+
element.addEventListener("carousel:hideFocus", handleHideFocus);
|
|
108
|
+
return () => {
|
|
109
|
+
element.removeEventListener("focus", handleFocus);
|
|
110
|
+
element.removeEventListener("blur", handleBlur);
|
|
111
|
+
element.removeEventListener("carousel:hideFocus", handleHideFocus);
|
|
112
|
+
};
|
|
113
|
+
}, [isFocusVisible]);
|
|
114
|
+
useEffect(() => {
|
|
115
|
+
if (!isFocusVisible) {
|
|
116
|
+
setShouldShowFocusRing(false);
|
|
117
|
+
} else if (isFocused && isFocusVisible) {
|
|
118
|
+
setShouldShowFocusRing(true);
|
|
119
|
+
}
|
|
120
|
+
}, [isFocusVisible, isFocused]);
|
|
80
121
|
const getIconSize = () => {
|
|
81
122
|
if (size === "sm") return "0.75x";
|
|
82
123
|
if (size === "lg") return "2x";
|
|
@@ -93,7 +134,7 @@ const CarouselButton = ({
|
|
|
93
134
|
return "whiteOnVibrant";
|
|
94
135
|
}
|
|
95
136
|
};
|
|
96
|
-
const containerFocusClass = shouldBeFullHeight &&
|
|
137
|
+
const containerFocusClass = shouldBeFullHeight && shouldShowFocusRing ? focusStyleVariants({
|
|
97
138
|
focusStyle
|
|
98
139
|
}) : "";
|
|
99
140
|
const getButtonClasses = () => {
|
|
@@ -107,7 +148,7 @@ const CarouselButton = ({
|
|
|
107
148
|
const sizeClass = iconButtonStyles[size] || "";
|
|
108
149
|
const emphasisClassKey = `${styleVariant}${emphasis.charAt(0).toUpperCase() + emphasis.slice(1)}`;
|
|
109
150
|
const emphasisClass = iconButtonStyles[emphasisClassKey] || "";
|
|
110
|
-
const focusClass = !shouldBeFullHeight ? focusStyleVariants({
|
|
151
|
+
const focusClass = !shouldBeFullHeight && shouldShowFocusRing ? focusStyleVariants({
|
|
111
152
|
focusStyle
|
|
112
153
|
}) : "";
|
|
113
154
|
return `${baseClass} ${sizeClass} ${emphasisClass} ${focusClass} ${buttonClassName || ""}`;
|
|
@@ -147,9 +188,7 @@ const CarouselButton = ({
|
|
|
147
188
|
const state = isDisabled ? ", unavailable" : "";
|
|
148
189
|
return `${action} slide${state}`;
|
|
149
190
|
};
|
|
150
|
-
return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideDisabledArrow2 ? styles.hideDisabledArrow : ""} ${variantStyleClass || ""} ${shouldBeFullHeight ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""} ${
|
|
151
|
-
focusStyle
|
|
152
|
-
})}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, "data-focused": !isDisabled && isFocused ? true : void 0, ref: buttonRef, tabIndex: getTabIndex(), onClick: handleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "aria-label": getAriaLabel(), role: "button", children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !shouldBeFullHeight && !isDisabled && isFocused ? true : void 0, "data-focus-visible": !shouldBeFullHeight && !isDisabled && isFocusVisible ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
|
|
191
|
+
return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideDisabledArrow2 ? styles.hideDisabledArrow : ""} ${variantStyleClass || ""} ${shouldBeFullHeight ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, "data-focused": !isDisabled && isFocused ? true : void 0, "data-focus-visible": shouldShowFocusRing ? true : void 0, ref: buttonRef, tabIndex: getTabIndex(), onClick: handleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "aria-label": getAriaLabel(), role: "button", children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !shouldBeFullHeight && !isDisabled && isFocused && shouldShowFocusRing ? true : void 0, "data-focus-visible": !shouldBeFullHeight && !isDisabled && shouldShowFocusRing ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
|
|
153
192
|
};
|
|
154
193
|
export {
|
|
155
194
|
CarouselButton,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|