@wordpress/components 19.9.0 → 19.12.0

package/src/date-time/time.js

@@ -1,310 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { isInteger } from 'lodash';
-import moment from 'moment';
-
-/**
- * WordPress dependencies
- */
-import {
-	createElement,
-	useState,
-	useMemo,
-	useEffect,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import ButtonGroup from '../button-group';
-import TimeZone from './timezone';
-
-/**
- * Module Constants
- */
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
-
-function from12hTo24h( hours, isPm ) {
-	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
-}
-
-/**
- * <UpdateOnBlurAsIntegerField>
- * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
- *
- * @param {Object}        props             Component props.
- * @param {string}        props.as          Render the component as specific element tag, defaults to "input".
- * @param {number|string} props.value       The default value of the component which will be parsed to integer.
- * @param {Function}      props.onUpdate    Call back when blurred and validated.
- * @param {string}        [props.className]
- */
-function UpdateOnBlurAsIntegerField( {
-	as,
-	value,
-	onUpdate,
-	className,
-	...props
-} ) {
-	function handleBlur( event ) {
-		const { target } = event;
-
-		if ( value === target.value ) {
-			return;
-		}
-
-		const parsedValue = parseInt( target.value, 10 );
-
-		// Run basic number validation on the input.
-		if (
-			! isInteger( parsedValue ) ||
-			( typeof props.max !== 'undefined' && parsedValue > props.max ) ||
-			( typeof props.min !== 'undefined' && parsedValue < props.min )
-		) {
-			// If validation failed, reset the value to the previous valid value.
-			target.value = value;
-		} else {
-			// Otherwise, it's valid, call onUpdate.
-			onUpdate( target.name, parsedValue );
-		}
-	}
-
-	return createElement( as || 'input', {
-		// Re-mount the input value to accept the latest value as the defaultValue.
-		key: value,
-		defaultValue: value,
-		onBlur: handleBlur,
-		className: classnames(
-			'components-datetime__time-field-integer-field',
-			className
-		),
-		...props,
-	} );
-}
-
-/**
- * <TimePicker>
- *
- * @typedef {Date|string|number} WPValidDateTimeFormat
- *
- * @param {Object}                props             Component props.
- * @param {boolean}               props.is12Hour    Should the time picker showed in 12 hour format or 24 hour format.
- * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.
- * @param {Function}              props.onChange    Callback function when the date changed.
- */
-export function TimePicker( { is12Hour, currentTime, onChange } ) {
-	const [ date, setDate ] = useState( () =>
-		// Truncate the date at the minutes, see: #15495.
-		moment( currentTime ).startOf( 'minutes' )
-	);
-
-	// Reset the state when currentTime changed.
-	useEffect( () => {
-		setDate(
-			currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
-		);
-	}, [ currentTime ] );
-
-	const { day, month, year, minutes, hours, am } = useMemo(
-		() => ( {
-			day: date.format( 'DD' ),
-			month: date.format( 'MM' ),
-			year: date.format( 'YYYY' ),
-			minutes: date.format( 'mm' ),
-			hours: date.format( is12Hour ? 'hh' : 'HH' ),
-			am: date.format( 'H' ) <= 11 ? 'AM' : 'PM',
-		} ),
-		[ date, is12Hour ]
-	);
-
-	/**
-	 * Function that sets the date state and calls the onChange with a new date.
-	 * The date is truncated at the minutes.
-	 *
-	 * @param {Object} newDate The date object.
-	 */
-	function changeDate( newDate ) {
-		setDate( newDate );
-		onChange( newDate.format( TIMEZONELESS_FORMAT ) );
-	}
-
-	function update( name, value ) {
-		// If the 12-hour format is being used and the 'PM' period is selected, then
-		// the incoming value (which ranges 1-12) should be increased by 12 to match
-		// the expected 24-hour format.
-		let adjustedValue = value;
-		if ( name === 'hours' && is12Hour ) {
-			adjustedValue = from12hTo24h( value, am === 'PM' );
-		}
-
-		// Clone the date and call the specific setter function according to `name`.
-		const newDate = date.clone()[ name ]( adjustedValue );
-		changeDate( newDate );
-	}
-
-	function updateAmPm( value ) {
-		return () => {
-			if ( am === value ) {
-				return;
-			}
-
-			const parsedHours = parseInt( hours, 10 );
-
-			const newDate = date
-				.clone()
-				.hours( from12hTo24h( parsedHours, value === 'PM' ) );
-
-			changeDate( newDate );
-		};
-	}
-
-	const dayFormat = (
-		<div className="components-datetime__time-field components-datetime__time-field-day">
-			<UpdateOnBlurAsIntegerField
-				aria-label={ __( 'Day' ) }
-				className="components-datetime__time-field-day-input"
-				type="number"
-				// The correct function to call in moment.js is "date" not "day".
-				name="date"
-				value={ day }
-				step={ 1 }
-				min={ 1 }
-				max={ 31 }
-				onUpdate={ update }
-			/>
-		</div>
-	);
-
-	const monthFormat = (
-		<div className="components-datetime__time-field components-datetime__time-field-month">
-			<UpdateOnBlurAsIntegerField
-				as="select"
-				aria-label={ __( 'Month' ) }
-				className="components-datetime__time-field-month-select"
-				name="month"
-				value={ month }
-				// The value starts from 0, so we have to -1 when setting month.
-				onUpdate={ ( key, value ) => update( key, value - 1 ) }
-			>
-				<option value="01">{ __( 'January' ) }</option>
-				<option value="02">{ __( 'February' ) }</option>
-				<option value="03">{ __( 'March' ) }</option>
-				<option value="04">{ __( 'April' ) }</option>
-				<option value="05">{ __( 'May' ) }</option>
-				<option value="06">{ __( 'June' ) }</option>
-				<option value="07">{ __( 'July' ) }</option>
-				<option value="08">{ __( 'August' ) }</option>
-				<option value="09">{ __( 'September' ) }</option>
-				<option value="10">{ __( 'October' ) }</option>
-				<option value="11">{ __( 'November' ) }</option>
-				<option value="12">{ __( 'December' ) }</option>
-			</UpdateOnBlurAsIntegerField>
-		</div>
-	);
-
-	const dayMonthFormat = is12Hour ? (
-		<>
-			{ monthFormat }
-			{ dayFormat }
-		</>
-	) : (
-		<>
-			{ dayFormat }
-			{ monthFormat }
-		</>
-	);
-
-	return (
-		<div className={ classnames( 'components-datetime__time' ) }>
-			<fieldset>
-				<legend className="components-datetime__time-legend invisible">
-					{ __( 'Date' ) }
-				</legend>
-				<div className="components-datetime__time-wrapper">
-					{ dayMonthFormat }
-
-					<div className="components-datetime__time-field components-datetime__time-field-year">
-						<UpdateOnBlurAsIntegerField
-							aria-label={ __( 'Year' ) }
-							className="components-datetime__time-field-year-input"
-							type="number"
-							name="year"
-							step={ 1 }
-							min={ 0 }
-							max={ 9999 }
-							value={ year }
-							onUpdate={ update }
-						/>
-					</div>
-				</div>
-			</fieldset>
-
-			<fieldset>
-				<legend className="components-datetime__time-legend invisible">
-					{ __( 'Time' ) }
-				</legend>
-				<div className="components-datetime__time-wrapper">
-					<div className="components-datetime__time-field components-datetime__time-field-time">
-						<UpdateOnBlurAsIntegerField
-							aria-label={ __( 'Hours' ) }
-							className="components-datetime__time-field-hours-input"
-							type="number"
-							name="hours"
-							step={ 1 }
-							min={ is12Hour ? 1 : 0 }
-							max={ is12Hour ? 12 : 23 }
-							value={ hours }
-							onUpdate={ update }
-						/>
-						<span
-							className="components-datetime__time-separator"
-							aria-hidden="true"
-						>
-							:
-						</span>
-						<UpdateOnBlurAsIntegerField
-							aria-label={ __( 'Minutes' ) }
-							className="components-datetime__time-field-minutes-input"
-							type="number"
-							name="minutes"
-							step={ 1 }
-							min={ 0 }
-							max={ 59 }
-							value={ minutes }
-							onUpdate={ update }
-						/>
-					</div>
-					{ is12Hour && (
-						<ButtonGroup className="components-datetime__time-field components-datetime__time-field-am-pm">
-							<Button
-								variant={
-									am === 'AM' ? 'primary' : 'secondary'
-								}
-								onClick={ updateAmPm( 'AM' ) }
-								className="components-datetime__time-am-button"
-							>
-								{ __( 'AM' ) }
-							</Button>
-							<Button
-								variant={
-									am === 'PM' ? 'primary' : 'secondary'
-								}
-								onClick={ updateAmPm( 'PM' ) }
-								className="components-datetime__time-pm-button"
-							>
-								{ __( 'PM' ) }
-							</Button>
-						</ButtonGroup>
-					) }
-
-					<TimeZone />
-				</div>
-			</fieldset>
-		</div>
-	);
-}
-
-export default TimePicker;

package/src/date-time/utils.js

@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import moment from 'moment';
-
-/**
- * Create a Moment object from a date string. With no date supplied, default to a Moment
- * object representing now. If a null value is passed, return a null value.
- *
- * @param {?string} date Date representing the currently selected date or null to signify no selection.
- * @return {?moment.Moment} Moment object for selected date or null.
- */
-export const getMomentDate = ( date ) => {
-	if ( null === date ) {
-		return null;
-	}
-	return date ? moment( date ) : moment();
-};

package/src/flyout/context.js

@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * @type {import('react').Context<import('./types').Context>}
- */
-export const FlyoutContext = createContext( {} );
-export const useFlyoutContext = () => useContext( FlyoutContext );

package/src/flyout/flyout/README.md

@@ -1,98 +0,0 @@
-# Flyout
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`Flyout` is a component to render a floating content modal. It is similar in purpose to a tooltip, but renders content of any sort, not only simple text.
-
-## Usage
-
-```jsx
-import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';
-
-function Example() {
-	return (
-		<Flyout trigger={ <Button>Show/Hide content</Button> }>
-			<Text>Code is Poetry</Text>
-		</Flyout>
-	);
-}
-```
-
-## Props
-
-### `state`: `PopoverStateReturn`
-
-- Required: No
-
-### `label`: `string`
-
-- Required: No
-
-### `animated`: `boolean`
-
-Determines if `Flyout` has animations.
-
-- Required: No
-- Default: `true`
-
-### `animationDuration`: `boolean`
-
-The duration of `Flyout` animations.
-
-- Required: No
-- Default: `160`
-
-### `baseId`: `string`
-
-ID that will serve as a base for all the items IDs. See https://reakit.io/docs/popover/#usepopoverstate
-
-- Required: No
-- Default: `160`
-
-### `elevation`: `number`
-
-Size of the elevation shadow. For more information, check out [`Card`](/packages/components/src/card/card/README.md#props).
-
-- Required: No
-- Default: `5`
-
-### `maxWidth`: `CSSProperties[ 'maxWidth' ]`
-
-Max-width for the `Flyout` element.
-
-- Required: No
-- Default: `360`
-
-### `onVisibleChange`: `( ...args: any ) => void`
-
-Callback for when the `visible` state changes.
-
-- Required: No
-
-### `trigger`: `FunctionComponentElement< any >`
-
-Element that triggers the `visible` state of `Flyout` when clicked.
-
-```jsx
-<Flyout trigger={<Button>Greet</Button>}>
-	<Text>Hi! I'm Olaf!</Text>
-</Flyout>
-```
-
-- Required: Yes
-
-### `visible`: `boolean`
-
-Whether `Flyout` is visible. See [the `Reakit` docs](https://reakit.io/docs/popover/#usepopoverstate) for more information.
-
-- Required: No
-- Default: `false`
-
-### `placement`: `PopperPlacement`
-
-Position of the popover element. See [the `popper` docs](https://popper.js.org/docs/v1/#popperplacements--codeenumcode) for more information.
-
-- Required: No
-- Default: `auto`

package/src/flyout/flyout/component.js

@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { PopoverDisclosure, Portal } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useMemo, cloneElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../../ui/context';
-import { FlyoutContext } from '../context';
-import { useFlyoutResizeUpdater } from '../utils';
-import FlyoutContent from '../flyout-content';
-import { useUpdateEffect } from '../../utils/hooks';
-import { useFlyout } from './hook';
-
-/**
- *
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props
- * @param {import('react').ForwardedRef<any>}                                                          forwardedRef
- */
-function Flyout( props, forwardedRef ) {
-	const {
-		children,
-		elevation,
-		label,
-		maxWidth,
-		onVisibleChange,
-		trigger,
-		flyoutState,
-		...otherProps
-	} = useFlyout( props );
-
-	const resizeListener = useFlyoutResizeUpdater( {
-		onResize: flyoutState.unstable_update,
-	} );
-
-	const uniqueId = `flyout-${ flyoutState.baseId }`;
-	const labelId = label || uniqueId;
-
-	const contextProps = useMemo(
-		() => ( {
-			label: labelId,
-			flyoutState,
-		} ),
-		[ labelId, flyoutState ]
-	);
-
-	const triggerContent = useCallback(
-		( triggerProps ) => {
-			return cloneElement( trigger, triggerProps );
-		},
-		[ trigger ]
-	);
-
-	useUpdateEffect( () => {
-		onVisibleChange?.( flyoutState.visible );
-	}, [ flyoutState.visible ] );
-
-	return (
-		<FlyoutContext.Provider value={ contextProps }>
-			{ trigger && (
-				<PopoverDisclosure
-					{ ...flyoutState }
-					ref={ trigger.ref }
-					{ ...trigger.props }
-				>
-					{ triggerContent }
-				</PopoverDisclosure>
-			) }
-			<Portal>
-				<FlyoutContent
-					ref={ forwardedRef }
-					{ ...otherProps }
-					elevation={ elevation }
-					maxWidth={ maxWidth }
-				>
-					{ resizeListener }
-					{ children }
-				</FlyoutContent>
-			</Portal>
-		</FlyoutContext.Provider>
-	);
-}
-
-/**
- * `Flyout` is a component to render a floating content modal.
- * It is similar in purpose to a tooltip, but renders content of any sort,
- * not only simple text.
- *
- * @example
- * ```jsx
- * import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components';
- *
- * function Example() {
- * 	return (
- * 		<Flyout trigger={ <Button>Show/Hide content</Button> }>
- *			<Text>Code is Poetry</Text>
- * 		</Flyout>
- * 	);
- * }
- * ```
- */
-const ConnectedFlyout = contextConnect( Flyout, 'Flyout' );
-
-export default ConnectedFlyout;

package/src/flyout/flyout/hook.js

@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { usePopoverState } from 'reakit';
-
-/**
- * Internal dependencies
- */
-import { useContextSystem } from '../../ui/context';
-
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props
- */
-export function useFlyout( props ) {
-	const {
-		animated = true,
-		animationDuration = 160,
-		baseId,
-		elevation = 5,
-		id,
-		maxWidth = 360,
-		placement,
-		state,
-		visible,
-		...otherProps
-	} = useContextSystem( props, 'Flyout' );
-
-	const _flyoutState = usePopoverState( {
-		animated: animated ? animationDuration : undefined,
-		baseId: baseId || id,
-		placement,
-		visible,
-		...otherProps,
-	} );
-
-	const flyoutState = state || _flyoutState;
-
-	return {
-		...otherProps,
-		elevation,
-		maxWidth,
-		flyoutState,
-	};
-}

package/src/flyout/flyout/index.js

@@ -1,2 +0,0 @@
-export { default } from './component';
-export { useFlyout } from './hook';

package/src/flyout/flyout-content/component.js

@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useFlyoutContext } from '../context';
-import { FlyoutContentView, CardView } from '../styles';
-import { contextConnect, useContextSystem } from '../../ui/context';
-
-/**
- *
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props
- * @param {import('react').ForwardedRef<any>}                                                                 forwardedRef forwardedRef
- */
-function FlyoutContent( props, forwardedRef ) {
-	const {
-		children,
-		elevation,
-		maxWidth,
-		style = {},
-		...otherProps
-	} = useContextSystem( props, 'FlyoutContent' );
-
-	const { label, flyoutState } = useFlyoutContext();
-
-	if ( ! flyoutState ) {
-		throw new Error(
-			'`FlyoutContent` must only be used inside a `Flyout`.'
-		);
-	}
-
-	const showContent = flyoutState.visible || flyoutState.animating;
-
-	return (
-		<FlyoutContentView
-			aria-label={ label }
-			// maxWidth is applied via inline styles in order to avoid the `React does
-			// not recognize the maxWidth prop on a DOM element` error that comes from
-			// passing `maxWidth` as a prop to `FlyoutContentView`
-			style={ { maxWidth, ...style } }
-			{ ...otherProps }
-			{ ...flyoutState }
-		>
-			{ showContent && (
-				<CardView elevation={ elevation } ref={ forwardedRef }>
-					{ children }
-				</CardView>
-			) }
-		</FlyoutContentView>
-	);
-}
-
-const ConnectedFlyoutContent = contextConnect( FlyoutContent, 'FlyoutContent' );
-
-export default ConnectedFlyoutContent;

package/src/flyout/flyout-content/index.js

@@ -1 +0,0 @@
-export { default } from './component';

package/src/flyout/index.js

@@ -1 +0,0 @@
-export { default as Flyout } from './flyout';

package/src/flyout/stories/index.js

@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import { CardBody, CardHeader } from '../../card';
-import Button from '../../button';
-import { Flyout } from '..';
-
-export default {
-	component: Flyout,
-	title: 'Components (Experimental)/Flyout',
-};
-
-export const _default = () => {
-	return (
-		<Flyout
-			trigger={ <Button>Click</Button> }
-			visible
-			placement="bottom-start"
-		>
-			<CardHeader>Go</CardHeader>
-			<CardBody>Stuff</CardBody>
-		</Flyout>
-	);
-};