@wordpress/components 19.8.4 → 19.11.0

package/src/box-control/visualizer.js

@@ -1,116 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	Container,
-	TopView,
-	RightView,
-	BottomView,
-	LeftView,
-} from './styles/box-control-visualizer-styles';
-import { DEFAULT_VALUES, DEFAULT_VISUALIZER_VALUES } from './utils';
-
-export default function BoxControlVisualizer( {
-	children,
-	showValues = DEFAULT_VISUALIZER_VALUES,
-	values: valuesProp = DEFAULT_VALUES,
-	...props
-} ) {
-	const isPositionAbsolute = ! children;
-	return (
-		<Container
-			{ ...props }
-			isPositionAbsolute={ isPositionAbsolute }
-			aria-hidden="true"
-		>
-			<Sides showValues={ showValues } values={ valuesProp } />
-			{ children }
-		</Container>
-	);
-}
-
-function Sides( { showValues = DEFAULT_VISUALIZER_VALUES, values } ) {
-	const { top, right, bottom, left } = values;
-
-	return (
-		<>
-			<Top isVisible={ showValues.top } value={ top } />
-			<Right isVisible={ showValues.right } value={ right } />
-			<Bottom isVisible={ showValues.bottom } value={ bottom } />
-			<Left isVisible={ showValues.left } value={ left } />
-		</>
-	);
-}
-
-function Top( { isVisible = false, value } ) {
-	const height = value;
-	const animationProps = useSideAnimation( height );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <TopView isActive={ isActive } style={ { height } } />;
-}
-
-function Right( { isVisible = false, value } ) {
-	const width = value;
-	const animationProps = useSideAnimation( width );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <RightView isActive={ isActive } style={ { width } } />;
-}
-
-function Bottom( { isVisible = false, value } ) {
-	const height = value;
-	const animationProps = useSideAnimation( height );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <BottomView isActive={ isActive } style={ { height } } />;
-}
-
-function Left( { isVisible = false, value } ) {
-	const width = value;
-	const animationProps = useSideAnimation( width );
-	const isActive = animationProps.isActive || isVisible;
-
-	return <LeftView isActive={ isActive } style={ { width } } />;
-}
-
-/**
- * Custom hook that renders the "flash" animation whenever the value changes.
- *
- * @param {string} value Value of (box) side.
- */
-function useSideAnimation( value ) {
-	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( value );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if ( value !== valueRef.current ) {
-			setIsActive( true );
-			valueRef.current = value;
-
-			clearTimer();
-
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 400 );
-		}
-
-		return () => clearTimer();
-	}, [ value ] );
-
-	return {
-		isActive,
-	};
-}

package/src/button-group/index.js

@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-function ButtonGroup( { className, ...props }, ref ) {
-	const classes = classnames( 'components-button-group', className );
-
-	return <div ref={ ref } role="group" className={ classes } { ...props } />;
-}
-
-export default forwardRef( ButtonGroup );

package/src/button-group/stories/index.js

@@ -1,21 +0,0 @@
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import ButtonGroup from '../';
-
-export default { title: 'Components/ButtonGroup', component: ButtonGroup };
-
-export const _default = () => {
-	const style = { margin: '0 4px' };
-	return (
-		<ButtonGroup>
-			<Button variant="primary" style={ style }>
-				Button 1
-			</Button>
-			<Button variant="primary" style={ style }>
-				Button 2
-			</Button>
-		</ButtonGroup>
-	);
-};

package/src/date-time/stories/date.js

@@ -1,17 +0,0 @@
-/**
- * Internal dependencies
- */
-import DatePicker from '../date';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default { title: 'Components/DatePicker', component: DatePicker };
-
-export const _default = () => {
-	const [ date, setDate ] = useState();
-
-	return <DatePicker currentDate={ date } onChange={ setDate } />;
-};

package/src/date-time/stories/index.js

@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, button } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DateTimePicker from '../';
-
-export default {
-	title: 'Components/DateTimePicker',
-	component: DateTimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const DateTimePickerWithState = ( { is12Hour } ) => {
-	const [ date, setDate ] = useState();
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			is12Hour={ is12Hour }
-		/>
-	);
-};
-
-export const _default = () => {
-	const is12Hour = boolean( 'Is 12 hour (shows AM/PM)', false );
-	return <DateTimePickerWithState is12Hour={ is12Hour } />;
-};
-
-// Date utils, for demo purposes.
-const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const aFewDaysAfter = ( date ) => {
-	// eslint-disable-next-line no-restricted-syntax
-	return new Date( date.getTime() + ( 1 + Math.random() * 5 ) * DAY_IN_MS );
-};
-
-const now = new Date();
-
-export const WithDaysHighlighted = () => {
-	const [ date, setDate ] = useState( now );
-
-	const [ highlights, setHighlights ] = useState( [
-		{ date: aFewDaysAfter( now ) },
-	] );
-
-	button( 'Add random highlight', () => {
-		const lastHighlight = highlights[ highlights.length - 1 ];
-		setHighlights( [
-			...highlights,
-			{ date: aFewDaysAfter( lastHighlight.date ) },
-		] );
-	} );
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			events={ highlights }
-		/>
-	);
-};

