@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.0

package/src/number-control/index.js

@@ -1,192 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Input } from './styles/number-control-styles';
-import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { add, subtract, roundClamp } from '../utils/math';
-import { isValueEmpty } from '../utils/values';
-
-export function NumberControl(
-	{
-		__unstableStateReducer: stateReducerProp,
-		className,
-		dragDirection = 'n',
-		hideHTMLArrows = false,
-		isDragEnabled = true,
-		isShiftStepEnabled = true,
-		label,
-		max = Infinity,
-		min = -Infinity,
-		required = false,
-		shiftStep = 10,
-		step = 1,
-		type: typeProp = 'number',
-		value: valueProp,
-		...props
-	},
-	ref
-) {
-	const isStepAny = step === 'any';
-	const baseStep = isStepAny ? 1 : parseFloat( step );
-	const baseValue = roundClamp( 0, min, max, baseStep );
-	const constrainValue = ( value, stepOverride ) => {
-		// When step is "any" clamp the value, otherwise round and clamp it.
-		return isStepAny
-			? Math.min( max, Math.max( min, value ) )
-			: roundClamp( value, min, max, stepOverride ?? baseStep );
-	};
-
-	const autoComplete = typeProp === 'number' ? 'off' : null;
-	const classes = classNames( 'components-number-control', className );
-
-	/**
-	 * "Middleware" function that intercepts updates from InputControl.
-	 * This allows us to tap into actions to transform the (next) state for
-	 * InputControl.
-	 *
-	 * @param {Object} state  State from InputControl
-	 * @param {Object} action Action triggering state change
-	 * @return {Object} The updated state to apply to InputControl
-	 */
-	const numberControlStateReducer = ( state, action ) => {
-		const nextState = { ...state };
-
-		const { type, payload } = action;
-		const event = payload?.event;
-		const currentValue = nextState.value;
-
-		/**
-		 * Handles custom UP and DOWN Keyboard events
-		 */
-		if (
-			type === inputControlActionTypes.PRESS_UP ||
-			type === inputControlActionTypes.PRESS_DOWN
-		) {
-			const enableShift = event.shiftKey && isShiftStepEnabled;
-
-			const incrementalValue = enableShift
-				? parseFloat( shiftStep ) * baseStep
-				: baseStep;
-			let nextValue = isValueEmpty( currentValue )
-				? baseValue
-				: currentValue;
-
-			if ( event?.preventDefault ) {
-				event.preventDefault();
-			}
-
-			if ( type === inputControlActionTypes.PRESS_UP ) {
-				nextValue = add( nextValue, incrementalValue );
-			}
-
-			if ( type === inputControlActionTypes.PRESS_DOWN ) {
-				nextValue = subtract( nextValue, incrementalValue );
-			}
-
-			nextState.value = constrainValue(
-				nextValue,
-				enableShift ? incrementalValue : null
-			);
-		}
-
-		/**
-		 * Handles drag to update events
-		 */
-		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-			const [ x, y ] = payload.delta;
-			const enableShift = payload.shiftKey && isShiftStepEnabled;
-			const modifier = enableShift
-				? parseFloat( shiftStep ) * baseStep
-				: baseStep;
-
-			let directionModifier;
-			let delta;
-
-			switch ( dragDirection ) {
-				case 'n':
-					delta = y;
-					directionModifier = -1;
-					break;
-
-				case 'e':
-					delta = x;
-					directionModifier = isRTL() ? -1 : 1;
-					break;
-
-				case 's':
-					delta = y;
-					directionModifier = 1;
-					break;
-
-				case 'w':
-					delta = x;
-					directionModifier = isRTL() ? 1 : -1;
-					break;
-			}
-
-			if ( delta !== 0 ) {
-				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
-				const distance = delta * modifier * directionModifier;
-
-				nextState.value = constrainValue(
-					add( currentValue, distance ),
-					enableShift ? modifier : null
-				);
-			}
-		}
-
-		/**
-		 * Handles commit (ENTER key press or blur)
-		 */
-		if (
-			type === inputControlActionTypes.PRESS_ENTER ||
-			type === inputControlActionTypes.COMMIT
-		) {
-			const applyEmptyValue = required === false && currentValue === '';
-
-			nextState.value = applyEmptyValue
-				? currentValue
-				: constrainValue( currentValue );
-		}
-
-		return nextState;
-	};
-
-	return (
-		<Input
-			autoComplete={ autoComplete }
-			inputMode="numeric"
-			{ ...props }
-			className={ classes }
-			dragDirection={ dragDirection }
-			hideHTMLArrows={ hideHTMLArrows }
-			isDragEnabled={ isDragEnabled }
-			label={ label }
-			max={ max }
-			min={ min }
-			ref={ ref }
-			required={ required }
-			step={ step }
-			type={ typeProp }
-			value={ valueProp }
-			__unstableStateReducer={ ( state, action ) => {
-				const baseState = numberControlStateReducer( state, action );
-				return stateReducerProp?.( baseState, action ) ?? baseState;
-			} }
-		/>
-	);
-}
-
-export default forwardRef( NumberControl );

