@duro-app/ui 5.5.0 → 5.7.0

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

@@ -0,0 +1,162 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+
+export const styles = css.create({
+  // Two columns — row labels, date track — with the axis as the first row.
+  root: {
+    display: 'grid',
+    gridTemplateColumns: `${sizes.timelineLabelW} 1fr`,
+    rowGap: spacing.xs,
+    color: colors.text,
+  },
+  heading: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+  },
+  axis: {
+    position: 'relative',
+    height: sizes.chip,
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+    whiteSpace: 'nowrap',
+  },
+  tick: {
+    position: 'absolute',
+    top: 0,
+    paddingLeft: spacing.xs,
+    borderLeftWidth: borders.hairline,
+    borderLeftStyle: 'solid',
+    borderLeftColor: colors.border,
+  },
+  todayLabel: {
+    position: 'absolute',
+    bottom: 0,
+    transform: 'translateX(-50%)',
+    color: colors.errorText,
+    fontWeight: typography.fontWeightMedium,
+  },
+  left: (percent: number) => ({left: `${percent}%`}),
+  width: (percent: number) => ({width: `${percent}%`}),
+  label: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minWidth: 0,
+    paddingRight: spacing.sm,
+  },
+  labelText: {
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  labelDescription: {
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+    whiteSpace: 'nowrap',
+  },
+  track: {
+    position: 'relative',
+    height: sizes.controlMd,
+  },
+  today: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    borderLeftWidth: borders.strong,
+    borderLeftStyle: 'solid',
+    borderLeftColor: colors.error,
+    pointerEvents: 'none',
+    zIndex: 2,
+  },
+  bar: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    boxSizing: 'border-box',
+    height: sizes.controlSm,
+  },
+  face: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    overflow: 'hidden',
+    borderRadius: radii.xs,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: {default: colors.border, ':hover': colors.accent},
+    backgroundColor: colors.bg,
+    color: colors.text,
+    cursor: 'pointer',
+    textAlign: 'left',
+    transitionProperty: 'box-shadow, border-color',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: borders.focusRing,
+    outlineColor: colors.accent,
+    outlineOffset: borders.focusOffset,
+  },
+  faceSelected: {
+    borderColor: colors.accent,
+    boxShadow: `0 0 0 ${microSpacing.px1} ${colors.accent}`,
+  },
+  barPlanned: {
+    borderStyle: 'dashed',
+  },
+  barDone: {
+    backgroundColor: colors.successBg,
+  },
+  fill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: colors.infoBg,
+    borderRightWidth: borders.strong,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.accent,
+  },
+  fillDone: {
+    backgroundColor: colors.successBg,
+    borderRightColor: colors.success,
+  },
+  barText: {
+    position: 'relative',
+    paddingLeft: spacing.sm,
+    fontSize: typography.fontSizeXs,
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+  },
+  // The edges: keyboard sliders, drawn only while focused.
+  edge: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: spacing.sm,
+    borderRadius: radii.xs,
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: borders.focusRing,
+    outlineColor: colors.accent,
+    backgroundColor: {default: 'transparent', ':focus-visible': colors.accent},
+    zIndex: 3,
+  },
+  edgeStart: {
+    left: `calc(-1 * ${spacing.xs})`,
+  },
+  edgeEnd: {
+    right: `calc(-1 * ${spacing.xs})`,
+  },
+})

package/src/components/Toast/Toast.meta.ts

@@ -2,11 +2,12 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs.',
+    'Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it).',
   whenToUse: [
     'Confirming an action succeeded (e.g. "Grant revoked")',
     'Reporting an action failed, with the reason',
     'Reversible actions that benefit from an inline Undo',
+    'A soft limit crossed but allowed (variant warning), e.g. a column over its WIP limit',
   ],
   whenNotToUse: [
     'In-form validation errors — use Field.Error or an inline Alert',

package/src/components/Toast/Toast.stories.tsx

@@ -47,6 +47,31 @@ function Triggers() {
       >
         Show with undo
       </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({
+            variant: 'warning',
+            message: 'In progress is over its WIP limit (4/3)',
+            duration: 0,
+          })
+        }
+      >
+        Show warning
+      </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({
+            variant: 'success',
+            message: 'Moved to Done',
+            duration: 600,
+            action: {label: 'Undo', onClick: () => {}},
+          })
+        }
+      >
+        Show short
+      </html.button>
     </html.div>
   )
 }
@@ -87,3 +112,62 @@ export const Dismiss: Story = {
     await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument())
   },
 }
