From 5fd423f088a45e3e58ca929fdfb6a5a4ee94e6d3 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 4 Aug 2021 17:34:25 +0200 Subject: [PATCH 1/3] Better return type for rtl() function --- packages/components/src/utils/rtl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/utils/rtl.js b/packages/components/src/utils/rtl.js index 9695e5539be97f..412419e74f8326 100644 --- a/packages/components/src/utils/rtl.js +++ b/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 () => { From 3b93161bab5d32ea5d252045916533f18ab56e0e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 4 Aug 2021 17:36:02 +0200 Subject: [PATCH 2/3] Add rtl.watch() utility function --- packages/components/src/utils/rtl.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/src/utils/rtl.js b/packages/components/src/utils/rtl.js index 412419e74f8326..d001c47b01d252 100644 --- a/packages/components/src/utils/rtl.js +++ b/packages/components/src/utils/rtl.js @@ -79,3 +79,6 @@ export function rtl( ltrStyles = {}, rtlStyles ) { return isRTL() ? css( convertLTRToRTL( ltrStyles ) ) : css( ltrStyles ); }; } + +// Useful when in need of observing RTL/LTR changes in the current locale. +rtl.watch = () => isRTL(); From 5503c65cea68e93e9be58096fb3dcd5d2b4892f4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 4 Aug 2021 17:48:01 +0200 Subject: [PATCH 3/3] Update packages/components/src/utils/rtl.js Co-authored-by: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> --- packages/components/src/utils/rtl.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/components/src/utils/rtl.js b/packages/components/src/utils/rtl.js index d001c47b01d252..f8c7efbda5bf69 100644 --- a/packages/components/src/utils/rtl.js +++ b/packages/components/src/utils/rtl.js @@ -80,5 +80,16 @@ export function rtl( ltrStyles = {}, rtlStyles ) { }; } -// Useful when in need of observing RTL/LTR changes in the current locale. +/** + * 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();