package/src/date-time/stories/time.js

@@ -1,32 +0,0 @@
-/**
- * Internal dependencies
- */
-import TimePicker from '../time';
-
-/**
- * External dependencies
- */
-import { date, boolean } from '@storybook/addon-knobs';
-import { noop } from 'lodash';
-
-export default {
-	title: 'Components/TimePicker',
-	component: TimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	return (
-		<TimePicker
-			currentTime={
-				new Date(
-					date( 'currentTime', new Date( '1986-10-18T11:00:00' ) )
-				)
-			}
-			is12Hour={ boolean( 'is12Hour', false ) }
-			onChange={ noop }
-		/>
-	);
-};

package/src/date-time/test/date.js

@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-import moment from 'moment';
-
-/**
- * Internal dependencies
- */
-import DatePicker from '../date';
-
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
-
-describe( 'DatePicker', () => {
-	it( 'should pass down a moment object for currentDate', () => {
-		const currentDate = '1986-10-18T23:00:00';
-		const wrapper = shallow( <DatePicker currentDate={ currentDate } /> );
-		const date = wrapper.children().props().date;
-		expect( moment.isMoment( date ) ).toBe( true );
-		expect( date.isSame( moment( currentDate ) ) ).toBe( true );
-	} );
-
-	it( 'should pass down a null date when currentDate is set to null', () => {
-		const wrapper = shallow( <DatePicker currentDate={ null } /> );
-		expect( wrapper.children().props().date ).toBeNull();
-	} );
-
-	it( 'should pass down a moment object for now when currentDate is undefined', () => {
-		const wrapper = shallow( <DatePicker /> );
-		const date = wrapper.children().props().date;
-		expect( moment.isMoment( date ) ).toBe( true );
-	} );
-
-	describe( 'onChangeMoment', () => {
-		it( 'should call onChange with a formated date of the input', () => {
-			const onChangeSpy = jest.fn();
-			const currentDate = '1986-10-18T11:00:00';
-			const wrapper = shallow(
-				<DatePicker
-					currentDate={ currentDate }
-					onChange={ onChangeSpy }
-				/>
-			);
-			const newDate = moment();
-
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect( onChangeSpy ).toHaveBeenCalledWith(
-				newDate.format( TIMEZONELESS_FORMAT )
-			);
-		} );
-
-		it( 'should call onChange with hours, minutes, seconds of the current time when currentDate is undefined', () => {
-			let onChangeSpyArgument;
-			const onChangeSpy = ( arg ) => ( onChangeSpyArgument = arg );
-			const wrapper = shallow( <DatePicker onChange={ onChangeSpy } /> );
-			const newDate = moment( '1986-10-18T11:00:00' );
-			const current = moment();
-			const newDateWithCurrentTime = newDate.clone().set( {
-				hours: current.hours(),
-				minutes: current.minutes(),
-				seconds: current.seconds(),
-			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect(
-				moment( onChangeSpyArgument ).isSame(
-					newDateWithCurrentTime,
-					'minute'
-				)
-			).toBe( true );
-		} );
-
-		it( 'should call onChange with hours, minutes, seconds of the current time when currentDate is null', () => {
-			let onChangeSpyArgument;
-			const onChangeSpy = ( arg ) => ( onChangeSpyArgument = arg );
-			const wrapper = shallow(
-				<DatePicker currentDate={ null } onChange={ onChangeSpy } />
-			);
-			const newDate = moment( '1986-10-18T11:00:00' );
-			const current = moment();
-			const newDateWithCurrentTime = newDate.clone().set( {
-				hours: current.hours(),
-				minutes: current.minutes(),
-				seconds: current.seconds(),
-			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect(
-				moment( onChangeSpyArgument ).isSame(
-					newDateWithCurrentTime,
-					'minute'
-				)
-			).toBe( true );
-		} );
-	} );
-} );

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';