@zohodesk/library-platform 1.1.9 → 1.1.10-exp.2

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

@@ -1,8 +1,9 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import Row from "./row/Row";
 import { SortableElement } from 'react-sortable-hoc';
-const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, { ...props
-}));
+const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, props));
 
 const Rows = _ref => {
   let {
@@ -16,21 +17,21 @@ const Rows = _ref => {
     rowActionsColumnWidth,
     isKeyboardControlsEnabled,
     dropIndicator,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   } = _ref;
   return rows.map((row, index) => {
     const isDroppable = dropIndicator.index !== null ? dropIndicator.index === index ? true : false : false;
     const dropPosition = dropIndicator.position;
-    return /*#__PURE__*/React.createElement(SortableRow, {
+    return /*#__PURE__*/React.createElement(SortableRow, _extends({
       key: `${row.id}`,
       index: index,
-      disabled: isReOrderLoading,
-      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)
-    });
+      disabled: isReOrderLoading
+    }, getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading, clientScripts)));
   });
 };
 
-function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading, clientScripts) {
   const {
     id,
     columns,
@@ -58,7 +59,8 @@ function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelect
     rowActionsColumnWidth,
     isDroppable,
     dropPosition,
-    isReOrderLoading
+    isReOrderLoading,
+    clientScripts
   };
 }
 

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

@@ -16,8 +16,7 @@ const FieldComponent = props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Component, { ...fieldProps
-  });
+  return /*#__PURE__*/React.createElement(Component, fieldProps);
 };
 
 export default FieldComponent;

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

@@ -2,11 +2,11 @@ import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
 import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
 import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
-import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 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";
 
 function HeaderData(_ref) {
   let {
@@ -15,7 +15,8 @@ function HeaderData(_ref) {
     isResizing,
     isResizerEnabled,
     isFlexibleColumns,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
   const {
     id,
@@ -26,7 +27,7 @@ function HeaderData(_ref) {
     alignment,
     actions
   } = header;
-  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
+  const hasActions = Boolean(actions?.length);
   return (
     /*#__PURE__*/
     // @ts-ignore
@@ -47,9 +48,10 @@ function HeaderData(_ref) {
       } : undefined
     }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: text
-    }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions,
-      gap: ActionViewGap.SMALL
+      gap: ActionViewGap.SMALL,
+      clientScripts: clientScripts
     }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
       isResizing: isResizing,

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

@@ -7,7 +7,8 @@ function Headers(_ref) {
     currentlyResizingColumn,
     isResizerEnabled,
     isFlexibleColumns,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
   return headers.map((header, index) => {
     const {
@@ -22,7 +23,8 @@ function Headers(_ref) {
       isResizing: isResizing,
       isResizerEnabled: isResizerEnabled,
       isFlexibleColumns: isFlexibleColumns,
-      dispatch: dispatch
+      dispatch: dispatch,
+      clientScripts: clientScripts
     });
   });
 }

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

@@ -1,13 +1,14 @@
 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 ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import style from "./../../css/TableList.module.css";
+import { AdaptiveRowActionsRenderer } from "../../../../../../../../index";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
-    actions
+    actions,
+    clientScripts
   } = _ref;
 
   if (!isSelectionEnabled) {
@@ -29,8 +30,9 @@ function MassAction(_ref) {
     customStyle: {
       container: style.massActionHeader
     }
-  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
-    actions: actions
+  }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
+    actions: actions,
+    clientScripts: clientScripts
   }));
 }
 

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

@@ -4,7 +4,8 @@ import RowData from "./RowData";
 function Columns(_ref) {
   let {
     data,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   } = _ref;
   return data.map((column, index) => {
     const {
@@ -17,7 +18,8 @@ function Columns(_ref) {
       field: field,
       width: width,
       alignment: alignment,
-      isFlexibleColumns: isFlexibleColumns
+      isFlexibleColumns: isFlexibleColumns,
+      clientScripts: clientScripts
     });
   });
 }

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

@@ -39,7 +39,8 @@ function RowView(_ref, ref) {
     isFlexibleColumns,
     cursor,
     hasActions,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    clientScripts
   } = state.properties;
   const {
     type,
@@ -75,12 +76,14 @@ function RowView(_ref, ref) {
     dispatch
   }), renderColumns({
     columns,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   }), renderRowActions({
     hasActions,
     columnWidth: rowActionsColumnWidth,
     type,
-    actions
+    actions,
+    clientScripts
   }), isDroppable && /*#__PURE__*/React.createElement("div", {
     className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
@@ -138,11 +141,13 @@ function renderReorderer(_ref4) {
 function renderColumns(_ref5) {
   let {
     columns,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   } = _ref5;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
-    isFlexibleColumns: isFlexibleColumns
+    isFlexibleColumns: isFlexibleColumns,
+    clientScripts: clientScripts
   });
 }
 
@@ -151,13 +156,15 @@ function renderRowActions(_ref6) {
     hasActions,
     columnWidth,
     actions,
-    type
+    type,
+    clientScripts
   } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
     columnWidth: columnWidth,
     type: type,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   });
 }
 

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

@@ -1,21 +1,22 @@
 import React from 'react';
 import TableAction from '@zohodesk-private/desk-components/es/table/TableAction/TableAction';
-import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 export default function RowActions(_ref) {
   let {
     hasActions,
     columnWidth,
     type = '',
-    actions
+    actions,
+    clientScripts
   } = _ref;
 
-  // TODO: Need to fix the defaultValue from properties => CC
   if (hasActions) {
     return /*#__PURE__*/React.createElement(TableAction, {
       $data_width: columnWidth
-    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+    }, /*#__PURE__*/React.createElement(AdaptiveRowActionsRenderer, {
       actions: actions,
+      clientScripts: clientScripts,
       renderComponentType: type,
       gap: ActionViewGap.MEDIUM
     }));

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

@@ -1,24 +1,25 @@
 import React from 'react';
 import TableData from '@zohodesk-private/desk-components/es/table/TableData/TableData';
-import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
 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";
 export default function RowData(_ref) {
   let {
     field,
     width,
     alignment,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   } = _ref;
   let {
     type,
     actions,
     ...props
   } = field;
-  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
+  const hasActions = Boolean(actions?.length);
   return /*#__PURE__*/React.createElement(TableData, {
     $ui_align: hasActions ? null : alignment,
     $data_width: width,
@@ -34,8 +35,9 @@ export default function RowData(_ref) {
   }, /*#__PURE__*/React.createElement(FieldComponent, {
     type: type,
     fieldProps: props
-  }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+  }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
     actions: actions,
+    clientScripts: clientScripts,
     gap: ActionViewGap.SMALL
   }) : null);
 }

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

@@ -3,6 +3,28 @@ import TableListSelect from '@zohodesk-private/desk-components/es/table/TableLis
 import { TableListConstants } from "../../../../../../../../cc/table-list"; // @ts-ignore
 
 import style from "./../../css/TableList.module.css";
+import { Analytics } from "../../../../../../../analytics";
+
+class SmartTableRowSelectedMetric {
+  event = 'smart_table_row_selected';
+  contextDetails = {
+    moduleName: 'table-list',
+    instanceName: '',
+    rowId: '',
+    isSelected: false
+  };
+
+  constructor(id, isSelected) {
+    this.event = 'smart_table_row_selected';
+    this.contextDetails = {
+      moduleName: 'table-list',
+      instanceName: id,
+      rowId: id,
+      isSelected: isSelected
+    };
+  }
+
+}
 
 function RowSelection(_ref) {
   let {
@@ -26,13 +48,16 @@ function RowSelection(_ref) {
       container: style.tableListSelectContainer
     },
     $flag_disabled: !selectable,
-    $event_onChange: (_, event) => dispatch({
-      type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
-      payload: {
-        id,
-        event
-      }
-    })
+    $event_onChange: (_, event) => {
+      Analytics.push(new SmartTableRowSelectedMetric(id, event.target.checked));
+      dispatch({
+        type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
+        payload: {
+          id,
+          event
+        }
+      });
+    }
   });
 }
 

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: var(--zd_size4) ;
+    column-gap: 4px;
 }
 
 .separator {
     --separator_fontSize: 14px;
-    margin: 0 var(--zd_size10) ;
+    margin: 0 10px;
 }
 
 .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/breadcrumb/frameworks/ui/sub-components/BreadcrumbItem.js

@@ -2,7 +2,7 @@ import React from "react";
 import Icon from "@zohodesk/icons/es/Icon";
 import Flex from "@zohodesk/layout/es/Flex/Flex";
 import Typography from "@zohodesk/components/es/Typography/Typography";
-import Button from "@zohodesk/components/es/Button/Button";
+import Button from "@zohodesk-private/dot-registry/es/Button/Button";
 import BreadcrumbConstants from "../../../../../../../cc/breadcrumb/Constants"; // @ts-ignore
 
 import style from "./../css/Breadcrumb.module.css";

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Button from '@zohodesk/components/es/Button/Button';
+import Button from '@zohodesk-private/dot-registry/es/Button/Button';
 import ButtonConstants from "../../../../../../cc/button/Constants";
 
 function ButtonView(_ref, ref) {
@@ -26,10 +26,10 @@ function ButtonView(_ref, ref) {
     palette: palette,
     size: size,
     isRounded: isRounded,
-    isDisabled: isDisabled,
+    disabled: isDisabled,
     id: id,
     status: status,
-    tooltip: tooltip,
+    title: tooltip,
     onClick: () => {
       dispatch({
         type: ButtonConstants.BUTTON_CLICKED

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

@@ -1,7 +1,9 @@
 import React from "react";
 import DateWidget from '@zohodesk/components/es/DateTime/DateWidget';
-import DateConstants from "../../../../../../cc/date/Constants";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import DateConstants from "../../../../../../cc/date/Constants"; // @ts-ignore
+
+import style from "./css/DateView.module.css";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function DateView(_ref, ref) {
   let {
@@ -24,9 +26,12 @@ function DateView(_ref, ref) {
   } = state.properties;
 
   const renderRightFieldActions = () => {
-    return actions !== null && actions !== void 0 && actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    if (!actions?.length) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.actionContainer
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions
-    }) : null;
+    }));
   };
 
   return /*#__PURE__*/React.createElement(DateWidget, {
@@ -55,7 +60,7 @@ function DateView(_ref, ref) {
     customProps: {
       TextBoxProps: {
         TextBoxProps: {
-          required
+          'aria-required': required
         }
       },
       TextBoxIconProps: {

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

@@ -0,0 +1,3 @@
+.actionContainer {
+    margin-top: 2px;
+}

package/es/library/dot/legacy-to-new-arch/error-state/frameworks/ui/ErrorState.js

@@ -0,0 +1,10 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ErrorStateProperties from "../../../../../../cc/error-state/Properties";
+import ErrorStateView from "./ErrorStateView";
+let ErrorState = createCustomComponent({
+  name: "ErrorState",
+  View: ErrorStateView,
+  properties: ErrorStateProperties,
+  eventHandlers: {}
+});
+export default ErrorState;

package/es/library/dot/legacy-to-new-arch/error-state/frameworks/ui/ErrorStateView.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import ErrorTypes from "../../../../../../cc/error-state/ErrorTypes";
+import { i18NProviderUtils } from '@zohodesk/i18n';
+import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+import OopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss';
+import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+import PermissionDenied from '@zohodesk/dot/lib/version2/errorstate/UnauthorizedLogin/UnauthorizedLogin';
+import UrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
+import WillBeRightBack from '@zohodesk/dot/lib/version2/errorstate/WillBeRightBack/WillBeRightBack';
+const errorStateComponents = {
+  [ErrorTypes.Inconvenience]: Inconvenience,
+  [ErrorTypes.OopsSomethingMiss]: OopsSomethingMiss,
+  [ErrorTypes.UnableToProcess]: UnableToProcess,
+  [ErrorTypes.PermissionDenied]: PermissionDenied,
+  [ErrorTypes.UrlNotFound]: UrlNotFound,
+  [ErrorTypes.WillBeRightBack]: WillBeRightBack
+};
+
+const getErrorStateContent = type => {
+  const errorStateContent = {
+    [ErrorTypes.Inconvenience]: {
+      title: i18NProviderUtils.getI18NValue('support.error.inconvenience.v2.title'),
+      description: i18NProviderUtils.getI18NValue('support.error.inconvenience.v2.message')
+    },
+    [ErrorTypes.OopsSomethingMiss]: {
+      title: i18NProviderUtils.getI18NValue('support.error.oops.something.miss'),
+      description: i18NProviderUtils.getI18NValue('support.error.oops.something.miss.desc')
+    },
+    [ErrorTypes.UnableToProcess]: {
+      title: i18NProviderUtils.getI18NValue('support.something.went.wrong'),
+      description: i18NProviderUtils.getI18NValue('support.unable.to.process.your.request.desc')
+    },
+    [ErrorTypes.PermissionDenied]: {
+      title: i18NProviderUtils.getI18NValue('support.error.lable.insufficient'),
+      description: i18NProviderUtils.getI18NValue('support.error.lable.insufficient.message')
+    },
+    [ErrorTypes.UrlNotFound]: {
+      title: i18NProviderUtils.getI18NValue('support.label.requested.url.not.found'),
+      description: i18NProviderUtils.getI18NValue('support.label.requested.url.not.found.desc')
+    },
+    [ErrorTypes.WillBeRightBack]: {
+      title: i18NProviderUtils.getI18NValue('support.crmlabel.err.whoa'),
+      description: i18NProviderUtils.getI18NValue('support.something.went.wrong')
+    }
+  };
+  return errorStateContent[type] || errorStateContent[ErrorTypes.Inconvenience];
+};
+
+function ErrorStateView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    type,
+    title,
+    description
+  } = state.properties;
+  const ErrorComponent = errorStateComponents[type];
+  const errorStateContent = getErrorStateContent(type);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(ErrorComponent, {
+    title: title || errorStateContent.title,
+    description: description || errorStateContent.description
+  }));
+}
+
+export default ErrorStateView;

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

@@ -1,13 +1,10 @@
 import React from 'react';
 import Label from '@zohodesk/components/es/Label/Label';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator"; // import ActionLocation from '@library/dot/components/action-location/frameworks/ui/ActionLocation';
-
-import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import LabelAction from "./sub-components/ui/LabelAction"; // @ts-ignore
-
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+// @ts-ignore
 import style from "./css/Label.module.css";
-ComponentRegistry.register(`LabelAction`, LabelAction);
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function LabelView(_ref, ref) {
   let {
@@ -29,8 +26,9 @@ function LabelView(_ref, ref) {
     htmlFor: htmlFor,
     palette: isMandatory ? 'mandatory' : 'default',
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
-  }), actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
-    actions: actions
+  }), actions.length ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
+    actions: actions,
+    gap: ActionViewGap.XMEDIUM
   }) : null);
 }
 

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

@@ -1,11 +1,9 @@
 .label {
-    --label_cursor: inherit;
-    display: inline;
-    vertical-align: middle
+    --label_cursor: inherit
 }[dir=ltr] .label {
-    padding-right: var(--zd_size4) 
+    padding-right: 6px
 }[dir=rtl] .label {
-    padding-left: var(--zd_size4) 
+    padding-left: 6px
 }
 
 .mandatory::after {
@@ -13,9 +11,9 @@
 }
 
 [dir=ltr] .mandatory::after {
-    padding-left: var(--zd_size2) 
+    padding-left: 2px
 }
 
 [dir=rtl] .mandatory::after {
-    padding-right: var(--zd_size2) 
+    padding-right: 2px
 }

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

@@ -1,7 +1,9 @@
 import React from "react";
-import ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import MultiSelect from "@zohodesk/components/es/MultiSelect/MultiSelect";
-import { MultiSelectConstants } from "../../../../../../cc/multi-select";
+import { MultiSelectConstants } from "../../../../../../cc/multi-select"; // @ts-ignore
+
+import style from "./css/MultiSelectView.module.css";
+import RowActionsRenderer from "../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActions/RowActionsRenderer";
 
 function MultiSelectView(_ref, ref) {
   let {
@@ -24,9 +26,12 @@ function MultiSelectView(_ref, ref) {
   } = state.properties;
 
   const renderRightFieldActions = () => {
-    return actions !== null && actions !== void 0 && actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    if (!actions?.length) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.actionContainer
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions
-    }) : null;
+    }));
   };
 
   return /*#__PURE__*/React.createElement(MultiSelect, {
@@ -44,6 +49,10 @@ function MultiSelectView(_ref, ref) {
     textBoxSize: "xmedium",
     customProps: {
       TextBoxIconProps: {
+        customClass: {
+          customTBoxWrap: style.custmInputWrapper,
+          customTBoxIcon: style.clearIconContainer
+        },
         'aria-required': required,
         renderRightPlaceholderNode: renderRightFieldActions()
       }
@@ -51,6 +60,7 @@ function MultiSelectView(_ref, ref) {
     selectAllText: "Select All",
     emptyMessage: "No options to select",
     searchEmptyMessage: "No Results Found",
+    customChildrenClass: `${actions?.length >= 2 ? style[`paddingRight${actions.length === 2 ? 64 : 96}`] : ''}`,
     onChange: selectedValues => {
       dispatch({
         type: MultiSelectConstants.MULTISELECT_CHANGED,