@proteos/ui 0.46.0 → 0.48.0

package/src/components/record-filter/record-filter.test.tsx

@@ -5,6 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { RecordFilterBuilderPanel } from './record-filter-builder-panel'
 import { RecordFilterButton } from './record-filter-button'
+import { formatValue } from './chip-value'
+import { FIELD_LABEL_SEPARATOR, joinFieldLabel } from './field-label'
 import { RecordFilterChips } from './record-filter-chips'
 import { __resetShowDetailsStores } from './show-details-store'
 import type { FilterField, FilterGroup } from './types'
@@ -435,3 +437,87 @@ describe('RecordFilterChips — nested groups', () => {
     expect(screen.getByText(/· 2/)).toBeInTheDocument()
   })
 })
+
+/* The chip rail composes its own breadcrumb from `parentLabel`, while the
+   consumer composes `label` when it builds the field list. Both must use
+   FIELD_LABEL_SEPARATOR, or one chip reads "Company · Name" beside another
+   reading "Company / Name". */
+describe('RecordFilterChips — breadcrumb separator', () => {
+  const nestedFields: FilterField[] = [
+    {
+      path: 'billing_address.city',
+      label: `Billing Address${FIELD_LABEL_SEPARATOR}City`,
+      shortLabel: 'City',
+      parentLabel: 'Billing Address',
+      type: 'string',
+    },
+  ]
+
+  it('separates the parent from the leaf with a middle dot', () => {
+    // Chips only render when expanded; the store defaults to collapsed.
+    window.localStorage.setItem('rf.showDetails', '1')
+    render(
+      <RecordFilterChips
+        fields={nestedFields}
+        filter={{
+          logicalOperator: 'and',
+          elements: [{ field: 'billing_address.city', operator: 'eq', value: 'Berlin' }],
+        }}
+        onChange={() => undefined}
+      />,
+    )
+
+    expect(screen.getByText('Billing Address', { exact: false }).textContent).toContain(
+      FIELD_LABEL_SEPARATOR,
+    )
+    expect(document.body.textContent).not.toContain('Billing Address / ')
+  })
+
+  it('exposes the separator as the middle dot', () => {
+    expect(FIELD_LABEL_SEPARATOR).toBe(' · ')
+    expect(joinFieldLabel('Company', undefined, 'Name')).toBe('Company · Name')
+  })
+})
+
+/* An enum stores a system value and displays a declared label. Both the
+   multi-value branch and the chip badge already resolved it; a single value
+   did not, so the same filter read "is technical_decider" or "is any of
+   Technical Decider" depending only on the operator. */
+describe('formatValue — enum labels', () => {
+  const roleField: FilterField = {
+    path: 'buying_role',
+    label: 'Buying Role',
+    shortLabel: 'Buying Role',
+    type: 'enum',
+    options: [
+      { value: 'technical_decider', label: 'Technical Decider' },
+      { value: 'economic_decider', label: 'Economic Decider' },
+    ],
+  }
+
+  it('renders the label for a single value', () => {
+    expect(formatValue(roleField, 'eq', 'technical_decider')).toBe('Technical Decider')
+    expect(formatValue(roleField, 'ne', 'economic_decider')).toBe('Economic Decider')
+  })
+
+  it('renders labels for a multi-value operator', () => {
+    expect(formatValue(roleField, 'in', ['technical_decider', 'economic_decider'])).toBe(
+      'Technical Decider, Economic Decider',
+    )
+  })
+
+  // A value the entity no longer declares still has to render as something.
+  it('falls back to the stored value when no option matches', () => {
+    expect(formatValue(roleField, 'eq', 'retired_role')).toBe('retired_role')
+  })
+
+  it('leaves non-enum fields alone', () => {
+    const nameField: FilterField = {
+      path: 'name',
+      label: 'Name',
+      shortLabel: 'Name',
+      type: 'string',
+    }
+    expect(formatValue(nameField, 'eq', 'technical_decider')).toBe('technical_decider')
+  })
+})

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

@@ -34,7 +34,8 @@ export type FilterFieldOption = {
 export type FilterField = {
   /** Dot-path to the attribute, e.g. `'owner.email'`. Stable identifier. */
   path: string
-  /** Full nested label, e.g. `'Owner / Email'`. Used in pickers. */
+  /** Full nested label, e.g. `'Owner · Email'` — parts joined with
+   *  `FIELD_LABEL_SEPARATOR`. Used in pickers. */
   label: string
   /** Leaf label only, e.g. `'Email'`. Used in chips. */
   shortLabel: string

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './components/message-composer'
 export * from './components/modal'
 export * from './components/multi-select'
 export * from './components/nav'
+export * from './components/orb'
 export * from './components/popover'
 export * from './components/progress-bar'
 export * from './components/radio-group'

package/src/styles.css

@@ -122,6 +122,7 @@
   /* Status pop — one-shot scale+fade entrance for the large success/error
      status icons. Soft ease, no overshoot (nothing bounces). */
   --animate-status-pop: status-pop var(--duration-slow) var(--ease-out-soft) both;
+
 }
 
 @keyframes indeterminate-progress {

package/src/test/setup.ts

@@ -4,6 +4,36 @@ import { afterEach, expect } from 'vitest'
 
 expect.extend(matchers)
 
+// jsdom implements neither Element.scrollTo nor IntersectionObserver, both of
+// which the virtualized DataTable calls on mount. Stub them so scrolling
+// components can be rendered in tests at all.
+if (!Element.prototype.scrollTo) {
+  Element.prototype.scrollTo = () => {}
+}
+if (!('ResizeObserver' in globalThis)) {
+  class NoopResizeObserver implements ResizeObserver {
+    disconnect() {}
+    observe() {}
+    unobserve() {}
+  }
+  globalThis.ResizeObserver = NoopResizeObserver as unknown as typeof ResizeObserver
+}
+if (!('IntersectionObserver' in globalThis)) {
+  class NoopIntersectionObserver implements IntersectionObserver {
+    readonly root = null
+    readonly rootMargin = ''
+    readonly thresholds: ReadonlyArray<number> = []
+    disconnect() {}
+    observe() {}
+    unobserve() {}
+    takeRecords(): IntersectionObserverEntry[] {
+      return []
+    }
+  }
+  globalThis.IntersectionObserver =
+    NoopIntersectionObserver as unknown as typeof IntersectionObserver
+}
+
 afterEach(() => {
   cleanup()
 })