@automattic/jetpack-components 0.70.1 → 0.72.0

package/CHANGELOG.md

@@ -2,9 +2,26 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.72.0] - 2025-03-31
+### Added
+- Add dot-page component. [#42625]
+
+### Changed
+- Implement a continuous loop in testimonial slider. [#42781]
+
+### Fixed
+- Components: Prevent deprecation notices by adding `__next40pxDefaultSize` to controls. [#42677]
+
+## [0.71.0] - 2025-03-26
+### Removed
+- Remove threat components. [#41654]
+
+### Fixed
+- Split Button: Increase compatibility of components, preventing console warnings. [#42627]
+
 ## [0.70.1] - 2025-03-24
 ### Fixed
-- Fixes admin panel header component layout [#42614]
+- Fix admin panel header component layout. [#42614]
 
 ## [0.70.0] - 2025-03-24
 ### Changed
@@ -1326,6 +1343,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.72.0]: https://github.com/Automattic/jetpack-components/compare/0.71.0...0.72.0
+[0.71.0]: https://github.com/Automattic/jetpack-components/compare/0.70.1...0.71.0
 [0.70.1]: https://github.com/Automattic/jetpack-components/compare/0.70.0...0.70.1
 [0.70.0]: https://github.com/Automattic/jetpack-components/compare/0.69.1...0.70.0
 [0.69.1]: https://github.com/Automattic/jetpack-components/compare/0.69.0...0.69.1

package/build/components/dot-pager/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import './style.scss';
+type DotPagerProps = {
+    hasDynamicHeight?: boolean;
+    children: ReactNode;
+    className?: string;
+    onPageSelected?: (index: number) => void;
+    isClickEnabled?: boolean;
+    rotateTime?: number;
+    tracksPrefix?: string;
+    tracksFn?: (eventName: string, data?: Record<string, unknown>) => void;
+};
+declare const DotPager: ({ hasDynamicHeight, children, className, onPageSelected, isClickEnabled, rotateTime, tracksPrefix, tracksFn, ...props }: DotPagerProps) => import("react/jsx-runtime").JSX.Element;
+export default DotPager;

package/build/components/dot-pager/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { Children, useState, useEffect, useCallback, useMemo } from 'react';
+import { Swipeable } from '../swipeable/index.js';
+import './style.scss';
+const Controls = ({ currentPage, numberOfPages, setCurrentPage, tracksPrefix, tracksFn, }) => {
+    // Create a map of memoized handlers for each page
+    const pageHandlers = useMemo(() => Array.from({ length: numberOfPages }, (_, page) => () => {
+        tracksFn(tracksPrefix + '_dot_click', {
+            current_page: currentPage,
+            destination_page: page,
+        });
+        setCurrentPage(page);
+    }), [numberOfPages, currentPage, tracksFn, tracksPrefix, setCurrentPage]);
+    if (numberOfPages < 2) {
+        return null;
+    }
+    return (_jsx("ul", { className: "dot-pager__controls", "aria-label": __('Pager controls', 'jetpack-components'), children: Array.from({ length: numberOfPages }, (_, page) => (_jsx("li", { "aria-current": page === currentPage ? 'page' : undefined, children: _jsx(Button, { className: clsx('dot-pager__control-choose-page', {
+                    'dot-pager__control-current': page === currentPage,
+                }), disabled: page === currentPage, "aria-label": sprintf(
+                /* translators: %1$d: current page number, %2$d: total number of pages */
+                __('Page %1$d of %2$d', 'jetpack-components'), page + 1, numberOfPages), onClick: pageHandlers[page] }, page.toString()) }, `page-${page}`))) }));
+};
+const DotPager = ({ hasDynamicHeight = false, children, className = '', onPageSelected, isClickEnabled = false, rotateTime = 0, tracksPrefix = '', tracksFn = () => { }, ...props }) => {
+    const normalizedChildren = Children.toArray(children).filter(Boolean);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [isPaused, setIsPaused] = useState(false);
+    const numPages = Children.count(normalizedChildren);
+    useEffect(() => {
+        if (rotateTime > 0 && numPages > 1 && !isPaused) {
+            const timerId = setTimeout(() => {
+                // Add 1 to numPages to account for the clones
+                setCurrentPage((currentPage + 1) % (numPages + 1));
+            }, rotateTime * 1000);
+            return () => clearTimeout(timerId);
+        }
+    }, [currentPage, numPages, rotateTime, isPaused]);
+    const handleSelectPage = useCallback((index) => {
+        setCurrentPage(index);
+        onPageSelected?.(index);
+    }, [onPageSelected]);
+    const handleMouseEnter = useCallback(() => {
+        setIsPaused(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsPaused(false);
+    }, []);
+    return (_jsxs("div", { className: clsx('dot-pager', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: [_jsx(Controls, { currentPage: currentPage, numberOfPages: numPages, setCurrentPage: handleSelectPage, tracksPrefix: tracksPrefix, tracksFn: tracksFn }), _jsx(Swipeable, { hasDynamicHeight: hasDynamicHeight, onPageSelect: handleSelectPage, currentPage: currentPage, pageClassName: "dot-pager__page", containerClassName: "dot-pager__pages", isClickEnabled: isClickEnabled, children: normalizedChildren })] }));
+};
+export default DotPager;

package/build/components/number-control/index.js

@@ -11,6 +11,6 @@ TextControl, } from '@wordpress/components';
  */
 const NumberControl = ExperimentalNumberControl ||
     function CustomNumberControl(props) {
-        return _jsx(TextControl, { type: "number", inputMode: "numeric", ...props });
+        return (_jsx(TextControl, { type: "number", inputMode: "numeric", ...props, __next40pxDefaultSize: true }));
     };
 export default NumberControl;

package/build/components/split-button/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
+import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
 const DownIcon = () => (_jsx("svg", { width: "15", height: "9", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "10 9 4 7", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m18.004 10.555-6.005 5.459-6.004-5.459 1.009-1.11 4.995 4.542 4.996-4.542 1.009 1.11Z" }) }));
 const SplitButton = ({ variant, controls, popoverProps, toggleProps, label, ...buttonProps }) => {
-    return (_jsxs(ButtonGroup, { className: styles['split-button'], children: [_jsx(Button, { variant: variant, ...buttonProps, className: styles.button }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }));
+    return (_jsx(Flex, { className: styles['split-button'], children: _jsxs("div", { role: "group", className: "components-button-group", children: [_jsx(Button, { variant: variant, ...buttonProps, className: styles.button }), _jsx(DropdownMenu, { toggleProps: { variant, className: styles.button, ...toggleProps }, popoverProps: { noArrow: false, ...popoverProps }, icon: _jsx(DownIcon, {}), disableOpenOnArrowDown: true, controls: controls, label: label })] }) }));
 };
 export default SplitButton;

package/build/components/swipeable/index.d.ts

@@ -0,0 +1,12 @@
+import './style.scss';
+export declare const Swipeable: ({ hasDynamicHeight, children, currentPage, onPageSelect, pageClassName, containerClassName, isClickEnabled, ...otherProps }: {
+    [x: string]: any;
+    hasDynamicHeight?: boolean;
+    children: any;
+    currentPage?: number;
+    onPageSelect: any;
+    pageClassName: any;
+    containerClassName: any;
+    isClickEnabled: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Swipeable;

package/build/components/swipeable/index.js

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
+import './style.scss';
+const OFFSET_THRESHOLD_PERCENTAGE = 0.35; // Percentage of width to travel before we trigger the slider to move to the desired slide.
+const VELOCITY_THRESHOLD = 0.2; // Speed of drag above, before we trigger the slider to move to the desired slide.
+const VERTICAL_THRESHOLD_ANGLE = 55;
+const TRANSITION_DURATION = '300ms';
+/**
+ * Custom hook to observe and handle resize events on a DOM element.
+ *
+ * @return {[React.Dispatch<React.SetStateAction<HTMLElement | null>>, ResizeObserverEntry | null]} Tuple containing setter and entry
+ */
+function useResizeObserver() {
+    const [observerEntry, setObserverEntry] = useState(null);
+    const [node, setNode] = useState(null);
+    const observer = useRef(null);
+    const disconnect = useCallback(() => observer.current?.disconnect(), []);
+    const observe = useCallback(() => {
+        observer.current = new ResizeObserver(([entry]) => setObserverEntry(entry));
+        if (node) {
+            observer.current.observe(node);
+        }
+    }, [node]);
+    useLayoutEffect(() => {
+        observe();
+        return () => disconnect();
+    }, [disconnect, observe]);
+    return [setNode, observerEntry];
+}
+/**
+ * Gets the drag position and timestamp from a mouse, touch, or pointer event.
+ *
+ * @param {Event} event - The event object from the drag/touch/pointer interaction
+ * @return {object} Object containing x, y coordinates and timestamp of the event
+ */
+function getDragPositionAndTime(event) {
+    const { timeStamp } = event;
+    if (Object.prototype.hasOwnProperty.call(event, 'clientX')) {
+        return { x: event.clientX, y: event.clientY, timeStamp };
+    }
+    if (event.targetTouches[0]) {
+        return {
+            x: event.targetTouches[0].clientX,
+            y: event.targetTouches[0].clientY,
+            timeStamp,
+        };
+    }
+    const touch = event.changedTouches[0];
+    return { x: touch.clientX, y: touch.clientY, timeStamp };
+}
+/**
+ * Calculates the total width needed for all pages in the swipeable component.
+ *
+ * @param {number} pageWidth - The width of a single page
+ * @param {number} numPages  - The total number of pages
+ * @return {number|null} The total width of all pages or null if pageWidth is not available
+ */
+function getPagesWidth(pageWidth, numPages) {
+    if (!pageWidth) {
+        return null;
+    }
+    return pageWidth * numPages;
+}
+export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0, onPageSelect, pageClassName, containerClassName, isClickEnabled, ...otherProps }) => {
+    const prevPageRef = useRef(currentPage);
+    const [swipeableArea, setSwipeableArea] = useState(null);
+    // TODO: Needs to be added RTL support
+    const isRtl = false;
+    const [resizeObserverRef, entry] = useResizeObserver();
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [pagesStyle, setPagesStyle] = useState({
+        transitionDuration: TRANSITION_DURATION,
+    });
+    const [dragData, setDragData] = useState(null);
+    const pagesRef = useRef(null);
+    const numPages = Children.count(children);
+    const containerWidth = entry?.contentRect?.width;
+    useEffect(() => {
+        let timeoutId;
+        if ((currentPage === 0 && prevPageRef.current === numPages) ||
+            (currentPage === numPages - 1 && prevPageRef.current === -1)) {
+            // We are in a real slide after being transitioned from a clone
+            // we need to set again the transitionDuration to TRANSITION_DURATION
+            // But we need to wait a little bit to avoid enabling it before
+            // we moved to the real slide
+            timeoutId = setTimeout(() => {
+                setPagesStyle(prev => ({ ...prev, transitionDuration: TRANSITION_DURATION }));
+            }, 500);
+        }
+        else if (currentPage === numPages || currentPage < 0) {
+            // In a clone slide. Start the transition to the real slide
+            setIsTransitioning(true);
+        }
+        prevPageRef.current = currentPage;
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [currentPage, numPages]);
+    const getOffset = useCallback(index => {
+        // Adjust offset to account for the cloned element at the beginning
+        const adjustedIndex = index + 1;
+        const offset = containerWidth * adjustedIndex;
+        return isRtl ? offset : -offset;
+    }, [isRtl, containerWidth]);
+    const updateEnabled = hasDynamicHeight && numPages > 1;
+    // Generate a property that denotes the order of the cards, in order to recalculate height whenever the card order changes.
+    const childrenOrder = children.reduce((acc, child) => acc + child.key, '');
+    useLayoutEffect(() => {
+        if (!updateEnabled) {
+            // This is a fix for a bug when you have >1 pages and it update the component to just one but the height is still
+            // Related to https://github.com/Automattic/dotcom-forge/issues/2033
+            if (pagesStyle?.height) {
+                setPagesStyle({ ...pagesStyle, height: undefined });
+            }
+            return;
+        }
+        const targetHeight = pagesRef.current?.querySelector('.is-current')
+            ?.offsetHeight;
+        if (targetHeight && pagesStyle?.height !== targetHeight) {
+            setPagesStyle({ ...pagesStyle, height: targetHeight });
+        }
+    }, [pagesRef, currentPage, pagesStyle, updateEnabled, containerWidth, childrenOrder]);
+    const resetDragData = useCallback(() => {
+        setPagesStyle(prev => ({
+            ...prev,
+            transitionDuration: TRANSITION_DURATION,
+        }));
+        setDragData(null);
+    }, [setPagesStyle, setDragData]);
+    const handleDragStart = useCallback(event => {
+        const position = getDragPositionAndTime(event);
+        setSwipeableArea(pagesRef.current?.getBoundingClientRect());
+        setDragData({ start: position });
+        setPagesStyle(prev => ({ ...prev, transitionDuration: `0ms` })); // Set transition Duration to 0 for smooth dragging.
+    }, [setPagesStyle, setDragData]);
+    const hasSwipedToNextPage = useCallback(delta => (isRtl ? delta > 0 : delta < 0), [isRtl]);
+    const hasSwipedToPreviousPage = useCallback(delta => (isRtl ? delta < 0 : delta > 0), [isRtl]);
+    const handleTransitionEnd = useCallback(() => {
+        if (!isTransitioning) {
+            return;
+        }
+        setIsTransitioning(false);
+        // If we're on the clone slides, jump to the corresponding real slide
+        // We set the transitionDuration to 0ms to make invisible the
+        // change from the clone to the real slide
+        if (currentPage >= numPages) {
+            setPagesStyle(prev => ({ ...prev, transitionDuration: '0ms' }));
+            onPageSelect(0);
+        }
+        else if (currentPage < 0) {
+            setPagesStyle(prev => ({ ...prev, transitionDuration: '0ms' }));
+            onPageSelect(numPages - 1);
+        }
+    }, [currentPage, numPages, onPageSelect, isTransitioning]);
+    const handleDragEnd = useCallback(event => {
+        if (!dragData) {
+            return; // End early if we are not dragging any more.
+        }
+        let dragPosition = getDragPositionAndTime(event);
+        if (dragPosition.x === 0) {
+            dragPosition = dragData.last;
+        }
+        const delta = dragPosition.x - dragData.start.x;
+        const absoluteDelta = Math.abs(delta);
+        const velocity = absoluteDelta / (dragPosition.timeStamp - dragData.start.timeStamp);
+        const verticalAbsoluteDelta = Math.abs(dragPosition.y - dragData.start.y);
+        const angle = (Math.atan2(verticalAbsoluteDelta, absoluteDelta) * 180) / Math.PI;
+        // Is click or tap?
+        if (velocity === 0 && isClickEnabled) {
+            onPageSelect((currentPage + 1) % numPages);
+            resetDragData();
+            return;
+        }
+        // Is vertical scroll detected?
+        if (angle > VERTICAL_THRESHOLD_ANGLE) {
+            resetDragData();
+            return;
+        }
+        const hasMetThreshold = absoluteDelta > OFFSET_THRESHOLD_PERCENTAGE * containerWidth ||
+            velocity > VELOCITY_THRESHOLD;
+        let newIndex = currentPage;
+        if (hasMetThreshold) {
+            if (hasSwipedToNextPage(delta)) {
+                newIndex = currentPage + 1;
+                if (newIndex >= numPages) {
+                    setIsTransitioning(true);
+                }
+            }
+            else if (hasSwipedToPreviousPage(delta)) {
+                newIndex = currentPage - 1;
+                if (newIndex < 0) {
+                    setIsTransitioning(true);
+                }
+            }
+        }
+        setPagesStyle(prev => ({
+            ...prev,
+            transform: `translate3d(${getOffset(newIndex)}px, 0px, 0px)`,
+            transitionDuration: TRANSITION_DURATION,
+        }));
+        onPageSelect(newIndex);
+        setDragData(null);
+    }, [
+        currentPage,
+        dragData,
+        hasSwipedToNextPage,
+        hasSwipedToPreviousPage,
+        numPages,
+        onPageSelect,
+        setPagesStyle,
+        containerWidth,
+        isClickEnabled,
+        resetDragData,
+        getOffset,
+    ]);
+    const handleDrag = useCallback(event => {
+        if (!dragData) {
+            return;
+        }
+        const dragPosition = getDragPositionAndTime(event);
+        const delta = dragPosition.x - dragData.start.x;
+        const absoluteDelta = Math.abs(delta);
+        const offset = getOffset(currentPage) + delta;
+        setDragData({ ...dragData, last: dragPosition });
+        // The user needs to swipe horizontally more then 2 px in order for the canvase to be dragging.
+        // We do this so that the user can scroll vertically smother.
+        if (absoluteDelta < 3) {
+            return;
+        }
+        setPagesStyle(prev => ({
+            ...prev,
+            transform: `translate3d(${offset}px, 0px, 0px)`,
+            transitionDuration: '0ms',
+        }));
+        if (!swipeableArea) {
+            return;
+        }
+        // Did the user swipe out of the swipeable area?
+        if (dragPosition.x < swipeableArea.left ||
+            dragPosition.x > swipeableArea.right ||
+            dragPosition.y > swipeableArea.bottom ||
+            dragPosition.y < swipeableArea.top) {
+            handleDragEnd(event);
+        }
+    }, [dragData, getOffset, currentPage, swipeableArea, handleDragEnd]);
+    const getTouchEvents = useCallback(() => {
+        if ('onpointerup' in document) {
+            return {
+                onPointerDown: handleDragStart,
+                onPointerMove: handleDrag,
+                onPointerUp: handleDragEnd,
+                onPointerLeave: handleDragEnd,
+            };
+        }
+        if ('ondragend' in document) {
+            return {
+                onDragStart: handleDragStart,
+                onDrag: handleDrag,
+                onDragEnd: handleDragEnd,
+                onDragExit: handleDragEnd,
+            };
+        }
+        if ('ontouchend' in document) {
+            return {
+                onTouchStart: handleDragStart,
+                onTouchMove: handleDrag,
+                onTouchEnd: handleDragEnd,
+                onTouchCancel: handleDragEnd,
+            };
+        }
+        return null;
+    }, [handleDragStart, handleDrag, handleDragEnd]);
+    const offset = getOffset(currentPage);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ...getTouchEvents(), className: "swipeable__container", ref: pagesRef, ...otherProps, children: _jsxs("div", { className: clsx('swipeable__pages', containerClassName), style: {
+                        ...pagesStyle,
+                        width: getPagesWidth(containerWidth, numPages + 2),
+                        transform: `translate3d(${offset}px, 0px, 0px)`,
+                    }, onTransitionEnd: handleTransitionEnd, children: [_jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
+                                'is-clone': true,
+                                'is-prev': currentPage === 0,
+                            }), children: Children.toArray(children)[numPages - 1] }, `clone-prev-${numPages - 1}`), Children.map(children, (child, index) => (_jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
+                                'is-current': index === currentPage,
+                                'is-prev': index < currentPage,
+                                'is-next': index > currentPage,
+                            }), "data-testid": `swipeable-page-${index + 1}`, children: child }, `page-${index}`))), _jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
+                                'is-clone': true,
+                                'is-next': currentPage === numPages - 1,
+                            }), children: Children.toArray(children)[0] }, `clone-next-0`)] }) }), _jsx("div", { ref: resizeObserverRef, className: "swipeable__resize-observer" })] }));
+};
+export default Swipeable;

