@duro-app/ui 0.37.2 → 0.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.37.2",
+  "version": "0.38.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.37.2"
+    "@duro-app/tokens": "^0.38.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/SideNav/SideNav.stories.tsx

@@ -58,6 +58,28 @@ export const Collapsed: Story = {
   },
 }
 
+// Regression: a `defaultExpanded` group that ALSO contains the active item used
+// to be toggled twice on mount (once by defaultExpanded, once by auto-expand of
+// the active group) and end up collapsed, hiding the active item. It must stay
+// open.
+export const DefaultExpandedWithActiveItem: Story = {
+  render: (args) => (
+    <SideNav.Root {...args} defaultValue="security">
+      <SideNav.Group label="Settings" defaultExpanded>
+        <SideNav.Item value="profile">Profile</SideNav.Item>
+        <SideNav.Item value="security">Security</SideNav.Item>
+      </SideNav.Group>
+    </SideNav.Root>
+  ),
+  play: async ({canvas}) => {
+    const trigger = canvas.getByText('Settings')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    const active = canvas.getByText('Security')
+    await expect(active).toBeInTheDocument()
+    await expect(active).toHaveAttribute('aria-current', 'page')
+  },
+}
+
 export const Interactive: Story = {
   render: (args) => (
     <SideNav.Root {...args}>

package/src/components/SideNav/SideNav.tsx

@@ -38,6 +38,19 @@ function Root({children, value: controlledValue, defaultValue, onValueChange}: R
     })
   }, [])
 
