@asteby/metacore-runtime-react 13.5.0 → 13.5.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @asteby/metacore-runtime-react
 
+## 13.5.2
+
+### Patch Changes
+
+- bc99aec: Gate per-row table actions by the row's `status` against the action's `requiresState`.
+
+  Row actions that declare a non-empty `requiresState` (camelCase or the snake_case
+  `requires_state` served by the backend) are now hidden in the row-action dropdown
+  unless the row's `status` value is one of the declared states. For example, an
+  "Iniciar trabajo" action with `requiresState: ['reception']` no longer appears on an
+  order already in `in_progress`.
+
+  Additive and null-safe: actions without `requiresState` (or an empty array) are always
+  shown, and rows without a `status` field surface every action, so there is no
+  regression for existing models.
+
+## 13.5.1
+
+### Patch Changes
+
+- 2778004: fix(action-modal): sticky header + footer, scrollable body
+
+  A tall declarative form (a journal entry with many line-items rows) used to push
+  the Cancel/Submit footer below the viewport. The action modal now caps at 90vh
+  and scrolls ONLY the field area — the title and the action buttons stay pinned
+  and always reachable.
+
 ## 13.5.0
 
 ### Minor Changes

package/dist/action-modal-dispatcher.js

@@ -135,12 +135,12 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
         : hasLineItems
             ? '820px'
             : undefined;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: widthPx ? '' : 'sm:max-w-lg', style: widthPx ? { maxWidth: widthPx, width: '95vw' } : undefined, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "grid gap-4 py-4 sm:grid-cols-2", children: action.fields?.map((field) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-lg'), style: { maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "-mx-1 grid min-h-0 flex-1 gap-4 overflow-y-auto px-1 py-4 sm:grid-cols-2", children: action.fields?.map((field) => {
                         const fullWidth = isLineItemsField(field) ||
                             resolveWidget(field) === 'textarea' ||
                             resolveWidget(field) === 'richtext';
                         return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, formData[field.key], (v) => updateField(field.key, v))] }, field.key));
