@wordpress/components 19.11.0 → 19.12.0

package/build-types/surface/styles.d.ts

@@ -1,22 +1,11 @@
-/**
- * @param {Object}  props
- * @param {boolean} [props.borderBottom]
- * @param {boolean} [props.borderLeft]
- * @param {boolean} [props.borderRight]
- * @param {boolean} [props.borderTop]
- */
-export function getBorders({ borderBottom, borderLeft, borderRight, borderTop, }: {
-    borderBottom?: boolean | undefined;
-    borderLeft?: boolean | undefined;
-    borderRight?: boolean | undefined;
-    borderTop?: boolean | undefined;
-}): import("@emotion/utils").SerializedStyles;
-export const Surface: import("@emotion/utils").SerializedStyles;
-export const background: import("@emotion/utils").SerializedStyles;
-export const primary: import("@emotion/utils").SerializedStyles;
-export const secondary: import("@emotion/utils").SerializedStyles;
-export const tertiary: import("@emotion/utils").SerializedStyles;
-export function getDotted(surfaceBackgroundSize: string, surfaceBackgroundSizeDotted: string): import("@emotion/utils").SerializedStyles;
-export function getGrid(surfaceBackgroundSize: string): import('@emotion/react').SerializedStyles;
-export function getVariant(variant: 'dotted' | 'grid' | 'primary' | 'secondary' | 'tertiary', surfaceBackgroundSize: string, surfaceBackgroundSizeDotted: string): import("@emotion/utils").SerializedStyles;
+import type { SurfaceVariant, SurfaceProps } from './types';
+export declare const Surface: import("@emotion/utils").SerializedStyles;
+export declare const background: import("@emotion/utils").SerializedStyles;
+export declare function getBorders({ borderBottom, borderLeft, borderRight, borderTop, }: Pick<SurfaceProps, 'borderBottom' | 'borderLeft' | 'borderRight' | 'borderTop'>): import("@emotion/utils").SerializedStyles;
+export declare const primary: import("@emotion/utils").SerializedStyles;
+export declare const secondary: import("@emotion/utils").SerializedStyles;
+export declare const tertiary: import("@emotion/utils").SerializedStyles;
+export declare const getDotted: (surfaceBackgroundSize: string, surfaceBackgroundSizeDotted: string) => import("@emotion/utils").SerializedStyles;
+export declare const getGrid: (surfaceBackgroundSize: string) => import("@emotion/utils").SerializedStyles;
+export declare const getVariant: (variant: SurfaceVariant, surfaceBackgroundSize: string, surfaceBackgroundSizeDotted: string) => import("@emotion/utils").SerializedStyles;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/surface/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/surface/styles.js"],"names":[],"mappings":"AAoBA;;;;;;GAMG;AACH;IAL2B,YAAY;IACZ,UAAU;IACV,WAAW;IACX,SAAS;8CAgBnC;AA/BD,gEAIE;AAEF,mEAEE;AAyBF,gEAA6B;AAE7B,kEAEE;AAEF,iEAEE;AAkDK,iDAHI,MAAM,+BACN,MAAM,6CAQhB;AAsBM,+CAHI,MAAM,GACL,OAAO,gBAAgB,EAAE,gBAAgB,CAQpD;AAOM,oCAJI,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,yBACxD,MAAM,+BACN,MAAM,6CA2BhB"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/surface/styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5D,eAAO,MAAM,OAAO,2CAInB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,wBAAgB,UAAU,CAAE,EAC3B,YAAY,EACZ,UAAU,EACV,WAAW,EACX,SAAS,GACT,EAAE,IAAI,CACN,YAAY,EACZ,cAAc,GAAG,YAAY,GAAG,aAAa,GAAG,WAAW,CAC3D,6CASA;AAED,eAAO,MAAM,OAAO,2CAAQ,CAAC;AAE7B,eAAO,MAAM,SAAS,2CAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,2CAEpB,CAAC;AAiCF,eAAO,MAAM,SAAS,0BACE,MAAM,+BACA,MAAM,8CAInC,CAAC;AAkBF,eAAO,MAAM,OAAO,0BAA4B,MAAM,8CAMrD,CAAC;AAEF,eAAO,MAAM,UAAU,YACb,cAAc,yBACA,MAAM,+BACA,MAAM,8CAsBnC,CAAC"}

