@object-ui/plugin-detail 3.1.1 → 3.1.2

package/dist/src/DetailSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailSection.d.ts","sourceRoot":"","sources":["../../src/DetailSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,OAAO,KAAK,EAAE,iBAAiB,IAAI,qBAAqB,EAAkC,MAAM,kBAAkB,CAAC;AAKnH,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2OtD,CAAC"}
+{"version":3,"file":"DetailSection.d.ts","sourceRoot":"","sources":["../../src/DetailSection.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,OAAO,KAAK,EAAE,iBAAiB,IAAI,qBAAqB,EAAkC,MAAM,kBAAkB,CAAC;AAKnH;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAYxF;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,qBAAqB,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuOtD,CAAC"}

package/dist/src/DetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailView.d.ts","sourceRoot":"","sources":["../../src/DetailView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMrE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAChF;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwuBhD,CAAC"}
+{"version":3,"file":"DetailView.d.ts","sourceRoot":"","sources":["../../src/DetailView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMrE,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAChF;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+uBhD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-detail",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "type": "module",
   "license": "MIT",
   "description": "DetailView plugin for Object UI - comprehensive detail page with sections, tabs, and related lists",
@@ -25,11 +25,11 @@
   },
   "dependencies": {
     "lucide-react": "^0.576.0",
-    "@object-ui/components": "3.1.1",
-    "@object-ui/fields": "3.1.1",
-    "@object-ui/core": "3.1.1",
-    "@object-ui/react": "3.1.1",
-    "@object-ui/types": "3.1.1"
+    "@object-ui/components": "3.1.2",
+    "@object-ui/core": "3.1.2",
+    "@object-ui/fields": "3.1.2",
+    "@object-ui/types": "3.1.2",
+    "@object-ui/react": "3.1.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/DetailSection.tsx

@@ -31,6 +31,28 @@ import { applyDetailAutoLayout } from './autoLayout';
 import { useDetailTranslation } from './useDetailTranslation';
 import { useSafeFieldLabel } from '@object-ui/react';
 
+/**
+ * Compute responsive col-span classes so that col-span never exceeds the
+ * visible column count at each Tailwind breakpoint.
+ *
+ * For columns=1: no span class (always single column)
+ * For columns=2: md:col-span-{min(span,2)}
+ * For columns>=3: md:col-span-{min(span,2)} lg:col-span-{min(span,3)}
+ */
+export function getResponsiveSpanClass(span: number | undefined, columns: number): string {
+  if (!span || span <= 1 || columns <= 1) return '';
+
+  if (columns === 2) {
+    return span >= 2 ? 'md:col-span-2' : '';
+  }
+
+  // columns >= 3: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
+  if (span === 2) return 'md:col-span-2';
+  if (span >= 3) return 'md:col-span-2 lg:col-span-3';
+
+  return '';
+}
+
 export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
@@ -67,6 +89,23 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     });
   }, []);
 
+  // Filter out empty fields when hideEmpty is set
+  const visibleFields = section.hideEmpty
+    ? section.fields.filter((field) => {
+        const value = data?.[field.name] ?? field.value;
+        return value !== null && value !== undefined && value !== '';
+      })
+    : section.fields;
+
+  // Hide entire section when all fields are empty
+  if (visibleFields.length === 0) return null;
+
+  // Apply auto-layout: infer columns and auto-span wide fields
+  const { fields: layoutFields, columns: effectiveColumns } = applyDetailAutoLayout(
+    visibleFields,
+    section.columns
+  );
+
   const renderField = (field: DetailViewField) => {
     const value = data?.[field.name] ?? field.value;
     
@@ -75,13 +114,9 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
       return <SchemaRenderer schema={field.render} data={{ ...data, value }} />;
     }
 
