@asteby/metacore-runtime-react 18.8.0 → 18.9.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @asteby/metacore-runtime-react
 
+## 18.9.0
+
+### Minor Changes
+
+- 5becc8e: Add a `reference` display type for SAP-style polymorphic source-document columns.
+
+  A column declared `display: "reference"` (e.g. `inventory_movements.source_id`,
+  whose target document varies by a `source_kind` discriminator) now renders a
+  navigable chip resolved by the backend. The new `ReferenceCell` reads the
+  resolved sibling `row[<key w/o _id>] = { value, label, kind, table }`: it shows
+  the `label` when present, else a short id (first 8 chars of the value), and —
+  when the sibling carries a target `table` and `value` — wraps the chip in a
+  plain `<a href="/m/<table>/<value>">` so the host router navigates to the source
+  document. Mirrors `RelationCell`'s chip look (subtle tint, dark-mode aware) and
+  is domain-agnostic: any polymorphic FK carrying the `reference` renderer works
+  without per-addon code.
+
 ## 18.8.0
 
 ### Minor Changes

package/dist/dynamic-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAgC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAoErD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AA0ED;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAwmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAgC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAoErD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAqKD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAinBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -340,6 +340,42 @@ const RelationCell = ({ col, row, getImageUrl }) => {
     const chipStyles = relationChipStyles(display, { isDark });
     return (_jsxs("span", { className: "inline-flex max-w-[220px] items-center gap-1.5 rounded-md px-2 py-0.5 text-sm font-medium", style: chipStyles, title: display, children: [image && (_jsx(RelationThumbnail, { src: image, alt: display, getImageUrl: getImageUrl, size: 18 })), _jsx("span", { className: "truncate", children: display })] }));
 };