package/build-types/surface/test/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/surface/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/surface/test/index.tsx"],"names":[],"mappings":""}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare type SurfaceVariant = 'primary' | 'secondary' | 'tertiary' | 'dotted' | 'grid';
-export declare type Props = {
+export declare type SurfaceProps = {
     /**
      * Determines the grid size for "dotted" and "grid" variants.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/surface/types.ts"],"names":[],"mappings":";AAAA,oBAAY,cAAc,GACvB,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,MAAM,CAAC;AAEV,oBAAY,KAAK,GAAG;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/surface/types.ts"],"names":[],"mappings":";AAAA,oBAAY,cAAc,GACvB,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,MAAM,CAAC;AAEV,oBAAY,YAAY,GAAG;IAC1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC"}

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { TextareaControlProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+/**
+ * TextareaControls are TextControls that allow for multiple lines of text, and
+ * wrap overflow text onto a new line. They are a fixed height and scroll
+ * vertically when the cursor reaches the bottom of the field.
+ *
+ * ```jsx
+ * import { TextareaControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTextareaControl = () => {
+ *   const [ text, setText ] = useState( '' );
+ *
+ *   return (
+ *     <TextareaControl
+ *       label="Text"
+ *       help="Enter some text"
+ *       value={ text }
+ *       onChange={ ( value ) => setText( value ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export declare function TextareaControl(props: Omit<WordPressComponentProps<TextareaControlProps, 'textarea', false>, 'ref'>): JSX.Element;
+export default TextareaControl;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/textarea-control/index.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAG9B,KAAK,EAAE,IAAI,CACV,uBAAuB,CAAE,oBAAoB,EAAE,UAAU,EAAE,KAAK,CAAE,EAClE,KAAK,CACL,eAoCD;AAED,eAAe,eAAe,CAAC"}

package/build-types/textarea-control/stories/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import TextareaControl from '..';
+declare const meta: ComponentMeta<typeof TextareaControl>;
+export default meta;
+export declare const Default: ComponentStory<typeof TextareaControl>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/textarea-control/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/textarea-control/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,eAAe,CAehD,CAAC;AACF,eAAe,IAAI,CAAC;AAoBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,eAAe,CAE3D,CAAC"}

package/build-types/textarea-control/styles/textarea-control-styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledTextarea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
+//# sourceMappingURL=textarea-control-styles.d.ts.map

package/build-types/textarea-control/styles/textarea-control-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-control-styles.d.ts","sourceRoot":"","sources":["../../../src/textarea-control/styles/textarea-control-styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,cAAc;;;2HAG1B,CAAC"}

package/build-types/textarea-control/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import type { TextareaHTMLAttributes } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+export declare type TextareaControlProps = Pick<BaseControlProps, 'hideLabelFromVision' | 'help' | 'label'> & {
+    /**
+     * A function that receives the new value of the textarea each time it
+     * changes.
+     */
+    onChange: (value: string) => void;
+    /**
+     * The current value of the textarea.
+     */
+    value: string;
+    /**
+     * The number of rows the textarea should contain.
+     *
+     * @default 4
+     */
+    rows?: TextareaHTMLAttributes<HTMLTextAreaElement>['rows'];
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/textarea-control/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/textarea-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEpD;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,oBAAY,oBAAoB,GAAG,IAAI,CACtC,gBAAgB,EAChB,qBAAqB,GAAG,MAAM,GAAG,OAAO,CACxC,GAAG;IACH;;;OAGG;IACH,QAAQ,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAE,mBAAmB,CAAE,CAAE,MAAM,CAAE,CAAC;CAC/D,CAAC"}

package/build-types/utils/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export { default as useControlledState } from "./use-controlled-state";
 export { default as useUpdateEffect } from "./use-update-effect";
-export { useCombinedRef } from "./use-combined-ref";
 export { useControlledValue } from "./use-controlled-value";
 export { useCx } from "./use-cx";
 export { useLatestRef } from "./use-latest-ref";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.11.0",
+	"version": "19.12.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "1.0.0",
 		"@floating-ui/react-dom": "0.6.3",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.9.0",
-		"@wordpress/compose": "^5.7.0",
-		"@wordpress/date": "^4.9.0",
-		"@wordpress/deprecated": "^3.9.0",
-		"@wordpress/dom": "^3.9.0",
-		"@wordpress/element": "^4.7.0",
-		"@wordpress/escape-html": "^2.9.0",
-		"@wordpress/hooks": "^3.9.0",
-		"@wordpress/i18n": "^4.9.0",
-		"@wordpress/icons": "^9.0.0",
-		"@wordpress/is-shallow-equal": "^4.9.0",
-		"@wordpress/keycodes": "^3.9.0",
-		"@wordpress/primitives": "^3.7.0",
-		"@wordpress/rich-text": "^5.7.0",
-		"@wordpress/warning": "^2.9.0",
+		"@wordpress/a11y": "^3.10.0",
+		"@wordpress/compose": "^5.8.0",
+		"@wordpress/date": "^4.10.0",
+		"@wordpress/deprecated": "^3.10.0",
+		"@wordpress/dom": "^3.10.0",
+		"@wordpress/element": "^4.8.0",
+		"@wordpress/escape-html": "^2.10.0",
+		"@wordpress/hooks": "^3.10.0",
+		"@wordpress/i18n": "^4.10.0",
+		"@wordpress/icons": "^9.1.0",
+		"@wordpress/is-shallow-equal": "^4.10.0",
+		"@wordpress/keycodes": "^3.10.0",
+		"@wordpress/primitives": "^3.8.0",
+		"@wordpress/rich-text": "^5.8.0",
+		"@wordpress/warning": "^2.10.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -62,7 +62,7 @@
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"moment": "^2.22.1",
+		"moment": "^2.26.0",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
 		"react-dates": "^21.8.0",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
 }

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

@@ -53,11 +53,13 @@ export default function AlignmentMatrixControl( {
 		onChange( nextValue );
 	};
 
+	const { setCurrentId } = composite;
+
 	useEffect( () => {
 		if ( typeof value !== 'undefined' ) {
-			composite.setCurrentId( getItemId( baseId, value ) );
+			setCurrentId( getItemId( baseId, value ) );
 		}
-	}, [ value, composite.setCurrentId ] );
+	}, [ value, setCurrentId, baseId ] );
 
 	const classes = classnames(
 		'component-alignment-matrix-control',

package/src/autocomplete/autocompleter-ui.js

@@ -39,7 +39,7 @@ export function getAutoCompleterUI( autocompleter ) {
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
-		}, [ items ] );
+		}, [ onChangeOptions, items ] );
 
 		if ( ! items.length > 0 ) {
 			return null;

package/src/autocomplete/autocompleter-ui.native.js

@@ -71,7 +71,7 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
-		}, [ items, isVisible, text ] );
+		}, [ onChangeOptions, items, isVisible, text, startAnimation ] );
 
 		const activeItemStyles = usePreferredColorSchemeStyle(
 			styles[ 'components-autocomplete__item-active' ],
@@ -111,7 +111,7 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
-			[ isVisible ]
+			[ animationValue, isVisible, reset ]
 		);
 
 		const contentStyles = {

package/src/autocomplete/index.js

@@ -11,6 +11,7 @@ import {
 	useEffect,
 	useState,
 	useRef,
+	useMemo,
 } from '@wordpress/element';
 import {
 	ENTER,
@@ -132,7 +133,7 @@ function useAutocomplete( {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ autocompleter, setAutocompleter ] = useState( null );
 	const [ AutocompleterUI, setAutocompleterUI ] = useState( null );
-	const [ backspacing, setBackspacing ] = useState( false );
+	const backspacing = useRef( false );
 
 	function insertCompletion( replacement ) {
 		const end = record.start;
@@ -218,7 +219,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		setBackspacing( event.keyCode === BACKSPACE );
+		backspacing.current = event.keyCode === BACKSPACE;
 
 		if ( ! autocompleter ) {
 			return;
@@ -268,11 +269,14 @@ function useAutocomplete( {
 		event.preventDefault();
 	}
 
-	let textContent;
-
-	if ( isCollapsed( record ) ) {
-		textContent = getTextContent( slice( record, 0 ) );
-	}
+	// textContent is a primitive (string), memoizing is not strictly necessary
+	// but this is a preemptive performance improvement, since the autocompleter
+	// is a potential bottleneck for the editor type metric.
+	const textContent = useMemo( () => {
+		if ( isCollapsed( record ) ) {
+			return getTextContent( slice( record, 0 ) );
+		}
+	}, [ record ] );
 
 	useEffect( () => {
 		if ( ! textContent ) {
@@ -325,7 +329,8 @@ function useAutocomplete( {
 				// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
 				// if the user presses backspace here, it will show the completion popup again.
 				const matchingWhileBackspacing =
-					backspacing && textWithoutTrigger.split( /\s/ ).length <= 3;
+					backspacing.current &&
+					textWithoutTrigger.split( /\s/ ).length <= 3;
 
 				if (
 					mismatch &&
@@ -370,7 +375,14 @@ function useAutocomplete( {
 				: AutocompleterUI
 		);
 		setFilterValue( query );
-	}, [ textContent ] );
+	}, [
+		textContent,
+		AutocompleterUI,
+		autocompleter,
+		completers,
+		record,
+		filteredOptions.length,
+	] );
 
 	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
 	const { className } = autocompleter || {};

package/src/border-box-control/border-box-control/hook.ts

@@ -98,11 +98,11 @@ export function useBorderBoxControl(
 	const cx = useCx();
 	const classes = useMemo( () => {
 		return cx( styles.BorderBoxControl, className );
-	}, [ className ] );
+	}, [ cx, className ] );
 
 	const linkedControlClassName = useMemo( () => {
 		return cx( styles.LinkedBorderControl );
-	}, [] );
+	}, [ cx ] );
 
 	return {
 		...otherProps,

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -29,6 +29,7 @@ const BorderBoxControlSplitControls = (
 		onChange,
 		popoverPlacement,
 		popoverOffset,
+		rightAlignedClassName,
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
@@ -80,6 +81,7 @@ const BorderBoxControlSplitControls = (
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
+				className={ rightAlignedClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }

package/src/border-box-control/border-box-control-split-controls/hook.ts

@@ -22,13 +22,27 @@ export function useBorderBoxControlSplitControls(
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControlSplitControls, className );
-	}, [ className, rtl.watch() ] );
+		return cx( styles.borderBoxControlSplitControls(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
 
 	const centeredClassName = useMemo( () => {
 		return cx( styles.CenteredBorderControl, className );
-	}, [] );
+	}, [ cx, className ] );
 
-	return { ...otherProps, centeredClassName, className: classes };
+	const rightAlignedClassName = useMemo( () => {
+		return cx( styles.rightBorderControl(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
+
+	return {
+		...otherProps,
+		centeredClassName,
+		className: classes,
+		rightAlignedClassName,
+	};
 }

package/src/border-box-control/border-box-control-visualizer/hook.ts

@@ -24,12 +24,15 @@ export function useBorderBoxControlVisualizer(
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
 		return cx(
-			styles.BorderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
 			className
 		);
-	}, [ className, value, __next36pxDefaultSize, rtl.watch() ] );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
 
 	return { ...otherProps, className: classes, value };
 }

package/src/border-box-control/styles.ts

@@ -43,7 +43,7 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {
 	return `${ color } ${ borderStyle } ${ clampedWidth }`;
 };
 
-export const BorderBoxControlVisualizer = (
+export const borderBoxControlVisualizer = (
 	borders?: Borders,
 	__next36pxDefaultSize?: boolean
 ) => {
@@ -64,7 +64,7 @@ export const BorderBoxControlVisualizer = (
 	`;
 };
 
-export const BorderBoxControlSplitControls = css`
+export const borderBoxControlSplitControls = () => css`
 	position: relative;
 	flex: 1;
 	${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }
@@ -74,3 +74,7 @@ export const CenteredBorderControl = css`
 	grid-column: span 2;
 	margin: 0 auto;
 `;
+
+export const rightBorderControl = () => css`
+	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
+`;

package/src/border-control/border-control/hook.ts

@@ -56,7 +56,7 @@ export function useBorderControl(
 
 			onChange( newBorder );
 		},
-		[ onChange, shouldSanitizeBorder, sanitizeBorder ]
+		[ onChange, shouldSanitizeBorder ]
 	);
 
 	const onWidthChange = useCallback(
@@ -97,7 +97,13 @@ export function useBorderControl(
 
 			onBorderChange( updatedBorder );
 		},
-		[ border, hadPreviousZeroWidth, onBorderChange ]
+		[
+			border,
+			hadPreviousZeroWidth,
+			colorSelection,
+			styleSelection,
+			onBorderChange,
+		]
 	);
 
 	const onSliderChange = useCallback(