-    // Calculate span class based on field.span value
-    const spanClass = field.span === 1 ? 'col-span-1' :
-                      field.span === 2 ? 'col-span-2' :
-                      field.span === 3 ? 'col-span-3' :
-                      field.span === 4 ? 'col-span-4' :
-                      field.span === 5 ? 'col-span-5' :
-                      field.span === 6 ? 'col-span-6' : '';
+    // Calculate responsive span class so col-span never exceeds the visible
+    // column count at each breakpoint, preventing implicit columns on mobile.
+    const spanClass = getResponsiveSpanClass(field.span, effectiveColumns);
 
     const displayValue = (() => {
       if (value === null || value === undefined) return <span className="text-muted-foreground/50 text-xs italic">—</span>;
@@ -178,23 +213,6 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     );
   };
 
-  // Filter out empty fields when hideEmpty is set
-  const visibleFields = section.hideEmpty
-    ? section.fields.filter((field) => {
-        const value = data?.[field.name] ?? field.value;
-        return value !== null && value !== undefined && value !== '';
-      })
-    : section.fields;
-
-  // Hide entire section when all fields are empty
-  if (visibleFields.length === 0) return null;
-
-  // Apply auto-layout: infer columns and auto-span wide fields
-  const { fields: layoutFields, columns: effectiveColumns } = applyDetailAutoLayout(
-    visibleFields,
-    section.columns
-  );
-
   const content = (
     <div 
       className={cn(

package/src/DetailView.tsx

@@ -130,14 +130,8 @@ export const DetailView: React.FC<DetailViewProps> = ({
           ? dataSource.findOne(objectName, resourceId, params)
           : dataSource.findOne(objectName, resourceId);
 
-        return findOnePromise.then((result) => {
-          if (!isMounted) return;
-          if (result) {
-            setData(result);
-            setLoading(false);
-            return;
-          }
-          // Fallback: try alternate ID format for backward compatibility
+        // Helper: try alternate ID format (strip or prepend objectName prefix)
+        const tryAltId = () => {
           const resIdStr = String(resourceId);
           const altId = resIdStr.startsWith(prefix)
             ? resIdStr.slice(prefix.length)   // strip prefix
@@ -156,6 +150,19 @@ export const DetailView: React.FC<DetailViewProps> = ({
               setLoading(false);
             }
           });
+        };
+
+        return findOnePromise
+          .catch(() => null) // Convert any error to null to trigger alternate ID fallback
+          .then((result) => {
+          if (!isMounted) return;
+          if (result) {
+            setData(result);
+            setLoading(false);
+            return;
+          }
+          // Fallback: try alternate ID format for backward compatibility
+          return tryAltId();
         });
       }).catch((err) => {
          if (isMounted) {

package/src/__tests__/DetailSection.test.tsx

@@ -8,7 +8,7 @@
 
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { DetailSection } from '../DetailSection';
+import { DetailSection, getResponsiveSpanClass } from '../DetailSection';
 
 describe('DetailSection', () => {
   it('should render text fields as plain text', () => {
@@ -317,4 +317,113 @@ describe('DetailSection', () => {
     // Should use 'text' renderer, not 'number'
     expect(screen.getByText('Alice')).toBeInTheDocument();
   });
+
+  it('should use responsive span classes for wide fields in 3-column layout', () => {
+    const section = {
+      title: 'Wide Fields',
+      fields: Array.from({ length: 12 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: i === 5 ? 'textarea' : 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.className).toContain('lg:grid-cols-3');
+    // Wide field (textarea) should have responsive span, not bare col-span-3
+    const fields = container.querySelectorAll('[class*="col-span"]');
+    fields.forEach((field) => {
+      // No bare col-span-3 at base level — must be lg: prefixed
+      const classes = field.className.split(/\s+/);
+      const hasBareSpan3 = classes.some((c: string) => c === 'col-span-3');
+      expect(hasBareSpan3).toBe(false);
+    });
+  });
+
+  it('should use responsive span classes for wide fields in 2-column layout', () => {
+    const section = {
+      title: 'Wide Fields',
+      fields: [
+        { name: 'a', label: 'A', type: 'text' },
+        { name: 'b', label: 'B', type: 'text' },
+        { name: 'c', label: 'C', type: 'text' },
+        { name: 'd', label: 'D', type: 'text' },
+        { name: 'notes', label: 'Notes', type: 'textarea' },
+      ],
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid!.className).toContain('md:grid-cols-2');
+    // Wide field should have md:col-span-2, not bare col-span-2
+    const fields = container.querySelectorAll('[class*="col-span"]');
+    fields.forEach((field) => {
+      const classes = field.className.split(/\s+/);
+      const hasBareSpan2 = classes.some((c: string) => c === 'col-span-2');
+      expect(hasBareSpan2).toBe(false);
+    });
+  });
+
+  it('should not apply col-span at base breakpoint to prevent implicit grid columns on mobile', () => {
+    const section = {
+      title: 'Mobile Safe',
+      fields: Array.from({ length: 15 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: i === 0 ? 'textarea' : 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    // Ensure no bare col-span-N (N>1) classes without responsive prefix
+    const allElements = container.querySelectorAll('*');
+    allElements.forEach((el) => {
+      const classes = el.className?.split?.(/\s+/) || [];
+      classes.forEach((cls: string) => {
+        if (cls.match(/^col-span-[2-9]$/)) {
+          throw new Error(`Found bare "${cls}" class without responsive prefix — would break mobile single-column layout`);
+        }
+      });
+    });
+  });
+});
+
+describe('getResponsiveSpanClass', () => {
+  it('should return empty string for no span', () => {
+    expect(getResponsiveSpanClass(undefined, 2)).toBe('');
+  });
+
+  it('should return empty string for span=1', () => {
+    expect(getResponsiveSpanClass(1, 3)).toBe('');
+  });
+
+  it('should return empty string for 1-column layout', () => {
+    expect(getResponsiveSpanClass(3, 1)).toBe('');
+  });
+
+  it('should return md:col-span-2 for span=2 in 2-column layout', () => {
+    expect(getResponsiveSpanClass(2, 2)).toBe('md:col-span-2');
+  });
+
+  it('should cap span to 2 in 2-column layout', () => {
+    expect(getResponsiveSpanClass(3, 2)).toBe('md:col-span-2');
+    expect(getResponsiveSpanClass(6, 2)).toBe('md:col-span-2');
+  });
+
+  it('should return md:col-span-2 for span=2 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(2, 3)).toBe('md:col-span-2');
+  });
+
+  it('should return responsive classes for span=3 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(3, 3)).toBe('md:col-span-2 lg:col-span-3');
+  });
+
+  it('should cap span to 3 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(6, 3)).toBe('md:col-span-2 lg:col-span-3');
+  });
 });

package/src/__tests__/DetailView.test.tsx

@@ -539,6 +539,37 @@ describe('DetailView', () => {
     expect(onBack).toHaveBeenCalled();
   });
 
+  it('should try fallback with alternate ID when first findOne throws an error', async () => {
+    let callCount = 0;
+    const mockDataSource = {
+      findOne: vi.fn().mockImplementation((_obj: string, id: string) => {
+        callCount++;
+        if (callCount === 1) {
+          // First call throws (simulate server error)
+          return Promise.reject(new Error('Server error'));
+        }
+        // Second call (fallback) succeeds
+        return Promise.resolve({ name: 'Alice' });
+      }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'contact-123',
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} />);
+    // The fallback should find the record using the stripped ID
+    expect(await findByText('Alice')).toBeInTheDocument();
+    // findOne should be called twice: first with original ID, then with stripped prefix
+    expect(mockDataSource.findOne).toHaveBeenCalledTimes(2);
+    expect(mockDataSource.findOne).toHaveBeenNthCalledWith(1, 'contact', 'contact-123');
+    expect(mockDataSource.findOne).toHaveBeenNthCalledWith(2, 'contact', '123');
+  });
+
   it('should call findOne with $expand when objectSchema has lookup fields', async () => {
     const mockDataSource = {
       getObjectSchema: vi.fn().mockResolvedValue({