@wordpress/components 19.1.5 → 19.2.1-next.33ec3857e2.0

package/src/date-time/utils.js

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

package/src/dimension-control/README.md

@@ -13,7 +13,7 @@ In a block's `edit` implementation, render a `<DimensionControl />` component.
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { DimensionControl } from '@wordpress/block-editor';
+import { DimensionControl } from '@wordpress/components';
 
 registerBlockType( 'my-plugin/my-block', {
 	// ...

package/src/divider/README.md

@@ -9,15 +9,43 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { Divider, FormGroup, ListGroup } from '@wordpress/components/ui';
+import {
+	__experimentalDivider as Divider,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from `@wordpress/components`;
 
 function Example() {
 	return (
-		<ListGroup>
-			<FormGroup>...</FormGroup>
+		<VStack spacing={4}>
+			<Text>Some text here</Text>
 			<Divider />
-			<FormGroup>...</FormGroup>
-		</ListGroup>
+			<Text>Some more text here</Text>
+		</VStack>
 	);
 }
 ```
+
+## Props
+
+### `margin`: `number`
+
+Adjusts all margins on the inline dimension.
+
+- Required: No
+
+### `marginStart`: `number`
+
+Adjusts the inline-start margin.
+
+- Required: No
+
+### `marginEnd`: `number`
+
+Adjusts the inline-end margin.
+
+- Required: No
+
+### Inherited props
+
+`Divider` also inherits all of the [`Separator` props](https://reakit.io/docs/separator/).

package/src/divider/component.tsx

@@ -38,17 +38,18 @@ function Divider(
  * @example
  * ```js
  * import {
- *     __experimentalDivider as Divider,
- *     __experimentalText as Text }
- * from `@wordpress/components`;
+ * 		__experimentalDivider as Divider,
+ * 		__experimentalText as Text,
+ * 		__experimentalVStack as VStack,
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
- * 		<ListGroup>
- * 			<FormGroup>...</FormGroup>
+ * 		<VStack spacing={4}>
+ * 			<Text>Some text here</Text>
  * 			<Divider />
- * 			<FormGroup>...</FormGroup>
- * 		</ListGroup>
+ * 			<Text>Some more text here</Text>
+ * 		</VStack>
  * 	);
  * }
  * ```

package/src/divider/stories/index.js

@@ -1,38 +1,64 @@
 /**
  * External dependencies
  */
-import { number } from '@storybook/addon-knobs';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
+import { Text } from '../../text';
 import { Divider } from '..';
 
 export default {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
-	parameters: {
-		knobs: { disabled: false },
+	argTypes: {
+		margin: {
+			control: { type: 'number' },
+		},
+		marginStart: {
+			control: { type: 'number' },
+		},
+		marginEnd: {
+			control: { type: 'number' },
+		},
 	},
 };
 
-const BlackDivider = ( props ) => (
-	<Divider { ...props } style={ { borderColor: 'black' } } />
+const HorizontalTemplate = ( args ) => (
+	<div>
+		<Text>Some text before the divider</Text>
+		<Divider { ...args } />
+		<Text>Some text after the divider</Text>
+	</div>
 );
 
-export const _default = () => {
-	const props = {
-		margin: number( 'margin', 0 ),
-	};
-	// make the border color black to give higher contrast and help it appear in storybook better
-	return <BlackDivider { ...props } />;
+const VerticalTemplate = ( args ) => {
+	const cx = useCx();
+	const wrapperClassName = cx( css`
+		display: flex;
+		align-items: stretch;
+		justify-content: start;
+	` );
+
+	return (
+		<div className={ wrapperClassName }>
+			<Text>Some text before the divider</Text>
+			<Divider orientation="vertical" { ...args } />
+			<Text>Some text after the divider</Text>
+		</div>
+	);
 };
 
-export const splitMargins = () => {
-	const props = {
-		marginTop: number( 'marginTop', 0 ),
-		marginBottom: number( 'marginBottom', 0 ),
-	};
+export const Horizontal = HorizontalTemplate.bind( {} );
+Horizontal.args = {
+	margin: 2,
+	marginStart: undefined,
+	marginEnd: undefined,
+};
 
-	return <BlackDivider { ...props } />;
+export const Vertical = VerticalTemplate.bind( {} );
+Vertical.args = {
+	...Horizontal.args,
 };

package/src/divider/styles.ts

@@ -8,29 +8,66 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { space } from '../ui/utils/space';
-import CONFIG from '../utils/config-values';
-import type { OwnProps } from './types';
+import { rtl } from '../utils';
+import type { Props } from './types';
 
-const renderMargin = ( { margin, marginTop, marginBottom }: OwnProps ) => {
-	if ( typeof margin !== 'undefined' ) {
-		return css( {
-			marginBottom: space( margin ),
-			marginTop: space( margin ),
-		} );
-	}
+const MARGIN_DIRECTIONS: Record<
+	NonNullable< Props[ 'orientation' ] >,
+	Record< 'start' | 'end', string >
+> = {
+	vertical: {
+		start: 'marginLeft',
+		end: 'marginRight',
+	},
+	horizontal: {
+		start: 'marginTop',
+		end: 'marginBottom',
+	},
+};
+
+// Renders the correct margins given the Divider's `orientation` and the writing direction.
+// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
+// the latter will take priority.
+const renderMargin = ( {
+	'aria-orientation': orientation = 'horizontal',
+	margin,
+	marginStart,
+	marginEnd,
+}: Props ) =>
+	css(
+		rtl( {
+			[ MARGIN_DIRECTIONS[ orientation ].start ]: space(
+				marginStart ?? margin
+			),
+			[ MARGIN_DIRECTIONS[ orientation ].end ]: space(
+				marginEnd ?? margin
+			),
+		} )()
+	);
 
+const renderBorder = ( {
+	'aria-orientation': orientation = 'horizontal',
+}: Props ) => {
 	return css( {
-		marginTop: space( marginTop ),
-		marginBottom: space( marginBottom ),
+		[ orientation === 'vertical'
+			? 'borderRight'
+			: 'borderBottom' ]: '1px solid currentColor',
 	} );
 };
 
-export const DividerView = styled.hr< OwnProps >`
-	border-color: ${ CONFIG.colorDivider };
-	border-width: 0 0 1px 0;
-	height: 0;
+const renderSize = ( {
+	'aria-orientation': orientation = 'horizontal',
+}: Props ) =>
+	css( {
+		height: orientation === 'vertical' ? 'auto' : 0,
+		width: orientation === 'vertical' ? 0 : 'auto',
+	} );
+
+export const DividerView = styled.hr< Props >`
+	border: 0;
 	margin: 0;
-	width: auto;
 
+	${ renderBorder }
+	${ renderSize }
 	${ renderMargin }
 `;

package/src/divider/test/__snapshots__/index.js.snap

@@ -2,10 +2,10 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  border-color: rgba(0, 0, 0, 0.1);
-  border-width: 0 0 1px 0;
-  height: 0;
+  border: 0;
   margin: 0;
+  border-bottom: 1px solid currentColor;
+  height: 0;
   width: auto;
 }
 
