@asteby/metacore-runtime-react 46.2.2 → 46.2.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "46.2.2",
+  "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">