Components utils: rtl() return type, rtl.watch() utility (#33882)

Co-authored-by: sarayourfriend <[email protected]>

packages/components/src/utils/rtl.js

@@ -66,7 +66,7 @@ export const convertLTRToRTL = ( ltrStyles = {} ) => {
  * @param {import('react').CSSProperties} ltrStyles   Ltr styles. Converts and renders from ltr -> rtl styles, if applicable.
  * @param {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided.
  *
- * @return {Function} A function to output CSS styles for Emotion's renderer
+ * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer
  */
 export function rtl( ltrStyles = {}, rtlStyles ) {
 	return () => {
@@ -79,3 +79,17 @@ export function rtl( ltrStyles = {}, rtlStyles ) {
 		return isRTL() ? css( convertLTRToRTL( ltrStyles ) ) : css( ltrStyles );
 	};
 }
+
+/**
+ * Call this in the `useMemo` dependency array to ensure that subsequent renders will
+ * cause rtl styles to update based on the `isRTL` return value even if all other dependencies
+ * remain the same.
+ *
+ * @example
+ * const styles = useMemo( () => {
+ *   return css`
+ *     ${ rtl( { marginRight: '10px' } ) }
+ *   `;
+ * }, [ rtl.watch() ] );
+ */
+rtl.watch = () => isRTL();