@wordpress/components 19.8.4 → 19.11.0

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;
-	}
-`;

package/src/flyout/test/__snapshots__/index.js.snap

@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render correctly 1`] = `
-.emotion-1 {
-  background-color: #fff;
-  color: #1e1e1e;
-  position: relative;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  outline: none;
-  border-radius: calc(2px - 1px);
-}
-
-.emotion-1 .components-card-body {
-  max-height: 80vh;
-}
-
-.emotion-3 {
-  height: 100%;
-}
-
-.emotion-5 {
-  box-sizing: border-box;
-  height: auto;
-  max-height: 100%;
-  padding: calc(4px * 4) calc(4px * 6);
-}
-
-.emotion-5:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-5:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-7 {
-  background: transparent;
-  display: block;
-  margin: 0!important;
-  pointer-events: none;
-  position: absolute;
-  will-change: box-shadow;
-  border-radius: inherit;
-  bottom: 0;
-  box-shadow: 0 1px 2px 0 rgba(0 ,0, 0, 0.05);
-  opacity: 1;
-  left: 0;
-  right: 0;
-  top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-7 {
-    transition-duration: 0ms;
-  }
-}
-
-.emotion-9 {
-  background: transparent;
-  display: block;
-  margin: 0!important;
-  pointer-events: none;
-  position: absolute;
-  will-change: box-shadow;
-  border-radius: inherit;
-  bottom: 0;
-  box-shadow: 0 5px 10px 0 rgba(0 ,0, 0, 0.25);
-  opacity: 1;
-  left: 0;
-  right: 0;
-  top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-9 {
-    transition-duration: 0ms;
-  }
-}
-
-<div
-  class="components-surface components-card emotion-0 emotion-1 emotion-2"
-  data-wp-c16t="true"
-  data-wp-component="Card"
->
-  <div
-    class="emotion-3 emotion-2"
-  >
-    <iframe
-      aria-hidden="true"
-      frameborder="0"
-      src="about:blank"
-      style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-      tabindex="-1"
-    />
-    <div
-      class="components-card__body components-card-body emotion-5 emotion-2"
-      data-wp-c16t="true"
-      data-wp-component="CardBody"
-    >
-      Code is Poetry
-    </div>
-  </div>
-  <div
-    aria-hidden="true"
-    class="components-elevation emotion-7 emotion-2"
-    data-wp-c16t="true"
-    data-wp-component="Elevation"
-  />
-  <div
-    aria-hidden="true"
-    class="components-elevation emotion-9 emotion-2"
-    data-wp-c16t="true"
-    data-wp-component="Elevation"
-  />
-</div>
-`;
-
-exports[`props should render label 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,12 +1,12 @@
-  <div
--   aria-label="show"
-+   aria-label="flyout-base-flyout"
-    class="components-flyout-content components-flyout css-1b8wigk-FlyoutContentView e1vtu5161"
-    data-dialog="true"
-    data-wp-c16t="true"
-    data-wp-component="Flyout"
--   id="labelled-flyout"
-+   id="base-flyout"
-    role="dialog"
-    style="position: fixed; left: 100%; top: 100%; max-width: 360px;"
-    tabindex="-1"
-  >
-    <div
-`;
-
-exports[`props should render without content 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -1,12 +1,12 @@
-  <div
--   aria-label="flyout-contentless-flyout"
-+   aria-label="flyout-base-flyout"
-    class="components-flyout-content components-flyout css-1b8wigk-FlyoutContentView e1vtu5161"
-    data-dialog="true"
-    data-wp-c16t="true"
-    data-wp-component="Flyout"
--   id="contentless-flyout"
-+   id="base-flyout"
-    role="dialog"
-    style="position: fixed; left: 100%; top: 100%; max-width: 360px;"
-    tabindex="-1"
-  >
-    <div
-@@ -22,10 +22,17 @@
-          frameborder="0"
-          src="about:blank"
-          style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-          tabindex="-1"
-        />
-+       <div
-+         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
-+         data-wp-c16t="true"
-+         data-wp-component="CardBody"
-+       >
-+         Code is Poetry
-+       </div>
-      </div>
-      <div
-        aria-hidden="true"
-        class="components-elevation css-1b4rkmt-View-Elevation-sx-Base-elevationClassName em57xhy0"
-        data-wp-c16t="true"
-`;

package/src/flyout/test/index.js

@@ -1,103 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { CardBody } from '../../card';
-import { Flyout } from '..';
-
-describe( 'props', () => {
-	const baseFlyoutId = 'base-flyout';
-	beforeEach( () => {
-		render(
-			<Flyout
-				baseId={ baseFlyoutId }
-				trigger={ <Button>WordPress.org</Button> }
-				visible
-			>
-				<CardBody>Code is Poetry</CardBody>
-			</Flyout>
-		);
-	} );
-
-	test( 'should render correctly', () => {
-		const dialog = screen.getByRole( 'dialog' );
-		expect( dialog.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render invisible', () => {
-		const invisibleFlyoutTriggerContent =
-			'WordPress.org - invisible flyout';
-		render(
-			<Flyout
-				baseId="flyout"
-				trigger={ <Button>{ invisibleFlyoutTriggerContent }</Button> }
-				visible={ false }
-			>
-				<CardBody>Code is Poetry</CardBody>
-			</Flyout>
-		);
-
-		const flyouts = screen.getAllByRole( 'dialog' );
-		const trigger = screen.getByText( invisibleFlyoutTriggerContent );
-		// Assert only the base flyout rendered.
-		expect( flyouts ).toHaveLength( 1 );
-		expect( flyouts[ 0 ].id ).toBe( baseFlyoutId );
-		expect( trigger ).not.toBeUndefined();
-	} );
-
-	test( 'should render without trigger', () => {
-		const triggerlessFlyoutId = 'triggerless-flyout';
-		render(
-			<Flyout baseId={ triggerlessFlyoutId } visible>
-				<CardBody>Code is Poetry</CardBody>
-			</Flyout>
-		);
-		const flyouts = screen.getAllByRole( 'dialog' );
-		const triggerlessFlyout = flyouts.find(
-			( p ) => p.id === triggerlessFlyoutId
-		);
-		expect( triggerlessFlyout ).not.toBeUndefined();
-	} );
-
-	test( 'should render without content', () => {
-		const contentlessFlyoutId = 'contentless-flyout';
-		render(
-			<Flyout
-				baseId={ contentlessFlyoutId }
-				trigger={ <Button>WordPress.org</Button> }
-				visible
-			/>
-		);
-		const flyouts = screen.getAllByRole( 'dialog' );
-		const contentlessFlyout = flyouts.find(
-			( p ) => p.id === contentlessFlyoutId
-		);
-		const baseFlyout = flyouts.find( ( p ) => p.id === baseFlyoutId );
-		expect( contentlessFlyout ).toMatchDiffSnapshot( baseFlyout );
-	} );
-
-	test( 'should render label', () => {
-		const labelledFlyoutId = 'labelled-flyout';
-		render(
-			<Flyout
-				baseId={ labelledFlyoutId }
-				label="show"
-				trigger={ <Button>WordPress.org</Button> }
-				visible
-			>
-				<CardBody>Code is Poetry</CardBody>
-			</Flyout>
-		);
-		const flyouts = screen.getAllByRole( 'dialog' );
-		const labelledFlyout = flyouts.find(
-			( p ) => p.id === labelledFlyoutId
-		);
-		const baseFlyout = flyouts.find( ( p ) => p.id === baseFlyoutId );
-		expect( labelledFlyout ).toMatchDiffSnapshot( baseFlyout );
-	} );
-} );

package/src/flyout/types.ts

@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import type { PopoverStateReturn } from 'reakit';
-import type { CSSProperties, FunctionComponentElement } from 'react';
-
-/**
- * Internal dependencies
- */
-import type { PopperProps } from '../utils/types';
-
-export type Context = {
-	flyoutState?: PopoverStateReturn;
-	label?: string;
-};
-
-export type Props = PopperProps & {
-	state?: PopoverStateReturn;
-	label?: string;
-	/**
-	 * Determines if `Flyout` has animations.
-	 *
-	 * @default true
-	 */
-	animated?: boolean;
-	/**
-	 * The duration of `Flyout` animations.
-	 *
-	 * @default 160
-	 */
-	animationDuration?: boolean;
-	/**
-	 * ID that will serve as a base for all the items IDs.
-	 *
-	 * @see https://reakit.io/docs/popover/#usepopoverstate
-	 */
-	baseId?: string;
-	/**
-	 * Renders `Elevation` styles for the `Flyout`.
-	 *
-	 * @default 5
-	 */
-	elevation?: number;
-	/**
-	 * Max-width for the `Flyout` element.
-	 *
-	 * @default 360
-	 */
-	maxWidth?: CSSProperties[ 'maxWidth' ];
-	/**
-	 * Callback for when the `visible` state changes.
-	 */
-	onVisibleChange?: ( ...args: any ) => void;
-	/**
-	 * Element that triggers the `visible` state of `Flyout` when clicked.
-	 *
-	 * @example
-	 * ```jsx
-	 * <Flyout trigger={<Button>Greet</Button>}>
-	 *  <Text>Hi! I'm Olaf!</Text>
-	 * </Flyout>
-	 * ```
-	 */
-	trigger: FunctionComponentElement< any >;
-	/**
-	 * Whether `Flyout` is visible.
-	 *
-	 * @default false
-	 *
-	 * @see https://reakit.io/docs/popover/#usepopoverstate
-	 */
-	visible?: boolean;
-	/**
-	 * The children elements.
-	 */
-	children: React.ReactNode;
-};
-
-export type ContentProps = {
-	elevation: number;
-	maxWidth: CSSProperties[ 'maxWidth' ];
-	children: React.ReactNode;
-};

package/src/flyout/utils.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import useResizeAware from 'react-resize-aware';
-
-/**
- * WordPress dependencies
- */
-import { useIsomorphicLayoutEffect } from '@wordpress/compose';
-
-/**
- *
- * @param { { onResize?: () => any } } onResize
- */
-export function useFlyoutResizeUpdater( { onResize } ) {
-	const [ resizeListener, sizes ] = useResizeAware();
-
-	useIsomorphicLayoutEffect( () => {
-		onResize?.();
-	}, [ sizes.width, sizes.height ] );
-
-	return resizeListener;
-}

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

@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import InputControl from '../';
-
-export default {
-	title: 'Components (Experimental)/InputControl',
-	component: InputControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-function Example() {
-	const [ value, setValue ] = useState( '' );
-
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
-		label: text( 'label', 'Value' ),
-		labelPosition: select(
-			'labelPosition',
-			{
-				top: 'top',
-				side: 'side',
-				bottom: 'bottom',
-			},
-			'top'
-		),
-		placeholder: text( 'placeholder', 'Placeholder' ),
-		size: select(
-			'size',
-			{
-				default: 'default',
-				small: 'small',
-				'__unstable-large': '__unstable-large',
-			},
-			'default'
-		),
-		suffix: text( 'suffix', '' ),
-		prefix: text( 'prefix', '' ),
-	};
-
-	const suffixMarkup = props.suffix ? <div>{ props.suffix }</div> : null;
-	const prefixMarkup = props.prefix ? <div>{ props.prefix }</div> : null;
-
-	return (
-		<InputControl
-			{ ...props }
-			onChange={ ( v ) => setValue( v ) }
-			prefix={ prefixMarkup }
-			suffix={ suffixMarkup }
-			value={ value }
-		/>
-	);
-}
-
-export const _default = () => {
-	return <Example />;
-};

package/src/mobile/html-text-input/container.android.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { ScrollView } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import KeyboardAvoidingView from '../keyboard-avoiding-view';
-import styles from './style.android.scss';
-
-const HTMLInputContainer = ( { children, parentHeight } ) => (
-	<KeyboardAvoidingView
-		style={ styles.keyboardAvoidingView }
-		parentHeight={ parentHeight }
-	>
-		<ScrollView style={ styles.scrollView }>{ children }</ScrollView>
-	</KeyboardAvoidingView>
-);
-
-HTMLInputContainer.scrollEnabled = false;
-
-export default HTMLInputContainer;

package/src/mobile/html-text-input/container.ios.js

@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import { UIManager, PanResponder } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import KeyboardAvoidingView from '../keyboard-avoiding-view';
-import styles from './style.ios.scss';
-
-class HTMLInputContainer extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.panResponder = PanResponder.create( {
-			onStartShouldSetPanResponderCapture: () => true,
-
-			onPanResponderMove: ( e, gestureState ) => {
-				if ( gestureState.dy > 100 && gestureState.dy < 110 ) {
-					// Keyboard.dismiss() and this.textInput.blur() are not working here
-					// They require to know the currentlyFocusedID under the hood but
-					// during this gesture there's no currentlyFocusedID.
-					UIManager.blur( e.target );
-				}
-			},
-		} );
-	}
-
-	render() {
-		return (
-			<KeyboardAvoidingView
-				style={ styles.keyboardAvoidingView }
-				{ ...this.panResponder.panHandlers }
-				parentHeight={ this.props.parentHeight }
-			>
-				{ this.props.children }
-			</KeyboardAvoidingView>
-		);
-	}
-}
-
-HTMLInputContainer.scrollEnabled = true;
-
-export default HTMLInputContainer;