-                    }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
+                    }) }), _jsxs(DialogFooter, { className: "shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
 }
 function renderField(field, value, onChange) {
     // Repeatable line-items group → row grid (value is an array of row objects).

package/dist/dynamic-columns.d.ts

@@ -14,6 +14,19 @@ export interface DynamicColumnsHelpers {
      */
     apiBaseUrl?: string;
 }
+/**
+ * State-machine gate for per-row actions.
+ *
+ * An action that declares a non-empty `requiresState` (camelCase) / `requires_state`
+ * (snake_case, as served by some backends) is only surfaced for rows whose `status`
+ * field value is contained in that array. This hides e.g. an "Iniciar trabajo"
+ * action (requiresState: ['reception']) on an order already in `in_progress`.
+ *
+ * Null-safe & non-regressive:
+ *   - action without requiresState (or empty array)  → always shown.
+ *   - row with no `status` field                      → all actions shown.
+ */
+export declare const isActionAllowedForRowState: (action: any, row: any) => boolean;
 /**
  * Builds the canonical column factory used by `<DynamicTable>` when the host
  * does not supply its own. Pass `{ getImageUrl, apiBaseUrl }` to wire avatar

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAsCA,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;AAwHD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAqXnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAsCA,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;AAOD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAmHD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAsXnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -21,6 +21,27 @@ import { DynamicIcon } from './dynamic-icon';
 import { isColumnVisibleInTable } from './column-visibility';
 const defaultGetImageUrl = (path) => path;
 const getNestedValue = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
+/**
+ * State-machine gate for per-row actions.
+ *
+ * An action that declares a non-empty `requiresState` (camelCase) / `requires_state`
+ * (snake_case, as served by some backends) is only surfaced for rows whose `status`
+ * field value is contained in that array. This hides e.g. an "Iniciar trabajo"
+ * action (requiresState: ['reception']) on an order already in `in_progress`.
+ *
+ * Null-safe & non-regressive:
+ *   - action without requiresState (or empty array)  → always shown.
+ *   - row with no `status` field                      → all actions shown.
+ */
+export const isActionAllowedForRowState = (action, row) => {
+    const requires = action?.requiresState ?? action?.requires_state;
+    if (!Array.isArray(requires) || requires.length === 0)
+        return true;
+    const status = row?.status;
+    if (status === undefined || status === null || status === '')
+        return true;
+    return requires.map(String).includes(String(status));
+};
 const lowerFirst = (value) => {
     if (!value)
         return value;
@@ -311,6 +332,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                 maxSize: 80,
                 meta: {},
                 cell: ({ row }) => (_jsx("div", { className: "flex items-center justify-end", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "h-8 w-8 p-0", children: [_jsx("span", { className: "sr-only", children: "Abrir men\u00FA" }), _jsx(MoreHorizontal, { className: "h-4 w-4" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: resolvedActions
+                                    .filter((action) => isActionAllowedForRowState(action, row.original))
                                     .filter((action) => {
                                     if (!action.condition)
                                         return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "13.5.0",
+  "version": "13.5.2",
   "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.1.0",
-    "@asteby/metacore-ui": "2.1.0"
+    "@asteby/metacore-ui": "2.1.0",
+    "@asteby/metacore-sdk": "3.1.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/action-visibility-by-state.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+
+import { isActionAllowedForRowState } from '../dynamic-columns'
+
+describe('isActionAllowedForRowState', () => {
+    it('hides the action when row.status is NOT in requiresState', () => {
+        const action = { key: 'start', requiresState: ['reception'] }
+        const row = { id: 1, status: 'in_progress' }
+        expect(isActionAllowedForRowState(action, row)).toBe(false)
+    })
+
+    it('shows the action when row.status IS in requiresState', () => {
+        const action = { key: 'start', requiresState: ['reception'] }
+        const row = { id: 1, status: 'reception' }
+        expect(isActionAllowedForRowState(action, row)).toBe(true)
+    })
+
+    it('shows the action when row.status matches one of several requiresState entries', () => {
+        const action = { key: 'finish', requiresState: ['in_progress', 'paused'] }
+        expect(isActionAllowedForRowState(action, { status: 'paused' })).toBe(true)
+    })
+
+    it('always shows the action when requiresState is empty', () => {
+        const action = { key: 'view', requiresState: [] as string[] }
+        expect(isActionAllowedForRowState(action, { status: 'whatever' })).toBe(true)
+    })
+
+    it('always shows the action when requiresState is absent (no regression)', () => {
+        const action = { key: 'view' }
+        expect(isActionAllowedForRowState(action, { status: 'in_progress' })).toBe(true)
+    })
+
+    it('shows all actions when the row has no status field (no regression)', () => {
+        const action = { key: 'start', requiresState: ['reception'] }
+        expect(isActionAllowedForRowState(action, { id: 1 })).toBe(true)
+        expect(isActionAllowedForRowState(action, { id: 1, status: null })).toBe(true)
+        expect(isActionAllowedForRowState(action, { id: 1, status: '' })).toBe(true)
+    })
+
+    it('tolerates the snake_case requires_state served by the backend', () => {
+        const action = { key: 'start', requires_state: ['reception'] }
+        expect(isActionAllowedForRowState(action, { status: 'reception' })).toBe(true)
+        expect(isActionAllowedForRowState(action, { status: 'in_progress' })).toBe(false)
+    })
+
+    it('coerces numeric status / state values via String() comparison', () => {
+        const action = { key: 'advance', requiresState: [1, 2] as unknown as string[] }
+        expect(isActionAllowedForRowState(action, { status: 2 })).toBe(true)
+        expect(isActionAllowedForRowState(action, { status: '3' })).toBe(false)
+    })
+})

package/src/action-modal-dispatcher.tsx

@@ -246,23 +246,28 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
+            {/* Sticky header + footer, scrollable body: the form can grow tall
+                (many line-items rows) past the viewport, so cap the dialog at
+                90vh and let ONLY the field area scroll — the title and the
+                Cancel/Submit actions stay pinned and always reachable. maxHeight
+                is inline (guaranteed) since an arbitrary max-h-[90vh] class may be
+                dropped by a consuming app's Tailwind scan. */}
             <DialogContent
-                className={widthPx ? '' : 'sm:max-w-lg'}
-                style={widthPx ? { maxWidth: widthPx, width: '95vw' } : undefined}
+                className={'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-lg')}
+                style={{ maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }}
             >
-                <DialogHeader>
+                <DialogHeader className="shrink-0">
                     <DialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
                         {action.label}
                     </DialogTitle>
                     {action.confirmMessage && <DialogDescription>{action.confirmMessage}</DialogDescription>}
                 </DialogHeader>
-                {/* Responsive 2-column grid: scalar fields (journal, date,
-                    reference) flow side-by-side instead of one tall vertical
-                    stack; line-items grids and textareas span the full width so
-                    they get room. Mirrors DynamicForm's pro layout — driven only
-                    by field shape, fully declarative. */}
-                <div className="grid gap-4 py-4 sm:grid-cols-2">
+                {/* Scrollable body. Responsive 2-column grid: scalar fields
+                    (journal, date, reference) flow side-by-side instead of one
+                    tall vertical stack; line-items grids and textareas span the
+                    full width. Mirrors DynamicForm — driven only by field shape. */}
+                <div className="-mx-1 grid min-h-0 flex-1 gap-4 overflow-y-auto px-1 py-4 sm:grid-cols-2">
                     {action.fields?.map((field) => {
                         const fullWidth =
                             isLineItemsField(field) ||
@@ -282,7 +287,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                         )
                     })}
                 </div>
-                <DialogFooter>
+                <DialogFooter className="shrink-0">
                     <Button variant="outline" onClick={() => onOpenChange(false)} disabled={executing}>
                         {t('common.cancel')}
                     </Button>

package/src/dynamic-columns.tsx

@@ -62,6 +62,26 @@ const defaultGetImageUrl = (path: string) => path
 const getNestedValue = (obj: any, path: string) =>
     path.split('.').reduce((acc, part) => acc && acc[part], obj)
 
+/**
+ * State-machine gate for per-row actions.
+ *
+ * An action that declares a non-empty `requiresState` (camelCase) / `requires_state`
+ * (snake_case, as served by some backends) is only surfaced for rows whose `status`
+ * field value is contained in that array. This hides e.g. an "Iniciar trabajo"
+ * action (requiresState: ['reception']) on an order already in `in_progress`.
+ *
+ * Null-safe & non-regressive:
+ *   - action without requiresState (or empty array)  → always shown.
+ *   - row with no `status` field                      → all actions shown.
+ */
+export const isActionAllowedForRowState = (action: any, row: any): boolean => {
+    const requires: unknown = action?.requiresState ?? action?.requires_state
+    if (!Array.isArray(requires) || requires.length === 0) return true
+    const status = row?.status
+    if (status === undefined || status === null || status === '') return true
+    return requires.map(String).includes(String(status))
+}
+
 const lowerFirst = (value?: string) => {
     if (!value) return value
     return value.charAt(0).toLowerCase() + value.slice(1)
@@ -519,6 +539,7 @@ export function makeDefaultGetDynamicColumns(
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                                 {resolvedActions
+                                    .filter((action) => isActionAllowedForRowState(action, row.original))
                                     .filter((action) => {
                                         if (!action.condition) return true
                                         const { field, operator, value } = action.condition