@object-ui/plugin-detail 3.1.2 → 3.1.3

package/src/__tests__/autoLayout.test.ts

@@ -37,6 +37,33 @@ describe('Detail Auto-Layout', () => {
       expect(inferDetailColumns(15)).toBe(3);
       expect(inferDetailColumns(50)).toBe(3);
     });
+
+    it('should cap to 1 column when containerWidth < 640', () => {
+      expect(inferDetailColumns(15, 500)).toBe(1);
+      expect(inferDetailColumns(5, 639)).toBe(1);
+    });
+
+    it('should cap to 2 columns when containerWidth < 900', () => {
+      expect(inferDetailColumns(15, 800)).toBe(2);
+      expect(inferDetailColumns(15, 640)).toBe(2);
+      expect(inferDetailColumns(5, 899)).toBe(2);
+    });
+
+    it('should not cap columns when containerWidth >= 900', () => {
+      expect(inferDetailColumns(15, 900)).toBe(3);
+      expect(inferDetailColumns(15, 1200)).toBe(3);
+    });
+
+    it('should not cap below field-count inference', () => {
+      // 2 fields → 1 column, containerWidth 800 would cap at 2, but inference says 1
+      expect(inferDetailColumns(2, 800)).toBe(1);
+    });
+
+    it('should still work without containerWidth (backward compatible)', () => {
+      expect(inferDetailColumns(15)).toBe(3);
+      expect(inferDetailColumns(5)).toBe(2);
+      expect(inferDetailColumns(2)).toBe(1);
+    });
   });
 
   describe('isWideFieldType', () => {
@@ -180,5 +207,22 @@ describe('Detail Auto-Layout', () => {
       expect(result.columns).toBe(2);
       expect(result.fields.length).toBe(8);
     });
+
+    it('should cap columns based on containerWidth when provided', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      // Narrow container: should cap to 1
+      const result = applyDetailAutoLayout(fields, undefined, 500);
+      expect(result.columns).toBe(1);
+    });
+
+    it('should still respect explicit schemaColumns regardless of containerWidth', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      const result = applyDetailAutoLayout(fields, 3, 500);
+      expect(result.columns).toBe(3);
+    });
   });
 });

package/src/autoLayout.ts

