@coinbase/cds-web 9.22.1 → 9.23.0
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/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.23.0 (8/27/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Add uncontrolled initialPage prop to Carousel. [[#864](https://github.com/coinbase/cds/pull/864)]
|
|
16
|
+
|
|
11
17
|
## 9.22.1 (8/25/2026 PST)
|
|
12
18
|
|
|
13
19
|
#### 🐞 Fixes
|
|
@@ -153,6 +153,12 @@ export type CarouselBaseProps = SharedProps &
|
|
|
153
153
|
* @default 'page'
|
|
154
154
|
*/
|
|
155
155
|
snapMode?: 'item' | 'page';
|
|
156
|
+
/**
|
|
157
|
+
* Zero-based page index to show on first layout, with no animation. Uncontrolled —
|
|
158
|
+
* updating it later does not move the carousel. Out-of-range values are clamped.
|
|
159
|
+
* @default 0
|
|
160
|
+
*/
|
|
161
|
+
initialPage?: number;
|
|
156
162
|
/**
|
|
157
163
|
* Hides the navigation arrows (previous/next buttons and autoplay control).
|
|
158
164
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"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"}
|
package/esm/carousel/Carousel.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const _excluded = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "className", "classNames", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "paginationAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "pageChangeAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
|
|
1
|
+
const _excluded = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "initialPage", "NavigationComponent", "PaginationComponent", "className", "classNames", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "paginationAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "pageChangeAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
|
|
2
2
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -13,6 +13,7 @@ import { RefMapContext } from '@coinbase/cds-common/system/RefMapContext';
|
|
|
13
13
|
import { animate, domMax, LazyMotion, m, useAnimation, useDragControls, useMotionValue, useTransform } from 'framer-motion';
|
|
14
14
|
import { cx } from '../cx';
|
|
15
15
|
import { useComponentConfig } from '../hooks/useComponentConfig';
|
|
16
|
+
import { useIsoEffect } from '../hooks/useIsoEffect';
|
|
16
17
|
import { HStack } from '../layout/HStack';
|
|
17
18
|
import { VStack } from '../layout/VStack';
|
|
18
19
|
import { Text } from '../typography/Text';
|
|
@@ -347,6 +348,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
|
|
|
347
348
|
paginationVariant,
|
|
348
349
|
drag = 'snap',
|
|
349
350
|
snapMode = 'page',
|
|
351
|
+
initialPage,
|
|
350
352
|
NavigationComponent = DefaultCarouselNavigation,
|
|
351
353
|
PaginationComponent = DefaultCarouselPagination,
|
|
352
354
|
className,
|
|
@@ -370,7 +372,8 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
|
|
|
370
372
|
const animationApi = useAnimation();
|
|
371
373
|
const carouselScrollX = useMotionValue(0);
|
|
372
374
|
const dragControls = useDragControls();
|
|
373
|
-
const
|
|
375
|
+
const hasAppliedInitialPageRef = useRef(false);
|
|
376
|
+
const [activePageIndex, setActivePageIndex] = useState(() => Math.max(0, initialPage !== null && initialPage !== void 0 ? initialPage : 0));
|
|
374
377
|
const containerRef = useRef(null);
|
|
375
378
|
const [containerWidth, setContainerWidth] = useState(0);
|
|
376
379
|
const carouselItemRefMap = useRefMap();
|
|
@@ -597,14 +600,31 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
|
|
|
597
600
|
enabled: autoplay !== null && autoplay !== void 0 ? autoplay : false,
|
|
598
601
|
interval: autoplayInterval
|
|
599
602
|
});
|
|
600
|
-
const goToPage = useCallback(page
|
|
603
|
+
const goToPage = useCallback(function (page) {
|
|
604
|
+
let {
|
|
605
|
+
animate: shouldAnimate = true
|
|
606
|
+
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
601
607
|
const newPage = Math.max(0, Math.min(totalPages - 1, page));
|
|
602
608
|
updateActivePageIndex(newPage);
|
|
603
609
|
updateVisibleCarouselItems(pageOffsets[newPage]);
|
|
604
610
|
const targetOffset = isLoopingActive ? findNearestLoopOffset(-carouselScrollX.get(), [pageOffsets[newPage]], loopLength).offset : pageOffsets[newPage];
|
|
605
|
-
|
|
611
|
+
if (shouldAnimate) {
|
|
612
|
+
animate(carouselScrollX, -targetOffset, animationConfig);
|
|
613
|
+
} else {
|
|
614
|
+
carouselScrollX.set(-targetOffset);
|
|
615
|
+
}
|
|
606
616
|
reset();
|
|
607
617
|
}, [totalPages, updateActivePageIndex, updateVisibleCarouselItems, pageOffsets, isLoopingActive, carouselScrollX, loopLength, reset]);
|
|
618
|
+
useIsoEffect(() => {
|
|
619
|
+
if (hasAppliedInitialPageRef.current || totalPages === 0) return;
|
|
620
|
+
hasAppliedInitialPageRef.current = true;
|
|
621
|
+
const targetPage = initialPage !== null && initialPage !== void 0 ? initialPage : 0;
|
|
622
|
+
if (targetPage > 0) {
|
|
623
|
+
goToPage(targetPage, {
|
|
624
|
+
animate: false
|
|
625
|
+
});
|
|
626
|
+
}
|
|
627
|
+
}, [totalPages, initialPage, goToPage]);
|
|
608
628
|
useImperativeHandle(ref, () => ({
|
|
609
629
|
activePageIndex,
|
|
610
630
|
totalPages,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-web",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.23.0",
|
|
4
4
|
"description": "Coinbase Design System - Web",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -227,7 +227,7 @@
|
|
|
227
227
|
"react-dom": "^18.0.0 || ~19.1.2"
|
|
228
228
|
},
|
|
229
229
|
"dependencies": {
|
|
230
|
-
"@coinbase/cds-common": "^9.
|
|
230
|
+
"@coinbase/cds-common": "^9.23.0",
|
|
231
231
|
"@coinbase/cds-icons": "^5.22.0",
|
|
232
232
|
"@coinbase/cds-illustrations": "^4.48.0",
|
|
233
233
|
"@coinbase/cds-lottie-files": "^3.3.4",
|