@object-ui/plugin-form 3.0.3 → 3.1.0

package/src/ModalForm.tsx

@@ -13,19 +13,23 @@
  * Aligns with @objectstack/spec FormView type: 'modal'
  */
 
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import React, { useState, useCallback, useEffect, useMemo, useId } from 'react';
 import type { FormField, DataSource } from '@object-ui/types';
 import {
   Dialog,
-  DialogContent,
+  MobileDialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
+  Skeleton,
+  Button,
   cn,
 } from '@object-ui/components';
+import { Loader2 } from 'lucide-react';
 import { FormSection } from './FormSection';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
+import { applyAutoLayout, inferModalSize } from './autoLayout';
 
 export interface ModalFormSectionConfig {
   name?: string;
@@ -101,19 +105,58 @@ const modalSizeClasses: Record<string, string> = {
   full: 'max-w-[95vw] w-full',
 };
 
+/**
+ * Container-query-based grid classes for form field layout.
+ * Uses @container / @md: / @2xl: / @4xl: variants so that the grid
+ * responds to the modal's actual width instead of the viewport,
+ * ensuring single-column on narrow mobile modals regardless of viewport size.
+ */
+const CONTAINER_GRID_COLS: Record<number, string | undefined> = {
+  1: undefined, // let the form renderer use its default (space-y-4)
+  2: 'grid gap-4 grid-cols-1 @md:grid-cols-2',
+  3: 'grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3',
+  4: 'grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 @4xl:grid-cols-4',
+};
+
 export const ModalForm: React.FC<ModalFormProps> = ({
   schema,
   dataSource,
   className,
 }) => {
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formFields, setFormFields] = useState<FormField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const isOpen = schema.open !== false;
-  const sizeClass = modalSizeClasses[schema.modalSize || 'default'] || modalSizeClasses.default;
+
+  // Stable form id for linking the external submit button to the form element
+  const formId = useId();
+
+  // Compute auto-layout for flat fields (no sections) to determine inferred columns
+  const autoLayoutResult = useMemo(() => {
+    if (schema.sections?.length || schema.customFields?.length) return null;
+    return applyAutoLayout(formFields, objectSchema, schema.columns, schema.mode);
+  }, [formFields, objectSchema, schema.columns, schema.mode, schema.sections, schema.customFields]);
+
+  // Auto-upgrade modal size when auto-layout infers multi-column and user hasn't set modalSize
+  const effectiveModalSize = useMemo(() => {
+    if (schema.modalSize) return schema.modalSize;
+    if (autoLayoutResult?.columns && autoLayoutResult.columns > 1) {
+      return inferModalSize(autoLayoutResult.columns);
+    }
+    // Auto-upgrade for sections: use the max columns across all sections
+    if (schema.sections?.length) {
+      const maxCols = Math.max(...schema.sections.map(s => Number(s.columns) || 1));
+      if (maxCols > 1) return inferModalSize(maxCols);
+    }
+    return 'default';
+  }, [schema.modalSize, autoLayoutResult, schema.sections]);
+
+  const sizeClass = modalSizeClasses[effectiveModalSize] || modalSizeClasses.default;
 
   // Fetch object schema
   useEffect(() => {
@@ -176,7 +219,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
         const field = objectSchema.fields[fieldName];
         fields.push({
           name: fieldName,
-          label: field.label || fieldName,
+          label: fieldLabel(schema.objectName, fieldName, field.label || fieldName),
           type: mapFieldTypeToFormType(field.type),
           required: field.required || false,
           disabled: schema.readOnly || schema.mode === 'view' || field.readonly,
@@ -227,7 +270,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
 
       generated.push({
         name,
-        label: field.label || name,
+        label: fieldLabel(schema.objectName, name, field.label || name),
         type: mapFieldTypeToFormType(field.type),
         required: field.required || false,
         disabled: schema.readOnly || schema.mode === 'view' || field.readonly,
@@ -246,16 +289,17 @@ export const ModalForm: React.FC<ModalFormProps> = ({
 
   // Handle form submission
   const handleSubmit = useCallback(async (data: Record<string, any>) => {
-    if (!dataSource) {
-      if (schema.onSuccess) {
-        await schema.onSuccess(data);
+    setIsSubmitting(true);
+    try {
+      if (!dataSource) {
+        if (schema.onSuccess) {
+          await schema.onSuccess(data);
+        }
+        // Close modal on success
+        schema.onOpenChange?.(false);
+        return data;
       }
-      // Close modal on success
-      schema.onOpenChange?.(false);
-      return data;
-    }
 
-    try {
       let result;
       if (schema.mode === 'create') {
         result = await dataSource.create(schema.objectName, data);
@@ -273,6 +317,8 @@ export const ModalForm: React.FC<ModalFormProps> = ({
         schema.onError(err as Error);
       }
       throw err;
+    } finally {
+      setIsSubmitting(false);
     }
   }, [schema, dataSource]);
 
@@ -290,16 +336,24 @@ export const ModalForm: React.FC<ModalFormProps> = ({
     : 'vertical';
 
   // Build base form schema
+  // Actions are hidden inside the form renderer — we render them in a sticky footer instead
+  const showSubmit = schema.showSubmit !== false && schema.mode !== 'view';
+  const showCancel = schema.showCancel !== false;
+  const submitLabel = schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update');
+  const cancelLabel = schema.cancelText || 'Cancel';
+
   const baseFormSchema = {
     type: 'form' as const,
     layout: formLayout,
     defaultValues: formData,
-    submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
-    cancelLabel: schema.cancelText,
-    showSubmit: schema.showSubmit !== false && schema.mode !== 'view',
-    showCancel: schema.showCancel !== false,
+    submitLabel,
+    cancelLabel,
+    showSubmit,
+    showCancel,
     onSubmit: handleSubmit,
     onCancel: handleCancel,
+    showActions: false, // Hide actions — rendered in sticky footer
+    id: formId,        // Link external submit button via form attribute
   };
 
   const renderContent = () => {
@@ -314,9 +368,13 @@ export const ModalForm: React.FC<ModalFormProps> = ({
 
     if (loading) {
       return (
-        <div className="p-8 text-center">
-          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
-          <p className="mt-2 text-sm text-gray-600">Loading form...</p>
+        <div className="space-y-4" data-testid="modal-form-skeleton">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ))}
         </div>
       );
     }
@@ -325,53 +383,95 @@ export const ModalForm: React.FC<ModalFormProps> = ({
     if (schema.sections?.length) {
       return (
         <div className="space-y-6">
-          {schema.sections.map((section, index) => (
-            <FormSection
-              key={section.name || section.label || index}
-              label={section.label}
-              description={section.description}
-              columns={section.columns || 1}
-            >
-              <SchemaRenderer
-                schema={{
-                  ...baseFormSchema,
-                  fields: buildSectionFields(section),
-                  showSubmit: index === schema.sections!.length - 1 && baseFormSchema.showSubmit,
-                  showCancel: index === schema.sections!.length - 1 && baseFormSchema.showCancel,
-                }}
-              />
-            </FormSection>
-          ))}
+          {schema.sections.map((section, index) => {
+            const sectionCols = section.columns || 1;
+            return (
+              <FormSection
+                key={section.name || section.label || index}
+                label={section.label}
+                description={section.description}
+                columns={sectionCols}
+                gridClassName={CONTAINER_GRID_COLS[sectionCols]}
+              >
+                <SchemaRenderer
+                  schema={{
+                    ...baseFormSchema,
+                    fields: buildSectionFields(section),
+                    // Actions are in the sticky footer, not inside sections
+                  }}
+                />
+              </FormSection>
+            );
+          })}
         </div>
       );
     }
 
-    // Flat fields layout
+    // Reuse pre-computed auto-layout result for flat fields
+    const layoutResult = autoLayoutResult ?? applyAutoLayout(formFields, objectSchema, schema.columns, schema.mode);
+
+    // Flat fields layout — use container-query grid classes so the form
+    // responds to the modal width, not the viewport width.
+    const containerFieldClass = CONTAINER_GRID_COLS[layoutResult.columns || 1];
+
     return (
       <SchemaRenderer
         schema={{
           ...baseFormSchema,
-          fields: formFields,
-          columns: schema.columns,
+          fields: layoutResult.fields,
+          columns: layoutResult.columns,
+          ...(containerFieldClass ? { fieldContainerClass: containerFieldClass } : {}),
         }}
       />
     );
   };
 
+  const hasFooter = !loading && !error && (showSubmit || showCancel);
+
   return (
     <Dialog open={isOpen} onOpenChange={schema.onOpenChange}>
-      <DialogContent className={cn(sizeClass, 'max-h-[90vh] overflow-y-auto', className, schema.className)}>
+      <MobileDialogContent className={cn(sizeClass, 'flex flex-col h-[100dvh] sm:h-auto sm:max-h-[90vh] overflow-hidden p-0', className, schema.className)}>
         {(schema.title || schema.description) && (
-          <DialogHeader>
+          <DialogHeader className="shrink-0 px-4 pt-4 sm:px-6 sm:pt-6 pb-2 border-b">
             {schema.title && <DialogTitle>{schema.title}</DialogTitle>}
             {schema.description && <DialogDescription>{schema.description}</DialogDescription>}
           </DialogHeader>
         )}
 
-        <div className="py-2">
+        <div className="@container flex-1 overflow-y-auto px-4 sm:px-6 py-4">
           {renderContent()}
         </div>
-      </DialogContent>
+
+        {/* Sticky footer — always visible action buttons */}
+        {hasFooter && (
+          <div className="shrink-0 border-t px-4 sm:px-6 py-3 bg-background" data-testid="modal-form-footer">
+            <div className="flex flex-col sm:flex-row gap-2 sm:justify-end">
+              {showCancel && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCancel}
+                  disabled={isSubmitting}
+                  className="w-full sm:w-auto"
+                >
+                  {cancelLabel}
+                </Button>
+              )}
+              {showSubmit && (
+                <Button
+                  type="submit"
+                  form={formId}
+                  disabled={isSubmitting}
+                  className="w-full sm:w-auto"
+                >
+                  {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  {submitLabel}
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </MobileDialogContent>
     </Dialog>
   );
 };

package/src/ObjectForm.tsx

@@ -15,7 +15,7 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 import type { ObjectFormSchema, FormField, FormSchema, DataSource } from '@object-ui/types';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules, evaluateCondition, formatFileSize } from '@object-ui/fields';
 import { TabbedForm } from './TabbedForm';
 import { WizardForm } from './WizardForm';
@@ -23,6 +23,7 @@ import { SplitForm } from './SplitForm';
 import { DrawerForm } from './DrawerForm';
 import { ModalForm } from './ModalForm';
 import { FormSection } from './FormSection';
+import { applyAutoLayout } from './autoLayout';
 
 export interface ObjectFormProps {
   /**
@@ -201,6 +202,7 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
   schema,
   dataSource,
 }) => {
+  const { fieldLabel } = useSafeFieldLabel();
 
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formFields, setFormFields] = useState<FormField[]>([]);
@@ -332,7 +334,7 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
         // Auto-generate field from schema
         const formField: FormField = {
           name: name,
-          label: field.label || fieldName,
+          label: fieldLabel(schema.objectName, name, field.label || fieldName),
           type: mapFieldTypeToFormType(field.type),
           required: field.required || false,
           disabled: schema.readOnly || schema.mode === 'view' || field.readonly,
@@ -575,12 +577,18 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
     );
   }
 
+  // Apply auto-layout: infer columns and colSpan when not explicitly configured
+  const hasSections = schema.sections?.length;
+  const autoLayoutResult = !hasSections
+    ? applyAutoLayout(formFields, objectSchema, schema.columns, schema.mode)
+    : { fields: formFields, columns: schema.columns };
+
   // Default flat form (no sections)
   const formSchema: FormSchema = {
     type: 'form',
-    fields: formFields,
+    fields: autoLayoutResult.fields,
     layout: formLayout,
-    columns: schema.columns,
+    columns: autoLayoutResult.columns,
     submitLabel: schema.submitText || (schema.mode === 'create' ? 'Create' : 'Update'),
     cancelLabel: schema.cancelText,
     showSubmit: schema.showSubmit !== false && schema.mode !== 'view',

package/src/SplitForm.tsx

@@ -23,7 +23,7 @@ import {
   cn,
 } from '@object-ui/components';
 import { FormSection } from './FormSection';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 
 export interface SplitFormSectionConfig {
@@ -85,6 +85,7 @@ export const SplitForm: React.FC<SplitFormProps> = ({
   dataSource,
   className,
 }) => {
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState(true);
@@ -151,7 +152,7 @@ export const SplitForm: React.FC<SplitFormProps> = ({
         const field = objectSchema.fields[fieldName];
         fields.push({
           name: fieldName,
-          label: field.label || fieldName,
+          label: fieldLabel(schema.objectName, fieldName, field.label || fieldName),
           type: mapFieldTypeToFormType(field.type),
           required: field.required || false,
           disabled: schema.readOnly || schema.mode === 'view' || field.readonly,

package/src/TabbedForm.tsx

@@ -17,7 +17,7 @@ import React, { useState, useCallback } from 'react';
 import type { FormField, DataSource } from '@object-ui/types';
 import { Tabs, TabsContent, TabsList, TabsTrigger, cn } from '@object-ui/components';
 import { FormSection } from './FormSection';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 
 export interface FormSectionConfig {
@@ -166,6 +166,7 @@ export const TabbedForm: React.FC<TabbedFormProps> = ({
   dataSource,
   className,
 }) => {
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState(true);
@@ -232,7 +233,7 @@ export const TabbedForm: React.FC<TabbedFormProps> = ({
         const field = objectSchema.fields[fieldName];
         fields.push({
           name: fieldName,
-          label: field.label || fieldName,
+          label: fieldLabel(schema.objectName, fieldName, field.label || fieldName),
           type: mapFieldTypeToFormType(field.type),
           required: field.required || false,
           disabled: schema.readOnly || schema.mode === 'view' || field.readonly,

package/src/WizardForm.tsx

@@ -18,7 +18,7 @@ import type { FormField, DataSource } from '@object-ui/types';
 import { Button, cn } from '@object-ui/components';
 import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
 import { FormSection } from './FormSection';
-import { SchemaRenderer } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 import type { FormSectionConfig } from './TabbedForm';
 
@@ -153,6 +153,7 @@ export const WizardForm: React.FC<WizardFormProps> = ({
   dataSource,
   className,
 }) => {
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState(true);
@@ -221,7 +222,7 @@ export const WizardForm: React.FC<WizardFormProps> = ({
         const field = objectSchema.fields[fieldName];
         fields.push({
           name: fieldName,
-          label: field.label || fieldName,
+          label: fieldLabel(schema.objectName, fieldName, field.label || fieldName),
           type: mapFieldTypeToFormType(field.type),
           required: field.required || false,
           disabled: schema.readOnly || schema.mode === 'view' || field.readonly,

package/src/__tests__/EmbeddableFormPrefill.test.tsx

@@ -0,0 +1,186 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+
+// Capture the initialData passed to ObjectForm
+let capturedSchema: any = null;
+let capturedOnSuccess: ((data: any) => void) | null = null;
+
+vi.mock('../ObjectForm', () => ({
+  ObjectForm: ({ schema, dataSource }: any) => {
+    capturedSchema = schema;
+    capturedOnSuccess = schema?.onSuccess ?? null;
+    return (
+      <div>
+        <div data-testid="object-form">
+          {schema?.initialData && (
+            <div data-testid="initial-data">
+              {JSON.stringify(schema.initialData)}
+            </div>
+          )}
+        </div>
+        <button
+          data-testid="mock-submit"
+          onClick={() => schema?.onSuccess?.({ name: 'submitted' })}
+        >
+          Submit
+        </button>
+      </div>
+    );
+  },
+}));
+
+vi.mock('@object-ui/types', () => ({
+  // DataSource type is only used for typing, provide empty default
+}));
+
+import { EmbeddableForm } from '../EmbeddableForm';
+import type { EmbeddableFormConfig } from '../EmbeddableForm';
+
+const baseConfig: EmbeddableFormConfig = {
+  formId: 'test-form',
+  objectName: 'contacts',
+  title: 'Test Form',
+};
+
+describe('EmbeddableForm - URL Prefill', () => {
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    capturedSchema = null;
+    capturedOnSuccess = null;
+  });
+
+  afterEach(() => {
+    // Restore window.location
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: originalLocation,
+    });
+  });
+
+  it('reads URL search params and passes them as initialData', () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { ...originalLocation, search: '?name=John&email=john@test.com' },
+    });
+
+    render(<EmbeddableForm config={baseConfig} />);
+
+    expect(capturedSchema).not.toBeNull();
+    expect(capturedSchema.initialData).toEqual({
+      name: 'John',
+      email: 'john@test.com',
+    });
+  });
+
+  it('passes explicit prefillParams as initialData', () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { ...originalLocation, search: '' },
+    });
+
+    render(
+      <EmbeddableForm
+        config={baseConfig}
+        prefillParams={{ company: 'Acme', role: 'Admin' }}
+      />
+    );
+
+    expect(capturedSchema.initialData).toEqual({
+      company: 'Acme',
+      role: 'Admin',
+    });
+  });
+
+  it('explicit prefillParams override URL params for the same field', () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { ...originalLocation, search: '?name=URLName&email=url@test.com' },
+    });
+
+    render(
+      <EmbeddableForm
+        config={baseConfig}
+        prefillParams={{ name: 'ExplicitName' }}
+      />
+    );
+
+    // name should come from prefillParams, email should come from URL
+    expect(capturedSchema.initialData).toEqual({
+      name: 'ExplicitName',
+      email: 'url@test.com',
+    });
+  });
+
+  it('passes undefined initialData when no params are provided', () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { ...originalLocation, search: '' },
+    });
+
+    render(<EmbeddableForm config={baseConfig} />);
+
+    expect(capturedSchema.initialData).toBeUndefined();
+  });
+
+  it('shows the thank-you page after successful submission', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { ...originalLocation, search: '' },
+    });
+
+    render(
+      <EmbeddableForm
+        config={{
+          ...baseConfig,
+          thankYouPage: {
+            title: 'All Done!',
+            message: 'We got your response.',
+          },
+        }}
+      />
+    );
+
+    // Form should be visible initially
+    expect(screen.getByText('Test Form')).toBeInTheDocument();
+
+    // Click mock submit to trigger onSuccess
+    const submitBtn = screen.getByTestId('mock-submit');
+    fireEvent.click(submitBtn);
+
+    // Thank-you page should appear
+    await waitFor(() => {
+      expect(screen.getByText('All Done!')).toBeInTheDocument();
+      expect(screen.getByText('We got your response.')).toBeInTheDocument();
+    });
+
+    // Form title should no longer be visible
+    expect(screen.queryByText('Test Form')).not.toBeInTheDocument();
+  });
+
+  it('shows default thank-you message when no custom thankYouPage is configured', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { ...originalLocation, search: '' },
+    });
+
+    render(<EmbeddableForm config={baseConfig} />);
+
+    const submitBtn = screen.getByTestId('mock-submit');
+    fireEvent.click(submitBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText('Thank You!')).toBeInTheDocument();
+      expect(screen.getByText('Your submission has been received successfully.')).toBeInTheDocument();
+    });
+  });
+});