+
+/** The WIP-limit shape: a warning, announced politely, with its own tone. */
+export const Warning: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show warning'))
+    const toast = await waitFor(() => canvas.getByRole('status'))
+    await expect(toast).toHaveTextContent('In progress is over its WIP limit (4/3)')
+  },
+}
+
+const wait = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+/** The countdown stops while the pointer is on the toast and resumes with
+ *  what was left when it leaves. */
+export const PausesOnHover: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show short'))
+    const toast = await waitFor(() => canvas.getByRole('status'))
+    await userEvent.hover(toast)
+    await wait(1000)
+    await expect(canvas.getByRole('status')).toHaveTextContent('Moved to Done')
+    await userEvent.unhover(toast)
+    await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument(), {
+      timeout: 2000,
+    })
+  },
+}
+
+/** Focus inside the toast (its Undo, its close button) holds it too. */
+export const PausesOnFocus: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show short'))
+    await waitFor(() => canvas.getByRole('status'))
+    canvas.getByRole('button', {name: 'Undo'}).focus()
+    await wait(1000)
+    // Moving between the toast's own buttons keeps it paused.
+    canvas.getByRole('button', {name: 'Dismiss'}).focus()
+    await wait(300)
+    await expect(canvas.getByRole('status')).toHaveTextContent('Moved to Done')
+    canvas.getByText('Show short').focus()
+    await waitFor(() => expect(canvas.queryByText('Moved to Done')).not.toBeInTheDocument(), {
+      timeout: 2000,
+    })
+  },
+}
+
+/** The close button's name comes from the app (dismissLabel). */
+export const LocalisedClose: Story = {
+  render: () => (
+    <ToastProvider dismissLabel="Fermer">
+      <Triggers />
+    </ToastProvider>
+  ),
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show warning'))
+    await userEvent.click(await canvas.findByRole('button', {name: 'Fermer'}))
+    await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument())
+  },
+}

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/components/Toggle/Toggle.tsx

@@ -4,9 +4,10 @@ import {useControllableValue} from '../../hooks/useControllableValue'
 import {useToggleGroup} from '../ToggleGroup/ToggleGroupContext'
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {mergeRefs} from '../../shared/mergeRefs'
+import type {ControlSize} from '../../shared/types'
 import {styles} from './styles.css'
 
-export type ToggleSize = 'default' | 'small'
+export type ToggleSize = ControlSize
 
 interface ToggleProps {
   /** Controlled pressed state (standalone usage). */

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

@@ -37,6 +37,8 @@ export const styles = css.create({
     fontSize: typography.fontSizeXs,
     borderRadius: radii.sm,
     gap: spacing.xs,
+    // Every small control is at least controlSm tall, whatever it holds (5.6).
+    minHeight: {default: sizes.controlSm, '@media (pointer: coarse)': sizes.touchTarget},
   },
   // wrapped toggles: a fixed block size per size, the touch target under a
   // coarse pointer. ToggleGroup's maxRows arithmetic reads the same tokens.

package/src/index.ts

@@ -14,6 +14,7 @@ export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Breadcrumb} from './components/Breadcrumb/Breadcrumb'
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
+export type {ControlSize} from './shared/types'
 export {ButtonGroup, type ButtonGroupProps} from './components/ButtonGroup/ButtonGroup'
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
@@ -24,9 +25,15 @@ 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'
@@ -45,6 +52,7 @@ 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 {RadioGroup} from './components/RadioGroup/RadioGroup'
@@ -64,6 +72,7 @@ export {
   type ToastOptions,
   type ToastAction,
   type ToastContextValue,
+  type ToastProviderProps,
 } from './components/Toast'
 export {
   StatusIcon,
@@ -83,6 +92,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 {
@@ -103,6 +120,7 @@ export {Tooltip} from './components/Tooltip/Tooltip'
 export {Toolbar, type ToolbarProps} from './components/Toolbar/Toolbar'
 export {Popover} from './components/Popover/Popover'
 export type {PopoverHandle} from './components/Popover/Popover'
+export {useInModal} from './shared/ModalContext'
 export {Switch} from './components/Switch/Switch'
 
 // Layout primitives

package/src/shared/ModalContext.ts

@@ -13,6 +13,13 @@ import {createContext, useContext} from 'react'
  */
 export const ModalContext = createContext(false)
 
-export function useInModal() {
+/**
+ * True inside a Dialog or Drawer, false outside. A floating surface that is not
+ * a Duro Popover picks its layer with it, the way a Popover does:
+ * `useInModal() ? layers.popover : layers.floating`, and for one that must
+ * cover another floating surface (a link editor over a format bar)
+ * `useInModal() ? layers.popoverRaised : layers.floatingRaised`.
+ */
+export function useInModal(): boolean {
   return useContext(ModalContext)
 }

package/src/shared/exports.typecheck.ts

@@ -0,0 +1,16 @@
+// Compile-only checks that 5.6's additions are on the package root, where a
+// consumer imports them. `pnpm typecheck` fails if one is dropped from
+// index.ts or changes shape. Never imported at runtime.
+
+import type {ButtonSize, ControlSize, ToggleSize, useInModal} from '../index'
+
+type Same<T, U> = [T] extends [U] ? ([U] extends [T] ? true : false) : false
+
+// A floating surface that is not a Popover picks its layer with it.
+export const useInModalIsBoolean: Same<ReturnType<typeof useInModal>, boolean> = true
+export const useInModalTakesNothing: Same<Parameters<typeof useInModal>, []> = true
+
+// The shared size, and the two sizes that alias it.
+export const controlSizes: Same<ControlSize, 'default' | 'small'> = true
+export const buttonSizeIsControlSize: Same<ButtonSize, ControlSize> = true
+export const toggleSizeIsControlSize: Same<ToggleSize, ControlSize> = true

package/src/shared/types.ts

@@ -1,3 +1,6 @@
 // Cross-component prop types that don't belong to any single component.
 
 export type Orientation = 'horizontal' | 'vertical'
+
+/** The two control sizes shared by Button, Toggle and the Select, Menu and Popover triggers. */
+export type ControlSize = 'default' | 'small'