@zohodesk/library-platform 1.1.10-temp-1 → 1.1.11

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

@@ -25,7 +25,8 @@ function MultiSelectView(_ref, ref) {
     readonly,
     labelActions,
     actions,
-    uiConfig
+    uiConfig,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -56,7 +57,8 @@ function MultiSelectView(_ref, ref) {
     required: required,
     disabled: disabled,
     readonly: readonly,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -19,7 +19,8 @@ function NumberView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function NumberView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -19,7 +19,8 @@ function PercentageView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function PercentageView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -19,7 +19,8 @@ function PhoneView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function PhoneView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -25,7 +25,8 @@ function PickListView(_ref, ref) {
     readonly,
     labelActions,
     actions,
-    uiConfig
+    uiConfig,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -56,7 +57,8 @@ function PickListView(_ref, ref) {
     required: required,
     disabled: disabled,
     readonly: readonly,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -19,7 +19,8 @@ function TextAreaView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function TextAreaView(_ref, ref) {
     required: required,
     disabled: disabled,
     readonly: readonly,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -19,7 +19,8 @@ function TextBoxView(_ref, ref) {
     required,
     uiConfig,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function TextBoxView(_ref, ref) {
     required: required,
     disabled: disabled,
     readonly: readonly,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -19,7 +19,8 @@ function UrlView(_ref, ref) {
     readonly,
     required,
     labelActions,
-    actions
+    actions,
+    clientScripts
   } = state.properties;
   const {
     size,
@@ -44,7 +45,8 @@ function UrlView(_ref, ref) {
     disabled: disabled,
     readonly: readonly,
     required: required,
-    actions: actions
+    actions: actions,
+    clientScripts: clientScripts
   })));
 }
 

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-export function renderField(field, key) {
+export function renderField(field, key, clientScripts) {
   const {
     type,
     ...properties
@@ -10,11 +10,13 @@ export function renderField(field, key) {
   const Component = ComponentRegistry.get(type);
 
   if (!Component) {
-    console.warn(`Component for type "${type}" not found.`);
+    __DEVELOPMENT__ && console.warn(`Component for type "${type}" not found.`);
     return null;
   }
 
   return /*#__PURE__*/React.createElement(Component, _extends({
     key: key
-  }, properties));
+  }, properties, {
+    clientScripts: clientScripts
+  }));
 }

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

@@ -1,8 +1,11 @@
 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';
 import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
-import { renderField } from "./RenderField"; // @ts-ignore
+import { renderField } from "./RenderField";
+import { ActionViewGap } from "../../../../../../platform/client-actions/components/interfaces/ActionViewModel"; // @ts-ignore
 
 import style from "./css/Section.module.css";
 
@@ -15,8 +18,25 @@ function SectionView(_ref, ref) {
     title,
     description,
     isCollapsed,
-    fields
+    fields,
+    titleActions,
+    headerActions,
+    clientScripts
   } = state.properties;
+
+  const renderActions = actions => {
+    if (!actions?.length) return null;
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_className: style.actionContainer
+    }, /*#__PURE__*/React.createElement(RowActionsRenderer, {
+      actions: actions,
+      gap: ActionViewGap.LARGE,
+      clientScripts: clientScripts
+    }));
+  };
+
   return /*#__PURE__*/React.createElement(Section, {
     $i18n_heading: title,
     $flag_isDescriptionAsHtmlText: true,
@@ -25,7 +45,9 @@ function SectionView(_ref, ref) {
     customId: name,
     $tagAttributes_container: {
       ref
-    }
+    },
+    $render_headingRightElement: renderActions(titleActions),
+    $render_headerRightElement: renderActions(headerActions)
   }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
     name: "slideDown",
     isActive: !isCollapsed
@@ -33,7 +55,7 @@ function SectionView(_ref, ref) {
     className: style.fieldsContainer
   }, /*#__PURE__*/React.createElement(FieldsLayout, {
     $flag_topSpace: !!title || !!description
-  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName))))));
+  }, fields.filter(field => field.isVisible).map(field => renderField(field, field.name || field.apiName, clientScripts))))));
 }
 
 export default SectionView;

