@asteby/metacore-runtime-react 46.2.1 → 46.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 46.2.3
+
+### Patch Changes
+
+- ab15b46: El campo de fecha de un diálogo de acción marca aria-invalid cuando el servidor rechaza ese campo.
+
+## 46.2.2
+
+### Patch Changes
+
+- 97f77eb: Una relación muchos-a-muchos distingue «sin permiso» y un error de carga de una lista vacía, igual que la subtabla de uno-a-muchos.
+
 ## 46.2.1
 
 ### Patch Changes

package/dist/action-modal-dispatcher.js

@@ -996,7 +996,7 @@ formValues, record, fieldErrors) {
         case 'date':
             // Modern shadcn Calendar in a Popover (portaled, never clipped by the
             // modal) instead of the native, dated, easily-cut <input type=date>.
-            return _jsx(DynamicDateField, { field: field, value: value, onChange: onChange });
+            return _jsx(DynamicDateField, { field: field, value: value, onChange: onChange, invalid: invalid });
         default:
             return _jsx(Input, { id: field.key, type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text', value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, "aria-invalid": invalid || undefined, className: invalidCls || undefined });
     }

package/dist/dynamic-date-field.d.ts

@@ -3,7 +3,9 @@ export interface DynamicDateFieldProps {
     field: ActionFieldDef;
     value: any;
     onChange: (v: any) => void;
+    /** Server or client validation failed for this field (PIT-046). */
+    invalid?: boolean;
 }
-export declare function DynamicDateField({ field, value, onChange }: DynamicDateFieldProps): import("react").JSX.Element;
+export declare function DynamicDateField({ field, value, onChange, invalid }: DynamicDateFieldProps): import("react").JSX.Element;
 export default DynamicDateField;
 //# sourceMappingURL=dynamic-date-field.d.ts.map

package/dist/dynamic-date-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-date-field.d.ts","sourceRoot":"","sources":["../src/dynamic-date-field.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAsBD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAkCjF;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"dynamic-date-field.d.ts","sourceRoot":"","sources":["../src/dynamic-date-field.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB;AAsBD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,qBAAqB,+BAsC1F;AAED,eAAe,gBAAgB,CAAA"}

package/dist/dynamic-date-field.js

@@ -35,10 +35,11 @@ function label(d) {
         return toISO(d);
     }
 }
-export function DynamicDateField({ field, value, onChange }) {
+export function DynamicDateField({ field, value, onChange, invalid }) {
     const [open, setOpen] = useState(false);
     const selected = toDate(value);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", id: field.key, "data-empty": !selected, className: "w-full justify-start text-start font-normal data-[empty=true]:text-muted-foreground", children: [_jsx(CalendarIcon, { className: "mr-2 size-4 shrink-0 opacity-50" }), _jsx("span", { className: "truncate", children: selected ? label(selected) : (field.placeholder || 'Elegí una fecha') })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: selected, defaultMonth: selected, onSelect: (d) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", id: field.key, "data-empty": !selected, "aria-invalid": invalid || undefined, className: 'w-full justify-start text-start font-normal data-[empty=true]:text-muted-foreground' +
+                        (invalid ? ' border-destructive ring-1 ring-destructive/30' : ''), children: [_jsx(CalendarIcon, { className: "mr-2 size-4 shrink-0 opacity-50" }), _jsx("span", { className: "truncate", children: selected ? label(selected) : (field.placeholder || 'Elegí una fecha') })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: selected, defaultMonth: selected, onSelect: (d) => {
                         onChange(d ? toISO(d) : '');
                         setOpen(false);
                     } }) })] }));

package/dist/dynamic-relation.js

