@zohodesk/library-platform 1.2.0-exp.2 → 1.2.0-exp.4

package/es/library/dot/components/form-fields/multi-select/frameworks/ui/MultiSelectView.js

@@ -26,7 +26,8 @@ function MultiSelectView(_ref, ref) {
     labelActions,
     actions,
     uiConfig,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const {
     size,
@@ -39,9 +40,10 @@ function MultiSelectView(_ref, ref) {
     labelActions: labelActions,
     required: required,
     errorMessage: errorMessage,
-    testId: "smart_form_field_multiselect",
+    testId: 'smart_form_field_multiselect',
     size: size,
-    breakRow: breakRow
+    breakRow: breakRow,
+    context: context
   }, /*#__PURE__*/React.createElement(FieldController, {
     $ui_className: style.multiSelectField,
     $event_onFocus: () => dispatch({
@@ -58,7 +60,8 @@ function MultiSelectView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   })));
 }
 

package/es/library/dot/components/form-fields/number/frameworks/ui/NumberView.js

@@ -21,7 +21,8 @@ function NumberView(_ref, ref) {
     uiConfig,
     labelActions,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const {
     size,
@@ -36,7 +37,8 @@ function NumberView(_ref, ref) {
     errorMessage: errorMessage,
     testId: "smart_form_field_number",
     size: size,
-    breakRow: breakRow
+    breakRow: breakRow,
+    context: context
   }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
@@ -48,7 +50,8 @@ function NumberView(_ref, ref) {
     readonly: readonly,
     required: required,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   })));
 }
 

package/es/library/dot/components/form-fields/percentage/frameworks/ui/PercentageView.js

@@ -20,7 +20,8 @@ function PercentageView(_ref, ref) {
     uiConfig,
     labelActions,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const {
     size,
@@ -33,9 +34,10 @@ function PercentageView(_ref, ref) {
     labelActions: labelActions,
     required: required,
     errorMessage: errorMessage,
-    testId: "smart_form_field_percentage",
+    testId: 'smart_form_field_percentage',
     size: size,
-    breakRow: breakRow
+    breakRow: breakRow,
+    context: context
   }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
@@ -46,7 +48,8 @@ function PercentageView(_ref, ref) {
     readonly: readonly,
     required: required,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   })));
 }
 

package/es/library/dot/components/form-fields/phone/frameworks/ui/PhoneView.js

@@ -21,7 +21,8 @@ function PhoneView(_ref, ref) {
     uiConfig,
     labelActions,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const {
     size,
@@ -36,7 +37,8 @@ function PhoneView(_ref, ref) {
     errorMessage: errorMessage,
     testId: "smart_form_field_phone",
     size: size,
-    breakRow: breakRow
+    breakRow: breakRow,
+    context: context
   }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
@@ -48,7 +50,8 @@ function PhoneView(_ref, ref) {
     readonly: readonly,
     required: required,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   })));
 }
 

package/es/library/dot/components/form-fields/pick-list/frameworks/ui/PickListView.js

@@ -26,7 +26,8 @@ function PickListView(_ref, ref) {
     labelActions,
     actions,
     uiConfig,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const {
     size,
@@ -39,9 +40,10 @@ function PickListView(_ref, ref) {
     labelActions: labelActions,
     required: required,
     errorMessage: errorMessage,
-    testId: "smart_form_field_picklist",
+    testId: 'smart_form_field_picklist',
     size: size,
-    breakRow: breakRow
+    breakRow: breakRow,
+    context: context
   }, /*#__PURE__*/React.createElement(FieldController, {
     $ui_className: style.field,
     $event_onFocus: () => dispatch({
@@ -58,7 +60,8 @@ function PickListView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   })));
 }
 

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextAreaView.js

@@ -21,7 +21,8 @@ function TextAreaView(_ref, ref) {
     labelActions,
     actions,
     clientScripts,
-    maxLength
+    maxLength,
+    context
   } = state.properties;
   const {
     size,
@@ -36,7 +37,8 @@ function TextAreaView(_ref, ref) {
     errorMessage: errorMessage,
     testId: "smart_form_field_textarea",
     size: size,
-    breakRow: breakRow
+    breakRow: breakRow,
+    context: context
   }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextArea, {
@@ -48,7 +50,8 @@ function TextAreaView(_ref, ref) {
     readonly: readonly,
     actions: actions,
     clientScripts: clientScripts,
-    maxLength: maxLength
+    maxLength: maxLength,
+    context: context
   })));
 }
 

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBoxView.js

