@object-ui/fields 17.3.0 → 17.5.0

package/src/field-type-alias.multiple.test.ts

@@ -0,0 +1,81 @@
+/**
+ * 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 widget id is a function of the (type, `multiple`) PAIR, not of the type
+ * string alone (objectui#3986).
+ *
+ * `mapFieldTypeToFormType` mapped `select` to `field:select` unconditionally,
+ * while `SelectField` delegated to `MultiSelectField` whenever the metadata said
+ * `multiple`. Three correct pieces, one gap between them: the component that
+ * RENDERED was `MultiSelectField`, but everything keyed on the widget id — above
+ * all the label-association declaration (`ComponentMeta.labelling`, resolved via
+ * `getMeta('select')`) — was still answering for the single-value combobox. The
+ * host label of a normal `{ type: 'select', multiple: true }` picklist therefore
+ * emitted a `for` at the chip row's wrapper `div`, where a `for` is inert.
+ *
+ * `select` cannot simply be declared `labelling: 'group'` instead: the
+ * single-value trigger IS labelable, and a bare `select` is a builtin the form
+ * renderer resolves without the registry at all (pinned in
+ * `form-group-label-association.test.ts`). The producer has to name the widget
+ * that renders, which is what this file pins.
+ *
+ * Metadata only — nothing renders here, so no widget module is loaded.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { mapFieldTypeToFormType } from './field-type-alias';
+
+describe('select carries its arity in the widget id (objectui#3986)', () => {
+  it('maps select + multiple to the multi-value widget', () => {
+    // The one assertion that was `field:select` before this change.
+    expect(mapFieldTypeToFormType('select', { multiple: true })).toBe('field:multiselect');
+  });
+
+  it('keeps the single-value widget without multiple, and for multiple: false', () => {
+    // The guard direction: single-select must not move. Its trigger is a
+    // labelable `button[role=combobox]` and its `for` association works — taking
+    // that away would break a field that is fine to fix one that is not.
+    expect(mapFieldTypeToFormType('select')).toBe('field:select');
+    expect(mapFieldTypeToFormType('select', {})).toBe('field:select');
+    expect(mapFieldTypeToFormType('select', { multiple: false })).toBe('field:select');
+    expect(mapFieldTypeToFormType('select', { multiple: null })).toBe('field:select');
+  });
+
+  it('is idempotent for the type that is already inherently multi', () => {
+    // `multiselect` is a type in its own right; the arity override must not turn
+    // it into something else, whichever way the flag is set.
+    expect(mapFieldTypeToFormType('multiselect')).toBe('field:multiselect');
+    expect(mapFieldTypeToFormType('multiselect', { multiple: true })).toBe('field:multiselect');
+  });
+
+  /**
+   * The spec's multi-capable set is larger than the widget-moving set, and the
+   * difference is the whole reason this override is table-driven rather than a
+   * `config.multiple` branch sprinkled per type:
+   *
+   *   `MULTI_CAPABLE_TYPES` = select / lookup / file / image (+ `radio` on the
+   *   select branch, `user` storing like `lookup`)
+   *
+   * Every member except `select` renders BOTH arities inside one widget —
+   * `LookupField`, `FileField`, `ImageField` each read `multiple` themselves — so
+   * their widget id, and with it their `labelling` declaration, is correct for
+   * either arity. Moving them would point at widgets that do not exist.
+   */
+  const UNMOVED_MULTI_CAPABLE = ['lookup', 'master_detail', 'user', 'owner', 'file', 'image', 'radio'] as const;
+
+  it.each(UNMOVED_MULTI_CAPABLE)('%s resolves identically with and without multiple', (type) => {
+    expect(mapFieldTypeToFormType(type, { multiple: true })).toBe(mapFieldTypeToFormType(type));
+  });
+
+  it('does not invent a widget for an unknown type flagged multiple', () => {
+    // The fallback is unchanged: an unknown type is `field:text` at either arity,
+    // never `field:text-multiple`-anything.
+    expect(mapFieldTypeToFormType('something-unknown', { multiple: true })).toBe('field:text');
+  });
+});

package/src/field-type-alias.ts