package/es/library/dot/components/section/frameworks/ui/css/Section.module.css

@@ -1,3 +1,11 @@
 .fieldsContainer {
-    padding-top: var(--zd_size1) 
+    padding-top: 1px
+}
+
+[dir=ltr] .actionContainer {
+    margin-left: 8px;
+}
+
+[dir=rtl] .actionContainer {
+    margin-right: 8px;
 }

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

@@ -0,0 +1,23 @@
+import { TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED } from "../../../../../../bc/clip-wrap/Constants";
+import AbstractController from "./AbstractController";
+
+class ClipWrapController extends AbstractController {
+  handle(event) {
+    const {
+      dispatch,
+      action
+    } = event;
+    const {
+      value
+    } = action.payload;
+    dispatch({
+      type: TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED,
+      payload: {
+        value
+      }
+    });
+  }
+
+}
+
+export default ClipWrapController;

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

@@ -0,0 +1,24 @@
+import AbstractController from "./AbstractController";
+import { TableListConstants } from "../../../../../../cc/table-list";
+
+class ResolutionBasedCountController extends AbstractController {
+  handle(event) {
+    const {
+      host,
+      dispatch
+    } = event;
+    const tableHeight = host.offsetHeight;
+    const ghostRowElement = host.querySelector('[data-id="table-hidden-row"]');
+    const rowHeight = ghostRowElement ? ghostRowElement.offsetHeight : 40;
+    const count = Math.ceil(tableHeight / rowHeight);
+    dispatch({
+      type: TableListConstants.TABLE_LIST_RESOLUTION_BASED_COUNT_CALCULATED,
+      payload: {
+        count
+      }
+    });
+  }
+
+}
+
+export default ResolutionBasedCountController;

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

@@ -6,4 +6,5 @@ export { default as SortedController } from "./SortedController";
 export { default as FieldChangeController } from "./FieldChangeController";
 export { default as FieldClickController } from "./FieldClickController";
 export { default as KeyboardRowSelectController } from "./KeyboardRowSelectController";
-export { default as KeyboardRowClickController } from "./KeyboardRowClickController";
+export { default as KeyboardRowClickController } from "./KeyboardRowClickController";
+export { default as ResolutionBasedCountController } from "./ResolutionBasedCountController";

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

@@ -1,5 +1,5 @@
 import { TableListConstants } from "../../../../../../cc/table-list";
-import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, KeyboardRowSelectController, KeyboardRowClickController } from "../../adapters/controllers";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, KeyboardRowSelectController, KeyboardRowClickController, ResolutionBasedCountController } from "../../adapters/controllers";
 import TableRowConstants from "../../../../../../cc/table-list/row/Constants";
 import RowClickController from "../../adapters/controllers/RowClickController";
 import { SMART_TABLE_ACTION_TRIGGERED, SMART_TABLE_SELECTION_TOGGLED } from "../../../../../../cc/table-connected/constants/Events";
