import * as React from 'react' ; import styled from '@emotion/styled' ; import { createComponent , StyledType } from '@workday/canvas-kit-react/common' ; import { Box , BoxProps } from '@workday/canvas-kit-labs-react/common' ; import { Flex , FlexProps } from './Flex' ; import { getValidChildren } from './utils/getValidChildren' ; import { stack , StackStyleProps } from './utils/stack' ; export type StackProps = FlexProps & StackStyleProps ; const StackItem = createComponent ( 'div' ) ( { displayName : 'Stack.Item' , Component : ( { children , ... elemProps } , ref , Element ) => { return ( < Box as = { Element } ref = { ref } display = "inline-block" flex = "0 0 auto" minWidth = { 0 } { ... elemProps } > { children } < /Box>); } , } ) ; const shouldForwardProp = ( prop ) => { return prop !== 'spacing' ; } ; const StyledStack = styled ( Flex , { shouldForwardProp } ) < StyledType & StackProps > ( stack ) ; export const Stack = createComponent ( 'div' ) ( { displayName : 'Stack' , Component : ( { children , flexDirection = 'row' , spacing , shouldWrapChildren = false , ... elemProps } , ref , Element ) => { const validChildren = getValidChildren ( children ) ; return ( < StyledStack as = { Element } ref = { ref } flexDirection = { flexDirection } spacing = { spacing } { ... elemProps } > { shouldWrapChildren ? validChildren . map ( child => < StackItem > { child } < /StackItem>) : validChildren } < /StyledStack>); } , subComponents : { Item : StackItem , } , } ) ; export type HStackProps = Omit < StackProps , 'flexDirection' > & { default flexDirection ? : 'row' | 'row-reverse' ; } ; export const HStack = createComponent ( 'div' ) ( { displayName : 'HStack' , Component : ( { children , flexDirection = 'row' , ... elemProps } , ref , Element ) => { return ( < Stack as = { Element } ref = { ref } flexDirection = { flexDirection } { ... elemProps } > { children } < /Stack>); } , subComponents : { Item : StackItem , } , } ) ; export type VStackProps = Omit < StackProps , 'flexDirection' > & { default flexDirection ? : 'column' | 'column-reverse' ; } ; export const VStack = createComponent ( 'div' ) ( { displayName : 'VStack' , Component : ( { children , flexDirection = 'column' , ... elemProps } , ref , Element ) => { return ( < Stack as = { Element } ref = { ref } flexDirection = { flexDirection } { ... elemProps } > { children } < /Stack>); } , subComponents : { Item : StackItem , } , } ) ;