@wix/auto-patterns 1.39.0 → 1.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/hooks/useActionCell.js +14 -8
- package/dist/cjs/hooks/useActionCell.js.map +1 -1
- package/dist/cjs/types/actions/actionCell.js.map +1 -1
- package/dist/esm/hooks/useActionCell.js +14 -8
- package/dist/esm/hooks/useActionCell.js.map +1 -1
- package/dist/esm/types/actions/actionCell.js.map +1 -1
- package/dist/types/hooks/useActionCell.d.ts.map +1 -1
- package/dist/types/types/actions/actionCell.d.ts +13 -1
- package/dist/types/types/actions/actionCell.d.ts.map +1 -1
- package/mcp-docs/action_cell.md +66 -8
- package/mcp-docs/app_config_structure.md +50 -43
- package/mcp-docs/auto-patterns-guide.md +116 -51
- package/package.json +8 -8
|
@@ -20,7 +20,7 @@ const useActionCell = ({
|
|
|
20
20
|
collectionId
|
|
21
21
|
});
|
|
22
22
|
const buildCellActions = (0, _react.useCallback)((item, index, api) => {
|
|
23
|
-
var _config$primaryAction, _config$primaryAction2, _config$secondaryActi, _config$secondaryActi2, _config$secondaryActi3, _config$secondaryActi4;
|
|
23
|
+
var _config$primaryAction, _config$primaryAction2, _config$secondaryActi, _config$secondaryActi2, _config$secondaryActi3, _config$secondaryActi4, _config$primaryAction3;
|
|
24
24
|
const buildAction = actionConfig => {
|
|
25
25
|
if (actionConfig.type === 'divider') {
|
|
26
26
|
return {
|
|
@@ -74,7 +74,10 @@ const useActionCell = ({
|
|
|
74
74
|
disabledDescription: resolvedAction.tooltip
|
|
75
75
|
};
|
|
76
76
|
};
|
|
77
|
-
|
|
77
|
+
|
|
78
|
+
// Handle both single primary action and multiple primary actions
|
|
79
|
+
const isMultiplePrimaryActions = 'items' in ((config == null ? void 0 : config.primaryAction) || {});
|
|
80
|
+
const primaryActions = isMultiplePrimaryActions ? (config == null || (_config$primaryAction = config.primaryAction) == null || (_config$primaryAction = _config$primaryAction.items) == null ? void 0 : _config$primaryAction.map(buildAction).filter(Boolean)) || [] : config != null && config.primaryAction && 'item' in config.primaryAction ? [buildAction(config.primaryAction.item)].filter(Boolean) : [];
|
|
78
81
|
const primaryActionProps = {
|
|
79
82
|
...(config != null && (_config$primaryAction2 = config.primaryAction) != null && _config$primaryAction2.alwaysVisible ? {
|
|
80
83
|
visibility: 'always'
|
|
@@ -86,17 +89,20 @@ const useActionCell = ({
|
|
|
86
89
|
const secondaryActions = cleanupActionsWithDividers(rawSecondaryActions, config == null || (_config$secondaryActi2 = config.secondaryActions) == null ? void 0 : _config$secondaryActi2.inlineCount);
|
|
87
90
|
const numOfVisibleSecondaryActions = config == null || (_config$secondaryActi3 = config.secondaryActions) == null ? void 0 : _config$secondaryActi3.inlineCount;
|
|
88
91
|
const alwaysShowSecondaryActions = config == null || (_config$secondaryActi4 = config.secondaryActions) == null ? void 0 : _config$secondaryActi4.inlineAlwaysVisible;
|
|
89
|
-
if (!
|
|
92
|
+
if (!primaryActions.length && !secondaryActions.length) {
|
|
90
93
|
return {};
|
|
91
94
|
}
|
|
92
95
|
return {
|
|
93
|
-
...(
|
|
94
|
-
primaryAction: {
|
|
95
|
-
...
|
|
96
|
+
...(primaryActions.length ? {
|
|
97
|
+
primaryAction: primaryActions.map(action => ({
|
|
98
|
+
...action,
|
|
96
99
|
...primaryActionProps
|
|
97
|
-
}
|
|
100
|
+
}))
|
|
98
101
|
} : {
|
|
99
|
-
primaryAction:
|
|
102
|
+
primaryAction: []
|
|
103
|
+
}),
|
|
104
|
+
...(isMultiplePrimaryActions && {
|
|
105
|
+
alwaysShowPrimaryActions: config == null || (_config$primaryAction3 = config.primaryAction) == null ? void 0 : _config$primaryAction3.alwaysVisible
|
|
100
106
|
}),
|
|
101
107
|
...(secondaryActions.length && {
|
|
102
108
|
secondaryActions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_useActionsSDK","_actions","cleanupActionsWithDividers","actions","inlineCount","clean","a","filter","x","i","ar","_ar","divider","length","slice","useActionCell","config","collectionId","sdk","useActionsSDK","buildCellActions","useCallback","item","index","api","_config$primaryAction","_config$primaryAction2","_config$secondaryActi","_config$secondaryActi2","_config$secondaryActi3","_config$secondaryActi4","buildAction","actionConfig","type","actionToResolve","baseParams","actionParams","updateAction","action","deleteAction","customAction","hidden","resolvedAction","resolveAction","label","tooltip","resolvedActionProps","text","disabledDescription","primaryAction","
|
|
1
|
+
{"version":3,"names":["_react","require","_useActionsSDK","_actions","cleanupActionsWithDividers","actions","inlineCount","clean","a","filter","x","i","ar","_ar","divider","length","slice","useActionCell","config","collectionId","sdk","useActionsSDK","buildCellActions","useCallback","item","index","api","_config$primaryAction","_config$primaryAction2","_config$secondaryActi","_config$secondaryActi2","_config$secondaryActi3","_config$secondaryActi4","_config$primaryAction3","buildAction","actionConfig","type","actionToResolve","baseParams","actionParams","updateAction","action","deleteAction","customAction","hidden","resolvedAction","resolveAction","label","tooltip","resolvedActionProps","text","disabledDescription","isMultiplePrimaryActions","primaryAction","primaryActions","items","map","Boolean","primaryActionProps","alwaysVisible","visibility","rawSecondaryActions","secondaryActions","numOfVisibleSecondaryActions","alwaysShowSecondaryActions","inlineAlwaysVisible","alwaysShowPrimaryActions","exports"],"sources":["../../../src/hooks/useActionCell.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport {\n ActionCellConfig,\n ActionCellItemConfig,\n ActionCellPrimaryActions,\n ResolvedAction,\n} from '../types';\nimport { useActionsSDK } from './useActionsSDK';\nimport {\n updateAction,\n customAction,\n resolveAction,\n deleteAction,\n} from '../utils/actions';\nimport { DividerActionConfig } from '../types/actions/base';\n\nexport interface useActionCellParams {\n config?: ActionCellConfig;\n collectionId: string;\n}\n\nconst cleanupActionsWithDividers = (\n actions: any[],\n inlineCount?: number,\n): any[] => {\n const clean = (a: any[]) =>\n a.filter(\n (x, i, ar) =>\n x?.divider !== true ||\n (i > 0 && i < ar.length - 1 && ar[i - 1]?.divider !== true),\n );\n return !actions?.length || !inlineCount || inlineCount >= actions.length\n ? clean(actions || [])\n : [\n ...clean(actions.slice(0, inlineCount)),\n ...clean(actions.slice(inlineCount)),\n ];\n};\n\nexport const useActionCell = ({\n config,\n collectionId,\n}: useActionCellParams) => {\n const sdk = useActionsSDK({\n collectionId,\n });\n\n const buildCellActions = useCallback(\n (item, index, api) => {\n const buildAction = (\n actionConfig: ActionCellItemConfig | DividerActionConfig,\n ) => {\n if (actionConfig.type === 'divider') {\n return { divider: true };\n }\n\n let actionToResolve: Partial<ResolvedAction> | null = null;\n\n const baseParams = {\n actionParams: { item, index, api },\n sdk,\n };\n\n switch (actionConfig.type) {\n case 'update':\n actionToResolve = updateAction({\n action: actionConfig,\n ...baseParams,\n });\n break;\n\n case 'delete':\n actionToResolve = deleteAction({\n action: actionConfig,\n ...baseParams,\n });\n break;\n\n case 'custom':\n actionToResolve = customAction({\n action: actionConfig,\n ...baseParams,\n });\n break;\n\n default:\n return null;\n }\n\n if (!actionToResolve || actionToResolve.hidden) {\n return null;\n }\n\n const resolvedAction = resolveAction(actionConfig, actionToResolve);\n\n const { label, tooltip, hidden, ...resolvedActionProps } =\n resolvedAction;\n\n return {\n ...resolvedActionProps,\n text: resolvedAction.label,\n disabledDescription: resolvedAction.tooltip,\n };\n };\n\n // Handle both single primary action and multiple primary actions\n const isMultiplePrimaryActions = 'items' in (config?.primaryAction || {});\n\n const primaryActions = isMultiplePrimaryActions\n ? (config?.primaryAction as ActionCellPrimaryActions)?.items\n ?.map(buildAction)\n .filter(Boolean) || []\n : config?.primaryAction && 'item' in config.primaryAction\n ? [buildAction(config.primaryAction.item)].filter(Boolean)\n : [];\n\n const primaryActionProps = {\n ...(config?.primaryAction?.alwaysVisible\n ? { visibility: 'always' }\n : {}),\n };\n\n const rawSecondaryActions = config?.secondaryActions?.items.length\n ? config.secondaryActions.items.map(buildAction).filter(Boolean)\n : [];\n\n // Process secondary actions with inline count consideration\n const secondaryActions = cleanupActionsWithDividers(\n rawSecondaryActions,\n config?.secondaryActions?.inlineCount,\n );\n\n const numOfVisibleSecondaryActions =\n config?.secondaryActions?.inlineCount;\n const alwaysShowSecondaryActions =\n config?.secondaryActions?.inlineAlwaysVisible;\n\n if (!primaryActions.length && !secondaryActions.length) {\n return {};\n }\n\n return {\n ...(primaryActions.length\n ? {\n primaryAction: primaryActions.map((action: any) => ({\n ...action,\n ...primaryActionProps,\n })),\n }\n : { primaryAction: [] }),\n ...(isMultiplePrimaryActions && {\n alwaysShowPrimaryActions: config?.primaryAction?.alwaysVisible,\n }),\n ...(secondaryActions.length && { secondaryActions }),\n numOfVisibleSecondaryActions,\n alwaysShowSecondaryActions,\n };\n },\n [config, sdk],\n );\n\n return buildCellActions;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../../src/types/actions/actionCell.ts"],"sourcesContent":["import {\n CustomActionModalProps,\n CustomActionParams,\n ResolvedAction,\n} from '../../exports/types';\nimport {\n CustomActionConfig,\n DeleteActionConfig,\n UpdateActionConfig,\n DividerActionConfig,\n} from './base';\nimport { IconElement } from '@wix/design-system';\n\nexport type ActionCellItemConfig =\n | UpdateActionConfig\n | CustomActionConfig\n | DeleteActionConfig;\n\nexport interface ActionCellPrimaryAction {\n /**\n * The action item configuration.\n */\n item: ActionCellItemConfig;\n /**\n * Whether the primary action should always be visible.\n * If true, the action is always visible; if false, it is visible only when hovering the row.\n * @default false\n */\n alwaysVisible?: boolean;\n}\n\nexport interface ActionCellSecondaryActions {\n /**\n * Array of action items and dividers for the secondary actions menu.\n */\n items: (ActionCellItemConfig | DividerActionConfig)[];\n /**\n * Number of secondary actions to show inline before moving to overflow menu.\n * Remaining actions appear in a \"more actions\" dropdown.\n * @default 0 (all actions in dropdown)\n */\n inlineCount?: number;\n /**\n * Whether inline secondary actions should always be visible.\n * If true, the inline actions are always visible; if false, they are visible only when hovering the row.\n * @default false\n */\n inlineAlwaysVisible?: boolean;\n}\n\nexport interface ActionCellConfig {\n /**\n * Primary action configuration.\n * Shown as the main action button in each row.\n */\n primaryAction?: ActionCellPrimaryAction;\n /**\n * Secondary actions configuration.\n * Shown as additional actions in dropdown or inline.\n */\n secondaryActions?: ActionCellSecondaryActions;\n}\n\nexport interface ResolvedActionCellPrimaryAction\n extends Omit<ResolvedAction, 'icon'> {\n /**\n * Icon displayed before the action label.\n */\n prefixIcon?: IconElement;\n /**\n * Icon displayed after the action label.\n */\n suffixIcon?: IconElement;\n}\n\nexport interface ActionCellActionParams {\n /**\n * The data item (row) that the action is being performed on.\n */\n item: any;\n}\n\nexport type CustomActionCellActionParams =\n CustomActionParams<ActionCellActionParams>;\n\nexport type CustomActionCellPrimaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedActionCellPrimaryAction;\n\nexport type CustomActionCellSecondaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedAction;\n\nexport interface CustomActionCellActionModalProps\n extends CustomActionModalProps {\n /**\n * Action parameters including the row item context.\n */\n actionParams: ActionCellActionParams;\n}\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../../src/types/actions/actionCell.ts"],"sourcesContent":["import {\n CustomActionModalProps,\n CustomActionParams,\n ResolvedAction,\n} from '../../exports/types';\nimport {\n CustomActionConfig,\n DeleteActionConfig,\n UpdateActionConfig,\n DividerActionConfig,\n} from './base';\nimport { IconElement } from '@wix/design-system';\n\nexport type ActionCellItemConfig =\n | UpdateActionConfig\n | CustomActionConfig\n | DeleteActionConfig;\n\nexport interface ActionCellPrimaryAction {\n /**\n * The action item configuration.\n */\n item: ActionCellItemConfig;\n /**\n * Whether the primary action should always be visible.\n * If true, the action is always visible; if false, it is visible only when hovering the row.\n * @default false\n */\n alwaysVisible?: boolean;\n}\n\nexport interface ActionCellPrimaryActions {\n /**\n * The action items configuration.\n */\n items: ActionCellItemConfig[];\n /**\n * Whether the primary action should always be visible.\n * If true, the action is always visible; if false, it is visible only when hovering the row.\n * @default false\n */\n alwaysVisible?: boolean;\n}\n\nexport interface ActionCellSecondaryActions {\n /**\n * Array of action items and dividers for the secondary actions menu.\n */\n items: (ActionCellItemConfig | DividerActionConfig)[];\n /**\n * Number of secondary actions to show inline before moving to overflow menu.\n * Remaining actions appear in a \"more actions\" dropdown.\n * @default 0 (all actions in dropdown)\n */\n inlineCount?: number;\n /**\n * Whether inline secondary actions should always be visible.\n * If true, the inline actions are always visible; if false, they are visible only when hovering the row.\n * @default false\n */\n inlineAlwaysVisible?: boolean;\n}\n\nexport interface ActionCellConfig {\n /**\n * Primary action configuration.\n * Shown as the main action button in each row.\n */\n primaryAction?: ActionCellPrimaryAction | ActionCellPrimaryActions;\n /**\n * Secondary actions configuration.\n * Shown as additional actions in dropdown or inline.\n */\n secondaryActions?: ActionCellSecondaryActions;\n}\n\nexport interface ResolvedActionCellPrimaryAction\n extends Omit<ResolvedAction, 'icon'> {\n /**\n * Icon displayed before the action label.\n */\n prefixIcon?: IconElement;\n /**\n * Icon displayed after the action label.\n */\n suffixIcon?: IconElement;\n}\n\nexport interface ActionCellActionParams {\n /**\n * The data item (row) that the action is being performed on.\n */\n item: any;\n}\n\nexport type CustomActionCellActionParams =\n CustomActionParams<ActionCellActionParams>;\n\nexport type CustomActionCellPrimaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedActionCellPrimaryAction;\n\nexport type CustomActionCellSecondaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedAction;\n\nexport interface CustomActionCellActionModalProps\n extends CustomActionModalProps {\n /**\n * Action parameters including the row item context.\n */\n actionParams: ActionCellActionParams;\n}\n"],"mappings":"","ignoreList":[]}
|
|
@@ -17,7 +17,7 @@ export const useActionCell = _ref => {
|
|
|
17
17
|
collectionId
|
|
18
18
|
});
|
|
19
19
|
const buildCellActions = useCallback((item, index, api) => {
|
|
20
|
-
var _config$primaryAction, _config$primaryAction2, _config$secondaryActi, _config$secondaryActi2, _config$secondaryActi3, _config$secondaryActi4;
|
|
20
|
+
var _config$primaryAction, _config$primaryAction2, _config$secondaryActi, _config$secondaryActi2, _config$secondaryActi3, _config$secondaryActi4, _config$primaryAction3;
|
|
21
21
|
const buildAction = actionConfig => {
|
|
22
22
|
if (actionConfig.type === 'divider') {
|
|
23
23
|
return {
|
|
@@ -71,7 +71,10 @@ export const useActionCell = _ref => {
|
|
|
71
71
|
disabledDescription: resolvedAction.tooltip
|
|
72
72
|
};
|
|
73
73
|
};
|
|
74
|
-
|
|
74
|
+
|
|
75
|
+
// Handle both single primary action and multiple primary actions
|
|
76
|
+
const isMultiplePrimaryActions = 'items' in ((config == null ? void 0 : config.primaryAction) || {});
|
|
77
|
+
const primaryActions = isMultiplePrimaryActions ? (config == null || (_config$primaryAction = config.primaryAction) == null || (_config$primaryAction = _config$primaryAction.items) == null ? void 0 : _config$primaryAction.map(buildAction).filter(Boolean)) || [] : config != null && config.primaryAction && 'item' in config.primaryAction ? [buildAction(config.primaryAction.item)].filter(Boolean) : [];
|
|
75
78
|
const primaryActionProps = {
|
|
76
79
|
...(config != null && (_config$primaryAction2 = config.primaryAction) != null && _config$primaryAction2.alwaysVisible ? {
|
|
77
80
|
visibility: 'always'
|
|
@@ -83,17 +86,20 @@ export const useActionCell = _ref => {
|
|
|
83
86
|
const secondaryActions = cleanupActionsWithDividers(rawSecondaryActions, config == null || (_config$secondaryActi2 = config.secondaryActions) == null ? void 0 : _config$secondaryActi2.inlineCount);
|
|
84
87
|
const numOfVisibleSecondaryActions = config == null || (_config$secondaryActi3 = config.secondaryActions) == null ? void 0 : _config$secondaryActi3.inlineCount;
|
|
85
88
|
const alwaysShowSecondaryActions = config == null || (_config$secondaryActi4 = config.secondaryActions) == null ? void 0 : _config$secondaryActi4.inlineAlwaysVisible;
|
|
86
|
-
if (!
|
|
89
|
+
if (!primaryActions.length && !secondaryActions.length) {
|
|
87
90
|
return {};
|
|
88
91
|
}
|
|
89
92
|
return {
|
|
90
|
-
...(
|
|
91
|
-
primaryAction: {
|
|
92
|
-
...
|
|
93
|
+
...(primaryActions.length ? {
|
|
94
|
+
primaryAction: primaryActions.map(action => ({
|
|
95
|
+
...action,
|
|
93
96
|
...primaryActionProps
|
|
94
|
-
}
|
|
97
|
+
}))
|
|
95
98
|
} : {
|
|
96
|
-
primaryAction:
|
|
99
|
+
primaryAction: []
|
|
100
|
+
}),
|
|
101
|
+
...(isMultiplePrimaryActions && {
|
|
102
|
+
alwaysShowPrimaryActions: config == null || (_config$primaryAction3 = config.primaryAction) == null ? void 0 : _config$primaryAction3.alwaysVisible
|
|
97
103
|
}),
|
|
98
104
|
...(secondaryActions.length && {
|
|
99
105
|
secondaryActions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useActionsSDK","updateAction","customAction","resolveAction","deleteAction","cleanupActionsWithDividers","actions","inlineCount","clean","a","filter","x","i","ar","_ar","divider","length","slice","useActionCell","_ref","config","collectionId","sdk","buildCellActions","item","index","api","_config$primaryAction","_config$primaryAction2","_config$secondaryActi","_config$secondaryActi2","_config$secondaryActi3","_config$secondaryActi4","buildAction","actionConfig","type","actionToResolve","baseParams","actionParams","action","hidden","resolvedAction","label","tooltip","resolvedActionProps","text","disabledDescription","primaryAction","
|
|
1
|
+
{"version":3,"names":["useCallback","useActionsSDK","updateAction","customAction","resolveAction","deleteAction","cleanupActionsWithDividers","actions","inlineCount","clean","a","filter","x","i","ar","_ar","divider","length","slice","useActionCell","_ref","config","collectionId","sdk","buildCellActions","item","index","api","_config$primaryAction","_config$primaryAction2","_config$secondaryActi","_config$secondaryActi2","_config$secondaryActi3","_config$secondaryActi4","_config$primaryAction3","buildAction","actionConfig","type","actionToResolve","baseParams","actionParams","action","hidden","resolvedAction","label","tooltip","resolvedActionProps","text","disabledDescription","isMultiplePrimaryActions","primaryAction","primaryActions","items","map","Boolean","primaryActionProps","alwaysVisible","visibility","rawSecondaryActions","secondaryActions","numOfVisibleSecondaryActions","alwaysShowSecondaryActions","inlineAlwaysVisible","alwaysShowPrimaryActions"],"sources":["../../../src/hooks/useActionCell.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport {\n ActionCellConfig,\n ActionCellItemConfig,\n ActionCellPrimaryActions,\n ResolvedAction,\n} from '../types';\nimport { useActionsSDK } from './useActionsSDK';\nimport {\n updateAction,\n customAction,\n resolveAction,\n deleteAction,\n} from '../utils/actions';\nimport { DividerActionConfig } from '../types/actions/base';\n\nexport interface useActionCellParams {\n config?: ActionCellConfig;\n collectionId: string;\n}\n\nconst cleanupActionsWithDividers = (\n actions: any[],\n inlineCount?: number,\n): any[] => {\n const clean = (a: any[]) =>\n a.filter(\n (x, i, ar) =>\n x?.divider !== true ||\n (i > 0 && i < ar.length - 1 && ar[i - 1]?.divider !== true),\n );\n return !actions?.length || !inlineCount || inlineCount >= actions.length\n ? clean(actions || [])\n : [\n ...clean(actions.slice(0, inlineCount)),\n ...clean(actions.slice(inlineCount)),\n ];\n};\n\nexport const useActionCell = ({\n config,\n collectionId,\n}: useActionCellParams) => {\n const sdk = useActionsSDK({\n collectionId,\n });\n\n const buildCellActions = useCallback(\n (item, index, api) => {\n const buildAction = (\n actionConfig: ActionCellItemConfig | DividerActionConfig,\n ) => {\n if (actionConfig.type === 'divider') {\n return { divider: true };\n }\n\n let actionToResolve: Partial<ResolvedAction> | null = null;\n\n const baseParams = {\n actionParams: { item, index, api },\n sdk,\n };\n\n switch (actionConfig.type) {\n case 'update':\n actionToResolve = updateAction({\n action: actionConfig,\n ...baseParams,\n });\n break;\n\n case 'delete':\n actionToResolve = deleteAction({\n action: actionConfig,\n ...baseParams,\n });\n break;\n\n case 'custom':\n actionToResolve = customAction({\n action: actionConfig,\n ...baseParams,\n });\n break;\n\n default:\n return null;\n }\n\n if (!actionToResolve || actionToResolve.hidden) {\n return null;\n }\n\n const resolvedAction = resolveAction(actionConfig, actionToResolve);\n\n const { label, tooltip, hidden, ...resolvedActionProps } =\n resolvedAction;\n\n return {\n ...resolvedActionProps,\n text: resolvedAction.label,\n disabledDescription: resolvedAction.tooltip,\n };\n };\n\n // Handle both single primary action and multiple primary actions\n const isMultiplePrimaryActions = 'items' in (config?.primaryAction || {});\n\n const primaryActions = isMultiplePrimaryActions\n ? (config?.primaryAction as ActionCellPrimaryActions)?.items\n ?.map(buildAction)\n .filter(Boolean) || []\n : config?.primaryAction && 'item' in config.primaryAction\n ? [buildAction(config.primaryAction.item)].filter(Boolean)\n : [];\n\n const primaryActionProps = {\n ...(config?.primaryAction?.alwaysVisible\n ? { visibility: 'always' }\n : {}),\n };\n\n const rawSecondaryActions = config?.secondaryActions?.items.length\n ? config.secondaryActions.items.map(buildAction).filter(Boolean)\n : [];\n\n // Process secondary actions with inline count consideration\n const secondaryActions = cleanupActionsWithDividers(\n rawSecondaryActions,\n config?.secondaryActions?.inlineCount,\n );\n\n const numOfVisibleSecondaryActions =\n config?.secondaryActions?.inlineCount;\n const alwaysShowSecondaryActions =\n config?.secondaryActions?.inlineAlwaysVisible;\n\n if (!primaryActions.length && !secondaryActions.length) {\n return {};\n }\n\n return {\n ...(primaryActions.length\n ? {\n primaryAction: primaryActions.map((action: any) => ({\n ...action,\n ...primaryActionProps,\n })),\n }\n : { primaryAction: [] }),\n ...(isMultiplePrimaryActions && {\n alwaysShowPrimaryActions: config?.primaryAction?.alwaysVisible,\n }),\n ...(secondaryActions.length && { secondaryActions }),\n numOfVisibleSecondaryActions,\n alwaysShowSecondaryActions,\n };\n },\n [config, sdk],\n );\n\n return buildCellActions;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../../src/types/actions/actionCell.ts"],"sourcesContent":["import {\n CustomActionModalProps,\n CustomActionParams,\n ResolvedAction,\n} from '../../exports/types';\nimport {\n CustomActionConfig,\n DeleteActionConfig,\n UpdateActionConfig,\n DividerActionConfig,\n} from './base';\nimport { IconElement } from '@wix/design-system';\n\nexport type ActionCellItemConfig =\n | UpdateActionConfig\n | CustomActionConfig\n | DeleteActionConfig;\n\nexport interface ActionCellPrimaryAction {\n /**\n * The action item configuration.\n */\n item: ActionCellItemConfig;\n /**\n * Whether the primary action should always be visible.\n * If true, the action is always visible; if false, it is visible only when hovering the row.\n * @default false\n */\n alwaysVisible?: boolean;\n}\n\nexport interface ActionCellSecondaryActions {\n /**\n * Array of action items and dividers for the secondary actions menu.\n */\n items: (ActionCellItemConfig | DividerActionConfig)[];\n /**\n * Number of secondary actions to show inline before moving to overflow menu.\n * Remaining actions appear in a \"more actions\" dropdown.\n * @default 0 (all actions in dropdown)\n */\n inlineCount?: number;\n /**\n * Whether inline secondary actions should always be visible.\n * If true, the inline actions are always visible; if false, they are visible only when hovering the row.\n * @default false\n */\n inlineAlwaysVisible?: boolean;\n}\n\nexport interface ActionCellConfig {\n /**\n * Primary action configuration.\n * Shown as the main action button in each row.\n */\n primaryAction?: ActionCellPrimaryAction;\n /**\n * Secondary actions configuration.\n * Shown as additional actions in dropdown or inline.\n */\n secondaryActions?: ActionCellSecondaryActions;\n}\n\nexport interface ResolvedActionCellPrimaryAction\n extends Omit<ResolvedAction, 'icon'> {\n /**\n * Icon displayed before the action label.\n */\n prefixIcon?: IconElement;\n /**\n * Icon displayed after the action label.\n */\n suffixIcon?: IconElement;\n}\n\nexport interface ActionCellActionParams {\n /**\n * The data item (row) that the action is being performed on.\n */\n item: any;\n}\n\nexport type CustomActionCellActionParams =\n CustomActionParams<ActionCellActionParams>;\n\nexport type CustomActionCellPrimaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedActionCellPrimaryAction;\n\nexport type CustomActionCellSecondaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedAction;\n\nexport interface CustomActionCellActionModalProps\n extends CustomActionModalProps {\n /**\n * Action parameters including the row item context.\n */\n actionParams: ActionCellActionParams;\n}\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../../src/types/actions/actionCell.ts"],"sourcesContent":["import {\n CustomActionModalProps,\n CustomActionParams,\n ResolvedAction,\n} from '../../exports/types';\nimport {\n CustomActionConfig,\n DeleteActionConfig,\n UpdateActionConfig,\n DividerActionConfig,\n} from './base';\nimport { IconElement } from '@wix/design-system';\n\nexport type ActionCellItemConfig =\n | UpdateActionConfig\n | CustomActionConfig\n | DeleteActionConfig;\n\nexport interface ActionCellPrimaryAction {\n /**\n * The action item configuration.\n */\n item: ActionCellItemConfig;\n /**\n * Whether the primary action should always be visible.\n * If true, the action is always visible; if false, it is visible only when hovering the row.\n * @default false\n */\n alwaysVisible?: boolean;\n}\n\nexport interface ActionCellPrimaryActions {\n /**\n * The action items configuration.\n */\n items: ActionCellItemConfig[];\n /**\n * Whether the primary action should always be visible.\n * If true, the action is always visible; if false, it is visible only when hovering the row.\n * @default false\n */\n alwaysVisible?: boolean;\n}\n\nexport interface ActionCellSecondaryActions {\n /**\n * Array of action items and dividers for the secondary actions menu.\n */\n items: (ActionCellItemConfig | DividerActionConfig)[];\n /**\n * Number of secondary actions to show inline before moving to overflow menu.\n * Remaining actions appear in a \"more actions\" dropdown.\n * @default 0 (all actions in dropdown)\n */\n inlineCount?: number;\n /**\n * Whether inline secondary actions should always be visible.\n * If true, the inline actions are always visible; if false, they are visible only when hovering the row.\n * @default false\n */\n inlineAlwaysVisible?: boolean;\n}\n\nexport interface ActionCellConfig {\n /**\n * Primary action configuration.\n * Shown as the main action button in each row.\n */\n primaryAction?: ActionCellPrimaryAction | ActionCellPrimaryActions;\n /**\n * Secondary actions configuration.\n * Shown as additional actions in dropdown or inline.\n */\n secondaryActions?: ActionCellSecondaryActions;\n}\n\nexport interface ResolvedActionCellPrimaryAction\n extends Omit<ResolvedAction, 'icon'> {\n /**\n * Icon displayed before the action label.\n */\n prefixIcon?: IconElement;\n /**\n * Icon displayed after the action label.\n */\n suffixIcon?: IconElement;\n}\n\nexport interface ActionCellActionParams {\n /**\n * The data item (row) that the action is being performed on.\n */\n item: any;\n}\n\nexport type CustomActionCellActionParams =\n CustomActionParams<ActionCellActionParams>;\n\nexport type CustomActionCellPrimaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedActionCellPrimaryAction;\n\nexport type CustomActionCellSecondaryActionResolver = (\n params: CustomActionCellActionParams,\n) => ResolvedAction;\n\nexport interface CustomActionCellActionModalProps\n extends CustomActionModalProps {\n /**\n * Action parameters including the row item context.\n */\n actionParams: ActionCellActionParams;\n}\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useActionCell.d.ts","sourceRoot":"","sources":["../../../src/hooks/useActionCell.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,
|
|
1
|
+
{"version":3,"file":"useActionCell.d.ts","sourceRoot":"","sources":["../../../src/hooks/useActionCell.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAIjB,MAAM,UAAU,CAAC;AAUlB,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAoBD,eAAO,MAAM,aAAa,GAAI,2BAG3B,mBAAmB,4CAwHrB,CAAC"}
|
|
@@ -14,6 +14,18 @@ export interface ActionCellPrimaryAction {
|
|
|
14
14
|
*/
|
|
15
15
|
alwaysVisible?: boolean;
|
|
16
16
|
}
|
|
17
|
+
export interface ActionCellPrimaryActions {
|
|
18
|
+
/**
|
|
19
|
+
* The action items configuration.
|
|
20
|
+
*/
|
|
21
|
+
items: ActionCellItemConfig[];
|
|
22
|
+
/**
|
|
23
|
+
* Whether the primary action should always be visible.
|
|
24
|
+
* If true, the action is always visible; if false, it is visible only when hovering the row.
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
alwaysVisible?: boolean;
|
|
28
|
+
}
|
|
17
29
|
export interface ActionCellSecondaryActions {
|
|
18
30
|
/**
|
|
19
31
|
* Array of action items and dividers for the secondary actions menu.
|
|
@@ -37,7 +49,7 @@ export interface ActionCellConfig {
|
|
|
37
49
|
* Primary action configuration.
|
|
38
50
|
* Shown as the main action button in each row.
|
|
39
51
|
*/
|
|
40
|
-
primaryAction?: ActionCellPrimaryAction;
|
|
52
|
+
primaryAction?: ActionCellPrimaryAction | ActionCellPrimaryActions;
|
|
41
53
|
/**
|
|
42
54
|
* Secondary actions configuration.
|
|
43
55
|
* Shown as additional actions in dropdown or inline.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actionCell.d.ts","sourceRoot":"","sources":["../../../../src/types/actions/actionCell.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,oBAAoB,GAC5B,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,CAAC;AAEvB,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,oBAAoB,CAAC;IAC3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,oBAAoB,GAAG,mBAAmB,CAAC,EAAE,CAAC;IACtD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"actionCell.d.ts","sourceRoot":"","sources":["../../../../src/types/actions/actionCell.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,oBAAoB,GAC5B,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,CAAC;AAEvB,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,oBAAoB,CAAC;IAC3B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,oBAAoB,GAAG,mBAAmB,CAAC,EAAE,CAAC;IACtD;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,uBAAuB,GAAG,wBAAwB,CAAC;IACnE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,0BAA0B,CAAC;CAC/C;AAED,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC;CACX;AAED,MAAM,MAAM,4BAA4B,GACtC,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;AAE7C,MAAM,MAAM,qCAAqC,GAAG,CAClD,MAAM,EAAE,4BAA4B,KACjC,+BAA+B,CAAC;AAErC,MAAM,MAAM,uCAAuC,GAAG,CACpD,MAAM,EAAE,4BAA4B,KACjC,cAAc,CAAC;AAEpB,MAAM,WAAW,gCACf,SAAQ,sBAAsB;IAC9B;;OAEG;IACH,YAAY,EAAE,sBAAsB,CAAC;CACtC"}
|
package/mcp-docs/action_cell.md
CHANGED
|
@@ -4,12 +4,54 @@ The ActionCell feature adds an interactive action column to collection tables or
|
|
|
4
4
|
|
|
5
5
|
## Placement and Structure
|
|
6
6
|
|
|
7
|
-
The ActionCell has a
|
|
8
|
-
* `primaryAction`:
|
|
7
|
+
The ActionCell has a flexible structure supporting both single and multiple primary actions:
|
|
8
|
+
* `primaryAction`: Type: `ActionCellPrimaryAction | ActionCellPrimaryActions` - Can be either a single action or multiple actions shown directly in the table/grid row
|
|
9
|
+
- **Single Primary Action** (`ActionCellPrimaryAction`): `{ item: ActionCellItemConfig, alwaysVisible?: boolean }`
|
|
10
|
+
- **Multiple Primary Actions** (`ActionCellPrimaryActions`): `{ items: ActionCellItemConfig[], alwaysVisible?: boolean }`
|
|
9
11
|
* `secondaryActions`: Additional actions shown in a dropdown menu
|
|
10
12
|
|
|
11
13
|
Both properties are optional, but at least one should be provided for the ActionCell to be useful.
|
|
12
14
|
|
|
15
|
+
### Multiple Primary Actions
|
|
16
|
+
|
|
17
|
+
**New Feature**: Primary actions now support both single and multiple action configurations:
|
|
18
|
+
|
|
19
|
+
#### Single Primary Action Configuration
|
|
20
|
+
```json
|
|
21
|
+
{
|
|
22
|
+
"primaryAction": {
|
|
23
|
+
"item": {
|
|
24
|
+
"id": "editItem",
|
|
25
|
+
"type": "update",
|
|
26
|
+
"label": "Edit",
|
|
27
|
+
"biName": "edit-item-action"
|
|
28
|
+
},
|
|
29
|
+
"alwaysVisible": false
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
#### Multiple Primary Actions Configuration
|
|
35
|
+
```json
|
|
36
|
+
{
|
|
37
|
+
"primaryAction": {
|
|
38
|
+
"items": [
|
|
39
|
+
{
|
|
40
|
+
"id": "editItem",
|
|
41
|
+
"type": "update",
|
|
42
|
+
"label": "Edit"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"id": "quickApprove",
|
|
46
|
+
"type": "custom",
|
|
47
|
+
"label": "Approve"
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
|
+
"alwaysVisible": true
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
13
55
|
### Primary Action Visibility Control
|
|
14
56
|
|
|
15
57
|
**New Feature**: Primary actions now support visibility control through the `alwaysVisible` property. By default, primary actions follow standard table interaction patterns (typically visible on hover), but you can configure them to be always visible for improved accessibility and user discovery.
|
|
@@ -277,25 +319,37 @@ Follow this decision process when implementing ActionCell:
|
|
|
277
319
|
- Delete entities? → Use `delete` actions
|
|
278
320
|
- Custom operations? → Use `custom` actions
|
|
279
321
|
|
|
280
|
-
2. **Primary vs Secondary**: Choose the most common/important
|
|
281
|
-
- Most common operation (typically Edit) → Place in `primaryAction.item`
|
|
322
|
+
2. **Primary vs Secondary**: Choose the most common/important actions as primary:
|
|
323
|
+
- **Single Primary Action**: Most common operation (typically Edit) → Place in `primaryAction.item`
|
|
324
|
+
- **Multiple Primary Actions**: 2-3 most common operations → Place in `primaryAction.items` array
|
|
282
325
|
- Less common operations → Place in `secondaryActions.items` array
|
|
283
326
|
|
|
284
|
-
3. **
|
|
327
|
+
3. **Single vs Multiple Primary Actions**:
|
|
328
|
+
- **Use Single Primary Action** when:
|
|
329
|
+
- You have one dominant action (e.g., "Edit" for most entities)
|
|
330
|
+
- Space is limited or you want a clean, minimal interface
|
|
331
|
+
- The action is contextually obvious
|
|
332
|
+
- **Use Multiple Primary Actions** when:
|
|
333
|
+
- You have 2-3 equally important actions (e.g., "Edit", "Approve", "Reject")
|
|
334
|
+
- Users frequently need to perform multiple actions in sequence
|
|
335
|
+
- Actions are complementary and often used together
|
|
336
|
+
- You want to reduce clicks by avoiding secondary menus
|
|
337
|
+
|
|
338
|
+
4. **Primary Action Visibility Strategy**:
|
|
285
339
|
- **Standard Visibility** (`alwaysVisible: false` or omitted): Use for most cases where actions appear on interaction
|
|
286
340
|
- **Always Visible** (`alwaysVisible: true`): Use for critical actions that need constant visibility or when user discovery is important
|
|
287
341
|
|
|
288
|
-
|
|
342
|
+
5. **Inline Secondary Actions Strategy**:
|
|
289
343
|
- **Action Prioritization**: Order `secondaryActions.items` by frequency of use (most used first)
|
|
290
344
|
- **Inline Count**: Use `inlineCount: 1-3` for optimal UX (avoid cluttering)
|
|
291
345
|
- **Visibility Control**:
|
|
292
346
|
- Use `inlineAlwaysVisible: false` (default) for cleaner visual appearance
|
|
293
347
|
- Use `inlineAlwaysVisible: true` only for critical actions requiring constant visibility
|
|
294
348
|
|
|
295
|
-
|
|
349
|
+
6. **Update Action Mode**:
|
|
296
350
|
- Complex, full-entity edits → Use `mode: "page"` to navigate to entity page
|
|
297
351
|
|
|
298
|
-
|
|
352
|
+
7. **Custom Implementation**:
|
|
299
353
|
- For `custom` actions, you must provide implementations in your code and register them with `AutoPatternsOverridesProvider`
|
|
300
354
|
|
|
301
355
|
### ActionCell Validation Checklist
|
|
@@ -309,8 +363,12 @@ AI agents should verify these requirements before generating ActionCell configur
|
|
|
309
363
|
✓ Delete action has a modal configuration
|
|
310
364
|
✓ Custom actions match implementations in overrides
|
|
311
365
|
✓ At least one of `primaryAction` or `secondaryActions` is provided
|
|
366
|
+
✓ Primary action configuration is valid (Type: `ActionCellPrimaryAction | ActionCellPrimaryActions`):
|
|
367
|
+
- Single primary action (`ActionCellPrimaryAction`): `{ item: ActionCellItemConfig, alwaysVisible?: boolean }`
|
|
368
|
+
- Multiple primary actions (`ActionCellPrimaryActions`): `{ items: ActionCellItemConfig[], alwaysVisible?: boolean }`
|
|
312
369
|
✓ `alwaysVisible` property on primary actions (if specified) is a boolean value
|
|
313
370
|
✓ Primary action visibility is properly considered for UX (use `alwaysVisible: true` for critical actions)
|
|
371
|
+
✓ Multiple primary actions are limited to 2-3 actions for optimal UX
|
|
314
372
|
✓ `inlineCount` (if specified) is a non-negative number ≤ total secondary actions count
|
|
315
373
|
✓ `inlineAlwaysVisible` (if specified) is a boolean value
|
|
316
374
|
✓ Inline secondary actions configuration is applied only when secondary actions exist
|
|
@@ -170,52 +170,16 @@ export interface AppConfig {
|
|
|
170
170
|
};
|
|
171
171
|
actionCell?: {
|
|
172
172
|
primaryAction?: {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
type: 'update' | 'delete' | 'custom'; // Action type
|
|
176
|
-
label?: string; // Text displayed for the action
|
|
177
|
-
skin?: string; // Visual appearance of the action button (see Action Button Skin Values section)
|
|
178
|
-
biName: string; // MANDATORY: Business intelligence name for analytics tracking
|
|
179
|
-
disabled?: boolean; // Whether the action is disabled
|
|
180
|
-
tooltip?: string; // Tooltip text shown on hover
|
|
181
|
-
update?: { // Required when type is 'update'
|
|
182
|
-
mode: 'page'; // Update mode
|
|
183
|
-
page?: { // Required when mode is 'page'
|
|
184
|
-
id: string; // Entity page ID to navigate to
|
|
185
|
-
};
|
|
186
|
-
};
|
|
187
|
-
delete?: { // Required when type is 'delete'
|
|
188
|
-
mode: 'modal'; // Currently only 'modal' is supported
|
|
189
|
-
modal: {
|
|
190
|
-
title?: {
|
|
191
|
-
text: string; // Modal title
|
|
192
|
-
};
|
|
193
|
-
description?: {
|
|
194
|
-
text: string; // Modal description
|
|
195
|
-
};
|
|
196
|
-
actions?: {
|
|
197
|
-
submit?: {
|
|
198
|
-
text: string; // Submit button text
|
|
199
|
-
};
|
|
200
|
-
cancel?: {
|
|
201
|
-
text: string; // Cancel button text
|
|
202
|
-
};
|
|
203
|
-
};
|
|
204
|
-
feedback?: {
|
|
205
|
-
successToast?: {
|
|
206
|
-
text: string; // Success message
|
|
207
|
-
};
|
|
208
|
-
errorToast?: {
|
|
209
|
-
text: string; // Error message
|
|
210
|
-
};
|
|
211
|
-
};
|
|
212
|
-
};
|
|
213
|
-
};
|
|
214
|
-
};
|
|
173
|
+
// Single primary action configuration
|
|
174
|
+
item: ActionItem;
|
|
215
175
|
alwaysVisible?: boolean; // Whether to always show the primary action (not just on hover)
|
|
176
|
+
} | {
|
|
177
|
+
// Multiple primary actions configuration
|
|
178
|
+
items: ActionItem[];
|
|
179
|
+
alwaysVisible?: boolean; // Whether to always show the primary actions (not just on hover)
|
|
216
180
|
};
|
|
217
181
|
secondaryActions?: {
|
|
218
|
-
items:
|
|
182
|
+
items: ActionItem[]; // Array of action configurations, can include dividers
|
|
219
183
|
inlineCount?: number; // How many secondary actions to show inline before showing popover
|
|
220
184
|
inlineAlwaysVisible?: boolean; // Whether to always show inline actions (not just on hover)
|
|
221
185
|
};
|
|
@@ -444,6 +408,49 @@ export interface AppConfig {
|
|
|
444
408
|
}[];
|
|
445
409
|
}
|
|
446
410
|
|
|
411
|
+
type ActionItem = {
|
|
412
|
+
id: string; // Unique identifier for the action
|
|
413
|
+
type: 'update' | 'delete' | 'custom'; // Action type
|
|
414
|
+
label?: string; // Text displayed for the action
|
|
415
|
+
skin?: string; // Visual appearance of the action button (see Action Button Skin Values section)
|
|
416
|
+
biName: string; // MANDATORY: Business intelligence name for analytics tracking
|
|
417
|
+
disabled?: boolean; // Whether the action is disabled
|
|
418
|
+
tooltip?: string; // Tooltip text shown on hover
|
|
419
|
+
update?: { // Required when type is 'update'
|
|
420
|
+
mode: 'page'; // Update mode
|
|
421
|
+
page?: { // Required when mode is 'page'
|
|
422
|
+
id: string; // Entity page ID to navigate to
|
|
423
|
+
};
|
|
424
|
+
};
|
|
425
|
+
delete?: { // Required when type is 'delete'
|
|
426
|
+
mode: 'modal'; // Currently only 'modal' is supported
|
|
427
|
+
modal: {
|
|
428
|
+
title?: {
|
|
429
|
+
text: string; // Modal title
|
|
430
|
+
};
|
|
431
|
+
description?: {
|
|
432
|
+
text: string; // Modal description
|
|
433
|
+
};
|
|
434
|
+
actions?: {
|
|
435
|
+
submit?: {
|
|
436
|
+
text: string; // Submit button text
|
|
437
|
+
};
|
|
438
|
+
cancel?: {
|
|
439
|
+
text: string; // Cancel button text
|
|
440
|
+
};
|
|
441
|
+
};
|
|
442
|
+
feedback?: {
|
|
443
|
+
successToast?: {
|
|
444
|
+
text: string; // Success message
|
|
445
|
+
};
|
|
446
|
+
errorToast?: {
|
|
447
|
+
text: string; // Error message
|
|
448
|
+
};
|
|
449
|
+
};
|
|
450
|
+
};
|
|
451
|
+
};
|
|
452
|
+
};
|
|
453
|
+
|
|
447
454
|
type LayoutContent =
|
|
448
455
|
| {
|
|
449
456
|
type: 'field';
|
|
@@ -248,52 +248,16 @@ export interface AppConfig {
|
|
|
248
248
|
};
|
|
249
249
|
actionCell?: {
|
|
250
250
|
primaryAction?: {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
type: 'update' | 'delete' | 'custom'; // Action type
|
|
254
|
-
label?: string; // Text displayed for the action
|
|
255
|
-
skin?: string; // Visual appearance of the action button (see Action Button Skin Values section)
|
|
256
|
-
biName: string; // MANDATORY: Business intelligence name for analytics tracking
|
|
257
|
-
disabled?: boolean; // Whether the action is disabled
|
|
258
|
-
tooltip?: string; // Tooltip text shown on hover
|
|
259
|
-
update?: { // Required when type is 'update'
|
|
260
|
-
mode: 'page'; // Update mode
|
|
261
|
-
page?: { // Required when mode is 'page'
|
|
262
|
-
id: string; // Entity page ID to navigate to
|
|
263
|
-
};
|
|
264
|
-
};
|
|
265
|
-
delete?: { // Required when type is 'delete'
|
|
266
|
-
mode: 'modal'; // Currently only 'modal' is supported
|
|
267
|
-
modal: {
|
|
268
|
-
title?: {
|
|
269
|
-
text: string; // Modal title
|
|
270
|
-
};
|
|
271
|
-
description?: {
|
|
272
|
-
text: string; // Modal description
|
|
273
|
-
};
|
|
274
|
-
actions?: {
|
|
275
|
-
submit?: {
|
|
276
|
-
text: string; // Submit button text
|
|
277
|
-
};
|
|
278
|
-
cancel?: {
|
|
279
|
-
text: string; // Cancel button text
|
|
280
|
-
};
|
|
281
|
-
};
|
|
282
|
-
feedback?: {
|
|
283
|
-
successToast?: {
|
|
284
|
-
text: string; // Success message
|
|
285
|
-
};
|
|
286
|
-
errorToast?: {
|
|
287
|
-
text: string; // Error message
|
|
288
|
-
};
|
|
289
|
-
};
|
|
290
|
-
};
|
|
291
|
-
};
|
|
292
|
-
};
|
|
251
|
+
// Single primary action configuration
|
|
252
|
+
item: ActionItem;
|
|
293
253
|
alwaysVisible?: boolean; // Whether to always show the primary action (not just on hover)
|
|
254
|
+
} | {
|
|
255
|
+
// Multiple primary actions configuration
|
|
256
|
+
items: ActionItem[];
|
|
257
|
+
alwaysVisible?: boolean; // Whether to always show the primary actions (not just on hover)
|
|
294
258
|
};
|
|
295
259
|
secondaryActions?: {
|
|
296
|
-
items:
|
|
260
|
+
items: ActionItem[]; // Array of action configurations, can include dividers
|
|
297
261
|
inlineCount?: number; // How many secondary actions to show inline before showing popover
|
|
298
262
|
inlineAlwaysVisible?: boolean; // Whether to always show inline actions (not just on hover)
|
|
299
263
|
};
|
|
@@ -522,6 +486,49 @@ export interface AppConfig {
|
|
|
522
486
|
}[];
|
|
523
487
|
}
|
|
524
488
|
|
|
489
|
+
type ActionItem = {
|
|
490
|
+
id: string; // Unique identifier for the action
|
|
491
|
+
type: 'update' | 'delete' | 'custom'; // Action type
|
|
492
|
+
label?: string; // Text displayed for the action
|
|
493
|
+
skin?: string; // Visual appearance of the action button (see Action Button Skin Values section)
|
|
494
|
+
biName: string; // MANDATORY: Business intelligence name for analytics tracking
|
|
495
|
+
disabled?: boolean; // Whether the action is disabled
|
|
496
|
+
tooltip?: string; // Tooltip text shown on hover
|
|
497
|
+
update?: { // Required when type is 'update'
|
|
498
|
+
mode: 'page'; // Update mode
|
|
499
|
+
page?: { // Required when mode is 'page'
|
|
500
|
+
id: string; // Entity page ID to navigate to
|
|
501
|
+
};
|
|
502
|
+
};
|
|
503
|
+
delete?: { // Required when type is 'delete'
|
|
504
|
+
mode: 'modal'; // Currently only 'modal' is supported
|
|
505
|
+
modal: {
|
|
506
|
+
title?: {
|
|
507
|
+
text: string; // Modal title
|
|
508
|
+
};
|
|
509
|
+
description?: {
|
|
510
|
+
text: string; // Modal description
|
|
511
|
+
};
|
|
512
|
+
actions?: {
|
|
513
|
+
submit?: {
|
|
514
|
+
text: string; // Submit button text
|
|
515
|
+
};
|
|
516
|
+
cancel?: {
|
|
517
|
+
text: string; // Cancel button text
|
|
518
|
+
};
|
|
519
|
+
};
|
|
520
|
+
feedback?: {
|
|
521
|
+
successToast?: {
|
|
522
|
+
text: string; // Success message
|
|
523
|
+
};
|
|
524
|
+
errorToast?: {
|
|
525
|
+
text: string; // Error message
|
|
526
|
+
};
|
|
527
|
+
};
|
|
528
|
+
};
|
|
529
|
+
};
|
|
530
|
+
};
|
|
531
|
+
|
|
525
532
|
type LayoutContent =
|
|
526
533
|
| {
|
|
527
534
|
type: 'field';
|
|
@@ -1607,12 +1614,54 @@ The ActionCell feature adds an interactive action column to collection tables or
|
|
|
1607
1614
|
|
|
1608
1615
|
## Placement and Structure
|
|
1609
1616
|
|
|
1610
|
-
The ActionCell has a
|
|
1611
|
-
* `primaryAction`:
|
|
1617
|
+
The ActionCell has a flexible structure supporting both single and multiple primary actions:
|
|
1618
|
+
* `primaryAction`: Type: `ActionCellPrimaryAction | ActionCellPrimaryActions` - Can be either a single action or multiple actions shown directly in the table/grid row
|
|
1619
|
+
- **Single Primary Action** (`ActionCellPrimaryAction`): `{ item: ActionCellItemConfig, alwaysVisible?: boolean }`
|
|
1620
|
+
- **Multiple Primary Actions** (`ActionCellPrimaryActions`): `{ items: ActionCellItemConfig[], alwaysVisible?: boolean }`
|
|
1612
1621
|
* `secondaryActions`: Additional actions shown in a dropdown menu
|
|
1613
1622
|
|
|
1614
1623
|
Both properties are optional, but at least one should be provided for the ActionCell to be useful.
|
|
1615
1624
|
|
|
1625
|
+
### Multiple Primary Actions
|
|
1626
|
+
|
|
1627
|
+
**New Feature**: Primary actions now support both single and multiple action configurations:
|
|
1628
|
+
|
|
1629
|
+
#### Single Primary Action Configuration
|
|
1630
|
+
```json
|
|
1631
|
+
{
|
|
1632
|
+
"primaryAction": {
|
|
1633
|
+
"item": {
|
|
1634
|
+
"id": "editItem",
|
|
1635
|
+
"type": "update",
|
|
1636
|
+
"label": "Edit",
|
|
1637
|
+
"biName": "edit-item-action"
|
|
1638
|
+
},
|
|
1639
|
+
"alwaysVisible": false
|
|
1640
|
+
}
|
|
1641
|
+
}
|
|
1642
|
+
```
|
|
1643
|
+
|
|
1644
|
+
#### Multiple Primary Actions Configuration
|
|
1645
|
+
```json
|
|
1646
|
+
{
|
|
1647
|
+
"primaryAction": {
|
|
1648
|
+
"items": [
|
|
1649
|
+
{
|
|
1650
|
+
"id": "editItem",
|
|
1651
|
+
"type": "update",
|
|
1652
|
+
"label": "Edit"
|
|
1653
|
+
},
|
|
1654
|
+
{
|
|
1655
|
+
"id": "quickApprove",
|
|
1656
|
+
"type": "custom",
|
|
1657
|
+
"label": "Approve"
|
|
1658
|
+
}
|
|
1659
|
+
],
|
|
1660
|
+
"alwaysVisible": true
|
|
1661
|
+
}
|
|
1662
|
+
}
|
|
1663
|
+
```
|
|
1664
|
+
|
|
1616
1665
|
### Primary Action Visibility Control
|
|
1617
1666
|
|
|
1618
1667
|
**New Feature**: Primary actions now support visibility control through the `alwaysVisible` property. By default, primary actions follow standard table interaction patterns (typically visible on hover), but you can configure them to be always visible for improved accessibility and user discovery.
|
|
@@ -1880,25 +1929,37 @@ Follow this decision process when implementing ActionCell:
|
|
|
1880
1929
|
- Delete entities? → Use `delete` actions
|
|
1881
1930
|
- Custom operations? → Use `custom` actions
|
|
1882
1931
|
|
|
1883
|
-
2. **Primary vs Secondary**: Choose the most common/important
|
|
1884
|
-
- Most common operation (typically Edit) → Place in `primaryAction.item`
|
|
1932
|
+
2. **Primary vs Secondary**: Choose the most common/important actions as primary:
|
|
1933
|
+
- **Single Primary Action**: Most common operation (typically Edit) → Place in `primaryAction.item`
|
|
1934
|
+
- **Multiple Primary Actions**: 2-3 most common operations → Place in `primaryAction.items` array
|
|
1885
1935
|
- Less common operations → Place in `secondaryActions.items` array
|
|
1886
1936
|
|
|
1887
|
-
3. **
|
|
1937
|
+
3. **Single vs Multiple Primary Actions**:
|
|
1938
|
+
- **Use Single Primary Action** when:
|
|
1939
|
+
- You have one dominant action (e.g., "Edit" for most entities)
|
|
1940
|
+
- Space is limited or you want a clean, minimal interface
|
|
1941
|
+
- The action is contextually obvious
|
|
1942
|
+
- **Use Multiple Primary Actions** when:
|
|
1943
|
+
- You have 2-3 equally important actions (e.g., "Edit", "Approve", "Reject")
|
|
1944
|
+
- Users frequently need to perform multiple actions in sequence
|
|
1945
|
+
- Actions are complementary and often used together
|
|
1946
|
+
- You want to reduce clicks by avoiding secondary menus
|
|
1947
|
+
|
|
1948
|
+
4. **Primary Action Visibility Strategy**:
|
|
1888
1949
|
- **Standard Visibility** (`alwaysVisible: false` or omitted): Use for most cases where actions appear on interaction
|
|
1889
1950
|
- **Always Visible** (`alwaysVisible: true`): Use for critical actions that need constant visibility or when user discovery is important
|
|
1890
1951
|
|
|
1891
|
-
|
|
1952
|
+
5. **Inline Secondary Actions Strategy**:
|
|
1892
1953
|
- **Action Prioritization**: Order `secondaryActions.items` by frequency of use (most used first)
|
|
1893
1954
|
- **Inline Count**: Use `inlineCount: 1-3` for optimal UX (avoid cluttering)
|
|
1894
1955
|
- **Visibility Control**:
|
|
1895
1956
|
- Use `inlineAlwaysVisible: false` (default) for cleaner visual appearance
|
|
1896
1957
|
- Use `inlineAlwaysVisible: true` only for critical actions requiring constant visibility
|
|
1897
1958
|
|
|
1898
|
-
|
|
1959
|
+
6. **Update Action Mode**:
|
|
1899
1960
|
- Complex, full-entity edits → Use `mode: "page"` to navigate to entity page
|
|
1900
1961
|
|
|
1901
|
-
|
|
1962
|
+
7. **Custom Implementation**:
|
|
1902
1963
|
- For `custom` actions, you must provide implementations in your code and register them with `AutoPatternsOverridesProvider`
|
|
1903
1964
|
|
|
1904
1965
|
### ActionCell Validation Checklist
|
|
@@ -1912,8 +1973,12 @@ AI agents should verify these requirements before generating ActionCell configur
|
|
|
1912
1973
|
✓ Delete action has a modal configuration
|
|
1913
1974
|
✓ Custom actions match implementations in overrides
|
|
1914
1975
|
✓ At least one of `primaryAction` or `secondaryActions` is provided
|
|
1976
|
+
✓ Primary action configuration is valid (Type: `ActionCellPrimaryAction | ActionCellPrimaryActions`):
|
|
1977
|
+
- Single primary action (`ActionCellPrimaryAction`): `{ item: ActionCellItemConfig, alwaysVisible?: boolean }`
|
|
1978
|
+
- Multiple primary actions (`ActionCellPrimaryActions`): `{ items: ActionCellItemConfig[], alwaysVisible?: boolean }`
|
|
1915
1979
|
✓ `alwaysVisible` property on primary actions (if specified) is a boolean value
|
|
1916
1980
|
✓ Primary action visibility is properly considered for UX (use `alwaysVisible: true` for critical actions)
|
|
1981
|
+
✓ Multiple primary actions are limited to 2-3 actions for optimal UX
|
|
1917
1982
|
✓ `inlineCount` (if specified) is a non-negative number ≤ total secondary actions count
|
|
1918
1983
|
✓ `inlineAlwaysVisible` (if specified) is a boolean value
|
|
1919
1984
|
✓ Inline secondary actions configuration is applied only when secondary actions exist
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/auto-patterns",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.40.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Matvey Oklander",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@babel/runtime": "^7.28.4",
|
|
39
|
-
"@wix/data": "^1.0.
|
|
39
|
+
"@wix/data": "^1.0.303",
|
|
40
40
|
"@wix/wix-ui-icons-common": "^3.87.3",
|
|
41
41
|
"lodash": "^4.17.21"
|
|
42
42
|
},
|
|
@@ -51,16 +51,16 @@
|
|
|
51
51
|
"@types/node": "^16.18.126",
|
|
52
52
|
"@types/node-fetch": "^2.6.13",
|
|
53
53
|
"@types/react": "^16.14.66",
|
|
54
|
-
"@wix/crm": "^1.0.
|
|
55
|
-
"@wix/design-system": "^1.
|
|
54
|
+
"@wix/crm": "^1.0.1061",
|
|
55
|
+
"@wix/design-system": "^1.220.2",
|
|
56
56
|
"@wix/eslint-config-yoshi": "^6.160.0",
|
|
57
57
|
"@wix/fe-essentials-standalone": "^1.1380.0",
|
|
58
58
|
"@wix/jest-yoshi-preset": "^6.160.0",
|
|
59
|
-
"@wix/patterns": "^1.
|
|
59
|
+
"@wix/patterns": "^1.283.0",
|
|
60
60
|
"@wix/sdk": "^1.17.1",
|
|
61
61
|
"@wix/sdk-testkit": ">=0.1.9",
|
|
62
|
-
"@wix/wix-data-items-common": "^1.0.
|
|
63
|
-
"@wix/wix-data-items-sdk": "^1.0.
|
|
62
|
+
"@wix/wix-data-items-common": "^1.0.247",
|
|
63
|
+
"@wix/wix-data-items-sdk": "^1.0.442",
|
|
64
64
|
"@wix/yoshi-flow-library": "^6.160.0",
|
|
65
65
|
"@wix/yoshi-style-dependencies": "^6.160.0",
|
|
66
66
|
"chance": "^1.1.13",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"wallaby": {
|
|
126
126
|
"autoDetect": true
|
|
127
127
|
},
|
|
128
|
-
"falconPackageHash": "
|
|
128
|
+
"falconPackageHash": "54497922e36fb1fc428f3c1c68e50002e91285c6792930288321996d"
|
|
129
129
|
}
|