+  // Idempotent expand — never closes an already-open group. The mount effects
+  // in Group (defaultExpanded + auto-expand-active) use this instead of
+  // toggleGroup so a group that qualifies on both counts stays open rather than
+  // being toggled open-then-closed.
+  const expandGroup = useCallback((group: string) => {
+    setExpandedGroups((prev) => {
+      if (prev.has(group)) return prev
+      const next = new Set(prev)
+      next.add(group)
+      return next
+    })
+  }, [])
+
   const registerItem = useCallback((value: string) => {
     if (!orderRef.current.includes(value)) {
       orderRef.current.push(value)
@@ -47,19 +60,17 @@ function Root({children, value: controlledValue, defaultValue, onValueChange}: R
     }
   }, [])
 
-  // Auto-expand group containing active value
-  useEffect(() => {
-    if (activeValue) {
-      setExpandedGroups((prev) => {
-        // We don't know which group it belongs to here — Group handles this
-        return prev
-      })
-    }
-  }, [activeValue])
-
   return (
     <SideNavContext.Provider
-      value={{activeValue, onSelect, expandedGroups, toggleGroup, registerItem, orderRef}}
+      value={{
+        activeValue,
+        onSelect,
+        expandedGroups,
+        toggleGroup,
+        expandGroup,
+        registerItem,
+        orderRef,
+      }}
     >
       <html.nav role="navigation" style={styles.root}>
         {children}
@@ -79,25 +90,27 @@ interface GroupProps {
 
 function Group({children, label, groupKey, defaultExpanded}: GroupProps) {
   const key = groupKey ?? label
-  const {expandedGroups, toggleGroup, activeValue} = useSideNav()
+  const {expandedGroups, toggleGroup, expandGroup, activeValue} = useSideNav()
   const isExpanded = expandedGroups.has(key)
   const groupRef = useRef<HTMLDivElement>(null)
 
-  // Auto-expand if this group contains the active item
+  // Auto-expand if this group contains the active item. Uses expandGroup (not
+  // toggleGroup) so it never races the defaultExpanded effect into a closed
+  // state when the active item lives in a defaultExpanded group.
   useEffect(() => {
     if (!activeValue || expandedGroups.has(key)) return
     const el = groupRef.current
     if (!el) return
     const activeBtn = el.querySelector(`[data-nav-value="${activeValue}"]`)
     if (activeBtn) {
-      toggleGroup(key)
+      expandGroup(key)
     }
-  }, [activeValue, key, expandedGroups, toggleGroup])
+  }, [activeValue, key, expandedGroups, expandGroup])
 
-  // Expand on first render if defaultExpanded
+  // Expand on first render if defaultExpanded (idempotent add, not a toggle).
   useEffect(() => {
-    if (defaultExpanded && !expandedGroups.has(key)) {
-      toggleGroup(key)
+    if (defaultExpanded) {
+      expandGroup(key)
     }
     // Only run on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/SideNav/SideNavContext.ts

@@ -5,6 +5,10 @@ export interface SideNavContextValue {
   onSelect: (value: string) => void
   expandedGroups: Set<string>
   toggleGroup: (group: string) => void
+  /** Idempotent expand (add-only) — used by auto-expand/defaultExpanded so a
+   *  group that qualifies twice (e.g. defaultExpanded AND holding the active
+   *  item) doesn't get toggled back closed. `toggleGroup` stays for user clicks. */
+  expandGroup: (group: string) => void
   registerItem: (value: string) => () => void
   orderRef: React.RefObject<string[]>
 }

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

@@ -0,0 +1,34 @@
+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.',
+  whenToUse: [
+    'Confirming an action succeeded (e.g. "Grant revoked")',
+    'Reporting an action failed, with the reason',
+    'Reversible actions that benefit from an inline Undo',
+  ],
+  whenNotToUse: [
+    'In-form validation errors — use Field.Error or an inline Alert',
+    'Persistent block-level messages — use Callout',
+    'Confirming a destructive action before it runs — use ConfirmDialog / Dialog',
+  ],
+  relatedTo: [
+    {
+      component: 'Alert',
+      relationship: 'Alert for inline/in-form status; Toast for action results',
+    },
+    {
+      component: 'ConfirmDialog',
+      relationship: 'ConfirmDialog gates a destructive action; Toast reports the outcome',
+    },
+  ],
+  example: `function Example() {
+  const {toast} = useToast()
+  return (
+    <Button onClick={() => toast({variant: 'success', message: 'Grant revoked', action: {label: 'Undo', onClick: restore}})}>
+      Revoke
+    </Button>
+  )
+}`,
+}

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

@@ -0,0 +1,81 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, userEvent, waitFor} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {ToastProvider, useToast} from './ToastProvider'
+
+const s = css.create({
+  row: {display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap'},
+  btn: {padding: 8, borderRadius: 6, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer'},
+})
+
+function Triggers() {
+  const {toast} = useToast()
+  return (
+    <html.div style={s.row}>
+      <html.button
+        style={s.btn}
+        onClick={() => toast({variant: 'success', message: 'Grant revoked', duration: 0})}
+      >
+        Show success
+      </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({variant: 'error', message: 'Couldn’t revoke: SMTP down', duration: 0})
+        }
+      >
+        Show error
+      </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({
+            variant: 'success',
+            message: 'Mapping deleted',
+            duration: 0,
+            action: {label: 'Undo', onClick: () => {}},
+          })
+        }
+      >
+        Show with undo
+      </html.button>
+    </html.div>
+  )
+}
+
+const meta: Meta<typeof ToastProvider> = {
+  title: 'Components/Toast',
+  component: ToastProvider,
+  render: () => (
+    <ToastProvider>
+      <Triggers />
+    </ToastProvider>
+  ),
+}
+export default meta
+type Story = StoryObj<typeof ToastProvider>
+
+export const Success: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show success'))
+    const toast = await waitFor(() => canvas.getByRole('status'))
+    await expect(toast).toHaveTextContent('Grant revoked')
+  },
+}
+
+export const Error: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show error'))
+    const toast = await waitFor(() => canvas.getByRole('alert'))
+    await expect(toast).toHaveTextContent('Couldn’t revoke: SMTP down')
+  },
+}
+
+export const Dismiss: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show success'))
+    await waitFor(() => canvas.getByRole('status'))
+    await userEvent.click(canvas.getByRole('button', {name: 'Dismiss'}))
+    await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument())
+  },
+}

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,189 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react'
+import {createPortal} from 'react-dom'
+import {html} from 'react-strict-dom'
+import {Icon, type IconName} from '../Icon'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
+import {styles} from './styles.css'
+
+export type ToastVariant = 'success' | 'error' | 'info'
+
+export interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+export interface ToastOptions {
+  /** Visual + semantic tone. Errors announce assertively and 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. */
+  duration?: number
+}
+
+export interface ToastContextValue {
+  /** Show a toast; returns its id so it can be dismissed programmatically. */
+  toast: (opts: ToastOptions) => string
+  dismiss: (id: string) => void
+}
+
+interface ToastEntry {
+  id: string
+  variant: ToastVariant
+  message: ReactNode
+  action?: ToastAction
+  duration: number
+}
+
+interface ToastStore {
+  subscribe: (cb: () => void) => () => void
+  getSnapshot: () => readonly ToastEntry[]
+  add: (opts: ToastOptions) => string
+  remove: (id: string) => void
+}
+
+const DEFAULT_DURATION: Record<ToastVariant, number> = {
+  success: 5000,
+  info: 5000,
+  error: 8000,
+}
+
+function createToastStore(): ToastStore {
+  let entries: ToastEntry[] = []
+  let seq = 0
+  const listeners = new Set<() => void>()
+  const notify = () => listeners.forEach((l) => l())
+
+  return {
+    subscribe: (cb) => {
+      listeners.add(cb)
+      return () => listeners.delete(cb)
+    },
+    getSnapshot: () => entries,
+    add: (opts) => {
+      const variant = opts.variant ?? 'info'
+      const id = `toast-${++seq}`
+      const duration = opts.duration ?? DEFAULT_DURATION[variant]
+      entries = [...entries, {id, variant, message: opts.message, action: opts.action, duration}]
+      notify()
+      return id
+    },
+    remove: (id) => {
+      const next = entries.filter((e) => e.id !== id)
+      if (next.length !== entries.length) {
+        entries = next
+        notify()
+      }
+    },
+  }
+}
+
+const variantIcon: Record<ToastVariant, IconName> = {
+  success: 'check-circle-filled',
+  error: 'x-circle-filled',
+  info: 'info-circle-filled',
+}
+const variantIconStyle = {
+  success: styles.iconSuccess,
+  error: styles.iconError,
+  info: styles.iconInfo,
+} as const
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used within a <ToastProvider>')
+  return ctx
+}
+
+function ToastItem({entry, onDismiss}: {entry: ToastEntry; onDismiss: (id: string) => void}) {
+  const {id, variant, message, action, duration} = entry
+
+  useEffect(() => {
+    if (duration <= 0) return
+    const timer = setTimeout(() => onDismiss(id), duration)
+    return () => clearTimeout(timer)
+  }, [id, duration, onDismiss])
+
+  return (
+    <html.div
+      role={variant === 'error' ? 'alert' : 'status'}
+      aria-live={variant === 'error' ? 'assertive' : 'polite'}
+      style={[styles.toast, styles[variant]]}
+    >
+      <html.div style={[styles.iconWrap, variantIconStyle[variant]]}>
+        <Icon name={variantIcon[variant]} size={18} />
+      </html.div>
+      <html.div style={styles.content}>
+        <html.div style={styles.message}>{message}</html.div>
+        {action ? (
+          <html.button
+            type="button"
+            style={styles.action}
+            onClick={() => {
+              action.onClick()
+              onDismiss(id)
+            }}
+          >
+            {action.label}
+          </html.button>
+        ) : null}
+      </html.div>
+      <html.button
+        type="button"
+        aria-label="Dismiss"
+        style={styles.closeBtn}
+        onClick={() => onDismiss(id)}
+      >
+        <Icon name="x-circle" size={16} />
+      </html.button>
+    </html.div>
+  )
+}
+
+export function ToastProvider({children}: {children: ReactNode}) {
+  const storeRef = useRef<ToastStore>(null)
+  if (storeRef.current === null) {
+    storeRef.current = createToastStore()
+  }
+  const store = storeRef.current
+
+  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const mount = usePortalMount()
+
+  const value = useMemo<ToastContextValue>(
+    () => ({
+      toast: (opts) => store.add(opts),
+      dismiss: (id) => store.remove(id),
+    }),
+    [store],
+  )
+
+  const dismiss = useCallback((id: string) => store.remove(id), [store])
+
+  const region = (
+    <html.div role="region" aria-label="Notifications" style={styles.region}>
+      {entries.map((entry) => (
+        <ToastItem key={entry.id} entry={entry} onDismiss={dismiss} />
+      ))}
+    </html.div>
+  )
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {mount ? createPortal(region, mount) : region}
+    </ToastContext.Provider>
+  )
+}

