@wordpress/components 21.0.6 → 21.0.7

package/build-types/color-palette/types.d.ts

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+declare type OnColorChange = (newColor?: string) => void;
+export declare type ColorObject = {
+    name: string;
+    color: NonNullable<CSSProperties['color']>;
+};
+export declare type PaletteObject = {
+    name: string;
+    colors: ColorObject[];
+};
+declare type PaletteProps = {
+    className?: string;
+    clearColor: () => void;
+    onChange: OnColorChange;
+    value?: string;
+    actions?: ReactNode;
+};
+export declare type SinglePaletteProps = PaletteProps & {
+    colors: ColorObject[];
+};
+export declare type MultiplePalettesProps = PaletteProps & {
+    colors: PaletteObject[];
+};
+export declare type CustomColorPickerDropdownProps = {
+    isRenderedInSidebar: boolean;
+    renderContent: () => ReactNode;
+    popoverProps?: string[];
+    renderToggle: (props: {
+        isOpen: boolean;
+        onToggle: MouseEventHandler<HTMLButtonElement>;
+    }) => ReactNode;
+};
+export declare type ColorPaletteProps = {
+    /**
+     * Whether the palette should have a clearing button.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Array with the colors to be shown. When displaying multiple color palettes
+     * to choose from, the format of the array changes from an array of colors
+     * objects, to an array of color palettes.
+     *
+     * @default []
+     */
+    colors?: (PaletteObject | ColorObject)[];
+    /**
+     * Whether to allow the user to pick a custom color on top of the predefined
+     * choices (defined via the `colors` prop).
+     *
+     * @default false
+     */
+    disableCustomColors?: boolean;
+    /**
+     * Whether the color picker should display the alpha channel
+     * both in the bottom inputs as well as in the color picker itself.
+     */
+    enableAlpha?: boolean;
+    /**
+     * Callback called when a color is selected.
+     */
+    onChange: OnColorChange;
+    /**
+     * Currently active value.
+     */
+    value?: string;
+    /**
+     * Whether the colors prop is an array of color palettes,
+     * rather than an array of color objects.
+     *
+     * @default false
+     */
+    __experimentalHasMultipleOrigins?: boolean;
+    /**
+     * Whether this is rendered in the sidebar.
+     *
+     * @default false
+     */
+    __experimentalIsRenderedInSidebar?: boolean;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/build-types/color-palette/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/color-palette/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,aAAK,aAAa,GAAG,CAAE,QAAQ,CAAC,EAAE,MAAM,KAAM,IAAI,CAAC;AAEnD,oBAAY,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,CAAE,aAAa,CAAE,OAAO,CAAE,CAAE,CAAC;CAC/C,CAAC;AAEF,oBAAY,aAAa,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;AAEF,aAAK,YAAY,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,oBAAY,kBAAkB,GAAG,YAAY,GAAG;IAC/C,MAAM,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;AAEF,oBAAY,qBAAqB,GAAG,YAAY,GAAG;IAClD,MAAM,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAGF,oBAAY,8BAA8B,GAAG;IAC5C,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,SAAS,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,EAAE,CAAE,KAAK,EAAE;QACtB,MAAM,EAAE,OAAO,CAAC;QAChB,QAAQ,EAAE,iBAAiB,CAAE,iBAAiB,CAAE,CAAC;KACjD,KAAM,SAAS,CAAC;CACjB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC/B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAE,aAAa,GAAG,WAAW,CAAE,EAAE,CAAC;IAC3C;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C;;;;OAIG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;CAC5C,CAAC"}

package/build-types/confirm-dialog/component.d.ts

@@ -8,12 +8,12 @@ declare const _default: import("../ui/context").WordPressComponent<import("react
 } & {
     onCancel: (event: DialogInputEvent) => void;
     isOpen: boolean;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof {
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | "isOpen" | keyof {
     children: import("react").ReactNode;
     onConfirm: (event: DialogInputEvent) => void;
     confirmButtonText?: string | undefined;
     cancelButtonText?: string | undefined;
-} | "onCancel" | "isOpen"> & import("react").RefAttributes<any>, boolean> | import("../ui/context").WordPressComponent<import("react").ElementType<any>, {
+} | "onCancel"> & import("react").RefAttributes<any>, boolean> | import("../ui/context").WordPressComponent<import("react").ElementType<any>, {
     children: import("react").ReactNode;
     onConfirm: (event: DialogInputEvent) => void;
     confirmButtonText?: string | undefined;
@@ -21,11 +21,11 @@ declare const _default: import("../ui/context").WordPressComponent<import("react
 } & {
     onCancel?: ((event: DialogInputEvent) => void) | undefined;
     isOpen?: undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof {
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | "isOpen" | keyof {
     children: import("react").ReactNode;
     onConfirm: (event: DialogInputEvent) => void;
     confirmButtonText?: string | undefined;
     cancelButtonText?: string | undefined;
-} | "onCancel" | "isOpen"> & import("react").RefAttributes<any>, boolean>;
+} | "onCancel"> & import("react").RefAttributes<any>, boolean>;
 export default _default;
 //# sourceMappingURL=component.d.ts.map

package/build-types/form-token-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form-token-field/index.tsx"],"names":[],"mappings":";AAsBA,OAAO,KAAK,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAC;AAM9D;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,mBAAmB,eA4qBzD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form-token-field/index.tsx"],"names":[],"mappings":";AAiCA,OAAO,KAAK,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAC;AAM9D;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAE,KAAK,EAAE,mBAAmB,eA4qBzD;AAED,eAAe,cAAc,CAAC"}

package/build-types/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":";AA2DA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACX,YAAY,EAIZ,MAAM,SAAS,CAAC;AAuejB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,qhCAAmC,CAAC;AAsBxD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.tsx"],"names":[],"mappings":";AA2DA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACX,YAAY,EAIZ,MAAM,SAAS,CAAC;AA+cjB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,qhCAAmC,CAAC;AAsBxD,eAAe,OAAO,CAAC"}

package/build-types/popover/types.d.ts

@@ -138,14 +138,6 @@ export declare type PopoverProps = {
      * @deprecated
      */
     __unstableForcePosition?: boolean;
-    /**
-     * Enables the `Popover` to shift in order to stay in view when meeting the
-     * viewport edges.
-     * _Note: this prop is deprecated. Use the `shift` prop instead._
-     *
-     * @deprecated
-     */
-    __unstableShift?: boolean;
     /**
      * An object extending a `DOMRect` with an additional optional `ownerDocument`
      * property, used to specify a fixed popover position.
@@ -168,12 +160,6 @@ export declare type PopoverProps = {
      * @deprecated
      */
     getAnchorRect?: (fallbackReferenceElement: Element | null) => DomRectWithOwnerDocument;
-    /**
-     * _Note: this prop is deprecated and has no effect on the component._
-     *
-     * @deprecated
-     */
-    range?: unknown;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/popover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACjD,aAAK,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACjD,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1D,aAAK,wBAAwB,GAAG,OAAO,GAAG;IACzC,aAAa,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IAClC,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,gBAAgB,CACvD,OAAO,GAAG,IAAI,GAAG,SAAS,CAC1B,CAAC;AACF,oBAAY,yBAAyB,GAAG;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1E,oBAAY,cAAc,GAAG,IAAI,CAAE,OAAO,EAAE,uBAAuB,CAAE,GAAG;IACvE,aAAa,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,oBAAY,YAAY,GAAG;IAC1B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC;IACxC;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EACN,GAAI,aAAc,IAAK,aAAc,EAAE,GACvC,GAAI,aAAc,IAAK,aAAc,IAAK,cAAe,EAAE,CAAC;IAC/D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAGhB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC;;;;;;OAMG;IACH,SAAS,CAAC,EACP,OAAO,GACP,yBAAyB,GACzB,yBAAyB,GACzB,KAAK,CAAC;IACT;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CACf,wBAAwB,EAAE,OAAO,GAAG,IAAI,KACpC,wBAAwB,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACjD,aAAK,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACjD,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1D,aAAK,wBAAwB,GAAG,OAAO,GAAG;IACzC,aAAa,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IAClC,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,gBAAgB,CACvD,OAAO,GAAG,IAAI,GAAG,SAAS,CAC1B,CAAC;AACF,oBAAY,yBAAyB,GAAG;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1E,oBAAY,cAAc,GAAG,IAAI,CAAE,OAAO,EAAE,uBAAuB,CAAE,GAAG;IACvE,aAAa,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,oBAAY,YAAY,GAAG;IAC1B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC;IACxC;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EACN,GAAI,aAAc,IAAK,aAAc,EAAE,GACvC,GAAI,aAAc,IAAK,aAAc,IAAK,cAAe,EAAE,CAAC;IAC/D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAGhB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC;;;;;;OAMG;IACH,SAAS,CAAC,EACP,OAAO,GACP,yBAAyB,GACzB,yBAAyB,GACzB,KAAK,CAAC;IACT;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CACf,wBAAwB,EAAE,OAAO,GAAG,IAAI,KACpC,wBAAwB,CAAC;CAC9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "21.0.6",
+	"version": "21.0.7",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "84269cffad0bab2b10e6b6da8e275716fcc8c57b"
+	"gitHead": "6566f5fe9ece6ad5ae550349d3b1f0944a011040"
 }

package/src/autocomplete/index.js

@@ -14,6 +14,15 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
+import {
+	ENTER,
+	ESCAPE,
+	UP,
+	DOWN,
+	LEFT,
+	RIGHT,
+	BACKSPACE,
+} from '@wordpress/keycodes';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
 	useInstanceId,
@@ -212,7 +221,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		backspacing.current = event.code === 'Backspace';
+		backspacing.current = event.keyCode === BACKSPACE;
 
 		if ( ! autocompleter ) {
 			return;
@@ -223,8 +232,8 @@ function useAutocomplete( {
 		if ( event.defaultPrevented ) {
 			return;
 		}
-		switch ( event.code ) {
-			case 'ArrowUp':
+		switch ( event.keyCode ) {
+			case UP:
 				setSelectedIndex(
 					( selectedIndex === 0
 						? filteredOptions.length
@@ -232,24 +241,24 @@ function useAutocomplete( {
 				);
 				break;
 
-			case 'ArrowDown':
+			case DOWN:
 				setSelectedIndex(
 					( selectedIndex + 1 ) % filteredOptions.length
 				);
 				break;
 
-			case 'Escape':
+			case ESCAPE:
 				setAutocompleter( null );
 				setAutocompleterUI( null );
 				event.preventDefault();
 				break;
 
-			case 'Enter':
+			case ENTER:
 				select( filteredOptions[ selectedIndex ] );
 				break;
 
-			case 'ArrowLeft':
-			case 'ArrowRight':
+			case LEFT:
+			case RIGHT:
 				reset();
 				return;
 
@@ -257,7 +266,7 @@ function useAutocomplete( {
 				return;
 		}
 
-		// Any handled key should prevent original behavior. This relies on
+		// Any handled keycode should prevent original behavior. This relies on
 		// the early return in the default case.
 		event.preventDefault();
 	}

package/src/border-control/types.ts

@@ -16,7 +16,7 @@ export type Border = {
 
 export type Color = {
 	name: string;
-	color: CSSProperties[ 'color' ];
+	color: NonNullable< CSSProperties[ 'color' ] >;
 };
 
 export type ColorOrigin = {

package/src/circular-option-picker/index.js

@@ -16,13 +16,14 @@ import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
 
-function Option( {
-	className,
-	isSelected,
-	selectedIconProps,
-	tooltipText,
-	...additionalProps
-} ) {
+function Option( props ) {
+	const {
+		className,
+		isSelected,
+		selectedIconProps,
+		tooltipText,
+		...additionalProps
+	} = props;
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
@@ -52,12 +53,8 @@ function Option( {
 	);
 }
 
-function DropdownLinkAction( {
-	buttonProps,
-	className,
-	dropdownProps,
-	linkText,
-} ) {
+function DropdownLinkAction( props ) {
+	const { buttonProps, className, dropdownProps, linkText } = props;
 	return (
 		<Dropdown
 			className={ classnames(
@@ -80,7 +77,8 @@ function DropdownLinkAction( {
 	);
 }
 
-function ButtonAction( { className, children, ...additionalProps } ) {
+function ButtonAction( props ) {
+	const { className, children, ...additionalProps } = props;
 	return (
 		<Button
 			className={ classnames(
@@ -95,12 +93,8 @@ function ButtonAction( { className, children, ...additionalProps } ) {
 	);
 }
 
-export default function CircularOptionPicker( {
-	actions,
-	className,
-	options,
-	children,
-} ) {
+export default function CircularOptionPicker( props ) {
+	const { actions, className, options, children } = props;
 	return (
 		<div
 			className={ classnames(

package/src/color-palette/README.md

@@ -1,54 +1,6 @@
 # ColorPalette
 
-## Props
-
-The component accepts the following props.
-
-{ colors, disableCustomColors = false, value, onChange, className, clearable = true }
-
-### colors
-
-Array with the colors to be shown.
-
--   Type: `Array`
--   Required: Yes
-
-### disableCustomColors
-
-Whether to allow custom color or not.
-
--   Type: `Boolean`
--   Required: No
--   Default: false
-
-### value
-
-currently active value
-
--   Type: `String`
--   Required: No
-
-### onChange
-
-Callback called when a color is selected.
-
--   Type: `Function`
--   Required: Yes
-
-### className
-
-classes to be applied to the container.
-
--   Type: `String`
--   Required: No
-
-### clearable
-
-Whether the palette should have a clearing button or not.
-
--   Type: `Boolean`
--   Required: No
--   Default: true
+`ColorPalette` allows the user to pick a color from a list of pre-defined color entries.
 
 ## Usage
 
@@ -79,3 +31,53 @@ If you're using this component outside the editor, you can
 for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
 `Popover.Slot` further up the element tree and within a
 `SlotFillProvider` overall.
+
+## Props
+
+The component accepts the following props.
+
+### `colors`: `( PaletteObject | ColorObject )[]`
+
+Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes.
+
+-   Required: No
+-   Default: `[]`
+
+### `disableCustomColors`: `boolean`
+
+Whether to allow the user to pick a custom color on top of the predefined choices (defined via the `colors` prop).
+
+-   Required: No
+-   Default: `false`
+
+### `enableAlpha`: `boolean`
+
+Whether the color picker should display the alpha channel both in the bottom inputs as well as in the color picker itself.
+
+-   Required: No
+-   Default: `false`
+
+### `value`: `string`
+
+currently active value
+
+-   Required: No
+
+### `onChange`: `OnColorChange`
+
+Callback called when a color is selected.
+
+-   Required: Yes
+
+### `className`: `string`
+
+classes to be applied to the container.
+
+-   Required: No
+
+### `clearable`: `boolean`
+
+Whether the palette should have a clearing button.
+
+-   Required: No
+-   Default: `true`