@duro-app/ui 5.10.0 → 5.12.0

package/src/components/Drawer/Drawer.tsx

@@ -11,8 +11,9 @@ import {
   useRef,
 } from 'react'
 import {html} from 'react-strict-dom'
-import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
+import type {DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
+import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
 import {ModalContext} from '../../shared/ModalContext'
@@ -89,57 +90,27 @@ function Root({
   swipeDismiss = true,
   closeAnimationDuration = 'fast',
 }: RootProps) {
-  const isControlled = controlledOpen !== undefined
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const [closing, setClosing] = useState(false)
-  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const {
+    present,
+    closing,
+    requestOpen,
+    requestClose,
+    closeNow: requestCloseImmediate,
+  } = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'after-exit',
+  })
   const panelRef = useRef<HTMLDivElement>(null)
 
-  const isOpen = isControlled ? controlledOpen : internalOpen
-
   const titleId = useId()
   const descriptionId = useId()
 
-  const requestOpen = useCallback(() => {
-    if (closingTimerRef.current) {
-      clearTimeout(closingTimerRef.current)
-      closingTimerRef.current = null
-    }
-    setClosing(false)
-    if (!isControlled) setInternalOpen(true)
-    onOpenChange?.(true)
-  }, [isControlled, onOpenChange])
-
-  const requestClose = useCallback(() => {
-    setClosing(true)
-    closingTimerRef.current = setTimeout(() => {
-      setClosing(false)
-      closingTimerRef.current = null
-      if (!isControlled) setInternalOpen(false)
-      onOpenChange?.(false)
-    }, DURATION_MS[closeAnimationDuration])
-  }, [isControlled, onOpenChange, closeAnimationDuration])
-
-  const requestCloseImmediate = useCallback(() => {
-    if (closingTimerRef.current) {
-      clearTimeout(closingTimerRef.current)
-      closingTimerRef.current = null
-    }
-    setClosing(false)
-    if (!isControlled) setInternalOpen(false)
-    onOpenChange?.(false)
-  }, [isControlled, onOpenChange])
-
-  // Clean up timer on unmount
-  useEffect(() => {
-    return () => {
-      if (closingTimerRef.current) clearTimeout(closingTimerRef.current)
-    }
-  }, [])
-
   // Handle Escape key
   useEffect(() => {
-    if (!isOpen && !closing) return
+    if (!present) return
     if (!dismissable) return
 
     function onKeyDown(e: KeyboardEvent) {
@@ -150,23 +121,23 @@ function Root({
     }
     document.addEventListener('keydown', onKeyDown)
     return () => document.removeEventListener('keydown', onKeyDown)
-  }, [isOpen, closing, dismissable, requestClose])
+  }, [present, dismissable, requestClose])
 
   // Lock body scroll when open
   useEffect(() => {
-    if (isOpen || closing) {
+    if (present) {
       const prev = document.body.style.overflow
       document.body.style.overflow = 'hidden'
       return () => {
         document.body.style.overflow = prev
       }
     }
-  }, [isOpen, closing])
+  }, [present])
 
   return (
     <DrawerContext.Provider
       value={{
-        open: isOpen || closing,
+        open: present,
         closing,
         closeDuration: closeAnimationDuration,
         anchor,

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

@@ -79,6 +79,8 @@ export const styles = css.create({
   // Panel sizing per anchor
   panelHorizontal: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     height: '100%',
     borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
@@ -86,6 +88,8 @@ export const styles = css.create({
   },
   panelVertical: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,

package/src/components/FileTrigger/FileTrigger.meta.ts

@@ -0,0 +1,24 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A Button that opens the OS file picker. Pass the chosen files to onSelect; call open() on its ref to open the picker from elsewhere.',
+  whenToUse: [
+    'Uploading or attaching one or more files',
+    'Opening the file picker from a custom control via the ref',
+  ],
+  whenNotToUse: [
+    'Drag-and-drop zones — build on a drop target instead',
+    'Triggering a non-file action — use Button',
+  ],
+  relatedTo: [
+    {
+      component: 'Button',
+      kind: 'composition',
+      relationship: 'FileTrigger renders a Button and forwards variant, size and disabled',
+    },
+  ],
+  example: `<FileTrigger accept="image/*" multiple onSelect={(files) => upload(files)}>
+  Choose images
+</FileTrigger>`,
+}

package/src/components/FileTrigger/FileTrigger.stories.tsx

@@ -0,0 +1,36 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {FileTrigger} from './FileTrigger'
+
+const meta: Meta<typeof FileTrigger> = {
+  title: 'Components/FileTrigger',
+  component: FileTrigger,
+  args: {onSelect: fn()},
+  argTypes: {
+    variant: {control: 'select', options: ['primary', 'secondary', 'link', 'danger']},
+    size: {control: 'select', options: ['default', 'small']},
+    multiple: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof FileTrigger>
+
+export const Default: Story = {
+  args: {children: 'Choose file', variant: 'secondary'},
+  play: async ({args, canvas, userEvent, canvasElement}) => {
+    await expect(canvas.getByRole('button', {name: 'Choose file'})).toBeEnabled()
+    const input = canvasElement.querySelector<HTMLInputElement>('input[type=file]')!
+    await userEvent.upload(input, new File(['hi'], 'hi.txt', {type: 'text/plain'}))
+    await expect(args.onSelect).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const Images: Story = {
+  args: {children: 'Choose images', accept: 'image/*', multiple: true},
+}
+
+export const Disabled: Story = {
+  args: {children: 'Choose file', disabled: true},
+}

package/src/components/FileTrigger/FileTrigger.tsx

@@ -0,0 +1,80 @@
+import {useEffect, useImperativeHandle, useRef} from 'react'
+import type {ReactNode, Ref} from 'react'
+import {css, html} from 'react-strict-dom'
+import {Button, type ButtonSize, type ButtonVariant} from '../Button/Button'
+import {openPicker, takeFiles} from './pick'
+
+export interface FileTriggerHandle {
+  /** Open the OS file picker programmatically. */
+  open: () => void
+}
+
+export interface FileTriggerProps {
+  /** Accepted types, as the native `accept` attribute (e.g. `image/*,.pdf`). */
+  accept?: string
+  multiple?: boolean
+  /** Called with the chosen files. */
+  onSelect: (files: File[]) => void
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  'aria-label'?: string
+  /** Exposes `open()` so a caller can open the picker without the button. */
+  ref?: Ref<FileTriggerHandle>
+  children: ReactNode
+}
+
+// display:none, not visually hidden: the input is only ever opened by click(),
+// which a hidden input still honours, and this keeps its "No file chosen" text
+// out of the accessibility tree (axe flagged its contrast).
+const styles = css.create({
+  input: {display: 'none'},
+})
+
+/** A Button that opens the OS file picker. Web only: native has no file input. */
+export function FileTrigger({
+  accept,
+  multiple = false,
+  onSelect,
+  variant,
+  size,
+  disabled,
+  'aria-label': ariaLabel,
+  ref,
+  children,
+}: FileTriggerProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  useImperativeHandle(ref, () => ({open: () => openPicker(inputRef.current)}), [])
+
+  // RSD's input props omit `accept`, so set the DOM attribute directly.
+  useEffect(() => {
+    const input = inputRef.current
+    if (!input) return
+    if (accept) input.setAttribute('accept', accept)
+    else input.removeAttribute('accept')
+  }, [accept])
+
+  return (
+    <>
+      <Button
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        onClick={() => openPicker(inputRef.current)}
+      >
+        {children}
+      </Button>
+      <html.input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        disabled={disabled}
+        tabIndex={-1}
+        aria-hidden={true}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => takeFiles(e.target, onSelect)}
+        style={styles.input}
+      />
+    </>
+  )
+}

package/src/components/FileTrigger/index.ts

@@ -0,0 +1,2 @@
+export {FileTrigger} from './FileTrigger'
+export type {FileTriggerProps, FileTriggerHandle} from './FileTrigger'

package/src/components/FileTrigger/pick.ts

@@ -0,0 +1,21 @@
+/** The slice of an <input type=file> the picker logic touches. */
+export interface FileInputLike {
+  files: ArrayLike<File> | null
+  value: string
+  click: () => void
+}
+
+/** Open the native file picker. */
+export function openPicker(input: Pick<FileInputLike, 'click'> | null) {
+  input?.click()
+}
+
+/**
+ * Hand the chosen files to `onSelect`, then reset the input so picking the
+ * same file again still fires a change event.
+ */
+export function takeFiles(input: FileInputLike, onSelect: (files: File[]) => void) {
+  const files = input.files ? Array.from(input.files) : []
+  input.value = ''
+  if (files.length > 0) onSelect(files)
+}

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

@@ -86,6 +86,8 @@ export const styles = css.create({
     // against an auto width the line breaks come out wrong and the container
     // under-reports its height (verified on the iOS simulator).
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
   },
   // border-box is explicit: react-strict-dom mirrors the web default
   // (content-box) on native, which adds the gap padding on top of the basis

package/src/components/Icon/Icon.native.tsx

@@ -0,0 +1,54 @@
+import {createElement} from 'react'
+import Svg, {Circle, Ellipse, Line, Path, Polygon, Polyline, Rect} from 'react-native-svg'
+import {ICON_SIZES, type ColorToken} from '@duro-app/tokens/keys'
+import {useResolvedColors} from '../ThemeProvider/ThemeProvider'
+import {GLYPHS, type Paint, type Shape} from './geometry'
+import type {IconProps} from './types'
+
+export type {IconName, IconProps, IconSize} from './types'
+
+const elements = {
+  path: Path,
+  circle: Circle,
+  ellipse: Ellipse,
+  line: Line,
+  rect: Rect,
+  polyline: Polyline,
+  polygon: Polygon,
+} as const
+
+/** react-native-svg reads `currentColor` from the Svg's `color`, which is a resolved colour here. */
+function nativeShape(shape: Shape, key: number) {
+  const {tag, ...attrs} = shape
+  return createElement(elements[tag] as never, {key, ...attrs})
+}
+
+/**
+ * Native Icon: the same geometry as the web, drawn with react-native-svg
+ * (plan N0, Decision 9; RSD has no `svg`). It cannot inherit a text colour,
+ * so its colour is a token resolved through the nearest ThemeProvider. It is
+ * decorative: the control that hosts it carries the label.
+ */
+export function Icon({name, size: sizeToken = 'lg', color = 'text'}: IconProps) {
+  const size = ICON_SIZES[sizeToken]
+  const glyph = GLYPHS[name]
+  const resolved = useResolvedColors()[color as ColorToken]
+  const paint: {fill: Paint; stroke?: Paint} =
+    glyph.style === 'fill' ? {fill: 'currentColor'} : {fill: 'none', stroke: 'currentColor'}
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      color={resolved}
+      {...paint}
+      strokeWidth={glyph.style === 'stroke' ? 2 : undefined}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      {glyph.shapes.map(nativeShape)}
+    </Svg>
+  )
+}

package/src/components/Icon/Icon.stories.tsx

@@ -57,6 +57,7 @@ const groups: ReadonlyArray<{title: string; names: readonly IconName[]}> = [
   {title: 'Input / action', names: ['search', 'mic']},
   {title: 'Color mode', names: ['sun', 'moon', 'monitor', 'contrast']},
   {title: 'Device status', names: ['signal', 'battery']},
+  {title: 'Media', names: ['video', 'music', 'play', 'pause']},
   {
     title: 'Filled variants',
     names: [