@alto-avios/alto-ui 3.6.0-alpha.1 → 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 +37 -36
- package/dist/components/Carousel/Carousel.js.map +1 -1
- package/dist/components/Carousel/CarouselControls.js +2 -2
- package/dist/components/Carousel/CarouselDots/CarouselDots.js +5 -2
- 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 autoplayControlWrapper = "
|
|
28
|
-
const defaultAutoplayControl = "
|
|
29
|
-
const showOnHover = "
|
|
30
|
-
const arrowContainer = "
|
|
31
|
-
const hidden = "
|
|
32
|
-
const dotsContainerWrapper = "
|
|
33
|
-
const dotsContainer = "
|
|
34
|
-
const hiddenTabs = "
|
|
35
|
-
const tapEnabled = "
|
|
36
|
-
const infinite = "
|
|
37
|
-
const native = "
|
|
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,
|
|
@@ -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);
|
|
@@ -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,11 @@ const CarouselDots = ({
|
|
|
89
89
|
return classes.join(" ");
|
|
90
90
|
};
|
|
91
91
|
const handleDotClick = (index) => {
|
|
92
|
+
if (isTransitioning) return;
|
|
92
93
|
onDotClick(index);
|
|
93
94
|
};
|
|
94
95
|
const handleDotKeyDown = (e, index) => {
|
|
96
|
+
if (isTransitioning) return;
|
|
95
97
|
if (e.key === " " || e.key === "Enter") {
|
|
96
98
|
e.preventDefault();
|
|
97
99
|
e.stopPropagation();
|
|
@@ -117,7 +119,7 @@ const CarouselDots = ({
|
|
|
117
119
|
backgroundColor: isActive ? "var(--alto-sem-color-fg-primary)" : "rgba(0, 0, 0, 0.3)",
|
|
118
120
|
border: "none",
|
|
119
121
|
padding: 0,
|
|
120
|
-
cursor: "pointer",
|
|
122
|
+
cursor: isTransitioning ? "default" : "pointer",
|
|
121
123
|
display: "block",
|
|
122
124
|
flexShrink: 0,
|
|
123
125
|
margin: 0,
|
|
@@ -138,7 +140,8 @@ const CarouselDots = ({
|
|
|
138
140
|
"data-tab-index": index,
|
|
139
141
|
tabIndex: -1,
|
|
140
142
|
style: baseStyle,
|
|
141
|
-
"aria-hidden": "true"
|
|
143
|
+
"aria-hidden": "true",
|
|
144
|
+
disabled: isTransitioning
|
|
142
145
|
},
|
|
143
146
|
index
|
|
144
147
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|