@@ -25,8 +25,8 @@ Snapshot Diff:
 
 @@ -2,10 +2,8 @@
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border": "0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 7)",
@@ -36,15 +36,15 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginBottom 1`] = `
+exports[`props should render marginEnd 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
 @@ -2,9 +2,8 @@
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border": "0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 5)",
@@ -53,15 +53,15 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginTop 1`] = `
+exports[`props should render marginStart 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
 @@ -2,9 +2,8 @@
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border": "0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-top": "calc(4px * 5)",

package/src/divider/test/index.js

@@ -18,15 +18,15 @@ describe( 'props', () => {
 		expect( base.container.firstChild ).toMatchSnapshot();
 	} );
 
-	test( 'should render marginTop', () => {
-		const { container } = render( <Divider marginTop={ 5 } /> );
+	test( 'should render marginStart', () => {
+		const { container } = render( <Divider marginStart={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);
 	} );
 
-	test( 'should render marginBottom', () => {
-		const { container } = render( <Divider marginBottom={ 5 } /> );
+	test( 'should render marginEnd', () => {
+		const { container } = render( <Divider marginEnd={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);

package/src/divider/types.ts

@@ -11,17 +11,17 @@ import type { SpaceInput } from '../ui/utils/space';
 
 export interface OwnProps {
 	/**
-	 * Adjusts all margins.
+	 * Adjusts all margins on the inline dimension.
 	 */
 	margin?: SpaceInput;
 	/**
-	 * Adjusts top margins.
+	 * Adjusts the inline-start margin.
 	 */
-	marginTop?: SpaceInput;
+	marginStart?: SpaceInput;
 	/**
-	 * Adjusts bottom margins.
+	 * Adjusts the inline-end margin.
 	 */
-	marginBottom?: SpaceInput;
+	marginEnd?: SpaceInput;
 }
 
 export interface Props extends Omit< SeparatorProps, 'children' >, OwnProps {}

package/src/drop-zone/index.js

@@ -39,10 +39,14 @@ export default function DropZoneComponent( {
 			const files = getFilesFromDataTransfer( event.dataTransfer );
 			const html = event.dataTransfer.getData( 'text/html' );
 
-			if ( files.length && onFilesDrop ) {
-				onFilesDrop( files );
-			} else if ( html && onHTMLDrop ) {
+			/**
+			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
+			 * The order of the checks is important to recognise the HTML drop.
+			 */
+			if ( html && onHTMLDrop ) {
 				onHTMLDrop( html );
+			} else if ( files.length && onFilesDrop ) {
+				onFilesDrop( files );
 			} else if ( onDrop ) {
 				onDrop( event );
 			}
@@ -52,15 +56,19 @@ export default function DropZoneComponent( {
 
 			let _type = 'default';
 
-			if (
+			/**
+			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
+			 * The order of the checks is important to recognise the HTML drop.
+			 */
+			if ( includes( event.dataTransfer.types, 'text/html' ) ) {
+				_type = 'html';
+			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
 				includes( event.dataTransfer.types, 'Files' ) ||
 				getFilesFromDataTransfer( event.dataTransfer ).length > 0
 			) {
 				_type = 'file';
-			} else if ( includes( event.dataTransfer.types, 'text/html' ) ) {
-				_type = 'html';
 			}
 
 			setType( _type );

package/src/drop-zone/provider.js

@@ -5,6 +5,7 @@ import deprecated from '@wordpress/deprecated';
 
 export default function DropZoneProvider( { children } ) {
 	deprecated( 'wp.components.DropZoneProvider', {
+		since: '5.8',
 		hint:
 			'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
 	} );

package/src/dropdown-menu/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/DropdownMenu',
 	component: DropdownMenu,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/duotone-picker/README.md

@@ -22,7 +22,7 @@ const Example = () => {
 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
 	return (
 		<>
-			<DuotoneControl
+			<DuotonePicker
 				duotonePalette={ DUOTONE_PALETTE }
 				colorPalette={ COLOR_PALETTE }
 				value={ duotone }

package/src/elevation/stories/index.js

@@ -26,7 +26,7 @@ export default {
 	component: Elevation,
 	title: 'Components (Experimental)/Elevation',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/external-link/stories/index.js

@@ -11,7 +11,7 @@ export default {
 	title: 'Components/ExternalLink',
 	component: ExternalLink,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/flyout/styles.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import styled, { StyledComponent } from '@emotion/styled';
 // eslint-disable-next-line no-restricted-imports
 import { Popover as ReakitPopover } from 'reakit';
 
@@ -12,7 +12,9 @@ import { Card, CardBody } from '../card';
 import * as ZIndex from '../utils/z-index';
 import CONFIG from '../utils/config-values';
 
-export const FlyoutContentView = styled( ReakitPopover )`
+export const FlyoutContentView: StyledComponent<
+	React.ComponentPropsWithoutRef< typeof ReakitPopover >
+> = styled( ReakitPopover )`
 	z-index: ${ ZIndex.Flyout };
 	box-sizing: border-box;
 	opacity: 0;

package/src/focusable-iframe/index.js

@@ -7,6 +7,7 @@ import deprecated from '@wordpress/deprecated';
 export default function FocusableIframe( { iframeRef, ...props } ) {
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
+		since: '5.9',
 		alternative: 'wp.compose.useFocusableIframe',
 	} );
 	// Disable reason: The rendered iframe is a pass-through component,

package/src/font-size-picker/index.js

@@ -47,23 +47,28 @@ function FontSizePicker(
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
 
-	// The main font size UI displays a toggle group when the presets are less
-	// than six and a select control when they are more.
-	//
-	// A select control is also used when the value of a preset cannot be
-	// immediately computed (eg. 'calc', 'var').
-	const shouldUseSelectControl =
-		fontSizes.length > 5 ||
-		fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) );
-
+	/**
+	 * The main font size UI displays a toggle group when the presets are less
+	 * than six and a select control when they are more.
+	 */
+	const fontSizesContainComplexValues = fontSizes.some(
+		( { size } ) => ! isSimpleCssValue( size )
+	);
+	const shouldUseSelectControl = fontSizes.length > 5;
 	const options = useMemo(
 		() =>
 			getFontSizeOptions(
 				shouldUseSelectControl,
 				fontSizes,
-				disableCustomFontSizes
+				disableCustomFontSizes,
+				fontSizesContainComplexValues
 			),
-		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
+		[
+			shouldUseSelectControl,
+			fontSizes,
+			disableCustomFontSizes,
+			fontSizesContainComplexValues,
+		]
 	);
 	const selectedOption = getSelectedOption( fontSizes, value );
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
@@ -88,12 +93,21 @@ function FontSizePicker(
 		}
 		// Calculate the `hint` for toggle group control.
 		let hint = selectedOption.name;
-		if ( typeof selectedOption.size === 'string' ) {
+		if (
+			! fontSizesContainComplexValues &&
+			typeof selectedOption.size === 'string'
+		) {
 			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
 			hint += `(${ unit })`;
 		}
 		return hint;
-	}, [ showCustomValueControl, selectedOption?.slug, value, isCustomValue ] );
+	}, [
+		showCustomValueControl,
+		selectedOption?.slug,
+		value,
+		isCustomValue,
+		fontSizesContainComplexValues,
+	] );
 
 	if ( ! options ) {
 		return null;

package/src/font-size-picker/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -156,3 +156,65 @@ export const differentControlBySize = () => {
 		<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
 	);
 };
+
+export const withComplexCSSValues = () => {
+	const options = [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: '0.65rem',
+		},
+		{
+			name: 'Medium',
+			slug: 'medium',
+			size: '1.125rem',
+		},
+		{
+			name: 'Large',
+			slug: 'large',
+			size: '1.7rem',
+		},
+		{
+			name: 'Extra Large',
+			slug: 'extra-large',
+			size: '1.95rem',
+		},
+		{
+			name: 'Extra Extra Large',
+			slug: 'extra-extra-large',
+			size: '2.5rem',
+		},
+		{
+			name: 'Huge',
+			slug: 'huge',
+			size: '2.8rem',
+		},
+	];
+	const showMoreFontSizes = boolean( 'Add more font sizes', false );
+	const addComplexCssValues = boolean(
+		'Add some complex css values(calc, var, etc..)',
+		true
+	);
+
+	const _options = options.map( ( option, index ) => {
+		const _option = { ...option };
+		// Adding just one complex css value is enough (first element);
+		if ( addComplexCssValues && ! index ) {
+			_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
+		}
+		return _option;
+	} );
+
+	const fontSizes = _options.slice(
+		0,
+		showMoreFontSizes ? _options.length : 5
+	);
+	return (
+		<div style={ { maxWidth: '248px' } }>
+			<FontSizePickerWithState
+				fontSizes={ fontSizes }
+				initialValue={ '1.125rem' }
+			/>
+		</div>
+	);
+};