@alto-avios/alto-ui 3.5.2-alpha.2 → 3.6.0-alpha.1
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/Badge.css +1 -1
- package/dist/assets/Carousel.css +1 -1
- package/dist/assets/CarouselDots.css +1 -1
- package/dist/components/Badge/Badge.js +12 -12
- package/dist/components/Carousel/Carousel.js +82 -101
- package/dist/components/Carousel/Carousel.js.map +1 -1
- package/dist/components/Carousel/CarouselButton/CarouselButton.d.ts +1 -6
- package/dist/components/Carousel/CarouselButton/CarouselButton.js +1 -2
- package/dist/components/Carousel/CarouselButton/CarouselButton.js.map +1 -1
- package/dist/components/Carousel/CarouselControls.d.ts +7 -0
- package/dist/components/Carousel/CarouselControls.js +305 -0
- package/dist/components/Carousel/CarouselControls.js.map +1 -0
- package/dist/components/Carousel/CarouselDots/CarouselDots.d.ts +0 -1
- package/dist/components/Carousel/CarouselDots/CarouselDots.js +14 -21
- package/dist/components/Carousel/CarouselDots/CarouselDots.js.map +1 -1
- package/package.json +2 -2
package/dist/assets/Badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._badge_12fsq_1{align-items:center;border-radius:var(--alto-tag-radius);display:inline-flex;flex-shrink:0;font-family:var(--alto-sem-text-label-font-family);font-style:normal;font-weight:var(--alto-sem-text-label-font-weight);justify-content:center;overflow:hidden;text-align:center;text-overflow:ellipsis}._md_12fsq_15{font-size:var(--alto-sem-text-label-md-font-size);gap:var(--alto-sem-space-2xs);height:26px;letter-spacing:var(--alto-sem-text-label-md-letter-spacing);line-height:var(--alto-sem-text-label-md-line-height);padding:0 var(--alto-sem-space-xs)}._sm_12fsq_24{font-size:var(--alto-sem-text-label-xs-font-size);gap:var(--alto-sem-space-4xs);height:20px;letter-spacing:var(--alto-sem-text-label-xs-letter-spacing);line-height:var(--alto-sem-text-label-xs-line-height);padding:0 var(--alto-sem-space-2xs)}._neutral_12fsq_33{background:var(--alto-sem-color-bg-inverse-subtle-default);color:var(--alto-sem-color-fg-inverse-on-subtle)}._critical_12fsq_38{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-critical-on-subtle)}._warning_12fsq_43{background:var(--alto-sem-color-bg-warning-subtle-default);color:var(--alto-sem-color-fg-warning-on-subtle)}._caution_12fsq_48{background:var(--alto-sem-color-bg-caution-subtle-default);color:var(--alto-sem-color-fg-caution-on-subtle)}._success_12fsq_53{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-success-on-subtle)}._info_12fsq_58{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-information-on-subtle)}._brand_12fsq_63{background:var(--alto-sem-color-bg-accent-subtle-default);color:var(--alto-sem-color-fg-accent-on-subtle)}._sale_12fsq_68{background:var(--alto-sem-color-bg-sale-vibrant-default);color:var(--alto-sem-color-fg-sale-on-vibrant)}._white_12fsq_73{background:var(--alto-sem-color-bg-white-vibrant-default);color:var(--alto-sem-color-fg-white-on-vibrant)}
|
package/dist/assets/Carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._carouselWrapper_1lted_2{box-sizing:border-box;margin:0;max-width:100%;padding:0;position:relative;width:100%}._carouselWrapper_1lted_2,._carouselWrapper_1lted_2._showPartialItems_1lted_14,._carouselWrapper_1lted_2._showPartialItems_1lted_14 ._carousel_1lted_2{overflow-x:visible;overflow-y:hidden}._carouselWrapper_1lted_2._hasScrollPadding_1lted_25,._carouselWrapper_1lted_2._hasScrollPadding_1lted_25 ._carousel_1lted_2{overflow-x:visible!important;overflow-y:hidden!important}._carousel_1lted_2{overflow-x:visible;position:relative;width:100%}._carousel_1lted_2,._scroller_1lted_43{box-sizing:border-box;overflow-y:hidden}._scroller_1lted_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_1lted_43:focus{outline-offset:-2px;outline-width:2px}._scroller_1lted_43::-webkit-scrollbar{display:none}._carouselWrapper_1lted_2 [data-dragging=true] ._scroller_1lted_43{cursor:grabbing;scroll-behavior:auto;touch-action:pan-x}._carouselWrapper_1lted_2 ._scroller_1lted_43:hover{cursor:grab;touch-action:pan-x}._item_1lted_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_1lted_2 ._carousel_1lted_2 ._scroller_1lted_43 ._item_1lted_85>*{display:block;height:auto;width:100%}[data-scroll-padding=true],[data-scroll-padding=true] ._carousel_1lted_2,[data-scroll-padding=true] ._scroller_1lted_43{overflow-x:visible!important;overflow-y:hidden!important}[data-scroll-padding=true] ._item_1lted_85{scroll-snap-align:start}._slideLeft_1lted_123{animation:_slideLeftAnimation_1lted_1 1s cubic-bezier(.25,0,.85,.1)}._slideRight_1lted_127{animation:_slideRightAnimation_1lted_1 1s cubic-bezier(.25,0,.85,.1)}@keyframes _slideLeftAnimation_1lted_1{0%{transform:translate(0)}to{transform:translate(0)}}@keyframes _slideRightAnimation_1lted_1{0%{transform:translate(0)}to{transform:translate(0)}}._controls_1lted_150{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._carouselWrapper_1lted_2 ._controls_1lted_150 ._defaultPrevButton_1lted_161{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWrapper_1lted_2 ._controls_1lted_150 ._defaultNextButton_1lted_169{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWrapper_1lted_2 ._defaultDotsContainer_1lted_178{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._defaultCarouselWrapper_1lted_189{margin:0 auto;max-width:800px;width:360px}._carouselWrapper_1lted_2 ._autoplayControlWrapper_1lted_196 ._defaultAutoplayControl_1lted_196{pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._showOnHover_1lted_205 ._arrowContainer_1lted_205{opacity:0;transition:opacity .3s ease}._carouselWrapper_1lted_2 [data-arrows-visible=true] ._showOnHover_1lted_205 ._arrowContainer_1lted_205{opacity:1}._hidden_1lted_215{opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}._dotsContainerWrapper_1lted_224{pointer-events:auto;z-index:2}._dotsContainer_1lted_224{position:relative}@media (max-width:768px){._carouselWrapper_1lted_2 ._dotsContainerWrapper_1lted_224{cursor:pointer}._carouselWrapper_1lted_2 ._dotsContainerWrapper_1lted_224:active{opacity:.8}}._hiddenTabs_1lted_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_1lted_259{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_1lted_196{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._carouselDefault_1lted_288{height:100%;overflow-x:hidden;width:361px}._carouselDefault_1lted_288 ._prevButton_1lted_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1lted_288 ._nextButton_1lted_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1lted_288 ._dotsContainer_1lted_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1lted_318{position:relative;width:100%}._carouselWithAutoPlay_1lted_318 ._prevButton_1lted_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1lted_318 ._nextButton_1lted_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1lted_318 ._dotsContainer_1lted_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1lted_318 ._autoplayControl_1lted_196{pointer-events:auto!important;position:absolute!important;right:16px!important;top:16px!important;z-index:20!important}._carouselWithScrollPeek_1lted_354{position:relative}._carouselWithScrollPeek_1lted_354,._carouselWithScrollPeek_1lted_354 ._carousel_1lted_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithScrollPeek_1lted_354 ._prevButton_1lted_293{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1lted_354 ._nextButton_1lted_300{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1lted_354 ._dotsContainer_1lted_224{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithFractionalItems_1lted_388{position:relative}._carouselWithFractionalItems_1lted_388,._carouselWithFractionalItems_1lted_388 ._carousel_1lted_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithFractionalItems_1lted_388 ._prevButton_1lted_293{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1lted_388 ._nextButton_1lted_300{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1lted_388 ._dotsContainer_1lted_224{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._paginationDotsDefault_1lted_422{position:relative;width:100%}._paginationDotsDefault_1lted_422 ._prevButton_1lted_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1lted_422 ._nextButton_1lted_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1lted_422 ._dotsContainer_1lted_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._hoverArrowsDefault_1lted_451{height:100%;overflow-x:hidden;width:361px}._hoverArrowsDefault_1lted_451 ._prevButton_1lted_293{left:10px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1lted_451 ._nextButton_1lted_300{opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1lted_451:focus-within ._nextButton_1lted_300,._hoverArrowsDefault_1lted_451:focus-within ._prevButton_1lted_293,._hoverArrowsDefault_1lted_451:hover ._nextButton_1lted_300,._hoverArrowsDefault_1lted_451:hover ._prevButton_1lted_293{opacity:1}._hoverArrowsDefault_1lted_451 ._dotsContainer_1lted_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabsContainer_1aqyc_1{margin:0 auto;min-height:30px;width:auto}._tabsContainer_1aqyc_1,._tabs_1aqyc_1{align-items:center;display:flex;justify-content:center;position:relative}._tabs_1aqyc_1{background-color:var(--alto-sem-color-bg-white-vibrant-default);border-radius:var(--alto-sem-radius-circle);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._tabs_1aqyc_1._transparent_1aqyc_21{background-color:transparent}._dotsScroller_1aqyc_25{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-2xs);justify-content:center;position:relative;white-space:nowrap}._tab_1aqyc_1{background-color:#0000004d;border:none;border-radius:var(--alto-sem-radius-circle);cursor:pointer;display:block;flex-shrink:0;margin:0;padding:0}._tab_1aqyc_1:hover,._tab_1aqyc_1[data-hovered=true]{transform:scale(1.1)}._tab_1aqyc_1._activeTab_1aqyc_52{background-color:var(--alto-sem-color-fg-primary)}._tabs_1aqyc_1[data-focused=true] ._tab_1aqyc_1._activeTab_1aqyc_52{background-color:var(--alto-sem-color-border-accent)}._tabMd_1aqyc_61{height:8px;width:8px}._tabLg_1aqyc_66{height:12px;width:12px}._tabsContainer_1aqyc_1[data-transitioning=true] ._tab_1aqyc_1{pointer-events:none;transition:none!important}._tabsContainer_1aqyc_1[data-transitioning=true] ._dotsScroller_1aqyc_25{transition:none!important}
|
|
@@ -2,18 +2,18 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as cva } from "../../index-Bi3v_EjJ.js";
|
|
3
3
|
import { Icon } from "../Icon/Icon.js";
|
|
4
4
|
import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
|
|
5
|
-
import '../../assets/Badge.css';const badge$1 = "
|
|
6
|
-
const md = "
|
|
7
|
-
const sm = "
|
|
8
|
-
const neutral = "
|
|
9
|
-
const critical = "
|
|
10
|
-
const warning = "
|
|
11
|
-
const caution = "
|
|
12
|
-
const success = "
|
|
13
|
-
const info = "
|
|
14
|
-
const brand = "
|
|
15
|
-
const sale = "
|
|
16
|
-
const white = "
|
|
5
|
+
import '../../assets/Badge.css';const badge$1 = "_badge_12fsq_1";
|
|
6
|
+
const md = "_md_12fsq_15";
|
|
7
|
+
const sm = "_sm_12fsq_24";
|
|
8
|
+
const neutral = "_neutral_12fsq_33";
|
|
9
|
+
const critical = "_critical_12fsq_38";
|
|
10
|
+
const warning = "_warning_12fsq_43";
|
|
11
|
+
const caution = "_caution_12fsq_48";
|
|
12
|
+
const success = "_success_12fsq_53";
|
|
13
|
+
const info = "_info_12fsq_58";
|
|
14
|
+
const brand = "_brand_12fsq_63";
|
|
15
|
+
const sale = "_sale_12fsq_68";
|
|
16
|
+
const white = "_white_12fsq_73";
|
|
17
17
|
const styles = {
|
|
18
18
|
badge: badge$1,
|
|
19
19
|
md,
|
|
@@ -9,36 +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
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
12
|
+
import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_1lted_2";
|
|
13
|
+
const showPartialItems = "_showPartialItems_1lted_14";
|
|
14
|
+
const carousel$1 = "_carousel_1lted_2";
|
|
15
|
+
const hasScrollPadding = "_hasScrollPadding_1lted_25";
|
|
16
|
+
const scroller = "_scroller_1lted_43";
|
|
17
|
+
const item = "_item_1lted_85";
|
|
18
|
+
const slideLeft = "_slideLeft_1lted_123";
|
|
19
|
+
const slideLeftAnimation = "_slideLeftAnimation_1lted_1";
|
|
20
|
+
const slideRight = "_slideRight_1lted_127";
|
|
21
|
+
const slideRightAnimation = "_slideRightAnimation_1lted_1";
|
|
22
|
+
const controls = "_controls_1lted_150";
|
|
23
|
+
const defaultPrevButton = "_defaultPrevButton_1lted_161";
|
|
24
|
+
const defaultNextButton = "_defaultNextButton_1lted_169";
|
|
25
|
+
const defaultDotsContainer = "_defaultDotsContainer_1lted_178";
|
|
26
|
+
const defaultCarouselWrapper = "_defaultCarouselWrapper_1lted_189";
|
|
27
|
+
const autoplayControlWrapper = "_autoplayControlWrapper_1lted_196";
|
|
28
|
+
const defaultAutoplayControl = "_defaultAutoplayControl_1lted_196";
|
|
29
|
+
const showOnHover = "_showOnHover_1lted_205";
|
|
30
|
+
const arrowContainer = "_arrowContainer_1lted_205";
|
|
31
|
+
const hidden = "_hidden_1lted_215";
|
|
32
|
+
const dotsContainerWrapper = "_dotsContainerWrapper_1lted_224";
|
|
33
|
+
const dotsContainer = "_dotsContainer_1lted_224";
|
|
34
|
+
const hiddenTabs = "_hiddenTabs_1lted_246";
|
|
35
|
+
const tapEnabled = "_tapEnabled_1lted_259";
|
|
36
|
+
const infinite = "_infinite_1lted_265";
|
|
37
|
+
const native = "_native_1lted_270";
|
|
38
|
+
const carouselDefault = "_carouselDefault_1lted_288";
|
|
39
|
+
const prevButton = "_prevButton_1lted_293";
|
|
40
|
+
const nextButton = "_nextButton_1lted_300";
|
|
41
|
+
const carouselWithAutoPlay = "_carouselWithAutoPlay_1lted_318";
|
|
42
|
+
const autoplayControl = "_autoplayControl_1lted_196";
|
|
43
|
+
const carouselWithScrollPeek = "_carouselWithScrollPeek_1lted_354";
|
|
44
|
+
const carouselWithFractionalItems = "_carouselWithFractionalItems_1lted_388";
|
|
45
|
+
const paginationDotsDefault = "_paginationDotsDefault_1lted_422";
|
|
46
|
+
const hoverArrowsDefault = "_hoverArrowsDefault_1lted_451";
|
|
42
47
|
const styles = {
|
|
43
48
|
carouselWrapper,
|
|
44
49
|
showPartialItems,
|
|
@@ -51,6 +56,12 @@ const styles = {
|
|
|
51
56
|
slideRight,
|
|
52
57
|
slideRightAnimation,
|
|
53
58
|
controls,
|
|
59
|
+
defaultPrevButton,
|
|
60
|
+
defaultNextButton,
|
|
61
|
+
defaultDotsContainer,
|
|
62
|
+
defaultCarouselWrapper,
|
|
63
|
+
autoplayControlWrapper,
|
|
64
|
+
defaultAutoplayControl,
|
|
54
65
|
showOnHover,
|
|
55
66
|
arrowContainer,
|
|
56
67
|
hidden,
|
|
@@ -60,7 +71,6 @@ const styles = {
|
|
|
60
71
|
tapEnabled,
|
|
61
72
|
infinite,
|
|
62
73
|
native,
|
|
63
|
-
autoplayControlWrapper,
|
|
64
74
|
carouselDefault,
|
|
65
75
|
prevButton,
|
|
66
76
|
nextButton,
|
|
@@ -141,9 +151,12 @@ const Carousel = ({
|
|
|
141
151
|
const [isDragging, setIsDragging] = useState(false);
|
|
142
152
|
const [isHovered, setIsHovered] = useState(false);
|
|
143
153
|
const [isFocused, setIsFocused] = useState(false);
|
|
144
|
-
const [isTransitioning
|
|
154
|
+
const [isTransitioning] = useState(false);
|
|
145
155
|
const [dragStartPosition, setDragStartPosition] = useState(null);
|
|
146
156
|
const dragThreshold = 5;
|
|
157
|
+
const getClassNameWithDefault = (customClassName, defaultClassName) => {
|
|
158
|
+
return customClassName || defaultClassName;
|
|
159
|
+
};
|
|
147
160
|
const getCarouselWrapperClasses = () => {
|
|
148
161
|
const classes = [styles.carouselWrapper];
|
|
149
162
|
if (!Number.isInteger(safeItemsPerPage)) {
|
|
@@ -152,8 +165,10 @@ const Carousel = ({
|
|
|
152
165
|
if (resolvedScrollPadding) {
|
|
153
166
|
classes.push(styles.hasScrollPadding);
|
|
154
167
|
}
|
|
155
|
-
if (carouselWrapperClassName) {
|
|
168
|
+
if (carouselWrapperClassName && carouselWrapperClassName.trim()) {
|
|
156
169
|
classes.push(carouselWrapperClassName);
|
|
170
|
+
} else {
|
|
171
|
+
classes.push(styles.defaultCarouselWrapper);
|
|
157
172
|
}
|
|
158
173
|
return classes.join(" ");
|
|
159
174
|
};
|
|
@@ -180,22 +195,15 @@ const Carousel = ({
|
|
|
180
195
|
return activeIndices;
|
|
181
196
|
};
|
|
182
197
|
const navigateToSlide = (index) => {
|
|
183
|
-
if (index === currentPage ||
|
|
184
|
-
|
|
185
|
-
if (carouselRef.current) {
|
|
186
|
-
nativeTab = carouselRef.current.querySelector(`[data-index="${index}"]`);
|
|
198
|
+
if (index === currentPage || index < 0 || index >= totalPages) {
|
|
199
|
+
return;
|
|
187
200
|
}
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
201
|
+
if (carouselRef.current) {
|
|
202
|
+
const targetTab = carouselRef.current.querySelector(`[data-slide-tab="true"][data-index="${index}"]`);
|
|
203
|
+
if (targetTab) {
|
|
204
|
+
targetTab.click();
|
|
205
|
+
}
|
|
192
206
|
}
|
|
193
|
-
setTimeout(() => {
|
|
194
|
-
setCurrentPage(index);
|
|
195
|
-
setTimeout(() => {
|
|
196
|
-
setIsTransitioning(false);
|
|
197
|
-
}, 500);
|
|
198
|
-
}, 50);
|
|
199
207
|
};
|
|
200
208
|
useEffect(() => {
|
|
201
209
|
if (!carouselRef.current || !mouseDragging) return;
|
|
@@ -261,72 +269,45 @@ const Carousel = ({
|
|
|
261
269
|
}, [currentPage, prevPage]);
|
|
262
270
|
useEffect(() => {
|
|
263
271
|
if (!carouselRef.current) return;
|
|
264
|
-
const
|
|
272
|
+
const checkCurrentPage = () => {
|
|
265
273
|
if (!carouselRef.current) return;
|
|
266
|
-
const selectedTab = carouselRef.current.querySelector('[aria-selected="true"]');
|
|
267
|
-
if (selectedTab
|
|
268
|
-
const
|
|
269
|
-
if (
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
}
|
|
273
|
-
} else {
|
|
274
|
-
const visibleSlide = carouselRef.current.querySelector('[role="tabpanel"]:not([aria-hidden="true"])');
|
|
275
|
-
if (visibleSlide && visibleSlide.hasAttribute("data-index")) {
|
|
276
|
-
const index = parseInt(visibleSlide.getAttribute("data-index") || "0", 10);
|
|
277
|
-
if (!isNaN(index) && index !== currentPage) {
|
|
274
|
+
const selectedTab = carouselRef.current.querySelector('[data-slide-tab="true"][aria-selected="true"]');
|
|
275
|
+
if (selectedTab) {
|
|
276
|
+
const indexStr = selectedTab.getAttribute("data-index");
|
|
277
|
+
if (indexStr) {
|
|
278
|
+
const newIndex = parseInt(indexStr, 10);
|
|
279
|
+
if (!isNaN(newIndex) && newIndex !== currentPage && newIndex >= 0 && newIndex < totalPages) {
|
|
278
280
|
setPrevPage(currentPage);
|
|
279
|
-
setCurrentPage(
|
|
281
|
+
setCurrentPage(newIndex);
|
|
280
282
|
}
|
|
281
283
|
}
|
|
282
284
|
}
|
|
283
285
|
};
|
|
284
|
-
const prevButton2 = carouselRef.current.querySelector('[dir="prev"]');
|
|
285
|
-
const nextButton2 = carouselRef.current.querySelector('[dir="next"]');
|
|
286
|
-
const handleButtonClick = () => {
|
|
287
|
-
setTimeout(updateCurrentPage, 50);
|
|
288
|
-
};
|
|
289
|
-
prevButton2 == null ? void 0 : prevButton2.addEventListener("click", handleButtonClick);
|
|
290
|
-
nextButton2 == null ? void 0 : nextButton2.addEventListener("click", handleButtonClick);
|
|
291
286
|
const observer = new MutationObserver((mutations) => {
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
287
|
+
let shouldCheck = false;
|
|
288
|
+
mutations.forEach((mutation) => {
|
|
289
|
+
if (mutation.type === "attributes" && mutation.attributeName === "aria-selected") {
|
|
290
|
+
shouldCheck = true;
|
|
295
291
|
}
|
|
292
|
+
});
|
|
293
|
+
if (shouldCheck) {
|
|
294
|
+
setTimeout(checkCurrentPage, 10);
|
|
296
295
|
}
|
|
297
296
|
});
|
|
298
|
-
const
|
|
299
|
-
|
|
297
|
+
const hiddenTabs2 = carouselRef.current.querySelectorAll('[data-slide-tab="true"]');
|
|
298
|
+
hiddenTabs2.forEach((tab) => {
|
|
300
299
|
observer.observe(tab, {
|
|
301
|
-
attributes: true
|
|
300
|
+
attributes: true,
|
|
301
|
+
attributeFilter: ["aria-selected"]
|
|
302
302
|
});
|
|
303
303
|
});
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
observer.observe(scroller2, {
|
|
307
|
-
attributes: true
|
|
308
|
-
});
|
|
309
|
-
}
|
|
310
|
-
const handleSlideTransition = () => {
|
|
311
|
-
updateCurrentPage();
|
|
312
|
-
setIsTransitioning(false);
|
|
313
|
-
};
|
|
314
|
-
const scrollerElement = carouselRef.current.querySelector(`.${styles.scroller}`);
|
|
315
|
-
if (scrollerElement) {
|
|
316
|
-
scrollerElement.addEventListener("transitionend", handleSlideTransition);
|
|
317
|
-
}
|
|
318
|
-
updateCurrentPage();
|
|
319
|
-
const checkInterval = setInterval(updateCurrentPage, 300);
|
|
304
|
+
checkCurrentPage();
|
|
305
|
+
const interval = setInterval(checkCurrentPage, 500);
|
|
320
306
|
return () => {
|
|
321
307
|
observer.disconnect();
|
|
322
|
-
|
|
323
|
-
nextButton2 == null ? void 0 : nextButton2.removeEventListener("click", handleButtonClick);
|
|
324
|
-
if (scrollerElement) {
|
|
325
|
-
scrollerElement.removeEventListener("transitionend", handleSlideTransition);
|
|
326
|
-
}
|
|
327
|
-
clearInterval(checkInterval);
|
|
308
|
+
clearInterval(interval);
|
|
328
309
|
};
|
|
329
|
-
}, [currentPage]);
|
|
310
|
+
}, [currentPage, totalPages]);
|
|
330
311
|
const interactionHandlers = showArrowsOnHover ? {
|
|
331
312
|
onMouseEnter: () => setIsHovered(true),
|
|
332
313
|
onMouseLeave: () => setIsHovered(false),
|
|
@@ -406,12 +387,12 @@ const Carousel = ({
|
|
|
406
387
|
return /* @__PURE__ */ jsx(CarouselItem, { className: itemClasses, "data-is-active": isActiveItem ? "true" : void 0, "data-item-index": index, "aria-label": `Slide ${index + 1} of ${totalItems}`, children: child }, index);
|
|
407
388
|
}) }),
|
|
408
389
|
/* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ""}`, children: [
|
|
409
|
-
/* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${prevArrowClassName} ${!arrowsVisible ? styles.hidden : ""}` }),
|
|
410
|
-
/* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${nextArrowClassName} ${!arrowsVisible ? styles.hidden : ""}` })
|
|
390
|
+
/* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${getClassNameWithDefault(prevArrowClassName, styles.defaultPrevButton)} ${!arrowsVisible ? styles.hidden : ""}` }),
|
|
391
|
+
/* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${getClassNameWithDefault(nextArrowClassName, styles.defaultNextButton)} ${!arrowsVisible ? styles.hidden : ""}` })
|
|
411
392
|
] }),
|
|
412
393
|
/* @__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) }) }),
|
|
413
|
-
autoPlay && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${autoplayControlClassName
|
|
414
|
-
shouldShowDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => navigateToSlide(index), focusStyle, dotsSize, variant: dotsVariant, className:
|
|
394
|
+
autoPlay && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${getClassNameWithDefault(autoplayControlClassName, styles.defaultAutoplayControl)}`, children: /* @__PURE__ */ jsx(AutoplayControl, { variant: autoPlayStyleVariant, size: autoPlayControlSize, className: "" }) }),
|
|
395
|
+
shouldShowDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => navigateToSlide(index), focusStyle, dotsSize, variant: dotsVariant, className: getClassNameWithDefault(dotsContainerClassName, styles.defaultDotsContainer), dotsWrapperClassName, dotClassName, activeDotClassName, isTransitioning })
|
|
415
396
|
] }) });
|
|
416
397
|
};
|
|
417
398
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -31,11 +31,6 @@ export interface CarouselButtonProps {
|
|
|
31
31
|
* Additional CSS class name for the button content
|
|
32
32
|
*/
|
|
33
33
|
buttonClassName?: string;
|
|
34
|
-
/**
|
|
35
|
-
* Whether the button should be full height of the container
|
|
36
|
-
* @default false
|
|
37
|
-
*/
|
|
38
|
-
fullHeight?: boolean;
|
|
39
34
|
/**
|
|
40
35
|
* Custom click handler for implementing custom navigation behavior
|
|
41
36
|
*/
|
|
@@ -45,5 +40,5 @@ export interface CarouselButtonProps {
|
|
|
45
40
|
*/
|
|
46
41
|
iconType?: 'chevron';
|
|
47
42
|
}
|
|
48
|
-
export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideDisabledArrow, iconType, className, buttonClassName,
|
|
43
|
+
export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideDisabledArrow, iconType, className, buttonClassName, onClick, }: CarouselButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
49
44
|
export default CarouselButton;
|
|
@@ -38,7 +38,6 @@ const CarouselButton = ({
|
|
|
38
38
|
iconType = "chevron",
|
|
39
39
|
className = "",
|
|
40
40
|
buttonClassName = "",
|
|
41
|
-
fullHeight: fullHeight2 = false,
|
|
42
41
|
onClick
|
|
43
42
|
}) => {
|
|
44
43
|
const {
|
|
@@ -52,7 +51,7 @@ const CarouselButton = ({
|
|
|
52
51
|
const [isDisabled, setIsDisabled] = useState(false);
|
|
53
52
|
const [shouldShowFocusRing, setShouldShowFocusRing] = useState(false);
|
|
54
53
|
const variantStyleClass = variant ? styles[variant] : "";
|
|
55
|
-
const shouldBeFullHeight =
|
|
54
|
+
const shouldBeFullHeight = variant === "gradient";
|
|
56
55
|
const buttonRef = useRef(null);
|
|
57
56
|
useEffect(() => {
|
|
58
57
|
const element = buttonRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ArgTypes } from '@storybook/react';
|
|
2
|
+
import { CarouselProps } from './Carousel';
|
|
3
|
+
/**
|
|
4
|
+
* Shared argTypes configuration for all Carousel stories
|
|
5
|
+
* This ensures consistent controls across all story files
|
|
6
|
+
*/
|
|
7
|
+
export declare const carouselArgTypes: ArgTypes<CarouselProps>;
|
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
const carouselArgTypes = {
|
|
2
|
+
// Accessibility Controls
|
|
3
|
+
"aria-label": {
|
|
4
|
+
control: "text",
|
|
5
|
+
description: "Accessible name for the carousel - describes the purpose or content for screen readers",
|
|
6
|
+
table: {
|
|
7
|
+
category: "Accessibility",
|
|
8
|
+
type: { summary: "string" }
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
"aria-describedby": {
|
|
12
|
+
control: "text",
|
|
13
|
+
description: "ID of element that describes the carousel",
|
|
14
|
+
table: {
|
|
15
|
+
category: "Accessibility",
|
|
16
|
+
type: { summary: "string" }
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
// Core Configuration
|
|
20
|
+
looping: {
|
|
21
|
+
control: { type: "radio" },
|
|
22
|
+
options: ["off", "infinite", "backToStart"],
|
|
23
|
+
description: 'Looping behavior: "infinite" for continuous cycling, "backToStart" for jumping back to start, "off" to disable looping',
|
|
24
|
+
defaultValue: "off",
|
|
25
|
+
table: {
|
|
26
|
+
category: "Core Configuration",
|
|
27
|
+
type: { summary: '"infinite" | "backToStart" | "off"' },
|
|
28
|
+
defaultValue: { summary: '"off"' }
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
itemsPerPage: {
|
|
32
|
+
control: { type: "number", min: 1, max: 10, step: 0.25 },
|
|
33
|
+
description: "Number of items to display per page (minimum: 1). Decimal values (e.g., 2.25) can be used to show partial items for peek effects",
|
|
34
|
+
defaultValue: 1,
|
|
35
|
+
table: {
|
|
36
|
+
category: "Core Configuration",
|
|
37
|
+
type: { summary: "number | ResponsiveValue<number>" },
|
|
38
|
+
defaultValue: { summary: "1" }
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
spaceBetweenItems: {
|
|
42
|
+
control: { type: "number", min: 0, max: 100 },
|
|
43
|
+
description: "Space between carousel items in pixels. Works with both scroll padding and fractional items",
|
|
44
|
+
defaultValue: 0,
|
|
45
|
+
table: {
|
|
46
|
+
category: "Core Configuration",
|
|
47
|
+
type: { summary: "number | ResponsiveValue<number>" },
|
|
48
|
+
defaultValue: { summary: "0" }
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
scrollPadding: {
|
|
52
|
+
control: "text",
|
|
53
|
+
description: 'Amount of padding to add to create a "peek" effect. Accepts any valid CSS dimension (px, rem, em, %) - e.g., "15%", "20px", "2rem"',
|
|
54
|
+
table: {
|
|
55
|
+
category: "Core Configuration",
|
|
56
|
+
type: { summary: "string | ResponsiveValue<string>" },
|
|
57
|
+
defaultValue: { summary: "undefined" }
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
mouseDragging: {
|
|
61
|
+
control: "boolean",
|
|
62
|
+
description: "Whether to enable mouse dragging for the carousel",
|
|
63
|
+
defaultValue: true,
|
|
64
|
+
table: {
|
|
65
|
+
category: "Core Configuration",
|
|
66
|
+
type: { summary: "boolean" },
|
|
67
|
+
defaultValue: { summary: "true" }
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
// Button and Controls
|
|
71
|
+
iconType: {
|
|
72
|
+
table: {
|
|
73
|
+
disable: true
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
arrowStyleVariant: {
|
|
77
|
+
control: { type: "select" },
|
|
78
|
+
options: ["neutral", "white", "shapeFlat", "shapeElevated", "gradient"],
|
|
79
|
+
description: "Style variant for navigation arrow buttons",
|
|
80
|
+
defaultValue: "neutral",
|
|
81
|
+
table: {
|
|
82
|
+
category: "Button and Controls",
|
|
83
|
+
type: {
|
|
84
|
+
summary: '"neutral" | "white" | "shapeFlat" | "shapeElevated" | "gradient"'
|
|
85
|
+
},
|
|
86
|
+
defaultValue: { summary: '"neutral"' }
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
arrowSize: {
|
|
90
|
+
control: { type: "select" },
|
|
91
|
+
options: ["sm", "md", "lg"],
|
|
92
|
+
description: "Size of navigation buttons",
|
|
93
|
+
defaultValue: "md",
|
|
94
|
+
table: {
|
|
95
|
+
category: "Button and Controls",
|
|
96
|
+
type: {
|
|
97
|
+
summary: '"sm" | "md" | "lg" | ResponsiveValue<"sm" | "md" | "lg">'
|
|
98
|
+
},
|
|
99
|
+
defaultValue: { summary: '"md"' }
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
hideDisabledArrow: {
|
|
103
|
+
control: "boolean",
|
|
104
|
+
description: "Whether to hide navigation buttons when they are disabled (e.g., at first/last slide when looping is off)",
|
|
105
|
+
defaultValue: false,
|
|
106
|
+
table: {
|
|
107
|
+
category: "Button and Controls",
|
|
108
|
+
type: { summary: "boolean" },
|
|
109
|
+
defaultValue: { summary: "false" }
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
showArrowsOnHover: {
|
|
113
|
+
control: "boolean",
|
|
114
|
+
description: "Whether to show arrows only when hovering over the carousel or when it has focus",
|
|
115
|
+
defaultValue: false,
|
|
116
|
+
table: {
|
|
117
|
+
category: "Button and Controls",
|
|
118
|
+
type: { summary: "boolean | ResponsiveValue<boolean>" },
|
|
119
|
+
defaultValue: { summary: "false" }
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
focusStyle: {
|
|
123
|
+
control: { type: "radio" },
|
|
124
|
+
options: ["default", "white"],
|
|
125
|
+
description: 'Focus style for interactive elements - use "white" for dark backgrounds',
|
|
126
|
+
defaultValue: "default",
|
|
127
|
+
table: {
|
|
128
|
+
category: "Button and Controls",
|
|
129
|
+
type: { summary: '"default" | "white"' },
|
|
130
|
+
defaultValue: { summary: '"default"' }
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
// Dots/Pagination
|
|
134
|
+
hideDots: {
|
|
135
|
+
control: "boolean",
|
|
136
|
+
description: "Whether to hide pagination dots. Typically set to true when using scroll peek since dots become redundant",
|
|
137
|
+
defaultValue: false,
|
|
138
|
+
table: {
|
|
139
|
+
category: "Dots/Pagination",
|
|
140
|
+
type: { summary: "boolean" },
|
|
141
|
+
defaultValue: { summary: "false" }
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
dotsSize: {
|
|
145
|
+
control: { type: "radio" },
|
|
146
|
+
options: ["md", "lg"],
|
|
147
|
+
description: "Size of pagination dots when visible",
|
|
148
|
+
defaultValue: "md",
|
|
149
|
+
table: {
|
|
150
|
+
category: "Dots/Pagination",
|
|
151
|
+
type: { summary: '"md" | "lg"' },
|
|
152
|
+
defaultValue: { summary: '"md"' }
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
dotsVariant: {
|
|
156
|
+
control: { type: "radio" },
|
|
157
|
+
options: ["standard", "transparent"],
|
|
158
|
+
description: "Visual style of pagination dots",
|
|
159
|
+
defaultValue: "standard",
|
|
160
|
+
table: {
|
|
161
|
+
category: "Dots/Pagination",
|
|
162
|
+
type: { summary: '"standard" | "transparent"' },
|
|
163
|
+
defaultValue: { summary: '"standard"' }
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
// Autoplay
|
|
167
|
+
autoPlay: {
|
|
168
|
+
control: "boolean",
|
|
169
|
+
description: "Whether the autoplay is enabled",
|
|
170
|
+
defaultValue: false,
|
|
171
|
+
table: {
|
|
172
|
+
category: "Autoplay",
|
|
173
|
+
type: { summary: "boolean" },
|
|
174
|
+
defaultValue: { summary: "false" }
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
autoPlayInterval: {
|
|
178
|
+
control: { type: "number", min: 1e3, max: 1e4, step: 500 },
|
|
179
|
+
description: "Interval in milliseconds between slides during autoplay",
|
|
180
|
+
defaultValue: 2e3,
|
|
181
|
+
table: {
|
|
182
|
+
category: "Autoplay",
|
|
183
|
+
type: { summary: "number" },
|
|
184
|
+
defaultValue: { summary: "2000" }
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
autoPlayStyleVariant: {
|
|
188
|
+
control: { type: "select" },
|
|
189
|
+
options: ["neutralVibrant", "neutralSubtle", "whiteVibrant", "whiteSubtle"],
|
|
190
|
+
description: "Style variant for autoplay control button",
|
|
191
|
+
defaultValue: "neutralVibrant",
|
|
192
|
+
table: {
|
|
193
|
+
category: "Autoplay",
|
|
194
|
+
type: {
|
|
195
|
+
summary: '"neutralVibrant" | "neutralSubtle" | "whiteVibrant" | "whiteSubtle"'
|
|
196
|
+
},
|
|
197
|
+
defaultValue: { summary: '"neutralVibrant"' }
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
autoPlayControlSize: {
|
|
201
|
+
control: { type: "radio" },
|
|
202
|
+
options: ["sm", "md"],
|
|
203
|
+
description: "Size of autoplay control button",
|
|
204
|
+
defaultValue: "md",
|
|
205
|
+
table: {
|
|
206
|
+
category: "Autoplay",
|
|
207
|
+
type: { summary: '"sm" | "md"' },
|
|
208
|
+
defaultValue: { summary: '"md"' }
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
// Custom Styling & Positioning
|
|
212
|
+
carouselWrapperClassName: {
|
|
213
|
+
control: "text",
|
|
214
|
+
description: 'Custom class name for the outermost wrapper to allow custom styles - use your preferred naming convention (helper: "defaultCarouselWrapper")',
|
|
215
|
+
table: {
|
|
216
|
+
category: "Custom Styling & Positioning",
|
|
217
|
+
type: { summary: "string" }
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
prevArrowClassName: {
|
|
221
|
+
control: "text",
|
|
222
|
+
description: 'Custom class name for the previous button to allow custom styles - use your preferred naming convention (helper: "defaultPrevButton")',
|
|
223
|
+
table: {
|
|
224
|
+
category: "Custom Styling & Positioning",
|
|
225
|
+
type: { summary: "string" }
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
nextArrowClassName: {
|
|
229
|
+
control: "text",
|
|
230
|
+
description: 'Custom class name for the next button to allow custom styles - use your preferred naming convention (helper: "defaultNextButton")',
|
|
231
|
+
table: {
|
|
232
|
+
category: "Custom Styling & Positioning",
|
|
233
|
+
type: { summary: "string" }
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
autoplayControlClassName: {
|
|
237
|
+
control: "text",
|
|
238
|
+
description: 'Custom class name for the autoplay control to allow custom styles - use your preferred naming convention (helper: "autoplayControl")',
|
|
239
|
+
table: {
|
|
240
|
+
category: "Custom Styling & Positioning",
|
|
241
|
+
type: { summary: "string" }
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
dotsContainerClassName: {
|
|
245
|
+
control: "text",
|
|
246
|
+
description: 'Custom class name for the dots container to allow custom styles - use your preferred naming convention (helper: "defaultDotsContainer")',
|
|
247
|
+
table: {
|
|
248
|
+
category: "Custom Styling & Positioning",
|
|
249
|
+
type: { summary: "string" }
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
dotsWrapperClassName: {
|
|
253
|
+
control: "text",
|
|
254
|
+
description: "Custom class name for the dots wrapper to allow custom styles - use your preferred naming convention",
|
|
255
|
+
table: {
|
|
256
|
+
category: "Custom Styling & Positioning",
|
|
257
|
+
type: { summary: "string" }
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
dotClassName: {
|
|
261
|
+
control: "text",
|
|
262
|
+
description: "Custom class name for individual dots to allow custom styles - use your preferred naming convention",
|
|
263
|
+
table: {
|
|
264
|
+
category: "Custom Styling & Positioning",
|
|
265
|
+
type: { summary: "string" }
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
activeDotClassName: {
|
|
269
|
+
control: "text",
|
|
270
|
+
description: "Custom class name for the active dot to allow custom styles - use your preferred naming convention",
|
|
271
|
+
table: {
|
|
272
|
+
category: "Custom Styling & Positioning",
|
|
273
|
+
type: { summary: "string" }
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
itemWrapperClassName: {
|
|
277
|
+
control: "text",
|
|
278
|
+
description: "Custom class name for individual carousel item wrappers to allow custom styles - use your preferred naming convention",
|
|
279
|
+
table: {
|
|
280
|
+
category: "Custom Styling & Positioning",
|
|
281
|
+
type: { summary: "string" }
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
activeItemClassName: {
|
|
285
|
+
control: "text",
|
|
286
|
+
description: "Custom class name for the currently active/visible carousel item to allow custom styles - use your preferred naming convention",
|
|
287
|
+
table: {
|
|
288
|
+
category: "Custom Styling & Positioning",
|
|
289
|
+
type: { summary: "string" }
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
// Content (disable control)
|
|
293
|
+
children: {
|
|
294
|
+
control: { type: "object" },
|
|
295
|
+
description: "Content to be displayed in the carousel",
|
|
296
|
+
table: {
|
|
297
|
+
category: "Content",
|
|
298
|
+
disable: true
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
};
|
|
302
|
+
export {
|
|
303
|
+
carouselArgTypes
|
|
304
|
+
};
|
|
305
|
+
//# sourceMappingURL=CarouselControls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselControls.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,14 +3,14 @@ import { useRef } from "react";
|
|
|
3
3
|
import { useFocusRing } from "@react-aria/focus";
|
|
4
4
|
import { useHover } from "@react-aria/interactions";
|
|
5
5
|
import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
|
|
6
|
-
import '../../../assets/CarouselDots.css';const tabsContainer = "
|
|
7
|
-
const tabs = "
|
|
8
|
-
const transparent = "
|
|
9
|
-
const dotsScroller = "
|
|
10
|
-
const tab = "
|
|
11
|
-
const activeTab = "
|
|
12
|
-
const tabMd = "
|
|
13
|
-
const tabLg = "
|
|
6
|
+
import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_1aqyc_1";
|
|
7
|
+
const tabs = "_tabs_1aqyc_1";
|
|
8
|
+
const transparent = "_transparent_1aqyc_21";
|
|
9
|
+
const dotsScroller = "_dotsScroller_1aqyc_25";
|
|
10
|
+
const tab = "_tab_1aqyc_1";
|
|
11
|
+
const activeTab = "_activeTab_1aqyc_52";
|
|
12
|
+
const tabMd = "_tabMd_1aqyc_61";
|
|
13
|
+
const tabLg = "_tabLg_1aqyc_66";
|
|
14
14
|
const styles = {
|
|
15
15
|
tabsContainer,
|
|
16
16
|
tabs,
|
|
@@ -26,8 +26,6 @@ const CarouselDots = ({
|
|
|
26
26
|
currentPage,
|
|
27
27
|
onDotClick,
|
|
28
28
|
dotsSize = "md",
|
|
29
|
-
tabSize,
|
|
30
|
-
// For backward compatibility
|
|
31
29
|
variant = "standard",
|
|
32
30
|
focusStyle = "default",
|
|
33
31
|
className = "",
|
|
@@ -38,7 +36,6 @@ const CarouselDots = ({
|
|
|
38
36
|
}) => {
|
|
39
37
|
const tabsRef = useRef(null);
|
|
40
38
|
const wrapperRef = useRef(null);
|
|
41
|
-
const effectiveDotsSize = dotsSize || tabSize || "md";
|
|
42
39
|
const {
|
|
43
40
|
isFocusVisible,
|
|
44
41
|
focusProps
|
|
@@ -92,12 +89,9 @@ const CarouselDots = ({
|
|
|
92
89
|
return classes.join(" ");
|
|
93
90
|
};
|
|
94
91
|
const handleDotClick = (index) => {
|
|
95
|
-
|
|
96
|
-
onDotClick(index);
|
|
97
|
-
}
|
|
92
|
+
onDotClick(index);
|
|
98
93
|
};
|
|
99
94
|
const handleDotKeyDown = (e, index) => {
|
|
100
|
-
if (isTransitioning) return;
|
|
101
95
|
if (e.key === " " || e.key === "Enter") {
|
|
102
96
|
e.preventDefault();
|
|
103
97
|
e.stopPropagation();
|
|
@@ -112,22 +106,22 @@ const CarouselDots = ({
|
|
|
112
106
|
const getContainerAriaLabel = () => {
|
|
113
107
|
return `Slide pagination, ${totalItems} slides, currently on slide ${currentPage + 1}`;
|
|
114
108
|
};
|
|
115
|
-
return /* @__PURE__ */ jsx("div", { className: getContainerClasses(), ref: wrapperRef, "data-dot-size":
|
|
109
|
+
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({
|
|
116
110
|
length: totalItems
|
|
117
111
|
}, (_, index) => {
|
|
118
112
|
const isActive = index === currentPage;
|
|
119
113
|
const baseStyle = {
|
|
120
|
-
width:
|
|
121
|
-
height:
|
|
114
|
+
width: dotsSize === "lg" ? "12px" : "8px",
|
|
115
|
+
height: dotsSize === "lg" ? "12px" : "8px",
|
|
122
116
|
borderRadius: "50%",
|
|
123
117
|
backgroundColor: isActive ? "var(--alto-sem-color-fg-primary)" : "rgba(0, 0, 0, 0.3)",
|
|
124
118
|
border: "none",
|
|
125
119
|
padding: 0,
|
|
126
|
-
cursor:
|
|
120
|
+
cursor: "pointer",
|
|
127
121
|
display: "block",
|
|
128
122
|
flexShrink: 0,
|
|
129
123
|
margin: 0,
|
|
130
|
-
transition: "
|
|
124
|
+
transition: "background-color 0.2s ease"
|
|
131
125
|
};
|
|
132
126
|
return /* @__PURE__ */ jsx(
|
|
133
127
|
"button",
|
|
@@ -143,7 +137,6 @@ const CarouselDots = ({
|
|
|
143
137
|
role: "tab",
|
|
144
138
|
"data-tab-index": index,
|
|
145
139
|
tabIndex: -1,
|
|
146
|
-
disabled: isTransitioning,
|
|
147
140
|
style: baseStyle,
|
|
148
141
|
"aria-hidden": "true"
|
|
149
142
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alto-avios/alto-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0-alpha.1",
|
|
4
4
|
"description": "A react component library for Alto Design System",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Ian Caldwell IAGL",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
"wait-on": "^8.0.1"
|
|
110
110
|
},
|
|
111
111
|
"peerDependencies": {
|
|
112
|
-
"@alto-avios/alto-tokens": "^3.2.
|
|
112
|
+
"@alto-avios/alto-tokens": "^3.2.1",
|
|
113
113
|
"react": "^18.0.0"
|
|
114
114
|
},
|
|
115
115
|
"main": "dist/index.js",
|