fix Coderabbit's QA

Author: kaeizen

src/components/sortable-picker/index.js

@@ -17,10 +17,11 @@ import {
 	Dashicon,
 	Dropdown,
 } from '@wordpress/components'
-import { useState, useEffect } from '@wordpress/element'
+import {
+	useState, useEffect, forwardRef,
+} from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
 import { ResetButton } from '../base-control2/reset-button'
-import { ITEM_PICKER } from './util'
 
 const addItemPopoverProps = {
 	placement: 'left-start',
@@ -44,7 +45,7 @@ const DRAG_KEYCODES = {
 	down: [ 40, 39 ],
 }
 
-const SortablePicker = props => {
+const SortablePicker = forwardRef( ( props, ref ) => {
 	const {
 		nonSortableItems = [],
 		editableName = true,
@@ -55,7 +56,6 @@ const SortablePicker = props => {
 		handleAddItem,
 		onSortEnd,
 		AddItemPopover = null,
-		ref,
 		enableAddItem = true,
 	} = props
 	const [ isSorting, setIsSorting ] = useState( false )
@@ -134,7 +134,7 @@ const SortablePicker = props => {
 			</div>
 		</BaseControl>
 	)
-}
+} )
 
 SortablePicker.defaultProps = {
 	className: '',
@@ -260,11 +260,7 @@ const LabeledItemIndicator = props => {
 					)
 				} }
 				renderContent={ ( { 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 } />
+					return <> { ItemPicker && <ItemPicker item={ item } onChange={ onChange } onClose={ onClose } /> } </>
 				} }
 			/>
 			{ sortable &&

src/components/sortable-picker/util.js

@@ -24,9 +24,7 @@ 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 } ) => {
+const ItemPickerColor = ( { item, onChange } ) => {
 	return <div className="stk-color-palette-control__popover-content">
 		<ColorPicker
 			onChange={ value => onChange( {
@@ -159,9 +157,7 @@ const ColorPickers = props => {
 			handleAddItem={ handleAddIcon }
 			onSortEnd={ onSortEnd }
 			ItemPreview={ ItemPreview }
-			ItemPicker="ColorPicker"
-			wrapItemPicker={ true }
-			wrapperClassName="stk-color-palette-control__popover-content"
+			ItemPicker={ ItemPickerColor }
 			{ ...props }
 		/>
 	)