@wordpress/components 19.10.0 → 19.11.0

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

@@ -1,91 +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 }
-		/>
-	);
-};
-
-/**
- * You can mark particular dates as invalid using the `isInvalidDate` prop. This
- * prevents the user from being able to select it.
- */
-export const WithInvalidDates = () => {
-	const [ currentDate, setCurrentDate ] = useState( now );
-
-	return (
-		<DateTimePicker
-			currentDate={ currentDate }
-			onChange={ setCurrentDate }
-			isInvalidDate={ ( date ) =>
-				// Mark Saturdays and Sundays as invalid.
-				date.getDay() === 0 || date.getDay() === 6
-			}
-		/>
-	);
-};

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/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>
-	);
-};

package/src/flyout/styles.ts

@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import styled, { StyledComponent } from '@emotion/styled';
-// eslint-disable-next-line no-restricted-imports
-import { Popover as ReakitPopover } from 'reakit';
-
-/**
- * Internal dependencies
- */
-import { Card, CardBody } from '../card';
-import * as ZIndex from '../utils/z-index';
-import CONFIG from '../utils/config-values';
-
-export const FlyoutContentView: StyledComponent<
-	React.ComponentPropsWithoutRef< typeof ReakitPopover >
-> = styled( ReakitPopover )`
-	z-index: ${ ZIndex.Flyout };
-	box-sizing: border-box;
-	opacity: 0;
-	outline: none;
-	position: relative;
-	transform-origin: center center;
-	transition: opacity ${ CONFIG.transitionDurationFastest } linear;
-	width: 100%;
-
-	&[data-enter] {
-		opacity: 1;
-	}
-
-	&::before,
-	&::after {
-		display: none;
-	}
-`;
-
-export const CardView = styled( Card )`
-	${ CardBody.selector } {
-		max-height: 80vh;
-	}
-`;