@duro-app/ui 5.11.0 → 5.12.0

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
-import {css, html} from 'react-strict-dom'
+import {html} from 'react-strict-dom'
 import {RadioGroup} from './RadioGroup'
 
 const meta: Meta = {
@@ -81,3 +81,66 @@ export const Controlled: Story = {
     await expect(radios[0]).not.toBeChecked()
   },
 }
+
+const onPick = fn()
+
+export const OneChangePerPick: Story = {
+  render: () => (
+    <RadioGroup.Root defaultValue="apple" onValueChange={onPick} aria-label="Fruit">
+      <RadioGroup.Item value="apple">Apple</RadioGroup.Item>
+      <RadioGroup.Item value="banana">Banana</RadioGroup.Item>
+      <RadioGroup.Item value="cherry">Cherry</RadioGroup.Item>
+    </RadioGroup.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    onPick.mockClear()
+    // Clicking the visible label text…
+    await userEvent.click(canvas.getByText('Banana'))
+    await expect(onPick).toHaveBeenCalledTimes(1)
+    await expect(onPick).toHaveBeenLastCalledWith('banana')
+    // …and clicking the radio itself each report the pick exactly once.
+    await userEvent.click(canvas.getByRole('radio', {name: 'Cherry'}))
+    await expect(onPick).toHaveBeenCalledTimes(2)
+    await expect(onPick).toHaveBeenLastCalledWith('cherry')
+    // Re-picking the selected item is not a change.
+    await userEvent.click(canvas.getByText('Cherry'))
+    await expect(onPick).toHaveBeenCalledTimes(2)
+  },
+}
+
+export const SubmitsWithForm: Story = {
+  render: () => (
+    <html.form aria-label="Order">
+      <RadioGroup.Root name="fruit" defaultValue="apple" aria-label="Fruit">
+        <RadioGroup.Item value="apple">Apple</RadioGroup.Item>
+        <RadioGroup.Item value="banana">Banana</RadioGroup.Item>
+      </RadioGroup.Root>
+    </html.form>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const form = canvas.getByRole('form', {name: 'Order'}) as HTMLFormElement
+    await expect(new FormData(form).get('fruit')).toBe('apple')
+    await userEvent.click(canvas.getByText('Banana'))
+    await expect(new FormData(form).get('fruit')).toBe('banana')
+  },
+}
+
+export const ArrowKeysMoveSelection: Story = {
+  render: () => (
+    <RadioGroup.Root defaultValue="sm" aria-label="Size">
+      <RadioGroup.Item value="sm">Small</RadioGroup.Item>
+      <RadioGroup.Item value="md">Medium</RadioGroup.Item>
+      <RadioGroup.Item value="lg">Large</RadioGroup.Item>
+    </RadioGroup.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const group = canvas.getByRole('radiogroup', {name: 'Size'})
+    await expect(group).toBeInTheDocument()
+    // Arrow keys move the selection within the group, as native radios do.
+    const [sm, md] = canvas.getAllByRole('radio')
+    sm.focus()
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(md).toBeChecked()
+    await expect(md).toHaveFocus()
+  },
+}

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,78 +1,8 @@
-import {type ReactNode, createContext, useContext, useCallback} from 'react'
+import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
-import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
-import {useFieldGroupLabelling} from '../Field/FieldContext'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
-
-// --- Context ---
-
-interface RadioGroupContextValue {
-  value: string
-  onSelect: (value: string) => void
-  disabled: boolean
-}
-
-const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
-
-function useRadioGroup() {
-  const ctx = useContext(RadioGroupContext)
-  if (!ctx) {
-    throw new Error('RadioGroup.Item must be used within RadioGroup.Root')
-  }
-  return ctx
-}
-
-// --- Root ---
-
-interface RootProps {
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-  orientation?: 'horizontal' | 'vertical'
-  disabled?: boolean
-  /** Accessible name when the group is not inside a Field.Root (inside one,
-   *  the Field.Label names it). */
-  'aria-label'?: string
-  /** id of the element that names the group, when not inside a Field.Root. */
-  'aria-labelledby'?: string
-  children: ReactNode
-}
-
-function Root({
-  value: controlledValue,
-  defaultValue = '',
-  onValueChange,
-  orientation = 'vertical',
-  disabled = false,
-  children,
-  ...labelling
-}: RootProps) {
-  const a11y = useFieldGroupLabelling(labelling)
-  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
-
-  const onSelect = useCallback(
-    (itemValue: string) => {
-      if (!disabled) {
-        setValue(itemValue)
-      }
-    },
-    [disabled, setValue],
-  )
-
-  return (
-    <RadioGroupContext.Provider value={{value, onSelect, disabled}}>
-      <html.div
-        role="radiogroup"
-        aria-orientation={orientation}
-        {...a11y}
-        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
-      >
-        {children}
-      </html.div>
-    </RadioGroupContext.Provider>
-  )
-}
+import {Root, useRadioGroup} from './group'
 
 // --- Item ---
 
