React 19

.prettierignore

@@ -1,7 +1,8 @@
 # Add files here to ignore them from prettier formatting
 
+.jj
 /dist
 /coverage
 /templates
 
-mockServiceWorker.js
+mockServiceWorker.js

app/components/CapacityBar.tsx

@@ -6,6 +6,8 @@
  * Copyright Oxide Computer Company
  */
 
+import type { JSX } from 'react'
+
 import { BigNum } from '~/ui/lib/BigNum'
 import { percentage, splitDecimal } from '~/util/math'
 

app/components/DocsPopover.tsx

@@ -8,6 +8,7 @@
 
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import cn from 'classnames'
+import type { JSX } from 'react'
 
 import { Info16Icon, OpenLink12Icon } from '@oxide/design-system/icons/react'
 

app/components/TimeAgo.tsx

@@ -6,6 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import type { Placement } from '@floating-ui/react'
+import type { JSX } from 'react'
 
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { timeAgoAbbr, toLocaleDateTimeString } from '~/util/date'

app/components/form/fields/DateTimeRangePicker.tsx

@@ -119,7 +119,9 @@ export function DateTimeRangePicker({
           label="Choose a date range"
           value={range}
           onChange={(range) => {
-            setRange(range)
+            if (range) {
+              setRange(range)
+            }
             setPreset('custom')
           }}
           minValue={minValue}

app/table/Table.tsx

@@ -7,6 +7,7 @@
  */
 import { flexRender, type Table as TableInstance } from '@tanstack/react-table'
 import cn from 'classnames'
+import type { JSX } from 'react'
 
 import { Table as UITable } from '~/ui/lib/Table'
 

app/ui/lib/DateRangePicker.tsx

@@ -44,6 +44,8 @@ export function DateRangePicker(props: DateRangePickerProps) {
     // because we always pass a value to this component and there is no way to
     // unset the value through the UI.
     if (!state.dateRange) return 'No range selected'
+    if (!state.dateRange.end) return 'No end date selected'
+    if (!state.dateRange.start) return 'No start date selected'
 
     return formatter.formatRange(
       state.dateRange.start.toDate(getLocalTimeZone()),
@@ -94,15 +96,15 @@ export function DateRangePicker(props: DateRangePickerProps) {
               <TimeField
                 label="Start time"
                 value={state.timeRange?.start || null}
-                onChange={(v: TimeValue) => state.setTime('start', v)}
+                onChange={(v: TimeValue | null) => state.setTime('start', v)}
                 hourCycle={24}
                 className="shrink-0 grow basis-0"
               />
               <div className="text-quaternary">–</div>
               <TimeField
                 label="End time"
                 value={state.timeRange?.end || null}
-                onChange={(v: TimeValue) => state.setTime('end', v)}
+                onChange={(v: TimeValue | null) => state.setTime('end', v)}
                 hourCycle={24}
                 className="shrink-0 grow basis-0"
               />

app/ui/lib/Table.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import React, { useRef, type ReactElement } from 'react'
+import React, { useRef, type JSX, type ReactElement } from 'react'
 import SimpleBar from 'simplebar-react'
 
 import { useIsOverflow } from '~/hooks/use-is-overflow'
@@ -71,7 +71,7 @@
 Table.Body = ({ className, children, ...props }: TableBodyProps) => {
   const rows = React.Children.toArray(children).map((c, i, siblings) => {
     const child = c as ReactElement
     const beforeSelected = (siblings[i - 1] as ReactElement | undefined)?.props.selected
     const afterSelected = (siblings[i + 1] as ReactElement | undefined)?.props.selected
     const className =
       child.props.selected && (beforeSelected || afterSelected)

app/util/children.spec.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import type { JSX } from 'react'
 import { describe, expect, it } from 'vitest'
 
 import { flattenChildren, isOneOf, pluckAllOfType, pluckFirstOfType } from './children'

app/util/classed.ts

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import React, { forwardRef } from 'react'
+import React, { forwardRef, type JSX } from 'react'
 
 // all the cuteness of tw.span`text-green-500 uppercase` with zero magic
 

app/util/str.spec.tsx

@@ -94,6 +94,13 @@ describe('extractText', () => {
         </>
       )
     ).toBe('This is my text')
+    expect(
+      extractText(
+        <>
+          Numbers like <em>9</em> are just strings
+        </>
+      )
+    ).toBe('Numbers like 9 are just strings')
   })
   it('extracts strings from nested elements', () => {
     expect(

app/util/str.ts

@@ -87,7 +87,7 @@ export const extractText = (children: React.ReactNode): string =>
       typeof child === 'string'
         ? child
         : React.isValidElement(child)
-          ? extractText(child.props.children)
+          ? extractText((child.props as { children?: React.ReactNode }).children)
           : ''
     )
     .join(' ')