@cosmicdrift/kumiko-headless 0.222.0 → 0.224.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-headless",
-  "version": "0.222.0",
+  "version": "0.224.0",
   "description": "Headless UI logic for Kumiko — Dispatcher contract, Form-Controller, View-Model, Nav-Resolver. Plattform- und React-frei; jeder Renderer (renderer, renderer-web, renderer-native, …) komponiert darauf.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -36,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.222.0",
+    "@cosmicdrift/kumiko-framework": "0.224.0",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
   },

package/src/view-model/__tests__/edit.test.ts

@@ -632,3 +632,47 @@ describe("computeEditViewModel — embedded-list cells (#1835)", () => {
     expect(field?.capture).toBeUndefined();
   });
 });
+
+describe("computeEditViewModel — multiSelect display/columns/maxRows passthrough", () => {
+  function multiSelectEntity(overrides?: Record<string, unknown>): EntityDefinition {
+    return {
+      fields: {
+        languages: {
+          type: "multiSelect",
+          options: ["en", "de", "es"],
+          ...overrides,
+        },
+      },
+    } as unknown as EntityDefinition;
+  }
+
+  test("display/columns/maxRows carry through when set on the field def", () => {
+    const vm = computeEditViewModel({
+      screen: editScreen({ sections: [{ title: "x", fields: ["languages"] }] }),
+      entity: multiSelectEntity({ display: "checkboxes", columns: 2, maxRows: 3 }),
+      values: {},
+      translate,
+      featureName: "orders",
+    });
+
+    const field = asFields(vm.sections[0]).fields[0];
+    expect(field?.display).toBe("checkboxes");
+    expect(field?.columns).toBe(2);
+    expect(field?.maxRows).toBe(3);
+  });
+
+  test("display/columns/maxRows are absent when not set on the field def (back-compat)", () => {
+    const vm = computeEditViewModel({
+      screen: editScreen({ sections: [{ title: "x", fields: ["languages"] }] }),
+      entity: multiSelectEntity(),
+      values: {},
+      translate,
+      featureName: "orders",
+    });
+
+    const field = asFields(vm.sections[0]).fields[0];
+    expect(field?.display).toBeUndefined();
+    expect(field?.columns).toBeUndefined();
+    expect(field?.maxRows).toBeUndefined();
+  });
+});

package/src/view-model/edit.ts

@@ -128,6 +128,11 @@ export function computeEditViewModel<
               options,
             )
           : undefined;
+      // Checkbox-grid rendering hints for `type: "multiSelect"` — pass
+      // through unchanged so the renderer can pick the grid layout.
+      const display = fieldDef.type === "multiSelect" ? fieldDef.display : undefined;
+      const columns = fieldDef.type === "multiSelect" ? fieldDef.columns : undefined;
+      const maxRows = fieldDef.type === "multiSelect" ? fieldDef.maxRows : undefined;
       // Multiline hint for `type: "text"` — the renderer then switches to a
       // textarea. `type: "longText"` always renders a textarea regardless
       // of this hint; it's only carried through as an optional `{ rows }`
@@ -275,6 +280,9 @@ export function computeEditViewModel<
         ...(normalized.renderer !== undefined && { renderer: normalized.renderer }),
         ...(options !== undefined && { options }),
         ...(optionLabels !== undefined && { optionLabels }),
+        ...(display !== undefined && { display }),
+        ...(columns !== undefined && { columns }),
+        ...(maxRows !== undefined && { maxRows }),
         ...(multiline !== undefined && { multiline }),
         ...(wallClock !== undefined && { wallClock }),
         ...(min !== undefined && { min }),

package/src/view-model/types.ts

@@ -140,6 +140,18 @@ export type EditFieldViewModel = {
    *  raw value. Convention key:
    *  `<feature>:entity:<entity>:field:<field>:option:<value>`. */
   readonly optionLabels?: Readonly<Record<string, string>>;
+  /** Set for `type: "multiSelect"` when MultiSelectFieldDef.display is
+   *  "checkboxes" — the renderer shows a checkbox grid with a select-all
+   *  toggle instead of the default combobox dropdown. */
+  readonly display?: "checkboxes" | "dropdown";
+  /** Set for `type: "multiSelect"` when MultiSelectFieldDef.columns is
+   *  defined — column count for the checkbox grid at the widest breakpoint.
+   *  Ignored unless `display` is "checkboxes". */
+  readonly columns?: 1 | 2 | 3 | 4;
+  /** Set for `type: "multiSelect"` when MultiSelectFieldDef.maxRows is
+   *  defined — grid rows visible before the checkbox grid becomes
+   *  scrollable. Ignored unless `display` is "checkboxes". */
+  readonly maxRows?: number;
   /** For `type: "text"`, set when TextFieldDef.multiline is true — the
    *  renderer then renders a textarea instead of a single-line input.
    *  `type: "longText"` always renders a textarea regardless of this