@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/src/mobile/keyboard-aware-flat-list/test/use-scroll.native.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+
+import { renderHook } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import useScroll from '../use-scroll';
+
+// Mock Reanimated with default mock
+jest.mock( 'react-native-reanimated', () => ( {
+	...require( 'react-native-reanimated/mock' ),
+	useAnimatedScrollHandler: jest.fn( ( args ) => args ),
+} ) );
+
+describe( 'useScroll', () => {
+	it( 'scrolls using current scroll position', () => {
+		const sectionY = 50;
+		const sectionHeight = 10;
+		const scrollViewMeasurements = { x: 0, y: 0, width: 0, height: 600 };
+		const extraScrollHeight = 50;
+		const scrollEnabled = true;
+		const shouldPreventAutomaticScroll = false;
+
+		const scrollTo = jest.fn();
+		const measureInWindow = jest.fn( ( callback ) =>
+			callback( ...Object.values( scrollViewMeasurements ) )
+		);
+		const scrollRef = { scrollTo, measureInWindow };
+		const onScroll = jest.fn();
+		const onSizeChange = jest.fn();
+
+		const { result } = renderHook( () =>
+			useScroll( {
+				scrollEnabled,
+				shouldPreventAutomaticScroll,
+				onScroll,
+				onSizeChange,
+				extraScrollHeight,
+			} )
+		);
+		const {
+			scrollViewRef,
+			onContentSizeChange,
+			scrollHandler,
+			scrollToSection,
+		} = result.current;
+
+		// Assign ref
+		scrollViewRef.current = scrollRef;
+
+		// Check content size changes
+		onContentSizeChange();
+		expect( measureInWindow ).toHaveBeenCalled();
+		expect( onSizeChange ).toHaveBeenCalled();
+
+		// Set up initial scroll offset
+		scrollHandler.onScroll( { contentOffset: { y: 150 } } );
+
+		// Scroll to section
+		scrollToSection( sectionY, sectionHeight );
+
+		// Assert
+		expect( scrollTo ).toHaveBeenCalledWith( {
+			y: sectionY,
+			animated: true,
+		} );
+	} );
+} );

package/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/**
+ * Hook to scroll to a specified element by taking into account the Keyboard
+ * and the Header.
+ *
+ * @param {RefObject} scrollViewRef   Scroll view reference.
+ * @param {Function}  scrollToSection Function to scroll.
+ * @return {Function[]} Function to scroll to an element.
+ */
+export default function useScrollToElement( scrollViewRef, scrollToSection ) {
+	/**
+	 * Function to scroll to an element.
+	 *
+	 * @param {RefObject} elementRef Ref of the element.
+	 */
+	const scrollToElement = useCallback(
+		( elementRef ) => {
+			if ( ! scrollViewRef.current || ! elementRef ) {
+				return;
+			}
+
+			elementRef.current.measureLayout(
+				scrollViewRef.current,
+				( _x, y, _width, height ) => {
+					if ( height || y ) {
+						scrollToSection( Math.round( y ), height );
+					}
+				},
+				() => {}
+			);
+		},
+		[ scrollViewRef, scrollToSection ]
+	);
+
+	return [ scrollToElement ];
+}

package/src/mobile/keyboard-aware-flat-list/{use-scroll-to-text-input.native.js → use-scroll-to-section.native.js}

@@ -8,24 +8,21 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
  */
 import { useCallback } from '@wordpress/element';
 
-const DEFAULT_FONT_SIZE = 16;
-
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /** @typedef {import('react-native-reanimated').SharedValue} SharedValue */
 /**
- * Hook to scroll to the currently focused TextInput
- * depending on where the caret is placed taking into
- * account the Keyboard and the Header.
+ * Hook to scroll to a specified section by taking into account the Keyboard
+ * and the Header.
  *
  * @param {number}      extraScrollHeight      Extra space to not overlap the content.
  * @param {number}      keyboardOffset         Keyboard space offset.
  * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.
  * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.
- * @param {RefObject}   scrollViewRef          ScrollView reference.
+ * @param {RefObject}   scrollViewRef          Scroll view reference.
  * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.
- * @return {Function[]} Function to scroll to the current TextInput's offset.
+ * @return {Function[]} Function to scroll to a section.
  */
