@duro-app/ui 0.24.0 → 0.26.0

package/src/components/TagGroup/TagGroup.tsx

@@ -0,0 +1,302 @@
+import {
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {useFieldContext} from '../Field/FieldContext'
+import {TagGroupContext, type TagGroupContextValue} from './TagGroupContext'
+import {styles} from './styles.css'
+
+// ---------------------------------------------------------------------------
+// Local context accessor (non-throwing, returns null)
+// ---------------------------------------------------------------------------
+
+function useTagGroupCtx() {
+  return useContext(TagGroupContext)
+}
+
+// ---------------------------------------------------------------------------
+// TagGroup.Root
+// ---------------------------------------------------------------------------
+
+interface RootProps {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (values: string[]) => void
+  /** Validate a value before adding. Return `true` if valid, or an error string. */
+  onValidate?: (value: string) => true | string
+  disabled?: boolean
+  /** Form field name — renders hidden inputs for each tag value */
+  name?: string
+  'aria-label'?: string
+  children: ReactNode
+}
+
+function Root({
+  value: controlledValue,
+  defaultValue = [],
+  onValueChange,
+  onValidate,
+  disabled: disabledProp = false,
+  name,
+  'aria-label': ariaLabel,
+  children,
+}: RootProps) {
+  const gridId = useId()
+  const fieldCtx = useFieldContext()
+  const [values, setValues] = useControllableValue(controlledValue, defaultValue, onValueChange)
+  const [focusedIndex, setFocusedIndex] = useState(-1)
+  const [editable, setEditable] = useState(false)
+  const [announcement, setAnnouncement] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const disabled = disabledProp || (fieldCtx?.disabled ?? false)
+  const isInvalid = fieldCtx?.invalid ?? false
+
+  const addTag = useCallback(
+    (value: string) => {
+      const trimmed = value.trim()
+      if (!trimmed) return
+      if (values.includes(trimmed)) return
+      if (onValidate) {
+        const result = onValidate(trimmed)
+        if (result !== true) return
+      }
+      setValues([...values, trimmed])
+      setAnnouncement(`Added ${trimmed}`)
+    },
+    [values, setValues, onValidate],
+  )
+
+  const removeTag = useCallback(
+    (value: string) => {
+      const idx = values.indexOf(value)
+      if (idx === -1) return
+      const next = values.filter((v) => v !== value)
+      setValues(next)
+      setAnnouncement(`Removed ${value}`)
+
+      // Focus management: move to next tag, or previous, or input
+      if (next.length === 0) {
+        inputRef.current?.focus()
+        setFocusedIndex(-1)
+      } else if (idx >= next.length) {
+        setFocusedIndex(next.length - 1)
+      } else {
+        setFocusedIndex(idx)
+      }
+    },
+    [values, setValues],
+  )
+
+  // Focus the tag at focusedIndex when it changes
+  useEffect(() => {
+    if (focusedIndex >= 0 && focusedIndex < values.length) {
+      const container = document.getElementById(gridId)
+      if (!container) return
+      const rows = container.querySelectorAll('[role="row"]')
+      const target = rows[focusedIndex] as HTMLElement | undefined
+      target?.focus()
+    }
+  }, [focusedIndex, gridId, values.length])
+
+  const ctx = useMemo<TagGroupContextValue>(
+    () => ({
+      values,
+      addTag,
+      removeTag,
+      editable,
+      setEditable,
+      disabled,
+      validate: onValidate,
+      focusedIndex,
+      setFocusedIndex,
+      inputRef,
+      gridId,
+      name,
+    }),
+    [values, addTag, removeTag, editable, disabled, onValidate, focusedIndex, gridId, name],
+  )
+
+  return (
+    <TagGroupContext.Provider value={ctx}>
+      <html.div style={styles.root} aria-label={ariaLabel}>
+        <html.div
+          style={[
+            styles.container,
+            !editable && styles.containerStatic,
+            isInvalid && styles.containerError,
+            disabled && styles.containerDisabled,
+          ]}
+          aria-describedby={
+            fieldCtx
+              ? `${fieldCtx.descriptionId} ${fieldCtx.invalid ? fieldCtx.errorId : ''}`.trim()
+              : undefined
+          }
+          aria-invalid={isInvalid || undefined}
+        >
+          {children}
+        </html.div>
+
+        {/* Hidden inputs for form submission */}
+        {name && values.map((v) => <html.input key={v} type="hidden" name={name} value={v} />)}
+
+        {/* Live region for screen reader announcements */}
+        <html.div role="status" aria-live="polite" aria-atomic style={styles.liveRegion}>
+          {announcement}
+        </html.div>
+      </html.div>
+    </TagGroupContext.Provider>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// TagGroup.List
+// ---------------------------------------------------------------------------
+
+interface ListProps {
+  children: ReactNode
+  'aria-label'?: string
+}
+
+function List({children, 'aria-label': ariaLabel}: ListProps) {
+  const ctx = useTagGroupCtx()
+
+  return (
+    <html.div role={'grid' as any} aria-label={ariaLabel} id={ctx?.gridId} style={styles.list}>
+      {children}
+    </html.div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// TagGroup.Input
+// ---------------------------------------------------------------------------
+
+interface InputProps {
+  placeholder?: string
+}
+
+function Input({placeholder}: InputProps) {
+  const ctx = useTagGroupCtx()
+  const [inputValue, setInputValue] = useState('')
+  const localRef = useRef<HTMLInputElement>(null)
+
+  // Sync local ref with context inputRef
+  useEffect(() => {
+    if (ctx?.inputRef) {
+      ;(ctx.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = localRef.current
+    }
+  })
+
+  // Register as editable on mount
+  useEffect(() => {
+    ctx?.setEditable(true)
+    return () => ctx?.setEditable(false)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const commitValueRef = useRef<(raw: string) => boolean>(() => false)
+  commitValueRef.current = (raw: string) => {
+    const trimmed = raw.trim()
+    if (!trimmed || !ctx) return false
+    ctx.addTag(trimmed)
+    setInputValue('')
+    return true
+  }
+
+  // Native keydown for full KeyboardEvent access (preventDefault)
+  useEffect(() => {
+    const el = localRef.current
+    if (!el) return
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (!ctx) return
+      const target = e.target as HTMLInputElement
+
+      if (e.key === 'Enter' || e.key === ',' || e.key === ';') {
+        e.preventDefault()
+        commitValueRef.current(target.value)
+        return
+      }
+
+      if (e.key === 'Tab' && target.value.trim()) {
+        e.preventDefault()
+        commitValueRef.current(target.value)
+        return
+      }
+
+      if (e.key === 'Backspace' && !target.value && ctx.values.length > 0) {
+        e.preventDefault()
+        ctx.removeTag(ctx.values[ctx.values.length - 1])
+        return
+      }
+
+      if (e.key === 'ArrowLeft' && (target.selectionStart ?? 0) === 0 && ctx.values.length > 0) {
+        e.preventDefault()
+        ctx.setFocusedIndex(ctx.values.length - 1)
+        return
+      }
+
+      if (e.key === 'Escape') {
+        setInputValue('')
+      }
+    }
+
+    function handlePaste(e: ClipboardEvent) {
+      if (!ctx) return
+      const text = e.clipboardData?.getData('text') ?? ''
+      const items = text
+        .split(/[\n,;]+/)
+        .map((s) => s.trim())
+        .filter(Boolean)
+      if (items.length > 1) {
+        e.preventDefault()
+        for (const item of items) {
+          ctx.addTag(item)
+        }
+      }
+    }
+
+    function handleFocus() {
+      ctx?.setFocusedIndex(-1)
+    }
+
+    el.addEventListener('keydown', handleKeyDown)
+    el.addEventListener('paste', handlePaste)
+    el.addEventListener('focus', handleFocus)
+    return () => {
+      el.removeEventListener('keydown', handleKeyDown)
+      el.removeEventListener('paste', handlePaste)
+      el.removeEventListener('focus', handleFocus)
+    }
+  }, [ctx])
+
+  return (
+    <html.input
+      ref={localRef as React.Ref<HTMLInputElement>}
+      type="text"
+      value={inputValue}
+      onChange={(e: any) => setInputValue(e.target.value)}
+      placeholder={!ctx?.values.length ? placeholder : undefined}
+      disabled={ctx?.disabled}
+      style={styles.input}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Namespace export
+// ---------------------------------------------------------------------------
+
+export const TagGroup = {
+  Root,
+  List,
+  Input,
+}

package/src/components/TagGroup/TagGroupContext.ts

@@ -0,0 +1,22 @@
+import {createContext, useContext} from 'react'
+
+export interface TagGroupContextValue {
+  values: string[]
+  addTag: (value: string) => void
+  removeTag: (value: string) => void
+  editable: boolean
+  setEditable: (v: boolean) => void
+  disabled: boolean
+  validate?: (value: string) => true | string
+  focusedIndex: number
+  setFocusedIndex: (index: number) => void
+  inputRef: React.RefObject<HTMLInputElement | null>
+  gridId: string
+  name?: string
+}
+
+export const TagGroupContext = createContext<TagGroupContextValue | null>(null)
+
+export function useTagGroup(): TagGroupContextValue | null {
+  return useContext(TagGroupContext)
+}

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

@@ -0,0 +1,97 @@
+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'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':focus-within': colors.accent,
+    },
+    borderRadius: radii.sm,
+    backgroundColor: colors.bg,
+    minHeight: 40,
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {
+      default: 0,
+      ':focus-within': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-within': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-within': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-within': 1,
+    },
+  },
+  containerError: {
+    borderColor: {
+      default: colors.error,
+      ':focus-within': colors.error,
+    },
+  },
+  containerDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  // Static display (no Input) — no input-field border
+  containerStatic: {
+    borderWidth: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    minHeight: 0,
+    backgroundColor: 'transparent',
+    outlineWidth: 0,
+  },
+  list: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: spacing.xs,
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+    minWidth: 120,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    outlineWidth: 0,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+  },
+  liveRegion: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+  },
+})

package/src/components/Textarea/Textarea.tsx

@@ -41,6 +41,7 @@ export function Textarea({
   const effectiveOnChange = onChange ?? fieldCtx?.onChange
   const effectiveOnBlur = onBlur ?? fieldCtx?.onBlur
   const effectiveRef = ref ?? fieldCtx?.ref
+  const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
 
   return (
@@ -52,7 +53,7 @@ export function Textarea({
       rows={rows}
       value={effectiveValue}
       defaultValue={defaultValue}
-      disabled={disabled}
+      disabled={effectiveDisabled}
       aria-describedby={
         ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
       }

package/src/index.ts

@@ -21,6 +21,7 @@ export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {List, type ListSelectionMode} from './components/List/List'
 export {Field} from './components/Field/Field'
 export {Form, type FormProps} from './components/Form/Form'
+export type {LabelPosition, NecessityIndicator} from './components/Form/FormContext'
 export {Fieldset, type FieldsetGap} from './components/Fieldset/Fieldset'
 export {Input, type InputVariant} from './components/Input/Input'
 export {InputGroup} from './components/InputGroup/InputGroup'
@@ -33,6 +34,7 @@ export {Menu} from './components/Menu/Menu'
 export {Panel} from './components/Panel/Panel'
 export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
+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'
@@ -41,6 +43,8 @@ export {
   type StatusIconName,
   type StatusIconVariant,
 } from './components/StatusIcon/StatusIcon'
+export {Tag, type TagVariant, type TagSize} from './components/Tag/Tag'
+export {TagGroup} from './components/TagGroup/TagGroup'
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
 // TanStack Table: consumers install @tanstack/react-table directly and use
 // Table.Pagination, Table.SortIndicator, Table.ColumnFilter for styled integration

package/src/strict.css

@@ -2,6 +2,6 @@
 @react-strict-dom;
 
 /* Table: reveal sort indicator on header cell hover */
-[role="columnheader"]:hover [data-sort-indicator] {
+[role='columnheader']:hover [data-sort-indicator] {
   opacity: 1 !important;
 }