@nubitio/crud 0.5.14 → 0.5.15

package/dist/index.cjs

@@ -3671,6 +3671,7 @@ function normalizeFormData(data, fields, adapter = HydraAdapter, prependDataByFi
 			else row[field.name] = null;
 		}
 		if (field.type === "entity") normalizeEntityField(row, field, adapter, prependDataByField);
+		if (field.type !== "entity" && field.type !== "file" && (Array.isArray(row[field.name]) || row[field.name] !== null && typeof row[field.name] === "object")) delete row[field.name];
 	});
 	return row;
 }
@@ -4304,9 +4305,20 @@ function validateField(field, value, formData, t) {
 	}
 	return null;
 }
+const DETAIL_CURRENCY_COL_WIDTH = 112;
+const DETAIL_NUMBER_COL_WIDTH = 96;
+function resolveDetailColWidth(field, colWidths) {
+	if (colWidths[field.name] !== void 0) return colWidths[field.name];
+	if (field.width !== void 0) {
+		const parsed = typeof field.width === "number" ? field.width : Number.parseInt(String(field.width), 10);
+		return Number.isFinite(parsed) ? parsed : void 0;
+	}
+	if (field.type === "currency") return DETAIL_CURRENCY_COL_WIDTH;
+	if (field.type === "number") return DETAIL_NUMBER_COL_WIDTH;
+}
 function DetailColumnGroup({ allowDeleting, fields, colWidths }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("colgroup", { children: [fields.map((field) => {
-		const width = colWidths[field.name] ?? field.width;
+		const width = resolveDetailColWidth(field, colWidths);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: width ? { width } : void 0 }, field.name);
 	}), allowDeleting && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "nb-form__col-actions-col" })] });
 }
@@ -4316,7 +4328,6 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: scrollRef,
 		className: "nb-form__detail-summary-wrap",
