@object-ui/fields 17.3.0 → 17.5.0

package/src/__tests__/formatCurrency.minorUnits.test.tsx

@@ -0,0 +1,221 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectui#4361 — currency formatting overrode each currency's own ISO 4217
+ * fraction-digit convention.
+ *
+ * `formatCurrency` picked its width from the VALUE's wholeness alone
+ * (`isWhole ? 0 : 2`) and handed that literal `2` to `Intl`, which overrides
+ * what `Intl` already knows about the currency being rendered. A yen amount
+ * was printed with cents the currency does not have (`¥1,234.50`) and a dinar
+ * amount with one digit fewer than it does have (`KWD 1.50`).
+ *
+ * The fix derives the currency's own digit count first
+ * (`Intl.NumberFormat(undefined, { style: 'currency', currency })
+ *    .resolvedOptions().maximumFractionDigits`)
+ * and switches wholeness against THAT instead of the literal 2. Two halves,
+ * both pinned here:
+ *
+ *  1. **A fractional amount takes the currency's own width** — the defect.
+ *     JPY -> 0, USD/EUR/CNY -> 2, KWD/BHD -> 3.
+ *  2. **A whole amount still drops the fraction entirely** — the Salesforce
+ *     convention `formatCurrency`'s doc comment states, that objectui#4033
+ *     pinned and objectui#4332 / PR #4362 re-pinned. It is not retired here,
+ *     it is EXTENDED consistently: `KWD 1` renders `KWD 1`, not the
+ *     `KWD 1.000` a bare `Intl` default would give. Dropping both bounds and
+ *     letting `Intl` decide would have fixed half 1 by breaking this half, so
+ *     the whole-amount cases below are controls, not decorations.
+ *
+ * The USD cases are the acceptance evidence for "byte-identical to today":
+ * the #4033 and #4332/#4362 pins pass UNCHANGED, and the ones repeated here
+ * are the same assertions run against the new derivation.
+ *
+ * Every expected string below was MEASURED against node 22 with full ICU
+ * (icu 78.2) rather than reasoned about; where ICU's spacing or symbol choice
+ * is what varies (and not the digit count this card is about), the assertion
+ * is a regex on the digits.
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { LocalizationProvider } from '@object-ui/i18n';
+import {
+  formatCurrency,
+  formatCompactCurrency,
+  CurrencyCellRenderer,
+} from '../index';
+import { currencyFractionDigits } from '../currency';
+
+/**
+ * ICU separates a currency CODE from the amount with U+00A0 (`KWD` + NBSP +
+ * `1.500`), while a currency SYMBOL is written flush against it (`$1,234.50`).
+ * Normalizing the NBSP keeps these pins about the DIGIT COUNT — which is what
+ * this card is about — rather than about ICU's spacing choices, the same reason
+ * objectui#4332's de-DE pin matched its separator loosely.
+ *
+ * Written as an escape rather than a pasted byte, per the repo's byte
+ * discipline: a raw NBSP in source is invisible to every reader and unfindable
+ * by grep in the spelling you would search for.
+ */
+const normalizeNbsp = (s: string) => s.replace(/\u00a0/g, ' ');
+
+describe('the environment this card is measured in', () => {
+  it('has full ICU — a small-ICU build would make every pin below meaningless', () => {
+    // Written as an assertion rather than a comment: with a reduced ICU data
+    // set the currency digit table is not present and JPY/KWD would resolve to
+    // 2, so the fix would look correct while rendering the same wrong output.
+    // If this one fails, nothing else in this file is evidence of anything.
+    expect(currencyFractionDigits('JPY')).toBe(0);
+    expect(currencyFractionDigits('KWD')).toBe(3);
+    expect(currencyFractionDigits('USD')).toBe(2);
+  });
+});
+
+describe('formatCurrency — a fractional amount takes the CURRENCY\'s width (objectui#4361)', () => {
+  it('the card\'s two fixtures render as ISO 4217 says they should', () => {
+    // Before: `¥1,234.50` — cents on a currency that has none.
+    expect(formatCurrency(1234.5, 'JPY', 'en-US')).toBe('¥1,235');
+    // Before: `KWD 1.50` — one digit short of the three a dinar has.
+    expect(normalizeNbsp(formatCurrency(1.5, 'KWD', 'en-US'))).toBe('KWD 1.500');
+  });
+
+  it.each([
+    // 0-digit currencies: the fraction is rounded away, not truncated.
+    ['JPY', 1234.5, '¥1,235'],
+    ['CLP', 1234.5, 'CLP 1,235'],
+    ['ISK', 99.5, 'ISK 100'],
+    // 3-digit currencies: the third digit is real and now survives.
+    ['KWD', 1.5, 'KWD 1.500'],
+    ['BHD', 2.5, 'BHD 2.500'],
+    ['KWD', 1234.5678, 'KWD 1,234.568'],
+    // 2-digit currencies: unchanged, by construction.
+    ['USD', 1234.5, '$1,234.50'],
+    ['EUR', 1234.5, '€1,234.50'],
+  ])('%s %s renders %s', (currency, value, expected) => {
+    expect(normalizeNbsp(formatCurrency(value as number, currency as string, 'en-US'))).toBe(
+      expected as string,
+    );
+  });
+
+  it('a 0-digit currency rounds the amount, it does not drop the digits', () => {
+    // `1234.5` is not `1234`. Rounding is Intl's, and half-up here: the point
+    // of the pin is that the value is not silently floored.
+    expect(formatCurrency(1234.4, 'JPY', 'en-US')).toBe('¥1,234');
+    expect(formatCurrency(1234.5, 'JPY', 'en-US')).toBe('¥1,235');
+  });
+});
+
+describe('formatCurrency — CONTROL: the whole-number convention is extended, not retired', () => {
+  it.each([
+    // Salesforce convention, per currency: a whole amount shows no fraction.
+    ['USD', 1234, '$1,234'],
+    ['USD', 0, '$0'],
+    ['EUR', 5000000, '€5,000,000'],
+    // 3-digit currency: a bare `Intl` default would print `KWD 1.000` here.
+    // The convention survives the fix and reaches currencies it never met.
+    ['KWD', 1, 'KWD 1'],
+    ['BHD', 250, 'BHD 250'],
+    // 0-digit currency: both halves of the switch agree at 0, so a whole yen
+    // amount is the one case that was already right and must stay right.
+    ['JPY', 1234, '¥1,234'],
+  ])('a whole %s amount drops the fraction: %s', (currency, value, expected) => {
+    expect(normalizeNbsp(formatCurrency(value as number, currency as string, 'en-US'))).toBe(
+      expected as string,
+    );
+  });
+
+  it('a non-finite amount is not "whole" and still falls through unchanged', () => {
+    expect(formatCurrency(Number.NaN, 'JPY', 'en-US')).toBe('¥NaN');
+  });
+});
+
+describe('formatCurrency — CONTROL: the branches with no currency to derive from', () => {
+  it('the no-currency branch keeps the literal 2 — there is nothing to derive', () => {
+    // Deliberate: with no ISO code in hand there is no convention to follow,
+    // so this branch keeps the historical width. Unchanged by this card.
+    expect(formatCurrency(1234.5, undefined, 'en-US')).toBe('1,234.50');
+    expect(formatCurrency(5000000, undefined, 'en-US')).toBe('5,000,000');
+  });
+
+  it('the bad-currency fallback is byte-identical to before the fix', () => {
+    // The probe throws `RangeError: Invalid currency code` for a non-ISO code
+    // exactly as `Intl` does, so it must NOT be allowed to escape and change
+    // this fallback's width. It falls back to 2 and `formatDisplayNumber`'s own
+    // throw then produces the same string objectui#4332 pinned.
+    expect(formatCurrency(1234.5, 'NOT_A_CODE', 'en-US')).toBe('NOT_A_CODE 1234.50');
+  });
+
+  it('an unknown but well-formed code resolves to 2 without throwing', () => {
+    // `ZZZ` is not in the CLDR digit table; ICU answers 2 for anything it does
+    // not know, which is the right default and needs no special-casing here.
+    expect(currencyFractionDigits('ZZZ')).toBe(2);
+    expect(normalizeNbsp(formatCurrency(1.5, 'ZZZ', 'en-US'))).toBe('ZZZ 1.50');
+  });
+
+  it('formatCompactCurrency is a different function and is untouched', () => {
+    // Compact notation has its own `maximumFractionDigits: 1` policy; this card
+    // does not reach it. `¥1.2K` for JPY is compact's answer, not ISO 4217's.
+    expect(formatCompactCurrency(1234.5, 'USD', 'en-US')).toBe('$1.2K');
+    expect(formatCompactCurrency(1234.5, 'JPY', 'en-US')).toBe('¥1.2K');
+  });
+});
+
+describe('formatCurrency — the display-locale path (a 0-digit and a 3-digit currency)', () => {
+  it('a 0-digit currency in its own locale', () => {
+    // ja-JP spells the symbol with the FULLWIDTH yen sign, en-US with the
+    // ordinary one; either is ICU's business. The digit count is this card's.
+    expect(formatCurrency(1234.5, 'JPY', 'ja-JP')).toMatch(/^[¥￥]1,235$/);
+  });
+
+  it('a 3-digit currency in a comma-decimal locale', () => {
+    // de-DE: dot grouping, comma decimal mark, trailing code. Matched loosely
+    // on the separator so an ICU spacing change cannot fail the digits.
+    expect(formatCurrency(1.5, 'KWD', 'de-DE')).toMatch(/^1,500\s*KWD$/);
+    expect(formatCurrency(1234.5, 'JPY', 'de-DE')).toMatch(/^1\.235\s*¥$/);
+  });
+
+  it('CONTROL: a 2-digit currency in the same locales is unchanged (objectui#4033)', () => {
+    expect(formatCurrency(1234.5, 'EUR', 'de-DE')).toMatch(/^1\.234,50\s*€$/);
+    expect(formatCurrency(1234.5, 'CNY', 'zh-CN')).toBe('¥1,234.50');
+  });
+});
+
+describe('CurrencyCellRenderer — the user-visible surface (objectui#4361)', () => {
+  const renderCurrency = (value: unknown, field: Record<string, unknown>, locale?: string, tenantCurrency?: string) =>
+    render(
+      <LocalizationProvider value={{ locale, currency: tenantCurrency }}>
+        <CurrencyCellRenderer value={value as any} field={{ type: 'currency', ...field } as any} />
+      </LocalizationProvider>,
+    );
+
+  it('a JPY grid cell shows no cents', () => {
+    renderCurrency(1234.5, { currency: 'JPY' }, 'en-US');
+    expect(screen.getByText('¥1,235')).toBeInTheDocument();
+  });
+
+  it('a KWD grid cell shows all three fils digits', () => {
+    renderCurrency(1.5, { currency: 'KWD' }, 'en-US');
+    expect(screen.getByText('KWD 1.500')).toBeInTheDocument();
+  });
+
+  it('the TENANT default currency reaches the same derivation (ADR-0053)', () => {
+    // `resolveFieldCurrency` falls through field -> currencyConfig -> tenant
+    // default, and the card's reachability rests on that third step: a JPY
+    // tenant with a currency field that declares nothing.
+    renderCurrency(1234.5, {}, 'en-US', 'JPY');
+    expect(screen.getByText('¥1,235')).toBeInTheDocument();
+  });
+
+  it('CONTROL: a USD grid cell is byte-identical to objectui#4332', () => {
+    renderCurrency(1234.5, { currency: 'USD' }, 'en-US');
+    expect(screen.getByText('$1,234.50')).toBeInTheDocument();
+  });
+});