package/src/popover/utils.js

@@ -1,107 +0,0 @@
-/**
- * @typedef {import('../animate').AppearOrigin} AppearOrigin
- * @typedef {import('@floating-ui/react-dom').Placement} FloatingUIPlacement
- * @typedef {	'top left' | 'top center' | 'top right' | 'middle left' | 'middle center' | 'middle right' | 'bottom left' | 'bottom center' | 'bottom right' | 'bottom left' | 'bottom center' | 'bottom right' } LegacyPosition
- */
-
-/**
- * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
- * (used by `floating-ui`).
- *
- * @param {LegacyPosition} position The legacy position
- * @return {FloatingUIPlacement} The corresponding placement
- */
-export const positionToPlacement = ( position ) => {
-	const [ x, y, z ] = position.split( ' ' );
-
-	if ( [ 'top', 'bottom' ].includes( x ) ) {
-		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'right' ) {
-			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
-			suffix = '-end';
-		}
-
-		// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
-		return x + suffix;
-	}
-
-	// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
-	return y;
-};
-
-/**
- * @typedef AnimationOrigin
- * @type {Object}
- * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is "start", 0.5 is "center", and 1 is "end")
- * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)
- */
-
-/** @type {Object.<FloatingUIPlacement, {originX: number, originY: number}>} */
-const PLACEMENT_TO_ANIMATION_ORIGIN = {
-	top: { originX: 0.5, originY: 1 }, // open from bottom, center
-	'top-start': { originX: 0, originY: 1 }, // open from bottom, left
-	'top-end': { originX: 1, originY: 1 }, // open from bottom, right
-	right: { originX: 0, originY: 0.5 }, // open from middle, left
-	'right-start': { originX: 0, originY: 0 }, // open from top, left
-	'right-end': { originX: 0, originY: 1 }, // open from bottom, left
-	bottom: { originX: 0.5, originY: 0 }, // open from top, center
-	'bottom-start': { originX: 0, originY: 0 }, // open from top, left
-	'bottom-end': { originX: 1, originY: 0 }, // open from top, right
-	left: { originX: 1, originY: 0.5 }, // open from middle, right
-	'left-start': { originX: 1, originY: 0 }, // open from top, right
-	'left-end': { originX: 1, originY: 1 }, // open from bottom, right
-};
-
-/**
- * Given the floating-ui `placement`, compute the framer-motion props for the
- * popover's entry animation.
- *
- * @param {FloatingUIPlacement} placement A placement string from floating ui
- * @return {import('framer-motion').MotionProps} The object containing the motion props
- */
-export const placementToMotionAnimationProps = ( placement ) => {
-	const translateProp =
-		placement.startsWith( 'top' ) || placement.startsWith( 'bottom' )
-			? 'translateY'
-			: 'translateX';
-	const translateDirection =
-		placement.startsWith( 'top' ) || placement.startsWith( 'left' )
-			? 1
-			: -1;
-
-	return {
-		style: PLACEMENT_TO_ANIMATION_ORIGIN[ placement ],
-		initial: {
-			opacity: 0,
-			scale: 0,
-			[ translateProp ]: `${ 2 * translateDirection }em`,
-		},
-		animate: { opacity: 1, scale: 1, [ translateProp ]: 0 },
-		transition: { duration: 0.1, ease: [ 0, 0, 0.2, 1 ] },
-	};
-};
-
-/**
- * @typedef FrameOffset
- * @type {Object}
- * @property {number} x A numerical value representing the horizontal offset of the frame.
- * @property {number} y A numerical value representing the vertical offset of the frame.
- */
-
-/**
- * Returns the offset of a document's frame element.
- *
- * @param {Document} document A document. This will usually be the document within an iframe.
- *
- * @return {FrameOffset|undefined} The offset of the document's frame element,
- *                                 or undefined if the document has no frame element.
- */
-export const getFrameOffset = ( document ) => {
-	const frameElement = document?.defaultView?.frameElement;
-	if ( ! frameElement ) {
-		return;
-	}
-	const iframeRect = frameElement.getBoundingClientRect();
-	return { x: iframeRect.left, y: iframeRect.top };
-};

