@zohodesk/library-platform 1.2.2-exp.6 → 1.2.3

package/es/library/dot/components/table-list/frameworks/ui/sub-components/header/MassAction.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
-import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading'; // @ts-ignore
+import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
+import AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer"; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
-import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { Layout } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
     isMultiline,
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = _ref;
 
   if (!isSelectionEnabled) {
@@ -38,13 +36,9 @@ function MassAction(_ref) {
     customStyle: {
       container: style.massActionHeader
     }
-  }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+  }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
     actions: actions,
-    clientScripts: clientScripts,
-    context: context,
-    viewMeta: {
-      layout: Layout.HORIZONTAL
-    }
+    clientScripts: clientScripts
   }));
 }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/Row.js

@@ -47,8 +47,7 @@ function RowView(_ref, ref) {
   } = state.properties;
   const {
     type,
-    actions,
-    context
+    actions
   } = rowActionLocation;
   return /*#__PURE__*/React.createElement(TableRow, {
     key: id,
@@ -91,8 +90,7 @@ function RowView(_ref, ref) {
     columnWidth: rowActionsColumnWidth,
     type,
     actions,
-    clientScripts,
-    context
+    clientScripts
   }), isDroppable && /*#__PURE__*/React.createElement("div", {
     className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
@@ -173,8 +171,7 @@ function renderRowActions(_ref6) {
     columnWidth,
     actions,
     type,
-    clientScripts,
-    context
+    clientScripts
   } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
@@ -182,8 +179,7 @@ function renderRowActions(_ref6) {
     columnWidth: columnWidth,
     type: type,
     actions: actions,
-    clientScripts: clientScripts,
-    context: context
+    clientScripts: clientScripts
   });
 }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/RowActions.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import TableAction from '@zohodesk-private/desk-components/es/table/TableAction/TableAction';
+import AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
-import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { Layout } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 export default function RowActions(_ref) {
   let {
     hasActions,
@@ -10,24 +9,18 @@ export default function RowActions(_ref) {
     columnWidth,
     type = '',
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = _ref;
 
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
       $data_width: columnWidth,
       $ui_alignItems: isMultiline ? 'start' : 'center'
-    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      context: context,
-      viewMeta: {
-        layout: Layout.HORIZONTAL_WITH_MORE_ACTIONS,
-        gap: ActionViewGap.MEDIUM
-      },
-      instanceName: context.instanceName,
-      location: "row_actions"
+      renderComponentType: type,
+      gap: ActionViewGap.MEDIUM
     }));
   }
 

package/es/library/dot/components/table-list/frameworks/ui/sub-components/row/RowData.js

@@ -5,9 +5,7 @@ import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-type
 import FieldComponent from "../field/FieldComponent"; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
-import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import ClientActionsTranslator from "../../../../../../../../platform/client-actions/translators/client-actions-translator";
-import { Layout } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import RowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 export default function RowData(_ref) {
   let {
     field,
@@ -19,11 +17,9 @@ export default function RowData(_ref) {
   let {
     type,
     actions,
-    context,
     ...props
   } = field;
-  const resolvedActions = ClientActionsTranslator.transform(actions, context.instanceName, context.moduleName, context);
-  const hasActions = Boolean(resolvedActions?.length);
+  const hasActions = Boolean(actions?.length);
   return /*#__PURE__*/React.createElement(TableData, {
     $ui_align: hasActions ? null : alignment,
     $data_width: width,
@@ -39,13 +35,9 @@ export default function RowData(_ref) {
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,
     fieldProps: props
-  }), hasActions ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+  }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
     actions: actions,
     clientScripts: clientScripts,
-    context: context,
-    viewMeta: {
-      layout: Layout.HORIZONTAL,
-      gap: ActionViewGap.SMALL
-    }
+    gap: ActionViewGap.SMALL
   }) : null);
 }

package/es/library/dot/legacy-to-new-arch/breadcrumb/frameworks/ui/css/Breadcrumb.module.css

