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

package/src/date-time/date/style.scss

@@ -1,85 +0,0 @@
-@import "./datepicker.scss";
-
-// Styles that overrides the calendar styling provided by react-dates go here.
-// Everything else goes in styles.ts.
-
-.components-datetime__date {
-	//
-	// Margin overrides
-	//
-
-	// Remove the left and right margin from the calendar by setting all the
-	// containers' widths to 100%. This means that the slide left / slide right
-	// animation won't work but we don't want that, anyway.
-
-	.CalendarMonthGrid__horizontal,
-	.DayPicker_weekHeader_li {
-		transform: none !important; // Override inline style.
-		width: 100% !important; // Override inline style.
-	}
-
-	.CalendarMonthGrid_month__horizontal,
-	.CalendarMonth_table,
-	.DayPicker_weekHeader {
-		width: 100%;
-	}
-
-	.DayPicker_weekHeaders__horizontal {
-		margin: 0;
-	}
-
-	.DayPicker_weekHeader_ul {
-		display: flex;
-	}
-
-	//
-	// Theming
-	//
-
-	.DayPicker_weekHeader {
-		top: 50px;
-	}
-
-	.CalendarMonth_caption {
-		font-size: $default-font-size;
-	}
-
-	.CalendarMonth_table {
-		border-collapse: separate;
-		border-spacing: 2px;
-	}
-
-	.CalendarDay {
-		border: none;
-		font-size: $default-font-size;
-		border-radius: $radius-round;
-		background: $white;
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white;
-			outline: 2px solid transparent; // Shown in Windows 10 high contrast mode.
-		}
-	}
-
-	.CalendarDay__today {
-		background: $gray-100;
-	}
-
-	.CalendarDay__selected {
-		background: var(--wp-admin-theme-color);
-		border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode.
-
-		&:hover {
-			background: var(--wp-admin-theme-color-darker-20);
-			color: $white;
-		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 $border-width $white;
-		}
-	}
-}

package/src/date-time/date/test/utils.ts

@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import moment from 'moment';
-
-/**
- * Internal dependencies
- */
-import { getMomentDate } from '../utils';
-
-describe( 'getMomentDate', () => {
-	it( 'should return a Moment object representing a given date string', () => {
-		const currentDate = '1986-10-18T23:00:00';
-		const momentDate = getMomentDate( currentDate );
-
-		expect( moment.isMoment( momentDate ) ).toBe( true );
-		expect( momentDate?.isSame( moment( currentDate ) ) ).toBe( true );
-	} );
-
-	it( 'should return null when given a null argument', () => {
-		const currentDate = null;
-		const momentDate = getMomentDate( currentDate );
-
-		expect( momentDate ).toBeNull();
-	} );
-
-	it( 'should return a Moment object representing now when given an undefined argument', () => {
-		const momentDate = getMomentDate();
-
-		expect( moment.isMoment( momentDate ) ).toBe( true );
-	} );
-} );

package/src/date-time/date/utils.ts

@@ -1,20 +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  [date] Date representing the currently selected
- *                date or null to signify no selection.
- * @return Moment object for selected date or null.
- */
-export const getMomentDate = ( date?: Date | string | number | null ) => {
-	if ( null === date ) {
-		return null;
-	}
-	return date ? moment( date ) : moment();
-};

package/src/date-time/style.scss

@@ -1 +0,0 @@
-@import "./date/style.scss";

package/src/disabled/index.js

