@wordpress/components 34.0.0 → 35.0.1

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

@@ -1,329 +0,0 @@
-/**
- * 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 {
-		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 ones.
- * 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 evaluated.
- * @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 evaluated.
- * @return {string} return a converted 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;

package/src/mobile/utils/index.native.js

@@ -1,12 +0,0 @@
-export function removeNonDigit( text, decimalNum ) {
-	const regex = decimalNum > 0 ? /^(\d+\.?\,?(\d+)?)/ : /([\d]+)/;
-	const result = text.match( regex );
-	return result ? result[ 0 ] : '';
-}
-
-export function toFixed( num, decimalNum = 0 ) {
-	const decimalOffset = decimalNum < 0 ? 0 : decimalNum;
-	return Number.parseFloat(
-		Number.parseFloat( num ).toFixed( decimalOffset )
-	);
-}

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

@@ -1,172 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	default as memoizedGetPxFromCssUnit,
-	getPxFromCssUnit,
-} from '../get-px-from-css-unit';
-
-describe( 'getPxFromCssUnit', () => {
-	// Absolute units.
-	describe( 'absolute unites should return px values', () => {
-		const testData = [
-			[ '25px', '25px' ],
-			[ '25.5', '26px' ],
-			[ '1cm', '38px' ],
-			[ '10mm', '38px' ],
-			[ '1in', '96px' ],
-			[ '12pt', '16px' ],
-			[ '1pc', '16px' ],
-			[ '40Q', '38px' ], // 40 Q should be 1 cm.
-		];
-
-		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
-			expect( getPxFromCssUnit( unit ) ).toBe( expected );
-		} );
-		test.each( testData )(
-			'memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
-			}
-		);
-		test.each( testData )(
-			'cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
-			}
-		);
-	} );
-
-	describe( 'relative unites should return px values', () => {
-		const settings = {
-			fontSize: 10,
-			width: 100,
-			height: 200,
-			lineHeight: 2,
-			type: 'font',
-		};
-
-		const testData = [
-			[ '2em', '20px' ],
-			[ '2rem', '20px' ],
-			[ '1.125rem', '11px' ],
-			[ '20vw', '20px' ],
-			[ '20vh', '40px' ],
-			[ '20vmin', '20px' ],
-			[ '20vmax', '40px' ],
-			[ '20lh', '40px' ],
-			[ '120%', '12px' ],
-		];
-
-		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
-			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
-		} );
-		test.each( testData )(
-			'memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-		test.each( testData )(
-			'cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-	} );
-
-	// Function units.
-
-	describe( 'function unites should return px values', () => {
-		const settings = {
-			fontSize: 10,
-			width: 100,
-			height: 200,
-			lineHeight: 2,
-			type: 'font',
-		};
-
-		const testData = [
-			[ 'min(20px, 25px)', '20px' ],
-			[ 'min(20px, 9px, 12pt, 25px)', '9px' ],
-			[ 'max(20px, 25px)', '25px' ],
-			[ 'clamp(10px, 9px, 25px)', '10px' ],
-			[ 'clamp(10px, 35px, 25px)', '25px' ],
-			[ 'clamp(10px, 15px, 25px)', '15px' ],
-			[ 'min(max(20px,25px), 35px)', '25px' ],
-			[ 'max(min(20px,25px), 35px)', '35px' ],
-			[ '10px + 25px', '35px' ],
-			[ 'calc(10px + 25px)', '35px' ],
-			[ 'calc( 2 * 20px)', '40px' ],
-			[ 'calc(25px - 10px)', '15px' ],
-			[ 'min(10px + 25px, 55pt)', '35px' ],
-			[ 'calc(12vw * 10px)', '450px' ],
-			[ 'calc(45vw / 10px)', '17px' ],
-			[ '', null ],
-			[ undefined, null ],
-			[ 123, '123px' ],
-			[ 123.456, '123px' ],
-			[ 'abc', null ],
-			[ 'console.log("howdy"); + 10px', null ],
-			[ 'calc(12vw * 10px', null ], // Missing closing bracket.
-			[ 'calc( 1em + 0.875rem )', '30px' ], // Decimals
-			[
-				'clamp(1.8rem, 1.8rem + ((1vw / 0.48rem + 1rem) * 2.885), 3rem)',
-				'48px',
-			],
-			[
-				'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
-				'80px',
-			],
-			[
-				'clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)',
-				'42px',
-			],
-			[ 'var:preset|font-size|medium', null ],
-		];
-
-		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
-			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
-		} );
-		test.each( testData )(
-			'memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-		test.each( testData )(
-			'cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-	} );
-	// Skip this test it might be useful in dev.
-	it.skip( 'test performance of memoizedGetPxFromCssUnit function', () => {
-		const start = Date.now();
-		let i = 0;
-		const intervals = 1000;
-		while ( i < intervals ) {
-			getPxFromCssUnit( 'max(25px, 35px)', { width: 200 } );
-			i++;
-		}
-		const rawDuration = Date.now() - start;
-
-		const startM = Date.now();
-		i = 0;
-		// The memoized Version should be at 10X better then the non default one.
-		while ( i < intervals * 10 ) {
-			memoizedGetPxFromCssUnit( 'max(25px, 35px)', { width: 201 } );
-			i++;
-		}
-		expect( rawDuration > Date.now() - startM ).toBe( true );
-	} );
-} );

package/src/mobile/utils/test/index.native.js

@@ -1,134 +0,0 @@
-/**
- * Internal dependencies
- */
-import { removeNonDigit, toFixed } from '../';
-import { alignmentHelpers } from '../alignments.native.js';
-
-/**
- * WordPress dependencies
- */
-import {
-	getBlockTypes,
-	registerBlockType,
-	unregisterBlockType,
-} from '@wordpress/blocks';
-
-const { isContainerRelated } = alignmentHelpers;
-
-describe( 'removeNonDigit', () => {
-	it( 'function returns empty string if passed text does not contain digit characters', () => {
-		const result = removeNonDigit( 'test' );
-		expect( result ).toBe( '' );
-	} );
-
-	it( 'function removes non digit characters from passed text', () => {
-		const result = removeNonDigit( 'test123' );
-		expect( result ).toBe( '123' );
-	} );
-
-	it( 'function accepts dot character', () => {
-		const result = removeNonDigit( '12.34', 2 );
-		expect( result ).toBe( '12.34' );
-	} );
-
-	it( 'function accepts comma character', () => {
-		const result = removeNonDigit( '12,34', 2 );
-		expect( result ).toBe( '12,34' );
-	} );
-} );
-
-describe( 'toFixed', () => {
-	it( 'function returns the passed number if `decimalNum` is not specified', () => {
-		const result = toFixed( '123' );
-		expect( result ).toBe( 123 );
-	} );
-
-	it( 'function returns the number without decimals if `decimalNum` is not specified', () => {
-		const result = toFixed( '123.4567' );
-		expect( result ).toBe( 123 );
-	} );
-
-	it( 'function returns the number applying `decimalNum`', () => {
-		const result = toFixed( '123.4567', 2 );
-		expect( result ).toBe( 123.46 );
-	} );
-
-	it( 'function returns the number applying `decimalNum` all point numbers', () => {
-		const toCheck = [
-			1.01, 1.02, 1.03, 1.04, 1.05, 1.06, 1.07, 1.08, 1.09, 1.1,
-		];
-		toCheck.forEach( ( num ) => {
-			const result = toFixed( num, 2 );
-			expect( result ).toBe( num );
-		} );
-	} );
-
-	it( 'function returns number without decimals if `decimalNum` is negative', () => {
-		const result = toFixed( '12.34', -12 );
-		expect( result ).toBe( 12 );
-	} );
-} );
-
-describe( 'isContainerRelated', () => {
-	const currentlySupportedBlocks = [
-		'core/group',
-		'core/columns',
-		'core/column',
-		'core/buttons',
-		'core/button',
-	];
-
-	beforeAll( () => {
-		const registerCoreBlocks =
-			require( '@wordpress/block-library' ).registerCoreBlocks;
-		registerCoreBlocks();
-	} );
-
-	afterAll( () => {
-		getBlockTypes().forEach( ( blockname ) => {
-			unregisterBlockType( blockname.name );
-		} );
-	} );
-
-	it( 'function returns True for currently supported block types', () => {
-		currentlySupportedBlocks.forEach( ( blockName ) => {
-			const result = isContainerRelated( blockName );
-			expect( result ).toBe( true );
-		} );
-	} );
-
-	it( 'function returns false for currently NOT supported Blocks types', () => {
-		getBlockTypes().forEach( ( blockType ) => {
-			if ( currentlySupportedBlocks.includes( blockType.name ) ) {
-				return;
-			}
-			const result = isContainerRelated( blockType.name );
-			expect( result ).toBe( false );
-		} );
-	} );
-
-	it( 'function return true from no core blocks if they meet the criteria', () => {
-		registerBlockType( 'foo/bar', {
-			title: 'Foo block',
-			attributes: {},
-			supports: {
-				align: [ 'full' ],
-			},
-		} );
-
-		const resultFoo = isContainerRelated( 'foo/bar' );
-		expect( resultFoo ).toBe( true );
-
-		registerBlockType( 'foo/bar-sup', {
-			title: 'bar block',
-			attributes: {},
-			parent: [ 'foo/bar' ],
-		} );
-
-		const resultBar = isContainerRelated( 'foo/bar-sup' );
-		expect( resultBar ).toBe( true );
-
-		unregisterBlockType( 'foo/bar' );
-		unregisterBlockType( 'foo/bar-sup' );
-	} );
-} );

package/src/mobile/utils/use-is-floating-keyboard.native.js

@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { Keyboard, Dimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-
-export default function useIsFloatingKeyboard() {
-	const windowWidth = Dimensions.get( 'window' ).width;
-
-	const [ floating, setFloating ] = useState( false );
-
-	useEffect( () => {
-		const onKeyboardWillChangeFrame = ( event ) => {
-			setFloating( event.endCoordinates.width !== windowWidth );
-		};
-
-		const keyboardChangeSubscription = Keyboard.addListener(
-			'keyboardWillChangeFrame',
-			onKeyboardWillChangeFrame
-		);
-		return () => {
-			keyboardChangeSubscription.remove();
-		};
-	}, [ windowWidth ] );
-
-	return floating;
-}