@wordpress/components 28.9.0 → 28.11.0

package/src/{dropdown-menu-v2 → menu}/types.ts

@@ -4,9 +4,9 @@
 import type * as Ariakit from '@ariakit/react';
 import type { Placement } from '@floating-ui/react-dom';
 
-export interface DropdownMenuContext {
+export interface MenuContext {
 	/**
-	 * The ariakit store shared across all DropdownMenu subcomponents.
+	 * The ariakit store shared across all Menu subcomponents.
 	 */
 	store: Ariakit.MenuStore;
 	/**
@@ -15,33 +15,33 @@ export interface DropdownMenuContext {
 	variant?: 'toolbar';
 }
 
-export interface DropdownMenuProps {
+export interface MenuProps {
 	/**
-	 * The trigger button.
+	 * The button triggering the menu popover.
 	 */
 	trigger: React.ReactElement;
 	/**
-	 * The contents of the dropdown.
+	 * The contents of the menu (ie. one or more menu items).
 	 */
 	children?: React.ReactNode;
 	/**
-	 * The open state of the dropdown menu when it is initially rendered. Use when
+	 * The open state of the menu popover when it is initially rendered. Use when
 	 * not wanting to control its open state.
 	 *
 	 * @default false
 	 */
 	defaultOpen?: boolean;
 	/**
-	 * The controlled open state of the dropdown menu. Must be used in conjunction
+	 * The controlled open state of the menu popover. Must be used in conjunction
 	 * with `onOpenChange`.
 	 */
 	open?: boolean;
 	/**
-	 * Event handler called when the open state of the dropdown menu changes.
+	 * Event handler called when the open state of the menu popover changes.
 	 */
 	onOpenChange?: ( open: boolean ) => void;
 	/**
-	 * The modality of the dropdown menu. When set to true, interaction with
+	 * The modality of the menu popover. When set to true, interaction with
 	 * outside elements will be disabled and only menu content will be visible to
 	 * screen readers.
 	 *
@@ -49,7 +49,7 @@ export interface DropdownMenuProps {
 	 */
 	modal?: boolean;
 	/**
-	 * The placement of the dropdown menu popover.
+	 * The placement of the menu popover.
 	 *
 	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
 	 */
@@ -80,21 +80,22 @@ export interface DropdownMenuProps {
 		  ) => boolean );
 }
 