-		"aria-hidden": "true",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
 			className: "nb-form__detail-table nb-form__detail-summary-table",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailColumnGroup, {
@@ -4328,11 +4339,16 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [fields.map((field) => {
 					const item = itemsByColumn.get(field.name);
 					const align = item?.align ?? field.align;
+					const alignItems = align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start";
+					const colWidth = item ? resolveDetailColWidth(field, colWidths) : void 0;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
-						style: align ? { textAlign: align } : void 0,
+						style: {
+							...align ? { textAlign: align } : void 0,
+							...colWidth ? { minWidth: colWidth } : void 0
+						},
 						children: item && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "nb-form__detail-summary-cell",
-							style: { justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start" },
+							style: { alignItems },
 							children: [item.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "nb-form__detail-summary-label",
 								children: item.label
@@ -7221,6 +7237,22 @@ function useSmartCrudFields(fields, activeOperation, formData, roles) {
 	};
 }
 //#endregion
+//#region packages/crud/crud/applyFormDetailFormFieldOverrides.ts
+/**
+* Hides the header form field that mirrors `formDetail.propertyName`.
+* OneToMany collections serialized as object arrays must not render as a
+* plain text input ([object Object]) when line items are edited via formDetail.
+*/
+function applyFormDetailFormFieldOverrides(fields, formDetail) {
+	const propertyName = formDetail?.propertyName?.trim();
+	if (!propertyName) return fields;
+	return fields.map((field) => field.name === propertyName ? {
+		...field,
+		visibleOnForm: false,
+		hidden: true
+	} : field);
+}
+//#endregion
 //#region packages/crud/crud/fieldValidation.ts
 var SmartCrudFieldContractError = class extends Error {
 	issues;
@@ -7663,6 +7695,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 	const { activeOperation, formData, handleFormDataChange, startCreate, startEdit, resetOperation } = useSmartCrudOperation(void 0, routingState);
 	const roles = useSmartCrudRoles();
 	const { gridFields, processedFields, computedValues } = useSmartCrudFields(fields, activeOperation, formData, (0, react.useMemo)(() => roles ?? [], [roles]));
+	const formFields = (0, react.useMemo)(() => applyFormDetailFormFieldOverrides(processedFields, resolvedBaseResource.formDetail), [processedFields, resolvedBaseResource.formDetail]);
 	(0, _nubitio_core.useMercureSubscription)(resource.apiUrl, () => {
 		effectiveGridRef.current?.refresh();
 	}, resolvedBaseResource.mercure !== false);
@@ -7672,7 +7705,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		...!hasManualFields ? { fields: gridFields } : {},
 		apiUrl: normalizedApiUrl,
 		fields: hasManualFields ? buildFields(resource.fields) : gridFields,
-		formFields: processedFields,
+		formFields,
 		formLayout: resolvedBaseResource.formLayout ?? inferredFormLayout,
 		_supportedOperations: supportedOperations
 	}), [
@@ -7681,7 +7714,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		hasManualFields,
 		inferredFormLayout,
 		normalizedApiUrl,
-		processedFields,
+		formFields,
 		resolvedBaseResource,
 		resource.fields,
 		supportedOperations

package/dist/index.mjs

@@ -3647,6 +3647,7 @@ function normalizeFormData(data, fields, adapter = HydraAdapter, prependDataByFi
 			else row[field.name] = null;
 		}
 		if (field.type === "entity") normalizeEntityField(row, field, adapter, prependDataByField);
+		if (field.type !== "entity" && field.type !== "file" && (Array.isArray(row[field.name]) || row[field.name] !== null && typeof row[field.name] === "object")) delete row[field.name];
 	});
 	return row;
 }
@@ -4280,9 +4281,20 @@ function validateField(field, value, formData, t) {
 	}
 	return null;
 }
+const DETAIL_CURRENCY_COL_WIDTH = 112;
+const DETAIL_NUMBER_COL_WIDTH = 96;
+function resolveDetailColWidth(field, colWidths) {
+	if (colWidths[field.name] !== void 0) return colWidths[field.name];
+	if (field.width !== void 0) {
+		const parsed = typeof field.width === "number" ? field.width : Number.parseInt(String(field.width), 10);
+		return Number.isFinite(parsed) ? parsed : void 0;
+	}
+	if (field.type === "currency") return DETAIL_CURRENCY_COL_WIDTH;
+	if (field.type === "number") return DETAIL_NUMBER_COL_WIDTH;
+}
 function DetailColumnGroup({ allowDeleting, fields, colWidths }) {
 	return /* @__PURE__ */ jsxs("colgroup", { children: [fields.map((field) => {
-		const width = colWidths[field.name] ?? field.width;
+		const width = resolveDetailColWidth(field, colWidths);
 		return /* @__PURE__ */ jsx("col", { style: width ? { width } : void 0 }, field.name);
 	}), allowDeleting && /* @__PURE__ */ jsx("col", { className: "nb-form__col-actions-col" })] });
 }
@@ -4292,7 +4304,6 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 	return /* @__PURE__ */ jsx("div", {
 		ref: scrollRef,
 		className: "nb-form__detail-summary-wrap",
-		"aria-hidden": "true",
 		children: /* @__PURE__ */ jsxs("table", {
 			className: "nb-form__detail-table nb-form__detail-summary-table",
 			children: [/* @__PURE__ */ jsx(DetailColumnGroup, {
@@ -4304,11 +4315,16 @@ function DetailSummaryFooter({ allowDeleting, colWidths, fields, rows, scrollRef
 				children: /* @__PURE__ */ jsxs("tr", { children: [fields.map((field) => {
 					const item = itemsByColumn.get(field.name);
 					const align = item?.align ?? field.align;
+					const alignItems = align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start";
+					const colWidth = item ? resolveDetailColWidth(field, colWidths) : void 0;
 					return /* @__PURE__ */ jsx("td", {
-						style: align ? { textAlign: align } : void 0,
+						style: {
+							...align ? { textAlign: align } : void 0,
+							...colWidth ? { minWidth: colWidth } : void 0
+						},
 						children: item && /* @__PURE__ */ jsxs("div", {
 							className: "nb-form__detail-summary-cell",
-							style: { justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start" },
+							style: { alignItems },
 							children: [item.label && /* @__PURE__ */ jsx("span", {
 								className: "nb-form__detail-summary-label",
 								children: item.label
@@ -7197,6 +7213,22 @@ function useSmartCrudFields(fields, activeOperation, formData, roles) {
 	};
 }
 //#endregion
+//#region packages/crud/crud/applyFormDetailFormFieldOverrides.ts
+/**
+* Hides the header form field that mirrors `formDetail.propertyName`.
+* OneToMany collections serialized as object arrays must not render as a
+* plain text input ([object Object]) when line items are edited via formDetail.
+*/
+function applyFormDetailFormFieldOverrides(fields, formDetail) {
+	const propertyName = formDetail?.propertyName?.trim();
+	if (!propertyName) return fields;
+	return fields.map((field) => field.name === propertyName ? {
+		...field,
+		visibleOnForm: false,
+		hidden: true
+	} : field);
+}
+//#endregion
 //#region packages/crud/crud/fieldValidation.ts
 var SmartCrudFieldContractError = class extends Error {
 	issues;
@@ -7639,6 +7671,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 	const { activeOperation, formData, handleFormDataChange, startCreate, startEdit, resetOperation } = useSmartCrudOperation(void 0, routingState);
 	const roles = useSmartCrudRoles();
 	const { gridFields, processedFields, computedValues } = useSmartCrudFields(fields, activeOperation, formData, useMemo(() => roles ?? [], [roles]));
+	const formFields = useMemo(() => applyFormDetailFormFieldOverrides(processedFields, resolvedBaseResource.formDetail), [processedFields, resolvedBaseResource.formDetail]);
 	useMercureSubscription(resource.apiUrl, () => {
 		effectiveGridRef.current?.refresh();
 	}, resolvedBaseResource.mercure !== false);
@@ -7648,7 +7681,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		...!hasManualFields ? { fields: gridFields } : {},
 		apiUrl: normalizedApiUrl,
 		fields: hasManualFields ? buildFields(resource.fields) : gridFields,
-		formFields: processedFields,
+		formFields,
 		formLayout: resolvedBaseResource.formLayout ?? inferredFormLayout,
 		_supportedOperations: supportedOperations
 	}), [
@@ -7657,7 +7690,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		hasManualFields,
 		inferredFormLayout,
 		normalizedApiUrl,
-		processedFields,
+		formFields,
 		resolvedBaseResource,
 		resource.fields,
 		supportedOperations

package/dist/style.css

@@ -2926,6 +2926,7 @@ html[data-density=compact] .nb-datagrid .nb-badge {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   min-height: 38px;
+  overflow: visible;
   padding: 8px;
   vertical-align: middle;
 }
@@ -2949,7 +2950,8 @@ html[data-density=compact] .nb-datagrid .nb-badge {
   background: var(--surface-2);
   border-top: 0;
   flex: 0 0 auto;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: none;
 }
 .nb-form__detail-summary-wrap::-webkit-scrollbar {
@@ -2962,10 +2964,12 @@ html[data-density=compact] .nb-datagrid .nb-badge {
 }
 
 .nb-form__detail-summary-cell {
-  align-items: baseline;
+  align-items: flex-end;
   display: inline-flex;
-  gap: var(--space-2);
+  flex-direction: column;
+  gap: 2px;
   min-width: 100%;
+  overflow: visible;
 }
 
 .nb-form__detail-summary-label {
@@ -2978,9 +2982,12 @@ html[data-density=compact] .nb-datagrid .nb-badge {
 
 .nb-form__detail-summary-value {
   color: var(--text-primary);
+  display: block;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
+  max-width: none;
   white-space: nowrap;
+  width: max-content;
 }
 
 .nb-form__detail-table td .nb-form__control,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/crud",
-  "version": "0.5.14",
+  "version": "0.5.15",
   "type": "module",
   "description": "Declarative CRUD engine with field DSL, forms, datagrids, RBAC, conditional logic and pluggable adapters (Hydra/REST).",
   "license": "MIT",
@@ -56,8 +56,8 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^14.0.0",
     "react-router-dom": "^6.0.0",
-    "@nubitio/core": "^0.5.14",
-    "@nubitio/ui": "^0.5.14"
+    "@nubitio/core": "^0.5.15",
+    "@nubitio/ui": "^0.5.15"
   },
   "dependencies": {
     "react-dropzone": "^15.0.0"