package/src/components/Toast/index.ts

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

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

@@ -0,0 +1,115 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+
+const enter = css.keyframes({
+  from: {opacity: 0, transform: 'translateY(10px)'},
+  to: {opacity: 1, transform: 'translateY(0)'},
+})
+
+export const styles = css.create({
+  // Fixed, viewport-anchored stack. Portaled into the ThemeProvider mount so it
+  // layers above dialogs; the container itself is click-through, each toast
+  // re-enables pointer events.
+  region: {
+    position: 'fixed',
+    bottom: spacing.lg,
+    left: 0,
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    pointerEvents: 'none',
+  },
+  toast: {
+    pointerEvents: 'auto',
+    boxSizing: 'border-box',
+    width: '100%',
+    maxWidth: 440,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+    padding: spacing.md,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderLeftWidth: 3,
+    backgroundColor: colors.bgCard,
+    boxShadow: shadows.lg,
+    color: colors.text,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    animationName: {
+      default: enter,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+    animationDuration: '160ms',
+    animationTimingFunction: 'ease-out',
+  },
+  success: {borderLeftColor: colors.successBorder},
+  error: {borderLeftColor: colors.errorBorder},
+  info: {borderLeftColor: colors.infoBorder},
+
+  iconWrap: {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 1,
+  },
+  iconSuccess: {color: colors.successText},
+  iconError: {color: colors.errorText},
+  iconInfo: {color: colors.infoText},
+
+  content: {
+    flex: 1,
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+  },
+  message: {
+    color: colors.text,
+  },
+  action: {
+    alignSelf: 'flex-start',
+    marginTop: 2,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    color: colors.accent,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    textDecorationLine: 'underline',
+    cursor: 'pointer',
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: 2,
+    outlineColor: colors.accent,
+    outlineOffset: 2,
+    borderRadius: radii.sm,
+  },
+  closeBtn: {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 2,
+    marginTop: -1,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    color: {default: colors.textMuted, ':hover': colors.text},
+    cursor: 'pointer',
+    borderRadius: radii.sm,
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: 2,
+    outlineColor: colors.accent,
+    outlineOffset: 1,
+  },
+})

package/src/index.ts

@@ -40,6 +40,14 @@ export {Combobox} from './components/Combobox/Combobox'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
+export {
+  ToastProvider,
+  useToast,
+  type ToastVariant,
+  type ToastOptions,
+  type ToastAction,
+  type ToastContextValue,
+} from './components/Toast'
 export {
   StatusIcon,
   type StatusIconName,