@zohodesk/library-platform 1.1.10 → 1.1.11

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

@@ -1,9 +1,7 @@
 import React from 'react';
+import ErrorTypes from "../../../../../../../cc/error-state/ErrorTypes";
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import ErrorOopsSomethingMiss from '@zohodesk/dot/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/es/version2/errorstate/UrlNotFound/UrlNotFound';
-// import UnableToProcess from '@zohodesk/dot/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
-// import Inconvenience from '@zohodesk/dot/es/version2/errorstate/Inconvenience/Inconvenience';
-
+import CommonErrorState from "../../../../../legacy-to-new-arch/error-state/frameworks/ui/ErrorState";
 /* @ts-ignore */
 
 import style from "../css/TableList.module.css";
@@ -18,9 +16,8 @@ export default function ErrorState(_ref) {
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: `${style.contentWrapper} ${style.errorContent}`
-    }, /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
-      title: "Oops! Something is missing",
-      description: "We are unable to process your request. Please try again later."
+    }, /*#__PURE__*/React.createElement(CommonErrorState, {
+      type: ErrorTypes.OopsSomethingMiss
     }));
   }
 

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

@@ -24,7 +24,9 @@ function Header(_ref) {
     hasRowActions,
     rowActionsColumnWidth,
     headers,
-    dispatch
+    isMultiline,
+    dispatch,
+    clientScripts
   } = _ref;
 
   if (headers.length <= 0) {
@@ -38,18 +40,23 @@ function Header(_ref) {
   });
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
+    $flag_autoHeight: isMultiline,
     $flag_padding: false,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     customStyle: {
       tableHeader: `${style.header} ${style[headerClasses]}`
     }
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+  }, /*#__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)));
 }
 
-function rendermassAction(isSelectionEnabled, actions) {
+function rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
-    actions: actions
+    isMultiline: isMultiline,
+    actions: actions,
+    clientScripts: clientScripts
   });
 }
 
@@ -65,13 +72,15 @@ function renderReOrderColumn(isReorderEnabled) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null));
 }
 
-function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
+function renderHeaders(headers, isMultiline, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,
+    isMultiline: isMultiline,
     currentlyResizingColumn: currentlyResizingColumn,
     isResizerEnabled: isResizerEnabled,
     isFlexibleColumns: isFlexibleColumns,
-    dispatch: dispatch
+    dispatch: dispatch,
+    clientScripts: clientScripts
   });
 }
 

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

@@ -9,6 +9,7 @@ const Rows = _ref => {
   let {
     headers,
     rows,
+    isMultiline,
     isFlexibleColumns,
     isReorderEnabled,
     isSelectionEnabled,
@@ -17,7 +18,8 @@ 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;
@@ -26,11 +28,11 @@ const Rows = _ref => {
       key: `${row.id}`,
       index: index,
       disabled: isReOrderLoading
-    }, getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)));
+    }, getRowProps(row, headers, isMultiline, 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, isMultiline, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading, clientScripts) {
   const {
     id,
     columns,
@@ -44,6 +46,7 @@ function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelect
   return {
     id,
     columns: updatedColumns,
+    isMultiline,
     rowActionLocation,
     isSelected,
     isSelectable,
@@ -58,7 +61,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

@@ -12,7 +12,7 @@ const FieldComponent = props => {
   const Component = FieldComponents[type] || ComponentRegistry.get(type);
 
   if (!Component) {
-    console.error(`Field Component type ${type} not found`);
+    __DEVELOPMENT__ && console.error(`Field Component type ${type} not found`);
     return null;
   }
 

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

@@ -2,20 +2,22 @@ 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 {
     header,
+    isMultiline,
     sortedBy,
     isResizing,
     isResizerEnabled,
     isFlexibleColumns,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
   const {
     id,
@@ -46,10 +48,12 @@ function HeaderData(_ref) {
         tableHead: style.headerWithActions
       } : undefined
     }, /*#__PURE__*/React.createElement(TableHeading, {
-      $i18n_text: text
-    }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      $i18n_text: text,
+      $flag_wrapText: isMultiline
+    }), 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

