@wordpress/components 19.17.0 → 20.0.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' );
-		} );
-	} );
-} );