diff --git a/packages/paste-core/layout/stack/src/index.tsx b/packages/paste-core/layout/stack/src/index.tsx index 7ccb89e4ec..4f2e91c336 100644 --- a/packages/paste-core/layout/stack/src/index.tsx +++ b/packages/paste-core/layout/stack/src/index.tsx @@ -10,7 +10,7 @@ import { MarginProps, SpaceOptions, } from '@twilio-paste/style-props'; -import {Box, BoxProps, safelySpreadBoxProps} from '@twilio-paste/box'; +import {Box, BoxElementProps, safelySpreadBoxProps} from '@twilio-paste/box'; type StackChildMargins = Pick; type DisplayOptions = 'block' | 'flex'; @@ -19,7 +19,7 @@ type StackOrientationOptions = 'horizontal' | 'vertical'; export type StackOrientation = ResponsiveValue; interface StackStyleProps extends Pick, Pick {} -export interface StackProps extends Pick, React.HTMLAttributes { +export interface StackProps extends BoxElementProps { orientation: StackOrientation; spacing: SpaceOptions; } @@ -82,15 +82,21 @@ export const getStackChildMargins = (orientation: StackOrientation, spacing: Spa }; const Stack: React.FC = ({children, orientation, spacing, ...props}) => { - const count = React.useMemo(() => React.Children.count(children), [children]); - const StackStyles = React.useMemo(() => getStackStyles(orientation), [orientation]); - const validChildren = React.Children.toArray(children).filter(React.isValidElement); + const [childrenCount, validChildren] = React.useMemo( + () => [ + React.Children.count(children), + React.Children.toArray(children).filter(child => React.isValidElement(child) || typeof child === 'string'), + ], + [children] + ); + const stackStyles = React.useMemo(() => getStackStyles(orientation), [orientation]); + const childMargins = React.useMemo(() => getStackChildMargins(orientation, spacing), [orientation, spacing]); return ( - + {validChildren.map((child, index) => { return ( - + {child} );