package/src/search-control/stories/index.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SearchControl from '../';
-
-export default {
-	title: 'Components/SearchControl',
-	component: SearchControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const [ value, setValue ] = useState();
-	const label = text( 'Label', 'Label Text' );
-	const hideLabelFromVision = boolean( 'Hide Label From Vision', true );
-	const help = text( 'Help Text', 'Help text to explain the input.' );
-
-	return (
-		<SearchControl
-			label={ label }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			value={ value }
-			onChange={ setValue }
-		/>
-	);
-};

package/src/tab-panel/stories/index.js

@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import TabPanel from '../';
-
-export default {
-	title: 'Components/TabPanel',
-	component: TabPanel,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	return (
-		<TabPanel
-			className="my-tab-panel"
-			tabs={ [
-				{
-					name: 'tab1',
-					title: text( 'Tab 1 title', 'Tab 1' ),
-					className: 'tab-one',
-				},
-				{
-					name: 'tab2',
-					title: text( 'Tab 2 title', 'Tab 2' ),
-					className: 'tab-two',
-				},
-			] }
-		>
-			{ ( tab ) => <p>Selected tab: { tab.title }</p> }
-		</TabPanel>
-	);
-};

package/src/tab-panel/test/index.js

@@ -1,179 +0,0 @@
-/**
- * External dependencies
- */
-import TestUtils from 'react-dom/test-utils';
-
-/**
- * Internal dependencies
- */
-import TabPanel from '../';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-describe( 'TabPanel', () => {
-	const getElementByClass = ( wrapper, className ) => {
-		return TestUtils.findRenderedDOMComponentWithClass(
-			wrapper,
-			className
-		);
-	};
-
-	const getElementsByClass = ( wrapper, className ) => {
-		return TestUtils.scryRenderedDOMComponentsWithClass(
-			wrapper,
-			className
-		);
-	};
-
-	const elementClick = ( element ) => {
-		TestUtils.Simulate.click( element );
-	};
-
-	// This is needed because TestUtils does not accept a stateless component.
-	// anything run through a HOC ends up as a stateless component.
-	const getTestComponent = ( WrappedComponent, props ) => {
-		class TestComponent extends Component {
-			render() {
-				return <WrappedComponent { ...props } />;
-			}
-		}
-		return <TestComponent />;
-	};
-
-	describe( 'basic rendering', () => {
-		it( 'should render a tabpanel, and clicking should change tabs', () => {
-			const props = {
-				className: 'test-panel',
-				activeClass: 'active-tab',
-				tabs: [
-					{
-						name: 'alpha',
-						title: 'Alpha',
-						className: 'alpha',
-					},
-					{
-						name: 'beta',
-						title: 'Beta',
-						className: 'beta',
-					},
-					{
-						name: 'gamma',
-						title: 'Gamma',
-						className: 'gamma',
-					},
-				],
-				children: ( tab ) => {
-					return (
-						<p tabIndex="0" className={ tab.name + '-view' }>
-							{ tab.name }
-						</p>
-					);
-				},
-			};
-
-			let wrapper;
-			TestUtils.act( () => {
-				wrapper = TestUtils.renderIntoDocument(
-					getTestComponent( TabPanel, props )
-				);
-			} );
-
-			const alphaTab = getElementByClass( wrapper, 'alpha' );
-			const betaTab = getElementByClass( wrapper, 'beta' );
-			const gammaTab = getElementByClass( wrapper, 'gamma' );
-
-			const getAlphaViews = () =>
-				getElementsByClass( wrapper, 'alpha-view' );
-			const getBetaViews = () =>
-				getElementsByClass( wrapper, 'beta-view' );
-			const getGammaViews = () =>
-				getElementsByClass( wrapper, 'gamma-view' );
-
-			const getActiveTab = () =>
-				getElementByClass( wrapper, 'active-tab' );
-			const getActiveView = () =>
-				getElementByClass(
-					wrapper,
-					'components-tab-panel__tab-content'
-				).firstChild.textContent;
-
-			expect( getActiveTab().innerHTML ).toBe( 'Alpha' );
-			expect( getAlphaViews() ).toHaveLength( 1 );
-			expect( getBetaViews() ).toHaveLength( 0 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'alpha' );
-
-			elementClick( betaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Beta' );
-			expect( getAlphaViews() ).toHaveLength( 0 );
-			expect( getBetaViews() ).toHaveLength( 1 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'beta' );
-
-			elementClick( betaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Beta' );
-			expect( getAlphaViews() ).toHaveLength( 0 );
-			expect( getBetaViews() ).toHaveLength( 1 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'beta' );
-
-			elementClick( gammaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Gamma' );
-			expect( getAlphaViews() ).toHaveLength( 0 );
-			expect( getBetaViews() ).toHaveLength( 0 );
-			expect( getGammaViews() ).toHaveLength( 1 );
-			expect( getActiveView() ).toBe( 'gamma' );
-
-			elementClick( alphaTab );
-
-			expect( getActiveTab().innerHTML ).toBe( 'Alpha' );
-			expect( getAlphaViews() ).toHaveLength( 1 );
-			expect( getBetaViews() ).toHaveLength( 0 );
-			expect( getGammaViews() ).toHaveLength( 0 );
-			expect( getActiveView() ).toBe( 'alpha' );
-		} );
-	} );
-
-	it( 'should render with a tab initially selected by prop initialTabIndex', () => {
-		const props = {
-			className: 'test-panel',
-			activeClass: 'active-tab',
-			initialTabName: 'beta',
-			tabs: [
-				{
-					name: 'alpha',
-					title: 'Alpha',
-					className: 'alpha',
-				},
-				{
-					name: 'beta',
-					title: 'Beta',
-					className: 'beta',
-				},
-			],
-			children: ( tab ) => {
-				return (
-					<p tabIndex="0" className={ tab.name + '-view' }>
-						{ tab.name }
-					</p>
-				);
-			},
-		};
-
-		let wrapper;
-		TestUtils.act( () => {
-			wrapper = TestUtils.renderIntoDocument(
-				getTestComponent( TabPanel, props )
-			);
-		} );
-
-		const getActiveTab = () => getElementByClass( wrapper, 'active-tab' );
-		expect( getActiveTab().innerHTML ).toBe( 'Beta' );
-	} );
-} );

package/src/toggle-control/index.js

@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import FormToggle from '../form-toggle';
-import BaseControl from '../base-control';
-
-export default function ToggleControl( {
-	label,
-	checked,
-	help,
-	className,
-	onChange,
-	disabled,
-} ) {
-	function onChangeToggle( event ) {
-		onChange( event.target.checked );
-	}
-	const instanceId = useInstanceId( ToggleControl );
-	const id = `inspector-toggle-control-${ instanceId }`;
-
-	let describedBy, helpLabel;
-	if ( help ) {
-		describedBy = id + '__help';
-		helpLabel = typeof help === 'function' ? help( checked ) : help;
-	}
-
-	return (
-		<BaseControl
-			id={ id }
-			help={ helpLabel }
-			className={ classnames( 'components-toggle-control', className ) }
-		>
-			<FormToggle
-				id={ id }
-				checked={ checked }
-				onChange={ onChangeToggle }
-				aria-describedby={ describedBy }
-				disabled={ disabled }
-			/>
-			<label htmlFor={ id } className="components-toggle-control__label">
-				{ label }
-			</label>
-		</BaseControl>
-	);
-}

package/src/toggle-control/stories/index.js

@@ -1,64 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ToggleControl from '../';
-
-export default {
-	title: 'Components/ToggleControl',
-	component: ToggleControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const ToggleControlWithState = ( {
-	helpTextChecked,
-	helpTextUnchecked,
-	...props
-} ) => {
-	const [ hasFixedBackground, setHasFixedBackground ] = useState( true );
-	return (
-		<ToggleControl
-			{ ...props }
-			help={ hasFixedBackground ? helpTextChecked : helpTextUnchecked }
-			checked={ hasFixedBackground }
-			onChange={ setHasFixedBackground }
-		/>
-	);
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'Does this have a fixed background?' );
-
-	return <ToggleControlWithState label={ label } />;
-};
-
-export const withHelpText = () => {
-	const label = text( 'Label', 'Does this have a fixed background?' );
-	const helpTextChecked = text(
-		'Help When Checked',
-		'Has fixed background.'
-	);
-	const helpTextUnchecked = text(
-		'Help When Unchecked',
-		'No fixed background.'
-	);
-
-	return (
-		<ToggleControlWithState
-			label={ label }
-			helpTextChecked={ helpTextChecked }
-			helpTextUnchecked={ helpTextUnchecked }
-		/>
-	);
-};

package/src/toggle-control/style.scss

@@ -1,14 +0,0 @@
-.components-toggle-control .components-base-control__field {
-	display: flex;
-	margin-bottom: $grid-unit-05 * 3;
-	line-height: initial;
-	align-items: center;
-
-	.components-form-toggle {
-		margin-right: $grid-unit-15;
-	}
-
-	.components-toggle-control__label {
-		display: block;
-	}
-}