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

package/es/library/dot/components/form-fields/field/__test__/common.js

@@ -1,3 +1,5 @@
+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 { render, fireEvent, screen, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -17,9 +19,9 @@ export function testEPHIFieldVisibility(Component, props) {
   it('should display ePHI tag for ePHI-enabled fields', () => {
     const {
       getByText
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       ePHI: true
-    }));
+    })));
     const ePHITag = getByText('ePHI');
     expect(ePHITag).toBeInTheDocument();
   });
@@ -38,9 +40,9 @@ export function testCommonFieldAttributes(Component, props) {
   it('should display the correct label', () => {
     const {
       getByLabelText
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       label: "Test Label"
-    }));
+    })));
     const label = getByLabelText('Test Label');
     expect(label).toBeInTheDocument();
   });
@@ -51,9 +53,9 @@ export function testFieldErrorMessage(Component, props) {
   it('should display the correct error message', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       errorMessage: "Error occurred"
-    }));
+    })));
     const errorMessage = getByRole('alert');
     expect(errorMessage).toHaveTextContent('Error occurred');
   });
@@ -65,9 +67,9 @@ export function testFieldTooltip(Component, props) {
     const {
       getByText,
       container
-    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       tooltip: tooltipText
-    })));
+    }))));
     const infoIcon = container.querySelector(`[data-title="${tooltipText}"]`);
     expect(infoIcon).toBeInTheDocument();
     fireEvent.mouseEnter(infoIcon);
@@ -86,9 +88,9 @@ export function testRequiredTextKindFieldAttributes(Component, props) {
   it('should be required when required prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       required: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toBeRequired();
   });
@@ -97,9 +99,9 @@ export function testDisabledTextKindFieldAttributes(Component, props) {
   it('should be disabled when disabled prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       disabled: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toBeDisabled();
   });
@@ -108,9 +110,9 @@ export function testReadOnlyTextKindFieldAttributes(Component, props) {
   it('should be readonly when readonly prop is true', () => {
     const {
       getByRole
-    } = render( /*#__PURE__*/React.createElement(Component, { ...props,
+    } = render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
       readonly: true
-    }));
+    })));
     const input = getByRole('textbox');
     expect(input).toHaveAttribute('readonly');
   });