-export default function useScrollToTextInput(
+export default function useScrollToSection(
 	extraScrollHeight,
 	keyboardOffset,
 	scrollEnabled,
@@ -37,33 +34,31 @@ export default function useScrollToTextInput(
 	const insets = top + bottom;
 
 	/**
-	 * Function to scroll to the current TextInput's offset.
+	 * Function to scroll to a section.
 	 *
-	 * @param {Object} caret             The caret position data of the currently focused TextInput.
-	 * @param {number} caret.caretHeight The height of the caret.
-	 * @param {number} textInputOffset   The offset calculated with the caret's Y coordinate + the
-	 *                                   TextInput's Y coord or height value.
+	 * @param {Object} section        Section data to scroll to.
+	 * @param {number} section.y      Y-coordinate of of the section.
+	 * @param {number} section.height Height of the section.
 	 */
-	const scrollToTextInputOffset = useCallback(
-		( caret, textInputOffset ) => {
-			const { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};
-
+	const scrollToSection = useCallback(
+		( sectionY, sectionHeight ) => {
 			if (
 				! scrollViewRef.current ||
 				! scrollEnabled ||
-				! scrollViewMeasurements.current
+				! scrollViewMeasurements
 			) {
 				return;
 			}
+
 			const currentScrollViewYOffset = Math.max(
 				0,
 				scrollViewYOffset.value
 			);
 
-			// Scroll up.
-			if ( textInputOffset < currentScrollViewYOffset ) {
+			// Scroll to the top of the section.
+			if ( sectionY < currentScrollViewYOffset ) {
 				scrollViewRef.current.scrollTo( {
-					y: textInputOffset,
+					y: sectionY,
 					animated: true,
 				} );
 				return;
@@ -72,7 +67,7 @@ export default function useScrollToTextInput(
 			const availableScreenSpace = Math.abs(
 				Math.floor(
 					scrollViewMeasurements.current.height -
-						( keyboardOffset + extraScrollHeight + caretHeight )
+						( keyboardOffset + extraScrollHeight + sectionHeight )
 				)
 			);
 			const maxOffset = Math.floor(
@@ -80,12 +75,12 @@ export default function useScrollToTextInput(
 			);
 
 			const isAtTheTop =
-				textInputOffset < scrollViewMeasurements.current.y + insets;
+				sectionY < scrollViewMeasurements.current.y + insets;
 
-			// Scroll down.
-			if ( textInputOffset > maxOffset && ! isAtTheTop ) {
+			// Scroll to the bottom of the section.
+			if ( sectionY > maxOffset && ! isAtTheTop ) {
 				scrollViewRef.current.scrollTo( {
-					y: textInputOffset - availableScreenSpace,
+					y: sectionY - availableScreenSpace,
 					animated: true,
 				} );
 			}
@@ -101,5 +96,5 @@ export default function useScrollToTextInput(
 		]
 	);
 
-	return [ scrollToTextInputOffset ];
+	return [ scrollToSection ];
 }

package/src/mobile/keyboard-aware-flat-list/use-scroll.native.js

@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+
+import { useWindowDimensions } from 'react-native';
+import {
+	useAnimatedScrollHandler,
+	useSharedValue,
+} from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useKeyboardOffset from './use-keyboard-offset';
+import useScrollToSection from './use-scroll-to-section';
+import useScrollToElement from './use-scroll-to-element';
+
+export default function useScroll( {
+	scrollEnabled,
+	shouldPreventAutomaticScroll,
+	onScroll,
+	onSizeChange,
+	extraScrollHeight,
+} ) {
+	const scrollViewRef = useRef();
+	const scrollViewMeasurements = useRef();
+	const scrollViewYOffset = useSharedValue( -1 );
+	const lastScrollTo = useRef( {
+		clientId: null,
+	} );
+
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+	const isLandscape = windowWidth >= windowHeight;
+
+	const [ keyboardOffset ] = useKeyboardOffset(
+		scrollEnabled,
+		shouldPreventAutomaticScroll
+	);
+
+	const scrollHandler = useAnimatedScrollHandler( {
+		onScroll: ( event ) => {
+			const { contentOffset } = event;
+			scrollViewYOffset.value = contentOffset.y;
+			onScroll( event );
+		},
+	} );
+
+	// When the orientation changes, the ScrollView measurements
+	// need to be re-calculated.
+	useEffect( () => {
+		scrollViewMeasurements.current = null;
+	}, [ isLandscape ] );
+
+	const [ scrollToSection ] = useScrollToSection(
+		extraScrollHeight,
+		keyboardOffset,
+		scrollEnabled,
+		scrollViewMeasurements,
+		scrollViewRef,
+		scrollViewYOffset
+	);
+	const [ scrollToElement ] = useScrollToElement(
+		scrollViewRef,
+		scrollToSection
+	);
+
+	const measureScrollView = useCallback( () => {
+		if ( scrollViewRef.current ) {
+			scrollViewRef.current.measureInWindow( ( _x, y, width, height ) => {
+				scrollViewMeasurements.current = { y, width, height };
+			} );
+		}
+	}, [ scrollViewRef ] );
+
+	const onContentSizeChange = useCallback( () => {
+		if ( onSizeChange ) {
+			onSizeChange();
+		}
+
+		// Sets the first values when the content size changes.
+		if ( ! scrollViewMeasurements.current ) {
+			measureScrollView();
+		}
+	}, [ measureScrollView, onSizeChange ] );
+
+	return {
+		scrollViewRef,
+		scrollHandler,
+		keyboardOffset,
+		scrollToSection,
+		scrollToElement,
+		onContentSizeChange,
+		lastScrollTo,
+	};
+}

package/src/mobile/link-settings/style.native.scss

@@ -2,20 +2,3 @@
 	padding-left: 0;
 	padding-right: 0;
 }
-
-// used in both light and dark modes
-.placeholderTextColor {
-	color: #87a6bc;
-}
-
-.optionIcon {
-	color: $blue-50;
-}
-
-.optionIconDark {
-	color: $blue-30;
-}
-
-.unselectedOptionIcon {
-	opacity: 0;
-}

package/src/mobile/utils/get-px-from-css-unit.native.js

@@ -0,0 +1,329 @@
+/**
+ * Converts string to object { value, unit }.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit
+ */
+function parseUnit( cssUnit ) {
+	const match = cssUnit
+		?.trim()
+		.match(
+			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
+		);
+	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
+		return { value: parseFloat( cssUnit ), unit: 'px' };
+	}
+	return match
+		? { value: parseFloat( match[ 1 ] ) || match[ 1 ], unit: match[ 2 ] }
+		: { value: cssUnit, unit: undefined };
+}
+/**
+ * Evaluate a math expression.
+ *
+ * @param {string} expression
+ * @return {number} evaluated expression.
+ */
+function calculate( expression ) {
+	try {
+		return Function( `'use strict'; return (${ expression })` )();
+	} catch ( err ) {
+		return null;
+	}
+}
+
+/**
+ * Calculates the css function value for the supported css functions such as max, min, clamp and calc.
+ *
+ * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.
+ * @param {Object} options
+ * @return {string} unit containing the unit in PX.
+ */
+function getFunctionUnitValue( functionUnitValue, options ) {
+	const functionUnit = functionUnitValue.split( /[(),]/g ).filter( Boolean );
+
+	const units = functionUnit
+		.slice( 1 )
+		.map( ( unit ) => parseUnit( getPxFromCssUnit( unit, options ) ).value )
+		.filter( Boolean );
+
+	switch ( functionUnit[ 0 ] ) {
+		case 'min':
+			return Math.min( ...units ) + 'px';
+		case 'max':
+			return Math.max( ...units ) + 'px';
+		case 'clamp':
+			if ( units.length !== 3 ) {
+				return null;
+			}
+			if ( units[ 1 ] < units[ 0 ] ) {
+				return units[ 0 ] + 'px';
+			}
+			if ( units[ 1 ] > units[ 2 ] ) {
+				return units[ 2 ] + 'px';
+			}
+			return units[ 1 ] + 'px';
+		case 'calc':
+			return units[ 0 ] + 'px';
+	}
+}
+
+/**
+ * Take a css function such as min, max, calc, clamp and returns parsedUnit
+ *
+ * How this works for the nested function is that it first replaces the inner function call.
+ * Then it tackles the outer onces.
+ * So for example: min( max(25px, 35px), 40px )
+ * in the first pass we would replace max(25px, 35px) with 35px.
+ * then we would try to evaluate min( 35px, 40px )
+ * and then finally return 35px.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit object.
+ */
+function parseUnitFunction( cssUnit ) {
+	while ( true ) {
+		const currentCssUnit = cssUnit;
+		const regExp = /(max|min|calc|clamp)\(([^()]*)\)/g;
+		const matches = regExp.exec( cssUnit ) || [];
+		if ( matches[ 0 ] ) {
+			const functionUnitValue = getFunctionUnitValue( matches[ 0 ] );
+			cssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );
+		}
+
+		// If the unit hasn't been modified or we have a single value break free.
+		if ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {
+			break;
+		}
+	}
+
+	return parseUnit( cssUnit );
+}
+/**
+ * Return true if we think this is a math expression.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {boolean} Whether the cssUnit is a math expression.
+ */
+function isMathExpression( cssUnit ) {
+	for ( let i = 0; i < cssUnit.length; i++ ) {
+		if ( [ '+', '-', '/', '*' ].includes( cssUnit[ i ] ) ) {
+			return true;
+		}
+	}
+	return false;
+}
+/**
+ * Evaluates the math expression and return a px value.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {string} return a converfted value to px.
+ */
+function evalMathExpression( cssUnit ) {
+	let errorFound = false;
+	// Convert every part of the expression to px values.
+	// The following regex matches numbers that have a following unit
+	// E.g. 5.25rem, 1vw
+	const cssUnitsBits = cssUnit.match( /\d+\.?\d*[a-zA-Z]+|\.\d+[a-zA-Z]+/g );
+	if ( cssUnitsBits ) {
+		for ( const unit of cssUnitsBits ) {
+			// Standardize the unit to px and extract the value.
+			const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );
+			if ( ! parseFloat( parsedUnit.value ) ) {
+				errorFound = true;
+				// End early since we are dealing with a null value.
+				break;
+			}
+			cssUnit = cssUnit.replace( unit, parsedUnit.value );
+		}
+	} else {
+		errorFound = true;
+	}
+
+	// For mixed math expressions wrapped within CSS expressions
+	const expressionsMatches = cssUnit.match( /(max|min|clamp)/g );
+	if ( ! errorFound && expressionsMatches ) {
+		const values = cssUnit.split( ',' );
+		for ( const currentValue of values ) {
+			// Check for nested calc() and remove them to calculate the value.
+			const rawCurrentValue = currentValue.replace( /\s|calc/g, '' );
+
+			if ( isMathExpression( rawCurrentValue ) ) {
+				const calculatedExpression = calculate( rawCurrentValue );
+
+				if ( calculatedExpression ) {
+					const calculatedValue =
+						calculatedExpression.toFixed( 0 ) + 'px';
+					cssUnit = cssUnit.replace( currentValue, calculatedValue );
+				}
+			}
+		}
+		const parsedValue = parseUnitFunction( cssUnit );
+		return ! parsedValue ? null : parsedValue.value + parsedValue.unit;
+	}
+
+	if ( errorFound ) {
+		return null;
+	}
+
+	const calculatedResult = calculate( cssUnit );
+	return calculatedResult ? calculatedResult.toFixed( 0 ) + 'px' : null;
+}
+
+/**
+ * Convert a parsedUnit object to px value.
+ *
+ * @param {Object} parsedUnit
+ * @param {Object} options
+ * @return {string} or {null} returns the converted with in a px value format.
+ */
+function convertParsedUnitToPx( parsedUnit, options ) {
+	const PIXELS_PER_INCH = 96;
+	const ONE_PERCENT = 0.01;
+
+	const defaultProperties = {
+		fontSize: 16,
+		lineHeight: 16,
+		width: 375,
+		height: 812,
+		type: 'font',
+	};
+
+	const setOptions = Object.assign( {}, defaultProperties, options );
+
+	const relativeUnits = {
+		em: setOptions.fontSize,
+		rem: setOptions.fontSize,
+		vh: setOptions.height * ONE_PERCENT,
+		vw: setOptions.width * ONE_PERCENT,
+		vmin:
+			( setOptions.width < setOptions.height
+				? setOptions.width
+				: setOptions.height ) * ONE_PERCENT,
+		vmax:
+			( setOptions.width > setOptions.height
+				? setOptions.width
+				: setOptions.height ) * ONE_PERCENT,
+		'%':
+			( setOptions.type === 'font'
+				? setOptions.fontSize
+				: setOptions.width ) * ONE_PERCENT,
+		ch: 8, // The advance measure (width) of the glyph "0" of the element's font. Approximate
+		ex: 7.15625, // X-height of the element's font. Approximate.
+		lh: setOptions.lineHeight,
+	};
+	relativeUnits.svw = relativeUnits.vmin;
+	relativeUnits.lvw = relativeUnits.vmax;
+	relativeUnits.dvw = relativeUnits.vw;
+	relativeUnits.svh = relativeUnits.vmin;
+	relativeUnits.lvh = relativeUnits.vmax;
+	relativeUnits.dvh = relativeUnits.vh;
+	relativeUnits.vi = relativeUnits.vh;
+	relativeUnits.svi = relativeUnits.vmin;
+	relativeUnits.lvi = relativeUnits.vmax;
+	relativeUnits.dvi = relativeUnits.vw;
+	relativeUnits.vb = relativeUnits.vh;
+	relativeUnits.svb = relativeUnits.vmin;
+	relativeUnits.lvb = relativeUnits.vmax;
+	relativeUnits.dvb = relativeUnits.vh;
+	relativeUnits.svmin = relativeUnits.vmin;
+	relativeUnits.lvmin = relativeUnits.vmin;
+	relativeUnits.dvmin = relativeUnits.vmin;
+	relativeUnits.svmax = relativeUnits.vmax;
+	relativeUnits.lvmax = relativeUnits.vmax;
+	relativeUnits.dvmax = relativeUnits.vmax;
+
+	const absoluteUnits = {
+		in: PIXELS_PER_INCH,
+		cm: PIXELS_PER_INCH / 2.54,
+		mm: PIXELS_PER_INCH / 25.4,
+		pt: PIXELS_PER_INCH / 72,
+		pc: PIXELS_PER_INCH / 6,
+		px: 1,
+		Q: PIXELS_PER_INCH / 2.54 / 40,
+	};
+
+	if ( relativeUnits[ parsedUnit.unit ] ) {
+		return (
+			( relativeUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
+				0
+			) + 'px'
+		);
+	}
+
+	if ( absoluteUnits[ parsedUnit.unit ] ) {
+		return (
+			( absoluteUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
+				0
+			) + 'px'
+		);
+	}
+
+	return null;
+}
+
+/**
+ * Returns the px value of a cssUnit.
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+export function getPxFromCssUnit( cssUnit, options = {} ) {
+	if ( Number.isFinite( cssUnit ) ) {
+		return cssUnit.toFixed( 0 ) + 'px';
+	}
+	if ( cssUnit === undefined ) {
+		return null;
+	}
+	let parsedUnit = parseUnit( cssUnit );
+
+	if ( ! parsedUnit.unit ) {
+		parsedUnit = parseUnitFunction( cssUnit );
+	}
+
+	if ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {
+		return evalMathExpression( cssUnit );
+	}
+
+	return convertParsedUnitToPx( parsedUnit, options );
+}
+
+// Use simple cache.
+const cache = {};
+/**
+ * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+function memoizedGetPxFromCssUnit( cssUnit, options = {} ) {
+	const hash = cssUnit + hashOptions( options );
+
+	if ( ! cache[ hash ] ) {
+		cache[ hash ] = getPxFromCssUnit( cssUnit, options );
+	}
+	return cache[ hash ];
+}
+
+function hashOptions( options ) {
+	let hash = '';
+	if ( options.hasOwnProperty( 'fontSize' ) ) {
+		hash = ':' + options.width;
+	}
+	if ( options.hasOwnProperty( 'lineHeight' ) ) {
+		hash = ':' + options.lineHeight;
+	}
+	if ( options.hasOwnProperty( 'width' ) ) {
+		hash = ':' + options.width;
+	}
+	if ( options.hasOwnProperty( 'height' ) ) {
+		hash = ':' + options.height;
+	}
+	if ( options.hasOwnProperty( 'type' ) ) {
+		hash = ':' + options.type;
+	}
+	return hash;
+}
+
+export default memoizedGetPxFromCssUnit;