@@ -4,10 +4,12 @@ import HeaderData from "./HeaderData";
 function Headers(_ref) {
   let {
     headers,
+    isMultiline,
     currentlyResizingColumn,
     isResizerEnabled,
     isFlexibleColumns,
-    dispatch
+    dispatch,
+    clientScripts
   } = _ref;
   return headers.map((header, index) => {
     const {
@@ -18,11 +20,13 @@ function Headers(_ref) {
     return /*#__PURE__*/React.createElement(HeaderData, {
       key: index,
       header: header,
+      isMultiline: isMultiline,
       sortedBy: sortOrder,
       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,21 +1,27 @@
 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 AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer"; // @ts-ignore
+
 import style from "./../../css/TableList.module.css";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
-    actions
+    isMultiline,
+    actions,
+    clientScripts
   } = _ref;
 
   if (!isSelectionEnabled) {
     return null;
   }
 
+  const alignItems = isMultiline ? 'start' : 'center';
+
   if (!actions || actions.length === 0) {
     return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      $ui_alignItems: alignItems,
       customStyle: {
         container: style.massActionHeader
       }
@@ -26,11 +32,13 @@ function MassAction(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    $ui_alignItems: alignItems,
     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

@@ -36,10 +36,12 @@ function RowView(_ref, ref) {
     id,
     columns,
     rowActionLocation,
+    isMultiline,
     isFlexibleColumns,
     cursor,
     hasActions,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    clientScripts
   } = state.properties;
   const {
     type,
@@ -49,6 +51,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
+    $flag_autoHeight: isMultiline,
     $flag_padding: false,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
@@ -65,22 +68,27 @@ function RowView(_ref, ref) {
     }
   }, renderReorderer({
     isReorderEnabled,
-    isReOrderLoading
+    isReOrderLoading,
+    isMultiline
   }), renderRowSelection({
     isSelectionEnabled,
     id,
+    isMultiline,
     selectionTooltip,
     isSelected,
     isSelectable,
     dispatch
   }), renderColumns({
     columns,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   }), renderRowActions({
     hasActions,
+    isMultiline,
     columnWidth: rowActionsColumnWidth,
     type,
-    actions
+    actions,
+    clientScripts
   }), isDroppable && /*#__PURE__*/React.createElement("div", {
     className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
@@ -90,6 +98,7 @@ function renderRowSelection(_ref2) {
   let {
     isSelectionEnabled,
     id,
+    isMultiline,
     selectionTooltip,
     isSelected,
     isSelectable,
@@ -98,6 +107,7 @@ function renderRowSelection(_ref2) {
   return /*#__PURE__*/React.createElement(RowSelection, {
     isSelectionEnabled: isSelectionEnabled,
     id: id,
+    isMultiline: isMultiline,
     tooltip: selectionTooltip,
     selected: isSelected,
     selectable: isSelectable,
@@ -107,10 +117,16 @@ function renderRowSelection(_ref2) {
 
 const DragHandler = SortableHandle(_ref3 => {
   let {
-    isDisabled
+    isDisabled,
+    isMultiline
   } = _ref3;
   return /*#__PURE__*/React.createElement(DragHandle, {
     isDisabled: isDisabled,
+    customProps: {
+      containerProps: {
+        $ui_alignItems: isMultiline ? 'start' : 'center'
+      }
+    },
     customStyle: {
       container: style.dragHandleContainer
     }
@@ -120,7 +136,8 @@ const DragHandler = SortableHandle(_ref3 => {
 function renderReorderer(_ref4) {
   let {
     isReorderEnabled,
-    isReOrderLoading
+    isReOrderLoading,
+    isMultiline
   } = _ref4;
 
   if (!isReorderEnabled) {
@@ -131,33 +148,40 @@ function renderReorderer(_ref4) {
     tabIndex: 0,
     className: style.dragHandleWrapper
   }, /*#__PURE__*/React.createElement(DragHandler, {
-    isDisabled: isReOrderLoading
+    isDisabled: isReOrderLoading,
+    isMultiline: isMultiline
   }));
 }
 
 function renderColumns(_ref5) {
   let {
     columns,
-    isFlexibleColumns
+    isFlexibleColumns,
+    clientScripts
   } = _ref5;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
-    isFlexibleColumns: isFlexibleColumns
+    isFlexibleColumns: isFlexibleColumns,
+    clientScripts: clientScripts
   });
 }
 
 function renderRowActions(_ref6) {
   let {
     hasActions,
+    isMultiline,
     columnWidth,
     actions,
-    type
+    type,
+    clientScripts
   } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
+    isMultiline: isMultiline,
     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,24 @@
 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,
+    isMultiline,
     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, {
+      $data_width: columnWidth,
+      $ui_alignItems: isMultiline ? 'start' : 'center'
+    }, /*#__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,17 +1,18 @@
 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,
@@ -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,11 +3,34 @@ 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 {
     isSelectionEnabled,
     id,
+    isMultiline,
     tooltip,
     selected,
     selectable,
@@ -22,17 +45,22 @@ function RowSelection(_ref) {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    $flag_autoHeight: isMultiline,
+    $ui_alignItems: isMultiline ? 'start' : 'center',
     customStyle: {
       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,8 @@
 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"; // @ts-ignore
+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";
 
@@ -20,17 +21,20 @@ function DateView(_ref, ref) {
     disabled,
     readonly,
     pattern,
-    isTimeInculded,
+    isTimeIncluded,
     timeZone,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
 
   const renderRightFieldActions = () => {
     if (!actions?.length) return null;
     return /*#__PURE__*/React.createElement("div", {
       className: style.actionContainer
-    }, /*#__PURE__*/React.createElement(ActionEventMediator, {
-      actions: actions
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+      actions: actions,
+      clientScripts: clientScripts,
+      gap: ActionViewGap.SMALL
     }));
   };
 
@@ -50,7 +54,7 @@ function DateView(_ref, ref) {
     getRef: ref,
     htmlId: id,
     value: value,
-    isDateTime: isTimeInculded,
+    isDateTime: isTimeIncluded,
     textBoxSize: "xmedium",
     timeZone: timeZone,
     dateFormat: pattern,
@@ -60,7 +64,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

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