@@ -21,7 +21,8 @@ function TextBoxView(_ref, ref) {
     uiConfig,
     labelActions,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const {
     size,
@@ -36,7 +37,8 @@ function TextBoxView(_ref, ref) {
     errorMessage: errorMessage,
     testId: "smart_form_field_textbox",
     size: size,
-    breakRow: breakRow
+    breakRow: breakRow,
+    context: context
   }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
@@ -48,7 +50,8 @@ function TextBoxView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   })));
 }
 

package/es/library/dot/components/form-fields/url/frameworks/ui/UrlView.js

@@ -21,7 +21,8 @@ function UrlView(_ref, ref) {
     required,
     labelActions,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
   const {
     size,
@@ -36,7 +37,8 @@ function UrlView(_ref, ref) {
     size: size,
     breakRow: breakRow,
     errorMessage: errorMessage,
-    testId: "smart_form_field_url"
+    testId: "smart_form_field_url",
+    context: context
   }, /*#__PURE__*/React.createElement("div", {
     className: style.field
   }, /*#__PURE__*/React.createElement(TextBox, {
@@ -48,7 +50,8 @@ function UrlView(_ref, ref) {
     readonly: readonly,
     required: required,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   })));
 }
 

package/es/library/dot/components/section/frameworks/ui/RenderField.js

@@ -5,6 +5,7 @@ import ComponentRegistry from "../../../../../custom-component/frameworks/ui/Com
 export function renderField(field, key, clientScripts) {
   const {
     type,
+    context,
     ...properties
   } = field;
   const Component = ComponentRegistry.get(type);
@@ -17,6 +18,7 @@ export function renderField(field, key, clientScripts) {
   return /*#__PURE__*/React.createElement(Component, _extends({
     key: key
   }, properties, {
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context
   }));
 }

package/es/library/dot/components/section/frameworks/ui/SectionView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
 import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
@@ -8,6 +7,8 @@ import { renderField } from "./RenderField";
 import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Section.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/client-actions-renderer/domain/entities/State";
 
 function SectionView(_ref, ref) {
   let {
@@ -21,19 +22,24 @@ function SectionView(_ref, ref) {
     fields,
     titleActions,
     headerActions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
 
-  const renderActions = actions => {
+  const renderActions = (actions, context) => {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement(Flex, {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_className: style.actionContainer
-    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.LARGE,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.LARGE
+      }
     }));
   };
 
@@ -46,8 +52,8 @@ function SectionView(_ref, ref) {
     $tagAttributes_container: {
       ref
     },
-    $render_headingRightElement: renderActions(titleActions),
-    $render_headerRightElement: renderActions(headerActions)
+    $render_headingRightElement: renderActions(titleActions, context),
+    $render_headerRightElement: renderActions(headerActions, context)
   }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
     name: "slideDown",
     isActive: !isCollapsed

package/es/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -44,7 +44,8 @@ function TableListView(_ref2, _ref) {
   const {
     headers,
     rows,
-    clientScripts
+    clientScripts,
+    massActionsContext
   } = data;
   const {
     hasActions: hasRowActions,
@@ -100,7 +101,8 @@ function TableListView(_ref2, _ref) {
     hasRowActions,
     rowActionsColumnWidth,
     dispatch,
-    clientScripts
+    clientScripts,
+    massActionsContext
   }), renderBody({
     TableRef,
     dispatch,
@@ -149,7 +151,8 @@ function renderHeader(_ref3) {
     hasRowActions,
     rowActionsColumnWidth,
     dispatch,
-    clientScripts
+    clientScripts,
+    massActionsContext
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isReorderEnabled: isReorderEnabled,
@@ -166,7 +169,8 @@ function renderHeader(_ref3) {
     headers: headers,
     isMultiline: isMultiline,
     dispatch: dispatch,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    massActionsContext: massActionsContext
   });
 }
 

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

@@ -26,7 +26,8 @@ function Header(_ref) {
     headers,
     isMultiline,
     dispatch,
-    clientScripts
+    clientScripts,
+    massActionsContext
   } = _ref;
 
   if (headers.length <= 0) {
@@ -48,15 +49,16 @@ function Header(_ref) {
     }
   }, /*#__PURE__*/React.createElement(TableHeaderRow, {
     $flag_autoHeight: isMultiline
-  }, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts), renderHeaders(headers, isMultiline, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+  }, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts, massActionsContext), renderHeaders(headers, isMultiline, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
-function rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts) {
+function rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts, massActionsContext) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
     isMultiline: isMultiline,
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: massActionsContext
   });
 }
 

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

@@ -6,7 +6,8 @@ import { ActionViewGap } from "../../../../../../../../platform/client-actions/c
 import ColumnResizer from "./ColumnResizer"; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
-import RowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
+import ClientActionsRenderer from "../../../../../../../../platform/client-actions/components/client-actions-renderer/frameworks/ui/client-actions-renderer/ClientActionsRenderer";
+import { Layout } from "../../../../../../../../platform/client-actions/components/client-actions-renderer/domain/entities/State";
 
 function HeaderData(_ref) {
   let {
@@ -26,7 +27,8 @@ function HeaderData(_ref) {
     sortable,
     width,
     alignment,
-    actions
+    actions,
+    context
   } = header;
   const hasActions = Boolean(actions?.length);
   return (
@@ -50,10 +52,14 @@ function HeaderData(_ref) {
     }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: text,
       $flag_wrapText: isMultiline
-    }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }), hasActions ? /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL,
-      clientScripts: clientScripts
+      clientScripts: clientScripts,
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
       isResizing: isResizing,

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

@@ -1,16 +1,18 @@
 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';
-import AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer"; // @ts-ignore
+import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading'; // @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/client-actions-renderer/domain/entities/State";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
     isMultiline,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = _ref;
 
   if (!isSelectionEnabled) {
@@ -36,9 +38,13 @@ function MassAction(_ref) {
     customStyle: {
       container: style.massActionHeader
     }
-  }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
+  }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
     actions: actions,
-    clientScripts: clientScripts
+    clientScripts: clientScripts,
+    context: context,
+    viewMeta: {
+      layout: Layout.HORIZONTAL
+    }
   }));
 }
 

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

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

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