@@ -1,19 +1,19 @@
 .wrapper, .itemContainer {
-    max-width: 100%
+    max-width: 100% 
 }
 
 .itemContainer {
-    column-gap: 4px;
+    column-gap: var(--zd_size4) ;
 }
 
 .separator {
     --separator_fontSize: 14px;
-    margin: 0 10px;
+    margin: 0 var(--zd_size10) ;
 }
 
 .buttonStyle {
     --button_font_size: 14px;
     --button_padding: 0px;
     --button_letter_spacing: 0px;
-    max-width: 100%;
+    max-width: 100% ;
 }

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/DateView.js

@@ -1,11 +1,10 @@
 import React from "react";
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
 import DateConstants from "../../../../../../cc/date/Constants";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/DateView.module.css";
-import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function DateView(_ref, ref) {
   let {
@@ -25,22 +24,17 @@ function DateView(_ref, ref) {
     isTimeIncluded,
     timeZone,
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = state.properties;
 
   const renderRightFieldActions = () => {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.actionContainer
-    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      context: context,
-      viewMeta: {
-        layout: Layout.HORIZONTAL,
-        gap: ActionViewGap.SMALL
-      }
+      gap: ActionViewGap.SMALL
     }));
   };
 

package/es/library/dot/legacy-to-new-arch/date/frameworks/ui/css/DateView.module.css

@@ -1,3 +1,3 @@
 .actionContainer {
-    margin-top: 2px;
+    margin-top: var(--zd_size2) ;
 }

package/es/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/css/HighlightedValue.module.css

@@ -3,5 +3,5 @@
 }
 
 .gap {
-    gap: 4px;
+    gap: var(--zd_size4) ;
 }

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/LabelView.js

@@ -4,8 +4,7 @@ import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 // @ts-ignore
 import style from "./css/Label.module.css";
-import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function LabelView(_ref, ref) {
   let {
@@ -16,8 +15,7 @@ function LabelView(_ref, ref) {
     for: htmlFor,
     isMandatory,
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = state.properties;
   return /*#__PURE__*/React.createElement(Flex, {
     ref: ref,
@@ -29,14 +27,10 @@ function LabelView(_ref, ref) {
     htmlFor: htmlFor,
     palette: isMandatory ? 'mandatory' : 'default',
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
-  }), actions.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+  }), actions.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
     actions: actions,
-    clientScripts: clientScripts,
-    context: context,
-    viewMeta: {
-      layout: Layout.HORIZONTAL,
-      gap: ActionViewGap.XMEDIUM
-    }
+    gap: ActionViewGap.XMEDIUM,
+    clientScripts: clientScripts
   }) : null);
 }
 

package/es/library/dot/legacy-to-new-arch/label/frameworks/ui/css/Label.module.css

@@ -1,9 +1,9 @@
 .label {
     --label_cursor: inherit
 }[dir=ltr] .label {
-    padding-right: 6px
+    padding-right: var(--zd_size6) 
 }[dir=rtl] .label {
-    padding-left: 6px
+    padding-left: var(--zd_size6) 
 }
 
 .mandatory::after {
@@ -11,9 +11,9 @@
 }
 
 [dir=ltr] .mandatory::after {
-    padding-left: 2px
+    padding-left: var(--zd_size2) 
 }
 
 [dir=rtl] .mandatory::after {
-    padding-right: 2px
+    padding-right: var(--zd_size2) 
 }

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/MultiSelectView.js

@@ -1,11 +1,10 @@
 import React from "react";
 import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
 import { MultiSelectConstants } from "../../../../../../cc/multi-select";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/MultiSelectView.module.css";