@@ -83,20 +13,18 @@ interface ItemProps {
 }
 
 function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
-  const {value: groupValue, onSelect, disabled: groupDisabled} = useRadioGroup()
+  const {value: groupValue, name, onSelect, disabled: groupDisabled} = useRadioGroup()
   const isChecked = groupValue === value
   const isDisabled = groupDisabled || itemDisabled
 
-  const handleClick = () => {
-    if (!isDisabled) {
-      onSelect(value)
-    }
-  }
-
+  // The native radio is the only source of a pick: a click on the label
+  // activates it, and onChange fires once, only when the selection changes.
+  // (A label onClick as well would report every pick twice.)
   return (
-    <html.label style={[styles.item, isDisabled && styles.itemDisabled]} onClick={handleClick}>
+    <html.label style={[styles.item, isDisabled && styles.itemDisabled]}>
       <html.input
         type="radio"
+        name={name}
         value={value}
         checked={isChecked}
         disabled={isDisabled}
@@ -114,9 +42,6 @@ function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
   )
 }
 
-// inside a Field.Root, the label names this group (see Field's `group`)
-Root.isFieldGroup = true as const
-
 export const RadioGroup = {
   Root,
   Item,

package/src/components/RadioGroup/group.tsx

@@ -0,0 +1,85 @@
+import {type ReactNode, createContext, useContext, useCallback, useId} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {styles} from './styles.css'
+import {useFieldGroupLabelling} from '../Field/FieldContext'
+
+// --- Context ---
+
+interface RadioGroupContextValue {
+  value: string
+  name: string
+  onSelect: (value: string) => void
+  disabled: boolean
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
+
+export function useRadioGroup() {
+  const ctx = useContext(RadioGroupContext)
+  if (!ctx) {
+    throw new Error('RadioGroup.Item must be used within RadioGroup.Root')
+  }
+  return ctx
+}
+
+// --- Root ---
+
+interface RootProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'horizontal' | 'vertical'
+  disabled?: boolean
+  /** Form field name: every item's radio carries it, so the selection is
+   *  submitted with a native form. Generated when omitted (the radios still
+   *  form one group). */
+  name?: string
+  /** Accessible name when the group is not inside a Field.Root (inside one,
+   *  the Field.Label names it). */
+  'aria-label'?: string
+  /** id of the element that names the group, when not inside a Field.Root. */
+  'aria-labelledby'?: string
+  children: ReactNode
+}
+
+export function Root({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  orientation = 'vertical',
+  disabled = false,
+  name: nameProp,
+  children,
+  ...labelling
+}: RootProps) {
+  const a11y = useFieldGroupLabelling(labelling)
+  const generatedName = useId()
+  const name = nameProp ?? generatedName
+  const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange)
+
+  const onSelect = useCallback(
+    (itemValue: string) => {
+      if (!disabled) {
+        setValue(itemValue)
+      }
+    },
+    [disabled, setValue],
+  )
+
+  return (
+    <RadioGroupContext.Provider value={{value, name, onSelect, disabled}}>
+      <html.div
+        role="radiogroup"
+        aria-orientation={orientation}
+        {...a11y}
+        style={[styles.root, orientation === 'horizontal' && styles.rootHorizontal]}
+      >
+        {children}
+      </html.div>
+    </RadioGroupContext.Provider>
+  )
+}
+
+// inside a Field.Root, the label names this group (see Field's `group`)
+Root.isFieldGroup = true as const