package/build/index.d.ts

@@ -28,9 +28,6 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard/index
 export * from './components/icons/index.js';
 export { default as SplitButton } from './components/split-button/index.js';
 export { default as ThemeProvider } from './components/theme-provider/index.js';
-export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
-export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
-export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
 export { default as Text, H2, H3, Title } from './components/text/index.js';
 export { default as ToggleControl } from './components/toggle-control/index.js';
 export { default as NumberControl } from './components/number-control/index.js';
@@ -40,6 +37,7 @@ export { default as Button } from './components/button/index.js';
 export type { ButtonProps } from './components/button/types.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
 export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Badge } from './components/badge/index.js';
 export { default as Chip } from './components/chip/index.js';
 export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
 export { default as BoostScoreBar } from './components/boost-score-bar/index.js';
@@ -47,6 +45,7 @@ export { default as BoostScoreGraph } from './components/boost-score-graph/index
 export { default as ProductPrice } from './components/product-price/index.js';
 export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
 export { default as Dialog } from './components/dialog/index.js';
+export { default as DotPager } from './components/dot-pager/index.js';
 export { default as DonutMeter } from './components/donut-meter/index.js';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
 export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';

package/build/index.js

@@ -43,9 +43,6 @@ export { default as CopyToClipboard } from './components/copy-to-clipboard/index
 export * from './components/icons/index.js';
 export { default as SplitButton } from './components/split-button/index.js';
 export { default as ThemeProvider } from './components/theme-provider/index.js';
