@object-ui/fields 17.2.0 → 17.5.0

package/src/__tests__/DateCellRenderer.test.tsx

@@ -52,6 +52,15 @@ describe('formatRelativeDate', () => {
   });
 });
 
+/**
+ * Nothing in this file mounts an `I18nProvider`, and that is load-bearing
+ * rather than incidental (objectui#4468): these cases are the pin on
+ * `useDisplayLocale()`'s LAST resort — the concrete `'en'` a renderer resolves
+ * to when neither a tenant locale nor an active UI language exists. The
+ * session-locale cases live in `date-locale-channel.test.tsx`; mounting a
+ * provider here would leave react-i18next's global instance on that language
+ * and quietly turn these into assertions about test ordering.
+ */
 describe('DateCellRenderer', () => {
   it('does not label a past start_date as "Overdue" (regression: field-role-agnostic formatter)', () => {
     render(<DateCellRenderer value={daysAgo(6)} field={{ type: 'date', name: 'start_date' } as any} />);

package/src/__tests__/NumberCellRenderer.grouping.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * 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#4033 (source thread objectstack#5067) — the number cell renderer
+ * used to build `new Intl.NumberFormat('en-US', …)` with grouping left at the
+ * Intl default, so a four-digit YEAR stored as `Field.number({ scale: 0 })`
+ * rendered as `2,026` in every locale and no field property could turn it off.
+ *
+ * Two independent pins live here:
+ *
+ *  1. **Ordinal grouping** — a declared `scale: 0` with no currency is an
+ *     integer/ordinal surface, so grouping is suppressed. Interim default; a
+ *     future spec-level presentation hint overrides it.
+ *  2. **Locale** — grouping and decimal marks follow the ACTIVE display locale,
+ *     never a hardcoded `en-US`.
+ *
+ * The controls are as load-bearing as the fixes: currency keeps grouping, a
+ * non-zero `scale` keeps grouping, and an UNDECLARED scale keeps grouping
+ * (`scale` is optional in the spec and absent means "decimals unknown", not
+ * "integer" — see the renderer's own comment).
+ */
+
+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 { NumberCellRenderer, CurrencyCellRenderer } from '../index';
+
+const renderNumber = (
+  value: unknown,
+  field: Record<string, unknown> = {},
+  locale?: string,
+) =>
+  render(
+    <LocalizationProvider value={{ locale }}>
+      <NumberCellRenderer value={value as any} field={{ type: 'number', ...field } as any} />
+    </LocalizationProvider>,
+  );
+
+const renderCurrency = (
+  value: unknown,
+  field: Record<string, unknown> = {},
+  locale?: string,
+) =>
+  render(
+    <LocalizationProvider value={{ locale }}>
+      <CurrencyCellRenderer value={value as any} field={{ type: 'currency', ...field } as any} />
+    </LocalizationProvider>,
+  );
+
+describe('NumberCellRenderer — ordinal grouping (objectui#4033)', () => {
+  // The card's exact fixture: `year: Field.number({ scale: 0, min: 1900 })`.
+  it.each(['en-US', 'de-DE', 'zh-CN', 'fr-FR'])(
+    'renders a scale-0 year ungrouped in %s',
+    (locale) => {
+      renderNumber(2026, { scale: 0 }, locale);
+      expect(screen.getByText('2026')).toBeInTheDocument();
+    },
+  );
+
+  it('suppresses grouping for every scale-0 magnitude, not just four digits', () => {
+    renderNumber(1234567, { scale: 0 }, 'en-US');
+    expect(screen.getByText('1234567')).toBeInTheDocument();
+  });
+
+  it('CONTROL: a non-zero scale keeps grouping', () => {
+    renderNumber(1234.5, { scale: 2 }, 'en-US');
+    expect(screen.getByText('1,234.50')).toBeInTheDocument();
+  });
+
+  it('CONTROL: an UNDECLARED scale keeps grouping (absent ≠ integer)', () => {
+    renderNumber(2026, {}, 'en-US');
+    expect(screen.getByText('2,026')).toBeInTheDocument();
+  });
+});
+
+describe('NumberCellRenderer — active display locale (objectui#4033)', () => {
+  it('uses the active locale decimal + grouping marks (de-DE)', () => {
+    renderNumber(1234.5, { scale: 1 }, 'de-DE');
+    expect(screen.getByText('1.234,5')).toBeInTheDocument();
+  });
+
+  it('uses the active locale decimal + grouping marks (en-US)', () => {
+    renderNumber(1234.5, { scale: 1 }, 'en-US');
+    expect(screen.getByText('1,234.5')).toBeInTheDocument();
+  });
+
+  it('uses the active locale decimal + grouping marks (fr-FR)', () => {
+    // fr-FR groups with U+202F (NARROW NO-BREAK SPACE) and uses "," for the
+    // decimal mark — nothing an en-US formatter can produce.
+    //
+    // Asserted against raw `textContent`, NOT `getByText`: testing-library's
+    // default normalizer collapses `\s+` (which includes U+202F) down to an
+    // ASCII space, so a `getByText` assertion here can only ever prove "some
+    // whitespace" and would pass on the wrong separator. The escape sequence is
+    // written out rather than pasted — a raw U+202F in source renders as
+    // nothing and is unfindable by grep.
+    const { container } = renderNumber(1234.5, { scale: 1 }, 'fr-FR');
+    expect(container.textContent).toBe('1 234,5');
+  });
+
+  it('does not take a malformed tenant locale down with it', () => {
+    // `locale` arrives from a server response (ADR-0053); a junk tag must
+    // degrade to the runtime default, never throw out of a grid cell.
+    renderNumber(1234.5, { scale: 1 }, 'not a locale');
+    expect(screen.getByText(/1.?234.5/)).toBeInTheDocument();
+  });
+});
+
+describe('CurrencyCellRenderer — CONTROL, unaffected by the ordinal default', () => {
+  it('keeps grouping and the currency symbol for a whole amount', () => {
+    renderCurrency(5000000, { currency: 'USD' }, 'en-US');
+    expect(screen.getByText('$5,000,000')).toBeInTheDocument();
+  });
+
+  it('keeps grouping and the fractional part when the amount is not whole', () => {
+    renderCurrency(1234.5, { currency: 'USD' }, 'en-US');
+    // This control pinned the CURRENT behaviour when #4033 landed — `$1,234.5`,
+    // NOT the `$1,234.50` that `formatCurrency`'s own doc comment promises
+    // ("Salesforce convention: `$1,234.50` keeps cents"). That was a real
+    // defect, deliberately filed rather than folded in (objectui#4332) and
+    // pinned here so its fix would flip a watched test instead of silently
+    // changing an unwatched surface. #4332 is now fixed, so the expectation
+    // moves to the promised form; grouping — this control's actual subject —
+    // is unchanged, which is still what #4033 needs it to prove.
+    expect(screen.getByText('$1,234.50')).toBeInTheDocument();
+  });
+
+  it('follows the active locale for currency too', () => {
+    renderCurrency(5000000, { currency: 'EUR' }, 'de-DE');
+    // de-DE: grouped with dots and a TRAILING symbol, vs en-US's leading one.
+    expect(screen.getByText(/^5\.000\.000\s*€$/)).toBeInTheDocument();
+  });
+
+  it('a currency field with NO resolved currency still groups (money, not an ordinal)', () => {
+    renderCurrency(5000000, {}, 'en-US');
+    expect(screen.getByText('5,000,000')).toBeInTheDocument();
+  });
+});

package/src/__tests__/PercentCellRenderer.locale.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * 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#4553 phase 2 — the percent CELL, the fields-internal consumer of
+ * `formatPercent`.
+ *
+ * `PercentCellRenderer` had two rendering paths and BOTH were outside the
+ * display-locale channel:
+ *
+ *     const formatted = isWholePercentField
+ *       ? `${numValue.toFixed(precision)}%`   // a second bare toFixed path
+ *       : formatPercent(numValue, precision); // no locale to pass
+ *
+ * The branch exists for a real reason — a field named `progress` / `completion`
+ * stores 0-100, so it must NOT go through `percentDisplayValue`'s fraction
+ * scaling — but it had quietly become a second place where a percent was
+ * formatted, and it was the more primitive of the two. Threading only the
+ * `formatPercent` half would have made ONE grid internally inconsistent: a
+ * `progress` column ungrouped and unlocalized beside a `rate` column that was
+ * neither. So both branches now render through the same locale-aware body and
+ * differ only in the scaling policy, which is all the branch was ever about.
+ *
+ * ── Directions, predicted in writing BEFORE the run ──────────────────────
+ * Runner machine locale en-US.
+ *
+ *   de, ordinary percent 1234.5   `1235%` → `1.235 %`   RED
+ *   de, `progress` 1234.5         `1235%` → `1.235 %`   RED (the second path)
+ *   en, ordinary percent 1234.5   `1235%` → `1,235%`    RED (grouping move)
+ *   en, `progress` 1234.5         `1235%` → `1,235%`    RED (grouping move)
+ *   the fraction/whole SPLIT itself                     PIN, green both sides
+ *   small-value en output                               PIN, green both sides
+ *
+ * Provider-mounted by construction (objectui#4514) — the pure-function cases
+ * live in `percent-formatter-locale-4553.test.ts`.
+ */
+
+import React from 'react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { I18nProvider, LocalizationProvider } from '@object-ui/i18n';
+import { PercentCellRenderer } from '../index';
+
+/** German writes a NO-BREAK SPACE (U+00A0) before the percent sign. */
+const NBSP = '\u00a0';
+
+/**
+ * A session: the UI language the user picked plus the tenant's regional
+ * default. `useDisplayLocale()` resolves tenant regional default → active UI
+ * language → 'en'.
+ */
+function renderCell(
+  value: unknown,
+  field: Record<string, unknown>,
+  language: string,
+  tenantLocale?: string,
+) {
+  return render(
+    <I18nProvider
+      config={{ defaultLanguage: language, detectBrowserLanguage: false }}
+      persistLanguage={false}
+    >
+      <LocalizationProvider value={{ locale: tenantLocale }}>
+        <PercentCellRenderer
+          value={value as any}
+          field={{ type: 'percent', ...field } as any}
+        />
+      </LocalizationProvider>
+    </I18nProvider>,
+  );
+}
+
+/** The cell's text, read off the value span beside the decorative bar. */
+function cellText(): string {
+  return document.body.textContent ?? '';
+}
+
+afterEach(() => cleanup());
+
+describe('PercentCellRenderer follows the display locale (objectui#4553)', () => {
+  it('de renders the German percent form', () => {
+    renderCell(1234.5, { name: 'win_rate' }, 'de');
+    expect(cellText()).toContain(`1.235${NBSP}%`);
+  });
+
+  /**
+   * The SECOND path — `progress` matches WHOLE_PERCENT_FIELD_PATTERN, so this
+   * value skips fraction scaling and used to skip `formatPercent` entirely.
+   */
+  it('de renders the German form on the whole-percent path too', () => {
+    renderCell(1234.5, { name: 'progress' }, 'de');
+    expect(cellText()).toContain(`1.235${NBSP}%`);
+  });
+
+  it('en groups at four digits on both paths — the deliberate output move', () => {
+    const { unmount } = renderCell(1234.5, { name: 'win_rate' }, 'en');
+    expect(cellText()).toContain('1,235%');
+    unmount();
+
+    renderCell(1234.5, { name: 'progress' }, 'en');
+    expect(cellText()).toContain('1,235%');
+  });
+
+  it('an explicit tenant locale outranks the active UI language', () => {
+    renderCell(1234.5, { name: 'win_rate' }, 'en', 'de');
+    expect(cellText()).toContain(`1.235${NBSP}%`);
+    expect(cellText()).not.toContain('1,235%');
+  });
+});
+
+describe('PercentCellRenderer keeps its scaling contract (objectui#4553 must-not-change)', () => {
+  /**
+   * PIN, green both sides — and the reason the whole-percent branch was kept
+   * rather than collapsed into `formatPercent`. The same stored number means
+   * different things in the two columns, and that must not have changed.
+   */
+  it('an ordinary percent scales a fraction; a progress field does not', () => {
+    const { unmount } = renderCell(0.5, { name: 'win_rate' }, 'en');
+    // Fraction-stored: 0.5 → 50%.
+    expect(cellText()).toContain('50%');
+    unmount();
+
+    renderCell(0.5, { name: 'progress' }, 'en');
+    // Whole-percent field: 0.5 really is half a percent, rounded to 1% at
+    // precision 0 — NOT 50%.
+    expect(cellText()).toContain('1%');
+    expect(cellText()).not.toContain('50%');
+  });
+
+  /** PIN: small-value English output is byte-identical across the change. */
+  it('en small-value output is unchanged (must-not-change)', () => {
+    renderCell(33.33, { name: 'win_rate', precision: 2 }, 'en');
+    expect(cellText()).toContain('33.33%');
+  });
+
+  /** PIN: the decorative bar still reports the un-formatted magnitude. */
+  it('the progressbar still carries the numeric value', () => {
+    renderCell(33.33, { name: 'win_rate' }, 'en');
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '33.33');
+  });
+
+  /** PIN: the null path is untouched — and the hook runs before it. */
+  it('renders the empty value for null without crashing on the hook', () => {
+    expect(() => renderCell(null, { name: 'win_rate' }, 'de')).not.toThrow();
+  });
+});

package/src/__tests__/PercentCellRenderer.test.tsx

@@ -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.
+ */
+
+/**
+ * Regression for objectstack-ai/objectstack#5066: the percent / progress cell
+ * renderer emitted a FIXED-WIDTH, NON-SHRINKABLE bar (`w-16 shrink-0`) next to a
+ * shrinkable value span. Inside a narrow clipping container — a
+ * `record:highlights` chip is `basis-[9rem]` / `min-w-[7rem]` and clips with
+ * `truncate` — the 64px bar won the space and the VALUE was cut mid-digit: a
+ * stored `33.33` carried `33%` in the DOM but read as `3` on screen (measured:
+ * 79px clipping box, 32px text node, 25px overflow), with no ellipsis and no
+ * signal in the accessible name. A silently wrong number, not a cosmetic glitch.
+ *
+ * Pin: the number is the CONTENT (`shrink-0`, never sacrificed) and the bar is
+ * DECORATION (`w-16` as its preferred width, free to shrink away under
+ * pressure — and never `flex-1`, so a wide grid cell keeps today's 64px bar).
+ *
+ * jsdom has no layout engine, so these are class-semantics assertions (same
+ * approach as `cell-truncation.test.tsx` for objectui#3466) plus DOM-text
+ * assertions — deliberately not brittle pixel measurements.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+
+import { PercentCellRenderer } from '../index';
+
+const renderPercent = (value: unknown, field: Record<string, unknown> = {}) =>
+  render(
+    <PercentCellRenderer value={value as any} field={{ type: 'percent', ...field } as any} />,
+  );
+
+/** The decorative bar: `role="progressbar"` wrapper the renderer emits. */
+const bar = () => screen.getByRole('progressbar');
+/** The row that holds bar + value. */
+const row = () => bar().parentElement!;
+
+describe('PercentCellRenderer — value beats the decorative bar (issue #5066)', () => {
+  it('renders BOTH the bar and the value at normal width', () => {
+    renderPercent(33.33);
+
+    expect(bar()).toBeInTheDocument();
+    expect(bar()).toHaveAttribute('aria-valuenow', '33.33');
+    expect(screen.getByText('33%')).toBeInTheDocument();
+    // Bar and value are siblings in one flex row (nothing was dropped).
+    expect(row()).toHaveClass('flex');
+    expect(row()).toContainElement(screen.getByText('33%'));
+  });
+
+  it('gives the value span shrink priority so a narrow chip cannot clip it', () => {
+    renderPercent(33.33);
+
+    const value = screen.getByText('33%');
+    // The number never shrinks — it is the content of the cell.
+    expect(value).toHaveClass('shrink-0');
+    expect(value).toHaveClass('whitespace-nowrap', 'tabular-nums');
+  });
+
+  it('lets the bar shrink away instead of pushing the value out of the clip box', () => {
+    renderPercent(33.33);
+
+    // The bar keeps `w-16` as its PREFERRED width but is shrinkable, and
+    // `min-w-0` stops the automatic minimum size from pinning it at 64px.
+    expect(bar()).toHaveClass('w-16', 'min-w-0', 'shrink');
+    // The pre-fix spelling: a non-shrinkable bar is exactly the bug.
+    expect(bar()).not.toHaveClass('shrink-0');
+    // The row itself must be able to shrink below its content width inside the
+    // chip's flex column, or the deficit never reaches the bar.
+    expect(row()).toHaveClass('min-w-0');
+  });
+
+  it('does not let the bar GROW in a wide cell (no flex-1 / grow)', () => {
+    renderPercent(33.33);
+
+    // `flex-1` would also make the bar stretch to fill every wide grid cell —
+    // `w-16` stays the upper bound, only the shrink direction changed.
+    expect(bar().className).not.toMatch(/(^|\s)(flex-1|grow|basis-)/);
+  });
+
+  it('keeps the full formatted value in the DOM (fraction, whole, precision)', () => {
+    const first = renderPercent(33.33);
+    expect(screen.getByText('33%')).toBeInTheDocument();
+    first.unmount();
+
+    // Declared precision keeps the decimals — the widest text, worst overflow.
+    renderPercent(33.33, { precision: 2 });
+    const wide = screen.getByText('33.33%');
+    expect(wide).toBeInTheDocument();
+    expect(wide).toHaveClass('shrink-0');
+  });
+
+  it('scales a fraction-stored percent and still renders both parts', () => {
+    renderPercent(0.8);
+
+    expect(screen.getByText('80%')).toBeInTheDocument();
+    expect(bar()).toHaveAttribute('aria-valuenow', '80');
+    expect(screen.getByText('80%')).toHaveClass('shrink-0');
+  });
+
+  it('applies the same contract to whole-percent `progress` fields', () => {
+    renderPercent(33.33, { type: 'progress', name: 'progress' });
+
+    // 0-100 storage: no fraction scaling, value rendered as-is.
+    expect(screen.getByText('33%')).toBeInTheDocument();
+    expect(screen.getByText('33%')).toHaveClass('shrink-0');
+    expect(bar()).toHaveClass('min-w-0', 'shrink');
+    expect(bar()).not.toHaveClass('shrink-0');
+  });
+});