@wordpress/components 19.16.0 → 19.17.0

package/src/flex/stories/index.js

@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Flex, FlexItem } from '../';
-import { View } from '../../view';
-
-export default {
-	component: Flex,
-	title: 'Components/Flex',
-};
-
-export const _default = () => {
-	return (
-		<>
-			<Flex gap={ 3 }>
-				<View>Item</View>
-				<View>Item</View>
-			</Flex>
-			<Flex direction={ [ 'column', 'row' ] } gap={ 3 }>
-				<View style={ { width: '180px' } }>Item</View>
-				<FlexItem isBlock>
-					<View>Item</View>
-				</FlexItem>
-				<View>Item</View>
-				<View>Item</View>
-			</Flex>
-		</>
-	);
-};

package/src/flex/test/index.js

@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { Flex, FlexBlock, FlexItem } from '../';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render(
-			<Flex>
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render + wrap non Flex children', () => {
-		const { container } = render(
-			<Flex>
-				<FlexItem />
-				<View />
-				<div />
-				<FlexBlock />
-			</Flex>
-		);
-
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render align', () => {
-		const { container } = render(
-			<Flex align="flex-start">
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render justify', () => {
-		const { container } = render(
-			<Flex justify="flex-start">
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render spacing', () => {
-		const { container } = render(
-			<Flex gap={ 5 }>
-				<View />
-				<View />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-} );

package/src/placeholder/stories/index.js

@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-import TextControl from '../../text-control';
-
-export default {
-	title: 'Components/Placeholder',
-	component: Placeholder,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const icon = text( 'Icon', 'smiley' );
-	const instructions = text(
-		'Instructions',
-		'Here are instructions you should follow'
-	);
-	const label = text( 'Label', 'My Placeholder Label' );
-	const isColumnLayout = boolean( 'isColumnLayout', false );
-
-	return (
-		<Placeholder
-			icon={ icon }
-			instructions={ instructions }
-			label={ label }
-			isColumnLayout={ isColumnLayout }
-		>
-			<div>
-				<TextControl
-					label="Sample Field"
-					placeholder="Enter something here"
-				/>
-			</div>
-		</Placeholder>
-	);
-};

package/src/popover/stories/_utils.js

@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useEffect, useState } from '@wordpress/element';
-
-export const DraggableWrapper = (
-	props = { role: 'presentation', style: {} }
-) => {
-	const { role, style, ...restProps } = props;
-	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ isDragging, setDragging ] = useState( false );
-
-	const updatePosition = useCallback(
-		( event ) => {
-			if ( ! isDragging ) {
-				return false;
-			}
-			const { movementX, movementY } = event;
-			setPosition( {
-				...position,
-				x: position.x + movementX,
-				y: position.y + movementY,
-			} );
-		},
-		[ isDragging, position ]
-	);
-
-	const startDragging = useCallback( () => setDragging( true ), [] );
-	const stopDragging = useCallback( () => setDragging( false ), [] );
-
-	useEffect( () => {
-		document.addEventListener( 'mousemove', updatePosition );
-		document.addEventListener( 'mouseup', stopDragging );
-		return () => {
-			document.removeEventListener( 'mousemove', updatePosition );
-			document.removeEventListener( 'mouseup', stopDragging );
-		};
-	}, [ updatePosition, stopDragging ] );
-
-	const { x, y } = position;
-
-	/**
-	 * Ideally, the x and y coordinates would be applied transform: translate.
-	 * However, using transform is causing layout rendering issues when
-	 * combined with components like Popover (due to their positioning
-	 * strategy).
-	 */
-	const componentStyle = {
-		...style,
-		position: 'relative',
-		top: y,
-		left: x,
-	};
-
-	return (
-		<div
-			{ ...restProps }
-			onMouseUp={ stopDragging }
-			onMouseDown={ startDragging }
-			role={ role }
-			style={ componentStyle }
-		/>
-	);
-};

package/src/style-provider/index.js

@@ -1,31 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import memoize from 'memize';
-import * as uuid from 'uuid';
-
-const uuidCache = new Set();
-
-const memoizedCreateCacheWithContainer = memoize( ( container ) => {
-	// Emotion only accepts alphabetical and hyphenated keys so we just strip the numbers from the UUID. It _should_ be fine.
-	let key = uuid.v4().replace( /[0-9]/g, '' );
-	while ( uuidCache.has( key ) ) {
-		key = uuid.v4().replace( /[0-9]/g, '' );
-	}
-	uuidCache.add( key );
-	return createCache( { container, key } );
-} );
-
-export default function StyleProvider( { children, document } ) {
-	if ( ! document ) {
-		return null;
-	}
-
-	const cache = memoizedCreateCacheWithContainer( document.head );
-
-	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
-}