@@ -1,7 +1,8 @@
 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/client-actions-renderer/domain/entities/State";
 export default function RowActions(_ref) {
   let {
     hasActions,
@@ -9,18 +10,24 @@ export default function RowActions(_ref) {
     columnWidth,
     type = '',
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = _ref;
 
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
       $data_width: columnWidth,
       $ui_alignItems: isMultiline ? 'start' : 'center'
-    }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      renderComponentType: type,
-      gap: ActionViewGap.MEDIUM
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL_WITH_MORE_ACTIONS,
+        gap: ActionViewGap.MEDIUM
+      },
+      instanceName: context.instanceName,
+      slotName: "row_actions"
     }));
   }
 

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

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

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

@@ -1,10 +1,11 @@
 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/client-actions-renderer/domain/entities/State";
 
 function DateView(_ref, ref) {
   let {
@@ -24,17 +25,22 @@ function DateView(_ref, ref) {
     isTimeIncluded,
     timeZone,
     actions,
-    clientScripts
+    clientScripts,
+    context
   } = state.properties;
 
   const renderRightFieldActions = () => {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.actionContainer
-    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    }, /*#__PURE__*/React.createElement(ClientActionsRenderer, {
       actions: actions,
       clientScripts: clientScripts,
-      gap: ActionViewGap.SMALL
+      context: context,
+      viewMeta: {
+        layout: Layout.HORIZONTAL,
+        gap: ActionViewGap.SMALL
+      }
     }));
   };
 

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

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