feat(internal-utils): add deepFind internal util

Add deepFind internal util

packages/utils/internal-utils/src/index.ts

@@ -2,3 +2,4 @@ export { tw } from './tw'
 export { makeVariants } from './variants'
 export * as VariantTypes from './variants/types'
 export * as variantConstants from './variants/constants'
+export { deepFind } from './react-children-utilities/deepFind'

packages/utils/internal-utils/src/react-children-utilities/deepFind.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import { Children, isValidElement } from 'react'
+
+import { hasComplexChildren } from './hasComplexChildren'
+
+// from https://github.com/fernandopasik/react-children-utilities
+function deepFind(
+  children: ReactNode | ReactNode[],
+  deepFindFn: (child: ReactNode, index?: number, children?: ReactNode[]) => boolean
+): ReactNode | undefined {
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let found
+
+  Children.toArray(children).find((child: ReactNode, index: number, findChildren: ReactNode[]) => {
+    if (deepFindFn(child, index, findChildren)) {
+      found = child
+
+      return true
+    }
+
+    if (isValidElement(child) && hasComplexChildren(child)) {
+      // Find inside the child that has children
+      found = deepFind(child.props.children, deepFindFn)
+
+      return typeof found !== 'undefined'
+    }
+
+    return false
+  })
+
+  return found
+}
+
+export { deepFind }

packages/utils/internal-utils/src/react-children-utilities/hasChildren.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, ReactNode } from 'react'
+import { isValidElement } from 'react'
+
+function hasChildren(
+  element: ReactNode
+): element is ReactElement<{ children: ReactNode | ReactNode[] }> {
+  return isValidElement<{ children?: ReactNode[] }>(element) && Boolean(element.props.children)
+}
+
+export { hasChildren }

packages/utils/internal-utils/src/react-children-utilities/hasComplexChildren.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from 'react'
+import { Children, isValidElement } from 'react'
+
+import { hasChildren } from './hasChildren'
+
+function hasComplexChildren(
+  element: ReactNode
+): element is ReactElement<{ children: ReactNode | ReactNode[] }> {
+  return (
+    isValidElement(element) &&
+    hasChildren(element) &&
+    Children.toArray(element.props.children).reduce(
+      (response: boolean, child: ReactNode): boolean => response || isValidElement(child),
+      false
+    )
+  )
+}
+
+export { hasComplexChildren }