@automattic/jetpack-components 0.70.1 → 0.72.0

package/components/dot-pager/style.scss

@@ -0,0 +1,80 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+@import '@automattic/jetpack-base-styles/root-variables';
+
+.dot-pager {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.dot-pager__page {
+	height: 100%;
+	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+	@include reduce-motion( "transition" );
+	opacity: 1;
+	visibility: visible;
+}
+
+.dot-pager__controls {
+	margin: 0;
+	margin-bottom: 16px;
+	margin-top: auto;
+	display: flex;
+	justify-content: center;
+	position: absolute;
+	bottom: 0px;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	li {
+		display: inline-flex;
+		margin: 0 4px;
+		height: 18px;
+		align-items: center;
+
+		&:first-child {
+			margin-left: 0;
+		}
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+
+	.dot-pager__control-gap {
+		margin-left: auto;
+	}
+}
+
+.dot-pager__control-choose-page {
+	cursor: pointer;
+
+	&:disabled {
+		cursor: default;
+	}
+
+	&:focus-visible {
+		box-shadow: 0 0 0 2px var(--jp-gray-90);
+	}
+}
+
+.dot-pager__control-choose-page {
+	border-radius: 50%;
+	width: 6px;
+	height: 6px;
+	padding: 0px;
+	background-color: var(--jp-white-off);
+
+	&:hover {
+		background-color: var(--jp-gray-20);
+	}
+
+	&.dot-pager__control-current {
+		background-color: var(--jp-gray-80);
+	}
+}
+
+.dot-pager {
+	&__button {
+		margin-right: 10px;
+	}
+}

package/components/number-control/index.jsx

@@ -14,7 +14,9 @@ import {
 const NumberControl =
 	ExperimentalNumberControl ||
 	function CustomNumberControl( props ) {
-		return <TextControl type="number" inputMode="numeric" { ...props } />;
+		return (
+			<TextControl type="number" inputMode="numeric" { ...props } __next40pxDefaultSize={ true } />
+		);
 	};
 
 export default NumberControl;

package/components/split-button/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
+import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
 import { SplitButtonProps } from './types.js';
 import type React from 'react';
@@ -22,17 +22,19 @@ const SplitButton: React.FC< SplitButtonProps > = ( {
 	...buttonProps
 } ) => {
 	return (
-		<ButtonGroup className={ styles[ 'split-button' ] }>
-			<Button variant={ variant } { ...buttonProps } className={ styles.button } />
-			<DropdownMenu
-				toggleProps={ { variant, className: styles.button, ...toggleProps } }
-				popoverProps={ { noArrow: false, ...popoverProps } }
-				icon={ <DownIcon /> }
-				disableOpenOnArrowDown={ true }
-				controls={ controls }
-				label={ label }
-			/>
-		</ButtonGroup>
+		<Flex className={ styles[ 'split-button' ] }>
+			<div role="group" className="components-button-group">
+				<Button variant={ variant } { ...buttonProps } className={ styles.button } />
+				<DropdownMenu
+					toggleProps={ { variant, className: styles.button, ...toggleProps } }
+					popoverProps={ { noArrow: false, ...popoverProps } }
+					icon={ <DownIcon /> }
+					disableOpenOnArrowDown={ true }
+					controls={ controls }
+					label={ label }
+				/>
+			</div>
+		</Flex>
 	);
 };
 

package/components/split-button/style.module.scss

@@ -4,6 +4,11 @@
     height: var(--actions-size);
     border-radius: var(--jp-border-radius);
 
+	:global(.components-button-group) {
+		display: flex;
+		height: 100%;
+	}
+
     & > .button:first-child {
         border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
     }

package/components/swipeable/README.md

@@ -0,0 +1,34 @@
+# Swipeable
+
+This component is used to add horizontal swipe controls to a list of elements (pages).
+
+## Example Usage
+
+```js
+import { Swipeable } from '@automattic/jetpack-components';
+
+function Pager() {
+	const [ currentPage, setCurrentPage ] = useState( 0 );
+	return (
+		<Swipeable
+			onPageSelect={ ( index ) => {
+				setCurrentPage( index );
+			} }
+			currentPage={ currentPage }
+			pageClassName="example-page-component-class"
+		>
+			<div>Page 1</div>
+			<div>Page 2</div>
+			<div>Page 3</div>
+		</Swipeable>
+	);
+}
+```
+
+## Props
+
+- `onPageSelect` - (function) Function that runs when the page is selected on using a swipe. Useful for updating the current page.
+- `currentPage` - (number) Index of the currently selected/shown page.
+- `hasDynamicHeight` - (bool) Whether height should be changed dynamically.
+- `pageClassName` - _optional_ (string) Optional class attribute of the page component.
+- `containerClassName` - _optional_ (string) Optional class attribute of the page container component.

package/components/swipeable/index.tsx

@@ -0,0 +1,425 @@
+import clsx from 'clsx';
+import React, { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
+
+import './style.scss';
+
+interface PageStyle {
+	transitionDuration: string;
+	height?: number;
+	transform?: string;
+}
+
+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(): [
+	React.Dispatch< React.SetStateAction< HTMLElement | null > >,
+	ResizeObserverEntry | null,
+] {
+	const [ observerEntry, setObserverEntry ] = useState< ResizeObserverEntry | null >( null );
+	const [ node, setNode ] = useState< HTMLElement | null >( null );
+	const observer = useRef< ResizeObserver | null >( 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< DOMRect | null >( null );
+	// TODO: Needs to be added RTL support
+	const isRtl = false;
+
+	const [ resizeObserverRef, entry ] = useResizeObserver();
+	const [ isTransitioning, setIsTransitioning ] = useState( false );
+
+	const [ pagesStyle, setPagesStyle ] = useState< PageStyle >( {
+		transitionDuration: TRANSITION_DURATION,
+	} );
+
+	const [ dragData, setDragData ] = useState( null );
+
+	const pagesRef = useRef< HTMLDivElement >( null );
+	const numPages = Children.count( children );
+	const containerWidth = entry?.contentRect?.width;
+
+	useEffect( () => {
+		let timeoutId: ReturnType< typeof setTimeout >;
+		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' ) as HTMLElement )
+			?.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 (
+		<>
+			<div
+				{ ...getTouchEvents() }
+				className="swipeable__container"
+				ref={ pagesRef }
+				{ ...otherProps }
+			>
+				<div
+					className={ clsx( 'swipeable__pages', containerClassName ) }
+					style={ {
+						...pagesStyle,
+						width: getPagesWidth( containerWidth, numPages + 2 ),
+						transform: `translate3d(${ offset }px, 0px, 0px)`,
+					} }
+					onTransitionEnd={ handleTransitionEnd }
+				>
+					{ /* Clone of the last element */ }
+					<div
+						style={ { width: `${ containerWidth }px` } }
+						className={ clsx( 'swipeable__page', pageClassName, {
+							'is-clone': true,
+							'is-prev': currentPage === 0,
+						} ) }
+						key={ `clone-prev-${ numPages - 1 }` }
+					>
+						{ Children.toArray( children )[ numPages - 1 ] }
+					</div>
+
+					{ /* Original elements */ }
+					{ Children.map( children, ( child, index ) => (
+						<div
+							style={ { width: `${ containerWidth }px` } }
+							className={ clsx( 'swipeable__page', pageClassName, {
+								'is-current': index === currentPage,
+								'is-prev': index < currentPage,
+								'is-next': index > currentPage,
+							} ) }
+							key={ `page-${ index }` }
+							data-testid={ `swipeable-page-${ index + 1 }` }
+						>
+							{ child }
+						</div>
+					) ) }
+
+					{ /* Clone of the first element */ }
+					<div
+						style={ { width: `${ containerWidth }px` } }
+						className={ clsx( 'swipeable__page', pageClassName, {
+							'is-clone': true,
+							'is-next': currentPage === numPages - 1,
+						} ) }
+						key={ `clone-next-0` }
+					>
+						{ Children.toArray( children )[ 0 ] }
+					</div>
+				</div>
+			</div>
+			<div ref={ resizeObserverRef } className="swipeable__resize-observer"></div>
+		</>
+	);
+};
+
+export default Swipeable;

package/components/swipeable/style.scss

@@ -0,0 +1,34 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+
+.swipeable__container {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+	list-style: none;
+	padding: 0;
+	touch-action: pan-y;
+}
+
+.swipeable__pages {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: flex-start;
+	transition: all 0.5s ease-in-out;
+	transition-property: transform, height;
+
+	@include reduce-motion( "transition" );
+}
+
+.swipeable__page {
+	width: 100%;
+	flex-shrink: 0;
+	margin-left: 0;
+
+	&.is-clone {
+		position: relative;
+		pointer-events: none; // Prevent interactions with cloned elements
+	}
+}

package/index.ts

@@ -44,9 +44,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';
@@ -56,6 +53,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,
@@ -68,6 +66,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.70.1",
+	"version": "0.72.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -17,14 +17,12 @@
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-boost-score-api": "^0.1.60",
 		"@automattic/jetpack-api": "^0.20.0",
-		"@automattic/jetpack-scan": "^0.5.9",
 		"@automattic/jetpack-script-data": "^0.3.0",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.19.0",
 		"@wordpress/components": "29.5.0",
 		"@wordpress/compose": "7.19.0",
 		"@wordpress/data": "10.19.0",
-		"@wordpress/dataviews": "4.15.0",
 		"@wordpress/date": "5.19.0",
 		"@wordpress/element": "6.19.0",
 		"@wordpress/i18n": "5.19.0",