@@ -145,10 +147,10 @@ export function testFieldValueChange(_ref2) {
     const Parent = createCustomComponent({
       name: 'Parent',
       View: (_, ref) => {
-        return /*#__PURE__*/React.createElement(Component, { ...props,
+        return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
           name: "fieldDetails",
           getRef: ref
-        });
+        }));
       },
       properties: {},
       eventHandlers: {

package/es/library/dot/components/form-fields/index.js

@@ -12,4 +12,5 @@ export { default as Number } from "./number/frameworks/ui/Number";
 export { default as Decimal } from "./decimal/frameworks/ui/Decimal";
 export { default as Date } from "./date/frameworks/ui/Date";
 export { default as DateTime } from "./datetime/frameworks/ui/DateTime";
-export { default as Checkbox } from "./checkbox/frameworks/ui/Checkbox";
+export { default as Checkbox } from "./checkbox/frameworks/ui/Checkbox";
+export { default as LookUp } from "./lookup/frameworks/ui/Lookup";

package/es/library/dot/components/form-fields/lookup/frameworks/ui/EventHandlerFactory.js

@@ -0,0 +1,70 @@
+import { TextBoxConstants } from "../../../../../../../cc/textbox";
+import FieldConstants from "../../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [TextBoxConstants.TEXTBOX_FOCUSED]: this.handleTextBoxFocused,
+      [TextBoxConstants.TEXTBOX_BLURED]: this.handleTextBoxBlurred,
+      [TextBoxConstants.TEXTBOX_CHANGED]: this.handleTextBoxChanged
+    };
+  }
+
+  static handleTextBoxFocused(_ref) {
+    let {
+      state,
+      dispatch
+    } = _ref;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_FOCUSED,
+      payload: {
+        fieldName: name
+      },
+      metaData: {}
+    });
+  }
+
+  static handleTextBoxBlurred(_ref2) {
+    let {
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_BLURRED,
+      payload: {
+        fieldName: name
+      }
+    });
+  }
+
+  static handleTextBoxChanged(_ref3) {
+    let {
+      state,
+      dispatch,
+      action
+    } = _ref3;
+    const {
+      value
+    } = action.payload;
+    const {
+      name
+    } = state.properties;
+    dispatch({
+      type: FieldConstants.FIELD_CHANGED,
+      payload: {
+        fieldName: name,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

package/es/library/dot/components/form-fields/lookup/frameworks/ui/Lookup.js

@@ -0,0 +1,13 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import LookupFieldProperties from "../../../../../../../cc/fields/text/Properties";
+import FocusFieldBehaviourFactory from "../../../../../../behaviours/field-focus/frameworks/ui/FocusFieldBehaviourFactory";
+import LookupView from "./LookupView";
+import EventHandlersFactory from "./EventHandlerFactory";
+let Lookup = createCustomComponent({
+  name: 'FormLookUpField',
+  View: LookupView,
+  properties: LookupFieldProperties,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: [FocusFieldBehaviourFactory.create()]
+});
+export default Lookup;

package/es/library/dot/components/form-fields/lookup/frameworks/ui/LookupView.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import TextBox from "../../../../../legacy-to-new-arch/textbox/frameworks/ui/TextBox";
+import FieldItem from "../../../field/FieldItem"; // @ts-ignore
+
+import style from "../../../../form/frameworks/ui/css/Form.module.css";
+
+function TextBoxView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    placeholder,
+    errorMessage,
+    disabled,
+    readonly,
+    required,
+    uiConfig,
+    labelActions,
+    actions
+  } = state.properties;
+  const {
+    size,
+    breakRow
+  } = uiConfig;
+  return /*#__PURE__*/React.createElement(FieldItem, {
+    ref: ref,
+    id: id,
+    label: label,
+    labelActions: labelActions,
+    required: required,
+    errorMessage: errorMessage,
+    testId: 'smart_form_field_lookup',
+    size: size,
+    breakRow: breakRow
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.field
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    id: id,
+    placeholder: placeholder,
+    value: value,
+    required: required,
+    disabled: disabled,
+    readonly: readonly,
+    actions: actions
+  })));
+}
+
+export default TextBoxView;

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

@@ -18,7 +18,8 @@ function TextAreaView(_ref, ref) {
     readonly,
     required,
     uiConfig,
-    labelActions
+    labelActions,
+    actions
   } = state.properties;
   const {
     size,
@@ -42,7 +43,8 @@ function TextAreaView(_ref, ref) {
     value: value,
     required: required,
     disabled: disabled,
-    readonly: readonly
+    readonly: readonly,
+    actions: actions
   })));
 }
 

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

@@ -1,3 +1,5 @@
+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 ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
 export function renderField(field, key) {
@@ -12,8 +14,7 @@ export function renderField(field, key) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Component, {
-    key: key,
-    ...properties
-  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    key: key
+  }, properties));
 }

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

