fix(InfoTable): style and overflow

.changeset/cozy-areas-ask.md

@@ -0,0 +1,13 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`InfoTable.Cell`: 
+- should not override the custom style of its children.
+- when children are an array of strings or numbers, the same style is applied as for a single string.
+
+`Text`: updated tooltip detection logic to handle overflowing content when children are of type `(string | number)[]`. Such arrays are now converted to strings for tooltip display. For example:
+```js
+<Text as="p" variant="body">Ready?{isReady ? "Yes!" : "No..."}</Text>
+```
+Previously, no tooltip appeared when overflowing since the computed child was `['Ready?', 'Yes!']` (or `['Ready?', 'No...']`). Now, the tooltip correctly displays `Ready? Yes!`.

packages/ui/src/compositions/InfoTable/components/Cell.tsx

@@ -5,6 +5,7 @@ import { useContext } from 'react'
 import type { CSSProperties, ReactNode } from 'react'
 import { Stack } from '../../../components/Stack'
 import { Text } from '../../../components/Text'
+import { isStringOrNumberArray } from '../../../helpers/isStringOrNumberArray'
 import { InfoTableContext } from '../Context'
 import { infoTableStyle } from '../styles.css'
 
@@ -31,7 +32,10 @@ export const InfoTableCell = ({ children, title, multiline = false, style }: Cel
       </Text>
       <Text
         as="dd"
-        className={cn(infoTableStyle.desc, typeof children === 'string' ? '' : infoTableStyle.descFlex)}
+        className={cn(
+          infoTableStyle.desc,
+          typeof children === 'string' || isStringOrNumberArray(children) ? '' : infoTableStyle.descFlex,
+        )}
         oneLine={!multiline}
         prominence="default"
         sentiment="neutral"

packages/ui/src/compositions/InfoTable/styles.css.ts

@@ -66,7 +66,7 @@ const cellWithCopyButton = style({
   minWidth: 0,
 })
 
-globalStyle(`${desc} > *`, {
+globalStyle(`:where(${desc}) > *`, {
   marginRight: theme.space[1],
   minWidth: 0,
   maxWidth: '100%',

packages/ui/src/helpers/__tests__/index.test.ts

@@ -1,6 +1,7 @@
 import type { KeyboardEvent } from 'react'
 // oxlint-disable typescript/no-unsafe-type-assertion
 import { describe, expect, it, vi } from 'vitest'
+import { isStringOrNumberArray } from '../isStringOrNumberArray'
 import onKeyOnlyNumbers from '../keycode'
 import parseIntOr from '../numbers'
 import recursivelyGetChildrenString from '../recursivelyGetChildrenString'
@@ -19,10 +20,10 @@ describe(recursivelyGetChildrenString, () => {
   it.each`
     test                                                      | value                                         | expected
     ${'is bare string'}                                       | ${'hello'}                                    | ${'hello'}
-    ${'is array'}                                             | ${['hello', 'world']}                         | ${''}
+    ${'is array'}                                             | ${['hello', 'world']}                         | ${'hello world'}
     ${'is Boolean'}                                           | ${true}                                       | ${''}
     ${'is complex children with a nested string children'}    | ${complexChildrenWithStringNestedChildren}    | ${'hello'}
-    ${'is complex children with a nested array children'}     | ${complexChildrenWithArrayNestedChildren}     | ${''}
+    ${'is complex children with a nested array children'}     | ${complexChildrenWithArrayNestedChildren}     | ${'hello'}
     ${'is complex children without a nested string children'} | ${complexChildrenWithoutStringNestedChildren} | ${''}
   `('returns "$expected" when $test', current => {
     expect(recursivelyGetChildrenString(current.value as string)).toBe(current.expected)
@@ -64,4 +65,20 @@ describe(parseIntOr, () => {
   `('returns $expected when $test', current => {
     expect(parseIntOr(current.value as string, fallback)).toBe(current.expected)
   })
+
+  describe(isStringOrNumberArray, () => {
+    it.each`
+      test                           | value                     | expected
+      ${'is number[]'}               | ${[1, 2]}                 | ${true}
+      ${'is string[]'}               | ${['hello', 'world']}     | ${true}
+      ${'is (number | string)[]'}    | ${['', 'true', 1, 0]}     | ${true}
+      ${'is empty'}                  | ${[]}                     | ${true}
+      ${'is (string | undefined)[]'} | ${['test', undefined]}    | ${false}
+      ${'is string'}                 | ${'test'}                 | ${false}
+      ${'is number'}                 | ${1}                      | ${false}
+      ${'is (string[] | string)[]'}  | ${['string', ['string']]} | ${false}
+    `('returns "$expected" when $test', current => {
+      expect(isStringOrNumberArray(current.value as string)).toBe(current.expected)
+    })
+  })
 })

packages/ui/src/helpers/isStringOrNumberArray.ts

@@ -0,0 +1,4 @@
+export const isStringOrNumberArray = (value: unknown): value is (string | number)[] =>
+  Array.isArray(value)
+    ? value.every((item): item is string | number => typeof item === 'string' || typeof item === 'number')
+    : false

packages/ui/src/helpers/recursivelyGetChildrenString.ts

@@ -1,12 +1,22 @@
 import type { ReactNode } from 'react'
+import { isStringOrNumberArray } from './isStringOrNumberArray'
 
 const recursivelyGetChildrenString = (children: ReactNode): string => {
-  if (typeof children === 'string') {
-    return children
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children)
+  }
+
+  if (isStringOrNumberArray(children)) {
+    return children.join(' ')
   }
+
   if (Array.isArray(children)) {
-    return ''
-  } // We can't determine which string to display in tooltip
+    return children
+      .map(child => recursivelyGetChildrenString(child))
+      .filter(Boolean)
+      .join(' ')
+  }
+
   if (typeof children === 'object') {
     const childProps = ((children as unknown as Record<string, unknown>)?.['props'] as Record<string, unknown>)?.[
       'children'