-export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
-export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
-export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
 export { default as Text, H2, H3, Title } from './components/text/index.js';
 export { default as ToggleControl } from './components/toggle-control/index.js';
 export { default as NumberControl } from './components/number-control/index.js';
@@ -54,6 +51,7 @@ export { default as QRCode } from './components/qr-code/index.js';
 export { default as Button } from './components/button/index.js';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
 export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Badge } from './components/badge/index.js';
 export { default as Chip } from './components/chip/index.js';
 export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
 export { default as BoostScoreBar } from './components/boost-score-bar/index.js';
@@ -61,6 +59,7 @@ export { default as BoostScoreGraph } from './components/boost-score-graph/index
 export { default as ProductPrice } from './components/product-price/index.js';
 export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
 export { default as Dialog } from './components/dialog/index.js';
+export { default as DotPager } from './components/dot-pager/index.js';
 export { default as DonutMeter } from './components/donut-meter/index.js';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
 export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';

package/components/dot-pager/README.md

@@ -0,0 +1,20 @@
+# Dot pager
+
+`DotPager` wraps all its child components into a browsable container that shows only one child at time.
+
+## Usage
+
+```js
+import { DotPager } from '@automattic/jetpack-components';
+
+
+function myDotPager() {
+	return (
+		<DotPager>
+			<div>Item 1</div>
+			<div>Item 2</div>
+			<div>Item 3</div>
+		</DotPager>
+	);
+}
+```

