import { ContentDirection , PartialEmotionCanvasTheme , useTheme , } from '@workday/canvas-kit-react/common' ; import { space as spaceTokens , CanvasSpaceKeys } from '@workday/canvas-kit-react/tokens' ; export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse' ; const selector = '& > *:not(style) ~ *:not(style)' ; export type StackSpacing = CanvasSpaceKeys | number | ( string & { } ) ; export type StackStyleProps = { /** sets space values between child elements (bidirectional support) */ spacing : StackSpacing ; default flexDirection ? : StackDirection ; default shouldWrapChildren ? : boolean ; } ; const column = ( value ) => ( { marginTop : spaceTokens [ value as CanvasSpaceKeys ] || value , } ) ; const columnReverse = ( value ) => ( { marginBottom : spaceTokens [ value as CanvasSpaceKeys ] || value , } ) ; const row = ( value , isRTL = false ) => { const attr = isRTL ? 'marginRight' : 'marginLeft' ; return { [ attr ] : spaceTokens [ value as CanvasSpaceKeys ] || value , } ; } ; const rowReverse = ( value , isRTL = false ) => { const attr = isRTL ? 'marginLeft' : 'marginRight' ; return { [ attr ] : spaceTokens [ value as CanvasSpaceKeys ] || value , } ; } ; const stackDirectionProps = { column , 'column-reverse' : columnReverse , row , 'row-reverse' : rowReverse , } ; export function stack < P extends StackStyleProps & { theme ? : PartialEmotionCanvasTheme ; } > ( props ) { let styles = { } ; const { flexDirection = 'row' , spacing } = props ; if ( flexDirection === 'column' || flexDirection === 'column-reverse' ) { const stackFn = stackDirectionProps [ flexDirection ] ; styles = stackFn ( spacing ) ; } if ( flexDirection === 'row' || flexDirection === 'row-reverse' ) { const { canvas } = useTheme ( props . theme ) ; const stackFn = stackDirectionProps [ flexDirection ] ; const isRTL = canvas . direction === ContentDirection . RTL ; styles = stackFn ( spacing , isRTL ) ; } return { [ selector ] : styles , } ; }