import { convertToStaticStates , CanvasTheme , useIsRTL , useTheme , } from '@workday/canvas-kit-react/common' ; import { CSSProperties } from '@workday/canvas-kit-react/tokens' ; import { useMemo } from 'react' ; import rtlCSSJS from 'rtl-css-js' ; export type ComponentStyles = Record < string , CSSProperties > ; type ThemeWithStaticStates = CanvasTheme & { _staticStates ? : boolean ; } ; const getDirectionalStyles = ( isRTL , ... styles ) => { return isRTL ? rtlCSSJS ( styles ) : styles ; } ; const getConvertedStyles = ( shouldConvert , styles ) : CSSProperties => { return shouldConvert ? convertToStaticStates ( styles ) ?? styles : styles ; } ; returns example export function useThemeRTL ( ) { const theme = useTheme ( ) ; const direction = useIsRTL ( theme ) ; const shouldConvert = ( theme . canvas as ThemeWithStaticStates ) . _staticStates ?? false ; const themeRTL = useMemo ( ( ) => { return ( ... cssObject ) => { const styles = getDirectionalStyles ( direction , ... cssObject ) ; return styles . reduce ( ( first , second ) => { const convertedFirst = shouldConvert ? getConvertedStyles ( shouldConvert , first ) : first ; const convertedSecond = shouldConvert ? getConvertedStyles ( shouldConvert , second ) : second ; return { ... convertedFirst , ... convertedSecond } ; } , { } ) ; } ; } , [ direction , shouldConvert ] ) ; return { themeRTL , theme } ; }