@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

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/scroll-lock/stories/index.js

@@ -1,71 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import ScrollLock from '../';
-
-export default { title: 'Components/ScrollLock', component: ScrollLock };
-
-const Example = () => {
-	const [ isScrollLocked, setScrollLocked ] = useState( false );
-	const toggleLock = () => setScrollLocked( ! isScrollLocked );
-
-	return (
-		<StripedBackground>
-			<div>Start scrolling down...</div>
-			<ToggleContainer>
-				<Button variant="secondary" onClick={ toggleLock }>
-					Toggle Scroll Lock
-				</Button>
-				{ isScrollLocked && <ScrollLock /> }
-				<p>
-					Scroll locked:{ ' ' }
-					<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
-				</p>
-			</ToggleContainer>
-		</StripedBackground>
-	);
-};
-
-function StripedBackground( props ) {
-	return (
-		<div
-			style={ {
-				backgroundColor: '#fff',
-				backgroundImage:
-					'linear-gradient(transparent 50%, rgba(0, 0, 0, 0.05) 50%)',
-				backgroundSize: '50px 50px',
-				height: 3000,
-				position: 'relative',
-			} }
-			{ ...props }
-		/>
-	);
-}
-
-function ToggleContainer( props ) {
-	const { children } = props;
-	return (
-		<div
-			style={ {
-				position: 'sticky',
-				top: 0,
-				padding: 40,
-				display: 'flex',
-				justifyContent: 'center',
-				textAlign: 'center',
-			} }
-		>
-			<div>{ children }</div>
-		</div>
-	);
-}
-
-export const _default = () => {
-	return <Example />;
-};

package/src/scroll-lock/test/index.js

@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { mount } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import ScrollLock from '..';
-
-describe( 'scroll-lock', () => {
-	const lockingClassName = 'lockscroll';
-
-	// Use a separate document to reduce the risk of test side-effects.
-	let wrapper = null;
-
-	function expectLocked( locked ) {
-		expect(
-			document.documentElement.classList.contains( lockingClassName )
-		).toBe( locked );
-		// Assert against `body` because `scrollingElement` does not exist on our test DOM implementation.
-		expect( document.body.classList.contains( lockingClassName ) ).toBe(
-			locked
-		);
-	}
-
-	afterEach( () => {
-		if ( wrapper && wrapper.length ) {
-			wrapper.unmount();
-			wrapper = null;
-		}
-	} );
-
-	it( 'locks when mounted', () => {
-		expectLocked( false );
-		wrapper = mount( <ScrollLock /> );
-		expectLocked( true );
-	} );
-
-	it( 'unlocks when unmounted', () => {
-		wrapper = mount( <ScrollLock /> );
-		expectLocked( true );
-		wrapper.unmount();
-
-		// Running cleanup functions now works asynchronously. the unofficial
-		// enzyme adapter for react 17 we're currently using does not account
-		// for this, yet. So for now, we'll use jest.advanceTimersByTime to wait for cleanup.
-		//
-		// @see https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
-		jest.advanceTimersByTime( 1 );
-		expectLocked( false );
-	} );
-} );

package/src/shortcut/test/index.js

@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import Shortcut from '../';
-
-describe( 'Shortcut', () => {
-	it( 'does not render anything if no shortcut prop is provided', () => {
-		const wrapper = shallow( <Shortcut /> );
-
-		expect( wrapper.children() ).toHaveLength( 0 );
-	} );
-
-	it( 'renders the shortcut display text when a string is passed as the shortcut', () => {
-		const wrapper = shallow( <Shortcut shortcut="shortcut text" /> );
-
-		expect( wrapper.text() ).toBe( 'shortcut text' );
-	} );
-
-	it( 'renders the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', () => {
-		const wrapper = shallow(
-			<Shortcut
-				shortcut={ {
-					display: 'shortcut text',
-					ariaLabel: 'shortcut label',
-				} }
-			/>
-		);
-
-		expect( wrapper.text() ).toBe( 'shortcut text' );
-		expect( wrapper.prop( 'aria-label' ) ).toBe( 'shortcut label' );
-	} );
-} );

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

package/src/swatch/index.js

@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-
-function Swatch( { fill } ) {
-	return fill ? (
-		<span className="components-swatch" style={ { background: fill } } />
-	) : (
-		<Icon icon={ swatch } />
-	);
-}
-
-export default Swatch;

package/src/swatch/style.scss