-export interface DropdownMenuGroupProps {
+export interface MenuGroupProps {
 	/**
-	 * The contents of the dropdown menu group.
+	 * The contents of the menu group (ie. an optional menu group label and one
+	 * or more menu items).
 	 */
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuGroupLabelProps {
+export interface MenuGroupLabelProps {
 	/**
-	 * The contents of the dropdown menu group.
+	 * The contents of the menu group label.
 	 */
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuItemProps {
+export interface MenuItemProps {
 	/**
 	 * The contents of the menu item.
 	 */
@@ -108,7 +109,7 @@ export interface DropdownMenuItemProps {
 	 */
 	suffix?: React.ReactNode;
 	/**
-	 * Whether to hide the parent menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default true
 	 */
@@ -119,10 +120,10 @@ export interface DropdownMenuItemProps {
 	disabled?: boolean;
 }
 
-export interface DropdownMenuCheckboxItemProps
-	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuCheckboxItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * Whether to hide the dropdown menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default false
 	 */
@@ -151,10 +152,10 @@ export interface DropdownMenuCheckboxItemProps
 	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 }
 
-export interface DropdownMenuRadioItemProps
-	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
+export interface MenuRadioItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * Whether to hide the dropdown menu when the item is clicked.
+	 * Whether to hide the menu popover when the menu item is clicked.
 	 *
 	 * @default false
 	 */
@@ -182,4 +183,4 @@ export interface DropdownMenuRadioItemProps
 	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
 }
 
-export interface DropdownMenuSeparatorProps {}
+export interface MenuSeparatorProps {}

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -71,9 +71,9 @@ const BottomSheetNavigationScreen = ( {
 			 * callbacks triggered based upon which screen is currently active.
 			 *
 			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
+			 *
+			 * Also see https://github.com/WordPress/gutenberg/pull/41166.
 			 */
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] )
 	);
 
@@ -130,9 +130,7 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		children,
 		isFocused,

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -165,7 +165,7 @@ class BottomSheetRangeCell extends Component {
 
 		const getAccessibilityLabel = () => {
 			return sprintf(
-				/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+				/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 				__( '%1$s. %2$s is %3$s %4$s.' ),
 				cellProps.label,
 				settingLabel,

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -159,7 +159,7 @@ class BottomSheetStepperCell extends Component {
 		};
 
 		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+			/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 			__( '%1$s. %2$s is %3$s %4$s.' ),
 			label,
 			settingLabel,

package/src/mobile/bottom-sheet/sub-sheet/index.native.js

@@ -28,9 +28,7 @@ const BottomSheetSubSheet = ( {
 		if ( showSheet ) {
 			setIsFullScreen( isFullScreen );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ showSheet, isFullScreen ] );
 
 	return (

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -64,7 +64,7 @@ const BottomSheetSelectControl = ( {
 					onPress={ openSubSheet }
 					accessibilityRole="button"
 					accessibilityLabel={ sprintf(
-						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
+						// translators:  1: Select control button label e.g. "Button width". 2: Select control option value e.g: "Auto, 25%".
 						__( '%1$s. Currently selected: %2$s' ),
 						label,
 						selectedOption.label
@@ -102,7 +102,7 @@ const BottomSheetSelectControl = ( {
 							accessibilityLabel={
 								item.value === selectedValue
 									? sprintf(
-											// translators: %s: Select control option value e.g: "Auto, 25%".
+											// translators: %s: The selected option.
 											__( 'Selected: %s' ),
 											item.label
 									  )

package/src/mobile/color-settings/index.native.js

@@ -35,9 +35,7 @@ const ColorSettingsMemo = memo(
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
 			onHandleClosingBottomSheet( null );
-			// Disable reason: deferring this refactor to the native team.
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+			// See https://github.com/WordPress/gutenberg/pull/41166
 		}, [] );
 		return (
 			<BottomSheet.NavigationContainer>

package/src/mobile/color-settings/picker-screen.native.js

@@ -43,9 +43,7 @@ const PickerScreen = () => {
 				onHandleHardwareButtonPress={ onHandleHardwareButtonPress }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		setColor,
 		currentValue,

package/src/mobile/image/index.native.js

@@ -112,9 +112,7 @@ const ImageComponent = ( {
 			}
 		}
 		return () => ( isCurrent = false );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	const onContainerLayout = ( event ) => {

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -69,9 +69,7 @@ export const KeyboardAvoidingView = ( {
 			keyboardShowSubscription.remove();
 			keyboardHideSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {

package/src/mobile/link-picker/link-picker-results.native.js

@@ -75,9 +75,8 @@ export default function LinkPickerResults( {
 		return {
 			fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ),
 		};
-		// Disable eslint rule for now, to avoid introducing a regression
+		// Not adding dependencies for now, to avoid introducing a regression
 		// (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879).
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	// Prevent setting state when unmounted.
@@ -90,9 +89,7 @@ export default function LinkPickerResults( {
 		setHasAllSuggestions( false );
 		setLinks( [ directEntry ] );
 		fetchMoreSuggestions( { query, links: [ directEntry ] } );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ query ] );
 
 	const onEndReached = () => fetchMoreSuggestions( { query, links } );

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -53,9 +53,7 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 				onCancel={ onCancel }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ inputValue ] );
 };
 

package/src/mobile/link-settings/index.native.js

@@ -101,9 +101,7 @@ function LinkSettings( {
 		if ( onHandleClosingBottomSheet ) {
 			onHandleClosingBottomSheet( onCloseSettingsSheet );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
 
 	useEffect( () => {
@@ -115,9 +113,7 @@ function LinkSettings( {
 		if ( url !== urlInputValue ) {
 			setUrlInputValue( url || '' );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	useEffect( () => {
@@ -141,9 +137,7 @@ function LinkSettings( {
 		if ( prevEditorSidebarOpened && ! editorSidebarOpened ) {
 			onSetAttributes();
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ editorSidebarOpened, isVisible ] );
 
 	useEffect( () => {
@@ -156,9 +150,7 @@ function LinkSettings( {
 				url: prependHTTP( urlValue ),
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlValue ] );
 
 	const onChangeURL = useCallback(
@@ -188,9 +180,7 @@ function LinkSettings( {
 				rel: linkRelInputValue,
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
@@ -223,9 +213,7 @@ function LinkSettings( {
 				rel: updatedRel,
 			} );
 		},
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 		[ linkRelInputValue ]
 	);
 

package/src/mobile/link-settings/link-settings-screen.native.js

@@ -37,9 +37,7 @@ const LinkSettingsScreen = ( props ) => {
 				urlValue={ inputValue }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ props, inputValue, navigation, route ] );
 };
 

package/src/mobile/segmented-control/index.native.js

@@ -74,18 +74,14 @@ const SegmentedControls = ( {
 	useEffect( () => {
 		setActiveSegmentIndex( selectedSegmentIndex );
 		segmentHandler( segments[ selectedSegmentIndex ] );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	useEffect( () => {
 		positionAnimationValue.setValue(
 			calculateEndValue( activeSegmentIndex )
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ segmentsDimensions ] );
 
 	const containerStyle = usePreferredColorSchemeStyle(

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -66,9 +66,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => {
 		return () => {
 			dimensionsChangeSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	const onDimensionsChange = useCallback( ( { window } ) => {
@@ -85,9 +83,7 @@ const useConvertUnitToMobile = ( value, unit, styles ) => {
 			valueToConvert,
 			valueUnit
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ windowSizes, value, unit ] );
 };
 

package/src/modal/aria-helper.ts

@@ -47,6 +47,7 @@ export function elementShouldBeHidden( element: Element ) {
 	const role = element.getAttribute( 'role' );
 	return ! (
 		element.tagName === 'SCRIPT' ||
+		element.hasAttribute( 'hidden' ) ||
 		element.hasAttribute( 'aria-hidden' ) ||
 		element.hasAttribute( 'aria-live' ) ||
 		( role && LIVE_REGION_ARIA_ROLES.has( role ) )

package/src/navigable-container/stories/navigable-menu.story.tsx

@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { NavigableMenu } from '..';
 
 const meta: Meta< typeof NavigableMenu > = {
-	title: 'Components/NavigableMenu',
+	title: 'Components/Containers/NavigableMenu',
+	id: 'components-navigablemenu',
 	component: NavigableMenu,
 	argTypes: {
 		children: { control: { type: null } },

package/src/navigable-container/stories/tabbable-container.story.tsx

@@ -9,7 +9,8 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { TabbableContainer } from '..';
 
 const meta: Meta< typeof TabbableContainer > = {
-	title: 'Components/TabbableContainer',
+	title: 'Components/Containers/TabbableContainer',
+	id: 'components-tabbablecontainer',
 	component: TabbableContainer,
 	argTypes: {
 		children: { control: { type: null } },

package/src/navigation/index.tsx

@@ -104,9 +104,8 @@ export function Navigation( {
 		if ( activeMenu !== menu ) {
 			setActiveMenu( activeMenu );
 		}
-		// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
+		// Not adding deps for now, as it would require either a larger refactor or some questionable workarounds.
 		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ activeMenu ] );
 
 	const context = {

package/src/navigation/item/use-navigation-tree-item.tsx

@@ -41,7 +41,7 @@ export const useNavigationTreeItem = (
 		return () => {
 			removeItem( itemId );
 		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/41639
 	}, [ activeMenu, search ] );
 };

package/src/navigation/menu/menu-title-search.tsx

@@ -55,8 +55,8 @@ function MenuTitleSearch( {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44090
 	}, [ items, search ] );
 
 	const onClose = () => {

package/src/navigation/menu/use-navigation-tree-menu.tsx

@@ -23,7 +23,7 @@ export const useNavigationTreeMenu = ( props: NavigationMenuProps ) => {
 		return () => {
 			removeMenu( key );
 		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Not adding deps for now, as it would require either a larger refactor
+		// See https://github.com/WordPress/gutenberg/pull/44090
 	}, [] );
 };

package/src/palette-edit/index.tsx

@@ -24,7 +24,7 @@ import Button from '../button';
 import { ColorPicker } from '../color-picker';
 import { FlexItem } from '../flex';
 import { HStack } from '../h-stack';
-import { ItemGroup } from '../item-group';
+import { Item, ItemGroup } from '../item-group';
 import { VStack } from '../v-stack';
 import GradientPicker from '../gradient-picker';
 import ColorPalette from '../color-palette';
@@ -35,7 +35,6 @@ import {
 	PaletteEditStyles,
 	PaletteHeading,
 	IndicatorStyled,
-	PaletteItem,
 	NameContainer,
 	NameInputControl,
 	DoneButton,
@@ -49,7 +48,6 @@ import { kebabCase } from '../utils/strings';
 import type {
 	Color,
 	ColorPickerPopoverProps,
-	Gradient,
 	NameInputProps,
 	OptionProps,
 	PaletteEditListViewProps,
@@ -70,6 +68,28 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 	);
 }
 
+/*
+ * Deduplicates the slugs of the provided elements.
+ */
+export function deduplicateElementSlugs< T extends PaletteElement >(
+	elements: T[]
+) {
+	const slugCounts: { [ slug: string ]: number } = {};
+
+	return elements.map( ( element ) => {
+		let newSlug: string | undefined;
+
+		const { slug } = element;
+		slugCounts[ slug ] = ( slugCounts[ slug ] || 0 ) + 1;
+
+		if ( slugCounts[ slug ] > 1 ) {
+			newSlug = `${ slug }-${ slugCounts[ slug ] - 1 }`;
+		}
+
+		return { ...element, slug: newSlug ?? slug };
+	} );
+}
+
 /**
  * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
@@ -109,7 +129,7 @@ export function getNameAndSlugForPosition(
 	};
 }
 
-function ColorPickerPopover< T extends Color | Gradient >( {
+function ColorPickerPopover< T extends PaletteElement >( {
 	isGradient,
 	element,
 	onChange,
@@ -167,7 +187,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 	);
 }
 
-function Option< T extends Color | Gradient >( {
+function Option< T extends PaletteElement >( {
 	canOnlyChangeValues,
 	element,
 	onChange,
@@ -192,7 +212,7 @@ function Option< T extends Color | Gradient >( {
 	);
 
 	return (
-		<PaletteItem ref={ setPopoverAnchor } as="div">
+		<Item ref={ setPopoverAnchor } size="small">
 			<HStack justify="flex-start">
 				<Button
 					onClick={ () => {
@@ -261,11 +281,11 @@ function Option< T extends Color | Gradient >( {
 					onClose={ () => setIsEditingColor( false ) }
 				/>
 			) }
-		</PaletteItem>
+		</Item>
 	);
 }
 
-function PaletteEditListView< T extends Color | Gradient >( {
+function PaletteEditListView< T extends PaletteElement >( {
 	elements,
 	onChange,
 	canOnlyChangeValues,
@@ -280,11 +300,15 @@ function PaletteEditListView< T extends Color | Gradient >( {
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 
-	const debounceOnChange = useDebounce( onChange, 100 );
+	const debounceOnChange = useDebounce(
+		( updatedElements: T[] ) =>
+			onChange( deduplicateElementSlugs( updatedElements ) ),
+		100
+	);
 
 	return (
 		<VStack spacing={ 3 }>
-			<ItemGroup isRounded>
+			<ItemGroup isRounded isBordered isSeparated>
 				{ elements.map( ( element, index ) => (
 					<Option
 						isGradient={ isGradient }