@wordpress/dataviews 7.0.0 → 7.0.1-next.f34ab90e9.0

package/build-types/components/dataform/stories/index.story.d.ts

@@ -80,8 +80,10 @@ export declare const LayoutMixed: {
     render: () => import("react").JSX.Element;
 };
 export declare const Validation: {
-    render: ({ required }: {
+    render: ({ required, type, custom, }: {
         required: boolean;
+        custom: boolean;
+        type: "regular" | "panel";
     }) => import("react").JSX.Element;
     argTypes: {
         required: {
@@ -90,9 +92,24 @@ export declare const Validation: {
             };
             description: string;
         };
+        type: {
+            control: {
+                type: string;
+            };
+            description: string;
+            options: string[];
+        };
+        custom: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
     args: {
         required: boolean;
+        type: string;
+        custom: boolean;
     };
 };
 export declare const Visibility: {

package/build-types/components/dataform/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../src/components/dataform/stories/index.story.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,QAAQ,MAAM,UAAU,CAAC;AAixBhC,QAAA,MAAM,IAAI;;;CAGT,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO;uCArnBjB;QACF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;QAChD,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KACnD;;;;;;;;;;CA2nBA,CAAC;AAEF,eAAO,MAAM,UAAU;6BA5QuB;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;;CAuRpE,CAAC;AAEF,eAAO,MAAM,WAAW;yCA/hBrB;QACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;QAC/C,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;QACnD,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;KACzC;;;;;;;;;;;;;;;;;CAyiBA,CAAC;AAEF,eAAO,MAAM,aAAa;uCA7pBvB;QACF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;QAChD,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KACnD;;;;;;;;;;CAmqBA,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,UAAU;2BA9dqB;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;;CAyehE,CAAC;AAEF,eAAO,MAAM,UAAU;;CAEtB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../src/components/dataform/stories/index.story.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,QAAQ,MAAM,UAAU,CAAC;AA6xBhC,QAAA,MAAM,IAAI;;;CAGT,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO;uCAjoBjB;QACF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;QAChD,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KACnD;;;;;;;;;;CAuoBA,CAAC;AAEF,eAAO,MAAM,UAAU;6BA5QuB;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;;CAuRpE,CAAC;AAEF,eAAO,MAAM,WAAW;yCA3iBrB;QACF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;QAC/C,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;QACnD,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;KACzC;;;;;;;;;;;;;;;;;CAqjBA,CAAC;AAEF,eAAO,MAAM,aAAa;uCAzqBvB;QACF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;QAChD,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;KACnD;;;;;;;;;;CA+qBA,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,UAAU;0CAtepB;QACF,QAAQ,EAAE,OAAO,CAAC;QAClB,MAAM,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;KAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwfA,CAAC;AAEF,eAAO,MAAM,UAAU;;CAEtB,CAAC"}

package/build-wp/index.js

@@ -5315,7 +5315,7 @@ function addContainer(ariaLive = "polite") {
   const container = document.createElement("div");
   container.id = `a11y-speak-${ariaLive}`;
   container.className = "a11y-speak-region";
-  container.setAttribute("style", "position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;");
+  container.setAttribute("style", "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;");
   container.setAttribute("aria-live", ariaLive);
   container.setAttribute("aria-relevant", "additions text");
   container.setAttribute("aria-atomic", "true");
@@ -5335,8 +5335,8 @@ function addIntroText() {
   introText.id = "a11y-speak-intro-text";
   introText.className = "a11y-speak-intro-text";
   introText.textContent = __3("Notifications");
-  introText.setAttribute("style", "position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;");
-  introText.setAttribute("hidden", "hidden");
+  introText.setAttribute("style", "position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;");
+  introText.setAttribute("hidden", "");
   const {
     body
   } = document;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "7.0.0",
+	"version": "7.0.1-next.f34ab90e9.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -46,19 +46,19 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
-		"@wordpress/base-styles": "^6.5.0",
-		"@wordpress/components": "^30.2.0",
-		"@wordpress/compose": "^7.29.0",
-		"@wordpress/data": "^10.29.0",
-		"@wordpress/date": "^5.29.0",
-		"@wordpress/element": "^6.29.0",
-		"@wordpress/i18n": "^6.2.0",
-		"@wordpress/icons": "^10.29.0",
-		"@wordpress/keycodes": "^4.29.0",
-		"@wordpress/primitives": "^4.29.0",
-		"@wordpress/private-apis": "^1.29.0",
-		"@wordpress/url": "^4.29.0",
-		"@wordpress/warning": "^3.29.0",
+		"@wordpress/base-styles": "^6.5.1-next.f34ab90e9.0",
+		"@wordpress/components": "^30.2.1-next.f34ab90e9.0",
+		"@wordpress/compose": "^7.29.1-next.f34ab90e9.0",
+		"@wordpress/data": "^10.29.1-next.f34ab90e9.0",
+		"@wordpress/date": "^5.29.1-next.f34ab90e9.0",
+		"@wordpress/element": "^6.29.1-next.f34ab90e9.0",
+		"@wordpress/i18n": "^6.2.1-next.f34ab90e9.0",
+		"@wordpress/icons": "^10.29.1-next.f34ab90e9.0",
+		"@wordpress/keycodes": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/primitives": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/private-apis": "^1.29.1-next.f34ab90e9.0",
+		"@wordpress/url": "^4.29.1-next.f34ab90e9.0",
+		"@wordpress/warning": "^3.29.1-next.f34ab90e9.0",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
 		"fast-deep-equal": "^3.1.3",
@@ -74,5 +74,5 @@
 	"scripts": {
 		"build:wp": "node build"
 	},
-	"gitHead": "445ede01e8abc8e49a1101b21a3651adbe852120"
+	"gitHead": "91f58004986ec6faf118825f925ac7873d171986"
 }

package/src/components/dataform/stories/index.story.tsx

@@ -379,25 +379,59 @@ function CustomEditControl< Item >( {
 	);
 }
 
-const ValidationComponent = ( { required }: { required: boolean } ) => {
+const ValidationComponent = ( {
+	required,
+	type,
+	custom,
+}: {
+	required: boolean;
+	custom: boolean;
+	type: 'regular' | 'panel';
+} ) => {
 	type ValidatedItem = {
 		text: string;
 		email: string;
 		integer: number;
 		boolean: boolean;
 		customEdit: string;
-		customValidation: string;
 	};
 
 	const [ post, setPost ] = useState< ValidatedItem >( {
-		text: 'Hello, World!',
+		text: 'Can have letters and spaces',
 		email: 'hi@example.com',
 		integer: 2,
 		boolean: true,
 		customEdit: 'custom control',
-		customValidation: 'potato',
 	} );
 
+	const customTextRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z ]+$/.test( value.text ) ) {
+			return 'Value must only contain letters and spaces.';
+		}
+
+		return null;
+	};
+	const customEmailRule = ( value: ValidatedItem ) => {
+		if ( ! /^[a-zA-Z0-9._%+-]+@example\.com$/.test( value.email ) ) {
+			return 'Email address must be from @example.com domain.';
+		}
+
+		return null;
+	};
+	const customIntegerRule = ( value: ValidatedItem ) => {
+		if ( value.integer % 2 !== 0 ) {
+			return 'Integer must be an even number.';
+		}
+
+		return null;
+	};
+
+	const maybeCustomRule = (
+		rule: ( item: ValidatedItem ) => null | string
+	) => {
+		return custom ? rule : undefined;
+	};
+
 	const _fields: Field< ValidatedItem >[] = [
 		{
 			id: 'text',
@@ -405,6 +439,7 @@ const ValidationComponent = ( { required }: { required: boolean } ) => {
 			label: 'Text',
 			isValid: {
 				required,
+				custom: maybeCustomRule( customTextRule ),
 			},
 		},
 		{
@@ -413,6 +448,7 @@ const ValidationComponent = ( { required }: { required: boolean } ) => {
 			label: 'e-mail',
 			isValid: {
 				required,
+				custom: maybeCustomRule( customEmailRule ),
 			},
 		},
 		{
@@ -421,6 +457,7 @@ const ValidationComponent = ( { required }: { required: boolean } ) => {
 			label: 'Integer',
 			isValid: {
 				required,
+				custom: maybeCustomRule( customIntegerRule ),
 			},
 		},
 		{
@@ -439,36 +476,11 @@ const ValidationComponent = ( { required }: { required: boolean } ) => {
 				required,
 			},
 		},
-		{
-			id: 'customValidation',
-			type: 'text',
-			label: 'Custom validation',
-			isValid: {
-				required,
-				custom: ( value: ValidatedItem ) => {
-					if (
-						! [ 'tomato', 'potato' ].includes(
-							value.customValidation
-						)
-					) {
-						return 'Value must be one of "tomato", "potato"';
-					}
-
-					return null;
-				},
-			},
-		},
 	];
 
 	const form = {
-		fields: [
-			'text',
-			'email',
-			'integer',
-			'boolean',
-			'customEdit',
-			'customValidation',
-		],
+		layout: { type },
+		fields: [ 'text', 'email', 'integer', 'boolean', 'customEdit' ],
 	};
 
 	const canSave = isItemValid( post, _fields, form );
@@ -864,9 +876,20 @@ export const Validation = {
 			control: { type: 'boolean' },
 			description: 'Whether or not the fields are required.',
 		},
+		type: {
+			control: { type: 'select' },
+			description: 'Chooses the validation type.',
+			options: [ 'regular', 'panel' ],
+		},
+		custom: {
+			control: { type: 'boolean' },
+			description: 'Whether or not the fields have custom validation.',
+		},
 	},
 	args: {
 		required: true,
+		type: 'regular',
+		custom: true,
 	},
 };