@@ -341,6 +341,9 @@ function ManyToManyRelation({ kind, through, references, foreignKey, referencesK
     const [pivotRows, setPivotRows] = useState([]);
     const [loading, setLoading] = useState(true);
     const [syncing, setSyncing] = useState(false);
+    // Same distinction as the 1:N sub-table (PIT-045): a 403 is not "no rows",
+    // and an empty pivot is not "sin permiso".
+    const [fetchErrorStatus, setFetchErrorStatus] = useState(null);
     // Canonical path: SDK options resolver. Only fires when no legacy
     // override is set. The hook is a no-op when `useResolver` is false.
     const resolved = useOptionsResolver({
@@ -366,6 +369,7 @@ function ManyToManyRelation({ kind, through, references, foreignKey, referencesK
                 tasks.push(api.get(legacyTargetPath));
             const results = await Promise.all(tasks);
             const pivotRes = results[0];
+            setFetchErrorStatus(null);
             if (pivotRes.data.success)
                 setPivotRows(pivotRes.data.data || []);
             let cursor = 1;
@@ -384,6 +388,7 @@ function ManyToManyRelation({ kind, through, references, foreignKey, referencesK
         }
         catch (err) {
             console.error('DynamicRelation m2m fetch error', err);
+            setFetchErrorStatus(err?.response?.status ?? 0);
         }
         finally {
             setLoading(false);
@@ -449,5 +454,7 @@ function ManyToManyRelation({ kind, through, references, foreignKey, referencesK
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [api, canCreate, canDelete, fetchPivotAndMeta, useResolver, resolved, foreignKey, filtersKey, onChange, parentId, pivotIndex, pivotPath, refKey, selectedIds, syncing]);
-    return (_jsxs("div", { className: className, "data-relation-kind": kind, "data-relation-through": through, "data-relation-references": references, children: [labels.title && (_jsx("div", { className: "pb-3", children: _jsx("h3", { className: "text-sm font-medium", children: labels.title }) })), (loading || (useResolver && resolved.loading)) ? (_jsx(Skeleton, { className: "h-10 w-full" })) : options.length === 0 ? (_jsx("div", { className: "text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30", children: labels.emptyState })) : (_jsx(MultiSelect, { options: options, selected: selectedIds, onChange: handleChange, placeholder: labels.selectPlaceholder, searchPlaceholder: labels.selectSearchPlaceholder, emptyMessage: labels.selectEmpty }))] }));
+    return (_jsxs("div", { className: className, "data-relation-kind": kind, "data-relation-through": through, "data-relation-references": references, children: [labels.title && (_jsx("div", { className: "pb-3", children: _jsx("h3", { className: "text-sm font-medium", children: labels.title }) })), (loading || (useResolver && resolved.loading)) ? (_jsx(Skeleton, { className: "h-10 w-full" })) : fetchErrorStatus !== null ? (_jsx("div", { className: "text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30", children: fetchErrorStatus === 403
+                    ? (labels.forbiddenState ?? 'Sin permiso para ver estos registros.')
+                    : (labels.errorState ?? 'No se pudieron cargar los registros relacionados.') })) : options.length === 0 ? (_jsx("div", { className: "text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30", children: labels.emptyState })) : (_jsx(MultiSelect, { options: options, selected: selectedIds, onChange: handleChange, placeholder: labels.selectPlaceholder, searchPlaceholder: labels.selectSearchPlaceholder, emptyMessage: labels.selectEmpty }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "46.2.1",
+  "version": "46.2.3",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/action-modal-dispatcher.tsx

@@ -1501,7 +1501,7 @@ function renderField(
         case 'date':
             // Modern shadcn Calendar in a Popover (portaled, never clipped by the
             // modal) instead of the native, dated, easily-cut <input type=date>.
-            return <DynamicDateField field={field} value={value} onChange={onChange} />
+            return <DynamicDateField field={field} value={value} onChange={onChange} invalid={invalid} />
         default:
             return <Input id={field.key} type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'} value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={field.placeholder} aria-invalid={invalid || undefined} className={invalidCls || undefined} />
     }

package/src/dynamic-date-field.tsx

@@ -27,6 +27,8 @@ export interface DynamicDateFieldProps {
     field: ActionFieldDef
     value: any
     onChange: (v: any) => void
+    /** Server or client validation failed for this field (PIT-046). */
+    invalid?: boolean
 }
 
 const toDate = parseCalendarDate
@@ -49,7 +51,7 @@ function label(d: Date | undefined): string {
     }
 }
 
-export function DynamicDateField({ field, value, onChange }: DynamicDateFieldProps) {
+export function DynamicDateField({ field, value, onChange, invalid }: DynamicDateFieldProps) {
     const [open, setOpen] = useState(false)
     const selected = toDate(value)
 
@@ -61,7 +63,11 @@ export function DynamicDateField({ field, value, onChange }: DynamicDateFieldPro
                     variant="outline"
                     id={field.key}
                     data-empty={!selected}
-                    className="w-full justify-start text-start font-normal data-[empty=true]:text-muted-foreground"
+                    aria-invalid={invalid || undefined}
+                    className={
+                        'w-full justify-start text-start font-normal data-[empty=true]:text-muted-foreground' +
+                        (invalid ? ' border-destructive ring-1 ring-destructive/30' : '')
+                    }
                 >
                     <CalendarIcon className="mr-2 size-4 shrink-0 opacity-50" />
                     <span className="truncate">

package/src/dynamic-relation.tsx

@@ -718,6 +718,9 @@ function ManyToManyRelation({
     const [pivotRows, setPivotRows] = useState<any[]>([])
     const [loading, setLoading] = useState(true)
     const [syncing, setSyncing] = useState(false)
+    // Same distinction as the 1:N sub-table (PIT-045): a 403 is not "no rows",
+    // and an empty pivot is not "sin permiso".
+    const [fetchErrorStatus, setFetchErrorStatus] = useState<number | null>(null)
 
     // Canonical path: SDK options resolver. Only fires when no legacy
     // override is set. The hook is a no-op when `useResolver` is false.
@@ -744,6 +747,7 @@ function ManyToManyRelation({
             if (!useResolver) tasks.push(api.get(legacyTargetPath))
             const results = await Promise.all(tasks)
             const pivotRes = results[0] as { data: ApiResponse<any[]> }
+            setFetchErrorStatus(null)
             if (pivotRes.data.success) setPivotRows(pivotRes.data.data || [])
             let cursor = 1
             if (!targetMeta) {
@@ -759,6 +763,7 @@ function ManyToManyRelation({
             }
         } catch (err) {
             console.error('DynamicRelation m2m fetch error', err)
+            setFetchErrorStatus((err as { response?: { status?: number } })?.response?.status ?? 0)
         } finally {
             setLoading(false)
         }
@@ -840,6 +845,12 @@ function ManyToManyRelation({
 
             {(loading || (useResolver && resolved.loading)) ? (
                 <Skeleton className="h-10 w-full" />
+            ) : fetchErrorStatus !== null ? (
+                <div className="text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30">
+                    {fetchErrorStatus === 403
+                        ? (labels.forbiddenState ?? 'Sin permiso para ver estos registros.')
+                        : (labels.errorState ?? 'No se pudieron cargar los registros relacionados.')}
+                </div>
             ) : options.length === 0 ? (
                 <div className="text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30">
                     {labels.emptyState}