@cosmicdrift/kumiko-renderer 0.244.0 → 0.245.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.244.0",
+  "version": "0.245.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.244.0",
-    "@cosmicdrift/kumiko-headless": "0.244.0",
+    "@cosmicdrift/kumiko-framework": "0.245.0",
+    "@cosmicdrift/kumiko-headless": "0.245.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -27,7 +27,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react-dom": "^19.2.6",
-    "@cosmicdrift/kumiko-locale-de": "0.244.0"
+    "@cosmicdrift/kumiko-locale-de": "0.245.0"
   },
   "repository": {
     "type": "git",

package/src/components/__tests__/render-field-select-display.test.tsx

@@ -0,0 +1,134 @@
+// SelectFieldDef.display travels the whole declarative chain (#2711):
+// EntityDefinition → computeEditViewModel → RenderField → InputProps. Without
+// it an app can only hope its labels fall under the renderer's heuristic.
+
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { computeEditViewModel, type EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
+import { render } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
+import { type CorePrimitives, type InputProps, PrimitivesProvider } from "../../primitives";
+import { RenderField } from "../render-field";
+
+let captured: InputProps | undefined;
+const captureInput: ComponentType<InputProps> = (props) => {
+  captured = props;
+  return null;
+};
+const noop = (): ReactNode => null;
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const testPrimitives: CorePrimitives = {
+  Button: noop,
+  Banner: noop,
+  Field: passChildren,
+  Input: captureInput,
+  DataTable: noop,
+  Form: noop,
+  Section: noop,
+  Card: noop,
+  Grid: noop,
+  GridCell: noop,
+  Text: noop,
+  Heading: noop,
+  Dialog: noop,
+  Modal: noop,
+  Lightbox: noop,
+  ConfigSourceBadge: noop,
+  ConfigCascadeView: noop,
+  Link: noop,
+};
+
+const AREAS = ["jobs", "mail", "search", "events", "tenants"] as const;
+
+function buildEntity(display: "radio" | "dropdown" | undefined): EntityDefinition {
+  return {
+    fields: {
+      area: {
+        type: "select",
+        required: false,
+        options: AREAS,
+        ...(display !== undefined && { display }),
+      },
+      tags: {
+        type: "multiSelect",
+        required: false,
+        options: AREAS,
+        display: "checkboxes",
+      },
+    },
+  } as EntityDefinition;
+}
+
+const editScreen: EntityEditScreenDefinition = {
+  id: "ticket-edit",
+  type: "entityEdit",
+  entity: "ticket",
+  layout: { sections: [{ columns: 1, fields: ["area", "tags"] }] },
+} as EntityEditScreenDefinition;
+
+function viewModelField(entity: EntityDefinition, fieldName: string): EditFieldViewModel {
+  const vm = computeEditViewModel({
+    screen: editScreen,
+    entity,
+    values: { area: "jobs", tags: [] },
+    translate: (key) => key,
+    featureName: "helpdesk",
+  });
+  const section = vm.sections[0];
+  if (section === undefined || section.kind !== "fields") {
+    throw new Error("expected a fields section");
+  }
+  const field = section.fields.find((f) => f.field === fieldName);
+  if (field === undefined) throw new Error(`expected a ${fieldName} field`);
+  return field;
+}
+
+function renderField(field: EditFieldViewModel): InputProps {
+  captured = undefined;
+  render(
+    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "en-US" })}>
+      <PrimitivesProvider value={testPrimitives}>
+        <RenderField field={field} onChange={() => {}} />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+  if (captured === undefined) throw new Error("field did not render an Input");
+  return captured;
+}
+
+describe("RenderField — select display request", () => {
+  test('display: "radio" on the field definition reaches the Input', () => {
+    const field = viewModelField(buildEntity("radio"), "area");
+    expect(field.display).toBe("radio");
+    const input = renderField(field);
+    expect(input.kind).toBe("select");
+    if (input.kind !== "select") return;
+    expect(input.display).toBe("radio");
+  });
+
+  test('display: "dropdown" on the field definition reaches the Input', () => {
+    const input = renderField(viewModelField(buildEntity("dropdown"), "area"));
+    expect(input.kind).toBe("select");
+    if (input.kind !== "select") return;
+    expect(input.display).toBe("dropdown");
+  });
+
+  test("no display on the field definition leaves the Input to its own default", () => {
+    const field = viewModelField(buildEntity(undefined), "area");
+    expect(field.display).toBeUndefined();
+    const input = renderField(field);
+    expect(input.kind).toBe("select");
+    if (input.kind !== "select") return;
+    expect(input.display).toBeUndefined();
+  });
+
+  test('multiSelect keeps its own "checkboxes" display untouched', () => {
+    const field = viewModelField(buildEntity("radio"), "tags");
+    expect(field.display).toBe("checkboxes");
+  });
+});

package/src/components/render-field.tsx

@@ -689,6 +689,10 @@ function renderInput({
         labels !== undefined
           ? rawOptions.map((value: string) => ({ value, label: labels[value] ?? value }))
           : rawOptions;
+      // `display` is shared with multiSelect's "checkboxes", which is not a
+      // select presentation — narrow to the two a select field can request.
+      const display =
+        field.display === "radio" || field.display === "dropdown" ? field.display : undefined;
       return (
         <Input
           kind="select"
@@ -696,6 +700,7 @@ function renderInput({
           value={stringValue(field.value)}
           onChange={(v) => onChange(v)}
           options={selectOptions}
+          {...(display !== undefined && { display })}
         />
       );
     }

package/src/primitives.tsx

@@ -322,6 +322,12 @@ export type InputProps =
       readonly disabled?: boolean;
       readonly required?: boolean;
       readonly hasError?: boolean;
+      /** Requested presentation. `"radio"` renders the options as a visible
+       *  radio group (WAI-ARIA radiogroup, one click per choice),
+       *  `"dropdown"` renders the combobox. Omitted = the implementation
+       *  decides; the web impl keeps its short-option-set heuristic. Custom
+       *  impls may ignore it — it is a request, not a contract. */
+      readonly display?: "radio" | "dropdown";
     }
   | ({
       // Tier 2.1c: Combobox / Searchable-Select. Single-Mode (multiple