@w5-ui/react 0.1.0

package/src/components/Combobox.tsx

@@ -0,0 +1,211 @@
+import { useState, useRef, useEffect, useId } from 'react'
+import type { ChangeEvent, KeyboardEvent } from 'react'
+
+export interface ComboboxOption {
+  value: string
+  label: string
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value?: string
+  onChange?: (value: string) => void
+  label?: string
+  placeholder?: string
+  id?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function Combobox({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = 'Search…',
+  id,
+  disabled = false,
+  className = '',
+}: ComboboxProps) {
+  const generatedId = useId()
+  const inputId = id ?? generatedId
+  const listboxId = `${inputId}-lb`
+
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [activeIdx, setActiveIdx] = useState(-1)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  const selectedOption = options.find((o) => o.value === value)
+
+  const filtered =
+    query.trim() === ''
+      ? options
+      : options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+
+  const activeOptionId =
+    activeIdx >= 0 && filtered[activeIdx] ? `${listboxId}-opt-${activeIdx}` : undefined
+
+  useEffect(() => {
+    if (!open) return
+    function handler(e: MouseEvent) {
+      if (!wrapperRef.current?.contains(e.target as Node)) {
+        setOpen(false)
+        setQuery('')
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  function openList() {
+    if (disabled) return
+    setQuery(selectedOption?.label ?? '')
+    setActiveIdx(options.findIndex((o) => o.value === value))
+    setOpen(true)
+  }
+
+  function pick(opt: ComboboxOption) {
+    onChange?.(opt.value)
+    setOpen(false)
+    setQuery('')
+    inputRef.current?.focus()
+  }
+
+  function onInputChange(e: ChangeEvent<HTMLInputElement>) {
+    setQuery(e.target.value)
+    setActiveIdx(-1)
+    if (!open) setOpen(true)
+  }
+
+  function onKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (disabled) return
+    if (e.key === 'Escape') {
+      setOpen(false)
+      setQuery('')
+      return
+    }
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault()
+        openList()
+      }
+      return
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setActiveIdx(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setActiveIdx(filtered.length - 1)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (activeIdx >= 0 && filtered[activeIdx]) pick(filtered[activeIdx])
+    } else if (e.key === 'Tab') {
+      setOpen(false)
+      setQuery('')
+    }
+  }
+
+  const displayValue = open ? query : (selectedOption?.label ?? '')
+
+  return (
+    <div ref={wrapperRef} className={`combobox-wrapper ${className}`.trim()}>
+      {label && (
+        <label htmlFor={inputId} className="sr-only">
+          {label}
+        </label>
+      )}
+      <div className="combobox-field">
+        <input
+          ref={inputRef}
+          id={inputId}
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listboxId}
+          aria-autocomplete="list"
+          aria-activedescendant={activeOptionId}
+          aria-label={label}
+          autoComplete="off"
+          spellCheck={false}
+          disabled={disabled}
+          placeholder={placeholder}
+          value={displayValue}
+          onChange={onInputChange}
+          onFocus={openList}
+          onKeyDown={onKeyDown}
+          className="combobox-input"
+        />
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-hidden="true"
+          className="combobox-chevron-btn"
+          onClick={() => {
+            if (open) {
+              setOpen(false)
+              setQuery('')
+            } else {
+              inputRef.current?.focus()
+              openList()
+            }
+          }}
+        >
+          <svg
+            className={`select-chevron${open ? ' combobox-chevron-open' : ''}`}
+            viewBox="0 0 16 16"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d="M4 6l4 4 4-4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </svg>
+        </button>
+      </div>
+      {open && (
+        <ul
+          id={listboxId}
+          role="listbox"
+          aria-label={label}
+          className="select-listbox combobox-listbox"
+        >
+          {filtered.length === 0 ? (
+            <li className="combobox-empty">No results</li>
+          ) : (
+            filtered.map((opt, idx) => (
+              <li
+                key={opt.value}
+                id={`${listboxId}-opt-${idx}`}
+                role="option"
+                aria-selected={opt.value === value}
+                data-active={idx === activeIdx ? 'true' : undefined}
+                className="select-option"
+                onMouseDown={(e) => {
+                  e.preventDefault()
+                  pick(opt)
+                }}
+                onMouseEnter={() => setActiveIdx(idx)}
+              >
+                {opt.label}
+              </li>
+            ))
+          )}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/CommandPalette.tsx

@@ -0,0 +1,168 @@
+import { useState, useRef, useId, useEffect, type ReactNode } from 'react'
+import type { KeyboardEvent } from 'react'
+import { Kbd } from './Kbd.js'
+
+export interface CommandItem {
+  id: string
+  label: string
+  group?: string
+  icon?: ReactNode
+  shortcut?: string
+}
+
+export interface CommandPaletteProps {
+  open: boolean
+  onClose: () => void
+  items: CommandItem[]
+  onSelect: (id: string) => void
+  placeholder?: string
+}
+
+export function CommandPalette({
+  open,
+  onClose,
+  items,
+  onSelect,
+  placeholder = 'Search pages and actions…',
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState('')
+  const [activeIdx, setActiveIdx] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listId = useId()
+
+  const filtered =
+    query.trim() === ''
+      ? items
+      : items.filter((i) => i.label.toLowerCase().includes(query.toLowerCase()))
+
+  const grouped = filtered.reduce<{ group: string; items: CommandItem[] }[]>((acc, item) => {
+    const g = item.group ?? ''
+    const found = acc.find((a) => a.group === g)
+    if (found) found.items.push(item)
+    else acc.push({ group: g, items: [item] })
+    return acc
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    setQuery('')
+    setActiveIdx(0)
+    const frame = requestAnimationFrame(() => inputRef.current?.focus())
+    return () => cancelAnimationFrame(frame)
+  }, [open])
+
+  useEffect(() => {
+    setActiveIdx(0)
+  }, [query])
+
+  function commit(id: string) {
+    onSelect(id)
+    onClose()
+    setQuery('')
+  }
+
+  function handleKey(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const item = filtered[activeIdx]
+      if (item) commit(item.id)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      onClose()
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      className="cp-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div role="dialog" aria-modal="true" aria-label="Command palette" className="cp-panel">
+        <div className="cp-search">
+          <svg
+            className="cp-search-icon"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <circle cx="6.5" cy="6.5" r="4.5" />
+            <path d="M10.5 10.5l3 3" />
+          </svg>
+          <input
+            ref={inputRef}
+            className="cp-input"
+            type="text"
+            role="combobox"
+            aria-expanded={filtered.length > 0}
+            aria-autocomplete="list"
+            aria-controls={listId}
+            aria-activedescendant={filtered[activeIdx] ? `${listId}-${activeIdx}` : undefined}
+            placeholder={placeholder}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKey}
+          />
+          <span className="cp-kbd">Esc</span>
+        </div>
+        <ul id={listId} role="listbox" aria-label="Results" className="cp-list">
+          {filtered.length === 0 ? (
+            <li className="cp-empty">No results for &ldquo;{query}&rdquo;</li>
+          ) : (
+            grouped.map(({ group, items: groupItems }) => (
+              <li key={group} role="presentation">
+                {group && <div className="cp-group-label">{group}</div>}
+                {groupItems.map((item) => {
+                  const idx = filtered.indexOf(item)
+                  return (
+                    <div
+                      key={item.id}
+                      id={`${listId}-${idx}`}
+                      role="option"
+                      aria-selected={idx === activeIdx}
+                      data-active={idx === activeIdx ? 'true' : undefined}
+                      className="cp-item"
+                      onClick={() => commit(item.id)}
+                      onMouseEnter={() => setActiveIdx(idx)}
+                    >
+                      {item.icon && (
+                        <span className="cp-item-icon" aria-hidden="true">
+                          {item.icon}
+                        </span>
+                      )}
+                      {item.label}
+                      {item.shortcut && (
+                        <span
+                          className="cp-item-shortcut"
+                          aria-label={item.shortcut.replace(/\+/g, ' then ')}
+                        >
+                          <Kbd keys={item.shortcut} />
+                        </span>
+                      )}
+                    </div>
+                  )
+                })}
+              </li>
+            ))
+          )}
+        </ul>
+      </div>
+    </div>
+  )
+}

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useId, useRef } from 'react'
+
+export type ConfirmVariant = 'danger' | 'warning' | 'info'
+
+export interface ConfirmDialogProps {
+  open: boolean
+  title: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: ConfirmVariant
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+const FOCUSABLE =
+  'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
+const VARIANT_CLASS: Record<ConfirmVariant, string> = {
+  danger: 'btn cd-confirm cd-confirm--danger',
+  warning: 'btn cd-confirm cd-confirm--warning',
+  info: 'btn cd-confirm cd-confirm--info',
+}
+
+export function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'info',
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const titleId = useId()
+  const descId = useId()
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const prev = document.activeElement as HTMLElement | null
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    const dialog = dialogRef.current
+    const items = dialog ? Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE)) : []
+    ;(items[0] ?? dialog)?.focus()
+
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        onCancel()
+        return
+      }
+      if (e.key !== 'Tab' || !dialog) return
+      const els = Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE))
+      if (!els.length) {
+        e.preventDefault()
+        return
+      }
+      const first = els[0]!
+      const last = els[els.length - 1]!
+      const active = document.activeElement
+      if (e.shiftKey && active === first) {
+        e.preventDefault()
+        last.focus()
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault()
+        first.focus()
+      }
+    }
+
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      document.body.style.overflow = prevOverflow
+      prev?.focus?.()
+    }
+  }, [open, onCancel])
+
+  return (
+    <div
+      className={`backdrop ${open ? 'show' : ''}`}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel()
+      }}
+    >
+      <div
+        ref={dialogRef}
+        className="modal cd-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={description ? descId : undefined}
+        tabIndex={-1}
+      >
+        <div className="modal-h">
+          <h2 id={titleId}>{title}</h2>
+        </div>
+        {description && (
+          <div id={descId} className="cd-body">
+            {description}
+          </div>
+        )}
+        <div className="modal-f">
+          <button type="button" className="btn btn-ghost" onClick={onCancel}>
+            {cancelLabel}
+          </button>
+          <button type="button" className={VARIANT_CLASS[variant]} onClick={onConfirm}>
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ContextMenu.tsx

