@wordpress/dataviews 8.0.2-next.836ecdcae.0 → 9.0.0

package/src/dataform-controls/password.tsx

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { seen, unseen } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import ValidatedText from './utils/validated-input';
+import type { DataFormControlProps } from '../types';
+
+export default function Password< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	const toggleVisibility = useCallback( () => {
+		setIsVisible( ( prev ) => ! prev );
+	}, [] );
+
+	return (
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: isVisible ? 'text' : 'password',
+				suffix: (
+					<Button
+						icon={ isVisible ? unseen : seen }
+						onClick={ toggleVisibility }
+						size="small"
+						variant="tertiary"
+						aria-label={
+							isVisible
+								? __( 'Hide password' )
+								: __( 'Show password' )
+						}
+					/>
+				),
+			} }
+		/>
+	);
+}

package/src/dataform-controls/radio.tsx

@@ -1,13 +1,21 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
-import { RadioControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedRadioControl } = unlock( privateApis );
 
 export default function Radio< Item >( {
 	data,
@@ -15,23 +23,57 @@ export default function Radio< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label } = field;
-	const value = field.getValue( { item: data } );
+	const { label, description, elements, getValue, setValue } = field;
+	const value = getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedRadioControl
+			>[ 'customValidity' ]
+		>( undefined );
 
 	const onChangeControl = useCallback(
 		( newValue: string ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
 	);
 
-	if ( field.elements ) {
+	if ( elements ) {
 		return (
-			<RadioControl
+			<ValidatedRadioControl
+				required={ !! field.isValid?.required }
+				onValidate={ onValidateControl }
+				customValidity={ customValidity }
 				label={ label }
+				help={ description }
 				onChange={ onChangeControl }
-				options={ field.elements }
+				options={ elements }
 				selected={ value }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>

package/src/dataform-controls/relative-date-control.tsx

@@ -20,10 +20,15 @@ import { __ } from '@wordpress/i18n';
  */
 import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
 
+export type DateRelative = {
+	value?: string | number;
+	unit?: string;
+};
+
 interface RelativeDateControlProps {
 	id: string;
-	value: { value?: string | number; unit?: string };
-	onChange: ( value: any ) => void;
+	value: DateRelative;
+	onChange: ( args: DateRelative ) => void;
 	label: string;
 	hideLabelFromVision?: boolean;
 	options: { value: string; label: string }[];
@@ -58,18 +63,14 @@ export default function RelativeDateControl( {
 
 	const onChangeValue = useCallback(
 		( newValue: string | undefined ) =>
-			onChange( {
-				[ id ]: { value: Number( newValue ), unit },
-			} ),
-		[ id, onChange, unit ]
+			onChange( { value: Number( newValue ), unit } ),
+		[ onChange, unit ]
 	);
 
 	const onChangeUnit = useCallback(
 		( newUnit: string | undefined ) =>
-			onChange( {
-				[ id ]: { value: relValue, unit: newUnit },
-			} ),
-		[ id, onChange, relValue ]
+			onChange( { value: relValue, unit: newUnit } ),
+		[ onChange, relValue ]
 	);
 
 	return (

package/src/dataform-controls/select.tsx

@@ -1,14 +1,22 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedSelectControl } = unlock( privateApis );
 
 export default function Select< Item >( {
 	data,
@@ -16,15 +24,47 @@ export default function Select< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, type } = field;
+	const { type, label, description, getValue, setValue } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedSelectControl
+			>[ 'customValidity' ]
+		>( undefined );
+
 	const isMultiple = type === 'array';
-	const value = field.getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
+	const value = getValue( { item: data } ) ?? ( isMultiple ? [] : '' );
+
 	const onChangeControl = useCallback(
 		( newValue: any ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
 	);
 
 	const fieldElements = field?.elements ?? [];
@@ -48,10 +88,13 @@ export default function Select< Item >( {
 			  ];
 
 	return (
-		<SelectControl
+		<ValidatedSelectControl
+			required={ !! field.isValid?.required }
+			onValidate={ onValidateControl }
+			customValidity={ customValidity }
 			label={ label }
 			value={ value }
-			help={ field.description }
+			help={ description }
 			options={ elements }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize

package/src/dataform-controls/telephone.tsx

@@ -1,8 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { mobile } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import ValidatedText from './utils/validated-text';
+import ValidatedText from './utils/validated-input';
 
 export default function Telephone< Item >( {
 	data,
@@ -12,7 +21,18 @@ export default function Telephone< Item >( {
 }: DataFormControlProps< Item > ) {
 	return (
 		<ValidatedText
-			{ ...{ data, field, onChange, hideLabelFromVision, type: 'tel' } }
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: 'tel',
+				prefix: (
+					<InputControlPrefixWrapper variant="icon">
+						<Icon icon={ mobile } />
+					</InputControlPrefixWrapper>
+				),
+			} }
 		/>
 	);
 }

package/src/dataform-controls/text.tsx

@@ -1,16 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { createElement } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
-import ValidatedText from './utils/validated-text';
+import ValidatedText from './utils/validated-input';
 
 export default function Text< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	config,
 }: DataFormControlProps< Item > ) {
+	const { prefix, suffix } = config || {};
+
 	return (
-		<ValidatedText { ...{ data, field, onChange, hideLabelFromVision } } />
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				prefix: prefix ? createElement( prefix ) : undefined,
+				suffix: suffix ? createElement( suffix ) : undefined,
+			} }
+		/>
 	);
 }

package/src/dataform-controls/textarea.tsx

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedTextareaControl } = unlock( privateApis );
+
+export default function Textarea< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+	config,
+}: DataFormControlProps< Item > ) {
+	const { rows = 4 } = config || {};
+	const { label, placeholder, description, setValue } = field;
+	const value = field.getValue( { item: data } );
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedTextareaControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
+
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
+	);
+
+	return (
+		<ValidatedTextareaControl
+			required={ !! field.isValid?.required }
+			onValidate={ onValidateControl }
+			customValidity={ customValidity }
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			rows={ rows }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}

package/src/dataform-controls/toggle-group.tsx

@@ -1,16 +1,24 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
 /**
  * WordPress dependencies
  */
 import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
+	privateApis,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedToggleGroupControl } = unlock( privateApis );
 
 export default function ToggleGroup< Item >( {
 	data,
@@ -18,15 +26,44 @@ export default function ToggleGroup< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id } = field;
-	const value = field.getValue( { item: data } );
+	const { getValue, setValue } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedToggleGroupControl
+			>[ 'customValidity' ]
+		>( undefined );
+	const value = getValue( { item: data } );
 
 	const onChangeControl = useCallback(
 		( newValue: string | number | undefined ) =>
-			onChange( {
-				[ id ]: newValue,
-			} ),
-		[ id, onChange ]
+			onChange( setValue( { item: data, value: newValue } ) ),
+		[ data, onChange, setValue ]
+	);
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
 	);
 
 	if ( field.elements ) {
@@ -34,7 +71,10 @@ export default function ToggleGroup< Item >( {
 			( el ) => el.value === value
 		);
 		return (
-			<ToggleGroupControl
+			<ValidatedToggleGroupControl
+				required={ !! field.isValid?.required }
+				onValidate={ onValidateControl }
+				customValidity={ customValidity }
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				isBlock
@@ -51,7 +91,7 @@ export default function ToggleGroup< Item >( {
 						value={ el.value }
 					/>
 				) ) }
-			</ToggleGroupControl>
+			</ValidatedToggleGroupControl>
 		);
 	}
 

package/src/dataform-controls/toggle.tsx

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import deepMerge from 'deepmerge';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/components';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import { unlock } from '../lock-unlock';
+
+const { ValidatedToggleControl } = unlock( privateApis );
+
+export default function Toggle< Item >( {
+	field,
+	onChange,
+	data,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { label, description, getValue, setValue } = field;
+	const [ customValidity, setCustomValidity ] =
+		useState<
+			React.ComponentProps<
+				typeof ValidatedToggleControl
+			>[ 'customValidity' ]
+		>( undefined );
+
+	const onChangeControl = useCallback( () => {
+		onChange(
+			setValue( { item: data, value: ! getValue( { item: data } ) } )
+		);
+	}, [ onChange, setValue, data, getValue ] );
+
+	const onValidateControl = useCallback(
+		( newValue: any ) => {
+			const message = field.isValid?.custom?.(
+				deepMerge(
+					data,
+					setValue( {
+						item: data,
+						value: newValue,
+					} ) as Partial< Item >
+				),
+				field
+			);
+
+			if ( message ) {
+				setCustomValidity( {
+					type: 'invalid',
+					message,
+				} );
+				return;
+			}
+
+			setCustomValidity( undefined );
+		},
+		[ data, field, setValue ]
+	);
+
+	return (
+		<ValidatedToggleControl
+			required={ !! field.isValid.required }
+			onValidate={ onValidateControl }
+			customValidity={ customValidity }
+			hidden={ hideLabelFromVision }
+			__nextHasNoMarginBottom
+			label={ label }
+			help={ description }
+			checked={ getValue( { item: data } ) }
+			onChange={ onChangeControl }
+		/>
+	);
+}

package/src/dataform-controls/url.tsx

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { link } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+import ValidatedText from './utils/validated-input';
+
+export default function Url< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	return (
+		<ValidatedText
+			{ ...{
+				data,
+				field,
+				onChange,
+				hideLabelFromVision,
+				type: 'url',
+				prefix: (
+					<InputControlPrefixWrapper variant="icon">
+						<Icon icon={ link } />
+					</InputControlPrefixWrapper>
+				),
+			} }
+		/>
+	);
+}