@asteby/metacore-runtime-react 37.4.0 → 37.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 37.5.0
+
+### Minor Changes
+
+- 453b82b: Contraparte de lectura de `DynamicMultiSelectField`: una columna `ref` cuyo valor es un array jsonb de ids (campo declarado con `multiple: true` al escribir) ahora se renderiza como una lista de badges resueltos por id (`RelationIdListCell`) en vez de intentar leer el sibling `{value,label}` de una FK simple — antes ese caso caía sin manejar en `RelationCell` y mostraba vacío/roto.
+
 ## 37.4.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":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AA0C9C,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;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAsDD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OA0C5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAwFhF;;;;;;;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;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACpC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,MAAM,GACjE,MAAM,CAcR;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAOxE;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,GACzB,KAAK,gBAAgB,EACrB,KAAK,GAAG,EACR,OAAO,GAAG,EACV,mBAAe,KAChB,MAAM,GAAG,SAcX,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOzE,CAAA;AAgKD;;;;GAIG;AACH;;;;;GAKG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,KAAK,EAAE,OAAO,CAAA;IACd,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,CAgCA,CAAA;AAED,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CA0qBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"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"}

package/dist/dynamic-columns.js

@@ -29,6 +29,7 @@ import { OptionsContext } from './options-context';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
 import { CollectionCell } from './collection-cell';
 import { isNilUuid, normalizeNilUuid } from './nil-uuid';
+import { useOptionsResolver } from './use-options-resolver';
 import { isColumnVisibleInTable } from './column-visibility';
 const defaultGetImageUrl = (path) => path;
 const getNestedValue = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
@@ -265,6 +266,24 @@ const renderRelationBadges = (items, col) => {
             return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1", children: [iconValue && (_jsx(DynamicIcon, { name: iconValue, className: "h-3 w-3" })), _jsx("span", { children: label })] }, `${col.key}-${idx}`));
         }) }));
 };
+/**
+ * Read-side counterpart of `DynamicMultiSelectField` (dynamic-multi-select-
+ * field.tsx): a `ref` column whose value is a plain jsonb array of target ids
+ * (field.multiple:true at write time) rather than the single-FK sibling
+ * `{value,label}` object `RelationCell` expects. There is no per-row backend
+ * resolution for this shape, so this cell resolves labels itself — one
+ * `useOptionsResolver` page (id → label) shared across every row of the
+ * column via `OptionsContext` — and renders each id as a badge.
+ */
+const RelationIdListCell = ({ ids, ref: relTarget }) => {
+    const { options } = useOptionsResolver({ modelKey: '', fieldKey: 'id', ref: relTarget, limit: 200 });
+    if (ids.length === 0)
+        return _jsx(EmptyCell, {});
+    return (_jsx("div", { className: "flex flex-wrap gap-1", children: ids.map((id) => {
+            const opt = options.find((o) => String(o.id) === String(id));
+            return (_jsx(Badge, { variant: "outline", children: opt ? opt.label : id.slice(0, 8) }, id));
+        }) }));
+};
 const BadgeWithEndpointOptions = ({ endpoint, value, getImageUrl }) => {
     const { optionsMap } = React.useContext(OptionsContext);
     const options = optionsMap.get(endpoint) || [];
@@ -711,6 +730,13 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                     // `row[<key w/o _id>] = { value, label }` sibling.
                     if (renderAs === 'relation' ||
                         (col.ref && !col.options?.length && renderAs !== 'badge' && renderAs !== 'status')) {
+                        // A `ref` column backed by a jsonb array (field.multiple:
+                        // true at write time — see DynamicMultiSelectField) has no
+                        // resolved sibling object; RelationCell expects one. Route
+                        // it to the id-list cell instead.
+                        if (Array.isArray(value)) {
+                            return _jsx(RelationIdListCell, { ids: value.map(String), ref: col.ref });
+                        }
                         return _jsx(RelationCell, { col: col, row: row.original, getImageUrl: getImageUrl });
                     }
                     // Option/type column: a `select`-style column ships its

package/package.json

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

package/src/dynamic-columns.tsx

@@ -56,6 +56,7 @@ import { OptionsContext } from './options-context'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
 import { CollectionCell } from './collection-cell'
 import { isNilUuid, normalizeNilUuid } from './nil-uuid'
+import { useOptionsResolver } from './use-options-resolver'
 import type { TableMetadata, ColumnDefinition } from './types'
 import { isColumnVisibleInTable } from './column-visibility'
 import type {
@@ -381,6 +382,32 @@ const renderRelationBadges = (items: any, col: ColumnDefinition) => {
     )
 }
 
+/**
+ * Read-side counterpart of `DynamicMultiSelectField` (dynamic-multi-select-
+ * field.tsx): a `ref` column whose value is a plain jsonb array of target ids
+ * (field.multiple:true at write time) rather than the single-FK sibling
+ * `{value,label}` object `RelationCell` expects. There is no per-row backend
+ * resolution for this shape, so this cell resolves labels itself — one
+ * `useOptionsResolver` page (id → label) shared across every row of the
+ * column via `OptionsContext` — and renders each id as a badge.
+ */
+const RelationIdListCell: React.FC<{ ids: string[]; ref: string }> = ({ ids, ref: relTarget }) => {
+    const { options } = useOptionsResolver({ modelKey: '', fieldKey: 'id', ref: relTarget, limit: 200 })
+    if (ids.length === 0) return <EmptyCell />
+    return (
+        <div className="flex flex-wrap gap-1">
+            {ids.map((id) => {
+                const opt = options.find((o) => String(o.id) === String(id))
+                return (
+                    <Badge key={id} variant="outline">
+                        {opt ? opt.label : id.slice(0, 8)}
+                    </Badge>
+                )
+            })}
+        </div>
+    )
+}
+
 const BadgeWithEndpointOptions: React.FC<{
     endpoint: string
     value: any
@@ -1016,6 +1043,13 @@ export function makeDefaultGetDynamicColumns(
                         renderAs === 'relation' ||
                         (col.ref && !col.options?.length && renderAs !== 'badge' && renderAs !== 'status')
                     ) {
+                        // A `ref` column backed by a jsonb array (field.multiple:
+                        // true at write time — see DynamicMultiSelectField) has no
+                        // resolved sibling object; RelationCell expects one. Route
+                        // it to the id-list cell instead.
+                        if (Array.isArray(value)) {
+                            return <RelationIdListCell ids={value.map(String)} ref={col.ref!} />
+                        }
                         return <RelationCell col={col} row={row.original} getImageUrl={getImageUrl} />
                     }