@proteos/ui 0.55.0 → 0.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.55.0",
+  "version": "0.56.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -56,7 +56,7 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
     "thinking-orbs": "^0.3.1",
-    "@proteos/sdk": "0.55.0"
+    "@proteos/sdk": "0.56.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",

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'