@@ -16,6 +16,7 @@ function SectionView(_ref, ref) {
   } = state.properties;
   return /*#__PURE__*/React.createElement(Section, {
     $i18n_heading: title,
+    $flag_isDescriptionAsRichText: true,
     $i18n_description: description,
     testId: name,
     customId: name,

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowClickController.js

@@ -1,4 +1,4 @@
-import SmartTableConstants from "../../../../../../cc/table-connected/constants/Events";
+import SmartTableConstants from "../../../../../../cc/table-connected/constants/ExternalConstants";
 import AbstractController from "./AbstractController";
 
 class KeyboardRowClickController extends AbstractController {
@@ -15,7 +15,7 @@ class KeyboardRowClickController extends AbstractController {
       focussedRow,
       data
     } = state.properties || {};
-    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+    const record = data?.rows[focussedRow];
 
     if (!record) {
       return;

package/es/library/dot/components/table-list/adapters/controllers/KeyboardRowSelectController.js

@@ -11,7 +11,7 @@ class KeyboardRowSelectController extends AbstractController {
       focussedRow,
       data
     } = state.properties || {};
-    const record = data === null || data === void 0 ? void 0 : data.rows[focussedRow];
+    const record = data?.rows[focussedRow];
 
     if (!record) {
       return;

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -22,7 +22,7 @@ class TableTranslator {
 
   static translateHeaders(headers, sortBy) {
     return headers.map(header => {
-      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.name) === header.name ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      const sortOrder = sortBy?.name === header.name ? sortBy?.order : 'none';
       return { ...header,
         sortOrder
       };

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -143,6 +143,7 @@
 .wrapper {
     height: 100% ;
     width: 100% ;
+    z-index: 1;
     position: relative
 }
 

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 {
@@ -21,12 +22,11 @@ const Rows = _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)));
   });
 };
 

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

@@ -26,7 +26,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

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

@@ -18,7 +18,7 @@ export default function RowData(_ref) {
     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,

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

@@ -26,7 +26,7 @@ function ButtonView(_ref, ref) {
     palette: palette,
     size: size,
     isRounded: isRounded,
-    isDisabled: isDisabled,
+    disabled: isDisabled,
     id: id,
     status: status,
     tooltip: tooltip,

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 ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator"; // @ts-ignore
+
+import style from "./css/DateView.module.css";
 
 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(ActionEventMediator, {
       actions: actions
-    }) : null;
+    }));
   };
 
   return /*#__PURE__*/React.createElement(DateWidget, {

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

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

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 ActionEventMediator from "../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
+// @ts-ignore
 import style from "./css/Label.module.css";
-ComponentRegistry.register(`LabelAction`, LabelAction);
 
 function LabelView(_ref, ref) {
   let {
@@ -30,7 +27,8 @@ function LabelView(_ref, ref) {
     palette: isMandatory ? 'mandatory' : 'default',
     customClass: `${style.label} ${isMandatory ? style.mandatory : ''}`
   }), actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
-    actions: actions
+    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: var(--zd_size6) 
 }[dir=rtl] .label {
-    padding-left: var(--zd_size4) 
+    padding-left: var(--zd_size6) 
 }
 
 .mandatory::after {

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";
 
 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(ActionEventMediator, {
       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,

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

@@ -0,0 +1,37 @@
+.actionContainer {
+    margin-top: var(--zd_size4) ;
+}
+
+.custmInputWrapper {
+    position: absolute;
+    top: 0 ;
+    width: 100% ;
+}
+
+[dir=ltr] .custmInputWrapper {
+    left: 0 ;
+}
+
+[dir=rtl] .custmInputWrapper {
+    right: 0 ;
+}
+
+.clearIconContainer {
+    --textboxicon_icon_margin: 0;
+}
+
+[dir=ltr] .paddingRight64 {
+    padding-right: var(--zd_size64) ;
+}
+
+[dir=rtl] .paddingRight64 {
+    padding-left: var(--zd_size64) ;
+}
+
+[dir=ltr] .paddingRight96 {
+    padding-right: var(--zd_size96) ;
+}
+
+[dir=rtl] .paddingRight96 {
+    padding-left: var(--zd_size96) ;
+}

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

@@ -27,7 +27,7 @@ function SelectView(_ref, ref) {
   }));
 
   const renderRightFieldActions = () => {
-    return actions !== null && actions !== void 0 && actions.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+    return actions?.length ? /*#__PURE__*/React.createElement(ActionEventMediator, {
       actions: actions
     }) : null;
   };