@proteos/ui 0.54.1 → 0.55.0

package/src/components/tag-input/tag-input.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import { TagInput } from './tag-input'
 
@@ -78,3 +78,69 @@ describe('TagInput', () => {
     expect(onChange).not.toHaveBeenCalled()
   })
 })
+
+describe('TagInput — inline cell editor', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('stays one row tall while the chips fit on a line', () => {
+    render(<TagInput value={['alpha', 'beta']} onChange={() => {}} appearance="cell" />)
+    const box = screen.getByRole('textbox').closest('.h-\\[29px\\]')
+    expect(box).not.toBeNull()
+  })
+
+  it('grows to two rows with a scroll area once the chips wrap', () => {
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (
+      this: Element,
+    ) {
+      const index = this.parentElement ? Array.from(this.parentElement.children).indexOf(this) : 0
+      const top = index > 1 ? 30 : 0
+      return {
+        top,
+        bottom: top + 23,
+        height: 23,
+        left: 0,
+        right: 40,
+        width: 40,
+        x: 0,
+        y: top,
+        toJSON: () => ({}),
+      } as DOMRect
+    })
+    render(<TagInput value={['alpha', 'beta', 'gamma']} onChange={() => {}} appearance="cell" />)
+    const box = screen.getByRole('textbox').closest('.h-\\[64px\\]')
+    expect(box).not.toBeNull()
+    expect(box?.querySelector('.overflow-y-auto')).not.toBeNull()
+  })
+})
+
+describe('TagInput — Enter inside a keyboard-navigating host', () => {
+  it('keeps Enter to itself when it commits a tag', async () => {
+    const user = userEvent.setup()
+    const onHostKeyDown = vi.fn()
+    const onChange = vi.fn()
+    render(
+      // biome-ignore lint/a11y/noStaticElementInteractions: test host mimicking the table cell wrapper
+      <div onKeyDown={onHostKeyDown}>
+        <TagInput value={[]} onChange={onChange} />
+      </div>,
+    )
+    await user.type(screen.getByRole('textbox'), 'alpha{Enter}')
+    expect(onChange).toHaveBeenCalledWith(['alpha'])
+    expect(onHostKeyDown.mock.calls.some(([event]) => event.key === 'Enter')).toBe(false)
+  })
+
+  it('lets Enter reach the host when there is nothing to commit', async () => {
+    const user = userEvent.setup()
+    const onHostKeyDown = vi.fn()
+    render(
+      // biome-ignore lint/a11y/noStaticElementInteractions: test host mimicking the table cell wrapper
+      <div onKeyDown={onHostKeyDown}>
+        <TagInput value={['alpha']} onChange={() => {}} />
+      </div>,
+    )
+    await user.type(screen.getByRole('textbox'), '{Enter}')
+    expect(onHostKeyDown.mock.calls.some(([event]) => event.key === 'Enter')).toBe(true)
+  })
+})

package/src/components/tag-input/tag-input.tsx