@@ -0,0 +1,127 @@
+import { useState, useRef, useEffect, useId } from 'react'
+import type { KeyboardEvent } from 'react'
+
+export interface ContextMenuItem {
+  id: string
+  label: string
+  danger?: boolean
+  disabled?: boolean
+}
+
+export type ContextMenuEntry = ContextMenuItem | { separator: true }
+
+export interface ContextMenuProps {
+  items: ContextMenuEntry[]
+  x: number
+  y: number
+  open: boolean
+  onClose: () => void
+  onAction: (id: string) => void
+  label?: string
+}
+
+export function ContextMenu({
+  items,
+  x,
+  y,
+  open,
+  onClose,
+  onAction,
+  label = 'Context menu',
+}: ContextMenuProps) {
+  const uid = useId()
+  const menuId = `${uid}-ctxmenu`
+  const [activeIdx, setActiveIdx] = useState(0)
+  const menuRef = useRef<HTMLUListElement>(null)
+
+  const actionItems = items.reduce<ContextMenuItem[]>((acc, e) => {
+    if (!('separator' in e)) acc.push(e)
+    return acc
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    setActiveIdx(0)
+    requestAnimationFrame(() => menuRef.current?.focus())
+    function handler(e: MouseEvent) {
+      if (!menuRef.current?.contains(e.target as Node)) onClose()
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open, onClose])
+
+  function activate(id: string) {
+    onAction(id)
+    onClose()
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      onClose()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, actionItems.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setActiveIdx(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setActiveIdx(actionItems.length - 1)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      const item = actionItems[activeIdx]
+      if (item && !item.disabled) activate(item.id)
+    } else if (e.key === 'Tab') {
+      onClose()
+    }
+  }
+
+  if (!open) return null
+
+  const menuW = 168
+  const menuH = items.length * 30 + 8
+  const cx = Math.min(x, window.innerWidth - menuW - 8)
+  const cy = Math.min(y, window.innerHeight - menuH - 8)
+
+  return (
+    <ul
+      ref={menuRef}
+      id={menuId}
+      role="menu"
+      aria-label={label}
+      tabIndex={-1}
+      className="ctx-menu"
+      style={{ left: cx, top: cy }}
+      onKeyDown={onKeyDown}
+    >
+      {items.map((entry, i) => {
+        if ('separator' in entry) {
+          return <li key={i} role="separator" className="ctx-menu-sep" />
+        }
+        const ai = actionItems.indexOf(entry)
+        return (
+          <li
+            key={entry.id}
+            role="menuitem"
+            tabIndex={-1}
+            aria-disabled={entry.disabled || undefined}
+            data-active={ai === activeIdx ? 'true' : undefined}
+            data-danger={entry.danger || undefined}
+            className="ctx-menu-item"
+            onMouseEnter={() => setActiveIdx(ai)}
+            onMouseDown={(e) => {
+              e.preventDefault()
+              if (!entry.disabled) activate(entry.id)
+            }}
+          >
+            {entry.label}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

package/src/components/ContextualHelp.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useId, useRef, useState } from 'react'
+
+export interface ContextualHelpProps {
+  title: string
+  body: string
+  placement?: 'top' | 'bottom'
+}
+
+export function ContextualHelp({ title, body, placement = 'top' }: ContextualHelpProps) {
+  const titleId = useId()
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLSpanElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    panelRef.current?.focus()
+
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        setOpen(false)
+        triggerRef.current?.focus()
+      }
+    }
+
+    function onPointer(e: PointerEvent) {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+
+    window.addEventListener('keydown', onKey)
+    document.addEventListener('pointerdown', onPointer)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      document.removeEventListener('pointerdown', onPointer)
+    }
+  }, [open])
+
+  return (
+    <span ref={rootRef} className="ch-root">
+      <button
+        ref={triggerRef}
+        type="button"
+        className="ch-trigger"
+        aria-label="Help"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen((o) => !o)}
+      >
+        ?
+      </button>
+      {open && (
+        <div
+          ref={panelRef}
+          role="dialog"
+          aria-labelledby={titleId}
+          className={`ch-panel ch-panel--${placement}`}
+          tabIndex={-1}
+        >
+          <div id={titleId} className="ch-title">
+            {title}
+          </div>
+          <div className="ch-body">{body}</div>
+        </div>
+      )}
+    </span>
+  )
+}