From 46a08efaa665842d53cce3e68ab0cb57bf8025c1 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Mon, 8 Feb 2021 20:27:52 -0800
Subject: [PATCH] =?UTF-8?q?AvatarStack.js=20=E2=86=92=20AvatarStack.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{AvatarStack.js => AvatarStack.tsx}       | 24 ++++++++++++++-----
 .../{AvatarStack.js => AvatarStack.tsx}       |  0
 ...atarStack.js.snap => AvatarStack.tsx.snap} |  0
 3 files changed, 18 insertions(+), 6 deletions(-)
 rename src/{AvatarStack.js => AvatarStack.tsx} (83%)
 rename src/__tests__/{AvatarStack.js => AvatarStack.tsx} (100%)
 rename src/__tests__/__snapshots__/{AvatarStack.js.snap => AvatarStack.tsx.snap} (100%)

diff --git a/src/AvatarStack.js b/src/AvatarStack.tsx
similarity index 83%
rename from src/AvatarStack.js
rename to src/AvatarStack.tsx
index 62646e0318f..12e96e6a78d 100644
--- a/src/AvatarStack.js
+++ b/src/AvatarStack.tsx
@@ -2,12 +2,18 @@ import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import sx from './sx'
-import {get, COMMON} from './constants'
+import sx, {SxProp} from './sx'
+import {get, COMMON, SystemCommonProps} from './constants'
 import theme from './theme'
 import {Absolute} from './Position'
+import {ComponentProps} from './utils/types'
 
-const AvatarStackWrapper = styled.span`
+type StyledAvatarStackWrapperProps = {
+  count?: number
+} & SystemCommonProps &
+  SxProp
+
+const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
   display: flex;
   position: relative;
   height: 20px;
@@ -124,8 +130,9 @@ const AvatarStackWrapper = styled.span`
   ${COMMON}
   ${sx};
 `
-const transformChildren = children => {
+const transformChildren = (children: React.ReactNode) => {
   return React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child
     return React.cloneElement(child, {
       className: classnames(child.props.className, 'pc-AvatarItem'),
       sx: {zIndex: 10 - index, ...child.props.sx}
@@ -133,8 +140,12 @@ const transformChildren = children => {
   })
 }
 
-const AvatarStack = ({children = [], alignRight, ...rest}) => {
-  const count = children.length
+export type AvatarStackProps = {
+  alignRight?: boolean
+} & ComponentProps<typeof AvatarStackWrapper>
+
+const AvatarStack = ({children, alignRight, ...rest}: AvatarStackProps) => {
+  const count = React.Children.count(children)
   const wrapperClassNames = classnames({
     'pc-AvatarStack--two': count === 2,
     'pc-AvatarStack--three-plus': count > 2,
@@ -158,4 +169,5 @@ AvatarStack.propTypes = {
   alignRight: PropTypes.bool,
   ...sx.propTypes
 }
+
 export default AvatarStack
diff --git a/src/__tests__/AvatarStack.js b/src/__tests__/AvatarStack.tsx
similarity index 100%
rename from src/__tests__/AvatarStack.js
rename to src/__tests__/AvatarStack.tsx
diff --git a/src/__tests__/__snapshots__/AvatarStack.js.snap b/src/__tests__/__snapshots__/AvatarStack.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/AvatarStack.js.snap
rename to src/__tests__/__snapshots__/AvatarStack.tsx.snap