-import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function MultiSelectView(_ref, ref) {
   let {
@@ -25,26 +24,18 @@ function MultiSelectView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = state.properties;
   const transformedOptions = options.map(option => {
-    const {
-      context
-    } = option;
     const baseOption = option;
 
     if (option.optionActions && option.optionActions.length !== 0) {
       return { ...option,
         listItemCustomProps: {
-          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
             actions: option.optionActions,
-            clientScripts: clientScripts,
-            context: context,
-            viewMeta: {
-              layout: Layout.HORIZONTAL,
-              gap: ActionViewGap.SMALL
-            }
+            gap: ActionViewGap.SMALL,
+            clientScripts: clientScripts
           }),
           customClass: {
             customValueRightPlaceholder: style.optionActionsContainer
@@ -60,14 +51,10 @@ function MultiSelectView(_ref, ref) {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.fieldActionsContainer
-    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions,
-      clientScripts: clientScripts,
-      context: context,
-      viewMeta: {
-        layout: Layout.HORIZONTAL,
-        gap: ActionViewGap.SMALL
-      }
+      gap: ActionViewGap.SMALL,
+      clientScripts: clientScripts
     }));
   };
 

package/es/library/dot/legacy-to-new-arch/multi-select/frameworks/ui/css/MultiSelectView.module.css

@@ -1,27 +1,27 @@
 .fieldActionsContainer {
-    margin-top: 4px;
+    margin-top: var(--zd_size4) ;
 }
 
 [dir=ltr] .optionActionsContainer {
-    margin-left: 4px;
+    margin-left: var(--zd_size4) ;
 }
 
 [dir=rtl] .optionActionsContainer {
-    margin-right: 4px;
+    margin-right: var(--zd_size4) ;
 }
 
 .custmInputWrapper {
     position: absolute;
-    top: 0;
-    width: 100%;
+    top: 0 ;
+    width: 100% ;
 }
 
 [dir=ltr] .custmInputWrapper {
-    left: 0;
+    left: 0 ;
 }
 
 [dir=rtl] .custmInputWrapper {
-    right: 0;
+    right: 0 ;
 }
 
 .clearIconContainer {

package/es/library/dot/legacy-to-new-arch/radio-dropdown/frameworks/ui/css/RadioDropdown.module.css

@@ -1,6 +1,6 @@
 
 .wrapper {
-    max-width: 100%
+    max-width: 100% 
 }
 
 .disabled {
@@ -11,13 +11,13 @@
 .downIcon {
     flex-shrink: 0;
     opacity: 0.4;
-    margin-top: 2px
+    margin-top: var(--zd_size2) 
 }
 
 [dir=ltr] .downIcon {
-    margin-left: 4px
+    margin-left: var(--zd_size4) 
 }
 
 [dir=rtl] .downIcon {
-    margin-right: 4px
+    margin-right: var(--zd_size4) 
 }

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/SelectView.js

@@ -1,11 +1,10 @@
 import React from "react";
 import Select from '@zohodesk/components/es/Select/Select';
 import SelectConstants from "../../../../../../cc/select/Constants";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Select.module.css";
-import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function SelectView(_ref, ref) {
   let {
@@ -24,8 +23,7 @@ function SelectView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = state.properties;
   const transformedOptions = options.map(option => {
     const baseOption = {
@@ -36,14 +34,10 @@ function SelectView(_ref, ref) {
     if (option.optionActions && option.optionActions.length !== 0) {
       return { ...baseOption,
         listItemCustomProps: {
-          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+          renderValueRightPlaceholderNode: () => /*#__PURE__*/React.createElement(RowActionsRenderer, {
             actions: option.optionActions,
-            clientScripts: clientScripts,
-            context: context,
-            viewMeta: {
-              layout: Layout.HORIZONTAL,
-              gap: ActionViewGap.SMALL
-            }
+            gap: ActionViewGap.SMALL,
+            clientScripts: clientScripts
           }),
           customClass: {
             customValueRightPlaceholder: style.optionActionsContainer
@@ -56,14 +50,10 @@ function SelectView(_ref, ref) {
   });
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions,
-      clientScripts: clientScripts,
-      context: context,
-      viewMeta: {
-        layout: Layout.HORIZONTAL,
-        gap: ActionViewGap.SMALL
-      }
+      gap: ActionViewGap.SMALL,
+      clientScripts: clientScripts
     }) : null;
   };
 

package/es/library/dot/legacy-to-new-arch/select/frameworks/ui/css/Select.module.css

@@ -1,5 +1,5 @@
 [dir=ltr] .optionActionsContainer {
-    margin-left: 4px;
+    margin-left: var(--zd_size4) ;
 }[dir=rtl] .optionActionsContainer {
-    margin-right: 4px;
+    margin-right: var(--zd_size4) ;
 }

package/es/library/dot/legacy-to-new-arch/table-column-chooser/frameworks/ui/css/TableColumnChooserView.module.css

@@ -4,5 +4,5 @@
 }
 
 .textOverflowOptions {
-    margin-top: 10px
+    margin-top: var(--zd_size10) 
 }

package/es/library/dot/legacy-to-new-arch/table-field-components/radio-dropdown-field/frameworks/ui/css/RadioDropdownField.module.css

@@ -1,3 +1,3 @@
 .wrapper {
-    margin-inline-start: -11px
+    margin-inline-start: calc( var(--zd_size11) * -1 ) 
 }

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -3,9 +3,8 @@ import Textarea from '@zohodesk/components/es/Textarea/Textarea';
 import TextAreaConstants from "../../../../../../cc/textarea/Constants"; // @ts-ignore
 
 import style from "./css/TextAreaView.module.css";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
-import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
-import { Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function TextAreaView(_ref, ref) {
   let {
@@ -24,8 +23,7 @@ function TextAreaView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = state.properties;
   const textAreaRenderer = /*#__PURE__*/React.createElement(Textarea, {
     getRef: ref,
@@ -66,14 +64,10 @@ function TextAreaView(_ref, ref) {
     className: style.hasChildren
   }, textAreaRenderer, /*#__PURE__*/React.createElement("div", {
     className: style.rightPlaceholder
-  }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+  }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
     actions: actions,
     clientScripts: clientScripts,
-    context: context,
-    viewMeta: {
-      layout: Layout.HORIZONTAL,
-      gap: ActionViewGap.SMALL
-    }
+    gap: ActionViewGap.SMALL
   })));
 }
 

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/css/TextAreaView.module.css

@@ -4,13 +4,13 @@
 
 .rightPlaceholder {
     position: absolute;
-    bottom: 4px;
+    bottom: var(--zd_size4) ;
 }
 
 [dir=ltr] .rightPlaceholder {
-    right: 12px;
+    right: var(--zd_size12) ;
 }
 
 [dir=rtl] .rightPlaceholder {
-    left: 12px;
+    left: var(--zd_size12) ;
 }

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBoxView.js

@@ -1,9 +1,8 @@
 import React from "react";
 import TextBox from "@zohodesk/components/es/TextBoxIcon/TextBoxIcon";
 import TextBoxConstants from "../../../../../../cc/textbox/Constants";
-// eslint-disable-next-line @zohodesk/architecturerules/import-contract
-import { ActionViewGap, Layout } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
-import ClientActionsRenderer from "../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 
 function TextBoxView(_ref, ref) {
   let {
@@ -24,19 +23,14 @@ function TextBoxView(_ref, ref) {
     disabled,
     readonly,
     actions,
-    clientScripts,
-    context
+    clientScripts
   } = state.properties;
 
   const renderRightFieldActions = () => {
-    return actions?.length ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
+    return actions?.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      context: context,
-      viewMeta: {
-        layout: Layout.HORIZONTAL,
-        gap: ActionViewGap.SMALL
-      }
+      gap: ActionViewGap.SMALL
     }) : null;
   };
 

package/es/platform/client-actions/cc/action-event-mediator/Properties.js

@@ -1,3 +1,4 @@
+import { ActionViewGap } from "../../components/interfaces/ActionViewModel";
 import { clientScriptsSchema } from "../../../client-scripts/cc/zclient-scripts-execution/clientScriptsSchema";
 export const actionSchema = {
   type: 'object',
@@ -69,4 +70,46 @@ export const ActionEventMediatorProperties = {
       }
     }
   }
+};
+export default {
+  testId: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  actions: {
+    required: true,
+    typeMetadata: {
+      schema: actionsSchema
+    }
+  },
+  clientScripts: {
+    required: false,
+    typeMetadata: {
+      schema: clientScriptsSchema
+    }
+  },
+  renderComponentType: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  gap: {
+    required: false,
+    defaultValue: ActionViewGap.NONE,
+    typeMetadata: {
+      schema: {
+        type: 'string',
+        enum: Object.values(ActionViewGap)
+      }
+    }
+  }
 };

package/es/platform/client-actions/components/action-event-mediator/frameworks/ui/ClientActionsAdapter.js

@@ -40,7 +40,8 @@ const ClientActionsAdapter = {
       if (response.errorCode) {
         return Promise.reject(response);
       } else {
-        return Promise.resolve(response);
+        const actions = ClientActionsAdapterUtils.transform(response);
+        return Promise.resolve(actions);
       }
     });
   }