package/src/__tests__/group-labelling-declaration.test.ts

@@ -0,0 +1,148 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * The group-labelling DECLARATION, at the registration boundary (objectui#3961).
+ *
+ * A widget whose labelled surface is not a labelable HTML element cannot be
+ * reached by a host's `<label for>` — the association has to go by IDREF
+ * (`aria-labelledby`). Which widgets those are is a fact only the widget package
+ * knows, so it is DECLARED (`ComponentMeta.labelling`) rather than guessed by the
+ * form renderer from whatever DOM a widget happens to render.
+ *
+ * This file pins the declaration itself, separately from the rendered outcome
+ * (`composite-group-label-e2e.test.tsx`), because the two can fail apart:
+ *
+ *   • declared but not rendered → the widget's container never answers with a
+ *     role, so the name lands on a bare `div` (the e2e file catches that);
+ *   • rendered but not declared → the host keeps emitting `for`, the widget never
+ *     receives an `aria-labelledby`, and the group semantics are dead code. THIS
+ *     file is what fails then — an omission from the set is otherwise invisible,
+ *     since a missing declaration degrades silently to the single-control path.
+ *
+ * Nothing renders here, so `registerField`'s `React.lazy` wrapper is never
+ * resolved: this reads metadata only.
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+import { registerAllFields, mapFieldTypeToFormType } from '../index';
+
+/**
+ * Every field type whose host label must be associated by IDREF. Two shapes, one
+ * declaration — see `FIELD_TYPES_GROUP_LABELLED` in `../index`:
+ * real composites, plus `file`, whose single control is a `div[role="button"]`.
+ *
+ * `multiselect` (objectui#3975) is the seventh, added after #3961 shipped: its
+ * chip row is the same wrapper `div` holding the host id that `checkboxes` had.
+ * It is listed here rather than left to the e2e file alone because the omission
+ * of a declaration is exactly the failure that degrades silently.
+ */
+const GROUP_LABELLED = [
+  'address',
+  'geolocation',
+  'checkboxes',
+  'radio',
+  'rating',
+  'file',
+  'multiselect',
+] as const;
+
+/**
+ * Single-control widgets: the host's `<label for>` reaches a real labelable
+ * element, so they must NOT be declared — that is the default path, and a stray
+ * `labelling: 'group'` here would take a working `for` association away from a
+ * control that needs it and hand it an `aria-labelledby` its markup ignores.
+ */
+const CONTROL_LABELLED = [
+  'text',
+  'textarea',
+  'number',
+  'boolean',
+  'date',
+  'datetime',
+  'email',
+  'phone',
+  'url',
+  'currency',
+  'percent',
+  'password',
+  'tags',
+  'color',
+  'code',
+  'user',
+  'lookup',
+  'select',
+] as const;
+
+beforeAll(() => {
+  registerAllFields();
+});
+
+describe('field widgets declare how their label must be associated (objectui#3961)', () => {
+  it.each(GROUP_LABELLED)('%s declares labelling: "group"', (type) => {
+    expect(ComponentRegistry.getMeta(type, 'field')?.labelling).toBe('group');
+  });
+
+  it.each(CONTROL_LABELLED)('%s leaves labelling undeclared (⇒ "control")', (type) => {
+    // Absent, not `'control'`: one spelling of the default, and the form
+    // renderer reads any non-`'group'` value as the single-control path.
+    expect(ComponentRegistry.getMeta(type, 'field')?.labelling).toBeUndefined();
+  });
+
+  it('declares group labelling for exactly the audited set — no more', () => {
+    // A widget added to `fieldWidgetMap` later inherits the single-control path,
+    // which is the safe default; if it is in fact a composite, the e2e pins
+    // (objectui#3952's "every label resolves to a real control") go red rather
+    // than this list quietly growing. This assertion is the other direction: it
+    // fails if someone declares a widget `group` without an audited group
+    // container to carry the name.
+    const declared = ComponentRegistry.getKnownTypes()
+      .filter((key) => key.startsWith('field:'))
+      .filter((key) => ComponentRegistry.getMeta(key.slice('field:'.length), 'field')?.labelling === 'group')
+      .map((key) => key.slice('field:'.length))
+      .sort();
+
+    expect(declared).toEqual([...GROUP_LABELLED].sort());
+  });
+});
+
+/**
+ * The join between the two halves (objectui#3986). The declaration above is
+ * per-WIDGET; a form asks for a widget by the id its producer emitted. So the
+ * declaration only reaches the right widget if the producer names the widget that
+ * will actually render — and for `select` that depends on `multiple`, not on the
+ * type string alone.
+ *
+ * Asserting the pair here, rather than in either half alone, is what makes the
+ * failure visible: `mapFieldTypeToFormType`'s own test cannot know what
+ * `labelling` the id it returns carries, and the declaration test cannot know
+ * which id a `multiple: true` select resolves to. The gap between those two blind
+ * spots is exactly where this bug lived.
+ */
+describe('the widget id the object form emits carries the right declaration (objectui#3986)', () => {
+  const labellingOf = (formType: string) =>
+    ComponentRegistry.getMeta(formType.replace(/^field:/, ''), 'field')?.labelling;
+
+  it('select + multiple resolves to a widget declared `group`', () => {
+    // Before the producer fix this resolved to `field:select`, whose declaration
+    // is (correctly) absent — so the host kept emitting a `for` at the chip row's
+    // wrapper `div`, and the visible label named nothing.
+    const formType = mapFieldTypeToFormType('select', { multiple: true });
+    expect(formType).toBe('field:multiselect');
+    expect(labellingOf(formType)).toBe('group');
+  });
+
+  it('a single-value select still resolves to an UNDECLARED widget', () => {
+    // The guard direction. `select`'s trigger is a labelable
+    // `button[role=combobox]`; declaring it `group` would strip a working `for`.
+    const formType = mapFieldTypeToFormType('select');
+    expect(formType).toBe('field:select');
+    expect(labellingOf(formType)).toBeUndefined();
+  });
+});

package/src/__tests__/lookupCellRecordLink.test.tsx

@@ -0,0 +1,171 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectui#4336 — a lookup value rendered read-only was plain text: the record
+ * detail page showed `TYG1WX20260812001001` with a copy button and no way to
+ * reach the referenced work order, and the related list's lookup columns had
+ * the same dead cells (the reporter's own check: no `<a>` anywhere over the
+ * value, every `href` null).
+ *
+ * `LookupCellRenderer` is the ONE cell renderer both surfaces resolve through
+ * (`DetailSection` and `RelatedList` each call `getCellRenderer('lookup')`), so
+ * the link belongs here — same path, both halves.
+ *
+ * The href is NOT assembled here. This package has no router and no idea what
+ * an app's record route looks like; the host that owns record URLs publishes
+ * them through `RelatedRecordActionsContext` (`recordHref` / `openRecord`),
+ * which is the same builder the related list's row navigation already uses. No
+ * host → no link, and the value renders exactly as it did before.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+import { LookupCellRenderer } from '../index';
+import { RelatedRecordActionsProvider } from '@object-ui/react';
+
+/** The reporter's shape: `$expand`-ed lookup value (display name + record id). */
+const WORK_ORDER = { id: 'wo-1', name: 'TYG1WX20260812001001' };
+const FIELD = { type: 'lookup', reference_to: 'mtc_work_order' } as any;
+
+/** A host that can route to records, mirroring the console bridge's shape. */
+function makeHost(overrides: Record<string, unknown> = {}) {
+  return {
+    resolve: () => ({}),
+    recordHref: (objectName: string, recordId: string | number) =>
+      `/apps/demo/${objectName}/record/${encodeURIComponent(String(recordId))}`,
+    openRecord: vi.fn(),
+    ...overrides,
+  } as any;
+}
+
+function renderWithHost(node: React.ReactElement, host: any = makeHost()) {
+  return render(
+    <RelatedRecordActionsProvider value={host}>{node}</RelatedRecordActionsProvider>,
+  );
+}
+
+describe('LookupCellRenderer — the value links to the referenced record (#4336)', () => {
+  it('expanded value: renders an anchor at the host-built record href', () => {
+    const { container } = renderWithHost(
+      <LookupCellRenderer value={WORK_ORDER} field={FIELD} />,
+    );
+
+    const anchor = container.querySelector('a');
+    expect(anchor).not.toBeNull();
+    expect(anchor).toHaveAttribute('href', '/apps/demo/mtc_work_order/record/wo-1');
+    // Display-name resolution is untouched — the anchor carries the same text.
+    expect(anchor).toHaveTextContent('TYG1WX20260812001001');
+  });
+
+  it('primitive id value: links through the same host builder', () => {
+    const { container } = renderWithHost(
+      <LookupCellRenderer
+        value="wo-2"
+        field={{ ...FIELD, options: [{ value: 'wo-2', label: 'TYG1WX20260812001002' }] }}
+      />,
+    );
+
+    const anchor = container.querySelector('a');
+    expect(anchor).toHaveAttribute('href', '/apps/demo/mtc_work_order/record/wo-2');
+    expect(anchor).toHaveTextContent('TYG1WX20260812001002');
+  });
+
+  it('multi-value: each referenced record gets its own anchor', () => {
+    const { container } = renderWithHost(
+      <LookupCellRenderer
+        value={[WORK_ORDER, { id: 'wo-3', name: 'TYG1WX20260812001003' }]}
+        field={FIELD}
+      />,
+    );
+
+    const hrefs = Array.from(container.querySelectorAll('a')).map((a) => a.getAttribute('href'));
+    expect(hrefs).toEqual([
+      '/apps/demo/mtc_work_order/record/wo-1',
+      '/apps/demo/mtc_work_order/record/wo-3',
+    ]);
+  });
+
+  it('plain click navigates through the host (SPA) instead of reloading', () => {
+    const host = makeHost();
+    const rowClick = vi.fn();
+    const { container } = render(
+      <RelatedRecordActionsProvider value={host}>
+        {/* The surfaces around this cell carry their own click handlers — the
+            detail row copies the value, a related-list row opens the row's own
+            record. Activating the link must do neither. */}
+        <div onClick={rowClick}>
+          <LookupCellRenderer value={WORK_ORDER} field={FIELD} />
+        </div>
+      </RelatedRecordActionsProvider>,
+    );
+
+    const anchor = container.querySelector('a')!;
+    const event = new MouseEvent('click', { bubbles: true, cancelable: true, button: 0 });
+    fireEvent(anchor, event);
+
+    expect(host.openRecord).toHaveBeenCalledWith('mtc_work_order', 'wo-1');
+    expect(event.defaultPrevented).toBe(true);
+    expect(rowClick).not.toHaveBeenCalled();
+  });
+
+  it('modifier click keeps the browser default (open in a new tab)', () => {
+    const host = makeHost();
+    const { container } = renderWithHost(
+      <LookupCellRenderer value={WORK_ORDER} field={FIELD} />,
+      host,
+    );
+
+    const anchor = container.querySelector('a')!;
+    const event = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      button: 0,
+      metaKey: true,
+    });
+    fireEvent(anchor, event);
+
+    expect(host.openRecord).not.toHaveBeenCalled();
+    expect(event.defaultPrevented).toBe(false);
+  });
+});
+
+describe('LookupCellRenderer — must-not-change (#4336)', () => {
+  it('no host: renders exactly as before, with no anchor', () => {
+    const { container } = render(<LookupCellRenderer value={WORK_ORDER} field={FIELD} />);
+
+    expect(container.querySelector('a')).toBeNull();
+    expect(screen.getByText('TYG1WX20260812001001')).toBeInTheDocument();
+  });
+
+  it('host cannot route to the target object: no anchor, same text', () => {
+    const { container } = renderWithHost(
+      <LookupCellRenderer value={WORK_ORDER} field={FIELD} />,
+      makeHost({ recordHref: () => null }),
+    );
+
+    expect(container.querySelector('a')).toBeNull();
+    expect(screen.getByText('TYG1WX20260812001001')).toBeInTheDocument();
+  });
+
+  it('no reference target declared: no anchor', () => {
+    const { container } = renderWithHost(
+      <LookupCellRenderer value={WORK_ORDER} field={{ type: 'lookup' } as any} />,
+    );
+
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('empty value: the placeholder stays a placeholder — no empty link', () => {
+    const { container } = renderWithHost(<LookupCellRenderer value={null} field={FIELD} />);
+
+    expect(container.querySelector('a')).toBeNull();
+  });
+});

package/src/__tests__/percent-cell-vs-measure-4576.test.ts

@@ -0,0 +1,115 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectui#4576, asserted where the two surfaces can actually be compared.
+ *
+ * The card's complaint is a CROSS-PACKAGE one: the same stored number renders
+ * `1.234,5 %` through `formatPercent` (this package, the list cell) and
+ * `1.234,5%` through `formatMeasure` (`@object-ui/core`, the dashboard measure).
+ * Neither package's own suite can see that — `core` sits below this one and
+ * cannot import `formatPercent` — so the agreement is pinned here, the one
+ * place both are in scope.
+ *
+ * This file adds no implementation. `formatPercent` was untouched by #4576; it
+ * has rendered through `Intl` since #4553 / PR #4565 and was the SIDE the measure
+ * formatter moved onto.
+ *
+ * ── objectui#4590 ──
+ * The last case in this file was a NOT-a-defect pin recording that the two
+ * surfaces still disagreed at rounding TIES. #4590 closed that at the
+ * `formatPercent` end (it now renders percentage points directly, through the
+ * same `style: 'percentPoints'` the measure uses), so that pin is now an
+ * AGREEMENT pin. It is declared in place, at the case itself.
+ *
+ * ── PREDICTIONS, written before the run ──
+ * RED before the fix: every locale whose percent convention has a space or a
+ * different sign — de, fr, es, ru, tr, ar. `formatMeasure` returned a literal
+ * '%' with no space, `formatPercent` returned the locale's convention.
+ * GREEN on both sides: en-US, ja-JP, zh-CN, whose convention is a bare
+ * trailing '%' — the must-not-change half, and the reason this was invisible in
+ * an English session for three cards running.
+ *
+ * Runner measured: node v22.22.2, ICU 78.2, machine locale en-US.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { formatMeasure } from '@object-ui/core';
+import { formatPercent } from '../index';
+
+/**
+ * Strip the digits out of a rendered percentage, leaving only the CONVENTION —
+ * the sign, its position and any separator before it. Comparing conventions
+ * rather than whole strings is deliberate: the two formatters are reached with
+ * different scaling inputs and different decimal widths, and it is the
+ * convention, not the digits, that #4576 is about.
+ */
+function convention(rendered: string): string {
+  return rendered.replace(/[\d]/gu, '#').replace(/#+/gu, '#');
+}
+
+describe('a percent renders under ONE convention in a cell and in a measure (#4576)', () => {
+  it.each([
+    ['de-DE'],
+    ['fr-FR'],
+    ['es-ES'],
+    ['ru-RU'],
+    ['tr-TR'],
+    ['ar-EG'],
+    // must-not-change half — no space in the convention, identical before and after
+    ['en-US'],
+    ['ja-JP'],
+    ['zh-CN'],
+  ])('%s renders the same percent convention on both surfaces', (locale) => {
+    // The same underlying value on both paths: `formatPercent` takes the STORED
+    // value and scales it through `percentDisplayValue`; `formatMeasure` is
+    // told the column is already in whole percentage points.
+    const cell = formatPercent(0.805, 1, locale);
+    const measure = formatMeasure(80.5, '0.0%', undefined, 'whole', locale);
+    expect(convention(measure)).toBe(convention(cell));
+  });
+
+  it('the German case the card was filed for, spelled out', () => {
+    // Both `1.234,5` followed by U+00A0 and the sign. Before #4576 the measure
+    // had no space.
+    expect(formatPercent(1234.5, 1, 'de-DE')).toBe('1.234,5\u00a0%');
+    expect(formatMeasure(1234.5, '0.0%', undefined, 'whole', 'de-DE')).toBe('1.234,5\u00a0%');
+  });
+
+  it('MUST NOT CHANGE: English was always identical on both paths, and stays so', () => {
+    expect(formatPercent(1234.5, 1, 'en-US')).toBe('1,234.5%');
+    expect(formatMeasure(1234.5, '0.0%', undefined, 'whole', 'en-US')).toBe('1,234.5%');
+  });
+
+  it('AGREEMENT pin — the two now round ties the same way (was NOT-a-defect, closed by #4590)', () => {
+    // ── PIN MOVED (objectui#4590) ──
+    // This case was a NOT-a-defect pin: it asserted the two surfaces DISAGREED
+    // at rounding ties, recorded honestly rather than omitted, and said the gap
+    // was #4565's residue rather than #4576's business. #4590 closed it at the
+    // `formatPercent` end, so the pin flips from recording a divergence to
+    // asserting the agreement.
+    //
+    // Before:  formatPercent(1.005, 2, 'en-US')  ->  '1.00%'   (the artefact)
+    //          formatMeasure(1.005, …)           ->  '1.01%'   (the faithful one)
+    // After:   both -> '1.01%'.
+    //
+    // The cause was `formatPercent` dividing by 100 so `Intl`'s
+    // `style: 'percent'` could multiply back — lossy at ties, because the
+    // quotient's shortest decimal representation is not the authored one.
+    // `formatMeasure` had already moved onto `style: 'percentPoints'` in #4576;
+    // the cell now renders through the same option, so there is one route and
+    // no second rounding behaviour to keep in step.
+    expect(formatPercent(1.005, 2, 'en-US')).toBe('1.01%');
+    expect(formatMeasure(1.005, '0.00%', undefined, 'whole', 'en-US')).toBe('1.01%');
+    // …and asserted as an AGREEMENT rather than two coincidences, so a future
+    // divergence at either end fails here whatever the two happen to render.
+    expect(formatPercent(1.005, 2, 'en-US')).toBe(
+      formatMeasure(1.005, '0.00%', undefined, 'whole', 'en-US'),
+    );
+  });
+});