@proteos/ui 0.54.1 → 0.56.0

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

@@ -107,6 +107,14 @@ export type DataTableProps<TRow> = {
   enableColumnRemoval?: boolean
   onReorderColumn?: (params: { id: string; toIndex: number }) => void
   onRemoveColumn?: (id: string) => void
+  /**
+   * Enable a resize handle on each column header's trailing separator.
+   * Widths are controlled: `onResizeColumn` reports the column id and its
+   * new pixel width while dragging; the parent feeds it back through the
+   * column defs' `size`. Each `ColumnDef` must carry a stable `id`.
+   */
+  enableColumnResizing?: boolean
+  onResizeColumn?: (params: { id: string; width: number }) => void
   /**
    * Visual chrome around the table. `panel` (default) wraps the table in a
    * bordered, rounded, soft-shadowed card. `bare` strips that chrome so the
@@ -135,8 +143,10 @@ export type DataTableProps<TRow> = {
    */
   bodyBefore?: ReactNode
   /**
-   * Slot rendered BELOW the body. Used for controls like an Add row button
-   * at slot='end'. Sits inside the scrollable area below the rows.
+   * Trailing row rendered directly below the last row — an Add row control at
+   * slot='end', say. Row-height, edge-to-edge, and sticky to the bottom of
+   * the scroll viewport, so it stays reachable while the end of a long list
+   * is scrolled out of view.
    */
   bodyAfter?: ReactNode
   /**
@@ -181,7 +191,7 @@ type ListItem<TRow> =
 const DEFAULT_ROW_HEIGHT = 32
 
 /** Column id of the leading checkbox column added by `selectionMode`. */
-export const SELECTION_COLUMN_ID = '__select__' 
+export const SELECTION_COLUMN_ID = '__select__'
 
 export function DataTable<TRow>({
   query,
@@ -202,6 +212,8 @@ export function DataTable<TRow>({
   enableColumnRemoval = false,
   onReorderColumn,
   onRemoveColumn,
+  enableColumnResizing = false,
+  onResizeColumn,
   variant = 'panel',
   rowWrapper,
   extraRows,
@@ -457,8 +469,6 @@ export function DataTable<TRow>({
     !query.isLoading && !query.error && tableRowCount === 0 && !query.isFetchingNextPage
   const showInitialLoading = query.isLoading && tableRowCount === 0
   const showError = !!query.error && tableRowCount === 0
-  const showEndMarker =
-    !query.isLoading && !query.isFetchingNextPage && !query.hasNextPage && tableRowCount > 0
 
   const totalSize = virtualizer.getTotalSize()
   const virtualItems = virtualizer.getVirtualItems()
@@ -475,7 +485,13 @@ export function DataTable<TRow>({
       {/* Single both-axes scroll container. Horizontal wheel/trackpad scrolls
           the columns; vertical scrolls the rows. The sticky header pins to the
           top, and any `sticky left-0` gutter column freezes to the left. */}
-      <TableScroller ref={scrollerRef}>
+      <TableScroller
+        ref={scrollerRef}
+        // Scroll padding keeps a row scrolled (or focused) into view clear of
+        // the sticky header and, when present, the sticky trailing row —
+        // otherwise a freshly added last row lands underneath the strip.
+        className={cn('scroll-pt-[36px]', bodyAfter ? 'scroll-pb-8' : undefined)}
+      >
         {/* Content track — owns the horizontal min-width so the header + rows
             scroll horizontally together as one unit. */}
         <div className="flex flex-col" style={{ minWidth: minPanelWidth }}>
@@ -525,6 +541,12 @@ export function DataTable<TRow>({
                     {...(enableColumnRemoval && onRemoveColumn && header.column.id
                       ? { onRemove: () => onRemoveColumn(header.column.id) }
                       : {})}
+                    {...(enableColumnResizing && onResizeColumn && header.column.id
+                      ? {
+                          onResize: (width: number) =>
+                            onResizeColumn({ id: header.column.id, width }),
+                        }
+                      : {})}
                   >
                     {headerNode}
                   </TableHeaderCell>
@@ -585,18 +607,30 @@ export function DataTable<TRow>({
                 </div>
               )}
 
-              {/* Sentinel — visually empty, positioned just above the loader/end
-                  marker so it intersects ~200 px before the bottom. */}
+              {/* Sentinel — visually empty, positioned just above the loader so
+                  it intersects ~200 px before the bottom. */}
               {!showEmpty && (
                 <div ref={sentinelRef} aria-hidden="true" style={{ height: 1, width: '100%' }} />
               )}
 
               {query.isFetchingNextPage ? <LoaderRow /> : null}
-              {showEndMarker ? <EndMarker count={tableRowCount} /> : null}
             </div>
           )}
 
-          {bodyAfter}
+          {bodyAfter ? (
+            // Sticky to the scroller's bottom edge; `bg-bg` covers the rows
+            // sliding underneath. z-[4] — like the sticky header — stays above an
+            // editing row (z-[3]), so an editor scrolled under the strip is
+            // covered rather than drawn over it.
+            <div
+              className={cn(
+                'sticky bottom-0 z-[4] flex items-center h-8 px-0.5',
+                'border-t border-rule-2 bg-bg',
+              )}
+            >
+              {bodyAfter}
+            </div>
+          ) : null}
         </div>
       </TableScroller>
     </Table>
@@ -705,7 +739,7 @@ function DataRow<TRow>({
   )
 }
 
-/* ---------- Loader & end marker ----------------------------------------- */
+/* ---------- Loader ------------------------------------------------------- */
 
 function LoaderRow() {
   return (
@@ -732,17 +766,3 @@ function LoaderRow() {
     </div>
   )
 }
-
-function EndMarker({ count }: { count: number }) {
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-center',
-        'h-8 font-mono text-[10.5px] uppercase tracking-[0.08em]',
-        'text-ink-4',
-      )}
-    >
-      end · {count.toLocaleString()} rows
-    </div>
-  )
-}

package/src/components/field/listbox-check.tsx

@@ -0,0 +1,44 @@
+import { tv, type VariantProps } from 'tailwind-variants'
+
+/* =========================================================================
+   ListboxCheck — the selection box at the head of a multi-select listbox
+   row. Empty box at rest, ink fill with a tick once the row is selected.
+   Reads the row's RAC `data-selected` through the `group` class, so the
+   host ListBoxItem must carry `group`. Shared by MultiSelect and
+   BadgeMultiSelect so both pickers mark selection identically.
+   ========================================================================= */
+
+export const listboxCheckStyles = tv({
+  slots: {
+    box: [
+      'relative inline-flex items-center justify-center shrink-0',
+      'size-[16px] rounded-[3px] border border-ink-4 bg-surface',
+      'transition-[background-color,border-color] duration-150',
+      'group-data-[selected]:bg-ink group-data-[selected]:border-ink',
+    ],
+    tick: [
+      'size-3 text-surface transition-opacity duration-150',
+      'opacity-0 group-data-[selected]:opacity-100',
+    ],
+  },
+})
+
+export type ListboxCheckVariants = VariantProps<typeof listboxCheckStyles>
+
+export function ListboxCheck() {
+  const { box, tick } = listboxCheckStyles()
+  return (
+    <span aria-hidden className={box()}>
+      <svg viewBox="0 0 12 12" className={tick()} aria-hidden>
+        <path
+          d="M2.5 6.25 5 8.75 9.5 3.75"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+      </svg>
+    </span>
+  )
+}

package/src/components/field/use-chip-row-wrap.ts

@@ -0,0 +1,45 @@
+import { type RefObject, useLayoutEffect, useState } from 'react'
+
+/* =========================================================================
+   useChipRowWrap — does a `flex-wrap` row of chips currently need more than
+   one line? Drives the inline cell editors: they stay one row tall while
+   the chips fit, and grow into the two-row pop-out only once they wrap.
+
+   Measured from the children's boxes: a child whose top sits at or below
+   the first child's bottom is on a later line. Wrapping depends on the
+   container's width, not its height, so the answer is the same whether the
+   box is currently short (clipping) or tall. Re-measured when `signature`
+   (the chip identity) changes and whenever the container resizes. `false`
+   without layout (jsdom) and while `isEnabled` is off.
+   ========================================================================= */
+
+export function useChipRowWrap(
+  ref: RefObject<HTMLElement | null>,
+  isEnabled: boolean,
+  signature: string,
+): boolean {
+  const [hasWrapped, setHasWrapped] = useState(false)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `signature` (chip identity) is the re-measure trigger; it is not read inside.
+  useLayoutEffect(() => {
+    if (!isEnabled) return
+    const element = ref.current
+    if (!element) return
+    const measure = () => {
+      const children = Array.from(element.children)
+      const first = children[0]?.getBoundingClientRect()
+      if (!first || first.height === 0) {
+        setHasWrapped(false)
+        return
+      }
+      setHasWrapped(children.some((child) => child.getBoundingClientRect().top >= first.bottom - 1))
+    }
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref, isEnabled, signature])
+
+  return hasWrapped
+}

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

@@ -13,6 +13,7 @@ import {
   fieldMinHeight,
   fieldTextStyles,
 } from '../field/field'
+import { ListboxCheck } from '../field/listbox-check'
 
 /* =========================================================================
    MultiSelect — pick many from a list. Trigger shows selected items as
@@ -180,7 +181,9 @@ export function MultiSelect<T extends Key>({
         placement="bottom start"
         className={cn(
           'w-[var(--trigger-width)]',
-          'rounded-md border border-rule bg-surface p-1',
+          // 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',
@@ -205,6 +208,9 @@ export function MultiSelect<T extends Key>({
         <ListBox
           aria-label={typeof label === 'string' ? label : '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') {
@@ -232,11 +238,10 @@ export function MultiSelect<T extends Key>({
                 'cursor-pointer outline-none select-none',
                 'data-[hovered]:bg-surface-2 data-[hovered]:text-ink',
                 'data-[focused]:bg-surface-2 data-[focused]:text-ink',
-                'data-[selected]:bg-surface-3 data-[selected]:text-ink',
                 'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
               )}
             >
-              <Checkmark />
+              <ListboxCheck />
               <span className="flex-1 truncate">{option.content ?? option.label}</span>
             </ListBoxItem>
           ))}
@@ -301,39 +306,3 @@ function Chip({
     </span>
   )
 }
-
-/* =========================================================================
-   Internal: empty box → indigo tick when the row is selected.
-   ========================================================================= */
-
-function Checkmark() {
-  return (
-    <span
-      aria-hidden
-      className={cn(
-        'relative inline-flex items-center justify-center shrink-0',
-        'size-[16px] rounded-[3px] border border-ink-4 bg-surface',
-        'transition-[background-color,border-color] duration-150',
-        'group-data-[selected]:bg-ink group-data-[selected]:border-ink',
-      )}
-    >
-      <svg
-        viewBox="0 0 12 12"
-        className={cn(
-          'size-3 text-surface transition-opacity duration-150',
-          'opacity-0 group-data-[selected]:opacity-100',
-        )}
-        aria-hidden
-      >
-        <path
-          d="M2.5 6.25 5 8.75 9.5 3.75"
-          stroke="currentColor"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          fill="none"
-        />
-      </svg>
-    </span>
-  )
-}

package/src/components/record-filter/chip-value.tsx

@@ -1,7 +1,7 @@
 import { createContext, type ReactNode, useContext } from 'react'
 import { cn } from '../../lib/cn'
 import { Badge } from '../badge/badge'
-import { arityOf } from './operators'
+import { arityOf, isEnumLike } from './operators'
 import type { ComparisonOperator, FilterField, FilterValue } from './types'
 
 /* =========================================================================
@@ -122,8 +122,9 @@ function ChipItem({
     const custom = effectiveRenderer({ field, operator, value })
     if (custom !== undefined) return <>{custom}</>
   }
-  // Lib default: enum → Badge with variant lookup; other → truncated mono text.
-  if (field.type === 'enum') {
+  // Lib default: enum-like → Badge with variant lookup; other → truncated
+  // mono text.
+  if (isEnumLike(field)) {
     const option = findEnumOption(field, value)
     return (
       <Badge
@@ -169,7 +170,7 @@ export function formatValue(
         ? value.split(',')
         : []
     if (arr.length === 0) return '—'
-    if (field.type === 'enum') {
+    if (isEnumLike(field)) {
       const labels = arr.map((v) => findEnumOption(field, v)?.label ?? v)
       return labels.length <= 2
         ? labels.join(', ')
@@ -184,7 +185,7 @@ export function formatValue(
   // badge below already do this; a single value read as the raw slug, so the
   // same filter said "is technical_decider" or "is any of Technical Decider"
   // depending only on the operator.
-  if (field.type === 'enum') {
+  if (isEnumLike(field)) {
     return findEnumOption(field, String(value))?.label ?? String(value)
   }
   if (field.type === 'number' || field.type === 'integer') {

package/src/components/record-filter/filter-value-input.tsx

@@ -11,7 +11,7 @@ import { Input } from '../input/input'
 import { SegmentedControl } from '../segmented-control/segmented-control'
 import { Select, type SelectOption } from '../select/select'
 import { TagInput } from '../tag-input/tag-input'
-import { arityOf } from './operators'
+import { arityOf, isEnumLike } from './operators'
 import type { ComparisonOperator, FilterField, FilterValue } from './types'
 
 /* =========================================================================
@@ -19,11 +19,11 @@ import type { ComparisonOperator, FilterField, FilterValue } from './types'
    Routes to the right primitive based on `(field.type, operator.arity)`:
 
      arity 0  →  null (no input — for empty / not_empty)
-     arity 'n' (in / not_in)
-       enum   →  BadgeMultiSelect
-       other  →  TagInput (free-form list)
+     arity 'n' (in / not_in / contains_all)
+       enum-like →  BadgeMultiSelect (an enum, or an array of enum items)
+       other     →  TagInput (free-form list)
      arity 1
-       enum     →  Select with Badge in renderItem
+       enum-like →  Select with Badge in renderItem
        boolean  →  SegmentedControl (true / false)
        datetime →  DatePicker
        other    →  Input (text or number)
@@ -130,9 +130,9 @@ export function FilterValueInput({
   }
 
   const leaf = (() => {
-    /* ---------- multi-value (in / not_in) ---------- */
+    /* ---------- multi-value (in / not_in / contains_all) ---------- */
     if (arity === 'n') {
-      if (field.type === 'enum') {
+      if (isEnumLike(field)) {
         return (
           <EnumMultiValue
             field={field}
@@ -163,7 +163,7 @@ export function FilterValueInput({
     }
 
     /* ---------- single value ---------- */
-    if (field.type === 'enum') {
+    if (isEnumLike(field)) {
       return (
         <EnumSingleValue
           field={field}
@@ -356,6 +356,8 @@ function placeholderFor(field: FilterField, operator: ComparisonOperator): strin
   if (field.type === 'number' || field.type === 'integer' || field.type === 'currency') return '0'
   if (operator === 'starts_with') return 'starts with…'
   if (operator === 'ends_with') return 'ends with…'
-  if (operator === 'contains') return 'contains…'
+  if (operator === 'contains') return field.type === 'array' ? 'has…' : 'contains…'
+  if (operator === 'not_contains')
+    return field.type === 'array' ? 'does not have…' : 'does not contain…'
   return 'value'
 }

package/src/components/record-filter/operators.test.ts

@@ -1,6 +1,13 @@
 import { describe, expect, it } from 'vitest'
 
-import { arityOf, defaultValueFor, OPERATORS, operatorById, operatorsForType } from './operators'
+import {
+  arityOf,
+  defaultValueFor,
+  isEnumLike,
+  OPERATORS,
+  operatorById,
+  operatorsForType,
+} from './operators'
 
 describe('operatorsForType', () => {
   it('includes eq/ne for every primitive type', () => {
@@ -36,16 +43,32 @@ describe('operatorsForType', () => {
     expect(ops).not.toContain('gt')
   })
 
-  it('allows in / not_in on strings, numbers, and enums (not datetime/boolean/array)', () => {
+  it('allows in / not_in on strings, numbers, enums and arrays (not datetime/boolean)', () => {
     for (const op of ['in', 'not_in'] as const) {
       const types = new Set(OPERATORS.find((o) => o.id === op)?.types ?? [])
       expect(types.has('string')).toBe(true)
       expect(types.has('number')).toBe(true)
       expect(types.has('integer')).toBe(true)
       expect(types.has('enum')).toBe(true)
+      expect(types.has('array')).toBe(true)
       expect(types.has('datetime')).toBe(false)
       expect(types.has('boolean')).toBe(false)
-      expect(types.has('array')).toBe(false)
+    }
+  })
+
+  it('allows not_contains wherever contains is allowed', () => {
+    expect(OPERATORS.find((o) => o.id === 'not_contains')?.types).toEqual(
+      OPERATORS.find((o) => o.id === 'contains')?.types,
+    )
+    expect(operatorsForType('string').find((o) => o.id === 'not_contains')?.label).toBe(
+      'does not contain',
+    )
+  })
+
+  it('allows contains_all on arrays only', () => {
+    expect(OPERATORS.find((o) => o.id === 'contains_all')?.types).toEqual(['array'])
+    for (const t of ['string', 'number', 'enum', 'contact-address'] as const) {
+      expect(operatorsForType(t).map((o) => o.id)).not.toContain('contains_all')
     }
   })
 
@@ -56,14 +79,32 @@ describe('operatorsForType', () => {
     }
   })
 
-  it('allows contains/empty/not_empty on arrays', () => {
-    const arrayOps = operatorsForType('array').map((o) => o.id)
-    expect(arrayOps).toContain('contains')
-    expect(arrayOps).toContain('empty')
-    expect(arrayOps).toContain('not_empty')
-    // No magnitude/text-shape operators on arrays.
-    expect(arrayOps).not.toContain('gt')
-    expect(arrayOps).not.toContain('starts_with')
+  it('offers exactly the set-membership operators on arrays, positive-first', () => {
+    const arrayOps = operatorsForType('array')
+    expect(arrayOps.map((o) => o.id)).toEqual([
+      'contains',
+      'not_contains',
+      'in',
+      'contains_all',
+      'not_in',
+      'empty',
+      'not_empty',
+    ])
+    // Labelled in the words every CRM uses for membership.
+    expect(arrayOps.map((o) => o.label)).toEqual([
+      'has',
+      'does not have',
+      'has any of',
+      'has all of',
+      'has none of',
+      'is empty',
+      'is not empty',
+    ])
+    // No magnitude / equality / text-shape operators on arrays.
+    const ids = arrayOps.map((o) => o.id)
+    expect(ids).not.toContain('eq')
+    expect(ids).not.toContain('gt')
+    expect(ids).not.toContain('starts_with')
   })
 
   it('allows identity operators on user, not text/numeric shapes', () => {
@@ -90,17 +131,31 @@ describe('arityOf', () => {
     expect(arityOf('empty')).toBe(0)
     expect(arityOf('not_empty')).toBe(0)
   })
-  it("returns 'n' for in/not_in", () => {
+  it("returns 'n' for in/not_in/contains_all", () => {
     expect(arityOf('in')).toBe('n')
     expect(arityOf('not_in')).toBe('n')
+    expect(arityOf('contains_all')).toBe('n')
   })
   it('returns 1 for the rest', () => {
     expect(arityOf('eq')).toBe(1)
     expect(arityOf('contains')).toBe(1)
+    expect(arityOf('not_contains')).toBe(1)
     expect(arityOf('gt')).toBe(1)
   })
 })
 
+describe('isEnumLike', () => {
+  it('is true for an enum and for an array carrying item options', () => {
+    expect(isEnumLike({ type: 'enum', options: [] })).toBe(true)
+    expect(isEnumLike({ type: 'array', options: [{ value: 'a', label: 'A' }] })).toBe(true)
+  })
+  it('is false for a free-text array and for scalars', () => {
+    expect(isEnumLike({ type: 'array' })).toBe(false)
+    expect(isEnumLike({ type: 'array', options: [] })).toBe(false)
+    expect(isEnumLike({ type: 'string' })).toBe(false)
+  })
+})
+
 describe('defaultValueFor', () => {
   it('returns null for arity 0', () => {
     expect(defaultValueFor('string', 0)).toBeNull()

package/src/components/record-filter/operators.ts

@@ -1,5 +1,6 @@
 import type {
   ComparisonOperator,
+  FilterField,
   FilterFieldType,
   FilterValue,
   OperatorArity,
@@ -64,6 +65,7 @@ export const OPERATORS: ReadonlyArray<OperatorDescriptor> = [
       'user',
       'principal',
       'contact-address',
+      'array',
     ],
   },
   {
@@ -80,9 +82,18 @@ export const OPERATORS: ReadonlyArray<OperatorDescriptor> = [
       'user',
       'principal',
       'contact-address',
+      'array',
     ],
   },
   { id: 'contains', label: 'contains', arity: 1, types: ['string', 'array', 'contact-address'] },
+  {
+    id: 'not_contains',
+    label: 'does not contain',
+    arity: 1,
+    types: ['string', 'array', 'contact-address'],
+  },
+  // Array-only: "has every one of these". On a scalar the backend rejects it.
+  { id: 'contains_all', label: 'has all of', arity: 'n', types: ['array'] },
   { id: 'starts_with', label: 'starts with', arity: 1, types: ['string', 'contact-address'] },
   { id: 'ends_with', label: 'ends with', arity: 1, types: ['string', 'contact-address'] },
   {
@@ -148,15 +159,45 @@ const OP_LABEL_OVERRIDES: Partial<
   integer: { gt: 'is greater than', lt: 'is less than', eq: 'equals', ne: 'does not equal' },
   currency: { gt: 'is greater than', lt: 'is less than', eq: 'equals', ne: 'does not equal' },
   datetime: { eq: 'is on', ne: 'is not on', gt: 'is after', lt: 'is before' },
-  array: { contains: 'contains', empty: 'is empty', not_empty: 'is not empty' },
+  // Arrays filter by set membership, in the words every CRM uses for it.
+  array: {
+    contains: 'has',
+    not_contains: 'does not have',
+    in: 'has any of',
+    not_in: 'has none of',
+    contains_all: 'has all of',
+    empty: 'is empty',
+    not_empty: 'is not empty',
+  },
   boolean: { eq: 'is', ne: 'is not' },
 }
 
+/* Per-type picker order where the catalogue's global order reads wrong.
+   Arrays go positive-first, single value before list, so the dropdown reads
+   has / does not have / has any of / has all of / has none of. */
+const OP_ORDER_OVERRIDES: Partial<Record<FilterFieldType, ReadonlyArray<ComparisonOperator>>> = {
+  array: ['contains', 'not_contains', 'in', 'contains_all', 'not_in', 'empty', 'not_empty'],
+}
+
 export function operatorsForType(type: FilterFieldType): ReadonlyArray<OperatorDescriptor> {
-  return OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
+  const ops = OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
     const override = OP_LABEL_OVERRIDES[type]?.[op.id]
     return override ? { ...op, label: override } : op
   })
+  const order = OP_ORDER_OVERRIDES[type]
+  if (!order) return ops
+  return [...ops].sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id))
+}
+
+/**
+ * True when the field's values come from a declared option list — an enum,
+ * or an array whose ITEMS are an enum. The value editor and the chip render
+ * these from `field.options` (Select / BadgeMultiSelect / Badge) rather than
+ * as free text.
+ */
+export function isEnumLike(field: Pick<FilterField, 'type' | 'options'>): boolean {
+  if (field.type === 'enum') return true
+  return field.type === 'array' && (field.options?.length ?? 0) > 0
 }
 
 export function operatorById(id: ComparisonOperator): OperatorDescriptor | undefined {

package/src/components/record-filter/types.ts

@@ -42,7 +42,10 @@ export type FilterField = {
   /** Parent label for breadcrumb in chips, e.g. `'Owner'`. Omitted for top-level. */
   parentLabel?: string
   type: FilterFieldType
-  /** Required when `type === 'enum'`; ignored otherwise. */
+  /** Required when `type === 'enum'`. For `type === 'array'` these are the
+   *  ITEM enum's values (an array of enum items), so the membership editors
+   *  and chips pick from the same list the record editor does. Ignored
+   *  otherwise. */
   options?: ReadonlyArray<FilterFieldOption>
   /** Hint for `<Input type=…>`. Defaults derived from `type`. */
   inputType?: 'text' | 'number' | 'date' | 'datetime' | 'email'
@@ -111,6 +114,8 @@ export type ComparisonOperator =
   | 'in'
   | 'not_in'
   | 'contains'
+  | 'not_contains'
+  | 'contains_all'
   | 'starts_with'
   | 'ends_with'
   | 'empty'