@wordpress/components 19.10.0 → 19.13.0

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