@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useDisabled } from '@wordpress/compose';
-import { createContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { StyledWrapper } from './styles/disabled-styles';
-
-const Context = createContext( false );
-const { Consumer, Provider } = Context;
-
-/**
- * @typedef OwnProps
- * @property {string}                    [className]       Classname for the disabled element.
- * @property {import('react').ReactNode} children          Children to disable.
- * @property {boolean}                   [isDisabled=true] Whether to disable the children.
- */
-
-/**
- * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props
- * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.
- */
-function Disabled( { className, children, isDisabled = true, ...props } ) {
-	/** @type {import('react').RefCallback<HTMLDivElement>} */
-	const ref = useDisabled();
-
-	if ( ! isDisabled ) {
-		return <Provider value={ false }>{ children }</Provider>;
-	}
-
-	return (
-		<Provider value={ true }>
-			<StyledWrapper
-				ref={ ref }
-				className={ classnames( className, 'components-disabled' ) }
-				{ ...props }
-			>
-				{ children }
-			</StyledWrapper>
-		</Provider>
-	);
-}
-
-Disabled.Context = Context;
-Disabled.Consumer = Consumer;
-
-export default Disabled;

package/src/disabled/stories/index.js

@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Disabled from '../';
-import Button from '../../button/';
-import SelectControl from '../../select-control/';
-import TextControl from '../../text-control/';
-import TextareaControl from '../../textarea-control/';
-
-export default {
-	title: 'Components/Disabled',
-	component: Disabled,
-};
-
-const Form = () => (
-	<div>
-		<TextControl label="Text Control" />
-		<TextareaControl label="TextArea Control" />
-		<SelectControl
-			label="Select Control"
-			onChange={ () => {} }
-			options={ [
-				{ value: null, label: 'Select an option', disabled: true },
-				{ value: 'a', label: 'Option A' },
-				{ value: 'b', label: 'Option B' },
-				{ value: 'c', label: 'Option C' },
-			] }
-		/>
-	</div>
-);
-
-export const _default = () => {
-	return (
-		<Disabled>
-			<Form />
-		</Disabled>
-	);
-};
-
-export const DisabledWithProp = () => {
-	const [ isDisabled, setState ] = useState( true );
-	const toggleDisabled = () => {
-		setState( () => ! isDisabled );
-	};
-
-	return (
-		<div>
-			<Disabled isDisabled={ isDisabled }>
-				<Form />
-			</Disabled>
-			<Button variant="primary" onClick={ toggleDisabled }>
-				Set isDisabled to { isDisabled ? 'false' : 'true' }
-			</Button>
-		</div>
-	);
-};

package/src/disabled/test/index.js

@@ -1,240 +0,0 @@
-/**
- * External dependencies
- */
-import TestUtils from 'react-dom/test-utils';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Disabled from '../';
-
-jest.mock( '@wordpress/dom', () => {
-	const focus = jest.requireActual( '../../../../dom/src' ).focus;
-
-	return {
-		focus: {
-			...focus,
-			focusable: {
-				...focus.focusable,
-				find( context ) {
-					// In JSDOM, all elements have zero'd widths and height.
-					// This is a metric for focusable's `isVisible`, so find
-					// and apply an arbitrary non-zero width.
-					Array.from( context.querySelectorAll( '*' ) ).forEach(
-						( element ) => {
-							Object.defineProperties( element, {
-								offsetWidth: {
-									get: () => 1,
-								},
-							} );
-						}
-					);
-
-					return focus.focusable.find( ...arguments );
-				},
-			},
-		},
-	};
-} );
-
-describe( 'Disabled', () => {
-	let MutationObserver;
-
-	beforeAll( () => {
-		MutationObserver = window.MutationObserver;
-		window.MutationObserver = function () {};
-		window.MutationObserver.prototype = {
-			observe() {},
-			disconnect() {},
-		};
-	} );
-
-	afterAll( () => {
-		window.MutationObserver = MutationObserver;
-	} );
-
-	const Form = () => (
-		<form>
-			<input />
-			<div contentEditable tabIndex="0" />
-		</form>
-	);
-
-	// This is needed because TestUtils does not accept a stateless component.
-	class DisabledComponent extends Component {
-		render() {
-			const { children, isDisabled } = this.props;
-
-			return <Disabled isDisabled={ isDisabled }>{ children }</Disabled>;
-		}
-	}
-
-	it( 'will disable all fields', () => {
-		const wrapper = TestUtils.renderIntoDocument(
-			<DisabledComponent>
-				<Form />
-			</DisabledComponent>
-		);
-
-		const input = TestUtils.findRenderedDOMComponentWithTag(
-			wrapper,
-			'input'
-		);
-		const div = TestUtils.scryRenderedDOMComponentsWithTag(
-			wrapper,
-			'div'
-		)[ 1 ];
-
-		expect( input.hasAttribute( 'disabled' ) ).toBe( true );
-		expect( div.getAttribute( 'contenteditable' ) ).toBe( 'false' );
-		expect( div.hasAttribute( 'tabindex' ) ).toBe( false );
-		expect( div.hasAttribute( 'disabled' ) ).toBe( false );
-	} );
-
-	it( 'should cleanly un-disable via reconciliation', () => {
-		// If this test suddenly starts failing, it means React has become
-		// smarter about reusing children into grandfather element when the
-		// parent is dropped, so we'd need to find another way to restore
-		// original form state.
-		// Using state for this test for easier manipulation of the child props.
-		class MaybeDisable extends Component {
-			constructor() {
-				super( ...arguments );
-				this.state = { isDisabled: true };
-			}
-
-			render() {
-				return this.state.isDisabled ? (
-					<Disabled>
-						<Form />
-					</Disabled>
-				) : (
-					<Form />
-				);
-			}
-		}
-
-		const wrapper = TestUtils.renderIntoDocument( <MaybeDisable /> );
-		wrapper.setState( { isDisabled: false } );
-
-		const input = TestUtils.findRenderedDOMComponentWithTag(
-			wrapper,
-			'input'
-		);
-		const div = TestUtils.findRenderedDOMComponentWithTag( wrapper, 'div' );
-
-		expect( input.hasAttribute( 'disabled' ) ).toBe( false );
-		expect( div.getAttribute( 'contenteditable' ) ).toBe( 'true' );
-		expect( div.hasAttribute( 'tabindex' ) ).toBe( true );
-	} );
-
-	it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
-		class MaybeDisable extends Component {
-			constructor() {
-				super( ...arguments );
-				this.state = { isDisabled: true };
-			}
-
-			render() {
-				return (
-					<DisabledComponent isDisabled={ this.state.isDisabled }>
-						<Form />
-					</DisabledComponent>
-				);
-			}
-		}
-
-		const wrapper = TestUtils.renderIntoDocument( <MaybeDisable /> );
-
-		const input = TestUtils.findRenderedDOMComponentWithTag(
-			wrapper,
-			'input'
-		);
-		const div = TestUtils.scryRenderedDOMComponentsWithTag(
-			wrapper,
-			'div'
-		)[ 1 ];
-
-		expect( input.hasAttribute( 'disabled' ) ).toBe( true );
-		expect( div.getAttribute( 'contenteditable' ) ).toBe( 'false' );
-
-		wrapper.setState( { isDisabled: false } );
-
-		const input2 = TestUtils.findRenderedDOMComponentWithTag(
-			wrapper,
-			'input'
-		);
-		const div2 = TestUtils.scryRenderedDOMComponentsWithTag(
-			wrapper,
-			'div'
-		)[ 0 ];
-
-		expect( input2.hasAttribute( 'disabled' ) ).toBe( false );
-		expect( div2.getAttribute( 'contenteditable' ) ).not.toBe( 'false' );
-	} );
-
-	// Ideally, we'd have two more test cases here:
-	//
-	//  - it( 'will disable all fields on component render change' )
-	//  - it( 'will disable all fields on sneaky DOM manipulation' )
-	//
-	// Alas, JSDOM does not support MutationObserver:
-	//
-	//  https://github.com/jsdom/jsdom/issues/639
-
-	describe( 'Consumer', () => {
-		class DisabledStatus extends Component {
-			render() {
-				return (
-					<p>
-						<Disabled.Consumer>
-							{ ( isDisabled ) =>
-								isDisabled ? 'Disabled' : 'Not disabled'
-							}
-						</Disabled.Consumer>
-					</p>
-				);
-			}
-		}
-
-		test( "lets components know that they're disabled via context", () => {
-			const wrapper = TestUtils.renderIntoDocument(
-				<DisabledComponent>
-					<DisabledStatus />
-				</DisabledComponent>
-			);
-			const wrapperElement = TestUtils.findRenderedDOMComponentWithTag(
-				wrapper,
-				'p'
-			);
-			expect( wrapperElement.textContent ).toBe( 'Disabled' );
-		} );
-
-		test( "lets components know that they're not disabled via context when isDisabled is false", () => {
-			const wrapper = TestUtils.renderIntoDocument(
-				<DisabledComponent isDisabled={ false }>
-					<DisabledStatus />
-				</DisabledComponent>
-			);
-			const wrapperElement = TestUtils.findRenderedDOMComponentWithTag(
-				wrapper,
-				'p'
-			);
-			expect( wrapperElement.textContent ).toBe( 'Not disabled' );
-		} );
-
-		test( "lets components know that they're not disabled via context", () => {
-			const wrapper = TestUtils.renderIntoDocument( <DisabledStatus /> );
-			const wrapperElement = TestUtils.findRenderedDOMComponentWithTag(
-				wrapper,
-				'p'
-			);
-			expect( wrapperElement.textContent ).toBe( 'Not disabled' );
-		} );
-	} );
-} );

