Fix (Global Colors): fix dragging in color picker

src/components/sortable-picker/index.js

@@ -20,6 +20,7 @@ import {
 import { useState, useEffect } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { ResetButton } from '../base-control2/reset-button'
+import { ITEM_PICKER } from './util'
 
 const addItemPopoverProps = {
 	placement: 'left-start',
@@ -259,7 +260,11 @@ const LabeledItemIndicator = props => {
 					)
 				} }
 				renderContent={ ( { onClose } ) => {
-					return <> { ItemPicker && <ItemPicker item={ item } onChange={ onChange } onClose={ onClose } /> } </>
+					const ItemPicker_ = typeof ItemPicker === 'string' ? ITEM_PICKER[ ItemPicker ] : null
+
+					return typeof ItemPicker === 'string' && ItemPicker_
+						? <ItemPicker_ item={ item } onChange={ onChange } onClose={ onClose } />
+						: <ItemPicker item={ item } onChange={ onChange } onClose={ onClose } />
 				} }
 			/>
 			{ sortable &&

src/components/sortable-picker/util.js

@@ -0,0 +1,5 @@
+import { ItemPickerColor } from '~stackable/plugins/global-settings/colors/color-picker'
+
+export const ITEM_PICKER = {
+	ColorPicker: ItemPickerColor,
+}

src/plugins/global-settings/colors/color-picker.js

@@ -24,6 +24,21 @@ import { ColorIndicator, ColorPicker } from '@wordpress/components'
 
 let saveTimeout = null
 
+// Dev note: Passing this component as a prop breaks dragging functionality in ColorPicker.
+// Exporting it directly ensures dragging works as expected.
+export const ItemPickerColor = ( { item, onChange } ) => {
+	return <div className="stk-color-palette-control__popover-content">
+		<ColorPicker
+			onChange={ value => onChange( {
+				...item,
+				color: value,
+			} ) }
+			color={ item.color }
+			enableAlpha={ true }
+		/>
+	</div>
+}
+
 const ColorPickers = props => {
 	const ref = useRef()
 	const {
@@ -134,19 +149,6 @@ const ColorPickers = props => {
 		/>
 	}
 
-	const ItemPicker = ( { item, onChange } ) => {
-		return <div className="stk-color-palette-control__popover-content">
-			<ColorPicker
-				onChange={ value => onChange( {
-					...item,
-					color: value,
-				} ) }
-				color={ item.color }
-				enableAlpha={ true }
-			/>
-		</div>
-	}
-
 	return (
 		<SortablePicker
 			ref={ ref }
@@ -157,7 +159,9 @@ const ColorPickers = props => {
 			handleAddItem={ handleAddIcon }
 			onSortEnd={ onSortEnd }
 			ItemPreview={ ItemPreview }
-			ItemPicker={ ItemPicker }
+			ItemPicker="ColorPicker"
+			wrapItemPicker={ true }
+			wrapperClassName="stk-color-palette-control__popover-content"
 			{ ...props }
 		/>
 	)