@@ -1,27 +1,41 @@
-import { type KeyboardEvent, type ReactNode, useEffect, useId, useRef, useState } from 'react'
+import {
+  type KeyboardEvent,
+  type ReactNode,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import { cn } from '../../lib/cn'
+import { Badge, BadgeAction } from '../badge/badge'
 import {
   type FieldAppearance,
+  type FieldSize,
   fieldChipPadding,
   fieldControlStyles,
   fieldErrorStyles,
   fieldHintStyles,
   fieldLabelStyles,
   fieldMinHeight,
-  type FieldSize,
   fieldTextStyles,
 } from '../field/field'
+import { useChipRowWrap } from '../field/use-chip-row-wrap'
 
 /* =========================================================================
    TagInput — free-form list of strings rendered as removable chips.
    Used for filter `in`/`not_in` value entry on non-enum types where the
-   set of valid values isn't known up front.
+   set of valid values isn't known up front, and for `array` attributes.
 
    Behaviour:
      - Type into the trailing input → Enter or `,` commits as a tag.
      - Backspace on empty input → removes the last tag.
      - Click × on a chip → removes it.
 
+   Chips are the enum-value Badge (rounded, no dot, active register) with
+   the × in the badge's `actions` slot — the same chip the read-only
+   Display shows, so view ↔ edit toggles don't restyle the values.
+
    Controlled API only — `value: string[]` + `onChange`.
    ========================================================================= */
 
@@ -69,17 +83,31 @@ export function TagInput({
     appearance === 'cell'
       ? 'focus-within:border-accent focus-within:shadow-none'
       : 'focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]'
-  const minHeight = appearance === 'cell' ? 'min-h-[29px]' : fieldMinHeight[size]
+  const isCell = appearance === 'cell'
   const inputRef = useRef<HTMLInputElement>(null)
+  const chipsRef = useRef<HTMLDivElement>(null)
+  // Cell editor height follows the content: one row while the chips (and
+  // the entry input) fit on a line, the two-row pop-out once they wrap.
+  const hasWrapped = useChipRowWrap(chipsRef, isCell, JSON.stringify(value))
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only — autoFocus is a one-shot signal, not sustained.
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus()
-    // mount-only — autoFocus is a one-shot signal, not sustained.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   const inputId = useId()
   const [draft, setDraft] = useState('')
 
+  // Committing a tag pushes the entry input further down the wrapping row —
+  // in the scrolling cell box that can be out of view. Keep it visible while
+  // it holds focus; an outside value change must never scroll anything.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `value` is the re-run trigger (a commit re-flows the row); it is not read inside.
+  useLayoutEffect(() => {
+    const input = inputRef.current
+    if (!isCell || !input || document.activeElement !== input) return
+    if (typeof input.scrollIntoView !== 'function') return
+    input.scrollIntoView({ block: 'nearest' })
+  }, [isCell, value])
+
   const commit = () => {
     const v = draft.trim()
     if (!v) return
@@ -98,7 +126,13 @@ export function TagInput({
   const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' || e.key === ',') {
       e.preventDefault()
-      commit()
+      if (draft.trim()) {
+        // Committing a tag is the whole gesture: the host must not also read
+        // the Enter — an inline table cell would move to the next row. Enter
+        // on an empty entry still bubbles, so it can mean "done with this cell".
+        e.stopPropagation()
+        commit()
+      }
       return
     }
     if (e.key === 'Backspace' && !draft && value.length > 0) {
@@ -120,68 +154,68 @@ export function TagInput({
         data-disabled={isDisabled || undefined}
         className={cn(
           styles.box(),
-          'flex flex-wrap items-center gap-1',
-          minHeight,
-          fieldChipPadding[size],
+          'flex',
+          // Cell editor: one table row (29px under a 32px row) while the chips
+          // fit on a line; two rows (64px), popping out of the row, once they
+          // wrap — the chips then scroll inside. Field mode grows with its
+          // content.
+          isCell
+            ? hasWrapped
+              ? 'h-[64px] p-1'
+              : 'h-[29px] px-1 py-0'
+            : [fieldChipPadding[size], fieldMinHeight[size]],
           focusWithin,
         )}
       >
-        {value.map((tag, idx) => (
-          // tags are kept unique on commit, so the value alone is a stable key
-          <span
-            key={tag}
-            className={cn(
-              'inline-flex items-center gap-1',
-              'px-1.5 py-0.5 rounded-sm bg-surface-3',
-              'font-mono text-[12px] text-ink-2',
-            )}
-          >
-            <span className="max-w-[10rem] truncate">{tag}</span>
-            <button
-              type="button"
-              aria-label={`Remove ${tag}`}
-              disabled={isDisabled}
-              onClick={() => remove(idx)}
-              className={cn(
-                'inline-flex items-center justify-center',
-                'size-3.5 rounded-full text-ink-3 hover:text-ink hover:bg-surface-2',
-                'cursor-pointer outline-none',
-                'focus-visible:shadow-[var(--shadow-focus)]',
-                'disabled:opacity-45 disabled:cursor-not-allowed',
-              )}
-            >
-              <svg aria-hidden viewBox="0 0 10 10" className="size-2" fill="none">
-                <path
-                  d="M2 2l6 6M8 2l-6 6"
-                  stroke="currentColor"
-                  strokeWidth="1.4"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </button>
-          </span>
-        ))}
-
-        <input
-          ref={inputRef}
-          id={inputId}
-          type={inputType}
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={onKeyDown}
-          onBlur={commit}
-          disabled={isDisabled}
-          placeholder={value.length === 0 ? placeholder : ''}
+        <div
+          ref={chipsRef}
           className={cn(
-            'flex-1 min-w-[6rem] bg-transparent outline-none',
-            'font-sans text-ink placeholder:text-ink-4',
-            fieldTextStyles[size],
-            // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
-            // overall height so it matches Input/Select at the same size.
-            'px-1.5',
-            'disabled:cursor-not-allowed disabled:opacity-45',
+            'flex flex-1 flex-wrap items-center gap-1.5 min-w-0',
+            isCell &&
+              (hasWrapped ? 'content-start overflow-y-auto' : 'content-center overflow-hidden'),
           )}
-        />
+        >
+          {value.map((tag, idx) => (
+            // tags are kept unique on commit, so the value alone is a stable key
+            <Badge
+              key={tag}
+              variant="active"
+              shape="rounded"
+              hasDot={false}
+              className="shrink-0"
+              actions={
+                <BadgeAction
+                  label={`Remove ${tag}`}
+                  onPress={() => remove(idx)}
+                  isDisabled={isDisabled}
+                />
+              }
+            >
+              <span className="max-w-[10rem] truncate">{tag}</span>
+            </Badge>
+          ))}
+
+          <input
+            ref={inputRef}
+            id={inputId}
+            type={inputType}
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={onKeyDown}
+            onBlur={commit}
+            disabled={isDisabled}
+            placeholder={value.length === 0 ? placeholder : ''}
+            className={cn(
+              'flex-1 min-w-[6rem] bg-transparent outline-none',
+              'font-sans text-ink placeholder:text-ink-4',
+              fieldTextStyles[size],
+              // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
+              // overall height so it matches Input/Select at the same size.
+              'px-1.5',
+              'disabled:cursor-not-allowed disabled:opacity-45',
+            )}
+          />
+        </div>
       </div>
 
       {description ? <p className={fieldHintStyles}>{description}</p> : null}

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './components/attribute-type-icon'
 export * from './components/avatar'
 export * from './components/avatar-group'
 export * from './components/badge'
+export * from './components/badge-group'
 export * from './components/badge-multi-select'
 export * from './components/breadcrumbs'
 export * from './components/button'