@@ -7,6 +7,7 @@ import { SMART_TABLE_ACTION_TRIGGERED, SMART_TABLE_SELECTION_TOGGLED } from "../
 class EventHandlersFactory {
   static create() {
     return {
+      [TableListConstants.TABLE_LIST_MOUNT]: new ResolutionBasedCountController().handle,
       [SMART_TABLE_SELECTION_TOGGLED]: new KeyboardRowSelectController().handle,
       [SMART_TABLE_ACTION_TRIGGERED]: new KeyboardRowClickController().handle,
       [TableRowConstants.TABLE_ROW_CLICKED]: new RowClickController().handle,

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

@@ -34,6 +34,7 @@ function TableListView(_ref2, _ref) {
     rowCursor,
     rowActionsConfig,
     keyboardControlsConfig,
+    textOverflowConfig,
     selection,
     emptyStateUiType,
     isError
@@ -54,6 +55,7 @@ function TableListView(_ref2, _ref) {
   const isKeyboardControlsEnabled = keyboardControlsConfig.isEnabled;
   const isReorderEnabled = reOrderConfig.isEnabled;
   const isSelectionEnabled = selectionConfig.isEnabled;
+  const isMultiline = textOverflowConfig.mode === 'wrap';
   const className = getTableListClassName({
     isKeyboardControlsEnabled,
     isReorderEnabled,
@@ -62,13 +64,18 @@ function TableListView(_ref2, _ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: `${style.wrapper} ${style[className]}`,
     ref: _ref
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.hiddenDummyRow,
+    "data-id": "table-hidden-row",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement(Table, {
     ref: TableRef,
     $event_onScroll: e => handleScroll(dispatch, {
       scrollEvent: e
     })
   }, renderHeader({
     headers,
+    isMultiline,
     resizerState,
     isReorderEnabled,
     isSelectionEnabled,
@@ -84,6 +91,7 @@ function TableListView(_ref2, _ref) {
     dispatch,
     headers,
     rows,
+    isMultiline,
     isFlexibleColumns,
     isReorderEnabled,
     isSelectionEnabled,
@@ -108,6 +116,7 @@ function TableListView(_ref2, _ref) {
 function renderHeader(_ref3) {
   let {
     headers,
+    isMultiline,
     resizerState,
     isReorderEnabled,
     isSelectionEnabled,
@@ -132,6 +141,7 @@ function renderHeader(_ref3) {
     rowActionsColumnWidth: rowActionsColumnWidth,
     actions: selection.actions,
     headers: headers,
+    isMultiline: isMultiline,
     dispatch: dispatch,
     clientScripts: clientScripts
   });
@@ -155,6 +165,7 @@ function renderBody(_ref4) {
     dispatch,
     headers,
     rows,
+    isMultiline,
     isFlexibleColumns,
     isReorderEnabled,
     isSelectionEnabled,
@@ -202,6 +213,7 @@ function renderBody(_ref4) {
   }, /*#__PURE__*/React.createElement(Rows, {
     headers: headers,
     rows: rowData,
+    isMultiline: isMultiline,
     isFlexibleColumns: isFlexibleColumns,
     isReorderEnabled: isReorderEnabled,
     isSelectionEnabled: isSelectionEnabled,

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

@@ -137,18 +137,35 @@
 }
 
 .loader {
-    padding: var(--zd_size40) 0 
+    padding: 40px 0
 }
 
 .wrapper {
-    height: 100% ;
-    width: 100% ;
+    height: 100%;
+    width: 100%;
     z-index: 1;
     position: relative
 }
 
+.hiddenDummyRow {
+    height: 40px;
+    width: 0;
+    position: absolute;
+    z-index: -100;
+    top: 0;
+    pointer-events: none;
+}
+
+[dir=ltr] .hiddenDummyRow {
+    left: 0;
+}
+
+[dir=rtl] .hiddenDummyRow {
+    right: 0;
+}
+
 .resizerSpace {
-    width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
+    width: calc(var(--local_table_resizer_extra_space, 0) * 1px);
     flex-shrink: 0
 }
 
@@ -157,32 +174,32 @@
 }
 
 [dir=ltr] .contentWrapper {
-    left: 0 ;
+    left: 0;
 }
 
 [dir=rtl] .contentWrapper {
-    right: 0 ;
+    right: 0;
 }
 
 .initialLoading {
-    height: calc(100% - (var(--zd_size100)))
+    height: calc(100% - 100px)
 }
 
 .emptyContent {
-    padding: var(--zd_size160) 0 var(--zd_size60) 
+    padding: 160px 0 60px
 }
 
 .errorContent {
-    padding: var(--zd_size60) 0 
+    padding: 60px 0
 }
 
 .headerWithActions,
 .fieldWithActions {
-    gap: var(--zd_size6) 
+    gap: 6px
 }
 
 .actions {
-    gap: var(--zd_size8) 
+    gap: 8px
 }
 
 .rowCursor_default {
@@ -227,6 +244,7 @@
 }
 
 .dragHandleContainer {
+    height: 100%;
     opacity: 0;
     visibility: hidden;
 }
@@ -250,8 +268,8 @@
 }
 
 .rowDropIndicator {
-    width: 100% ;
-    height: var(--zd_size2) ;
+    width: 100%;
+    height: 2px;
     /* css:theme-validation:ignore */
     position: absolute;
     z-index: 2;
@@ -259,11 +277,11 @@
 }
 
 .dropIndicatorTop {
-    top: 0 ;
+    top: 0;
 }
 
 .dropIndicatorBottom {
-    bottom: calc( var(--zd_size3) * -1 ) ;
+    bottom: -3px;
 }
 
 .row {

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

@@ -24,6 +24,7 @@ function Header(_ref) {
     hasRowActions,
     rowActionsColumnWidth,
     headers,
+    isMultiline,
     dispatch,
     clientScripts
   } = _ref;
@@ -39,17 +40,21 @@ 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, clientScripts), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts), 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, clientScripts) {
+function rendermassAction(isSelectionEnabled, isMultiline, actions, clientScripts) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
+    isMultiline: isMultiline,
     actions: actions,
     clientScripts: clientScripts
   });
@@ -67,9 +72,10 @@ function renderReOrderColumn(isReorderEnabled) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null));
 }
 
-function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts) {
+function renderHeaders(headers, isMultiline, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch, clientScripts) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,
+    isMultiline: isMultiline,
     currentlyResizingColumn: currentlyResizingColumn,
     isResizerEnabled: isResizerEnabled,
     isFlexibleColumns: isFlexibleColumns,

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,
@@ -27,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, clientScripts)));
+    }, 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, clientScripts) {
+function getRowProps(row, headers, isMultiline, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading, clientScripts) {
   const {
     id,
     columns,
@@ -45,6 +46,7 @@ function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelect
   return {
     id,
     columns: updatedColumns,
+    isMultiline,
     rowActionLocation,
     isSelected,
     isSelectable,

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

@@ -11,6 +11,7 @@ import RowActionsRenderer from "../../../../../../../../platform/client-actions/
 function HeaderData(_ref) {
   let {
     header,
+    isMultiline,
     sortedBy,
     isResizing,
     isResizerEnabled,
@@ -47,7 +48,8 @@ function HeaderData(_ref) {
         tableHead: style.headerWithActions
       } : undefined
     }, /*#__PURE__*/React.createElement(TableHeading, {
-      $i18n_text: text
+      $i18n_text: text,
+      $flag_wrapText: isMultiline
     }), hasActions ? /*#__PURE__*/React.createElement(RowActionsRenderer, {
       actions: actions,
       gap: ActionViewGap.SMALL,

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

@@ -4,6 +4,7 @@ import HeaderData from "./HeaderData";
 function Headers(_ref) {
   let {
     headers,
+    isMultiline,
     currentlyResizingColumn,
     isResizerEnabled,
     isFlexibleColumns,
@@ -19,6 +20,7 @@ function Headers(_ref) {
     return /*#__PURE__*/React.createElement(HeaderData, {
       key: index,
       header: header,
+      isMultiline: isMultiline,
       sortedBy: sortOrder,
       isResizing: isResizing,
       isResizerEnabled: isResizerEnabled,

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

@@ -1,12 +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 AdaptiveRowActionsRenderer from "../../../../../../../../platform/client-actions/components/row-actions-renderer/frameworks/ui/AdaptiveRowActions/AdaptiveRowActionsRenderer"; // @ts-ignore
+
 import style from "./../../css/TableList.module.css";
-import { AdaptiveRowActionsRenderer } from "../../../../../../../../index";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
+    isMultiline,
     actions,
     clientScripts
   } = _ref;
@@ -15,8 +17,11 @@ function MassAction(_ref) {
     return null;
   }
 
+  const alignItems = isMultiline ? 'start' : 'center';
+
   if (!actions || actions.length === 0) {
     return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      $ui_alignItems: alignItems,
       customStyle: {
         container: style.massActionHeader
       }
@@ -27,6 +32,7 @@ function MassAction(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    $ui_alignItems: alignItems,
     customStyle: {
       container: style.massActionHeader
     }