@@ -6,15 +6,63 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * The slice of a field definition the widget decision reads beyond `type`.
+ *
+ * Structural (not the spec `Field`) for the same reason the spec's own
+ * `ValueShapeFieldDef` is: every caller — object-schema metadata, a spec
+ * `FormFieldSchema` override, an action param def — can pass its own trimmed
+ * shape verbatim. `multiple` is the only key read; nothing else here is
+ * consulted, so a caller that has the whole metadata object may hand it over
+ * as-is.
+ */
+export interface FieldTypeMappingConfig {
+  /** `FieldSchema.multiple` — the field holds zero-or-more values. */
+  multiple?: boolean | null;
+}
+
+/**
+ * Field types whose `multiple: true` form is a DIFFERENT registered widget,
+ * rather than the same widget in another mode (objectui#3986).
+ *
+ * `select` is the only member, and the narrowness is measured, not assumed. The
+ * spec's `MULTI_CAPABLE_TYPES` is larger — select / lookup / file / image, with
+ * `radio` on the select branch and `user` storing like `lookup` — but every
+ * other member renders both arities INSIDE one widget: `LookupField`,
+ * `FileField` and `ImageField` each branch on `multiple` themselves, so their
+ * registry id, and with it their `labelling` declaration, is the same either
+ * way. A `select` declared `multiple: true` renders `MultiSelectField` instead:
+ * a different component, whose labelled surface is a chip row's container that
+ * a `<label for>` cannot address (it must be named by IDREF, which is what
+ * `field:multiselect`'s `labelling: 'group'` declares — objectui#3975/#3961).
+ *
+ * So the widget id has to carry the arity. When it did not, the host label was
+ * associated by the declaration registered under `select` — a single-value
+ * combobox that was NOT rendering — and the visible label of a normal
+ * `{ type: 'select', multiple: true }` picklist named nothing at all. One place
+ * decides which widget renders, so the declaration and the render cannot
+ * disagree again.
+ */
+const MULTI_VALUE_FORM_TYPES: Record<string, string> = {
+  select: 'field:multiselect',
+};
+
 /**
  * Map field type to form component type
- * 
+ *
  * @param fieldType - The ObjectQL field type identifier to convert
  * (for example: `"text"`, `"number"`, `"date"`, `"lookup"`).
+ * @param config - The rest of the field definition, for the types whose widget
+ * identity depends on more than the type string. Only `multiple` is read; see
+ * {@link MULTI_VALUE_FORM_TYPES}. Omitting it maps the single-value form, which
+ * is what every non-multi-capable type resolves to anyway.
  * @returns The normalized form field type string used in the form schema
  * (for example: `"input"`, `"textarea"`, `"date-picker"`, `"select"`).
  */
-export function mapFieldTypeToFormType(fieldType: string): string {
+export function mapFieldTypeToFormType(
+  fieldType: string,
+  config?: FieldTypeMappingConfig,
+): string {
   const typeMap: Record<string, string> = {
     // Text-based fields
     text: 'field:text',
@@ -96,5 +144,13 @@ export function mapFieldTypeToFormType(fieldType: string): string {
     auto_number: 'field:auto_number',
   };
 
+  // The arity override comes FIRST and is table-driven: only a type listed in
+  // `MULTI_VALUE_FORM_TYPES` has a second widget to move to, so `multiple` on
+  // any other type (a multi `lookup`, a multi `file`) resolves exactly as
+  // before and keeps reaching the widget that handles both arities itself.
+  if (config?.multiple && MULTI_VALUE_FORM_TYPES[fieldType]) {
+    return MULTI_VALUE_FORM_TYPES[fieldType];
+  }
+
   return typeMap[fieldType] || 'field:text';
 }

package/src/index.css

@@ -0,0 +1,44 @@
+/*
+ * Tailwind entry for `@object-ui/fields` — BUILD-TIME ONLY.
+ *
+ * Consumers never compile this file. They import the compiled artifact:
+ *
+ *   @import '@object-ui/components/style.css';
+ *   @import '@object-ui/fields/style.css';   <- ./dist/index.css, built from this
+ *
+ * The `@reference` below is what makes the "narrow" shape possible
+ * (objectui#4059): it gives this compilation `@object-ui/components`' theme
+ * tokens, its class-based `dark` variant and its `tailwindcss-animate` plugin
+ * WITHOUT emitting a single byte of them. So the sheet built from this entry
+ * carries utilities only — no preflight, no `@theme` `:root` block, no base
+ * layer. `@object-ui/components`' own stylesheet owns all of that, and
+ * `scripts/build-css.mjs` then subtracts every rule that sheet already ships.
+ *
+ * That is why the import ORDER above is not cosmetic: this sheet is a
+ * supplement to the components sheet, not a replacement for it.
+ *
+ * This file has no `@import 'tailwindcss'` on purpose — that would pull in
+ * preflight and re-emit the shared theme, which is exactly the ~160 kB
+ * duplication the narrow variant exists to avoid.
+ */
+@reference '../../components/src/index.css';
+
+/*
+ * `source(none)` is load-bearing, not tidiness. Tailwind's automatic source
+ * detection resolves against the PROCESS CWD, and `@reference` above pulls in
+ * components' entry, whose own `@import 'tailwindcss'` turns that detection on.
+ * Without `source(none)` the candidate set therefore depends on where the build
+ * was launched from: run from this package it scanned `packages/fields` and
+ * produced a 21 kB sheet, run from the repo root it scanned the whole workspace
+ * and produced a 287 kB one full of other packages' utilities. Same commit, same
+ * command, two different published artifacts.
+ *
+ * With it, the ONLY inputs are the explicit `@source` lines below, and the
+ * output is byte-identical from any working directory.
+ */
+@import 'tailwindcss/utilities.css' layer(utilities) source(none);
+
+/* Only shipped source: `*.test.tsx` never reaches a consumer, so utilities used
+   solely by tests must not be compiled into the published sheet. */
+@source './**/*.{ts,tsx}';
+@source not './**/*.test.{ts,tsx}';