+/**
+ * Renders a SAP-style polymorphic source-document reference as a navigable
+ * chip. Reads the backend-resolved sibling `row[<key w/o _id>] =
+ * { value, label, kind, table }` (see `relationKeyFor`) — the discriminator
+ * (`source_kind`) selects the target model and the backend stamps the resolved
+ * SQL `table` so the cell can link to `/m/<table>/<value>` (the host router
+ * handles `/m/:model/:id`). Shows the resolved `label` when present, else a
+ * short id (first 8 chars of the value). Domain-agnostic: any polymorphic FK
+ * (`source_id`, `document_id`, …) carrying `display: "reference"` works without
+ * per-addon code. Mirrors `RelationCell`'s chip look (subtle tint, dark-mode
+ * aware) so references read consistently next to plain relations.
+ */
+const ReferenceCell = ({ col, row }) => {
+    const isDark = useIsDarkTheme();
+    const sibling = getNestedValue(row, relationKeyFor(col));
+    const value = (sibling && typeof sibling === 'object' ? sibling.value : undefined) ??
+        getNestedValue(row, col.key);
+    if (value === undefined || value === null || value === '' || isNilUuid(value)) {
+        return _jsx(EmptyCell, {});
+    }
+    const label = sibling && typeof sibling === 'object' ? sibling.label : undefined;
+    const kind = sibling && typeof sibling === 'object' ? sibling.kind : undefined;
+    const table = sibling && typeof sibling === 'object' ? sibling.table : undefined;
+    const displayText = label !== undefined && label !== null && label !== ''
+        ? String(label)
+        : `${String(value).slice(0, 8)}`;
+    // Tint keyed on the discriminator (when present) so e.g. sale/transfer/
+    // adjustment chips read as visually distinct families; falls back to the
+    // display text. Same subtle relation-chip look + dark-mode handling.
+    const chipStyles = relationChipStyles(String(kind || displayText), { isDark });
+    const className = 'inline-flex max-w-[220px] items-center gap-1 rounded-md px-2 py-0.5 text-sm font-medium';
+    if (table && value) {
+        return (_jsx("a", { href: `/m/${table}/${value}`, onClick: (e) => e.stopPropagation(), className: `${className} hover:underline`, style: chipStyles, title: displayText, children: _jsx("span", { className: "truncate", children: displayText }) }));
+    }
+    return (_jsx("span", { className: className, style: chipStyles, title: displayText, children: _jsx("span", { className: "truncate", children: displayText }) }));
+};
 /**
  * Generic avatar-style cell: round/rounded photo (or initials fallback) +
  * primary name + optional subtitle. Backs the `avatar`/`search` columns as
@@ -444,6 +480,14 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                         // `in_progress` reads as "In Progress" instead of raw.
                         return (_jsx(Badge, { variant: "outline", className: "border-0", style: styles, children: humanizeToken(sv) }));
                     }
+                    // Polymorphic source-document reference (SAP-style). Reads
+                    // the backend-resolved `{ value, label, kind, table }`
+                    // sibling and renders a navigable `/m/<table>/<value>` chip.
+                    // Checked before the relation branch so a polymorphic FK
+                    // carrying a `ref` still routes here.
+                    if (renderAs === 'reference') {
+                        return _jsx(ReferenceCell, { col: col, row: row.original });
+                    }
                     // Resolved FK relation chip. Triggers on an explicit
                     // `cellStyle: 'relation'` or on any column carrying a `ref`
                     // (a belongs_to FK) that isn't being rendered as an

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.8.0",
+  "version": "18.9.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.5.0"
+    "@asteby/metacore-ui": "2.5.0",
+    "@asteby/metacore-sdk": "3.2.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-columns.tsx

@@ -509,6 +509,66 @@ const RelationCell: React.FC<{
     )
 }
 
+/**
+ * Renders a SAP-style polymorphic source-document reference as a navigable
+ * chip. Reads the backend-resolved sibling `row[<key w/o _id>] =
+ * { value, label, kind, table }` (see `relationKeyFor`) — the discriminator
+ * (`source_kind`) selects the target model and the backend stamps the resolved
+ * SQL `table` so the cell can link to `/m/<table>/<value>` (the host router
+ * handles `/m/:model/:id`). Shows the resolved `label` when present, else a
+ * short id (first 8 chars of the value). Domain-agnostic: any polymorphic FK
+ * (`source_id`, `document_id`, …) carrying `display: "reference"` works without
+ * per-addon code. Mirrors `RelationCell`'s chip look (subtle tint, dark-mode
+ * aware) so references read consistently next to plain relations.
+ */
+const ReferenceCell: React.FC<{
+    col: ColumnDefinition
+    row: any
+}> = ({ col, row }) => {
+    const isDark = useIsDarkTheme()
+    const sibling = getNestedValue(row, relationKeyFor(col))
+    const value =
+        (sibling && typeof sibling === 'object' ? sibling.value : undefined) ??
+        getNestedValue(row, col.key)
+    if (value === undefined || value === null || value === '' || isNilUuid(value)) {
+        return <EmptyCell />
+    }
+    const label =
+        sibling && typeof sibling === 'object' ? sibling.label : undefined
+    const kind =
+        sibling && typeof sibling === 'object' ? sibling.kind : undefined
+    const table =
+        sibling && typeof sibling === 'object' ? sibling.table : undefined
+    const displayText =
+        label !== undefined && label !== null && label !== ''
+            ? String(label)
+            : `${String(value).slice(0, 8)}`
+    // Tint keyed on the discriminator (when present) so e.g. sale/transfer/
+    // adjustment chips read as visually distinct families; falls back to the
+    // display text. Same subtle relation-chip look + dark-mode handling.
+    const chipStyles = relationChipStyles(String(kind || displayText), { isDark })
+    const className =
+        'inline-flex max-w-[220px] items-center gap-1 rounded-md px-2 py-0.5 text-sm font-medium'
+    if (table && value) {
+        return (
+            <a
+                href={`/m/${table}/${value}`}
+                onClick={(e) => e.stopPropagation()}
+                className={`${className} hover:underline`}
+                style={chipStyles}
+                title={displayText}
+            >
+                <span className="truncate">{displayText}</span>
+            </a>
+        )
+    }
+    return (
+        <span className={className} style={chipStyles} title={displayText}>
+            <span className="truncate">{displayText}</span>
+        </span>
+    )
+}
+
 /**
  * Generic avatar-style cell: round/rounded photo (or initials fallback) +
  * primary name + optional subtitle. Backs the `avatar`/`search` columns as
@@ -682,6 +742,15 @@ export function makeDefaultGetDynamicColumns(
                         )
                     }
 
+                    // Polymorphic source-document reference (SAP-style). Reads
+                    // the backend-resolved `{ value, label, kind, table }`
+                    // sibling and renders a navigable `/m/<table>/<value>` chip.
+                    // Checked before the relation branch so a polymorphic FK
+                    // carrying a `ref` still routes here.
+                    if (renderAs === 'reference') {
+                        return <ReferenceCell col={col} row={row.original} />
+                    }
+
                     // Resolved FK relation chip. Triggers on an explicit
                     // `cellStyle: 'relation'` or on any column carrying a `ref`
                     // (a belongs_to FK) that isn't being rendered as an