RelativeTime: prefer children if passed

Author: siddharthkp

packages/react/src/RelativeTime/RelativeTime.tsx

@@ -6,11 +6,11 @@ import {createComponent} from '../utils/custom-element'
 const RelativeTimeComponent = createComponent(RelativeTimeElement, 'relative-time')
 
 const localeOptions: Intl.DateTimeFormatOptions = {month: 'short', day: 'numeric', year: 'numeric'}
-function RelativeTime({date, datetime, ...props}: RelativeTimeProps) {
+function RelativeTime({date, datetime, children, ...props}: RelativeTimeProps) {
   if (datetime) date = new Date(datetime)
   return (
     <RelativeTimeComponent {...props} date={date}>
-      {date?.toLocaleDateString('en', localeOptions) || ''}
+      {children || date?.toLocaleDateString('en', localeOptions) || ''}
     </RelativeTimeComponent>
   )
 }

packages/react/src/__tests__/RelativeTime.test.tsx

@@ -30,4 +30,11 @@ describe('RelativeTime', () => {
     const date = new Date('2024-03-07T12:22:48.123Z')
     expect(render(<RelativeTime datetime={date.toJSON()} />).children).toEqual(['Mar 7, 2024'])
   })
+
+  it('renders children if passed', () => {
+    const date = new Date('2024-03-07T12:22:48.123Z')
+    expect(render(<RelativeTime date={date}>server rendered date</RelativeTime>).children).toEqual([
+      'server rendered date',
+    ])
+  })
 })