@wordpress/components 19.4.0 → 19.5.0

package/build-types/unit-control/index.d.ts

@@ -28,9 +28,7 @@ declare const ForwardedUnitControl: import("react").ForwardRefExoticComponent<Pi
     value: import("./types").Value;
 } & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "children" | "value" | "label" | "as" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "disableUnits" | keyof import("./types").UnitSelectControlProps | "isResetValueOnUnitChange" | "onUnitChange"> & {
-    as?: undefined;
-}, "type" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "as" | "key" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "alt" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "step" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "disableUnits" | keyof import("./types").UnitSelectControlProps | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any>>;
+}, "children" | "value" | "label" | "as" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "disableUnits" | keyof import("./types").UnitSelectControlProps | "isResetValueOnUnitChange" | "onUnitChange">, "type" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "key" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "alt" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "step" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "disableUnits" | keyof import("./types").UnitSelectControlProps | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any>>;
 export { parseUnit, useCustomUnits } from './utils';
 export default ForwardedUnitControl;
 //# sourceMappingURL=index.d.ts.map

package/build-types/unit-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AAkCA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AA+LnE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;6kKAA4B,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACpD,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AAkCA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AA+LnE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,oBAAoB;;;;;;;;;;;2yKAA4B,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACpD,eAAe,oBAAoB,CAAC"}

package/build-types/z-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAO,SAAS,EAAE,MAAM,OAAO,CAAC;AAe5C,MAAM,WAAW,WAAW;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB;;AA+CD,wBAAkD"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAerD,MAAM,WAAW,WAAW;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACpB;;AA+CD,wBAAkD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.4.0",
+	"version": "19.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,19 +36,21 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
+		"@use-gesture/react": "^10.2.6",
 		"@wordpress/a11y": "^3.3.1",
-		"@wordpress/compose": "^5.1.1",
+		"@wordpress/compose": "^5.1.2",
 		"@wordpress/date": "^4.3.1",
 		"@wordpress/deprecated": "^3.3.1",
-		"@wordpress/dom": "^3.3.1",
+		"@wordpress/dom": "^3.3.2",
 		"@wordpress/element": "^4.1.1",
+		"@wordpress/escape-html": "^2.3.1",
 		"@wordpress/hooks": "^3.3.1",
 		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^6.3.0",
+		"@wordpress/icons": "^7.0.1",
 		"@wordpress/is-shallow-equal": "^4.3.1",
 		"@wordpress/keycodes": "^3.3.1",
 		"@wordpress/primitives": "^3.1.1",
-		"@wordpress/rich-text": "^5.1.1",
+		"@wordpress/rich-text": "^5.1.2",
 		"@wordpress/warning": "^2.3.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -64,7 +66,6 @@
 		"react-colorful": "^5.3.1",
 		"react-dates": "^17.1.1",
 		"react-resize-aware": "^3.1.0",
-		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.8",
 		"uuid": "^8.3.0"
 	},
@@ -75,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e4922861e49f5a090f9dc52056165092cfba163"
+	"gitHead": "4566ac290359553d04de4eb574545309343f790b"
 }

package/src/alignment-matrix-control/README.md

@@ -1,5 +1,9 @@
 # AlignmentMatrixControl
 
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
 AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 
 ## Usage

package/src/alignment-matrix-control/stories/index.js

@@ -17,7 +17,7 @@ const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => {
 }, {} );
 
 export default {
-	title: 'Components/AlignmentMatrixControl',
+	title: 'Components (Experimental)/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
 	parameters: {
 		knobs: { disable: false },

package/src/base-control/stories/index.js

@@ -1,38 +1,81 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
 import BaseControl from '../';
+import Button from '../../button';
+import { Spacer } from '../../spacer';
 import TextareaControl from '../../textarea-control';
 
 export default {
 	title: 'Components/BaseControl',
 	component: BaseControl,
-	parameters: {
-		knobs: { disable: false },
-	},
+	subcomponents: { BaseControl: BaseControl.VisualLabel },
 };
 
-export const _default = () => {
-	const id = text( 'Id', 'textarea-1' );
-	const label = text( 'Label', 'Label text' );
-	const hideLabelFromVision = boolean( 'Hide label from vision', false );
-	const help = text( 'Help', 'Help text' );
-	const className = text( 'ClassName', '' );
-
+const BaseControlWithTextarea = ( { id, ...props } ) => {
 	return (
-		<BaseControl
-			id={ id }
-			label={ label }
-			help={ help }
-			hideLabelFromVision={ hideLabelFromVision }
-			className={ className }
-		>
+		<BaseControl id={ id } { ...props }>
 			<TextareaControl id={ id } />
 		</BaseControl>
 	);
 };
+
+export const Default = BaseControlWithTextarea.bind( {} );
+Default.args = {
+	id: 'textarea-1',
+	label: '',
+	hideLabelFromVision: false,
+	help: '',
+};
+
+export const WithLabel = BaseControlWithTextarea.bind( {} );
+WithLabel.args = {
+	...Default.args,
+	label: 'Label text',
+};
+
+export const WithHelpText = BaseControlWithTextarea.bind( {} );
+WithHelpText.args = {
+	...WithLabel.args,
+	help: 'Help text adds more explanation.',
+};
+
+export const WithVisualLabel = ( { visualLabelChildren, ...props } ) => {
+	return (
+		<>
+			<BaseControl { ...props }>
+				<div>
+					<BaseControl.VisualLabel>
+						{ visualLabelChildren }
+					</BaseControl.VisualLabel>
+				</div>
+				<Button variant="secondary">Select an author</Button>
+			</BaseControl>
+			<Spacer marginTop={ 12 }>
+				<p>
+					<code>BaseControl.VisualLabel</code> is used to render a
+					purely visual label inside a <code>BaseControl</code>{ ' ' }
+					component.
+				</p>
+				<p>
+					It should <strong>only</strong> be used in cases where the
+					children being rendered inside BaseControl are already
+					accessibly labeled, e.g., a button, but we want an
+					additional visual label for that section equivalent to the
+					labels BaseControl would otherwise use if the{ ' ' }
+					<code>label</code> prop was passed.
+				</p>
+			</Spacer>
+		</>
+	);
+};
+WithVisualLabel.args = {
+	...Default.args,
+	help: 'This button is already accessibly labeled.',
+	visualLabelChildren: 'Author',
+};
+WithVisualLabel.argTypes = {
+	visualLabelChildren: {
+		name: 'VisualLabel children',
+	},
+};

package/src/box-control/stories/index.js

@@ -14,7 +14,10 @@ import BoxControl from '../';
 import BoxControlVisualizer from '../visualizer';
 import { Flex, FlexBlock } from '../../flex';
 
-export default { title: 'Components/BoxControl', component: BoxControl };
+export default {
+	title: 'Components (Experimental)/BoxControl',
+	component: BoxControl,
+};
 
 export const _default = () => {
 	return <BoxControl />;

package/src/box-control/unit-control.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useHover } from 'react-use-gesture';
+import { useHover } from '@use-gesture/react';
 
 /**
  * Internal dependencies

package/src/card/card/component.js

@@ -21,7 +21,7 @@ import { useCx } from '../../utils/hooks/use-cx';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                            forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
  */
 function Card( props, forwardedRef ) {
 	const {

package/src/card/card-body/component.js

@@ -8,7 +8,7 @@ import { useCardBody } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
  */
 function CardBody( props, forwardedRef ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );

package/src/card/card-divider/component.js

@@ -7,7 +7,7 @@ import { useCardDivider } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').Ref<any>}                                                                              forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef
  */
 function CardDivider( props, forwardedRef ) {
 	const dividerProps = useCardDivider( props );

package/src/card/card-footer/component.js

@@ -7,7 +7,7 @@ import { useCardFooter } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardFooter( props, forwardedRef ) {
 	const footerProps = useCardFooter( props );

package/src/card/card-header/component.js

@@ -7,7 +7,7 @@ import { useCardHeader } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardHeader( props, forwardedRef ) {
 	const headerProps = useCardHeader( props );

package/src/card/card-media/component.js

@@ -7,7 +7,7 @@ import { useCardMedia } from './hook';
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').Ref<any>}                                                                           forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
  */
 function CardMedia( props, forwardedRef ) {
 	const cardMediaProps = useCardMedia( props );

package/src/color-palette/index.native.js

@@ -34,6 +34,7 @@ let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
+	enableCustomColor = true,
 	setColor,
 	activeColor,
 	isGradientColor,
@@ -46,6 +47,7 @@ function ColorPalette( {
 	shouldShowCustomVerticalSeparator = true,
 	customColorIndicatorStyles,
 	customIndicatorWrapperStyles,
+	label,
 } ) {
 	const customSwatchGradients = [
 		'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',
@@ -62,6 +64,7 @@ function ColorPalette( {
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
 	const defaultColors = uniq( map( defaultSettings.colors, 'color' ) );
+	const mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );
 	const defaultGradientColors = uniq(
 		map( defaultSettings.gradients, 'gradient' )
 	);
@@ -72,6 +75,7 @@ function ColorPalette( {
 		: customSwatchGradients;
 	const isCustomGradientColor = isGradientColor && isSelectedCustom();
 	const shouldShowCustomIndicator =
+		enableCustomColor &&
 		shouldShowCustomIndicatorOption &&
 		( ! isGradientSegment || isCustomGradientColor );
 
@@ -92,8 +96,8 @@ function ColorPalette( {
 
 	function isSelectedCustom() {
 		const isWithinColors =
-			activeColor && colors && colors.includes( activeColor );
-		if ( activeColor ) {
+			activeColor && mergedColors && mergedColors.includes( activeColor );
+		if ( enableCustomColor && activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;
 			}
@@ -206,93 +210,106 @@ function ColorPalette( {
 	];
 
 	return (
-		<ScrollView
-			contentContainerStyle={ styles.contentContainer }
-			style={ styles.container }
-			horizontal
-			showsHorizontalScrollIndicator={ false }
-			keyboardShouldPersistTaps="always"
-			disableScrollViewPanResponder
-			scrollEventThrottle={ 16 }
-			onScroll={ onScroll }
-			onContentSizeChange={ onContentSizeChange }
-			onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }
-			onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
-			ref={ scrollViewRef }
-			testID="color-palette"
-		>
-			{ shouldShowCustomIndicator && (
-				<View
-					style={ customIndicatorWrapperStyle }
-					onLayout={ onCustomIndicatorLayout }
-				>
-					{ shouldShowCustomVerticalSeparator && (
-						<View style={ verticalSeparatorStyle } />
-					) }
-					<TouchableWithoutFeedback
-						onPress={ onCustomPress }
-						accessibilityRole={ 'button' }
-						accessibilityState={ { selected: isSelectedCustom() } }
-						accessibilityHint={ accessibilityHint }
-					>
-						<View style={ customIndicatorWrapperStyle }>
-							<ColorIndicator
-								withCustomPicker={ ! isGradientSegment }
-								color={ customIndicatorColor }
-								isSelected={ isSelectedCustom() }
-								style={ [
-									styles.colorIndicator,
-									customColorIndicatorStyles,
-								] }
-							/>
-							{ shouldShowCustomLabel && (
-								<Text style={ customTextStyle }>
-									{ isIOS
-										? customText
-										: customText.toUpperCase() }
-								</Text>
-							) }
-						</View>
-					</TouchableWithoutFeedback>
-				</View>
+		<>
+			{ label && (
+				<Text accessibilityRole="header" style={ styles.headerText }>
+					{ label }
+				</Text>
 			) }
-			{ colors.map( ( color ) => {
-				const scaleValue = isSelected( color ) ? scaleInterpolation : 1;
-				return (
-					<View key={ `${ color }-${ isSelected( color ) }` }>
+
+			<ScrollView
+				contentContainerStyle={ styles.contentContainer }
+				horizontal
+				showsHorizontalScrollIndicator={ false }
+				keyboardShouldPersistTaps="always"
+				disableScrollViewPanResponder
+				scrollEventThrottle={ 16 }
+				onScroll={ onScroll }
+				onContentSizeChange={ onContentSizeChange }
+				onScrollBeginDrag={ () =>
+					shouldEnableBottomSheetScroll( false )
+				}
+				onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }
+				ref={ scrollViewRef }
+				testID={ `color-palette${ label ? '-' + label : '' }` }
+			>
+				{ colors.map( ( color ) => {
+					const scaleValue = isSelected( color )
+						? scaleInterpolation
+						: 1;
+					return (
+						<View key={ `${ color }-${ isSelected( color ) }` }>
+							<TouchableWithoutFeedback
+								onPress={ () => onColorPress( color ) }
+								accessibilityRole={ 'button' }
+								accessibilityState={ {
+									selected: isSelected( color ),
+								} }
+								accessibilityHint={ color }
+								testID={ color }
+							>
+								<Animated.View
+									style={ {
+										transform: [
+											{
+												scale: scaleValue,
+											},
+										],
+									} }
+								>
+									<ColorIndicator
+										color={ color }
+										isSelected={ isSelected( color ) }
+										opacity={ opacity }
+										style={ [
+											styles.colorIndicator,
+											customColorIndicatorStyles,
+										] }
+									/>
+								</Animated.View>
+							</TouchableWithoutFeedback>
+						</View>
+					);
+				} ) }
+				{ shouldShowCustomIndicator && (
+					<View
+						style={ customIndicatorWrapperStyle }
+						onLayout={ onCustomIndicatorLayout }
+					>
+						{ shouldShowCustomVerticalSeparator && (
+							<View style={ verticalSeparatorStyle } />
+						) }
 						<TouchableWithoutFeedback
-							onPress={ () => onColorPress( color ) }
+							onPress={ onCustomPress }
 							accessibilityRole={ 'button' }
 							accessibilityState={ {
-								selected: isSelected( color ),
+								selected: isSelectedCustom(),
 							} }
-							accessibilityHint={ color }
-							testID={ color }
+							accessibilityHint={ accessibilityHint }
 						>
-							<Animated.View
-								style={ {
-									transform: [
-										{
-											scale: scaleValue,
-										},
-									],
-								} }
-							>
+							<View style={ customIndicatorWrapperStyle }>
 								<ColorIndicator
-									color={ color }
-									isSelected={ isSelected( color ) }
-									opacity={ opacity }
+									withCustomPicker={ ! isGradientSegment }
+									color={ customIndicatorColor }
+									isSelected={ isSelectedCustom() }
 									style={ [
 										styles.colorIndicator,
 										customColorIndicatorStyles,
 									] }
 								/>
-							</Animated.View>
+								{ shouldShowCustomLabel && (
+									<Text style={ customTextStyle }>
+										{ isIOS
+											? customText
+											: customText.toUpperCase() }
+									</Text>
+								) }
+							</View>
 						</TouchableWithoutFeedback>
 					</View>
-				);
-			} ) }
-		</ScrollView>
+				) }
+			</ScrollView>
+		</>
 	);
 }
 

package/src/color-palette/style.native.scss

@@ -1,12 +1,8 @@
 .contentContainer {
-	flex-direction: row-reverse;
+	flex-direction: row;
 	padding: 0 $grid-unit-20;
 }
 
-.container {
-	padding-bottom: $grid-unit-20;
-}
-
 .verticalSeparator {
 	border-width: $border-width * 0.5;
 	border-color: $light-gray-400;
@@ -42,3 +38,12 @@
 	letter-spacing: 1.25;
 	font-weight: 500;
 }
+
+.headerText {
+	color: $gray;
+	padding-top: 8;
+	font-size: 14;
+	font-weight: 500;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+}

package/src/color-picker/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 import { colord, extend, Colord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
@@ -54,7 +54,7 @@ const options = [
 
 const ColorPicker = (
 	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
 		enableAlpha = false,

package/src/color-picker/hex-input.tsx

@@ -24,10 +24,13 @@ interface HexInputProps {
 }
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
-	const handleValidate = ( value: string ) => {
-		if ( ! colord( '#' + value ).isValid() ) {
-			throw new Error( 'Invalid hex color input' );
-		}
+	const handleChange = ( nextValue: string | undefined ) => {
+		if ( ! nextValue ) return;
+		const hexValue = nextValue.startsWith( '#' )
+			? nextValue
+			: '#' + nextValue;
+
+		onChange( colord( hexValue ) );
 	};
 
 	return (
@@ -43,11 +46,8 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 				</Spacer>
 			}
 			value={ color.toHex().slice( 1 ).toUpperCase() }
-			onChange={ ( nextValue ) => {
-				onChange( colord( '#' + nextValue ) );
-			} }
-			onValidate={ handleValidate }
-			maxLength={ enableAlpha ? 8 : 6 }
+			onChange={ handleChange }
+			maxLength={ enableAlpha ? 9 : 7 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
 		/>

package/src/confirm-dialog/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref, KeyboardEvent } from 'react';
+import type { ForwardedRef, KeyboardEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -28,7 +28,7 @@ import { useCx } from '../utils/hooks/use-cx';
 
 function ConfirmDialog(
 	props: WordPressComponentProps< OwnProps, 'div', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		isOpen: isOpenProp,

package/src/divider/component.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ import type { Props } from './types';
 
 function Divider(
 	props: WordPressComponentProps< Props, 'hr', false >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const contextProps = useContextSystem( props, 'Divider' );
 

package/src/elevation/component.js

@@ -7,7 +7,7 @@ import { useElevation } from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function Elevation( props, forwardedRef ) {
 	const elevationProps = useElevation( props );