package/components/dot-pager/index.tsx

@@ -0,0 +1,147 @@
+import { Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
+import React, { Children, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
+import { Swipeable } from '../swipeable/index.js';
+
+import './style.scss';
+
+type ControlsProps = {
+	currentPage: number;
+	numberOfPages: number;
+	setCurrentPage: ( page: number ) => void;
+	tracksPrefix: string;
+	tracksFn: ( eventName: string, data?: Record< string, unknown > ) => void;
+};
+
+const Controls = ( {
+	currentPage,
+	numberOfPages,
+	setCurrentPage,
+	tracksPrefix,
+	tracksFn,
+}: ControlsProps ) => {
+	// Create a map of memoized handlers for each page
+	const pageHandlers = useMemo(
+		() =>
+			Array.from( { length: numberOfPages }, ( _, page ) => () => {
+				tracksFn( tracksPrefix + '_dot_click', {
+					current_page: currentPage,
+					destination_page: page,
+				} );
+				setCurrentPage( page );
+			} ),
+		[ numberOfPages, currentPage, tracksFn, tracksPrefix, setCurrentPage ]
+	);
+
+	if ( numberOfPages < 2 ) {
+		return null;
+	}
+
+	return (
+		<ul className="dot-pager__controls" aria-label={ __( 'Pager controls', 'jetpack-components' ) }>
+			{ Array.from( { length: numberOfPages }, ( _, page ) => (
+				<li key={ `page-${ page }` } aria-current={ page === currentPage ? 'page' : undefined }>
+					<Button
+						key={ page.toString() }
+						className={ clsx( 'dot-pager__control-choose-page', {
+							'dot-pager__control-current': page === currentPage,
+						} ) }
+						disabled={ page === currentPage }
+						aria-label={ sprintf(
+							/* translators: %1$d: current page number, %2$d: total number of pages */
+							__( 'Page %1$d of %2$d', 'jetpack-components' ),
+							page + 1,
+							numberOfPages
+						) }
+						onClick={ pageHandlers[ page ] }
+					/>
+				</li>
+			) ) }
+		</ul>
+	);
+};
+
+type DotPagerProps = {
+	hasDynamicHeight?: boolean;
+	children: ReactNode;
+	className?: string;
+	onPageSelected?: ( index: number ) => void;
+	isClickEnabled?: boolean;
+	rotateTime?: number;
+	tracksPrefix?: string;
+	tracksFn?: ( eventName: string, data?: Record< string, unknown > ) => void;
+};
+
+const DotPager = ( {
+	hasDynamicHeight = false,
+	children,
+	className = '',
+	onPageSelected,
+	isClickEnabled = false,
+	rotateTime = 0,
+	tracksPrefix = '',
+	tracksFn = () => {},
+	...props
+}: DotPagerProps ) => {
+	const normalizedChildren = Children.toArray( children ).filter( Boolean );
+	const [ currentPage, setCurrentPage ] = useState( 0 );
+	const [ isPaused, setIsPaused ] = useState( false );
+	const numPages = Children.count( normalizedChildren );
+
+	useEffect( () => {
+		if ( rotateTime > 0 && numPages > 1 && ! isPaused ) {
+			const timerId = setTimeout( () => {
+				// Add 1 to numPages to account for the clones
+				setCurrentPage( ( currentPage + 1 ) % ( numPages + 1 ) );
+			}, rotateTime * 1000 );
+
+			return () => clearTimeout( timerId );
+		}
+	}, [ currentPage, numPages, rotateTime, isPaused ] );
+
+	const handleSelectPage = useCallback(
+		( index: number ) => {
+			setCurrentPage( index );
+			onPageSelected?.( index );
+		},
+		[ onPageSelected ]
+	);
+
+	const handleMouseEnter = useCallback( () => {
+		setIsPaused( true );
+	}, [] );
+
+	const handleMouseLeave = useCallback( () => {
+		setIsPaused( false );
+	}, [] );
+
+	return (
+		<div
+			className={ clsx( 'dot-pager', className ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+			{ ...props }
+		>
+			<Controls
+				currentPage={ currentPage }
+				numberOfPages={ numPages }
+				setCurrentPage={ handleSelectPage }
+				tracksPrefix={ tracksPrefix }
+				tracksFn={ tracksFn }
+			/>
+			<Swipeable
+				hasDynamicHeight={ hasDynamicHeight }
+				onPageSelect={ handleSelectPage }
+				currentPage={ currentPage }
+				pageClassName="dot-pager__page"
+				containerClassName="dot-pager__pages"
+				isClickEnabled={ isClickEnabled }
+			>
+				{ normalizedChildren }
+			</Swipeable>
+		</div>
+	);
+};
+
+export default DotPager;