@@ -46,16 +46,31 @@ export function isWideFieldType(type: string): boolean {
 
 /**
  * Infer optimal number of columns for a detail section based on field count.
+ * When containerWidth is provided, limits columns for narrower viewports.
  *
- * Rules:
+ * Rules (field-count based):
  * - 0-3 fields  → 1 column
  * - 4-10 fields → 2 columns
  * - 11+ fields  → 3 columns
+ *
+ * Responsive capping (when containerWidth is supplied):
+ * - containerWidth < 640px  → max 1 column
+ * - containerWidth < 900px  → max 2 columns
+ * - containerWidth >= 900px → no cap
  */
-export function inferDetailColumns(fieldCount: number): number {
-  if (fieldCount <= 3) return 1;
-  if (fieldCount <= 10) return 2;
-  return 3;
+export function inferDetailColumns(fieldCount: number, containerWidth?: number): number {
+  let cols: number;
+  if (fieldCount <= 3) cols = 1;
+  else if (fieldCount <= 10) cols = 2;
+  else cols = 3;
+
+  // Apply responsive capping when container width is known
+  if (containerWidth !== undefined) {
+    if (containerWidth < 640) return Math.min(cols, 1);
+    if (containerWidth < 900) return Math.min(cols, 2);
+  }
+
+  return cols;
 }
 
 /**
@@ -89,11 +104,13 @@ export function applyAutoSpan(
  *
  * @param fields - The section fields
  * @param schemaColumns - User-provided columns (from DetailViewSection or DetailViewSchema)
+ * @param containerWidth - Optional container width in px for responsive column capping
  * @returns Object with processed fields and inferred columns
  */
 export function applyDetailAutoLayout(
   fields: DetailViewField[],
-  schemaColumns: number | undefined
+  schemaColumns: number | undefined,
+  containerWidth?: number
 ): { fields: DetailViewField[]; columns: number } {
   // If user explicitly set columns, respect it but still apply auto span
   if (schemaColumns !== undefined) {
@@ -101,8 +118,8 @@ export function applyDetailAutoLayout(
     return { fields: processed, columns: schemaColumns };
   }
 
-  // Infer columns from field count
-  const columns = inferDetailColumns(fields.length);
+  // Infer columns from field count (with optional container-width capping)
+  const columns = inferDetailColumns(fields.length, containerWidth);
 
   // Apply auto span for wide fields
   const processed = applyAutoSpan(fields, columns);

package/src/index.tsx

@@ -36,7 +36,7 @@ export { SubscriptionToggle } from './SubscriptionToggle';
 export { ReactionPicker } from './ReactionPicker';
 export { ThreadedReplies } from './ThreadedReplies';
 export type { DetailViewProps } from './DetailView';
-export type { DetailSectionProps } from './DetailSection';
+export type { DetailSectionProps, VirtualScrollOptions } from './DetailSection';
 export type { DetailTabsProps } from './DetailTabs';
 export type { RelatedListProps } from './RelatedList';
 export type { SectionGroupProps } from './SectionGroup';

package/dist/LookupField-DF36GvIP.js

@@ -1,96 +0,0 @@
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
-import { useState as y } from "react";
-import { h as u, X as D, D as j, i as k, B, j as C, k as O, l as F, m as I, I as L } from "./index-V_WBvcaA.js";
-function R({ value: s, onChange: n, field: x, readonly: g, ...b }) {
-  const [N, f] = y(!1), [h, v] = y(""), c = x || b.schema, o = c?.options || [], i = c.multiple || !1, d = c.display_field || "label", p = o.filter(
-    (e) => e.label.toLowerCase().includes(h.toLowerCase())
-  ), t = i ? (Array.isArray(s) ? s : []).map(
-    (e) => o.find((a) => a.value === e)
-  ).filter(Boolean) : s ? [o.find((e) => e.value === s)].filter(Boolean) : [], w = (e) => {
-    if (i) {
-      const a = Array.isArray(s) ? s : [], m = a.includes(e.value);
-      n(m ? a.filter((A) => A !== e.value) : [...a, e.value]);
-    } else
-      n(e.value), f(!1);
-  }, S = (e) => {
-    if (i) {
-      const a = Array.isArray(s) ? s : [];
-      n(a.filter((m) => m !== e));
-    } else
-      n(null);
-  };
-  return g ? t.length ? i ? /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: t.map((e, a) => /* @__PURE__ */ l(u, { variant: "outline", children: e?.[d] || e?.label }, a)) }) : /* @__PURE__ */ l("span", { className: "text-sm", children: t[0]?.[d] || t[0]?.label }) : /* @__PURE__ */ l("span", { className: "text-sm", children: "-" }) : /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-    t.length > 0 && /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: t.map((e, a) => /* @__PURE__ */ r(
-      u,
-      {
-        variant: "outline",
-        className: "gap-1",
-        children: [
-          e?.[d] || e?.label,
-          /* @__PURE__ */ l(
-            "button",
-            {
-              onClick: () => S(e?.value),
-              className: "ml-1 hover:text-destructive",
-              type: "button",
-              "aria-label": `Remove ${e?.[d] || e?.label}`,
-              children: /* @__PURE__ */ l(D, { className: "size-3" })
-            }
-          )
-        ]
-      },
-      a
-    )) }),
-    /* @__PURE__ */ r(j, { open: N, onOpenChange: f, children: [
-      /* @__PURE__ */ l(k, { asChild: !0, children: /* @__PURE__ */ r(
-        B,
-        {
-          variant: "outline",
-          className: "w-full justify-start text-left font-normal",
-          type: "button",
-          children: [
-            /* @__PURE__ */ l(C, { className: "mr-2 size-4" }),
-            t.length === 0 ? c?.placeholder || "Select..." : i ? `${t.length} selected` : "Change selection"
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ r(O, { className: "max-w-md", children: [
-        /* @__PURE__ */ l(F, { children: /* @__PURE__ */ r(I, { children: [
-          c?.label || "Select",
-          " ",
-          i && "(multiple)"
-        ] }) }),
-        /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ l(
-            L,
-            {
-              placeholder: "Search...",
-              value: h,
-              onChange: (e) => v(e.target.value),
-              className: "w-full"
-            }
-          ),
-          /* @__PURE__ */ l("div", { className: "max-h-64 overflow-y-auto space-y-1", children: p.length === 0 ? /* @__PURE__ */ l("p", { className: "text-sm text-gray-500 text-center py-4", children: "No options found" }) : p.map((e) => {
-            const a = i ? (Array.isArray(s) ? s : []).includes(e.value) : s === e.value;
-            return /* @__PURE__ */ r(
-              "button",
-              {
-                onClick: () => w(e),
-                className: `w-full text-left px-3 py-2 rounded-md text-sm hover:bg-gray-100 flex items-center justify-between ${a ? "bg-blue-50 text-blue-700" : ""}`,
-                type: "button",
-                children: [
-                  /* @__PURE__ */ l("span", { children: e.label }),
-                  a && /* @__PURE__ */ l(u, { variant: "default", className: "ml-2", children: "Selected" })
-                ]
-              },
-              e.value
-            );
-          }) })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-export {
-  R as LookupField
-};