@@ -1,21 +0,0 @@
-.components-swatch {
-	width: 18px;
-	height: 18px;
-	border-radius: 50%;
-	color: transparent;
-	background: transparent;
-
-	// Regular border doesn't seem to work in the toolbar button, but pseudo-selector border does.
-	&::after {
-		content: "";
-		display: block;
-		width: 100%;
-		height: 100%;
-		border: $border-width solid rgba(0, 0, 0, 0.2);
-		border-radius: 50%;
-	}
-}
-
-.components-button.has-icon.has-text .components-swatch {
-	margin-right: $grid-unit;
-}

package/src/toggle-group-control/stories/index.js

@@ -1,187 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { formatLowercase, formatUppercase } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import {
-	ToggleGroupControl,
-	ToggleGroupControlOption,
-	ToggleGroupControlOptionIcon,
-} from '../index';
-import { View } from '../../view';
-import Button from '../../button';
-
-export default {
-	component: ToggleGroupControl,
-	title: 'Components (Experimental)/ToggleGroupControl',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const KNOBS_GROUPS = {
-	ToggleGroupControl: 'ToggleGroupControl',
-	ToggleGroupControlOption: 'ToggleGroupControlOption',
-};
-
-const _default = ( { options } ) => {
-	const [ value, setValue ] = useState( options[ 0 ].value );
-	const label = text(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: label`,
-		'Toggle Group Control',
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-
-	const hideLabelFromVision = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: hideLabelFromVision`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const isBlock = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: isBlock (render as a css block element)`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const help = text(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: help`,
-		undefined,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const isAdaptiveWidth = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: isAdaptiveWidth`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-
-	const controlOptions = options.map( ( option, index ) => (
-		<ToggleGroupControlOption
-			key={ option.value }
-			value={ option.value }
-			label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				option.label,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-			aria-label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: aria-label`,
-				option[ 'aria-label' ],
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-			showTooltip={ boolean(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
-				option.showTooltip,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-		/>
-	) );
-
-	return (
-		<View>
-			<ToggleGroupControl
-				onChange={ setValue }
-				value={ value }
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-				help={ help }
-				isBlock={ isBlock }
-				isAdaptiveWidth={ isAdaptiveWidth }
-			>
-				{ controlOptions }
-			</ToggleGroupControl>
-		</View>
-	);
-};
-
-export const Default = _default.bind( {} );
-Default.args = {
-	options: [
-		{ value: 'left', label: 'Left' },
-		{ value: 'center', label: 'Center' },
-		{ value: 'right', label: 'Right' },
-		{ value: 'justify', label: 'Justify' },
-	],
-};
-
-export const WithTooltip = _default.bind( {} );
-WithTooltip.args = {
-	...Default.args,
-	options: [
-		{ value: 1, label: '1', showTooltip: true, 'aria-label': 'One' },
-		{ value: 2, label: '2', showTooltip: true, 'aria-label': 'Two' },
-		{ value: 3, label: '3', showTooltip: true, 'aria-label': 'Three' },
-	],
-};
-
-export const WithAriaLabel = _default.bind( {} );
-WithAriaLabel.args = {
-	...Default.args,
-	options: [
-		{ value: 'asc', label: 'A→Z', 'aria-label': 'Ascending' },
-		{ value: 'desc', label: 'Z→A', 'aria-label': 'Descending' },
-	],
-};
-
-export const WithIcons = () => {
-	const [ state, setState ] = useState();
-	return (
-		<ToggleGroupControl
-			onChange={ setState }
-			value={ state }
-			label={ 'With icons' }
-			hideLabelFromVision
-		>
-			<ToggleGroupControlOptionIcon
-				value="uppercase"
-				icon={ formatUppercase }
-				showTooltip={ true }
-				aria-label="Uppercase"
-			/>
-			<ToggleGroupControlOptionIcon
-				value="lowercase"
-				icon={ formatLowercase }
-				showTooltip={ true }
-				aria-label="Lowercase"
-			/>
-		</ToggleGroupControl>
-	);
-};
-
-export const WithReset = () => {
-	const [ alignState, setAlignState ] = useState();
-	const aligns = [ 'Left', 'Center', 'Right' ];
-	const alignOptions = aligns.map( ( key, index ) => (
-		<ToggleGroupControlOption
-			key={ key }
-			value={ key }
-			label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				key,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-		/>
-	) );
-	return (
-		<View>
-			<ToggleGroupControl
-				onChange={ setAlignState }
-				value={ alignState }
-				label={ 'Toggle Group Control' }
-				hideLabelFromVision
-			>
-				{ alignOptions }
-			</ToggleGroupControl>
-			<Button onClick={ () => setAlignState( undefined ) } isTertiary>
-				Reset
-			</Button>
-		</View>
-	);
-};

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -1,219 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolsPanel first and last panel items should apply first/last classes to appropriate items 1`] = `
-.emotion-0 {
-  display: grid;
-  gap: calc( 4px * 3 );
-  grid-template-columns: repeat( 2, 1fr );
-  -webkit-column-gap: calc(4px * 4);
-  column-gap: calc(4px * 4);
-  row-gap: calc(4px * 6);
-  border-top: 1px solid #ddd;
-  margin-top: -1px;
-  padding: calc(4px * 4);
-}
-
-.emotion-0>div:not( :first-of-type ) {
-  display: grid;
-  grid-template-columns: repeat( 2, 1fr );
-  -webkit-column-gap: calc(4px * 4);
-  column-gap: calc(4px * 4);
-  row-gap: calc(4px * 6);
-  grid-column: 1/-1;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-  grid-column: 1/-1;
-  gap: calc(4px * 2);
-}
-
-.emotion-2>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-2>* {
-  min-width: 0;
-}
-
-.emotion-2 .components-dropdown-menu {
-  margin: calc(4px * -1) 0;
-  line-height: 0;
-}
-
-.emotion-2.emotion-2.emotion-2.emotion-2 .components-dropdown-menu__toggle {
-  padding: 0;
-  min-width: calc(4px * 6);
-}
-
-.emotion-4 {
-  color: #1e1e1e;
-  line-height: 1.2;
-  margin: 0;
-  color: #1e1e1e;
-  font-size: calc(1.95 * 13px);
-  font-weight: 600;
-  display: block;
-  font-size: inherit;
-  font-weight: 500;
-  line-height: normal;
-}
-
-.emotion-4.emotion-4 {
-  margin: 0;
-}
-
-.emotion-6 {
-  grid-column: 1/-1;
-  display: none;
-}
-
-.emotion-6>div,
-.emotion-6>fieldset {
-  padding-bottom: 0;
-  margin-bottom: 0;
-  max-width: 100%;
-}
-
-.emotion-6.emotion-6 .ej5x27r4 {
-  margin-bottom: 0;
-}
-
-.emotion-6.emotion-6 .ej5x27r4 .ej5x27r3:last-child {
-  margin-bottom: 0;
-}
-
-.emotion-6 .ej5x27r1 {
-  margin-bottom: 0;
-}
-
-.emotion-6.emotion-6 .em5sgkm3 label {
-  line-height: 1.4em;
-}
-
-.emotion-6 .components-custom-select-control__label,
-.emotion-6 .ej5x27r2 {
-  line-height: 1.4em;
-}
-
-.emotion-8 {
-  grid-column: 1/-1;
-}
-
-.emotion-8>div,
-.emotion-8>fieldset {
-  padding-bottom: 0;
-  margin-bottom: 0;
-  max-width: 100%;
-}
-
-.emotion-8.emotion-8 .ej5x27r4 {
-  margin-bottom: 0;
-}
-
-.emotion-8.emotion-8 .ej5x27r4 .ej5x27r3:last-child {
-  margin-bottom: 0;
-}
-
-.emotion-8 .ej5x27r1 {
-  margin-bottom: 0;
-}
-
-.emotion-8.emotion-8 .em5sgkm3 label {
-  line-height: 1.4em;
-}
-
-.emotion-8 .components-custom-select-control__label,
-.emotion-8 .ej5x27r2 {
-  line-height: 1.4em;
-}
-
-<div>
-  <div
-    class="components-grid components-tools-panel emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="ToolsPanel"
-  >
-    <div
-      class="components-flex components-h-stack components-tools-panel-header emotion-2 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelHeader"
-    >
-      <h2
-        class="components-truncate components-text components-heading emotion-4 emotion-1"
-        data-wp-c16t="true"
-        data-wp-component="Heading"
-      >
-        Panel header
-      </h2>
-      <div
-        class="components-dropdown components-dropdown-menu"
-        tabindex="-1"
-      >
-        <button
-          aria-expanded="false"
-          aria-haspopup="true"
-          aria-label="Panel header options"
-          class="components-button components-dropdown-menu__toggle is-small has-icon"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="components-tools-panel-item emotion-6 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    />
-    <div
-      class="components-tools-panel-item first emotion-8 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    >
-      <div>
-        Item 2
-      </div>
-    </div>
-    <div
-      class="components-tools-panel-item last emotion-8 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    >
-      <div>
-        Item 3
-      </div>
-    </div>
-    <div
-      class="components-tools-panel-item emotion-6 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    />
-  </div>
-</div>
-`;