From 37e4e72203c99f56b1c1691a56878613e5e4e38c Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Mon, 30 Dec 2024 16:33:03 +0530
Subject: [PATCH] feat: Improve developer experience for presets

---
 packages/components/src/box-control/index.tsx | 9 +++++++++
 packages/components/src/box-control/types.ts  | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index d4d4b03f893036..e38d5ac51ae5a2 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -4,6 +4,7 @@
 import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -166,6 +167,14 @@ function BoxControl( {
 	} );
 	const sidesToRender = getAllowedSides( sides );
 
+	if ( ( presets && ! presetKey ) || ( ! presets && presetKey ) ) {
+		warning(
+			presets
+				? '`presetKey` is required when `presets` is defined.'
+				: '`presets` is required when `presetKey` is defined.'
+		);
+	}
+
 	return (
 		<Grid
 			id={ id }
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index 43629e09258a58..d0a353024c5fda 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -109,7 +109,9 @@ export type BoxControlProps = Pick< UnitControlProps, 'units' > &
 		 * If you provide a list of presets, you must provide a preset key to use.
 		 * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`
 		 */
-		presetKey?: string;
+		presetKey?: BoxControlProps[ 'presets' ] extends undefined
+			? never
+			: string;
 	};
 
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {