@wordpress/components 23.6.0 → 23.7.0

package/build-types/resizable-box/resize-tooltip/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/resizable-box/resize-tooltip/utils.ts"],"names":[],"mappings":";AAQA,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE7B,eAAO,MAAM,SAAS;;;CAGZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAE,MAAM,OAAO,SAAS,CAAE,CAAC;AAElE,UAAU,mBAAmB;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC;CAC5B;AAED,UAAU,kBAAkB;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAI,IAAI,CAAC;IACxE,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,WAAiB,EACjB,QAAe,EACf,QAA2B,EAC3B,MAAc,GACd,EAAE,kBAAkB,GAAI,mBAAmB,CA8G3C"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/resizable-box/resize-tooltip/utils.ts"],"names":[],"mappings":";AAQA,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE7B,eAAO,MAAM,SAAS;;;CAGZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,CAAE,OAAO,SAAS,CAAE,CAAE,MAAM,OAAO,SAAS,CAAE,CAAC;AAEtE,UAAU,mBAAmB;IAC5B,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC;CAC5B;AAED,UAAU,kBAAkB;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAI,IAAI,CAAC;IACxE,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,WAAiB,EACjB,QAAe,EACf,QAA2B,EAC3B,MAAc,GACd,EAAE,kBAAkB,GAAI,mBAAmB,CA8G3C"}

package/build-types/tab-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-panel/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAoB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,QAAQ,CAAE,EACzB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,YAAmB,EACnB,cAAc,EACd,WAA0B,EAC1B,WAAyB,EACzB,QAAQ,GACR,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,eA+GxD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-panel/index.tsx"],"names":[],"mappings":";AAqBA,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAoB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,QAAQ,CAAE,EACzB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,YAAmB,EACnB,cAAc,EACd,WAA0B,EAC1B,WAAyB,EACzB,QAAQ,GACR,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,eA+GxD;AAED,eAAe,QAAQ,CAAC"}

package/build-types/tools-panel/tools-panel/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/hook.ts"],"names":[],"mappings":";AAeA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EACX,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EAEnB,eAAe,EACf,cAAc,EACd,MAAM,UAAU,CAAC;AA8BlB,wBAAgB,aAAa,CAC5B,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,KAAK,CAAE;;;;qCAuD9C,MAAM;mDA6BG,cAAc;;uCAiCvB,MAAM,UAAS,qBAAqB;;;;;;kCAnFrC,cAAc;4CAyCT,cAAc;;;;;;wBAuGlB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGhB"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel/hook.ts"],"names":[],"mappings":";AAeA,OAAO,EAAoB,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,KAAK,EACX,cAAc,EACd,qBAAqB,EACrB,mBAAmB,EAEnB,eAAe,EACf,cAAc,EACd,MAAM,UAAU,CAAC;AAwDlB,wBAAgB,aAAa,CAC5B,KAAK,EAAE,uBAAuB,CAAE,eAAe,EAAE,KAAK,CAAE;;;;qCAmE9C,MAAM;mDA6BG,cAAc;;uCAkCvB,MAAM,UAAS,qBAAqB;;;;;;kCA/FrC,cAAc;4CAoDT,cAAc;;;;;;wBAwGlB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGhB"}

package/build-types/tools-panel/types.d.ts

@@ -174,6 +174,7 @@ export type ToolsPanelMenuItemsConfig = {
     panelItems: ToolsPanelItem[];
     shouldReset: boolean;
     currentMenuItems?: ToolsPanelMenuItems;
+    menuItemOrder: string[];
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/tools-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}

package/build-types/utils/input/input-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../../src/utils/input/input-control.js"],"names":[],"mappings":"AAaA,qEAgDE"}
+{"version":3,"file":"input-control.d.ts","sourceRoot":"","sources":["../../../src/utils/input/input-control.js"],"names":[],"mappings":"AAaA,qEAiDE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "23.6.0",
+	"version": "23.7.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,23 +38,23 @@
 		"@emotion/utils": "^1.0.0",
 		"@floating-ui/react-dom": "1.0.0",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.29.0",
-		"@wordpress/compose": "^6.6.0",
-		"@wordpress/date": "^4.29.0",
-		"@wordpress/deprecated": "^3.29.0",
-		"@wordpress/dom": "^3.29.0",
-		"@wordpress/element": "^5.6.0",
-		"@wordpress/escape-html": "^2.29.0",
-		"@wordpress/hooks": "^3.29.0",
-		"@wordpress/html-entities": "^3.29.0",
-		"@wordpress/i18n": "^4.29.0",
-		"@wordpress/icons": "^9.20.0",
-		"@wordpress/is-shallow-equal": "^4.29.0",
-		"@wordpress/keycodes": "^3.29.0",
-		"@wordpress/primitives": "^3.27.0",
-		"@wordpress/private-apis": "^0.11.0",
-		"@wordpress/rich-text": "^6.6.0",
-		"@wordpress/warning": "^2.29.0",
+		"@wordpress/a11y": "^3.30.0",
+		"@wordpress/compose": "^6.7.0",
+		"@wordpress/date": "^4.30.0",
+		"@wordpress/deprecated": "^3.30.0",
+		"@wordpress/dom": "^3.30.0",
+		"@wordpress/element": "^5.7.0",
+		"@wordpress/escape-html": "^2.30.0",
+		"@wordpress/hooks": "^3.30.0",
+		"@wordpress/html-entities": "^3.30.0",
+		"@wordpress/i18n": "^4.30.0",
+		"@wordpress/icons": "^9.21.0",
+		"@wordpress/is-shallow-equal": "^4.30.0",
+		"@wordpress/keycodes": "^3.30.0",
+		"@wordpress/primitives": "^3.28.0",
+		"@wordpress/private-apis": "^0.12.0",
+		"@wordpress/rich-text": "^6.7.0",
+		"@wordpress/warning": "^2.30.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9534a7b3bbf07c1d40b94fdb7a3d091f297bfb06"
+	"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
 }

package/src/angle-picker-control/angle-circle.tsx

@@ -91,7 +91,6 @@ function AngleCircle( {
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
 			className="components-angle-picker-control__angle-circle"
-			style={ isDragging ? { cursor: 'grabbing' } : undefined }
 			{ ...props }
 		>
 			<CircleIndicatorWrapper

package/src/angle-picker-control/index.tsx

@@ -9,19 +9,16 @@ import classnames from 'classnames';
  */
 import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { FlexBlock, FlexItem } from '../flex';
+import { FlexBlock } from '../flex';
+import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
-import { Root } from './styles/angle-picker-control-styles';
-import { space } from '../ui/utils/space';
-import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { COLORS } from '../utils/colors-values';
+import { Root, UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../ui/context';
 import type { AnglePickerControlProps } from './types';
@@ -64,13 +61,18 @@ function UnforwardedAnglePickerControl(
 
 	const classes = classnames( 'components-angle-picker-control', className );
 
+	const unitText = <UnitText>°</UnitText>;
+	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
+		? [ unitText, null ]
+		: [ null, unitText ];
+
 	return (
 		<Root
 			{ ...restProps }
 			ref={ ref }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			className={ classes }
-			gap={ 4 }
+			gap={ 2 }
 		>
 			<FlexBlock>
 				<NumberControl
@@ -83,32 +85,17 @@ function UnforwardedAnglePickerControl(
 					step="1"
 					value={ value }
 					spinControls="none"
-					suffix={
-						<Spacer
-							as={ Text }
-							marginBottom={ 0 }
-							marginRight={ space( 3 ) }
-							style={ {
-								color: COLORS.ui.theme,
-							} }
-						>
-							°
-						</Spacer>
-					}
+					prefix={ prefixedUnitText }
+					suffix={ suffixedUnitText }
 				/>
 			</FlexBlock>
-			<FlexItem
-				style={ {
-					marginBottom: space( 1 ),
-					marginTop: 'auto',
-				} }
-			>
+			<Spacer marginBottom="1" marginTop="auto">
 				<AngleCircle
 					aria-hidden="true"
 					value={ value }
 					onChange={ onChange }
 				/>
-			</FlexItem>
+			</Spacer>
 		</Root>
 	);
 }

package/src/angle-picker-control/styles/angle-picker-control-styles.tsx

@@ -10,12 +10,13 @@ import styled from '@emotion/styled';
 import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
+import { Text } from '../../text';
 import CONFIG from '../../utils/config-values';
 
 import type { AnglePickerControlProps } from '../types';
 
 const CIRCLE_SIZE = 32;
-const INNER_CIRCLE_SIZE = 3;
+const INNER_CIRCLE_SIZE = 6;
 
 const deprecatedBottomMargin = ( {
 	__nextHasNoMarginBottom,
@@ -39,6 +40,10 @@ export const CircleRoot = styled.div`
 	height: ${ CIRCLE_SIZE }px;
 	overflow: hidden;
 	width: ${ CIRCLE_SIZE }px;
+
+	:active {
+		cursor: grabbing;
+	}
 `;
 
 export const CircleIndicatorWrapper = styled.div`
@@ -55,15 +60,17 @@ export const CircleIndicatorWrapper = styled.div`
 export const CircleIndicator = styled.div`
 	background: ${ COLORS.ui.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
-	bottom: 0;
 	box-sizing: border-box;
 	display: block;
-	height: 0px;
-	left: 0;
-	margin: auto;
+	left: 50%;
+	top: 4px;
+	transform: translateX( -50% );
 	position: absolute;
-	right: 0;
-	top: -${ CIRCLE_SIZE / 2 }px;
-	width: 0px;
+	width: ${ INNER_CIRCLE_SIZE }px;
+	height: ${ INNER_CIRCLE_SIZE }px;
+`;
+
+export const UnitText = styled( Text )`
+	color: ${ COLORS.ui.theme };
+	margin-right: ${ space( 3 ) };
 `;

package/src/animate/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { AnimateProps, GetAnimateOptions } from './types';
+
+/**
+ * @param type The animation type
+ * @return Default origin
+ */
+function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
+	return type === 'appear' ? 'top' : 'left';
+}
+
+/**
+ * @param options
+ *
+ * @return ClassName that applies the animations
+ */
+export function getAnimateClassName( options: GetAnimateOptions ) {
+	if ( options.type === 'loading' ) {
+		return classnames( 'components-animate__loading' );
+	}
+
+	const { type, origin = getDefaultOrigin( type ) } = options;
+
+	if ( type === 'appear' ) {
+		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
+		return classnames( 'components-animate__appear', {
+			[ 'is-from-' + xAxis ]: xAxis !== 'center',
+			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
+		} );
+	}
+
+	if ( type === 'slide-in' ) {
+		return classnames(
+			'components-animate__slide-in',
+			'is-from-' + origin
+		);
+	}
+
+	return undefined;
+}
+
+/**
+ * Simple interface to introduce animations to components.
+ *
+ * ```jsx
+ * import { Animate, Notice } from '@wordpress/components';
+ *
+ * const MyAnimatedNotice = () => (
+ * 	<Animate type="slide-in" options={ { origin: 'top' } }>
+ * 		{ ( { className } ) => (
+ * 			<Notice className={ className } status="success">
+ * 				<p>Animation finished.</p>
+ * 			</Notice>
+ * 		) }
+ * 	</Animate>
+ * );
+ * ```
+ */
+export function Animate( { type, options = {}, children }: AnimateProps ) {
+	return children( {
+		className: getAnimateClassName( {
+			type,
+			...options,
+		} as GetAnimateOptions ),
+	} );
+}
+
+export default Animate;

package/src/animate/stories/index.tsx

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Animate } from '..';
+import Notice from '../../notice';
+
+const meta: ComponentMeta< typeof Animate > = {
+	title: 'Components/Animate',
+	component: Animate,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
+
+export const Default: ComponentStory< typeof Animate > = Template.bind( {} );
+Default.args = {
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
+		</Notice>
+	),
+};
+
+export const AppearTopLeft: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearTopLeft.args = {
+	type: 'appear',
+	options: { origin: 'top left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top left.</p>
+		</Notice>
+	),
+};
+export const AppearTopRight: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearTopRight.args = {
+	type: 'appear',
+	options: { origin: 'top right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top right.</p>
+		</Notice>
+	),
+};
+export const AppearBottomLeft: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearBottomLeft.args = {
+	type: 'appear',
+	options: { origin: 'bottom left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom left.</p>
+		</Notice>
+	),
+};
+export const AppearBottomRight: ComponentStory< typeof Animate > =
+	Template.bind( {} );
+AppearBottomRight.args = {
+	type: 'appear',
+	options: { origin: 'bottom right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom right.</p>
+		</Notice>
+	),
+};
+
+export const Loading: ComponentStory< typeof Animate > = Template.bind( {} );
+Loading.args = {
+	type: 'loading',
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Loading animation.</p>
+		</Notice>
+	),
+};
+
+export const SlideIn: ComponentStory< typeof Animate > = Template.bind( {} );
+SlideIn.args = {
+	type: 'slide-in',
+	options: { origin: 'left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Slide-in animation.</p>
+		</Notice>
+	),
+};

package/src/animate/types.ts

@@ -0,0 +1,32 @@
+export type AppearOptions = {
+	type: 'appear';
+	origin?:
+		| 'top'
+		| 'top left'
+		| 'top right'
+		| 'middle'
+		| 'middle left'
+		| 'middle right'
+		| 'bottom'
+		| 'bottom left'
+		| 'bottom right';
+};
+type SlideInOptions = { type: 'slide-in'; origin?: 'left' | 'right' };
+type LoadingOptions = { type: 'loading'; origin?: never };
+type NoAnimationOptions = { type?: never; origin?: never };
+
+export type GetAnimateOptions =
+	| AppearOptions
+	| SlideInOptions
+	| LoadingOptions
+	| NoAnimationOptions;
+
+// Create a new type that and distributes the `Pick` operator separately to
+// every individual type of a union, thus preserving that same union.
+type DistributiveTypeAndOptions< T extends { type?: any } > = T extends any
+	? Pick< T, 'type' > & { options?: Omit< T, 'type' > }
+	: never;
+
+export type AnimateProps = DistributiveTypeAndOptions< GetAnimateOptions > & {
+	children: ( props: { className?: string } ) => JSX.Element;
+};

package/src/border-box-control/stories/index.tsx

@@ -43,7 +43,7 @@ const colors = [
 
 const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 	const { onChange, ...otherProps } = props;
-	const [ borders, setBorders ] = useState< typeof props[ 'value' ] >();
+	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
 
 	const onChangeMerged: ComponentProps<
 		typeof BorderBoxControl

package/src/box-control/axial-input-controls.tsx

@@ -8,7 +8,7 @@ import { Layout } from './styles/box-control-styles';
 import type { BoxControlInputControlProps } from './types';
 
 const groupedSides = [ 'vertical', 'horizontal' ] as const;
-type GroupedSide = typeof groupedSides[ number ];
+type GroupedSide = ( typeof groupedSides )[ number ];
 
 export default function AxialInputControls( {
 	onChange,

package/src/circular-option-picker/style.scss

@@ -16,6 +16,16 @@ $color-palette-circle-spacing: 12px;
 		display: flex;
 		flex-wrap: wrap;
 		gap: $color-palette-circle-spacing;
+		position: relative;
+		z-index: z-index(".components-circular-option-picker__swatches");
+	}
+
+	// Make sure that the .components-circular-option-picker__swatches element
+	// renders visually on top of its siblings. This is necessary to make sure
+	// that the tooltip rendered when hovering an `Option` always appears on top.
+	> *:not(.components-circular-option-picker__swatches) {
+		position: relative;
+		z-index: z-index("> *:not(.components-circular-option-picker__swatches)");
 	}
 }
 

package/src/color-indicator/style.scss

@@ -5,4 +5,5 @@
 	border-radius: 50%;
 	display: inline-block;
 	padding: 0;
+	background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }

package/src/color-picker/README.md

@@ -31,13 +31,13 @@ The current color value to display in the picker. Must be a hex or hex8 string.
 
 ### `onChange`: `(hex8Color: string) => void`
 
-Fired when the color changes. Always passes a hex8 color string.
+Fired when the color changes. Always passes a hex or hex8 color string.
 
 - Required: No
 
 ### `enableAlpha`: `boolean`
 
-Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
 
 - Required: No
 - Default: `false`

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

@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
 /**
  * Internal dependencies
  */
 import { RgbInput } from './rgb-input';
 import { HslInput } from './hsl-input';
 import { HexInput } from './hex-input';
-
-interface ColorInputProps {
-	colorType: 'hsl' | 'hex' | 'rgb';
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { ColorInputProps } from './types';
 
 export const ColorInput = ( {
 	colorType,

package/src/color-picker/component.tsx

@@ -15,11 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import { useContextSystem, contextConnect } from '../ui/context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -32,26 +28,18 @@ import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
 
-import type { ColorType } from './types';
+import type { ColorPickerProps, ColorType } from './types';
 
 extend( [ namesPlugin ] );
 
-export interface ColorPickerProps {
-	enableAlpha?: boolean;
-	color?: string;
-	onChange?: ( color: string ) => void;
-	defaultValue?: string;
-	copyFormat?: ColorType;
-}
-
 const options = [
 	{ label: 'RGB', value: 'rgb' as const },
 	{ label: 'HSL', value: 'hsl' as const },
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-const ColorPicker = (
-	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
+const UnconnectedColorPicker = (
+	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
@@ -124,6 +112,9 @@ const ColorPicker = (
 	);
 };
 
-const ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );
+export const ColorPicker = contextConnect(
+	UnconnectedColorPicker,
+	'ColorPicker'
+);
 
-export default ConnectedColorPicker;
+export default ColorPicker;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -17,12 +17,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
-
-interface HexInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HexInputProps } from './types';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {

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

@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface HslInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HslInputProps } from './types';
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 	const { h, s, l, a } = color.toHsl();

package/src/color-picker/input-with-slider.tsx

@@ -7,15 +7,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
-
-interface InputWithSliderProps {
-	min: number;
-	max: number;
-	value: number;
-	label: string;
-	abbreviation: string;
-	onChange: ( value: number ) => void;
-}
+import type { InputWithSliderProps } from './types';
 
 export const InputWithSlider = ( {
 	min,