@duro-app/ui 5.6.0 → 5.8.0

package/src/components/Toast/ToastProvider.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useMemo,
   useRef,
+  useState,
   useSyncExternalStore,
   type ReactNode,
 } from 'react'
@@ -14,7 +15,7 @@ import {Icon, type IconName} from '../Icon'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {styles} from './styles.css'
 
-export type ToastVariant = 'success' | 'error' | 'info'
+export type ToastVariant = 'success' | 'error' | 'info' | 'warning'
 
 export interface ToastAction {
   label: string
@@ -22,12 +23,14 @@ export interface ToastAction {
 }
 
 export interface ToastOptions {
-  /** Visual + semantic tone. Errors announce assertively and linger longer. */
+  /** Visual + semantic tone. Errors announce assertively; errors and
+   *  warnings linger longer. */
   variant?: ToastVariant
   message: ReactNode
   /** Optional single action, e.g. Undo. Runs, then dismisses the toast. */
   action?: ToastAction
-  /** Auto-dismiss delay in ms. `0` (or negative) keeps it until dismissed. */
+  /** Auto-dismiss delay in ms. `0` (or negative) keeps it until dismissed.
+   *  The countdown pauses while the toast is hovered or holds focus. */
   duration?: number
 }
 
@@ -56,6 +59,7 @@ const DEFAULT_DURATION: Record<ToastVariant, number> = {
   success: 5000,
   info: 5000,
   error: 8000,
+  warning: 8000,
 }
 
 function createToastStore(): ToastStore {
@@ -92,11 +96,13 @@ const variantIcon: Record<ToastVariant, IconName> = {
   success: 'check-circle-filled',
   error: 'x-circle-filled',
   info: 'info-circle-filled',
+  warning: 'alert-triangle-filled',
 }
 const variantIconStyle = {
   success: styles.iconSuccess,
   error: styles.iconError,
   info: styles.iconInfo,
+  warning: styles.iconWarning,
 } as const
 
 const ToastContext = createContext<ToastContextValue | null>(null)
@@ -107,20 +113,45 @@ export function useToast(): ToastContextValue {
   return ctx
 }
 
-function ToastItem({entry, onDismiss}: {entry: ToastEntry; onDismiss: (id: string) => void}) {
+function ToastItem({
+  entry,
+  onDismiss,
+  dismissLabel,
+}: {
+  entry: ToastEntry
+  onDismiss: (id: string) => void
+  dismissLabel: string
+}) {
   const {id, variant, message, action, duration} = entry
+  const [hovered, setHovered] = useState(false)
+  const [focused, setFocused] = useState(false)
+  const paused = hovered || focused
+  // What is left of the countdown; a pause keeps it, a resume restarts the
+  // timer with what was left (WCAG 2.2.1: the reader controls the timing).
+  const remaining = useRef(duration)
 
   useEffect(() => {
-    if (duration <= 0) return
-    const timer = setTimeout(() => onDismiss(id), duration)
-    return () => clearTimeout(timer)
-  }, [id, duration, onDismiss])
+    if (duration <= 0 || paused) return
+    const started = Date.now()
+    const timer = setTimeout(() => onDismiss(id), Math.max(remaining.current, 0))
+    return () => {
+      clearTimeout(timer)
+      remaining.current -= Date.now() - started
+    }
+  }, [id, duration, paused, onDismiss])
 
   return (
     <html.div
       role={variant === 'error' ? 'alert' : 'status'}
       aria-live={variant === 'error' ? 'assertive' : 'polite'}
       style={[styles.toast, styles[variant]]}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
+      onFocus={() => setFocused(true)}
+      onBlur={(e: {currentTarget: HTMLElement; relatedTarget: EventTarget | null}) => {
+        // Focus moving between the toast's own buttons keeps it paused.
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocused(false)
+      }}
     >
       <html.div style={[styles.iconWrap, variantIconStyle[variant]]}>
         <Icon name={variantIcon[variant]} size="md" />
@@ -142,7 +173,7 @@ function ToastItem({entry, onDismiss}: {entry: ToastEntry; onDismiss: (id: strin
       </html.div>
       <html.button
         type="button"
-        aria-label="Dismiss"
+        aria-label={dismissLabel}
         style={styles.closeBtn}
         onClick={() => onDismiss(id)}
       >
@@ -152,7 +183,14 @@ function ToastItem({entry, onDismiss}: {entry: ToastEntry; onDismiss: (id: strin
   )
 }
 
-export function ToastProvider({children}: {children: ReactNode}) {
+export interface ToastProviderProps {
+  /** Accessible name of each toast's close button, e.g. from the app's
+   *  message catalog. */
+  dismissLabel?: string
+  children: ReactNode
+}
+
+export function ToastProvider({dismissLabel = 'Dismiss', children}: ToastProviderProps) {
   const storeRef = useRef<ToastStore>(null)
   if (storeRef.current === null) {
     storeRef.current = createToastStore()
@@ -175,7 +213,7 @@ export function ToastProvider({children}: {children: ReactNode}) {
   const region = (
     <html.div role="region" aria-label="Notifications" style={styles.region}>
       {entries.map((entry) => (
-        <ToastItem key={entry.id} entry={entry} onDismiss={dismiss} />
+        <ToastItem key={entry.id} entry={entry} onDismiss={dismiss} dismissLabel={dismissLabel} />
       ))}
     </html.div>
   )

package/src/components/Toast/index.ts

@@ -1,2 +1,8 @@
 export {ToastProvider, useToast} from './ToastProvider'
-export type {ToastVariant, ToastOptions, ToastAction, ToastContextValue} from './ToastProvider'
+export type {
+  ToastVariant,
+  ToastOptions,
+  ToastAction,
+  ToastContextValue,
+  ToastProviderProps,
+} from './ToastProvider'

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

@@ -62,6 +62,7 @@ export const styles = css.create({
   success: {borderLeftColor: colors.successBorder},
   error: {borderLeftColor: colors.errorBorder},
   info: {borderLeftColor: colors.infoBorder},
+  warning: {borderLeftColor: colors.warningBorder},
 
   iconWrap: {
     flexShrink: 0,
@@ -73,6 +74,7 @@ export const styles = css.create({
   iconSuccess: {color: colors.successText},
   iconError: {color: colors.errorText},
   iconInfo: {color: colors.infoText},
+  iconWarning: {color: colors.warningText},
 
   content: {
     flex: 1,

package/src/hooks/useContainerBelow.ts

@@ -0,0 +1,39 @@
+import {useEffect, useState, type RefObject} from 'react'
+import {breakpointsPx, type Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
+
+/**
+ * Whether the element behind `ref` is narrower than a Duro breakpoint — its
+ * own width, as a container query sees it, not the window's. For the choices
+ * CSS cannot make (a table of contents as a list or a menu, a row of buttons
+ * or an overflow `Menu`).
+ *
+ * `false` on the server and until the first measurement, so the server and
+ * the first client render agree on the wide layout; a ResizeObserver then
+ * follows the element. A width of 0 (the element is not laid out, e.g.
+ * `display: none`) keeps the last answer.
+ *
+ * Narrower than means `width < breakpoint`: at exactly 768px an element is not
+ * below `md`, the same line `Grid`'s named layouts collapse on.
+ */
+export function useContainerBelow(
+  ref: RefObject<HTMLElement | null>,
+  breakpoint: Breakpoint,
+): boolean {
+  const [below, setBelow] = useState(false)
+  const limit = breakpointsPx[breakpoint]
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element || typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width
+      if (width > 0) setBelow(width < limit)
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref, limit])
+
+  return below
+}

package/src/index.ts

@@ -10,6 +10,12 @@ import './strict.css'
 export {ActionBar, type ActionBarProps} from './components/ActionBar/ActionBar'
 export {ActionBarProvider} from './components/ActionBar/ActionBarProvider'
 export {Alert, type AlertVariant} from './components/Alert/Alert'
+export {
+  AppShell,
+  type AppShellCollapse,
+  type AppShellRailState,
+} from './components/AppShell/AppShell'
+export {Aside} from './components/Aside/Aside'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Breadcrumb} from './components/Breadcrumb/Breadcrumb'
@@ -19,15 +25,22 @@ export {ButtonGroup, type ButtonGroupProps} from './components/ButtonGroup/Butto
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
+export {CodeBlock} from './components/CodeBlock/CodeBlock'
 export {CheckboxGroup} from './components/CheckboxGroup/CheckboxGroup'
 export {ColorInput} from './components/ColorInput/ColorInput'
 export {ConfirmDialog} from './components/ConfirmDialog/ConfirmDialog'
 export {
   DragDrop,
   useDragDrop,
+  type DragDropAnnouncement,
   type DragDropEvent,
   type DragDropItemData,
+  type DragDropOverEvent,
+  type DragDropPlaceholderInfo,
+  type DragDropRefusal,
+  type DragDropRenderPlaceholder,
   type DragDropTarget,
+  type DragDropVerdict,
 } from './components/DragDrop/DragDrop'
 export {Dialog, type DialogSize} from './components/Dialog/Dialog'
 export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/DetailPanel'
@@ -35,6 +48,7 @@ export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Dr
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {List, type ListSelectionMode} from './components/List/List'
+export {LiveRegion, type LiveRegionPoliteness} from './components/LiveRegion/LiveRegion'
 export {Field} from './components/Field/Field'
 export type {LabelPosition, NecessityIndicator} from './components/Form/FormContext'
 export {Fieldset, type FieldsetGap} from './components/Fieldset/Fieldset'
@@ -46,8 +60,10 @@ export {
   type LinkButtonSize,
 } from './components/LinkButton/LinkButton'
 export {Menu} from './components/Menu/Menu'
+export {Meter, type MeterProps, type MeterTone} from './components/Meter/Meter'
 export {PageNav} from './components/PageNav/PageNav'
 export {Panel} from './components/Panel/Panel'
+export {Prose} from './components/Prose/Prose'
 export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Combobox} from './components/Combobox/Combobox'
@@ -65,6 +81,7 @@ export {
   type ToastOptions,
   type ToastAction,
   type ToastContextValue,
+  type ToastProviderProps,
 } from './components/Toast'
 export {
   StatusIcon,
@@ -84,6 +101,14 @@ export {
   type TableOfContentsVariant,
 } from './components/TableOfContents/TableOfContents'
 export {Tabs} from './components/Tabs/Tabs'
+export {
+  Timeline,
+  type TimelineBarDropZone,
+  type TimelineBarProps,
+  type TimelineDate,
+  type TimelineRootProps,
+  type TimelineRowProps,
+} from './components/Timeline/Timeline'
 export {Tree} from './components/Tree/Tree'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {
@@ -98,6 +123,8 @@ export {
   type ColorModePreference,
 } from './components/ColorMode'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
+export {Time} from './components/Time/Time'
+export {relative, type RelativeOptions} from './components/Time/relative'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'
 export {Tooltip} from './components/Tooltip/Tooltip'
@@ -111,7 +138,7 @@ export {Switch} from './components/Switch/Switch'
 export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
-export {Grid} from './components/Grid/Grid'
+export {Grid, type GridLayout} from './components/Grid/Grid'
 export type {GridTrack} from './shared/length'
 export {PageShell, type PageShellMaxWidth, type PageShellPadding} from './components/PageShell'
 
@@ -120,6 +147,7 @@ export type {LinkClickEvent, OnNavigate} from './shared/navigate'
 
 // Hooks
 export {useContainerQuery, type ContainerSize} from './hooks/useContainerQuery'
+export {useContainerBelow} from './hooks/useContainerBelow'
 
 // Tokens — import directly from @duro-app/tokens with deep imports:
 //   import { colors } from '@duro-app/tokens/tokens/colors.css'

package/src/strict.css

@@ -1,4 +1,7 @@
-@layer reset;
+/* Layer order for the whole page: the reset, then Prose's descendant rules
+ * (above the reset's margins, below every component style), then StyleX's
+ * priority layers, which @react-strict-dom declares. */
+@layer reset, duro-prose;
 @react-strict-dom;
 
 /* Table: reveal sort indicator on header cell hover */