Make memoization consistent and merge classnames

WordPress · May 2, 2023 · 1efa153 · 1efa153
1 parent cb84322
commit 1efa153
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { paramCase as kebabCase } from 'change-case';
 
 /**
@@ -115,19 +116,23 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 	popoverProps: receivedPopoverProps,
 	onClose = () => {},
 }: ColorPickerPopoverProps< T > ) {
-	const popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] = {
-		shift: true,
-		offset: 20,
-		placement: 'left-start',
-		...receivedPopoverProps,
-	};
+	const popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =
+		useMemo(
+			() => ( {
+				shift: true,
+				offset: 20,
+				placement: 'left-start',
+				...receivedPopoverProps,
+				className: classnames(
+					'components-palette-edit__popover',
+					receivedPopoverProps?.className
+				),
+			} ),
+			[ receivedPopoverProps ]
+		);
 
 	return (
-		<Popover
-			className="components-palette-edit__popover"
-			{ ...popoverProps }
-			onClose={ onClose }
-		>
+		<Popover { ...popoverProps } onClose={ onClose }>
 			{ ! isGradient && (
 				<ColorPicker
 					color={ element.color }

diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts
@@ -8,6 +8,7 @@ import type { Key, MouseEventHandler } from 'react';
  */
 import type { HeadingSize } from '../heading/types';
 import type { PopoverProps } from '../popover/types';
+import type { WordPressComponentProps } from '../ui/context';
 
 export type Color = {
 	color: string;
@@ -62,7 +63,10 @@ export type BasePaletteEdit = {
 	/**
 	 * Props to pass through to the underlying Popover component.
 	 */
-	popoverProps?: Omit< PopoverProps, 'children' >;
+	popoverProps?: Omit<
+		WordPressComponentProps< PopoverProps, 'div', false >,
+		'children'
+	>;
 };
 
 type PaletteEditColors = {