@proteos/ui 0.54.1 → 0.56.0

package/src/components/badge-multi-select/badge-multi-select.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 { BadgeMultiSelect, type BadgeMultiSelectOption } from './badge-multi-select'
 
@@ -153,3 +153,112 @@ describe('BadgeMultiSelect', () => {
     expect(screen.getByRole('combobox')).toHaveAttribute('aria-invalid', 'true')
   })
 })
+
+/** jsdom has no layout: pretend every child beyond the second sits on a
+ *  second line, 30px lower, so the chip row reads as wrapped. */
+function mockWrappedChips() {
+  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
+  })
+}
+
+describe('BadgeMultiSelect — inline cell editor', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('opens the listbox on mount when defaultOpen is set', async () => {
+    render(
+      <BadgeMultiSelect<string>
+        label="Status"
+        options={statuses}
+        selectedKeys={new Set<string>()}
+        onSelectionChange={() => {}}
+        appearance="cell"
+        autoFocus
+        defaultOpen
+      />,
+    )
+    expect(await screen.findByRole('listbox')).toBeInTheDocument()
+    // The open popover aria-hides the rest of the page (modal), so the trigger
+    // is only reachable with `hidden`.
+    expect(screen.getByRole('combobox', { hidden: true })).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('stays closed on mount when disabled, even with defaultOpen', () => {
+    render(
+      <BadgeMultiSelect<string>
+        label="Status"
+        options={statuses}
+        selectedKeys={new Set<string>()}
+        onSelectionChange={() => {}}
+        appearance="cell"
+        defaultOpen
+        isDisabled
+      />,
+    )
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('stays one row tall while the chips fit on a line', () => {
+    render(
+      <BadgeMultiSelect<string>
+        label="Status"
+        options={statuses}
+        selectedKeys={new Set(['in-transit', 'quoted', 'reconciled'])}
+        onSelectionChange={() => {}}
+        appearance="cell"
+      />,
+    )
+    const trigger = screen.getByRole('combobox')
+    expect(trigger.className).toContain('h-[29px]')
+    expect(trigger.querySelector('.overflow-y-auto')).toBeNull()
+  })
+
+  it('grows to two rows with a scroll area once the chips wrap', () => {
+    mockWrappedChips()
+    render(
+      <BadgeMultiSelect<string>
+        label="Status"
+        options={statuses}
+        selectedKeys={new Set(['in-transit', 'quoted', 'reconciled'])}
+        onSelectionChange={() => {}}
+        appearance="cell"
+      />,
+    )
+    const trigger = screen.getByRole('combobox')
+    expect(trigger.className).toContain('h-[64px]')
+    expect(trigger.querySelector('.overflow-y-auto')).not.toBeNull()
+  })
+
+  it('closes the list on a pointer outside trigger and list', async () => {
+    const user = userEvent.setup()
+    render(
+      <div>
+        <BadgeMultiSelect<string>
+          label="Status"
+          options={statuses}
+          selectedKeys={new Set<string>()}
+          onSelectionChange={() => {}}
+          defaultOpen
+        />
+        <p>elsewhere</p>
+      </div>,
+    )
+    expect(await screen.findByRole('listbox')).toBeInTheDocument()
+    await user.click(screen.getByText('elsewhere'))
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+})

package/src/components/badge-multi-select/badge-multi-select.tsx

@@ -1,7 +1,7 @@
 import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from 'react'
 import { type Key, Label, ListBox, ListBoxItem, Popover } from 'react-aria-components'
 import { cn } from '../../lib/cn'
-import { Badge, type BadgeVariants } from '../badge/badge'
+import { Badge, BadgeAction, type BadgeVariants } from '../badge/badge'
 import {
   type FieldAppearance,
   FieldCaret,
@@ -14,13 +14,20 @@ import {
   fieldMinHeight,
   fieldTextStyles,
 } from '../field/field'
+import { ListboxCheck } from '../field/listbox-check'
+import { useChipRowWrap } from '../field/use-chip-row-wrap'
 
 /* =========================================================================
    BadgeMultiSelect — a MultiSelect specialized for picking status-like
    values. Each option is a <Badge/> — both in the dropdown and as the
-   selected pill. The × remove button lives INSIDE each selected badge
-   (no extra chip chrome), so the color coding from the Badge variant is
-   what you see, cleanly.
+   selected chip. The × lives in the badge's own `actions` slot (no extra
+   chip chrome), so the color coding from the Badge variant is what you
+   see, cleanly.
+
+   `appearance="cell"` is the inline table editor: a fixed-height box that
+   keeps the selected chips on one line (clipping the overflow — the open
+   listbox is where the full selection is read), and `defaultOpen` drops
+   the editor straight into the listbox the moment the cell is entered.
    ========================================================================= */
 
 export type BadgeMultiSelectOption<T extends Key = Key> = {
@@ -82,6 +89,12 @@ export type BadgeMultiSelectProps<T extends Key = Key> = {
    *  inputs; useful for keyboard chains where the trigger should take focus
    *  when its surrounding context becomes ready. */
   autoFocus?: boolean
+  /** Open the listbox on mount — the inline cell editor passes this so a
+   *  click into the cell lands straight in the options. Initial state
+   *  only, like RAC's `defaultOpen`. */
+  defaultOpen?: boolean
+  /** Accessible name for the trigger + listbox when no visible `label` is rendered. */
+  'aria-label'?: string
   className?: string
 }
 
@@ -99,25 +112,73 @@ export function BadgeMultiSelect<T extends Key>({
   size = 'md',
   appearance,
   autoFocus = false,
+  defaultOpen = false,
+  'aria-label': ariaLabel,
   className,
 }: BadgeMultiSelectProps<T>) {
+  const isCell = appearance === 'cell'
   const styles = fieldControlStyles({ size, invalid: isInvalid, appearance })
-  const focusWithin =
-    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 focusWithin = isCell
+    ? 'focus-within:border-accent focus-within:shadow-none'
+    : 'focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]'
   const [isOpen, setIsOpen] = useState(false)
   const triggerRef = useRef<HTMLDivElement>(null)
+  const chipsRef = useRef<HTMLDivElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  // Set when an outside pointer closed the list, so the close effect below
+  // does not pull focus back to the trigger the user just clicked away from.
+  const closedByPointerRef = useRef(false)
 
+  // Mount-only: focus first, THEN open. React Aria records the element to
+  // restore focus to during the popover's first render; opening in the
+  // mount render would record whatever focused us (an inline cell host),
+  // and unmounting the editor would hand focus straight back to it.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: autoFocus / defaultOpen are one-shot mount signals, not sustained.
   useEffect(() => {
     if (autoFocus) triggerRef.current?.focus()
-    // mount-only — autoFocus is a one-shot signal, not sustained.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (defaultOpen && !isDisabled) setIsOpen(true)
   }, [])
 
+  // A non-modal popover restores nothing on close: when the list held focus
+  // (keyboard use, Escape) the focus would silently drop to <body>, leaving
+  // an inline cell editor stranded. Hand it back to the trigger — unless the
+  // close came from a click that already focused something else.
+  const wasOpenRef = useRef(false)
+  useEffect(() => {
+    if (wasOpenRef.current && !isOpen && !closedByPointerRef.current) {
+      const active = document.activeElement
+      const strandedInList =
+        !active || active === document.body || !!active.closest('[data-rac][role="listbox"]')
+      if (strandedInList) triggerRef.current?.focus()
+    }
+    wasOpenRef.current = isOpen
+    closedByPointerRef.current = false
+  }, [isOpen])
+
   const selectedSet = new Set(selectedKeys)
   const selectedOptions = options.filter((o) => selectedSet.has(o.id))
+  // Cell editor height follows the chips: one row while they fit on a line,
+  // the two-row pop-out (scrolling) once they wrap.
+  const hasWrapped = useChipRowWrap(
+    chipsRef,
+    isCell,
+    JSON.stringify(selectedOptions.map((o) => o.id)),
+  )
+
+  // React Aria leaves non-modal popovers non-dismissable; close on any
+  // pointer that lands outside both the trigger and the list.
+  useEffect(() => {
+    if (!isOpen) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (!(target instanceof Node)) return
+      if (triggerRef.current?.contains(target) || popoverRef.current?.contains(target)) return
+      closedByPointerRef.current = true
+      setIsOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown, true)
+    return () => document.removeEventListener('pointerdown', onPointerDown, true)
+  }, [isOpen])
   const listboxOptions = hideSelectedOptions
     ? options.filter((o) => !selectedSet.has(o.id))
     : options
@@ -133,6 +194,14 @@ export function BadgeMultiSelect<T extends Key>({
     if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
       e.preventDefault()
       setIsOpen(true)
+      return
+    }
+    if (e.key === 'Escape' && isOpen) {
+      // Focus can sit on the trigger while the non-modal list is open (after
+      // a chip ×, say) — Escape closes the list first, before any host acts.
+      e.preventDefault()
+      e.stopPropagation()
+      setIsOpen(false)
     }
   }
 
@@ -143,6 +212,7 @@ export function BadgeMultiSelect<T extends Key>({
       <div
         ref={triggerRef}
         role="combobox"
+        aria-label={ariaLabel}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         aria-disabled={isDisabled || undefined}
@@ -154,41 +224,65 @@ export function BadgeMultiSelect<T extends Key>({
         data-disabled={isDisabled || undefined}
         className={cn(
           styles.box(),
-          'flex flex-wrap items-center gap-1.5 cursor-pointer',
-          minHeight,
-          fieldChipPadding[size],
-          'pr-2',
+          'flex items-stretch cursor-pointer',
+          // 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 like every other chip field.
+          isCell
+            ? hasWrapped
+              ? 'h-[64px] p-1'
+              : 'h-[29px] px-1 py-0'
+            : [fieldChipPadding[size], fieldMinHeight[size]],
           focusWithin,
         )}
       >
-        {selectedOptions.length === 0 ? (
-          // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
-          // overall height so it matches the Input/Select trigger at the same
-          // size.
-          <span className={cn('text-ink-4 font-sans px-1', fieldTextStyles[size])}>
-            {placeholder}
+        {/* The chips scroll inside this inner box, not the trigger itself:
+            React Aria closes a popover when an element containing its
+            trigger scrolls, and the trigger contains itself. */}
+        <div
+          ref={chipsRef}
+          className={cn(
+            'flex flex-1 flex-wrap items-center gap-1.5 min-w-0',
+            isCell &&
+              (hasWrapped ? 'content-start overflow-y-auto' : 'content-center overflow-hidden'),
+          )}
+        >
+          {selectedOptions.length === 0 ? (
+            // No vertical padding — wrapper's p-1.5 + min-h-[size] govern the
+            // overall height so it matches the Input/Select trigger at the same
+            // size.
+            <span className={cn('text-ink-4 font-sans px-1', fieldTextStyles[size])}>
+              {placeholder}
+            </span>
+          ) : (
+            selectedOptions.map((o) => (
+              <Badge
+                key={o.id}
+                {...badgeChrome(o)}
+                className="shrink-0"
+                actions={
+                  <BadgeAction
+                    label="Remove"
+                    onPress={() => remove(o.id)}
+                    isDisabled={isDisabled}
+                  />
+                }
+              >
+                {o.label}
+              </Badge>
+            ))
+          )}
+        </div>
+        {isCell ? null : (
+          <span className="flex items-center pl-1.5 pr-1">
+            <FieldCaret />
           </span>
-        ) : (
-          selectedOptions.map((o) => (
-            <RemovableBadge
-              key={o.id}
-              {...badgeChrome(o)}
-              onRemove={() => remove(o.id)}
-              isDisabled={isDisabled}
-            >
-              {o.label}
-            </RemovableBadge>
-          ))
         )}
-        <span className="ml-auto pr-1">
-          <FieldCaret />
-        </span>
       </div>
 
       {description ? <p className={fieldHintStyles}>{description}</p> : null}
-      {errorMessage && appearance !== 'cell' ? (
-        <p className={fieldErrorStyles}>{errorMessage}</p>
-      ) : null}
+      {errorMessage && !isCell ? <p className={fieldErrorStyles}>{errorMessage}</p> : null}
 
       <Popover
         isOpen={isOpen}
@@ -196,103 +290,71 @@ export function BadgeMultiSelect<T extends Key>({
         triggerRef={triggerRef}
         offset={6}
         placement="bottom start"
+        // Non-modal: the trigger stays usable while the list is open — scroll
+        // the chips, click a ×, without first dismissing the popover. Clicks
+        // on the trigger itself must not count as "outside" (they toggle).
+        isNonModal
+        shouldCloseOnInteractOutside={(element) => !triggerRef.current?.contains(element)}
         className={cn(
-          'w-[var(--trigger-width)]',
-          'rounded-md border border-rule bg-surface p-1',
+          // At least as wide as the trigger, wider when a badge needs it —
+          // a narrow table column must not clip its own options.
+          'min-w-[var(--trigger-width)] w-max max-w-[min(28rem,calc(100vw-2rem))]',
+          // Float above modals + full-screen editors, matching Select.
+          'z-[1300]',
+          // The popover element itself takes focus when opened programmatically
+          // (defaultOpen) — no browser outline around the whole panel.
+          'outline-none rounded-md border border-rule bg-surface p-1',
           'shadow-[var(--shadow-raised)]',
           'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
           'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
         )}
       >
-        <ListBox
-          aria-label={typeof label === 'string' ? label : 'Options'}
-          selectionMode="multiple"
-          selectedKeys={selectedSet}
-          onSelectionChange={(keys) => {
-            if (keys === 'all') {
-              onSelectionChange(new Set(options.map((o) => o.id)))
-              return
-            }
-            onSelectionChange(keys as Set<T>)
-          }}
-          className="outline-none max-h-72 overflow-auto"
-          renderEmptyState={() => (
-            <div className={cn('px-3 py-2', fieldHintStyles)}>All options selected</div>
-          )}
-        >
-          {listboxOptions.map((option) => (
-            <ListBoxItem
-              key={option.id}
-              id={option.id}
-              textValue={option.label}
-              {...(option.isDisabled ? { isDisabled: true } : {})}
-              className={cn(
-                'group flex items-center',
-                'rounded-[6px] px-3 py-2',
-                'cursor-pointer outline-none select-none',
-                'data-[hovered]:bg-surface-2',
-                'data-[focused]:bg-surface-2',
-                'data-[selected]:bg-surface-3',
-                'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
-              )}
-            >
-              <Badge {...badgeChrome(option)}>{option.label}</Badge>
-            </ListBoxItem>
-          ))}
-        </ListBox>
+        <div ref={popoverRef}>
+          <ListBox
+            aria-label={typeof label === 'string' ? label : (ariaLabel ?? 'Options')}
+            selectionMode="multiple"
+            // RAC clears a multi-selection on Escape by default — here Escape
+            // must close the list (useOverlay) and keep the selection.
+            escapeKeyBehavior="none"
+            selectedKeys={selectedSet}
+            onSelectionChange={(keys) => {
+              if (keys === 'all') {
+                onSelectionChange(new Set(options.map((o) => o.id)))
+                return
+              }
+              onSelectionChange(keys as Set<T>)
+            }}
+            // Land in the list straight away so arrows / Enter / Escape work
+            // without a Tab first (non-modal popovers do not move focus).
+            autoFocus="first"
+            className="outline-none max-h-72 overflow-auto"
+            renderEmptyState={() => (
+              <div className={cn('px-3 py-2', fieldHintStyles)}>All options selected</div>
+            )}
+          >
+            {listboxOptions.map((option) => (
+              <ListBoxItem
+                key={option.id}
+                id={option.id}
+                textValue={option.label}
+                {...(option.isDisabled ? { isDisabled: true } : {})}
+                className={cn(
+                  'group flex items-center gap-2.5',
+                  'rounded-[6px] px-2.5 py-1.5',
+                  'cursor-pointer outline-none select-none',
+                  // Selection is carried by the check box, not a row fill.
+                  'data-[hovered]:bg-surface-2',
+                  'data-[focused]:bg-surface-2',
+                  'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
+                )}
+              >
+                <ListboxCheck />
+                <Badge {...badgeChrome(option)}>{option.label}</Badge>
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </div>
       </Popover>
     </div>
   )
 }
-
-/* =========================================================================
-   Internal: a Badge with a trailing × button baked into the pill.
-   The × inherits the badge's text color via `currentColor`, so it reads
-   correctly against every variant's fill.
-   ========================================================================= */
-
-function RemovableBadge({
-  children,
-  onRemove,
-  isDisabled,
-  ...chrome
-}: BadgeChrome & {
-  children: ReactNode
-  onRemove: () => void
-  isDisabled: boolean
-}) {
-  return (
-    <Badge {...badgeChrome(chrome)}>
-      <span>{children}</span>
-      <button
-        type="button"
-        aria-label="Remove"
-        disabled={isDisabled}
-        onClick={(e) => {
-          e.stopPropagation()
-          onRemove()
-        }}
-        className={cn(
-          'inline-flex items-center justify-center shrink-0',
-          'size-3.5 rounded-full',
-          'text-current/70 hover:text-current hover:bg-current/10',
-          'outline-none cursor-pointer',
-          'focus-visible:shadow-[var(--shadow-focus)]',
-          'disabled:opacity-45 disabled:cursor-not-allowed',
-          // Pull the button flush with the right edge so the pill still feels
-          // symmetric around the leading dot.
-          '-mr-1',
-        )}
-      >
-        <svg aria-hidden viewBox="0 0 10 10" className="size-2.5" fill="none">
-          <path
-            d="M2 2l6 6M8 2l-6 6"
-            stroke="currentColor"
-            strokeWidth="1.4"
-            strokeLinecap="round"
-          />
-        </svg>
-      </button>
-    </Badge>
-  )
-}

package/src/components/data-table/data-table.stories.tsx

@@ -3,6 +3,7 @@ import type { ColumnDef, SortingState } from '@tanstack/react-table'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { Badge } from '../badge'
+import { Button } from '../button'
 import { DataTable, type InfiniteQueryLike } from './data-table'
 
 /* =========================================================================
@@ -271,8 +272,8 @@ export const LoadingMore: Story = {
 export const EndOfList: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => {
-    // Small dataset whose first page already covers everything — end marker
-    // appears as soon as the initial load resolves.
+    // Small dataset whose first page already covers everything — no loader,
+    // no further fetch once the initial load resolves.
     const query = useFakeInfiniteQuery({ total: 12 })
     return <DataTable<Row> ariaLabel="Shipments — end" query={query} columns={columns} />
   },
@@ -369,3 +370,53 @@ export const RowClickable: Story = {
     )
   },
 }
+
+/** `bodyAfter` is a trailing row: directly below the last row, and sticky to
+ *  the bottom of the scroll viewport while the end of the list is out of view. */
+export const WithTrailingRow: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const query = useFakeInfiniteQuery({ total: 60 })
+    return (
+      <DataTable<Row>
+        ariaLabel="Shipments — trailing row"
+        query={query}
+        columns={columns}
+        bodyAfter={
+          <Button variant="subtle" size="sm">
+            + Add row
+          </Button>
+        }
+      />
+    )
+  },
+}
+
+/** Column resizing: drag a header's trailing separator (or focus it and use
+ *  ←/→). Widths are controlled — the story keeps them in state and feeds them
+ *  back through each column's `size`. */
+export const ResizableColumns: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const query = useFakeInfiniteQuery({ total: 24 })
+    const [widths, setWidths] = useState<Record<string, number>>({})
+    const sized = useMemo(
+      () =>
+        columns.map((column) => {
+          // TanStack derives a column's id from its accessorKey when none is set.
+          const id = column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined)
+          return id && widths[id] ? { ...column, size: widths[id] } : column
+        }),
+      [widths],
+    )
+    return (
+      <DataTable<Row>
+        ariaLabel="Shipments — resizable"
+        query={query}
+        columns={sized}
+        enableColumnResizing
+        onResizeColumn={({ id, width }) => setWidths((prev) => ({ ...prev, [id]: width }))}
+      />
+    )
+  },
+}