@sanity/ui 2.3.4 → 2.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "keywords": [
     "sanity",
     "ui",

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -30,13 +30,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   useClickOutside(collapse, [expandElement, popoverElement])
 
-  const rawItems = useMemo(
-    () =>
-      Children.toArray(children).filter((child) => {
-        return isValidElement(child)
-      }),
-    [children],
-  )
+  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
   const items = useMemo(() => {
     const len = rawItems.length

package/src/core/components/tree/tree.tsx

@@ -213,7 +213,7 @@ export const Tree = memo(
       ) as HTMLElement[]
 
       setItemElements(_itemElements)
-    }, [children, ref])
+    }, [children])
 
     return (
       <TreeContext.Provider value={contextValue}>

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,11 +1,10 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {cloneElement, forwardRef} from 'react'
+import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
-import {childrenToElementArray} from '../helpers'
 import {AvatarCounter} from './avatarCounter'
 
 const BASE_STYLES = css`
@@ -66,9 +65,10 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children = childrenToElementArray(childrenProp).filter(
-    (child) => typeof child !== 'string',
-  ) as React.ReactElement[]
+  const children = useMemo<React.ReactElement[]>(
+    () => Children.toArray(childrenProp).filter(isValidElement),
+    [childrenProp],
+  )
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useArrayProp(sizeProp)
 

package/src/core/primitives/inline/inline.tsx

@@ -1,8 +1,7 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef, useMemo, Children} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
-import {childrenToElementArray} from '../helpers'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
@@ -28,10 +27,7 @@ export const Inline = forwardRef(function Inline(
   const {as, children: childrenProp, space, ...restProps} = props
 
   const children = useMemo(
-    () =>
-      childrenToElementArray(childrenProp)
-        .filter(Boolean)
-        .map((child, idx) => <div key={idx}>{child}</div>),
+    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
     [childrenProp],
   )
 

package/src/core/primitives/helpers.ts

@@ -1,11 +0,0 @@
-import {isElement, isFragment} from 'react-is'
-
-export function childrenToElementArray(
-  children: React.ReactNode,
-): Array<React.ReactElement | string> {
-  const childrenArray = Array.isArray(children) ? children : [children]
-
-  return childrenArray.filter(
-    (node) => isElement(node) || isFragment(node) || typeof node === 'string',
-  ) as Array<React.ReactElement | string>
-}