package/src/menu-group/test/__snapshots__/index.js.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MenuGroup should match snapshot 1`] = `
-<div
-  className="components-menu-group"
->
-  <div
-    aria-hidden="true"
-    className="components-menu-group__label"
-    id="components-menu-group-label-1"
-  >
-    My group
-  </div>
-  <div
-    aria-labelledby="components-menu-group-label-1"
-    role="group"
-  >
-    <p>
-      My item
-    </p>
-  </div>
-</div>
-`;

package/src/placeholder/test/index.js

@@ -1,163 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { more } from '@wordpress/icons';
-import { useResizeObserver } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-
-jest.mock( '@wordpress/compose', () => {
-	return {
-		...jest.requireActual( '@wordpress/compose' ),
-		useResizeObserver: jest.fn( () => [] ),
-	};
-} );
-
-describe( 'Placeholder', () => {
-	beforeEach( () => {
-		useResizeObserver.mockReturnValue( [
-			<div key="1" />,
-			{ width: 320 },
-		] );
-	} );
-
-	describe( 'basic rendering', () => {
-		it( 'should by default render label section and fieldset.', () => {
-			const placeholder = shallow( <Placeholder /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-			const placeholderInstructions = placeholder.find(
-				'.components-placeholder__instructions'
-			);
-			const placeholderFieldset = placeholder.find(
-				'.components-placeholder__fieldset'
-			);
-
-			expect( placeholder.hasClass( 'components-placeholder' ) ).toBe(
-				true
-			);
-			// Test for empty label.
-			expect( placeholderLabel.exists() ).toBe( true );
-			expect( placeholderLabel.find( 'Dashicon' ).exists() ).toBe(
-				false
-			);
-			// Test for non existant instructions.
-			expect( placeholderInstructions.exists() ).toBe( false );
-			// Test for empty fieldset.
-			expect( placeholderFieldset.exists() ).toBe( true );
-		} );
-
-		it( 'should render an Icon in the label section', () => {
-			const placeholder = shallow( <Placeholder icon={ more } /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-
-			expect( placeholderLabel.exists() ).toBe( true );
-			expect( placeholderLabel.find( 'Icon' ).exists() ).toBe( true );
-		} );
-
-		it( 'should render a label section', () => {
-			const label = 'WordPress';
-			const placeholder = shallow( <Placeholder label={ label } /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-			const child = placeholderLabel.childAt( 1 );
-
-			expect( child.text() ).toBe( label );
-		} );
-
-		it( 'should display an instructions element', () => {
-			const element = <div>Instructions</div>;
-			const placeholder = shallow(
-				<Placeholder instructions={ element } />
-			);
-			const placeholderInstructions = placeholder.find(
-				'.components-placeholder__instructions'
-			);
-			const child = placeholderInstructions.childAt( 0 );
-
-			expect( placeholderInstructions.exists() ).toBe( true );
-			expect( child.matchesElement( element ) ).toBe( true );
-		} );
-
-		it( 'should display a fieldset from the children property', () => {
-			const element = <div>Fieldset</div>;
-			const placeholder = shallow( <Placeholder children={ element } /> );
-			const placeholderFieldset = placeholder.find(
-				'fieldset.components-placeholder__fieldset'
-			);
-			const child = placeholderFieldset.childAt( 0 );
-
-			expect( placeholderFieldset.exists() ).toBe( true );
-			expect( child.matchesElement( element ) ).toBe( true );
-		} );
-
-		it( 'should display a legend if instructions are passed', () => {
-			const element = <div>Fieldset</div>;
-			const instructions = 'Choose an option.';
-			const placeholder = shallow(
-				<Placeholder
-					children={ element }
-					instructions={ instructions }
-				/>
-			);
-			const placeholderLegend = placeholder.find(
-				'legend.components-placeholder__instructions'
-			);
-
-			expect( placeholderLegend.exists() ).toBe( true );
-			expect( placeholderLegend.text() ).toEqual( instructions );
-		} );
-
-		it( 'should add an additional className to the top container', () => {
-			const placeholder = shallow(
-				<Placeholder className="wp-placeholder" />
-			);
-			expect( placeholder.hasClass( 'wp-placeholder' ) ).toBe( true );
-		} );
-
-		it( 'should add additional props to the top level container', () => {
-			const placeholder = shallow( <Placeholder test="test" /> );
-			expect( placeholder.prop( 'test' ) ).toBe( 'test' );
-		} );
-	} );
-
-	describe( 'resize aware', () => {
-		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
-			useResizeObserver.mockReturnValue( [
-				<div key="1" />,
-				{ width: 480 },
-			] );
-
-			const placeholder = shallow( <Placeholder /> );
-
-			expect( placeholder.hasClass( 'is-large' ) ).toBe( true );
-			expect( placeholder.hasClass( 'is-medium' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-small' ) ).toBe( false );
-		} );
-
-		it( 'should assign modifier class', () => {
-			useResizeObserver.mockReturnValue( [
-				<div key="1" />,
-				{ width: null },
-			] );
-
-			const placeholder = shallow( <Placeholder /> );
-
-			expect( placeholder.hasClass( 'is-large' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-medium' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-small' ) ).toBe( false );
-		} );
-	} );
-} );

package/src/swatch/index.tsx

@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-import type { SwatchProps } from './types';
-
-// This component will be deprecated. Use `ColorIndicator` instead.
-// TODO: Consolidate this component with `ColorIndicator`.
-function Swatch( { fill }: SwatchProps ) {
-	return fill ? (
-		<span className="components-swatch" style={ { background: fill } } />
-	) : (
-		<Icon icon={ swatch } />
-	);
-}
-
-export default Swatch;