@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/date-time/test/time.js

@@ -278,7 +278,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex < dayInputIndex ).toBe( true );
+		expect( monthInputIndex > dayInputIndex ).toBe( true );
 
 		rerender(
 			<form aria-label="form">
@@ -299,7 +299,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex > dayInputIndex ).toBe( true );
+		expect( monthInputIndex < dayInputIndex ).toBe( true );
 	} );
 
 	it( 'Should set a time when passed a null currentTime', () => {

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

@@ -0,0 +1,32 @@
+/**
+ * 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/time.js

@@ -196,13 +196,13 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 
 	const dayMonthFormat = is12Hour ? (
 		<>
-			{ dayFormat }
 			{ monthFormat }
+			{ dayFormat }
 		</>
 	) : (
 		<>
-			{ monthFormat }
 			{ dayFormat }
+			{ monthFormat }
 		</>
 	);
 

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

@@ -11,9 +11,11 @@ This feature is still experimental. “Experimental” means this is an early im
 In a block's `edit` implementation, render a `<DimensionControl />` component.
 
 ```jsx
+import { partialRight } from 'lodash';
+
 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

@@ -3,7 +3,6 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**
@@ -38,17 +37,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/index.js

@@ -27,19 +27,20 @@ function useObservableState( initialState, onStateChange ) {
 	];
 }
 
-export default function Dropdown( {
-	renderContent,
-	renderToggle,
-	position = 'bottom right',
-	className,
-	contentClassName,
-	expandOnMobile,
-	headerTitle,
-	focusOnMount,
-	popoverProps,
-	onClose,
-	onToggle,
-} ) {
+export default function Dropdown( props ) {
+	const {
+		renderContent,
+		renderToggle,
+		position = 'bottom right',
+		className,
+		contentClassName,
+		expandOnMobile,
+		headerTitle,
+		focusOnMount,
+		popoverProps,
+		onClose,
+		onToggle,
+	} = props;
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 

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/hook.js

@@ -112,6 +112,7 @@ export function useElevation( props ) {
 		active,
 		borderRadius,
 		className,
+		cx,
 		focus,
 		hover,
 		isInteractive,

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/elevation/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 export type Props = {

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/external-link/styles/external-link-styles.js

@@ -9,9 +9,9 @@ import styled from '@emotion/styled';
 import { Icon } from '@wordpress/icons';
 
 export const StyledIcon = styled( Icon )`
-	width: 1.4em;
-	height: 1.4em;
-	margin: -0.2em 0.1em 0;
+	width: 1em;
+	height: 1em;
+	margin: 0;
 	vertical-align: middle;
 	fill: currentColor;
 `;

package/src/flex/flex/hook.js

@@ -126,6 +126,7 @@ export function useFlex( props ) {
 	}, [
 		align,
 		className,
+		cx,
 		direction,
 		expanded,
 		gap,

package/src/flex/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 /**

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/flyout/types.ts

@@ -3,7 +3,6 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { PopoverStateReturn } from 'reakit';
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties, FunctionComponentElement } from 'react';
 
 /**