package/src/components/RadioGroup/styles.css.ts

@@ -24,6 +24,14 @@ export const styles = css.create({
     color: colors.text,
     lineHeight: typography.lineHeight,
   },
+  // Native draws the item as a button: no button chrome, a flex row.
+  nativeItem: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    padding: 0,
+  },
   itemDisabled: {
     opacity: 0.5,
     cursor: 'not-allowed',
@@ -63,4 +71,9 @@ export const styles = css.create({
   input: {
     opacity: 0,
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native only.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/ScrollArea/styles.css.ts

@@ -12,6 +12,8 @@ export const styles = css.create({
   },
   viewport: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     height: '100%',
     overflowX: 'auto',
     overflowY: 'auto',

package/src/components/Spinner/Spinner.native.tsx

@@ -0,0 +1,37 @@
+import {useEffect} from 'react'
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated'
+import {html} from 'react-strict-dom'
+import {ring, TURN_MS} from './ring.css'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
+import type {SpinnerProps} from './Spinner.types'
+
+export type {SpinnerProps, SpinnerSize} from './Spinner.types'
+
+/**
+ * Native Spinner: the web's ring, turned by Reanimated on the UI thread (RSD
+ * has no CSS animations on native), so a busy JS thread does not stall it.
+ */
+export function Spinner({size = 'md', label = 'Loading'}: SpinnerProps) {
+  const turn = useSharedValue(0)
+  useEffect(() => {
+    turn.value = withRepeat(withTiming(360, {duration: TURN_MS, easing: Easing.linear}), -1)
+    return () => cancelAnimation(turn)
+  }, [turn])
+  const turning = useAnimatedStyle(() => ({transform: [{rotate: `${turn.value}deg`}]}))
+
+  return (
+    <html.div role="status" style={[ring.root, ring.nativeRoot]}>
+      <Animated.View style={turning}>
+        <html.div style={[ring.ring, ring[size]]} aria-hidden />
+      </Animated.View>
+      <html.span style={[visuallyHidden.base, ring.srOnly]}>{label}</html.span>
+    </html.div>
+  )
+}

package/src/components/Spinner/Spinner.tsx

@@ -1,25 +1,16 @@
 import {html} from 'react-strict-dom'
+import {ring} from './ring.css'
 import {styles} from './styles.css'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
+import type {SpinnerProps} from './Spinner.types'
 
-export type SpinnerSize = 'sm' | 'md' | 'lg'
-
-interface SpinnerProps {
-  size?: SpinnerSize
-  label?: string
-}
-
-const sizeMap = {
-  sm: styles.sm,
-  md: styles.md,
-  lg: styles.lg,
-} as const
+export type {SpinnerProps, SpinnerSize} from './Spinner.types'
 
 export function Spinner({size = 'md', label = 'Loading'}: SpinnerProps) {
   return (
-    <html.div role="status" style={styles.root}>
-      <html.div style={[styles.spinner, sizeMap[size]]} aria-hidden />
-      <html.span style={[visuallyHidden.base, styles.srOnly]}>{label}</html.span>
+    <html.div role="status" style={ring.root}>
+      <html.div style={[ring.ring, ring[size], styles.spinning]} aria-hidden />
+      <html.span style={[visuallyHidden.base, ring.srOnly]}>{label}</html.span>
     </html.div>
   )
 }

package/src/components/Spinner/Spinner.types.ts

@@ -0,0 +1,6 @@
+export type SpinnerSize = 'sm' | 'md' | 'lg'
+
+export interface SpinnerProps {
+  size?: SpinnerSize
+  label?: string
+}

package/src/components/Spinner/ring.css.ts

@@ -0,0 +1,45 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/** The ring both platforms draw; each turns it its own way. */
+export const ring = css.create({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // RSD-native only honors display:'flex' (not 'inline-flex').
+  nativeRoot: {
+    display: 'flex',
+  },
+  ring: {
+    borderRadius: '50%',
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderTopColor: colors.accent,
+  },
+  sm: {
+    width: sizes.spinnerSm,
+    height: sizes.spinnerSm,
+    borderWidth: borders.strong,
+  },
+  md: {
+    width: sizes.spinnerMd,
+    height: sizes.spinnerMd,
+    borderWidth: borders.strong,
+  },
+  lg: {
+    width: sizes.spinnerLg,
+    height: sizes.spinnerLg,
+    borderWidth: borders.accent,
+  },
+  // Layered on visuallyHidden.base.
+  srOnly: {
+    clip: 'rect(0, 0, 0, 0)',
+  },
+})
+
+/** One turn, in ms: the web animation's 0.6s. */
+export const TURN_MS = 600

package/src/components/Spinner/styles.css.ts

@@ -1,8 +1,5 @@
 import {css} from 'react-strict-dom'
-import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 import {easing} from '@duro-app/tokens/tokens/motion.css'
-import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const spin = css.keyframes({
   '0%': {transform: 'rotate(0deg)'},
@@ -10,38 +7,11 @@ const spin = css.keyframes({
 })
 
 export const styles = css.create({
-  root: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  spinner: {
-    borderRadius: '50%',
-    borderStyle: 'solid',
-    borderColor: colors.border,
-    borderTopColor: colors.accent,
+  // Web turns the ring with a CSS animation (one turn per TURN_MS).
+  spinning: {
     animationName: spin,
     animationDuration: '0.6s',
     animationTimingFunction: easing.linear,
     animationIterationCount: 'infinite',
   },
-  sm: {
-    width: sizes.spinnerSm,
-    height: sizes.spinnerSm,
-    borderWidth: borders.strong,
-  },
-  md: {
-    width: sizes.spinnerMd,
-    height: sizes.spinnerMd,
-    borderWidth: borders.strong,
-  },
-  lg: {
-    width: sizes.spinnerLg,
-    height: sizes.spinnerLg,
-    borderWidth: borders.accent,
-  },
-  // Layered on visuallyHidden.base.
-  srOnly: {
-    clip: 'rect(0, 0, 0, 0)',
-  },
 })

package/src/components/StatusIcon/StatusIcon.tsx

@@ -1,6 +1,8 @@
 import {html} from 'react-strict-dom'
 import {Icon} from '../Icon'
 import type {IconName, IconSize} from '../Icon'
+import type {ColorToken} from '@duro-app/tokens/keys'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 export type StatusIconName = Extract<
@@ -9,6 +11,15 @@ export type StatusIconName = Extract<
 >
 export type StatusIconVariant = 'error' | 'success' | 'warning' | 'info' | 'muted'
 
+// On native an Icon cannot inherit the variant's colour, so it is passed.
+const iconColor = {
+  error: 'error',
+  success: 'success',
+  warning: 'warning',
+  info: 'info',
+  muted: 'textMuted',
+} as const satisfies Record<StatusIconVariant, ColorToken>
+
 interface StatusIconProps {
   name: StatusIconName
   size?: IconSize
@@ -17,8 +28,8 @@ interface StatusIconProps {
 
 export function StatusIcon({name, size = 'xxl', variant = 'muted'}: StatusIconProps) {
   return (
-    <html.div style={[styles.root, styles[variant]]}>
-      <Icon name={name} size={size} />
+    <html.div style={[styles.root, isNative && styles.nativeFlex, styles[variant]]}>
+      <Icon name={name} size={size} color={isNative ? iconColor[variant] : undefined} />
     </html.div>
   )
 }

package/src/components/StatusIcon/styles.css.ts

@@ -24,4 +24,9 @@ export const styles = css.create({
   muted: {
     color: colors.textMuted,
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native only.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/Switch/Switch.native.tsx

@@ -0,0 +1,45 @@
+import {useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {styles} from './styles.css'
+import type {SwitchProps} from './Switch.types'
+
+export type {SwitchProps} from './Switch.types'
+
+/**
+ * Native Switch: RSD has no `<input type="checkbox">` on native, so the track
+ * button carries the switch role. `name` and `value` have no form to submit
+ * to here.
+ */
+export function Switch({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  children,
+}: SwitchProps) {
+  const [checked, setChecked] = useControllableValue(
+    controlledChecked,
+    defaultChecked,
+    onCheckedChange,
+  )
+  const handleClick = useCallback(() => {
+    if (!disabled) setChecked(!checked)
+  }, [disabled, checked, setChecked])
+
+  return (
+    <html.label style={[styles.root, styles.nativeFlex, disabled && styles.rootDisabled]}>
+      <html.button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={handleClick}
+        style={[styles.track, checked ? styles.trackChecked : styles.trackUnchecked]}
+      >
+        <html.span style={[styles.thumb, checked && styles.thumbChecked]} />
+      </html.button>
+      {children && <html.span>{children}</html.span>}
+    </html.label>
+  )
+}

package/src/components/Switch/Switch.tsx

@@ -1,26 +1,11 @@
-import {type ReactNode, useCallback, useRef} from 'react'
+import {useCallback, useRef} from 'react'
 import {html} from 'react-strict-dom'
-import {isNative} from '../../platform'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
+import type {SwitchProps} from './Switch.types'
 
-interface SwitchProps {
-  /** Controlled checked state. */
-  checked?: boolean
-  /** Initial checked state (uncontrolled). */
-  defaultChecked?: boolean
-  /** Callback fired when the checked state changes. */
-  onCheckedChange?: (checked: boolean) => void
-  /** Prevents user interaction. */
-  disabled?: boolean
-  /** Form field name for the hidden input. */
-  name?: string
-  /** Value submitted when checked. */
-  value?: string
-  /** Label content rendered beside the switch. */
-  children?: ReactNode
-}
+export type {SwitchProps} from './Switch.types'
 
 export function Switch({
   checked: controlledChecked,
@@ -48,35 +33,28 @@ export function Switch({
   }, [disabled, checked, setChecked])
 
   return (
-    <html.label
-      style={[styles.root, isNative && styles.nativeFlex, disabled && styles.rootDisabled]}
-    >
-      {!isNative && (
-        // Web: hidden real checkbox carries a11y + form submission. RSD has no
-        // <input type=checkbox> on native, so it's omitted there and the
-        // button below carries the switch role instead.
-        <html.input
-          ref={inputRef}
-          type="checkbox"
-          role="switch"
-          name={name}
-          value={value}
-          checked={controlledChecked !== undefined ? controlledChecked : undefined}
-          defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
-          disabled={disabled}
-          aria-checked={checked}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            onCheckedChange?.(e.target.checked)
-          }}
-          style={[visuallyHidden.base, styles.input]}
-        />
-      )}
+    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
+      {/* The hidden real checkbox carries a11y and form submission (native:
+          Switch.native.tsx, whose button carries the switch role). */}
+      <html.input
+        ref={inputRef}
+        type="checkbox"
+        role="switch"
+        name={name}
+        value={value}
+        checked={controlledChecked !== undefined ? controlledChecked : undefined}
+        defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
+        disabled={disabled}
+        aria-checked={checked}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onCheckedChange?.(e.target.checked)
+        }}
+        style={[visuallyHidden.base, styles.input]}
+      />
       <html.button
         type="button"
         tabIndex={-1}
-        aria-hidden={isNative ? undefined : true}
-        role={isNative ? 'switch' : undefined}
-        aria-checked={isNative ? checked : undefined}
+        aria-hidden
         disabled={disabled}
         onClick={handleClick}
         style={[styles.track, checked ? styles.trackChecked : styles.trackUnchecked]}