@zohodesk/library-platform 1.1.3-exp.2 → 1.1.3-temp-1

package/es/cc/table-list/Properties.js

@@ -18,6 +18,15 @@ import PickListProperties from "../fields/pick-list/Properties";
 import TextProperties from "../fields/text/Properties";
 import UrlProperties from "../fields/url/Properties";
 const TableListProperties = {
+  isReOrderLoading: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    },
+    defaultValue: false
+  },
   isLoading: {
     required: false,
     typeMetadata: {

package/es/cc/table-list/row/Properties.js

@@ -154,6 +154,15 @@ const TableRowProperties = {
         type: "string"
       }
     }
+  },
+  isReOrderLoading: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
   }
 };
 export default TableRowProperties;

package/es/index.js

@@ -9,4 +9,5 @@ import * as _Components from "./library/dot/legacy-to-new-arch";
 export { _Components as Components };
 export { platformSDK } from "./platform/sdk/frameworks/Sdk";
 export { sdkRegistry } from "./platform/sdk/frameworks/SdkRegistry";
-export { validations as defaultFieldValidations } from "./library/behaviours/field-validation/frameworks/utils/FormBasicValidationAdaptor";
+export { validations as defaultFieldValidations } from "./library/behaviours/field-validation/frameworks/utils/FormBasicValidationAdaptor";
+export { getClientActionsAdapter, fetchClientActions } from "./platform/client-actions/components/action-event-mediator/frameworks/ui/ClientActionsAdapter";

package/es/library/dot/components/table-list/frameworks/hooks/useTableRowReorder.js

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import TableListEventConstants from "../../../../../../cc/table-list/Constants";
 import { useRowData } from "./useRowData";
 import { useDropIndicator } from "./useDropIndicator";
-import { reorderArray, setTableUserSelect, adjustHelperElementPosition, getDropIndicator } from "../utils/reOrder"; // @ts-ignore
+import { reorderArray, setTableInteractionClass, adjustHelperElementPosition, getDropIndicator } from "../utils/reOrder"; // @ts-ignore
 
 import style from "./../ui/css/TableList.module.css";
 export function useTableRowReorder(_ref) {
@@ -22,8 +22,9 @@ export function useTableRowReorder(_ref) {
     let {
       index
     } = _ref2;
-    setTableUserSelect(TableRef, 'none');
-    adjustHelperElementPosition(TableRef, style.dragging);
+    setTableInteractionClass(TableRef, style.preventTextSelection, true);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, true);
+    adjustHelperElementPosition(TableRef, getHelperClass());
     dispatch({
       type: TABLE_LIST_ROW_DRAG_START,
       payload: {
@@ -37,7 +38,8 @@ export function useTableRowReorder(_ref) {
       oldIndex,
       newIndex
     } = _ref3;
-    setTableUserSelect(TableRef, '');
+    setTableInteractionClass(TableRef, style.preventTextSelection, false);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, false);
     let arr = reorderArray(rowData, oldIndex, newIndex);
     setRowData(arr);
     setDropIndicator({
@@ -80,6 +82,14 @@ export function useTableRowReorder(_ref) {
       width: TableRef.current.offsetWidth
     };
   }, [TableRef]);
+  const getHelperContainer = useCallback(() => {
+    return TableRef.current;
+  }, [TableRef]);
+
+  const getHelperClass = () => {
+    return style.dragging;
+  };
+
   return {
     rowData,
     dropIndicator,
@@ -88,6 +98,8 @@ export function useTableRowReorder(_ref) {
     handleSortOver,
     getHelperDimensions,
     setRowData,
-    setDropIndicator
+    setDropIndicator,
+    getHelperContainer,
+    getHelperClass
   };
 }

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

@@ -9,7 +9,8 @@ import Loading from "./sub-components/Loading";
 import ColumnResizingLine from "./sub-components/ColumnResizingLine";
 import handleScroll from "./handlers/HandleScroll";
 import { useTableRowReorder } from "../hooks/useTableRowReorder";
-import { SortableContainer } from 'react-sortable-hoc'; // @ts-ignore
+import { SortableContainer } from 'react-sortable-hoc';
+import getTableListClassName from "../utils/getTableListClassName"; // @ts-ignore
 
 import style from "./css/TableList.module.css";
 
@@ -25,6 +26,7 @@ function TableListView(_ref2, _ref) {
   const {
     data,
     isLoading,
+    isReOrderLoading,
     resizerState,
     reOrderConfig,
     selectionConfig,
@@ -49,24 +51,26 @@ function TableListView(_ref2, _ref) {
   const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
   const isKeyboardControlsEnabled = keyboardControlsConfig.isEnabled;
-
-  const getTableRef = ref => {
-    TableRef.current = ref;
-  };
-
+  const isReorderEnabled = reOrderConfig.isEnabled;
+  const isSelectionEnabled = selectionConfig.isEnabled;
+  const className = getTableListClassName({
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: style.wrapper,
+    className: `${style.wrapper} ${style[className]}`,
     ref: _ref
   }, /*#__PURE__*/React.createElement(Table, {
-    ref: getTableRef,
+    ref: TableRef,
     $event_onScroll: e => handleScroll(dispatch, {
       scrollEvent: e
     })
   }, renderHeader({
     headers,
     resizerState,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     selection,
     isKeyboardControlsEnabled,
     isFlexibleColumns,
@@ -79,13 +83,14 @@ function TableListView(_ref2, _ref) {
     headers,
     rows,
     isFlexibleColumns,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    hasRows
+    hasRows,
+    isReOrderLoading
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
@@ -101,8 +106,8 @@ function renderHeader(_ref3) {
   let {
     headers,
     resizerState,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     selection,
     isKeyboardControlsEnabled,
     isFlexibleColumns,
@@ -111,8 +116,8 @@ function renderHeader(_ref3) {
     dispatch
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
-    isReorderEnabled: reOrderConfig.isEnabled,
-    isSelectionEnabled: selectionConfig.isEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isSelectionEnabled: isSelectionEnabled,
     isResizerEnabled: resizerState.isEnabled,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     currentlyResizingColumn: resizerState.currentlyResizingColumn,
@@ -146,13 +151,14 @@ function renderBody(_ref4) {
     headers,
     rows,
     isFlexibleColumns,
-    reOrderConfig,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    hasRows
+    hasRows,
+    isReOrderLoading
   } = _ref4;
   const {
     rowData,
@@ -160,7 +166,9 @@ function renderBody(_ref4) {
     handleSortStart,
     handleSortEnd,
     handleSortOver,
-    getHelperDimensions
+    getHelperDimensions,
+    getHelperContainer,
+    getHelperClass
   } = useTableRowReorder({
     rows,
     TableRef,
@@ -174,9 +182,9 @@ function renderBody(_ref4) {
   return /*#__PURE__*/React.createElement(SortableTableContainer, {
     hasRows: hasRows,
     isFlexibleColumns: isFlexibleColumns,
-    helperClass: `${style.dragging}`,
+    helperClass: getHelperClass(),
     useDragHandle: true,
-    helperContainer: () => TableRef.current,
+    helperContainer: getHelperContainer,
     onSortStart: handleSortStart,
     onSortEnd: handleSortEnd,
     onSortOver: handleSortOver,
@@ -189,13 +197,14 @@ function renderBody(_ref4) {
     headers: headers,
     rows: rowData,
     isFlexibleColumns: isFlexibleColumns,
-    isReorderEnabled: reOrderConfig.isEnabled,
-    isSelectionEnabled: selectionConfig.isEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isSelectionEnabled: isSelectionEnabled,
     rowCursor: rowCursor,
     hasRowActions: hasRowActions,
     rowActionsColumnWidth: rowActionsColumnWidth,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
-    dropIndicator: dropIndicator
+    dropIndicator: dropIndicator,
+    isReOrderLoading: isReOrderLoading
   }));
 }
 

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

@@ -1,3 +1,107 @@
+/* Default: no special styles */
+.tableListRow {
+    /*  */
+}
+
+/* Keyboard + Reorder + Selection */
+.tableListRow-kbdReorderSelection {
+    --local-tableList-selectionColumn-width: 56px;
+    --local-tableList-selectionColumn-left: 24px;
+    --local-tableList-reorder-left: 8px;
+}
+
+/* Keyboard + Reorder, no Selection */
+.tableListRow-kbdReorder {
+    --local-tableList-reorder-left: 8px;
+}
+
+/* Keyboard + Selection, no Reorder */
+.tableListRow-kbdSelection {
+    --local-tableList-row-paddingLeft: 8px;
+    --local-tableList-selectionColumn-width: 72px;
+    --local-tableList-selectionColumn-left: 8px;
+    --local-tableList-selectionColumn-paddingRight: 8px;
+    --local-tableList-selectionColumn-justifyContent: center;
+}
+
+/* Keyboard only */
+.tableListRow-kbd {
+    --local-tableList-reorder-left: 8px;
+}
+
+/* Reorder + Selection, no Keyboard */
+.tableListRow-reorderSelection {
+    --local-tableList-selectionColumn-width: 56px;
+    --local-tableList-selectionColumn-left: 24px;
+    --local-tableList-selectionColumn-paddingRight: 16px;
+    --local-tableList-reorder-paddingLeft: 8px;
+}
+
+/* Reorder only */
+.tableListRow-reorder {
+    --local-tableList-reorder-paddingLeft: 8px;
+}
+
+/* Selection only */
+.tableListRow-selection {
+    --local-tableList-selectionColumn-justifyContent: center;
+}
+
+/* Default: no special styles */
+.tableListHeader {
+    /*  */
+}
+
+/* Keyboard + Reorder + Selection */
+.tableListHeader-kbdReorderSelection {
+    --local-tableList-reorderHeader-paddingRight: 8px;
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-reorderHeader-left: 8px;
+    --local-tableList-reorderHeader-width: 16px;
+
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-massActionHeader-paddingRight: 24px;
+    --local-tableList-massActionHeader-width: 56px;
+}
+
+/* Keyboard + Reorder, no Selection */
+.tableListHeader-kbdReorder {
+    --local-tableList-reorderHeader-left: 8px;
+    --local-tableList-reorderHeader-paddingRight: 8px;
+    --local-tableList-reorderHeader-width: 16px;
+}
+
+/* Reorder only */
+.tableListHeader-reorder {
+    --local-tableList-reorderHeader-width: 24px;
+}
+
+/* Keyboard + Selection, no Reorder */
+.tableListHeader-kbdSelection {
+    --local-tableList-header-paddingLeft: 8px;
+    --local-tableList-massActionHeader-left: 8px;
+    --local-tableList-massActionHeader-paddingRight: 8px;
+    --local-tableList-massActionHeader-width: 72px;
+}
+
+/* Keyboard only */
+.tableListHeader-kbd {
+    --local-tableList-header-paddingLeft: 24px;
+}
+
+/* Reorder + Selection, no Keyboard */
+.tableListHeader-reorderSelection {
+    --local-tableList-reorderHeader-width: 24px;
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-massActionHeader-paddingRight: 24px;
+    --local-tableList-massActionHeader-width: 56px;
+}
+
+/* Selection only */
+.tableListHeader-selection {
+    /*  */
+}
+
 .loader {
     padding: var(--zd_size40) 0 
 }
@@ -58,6 +162,17 @@
     cursor: not-allowed
 }
 
+.preventTextSelection {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.preventPointerEvents {
+    pointer-events: none;
+}
+
 .dragging {
     overflow: hidden;
     box-shadow: var(--local_tablelist_box_shadow);
@@ -86,16 +201,17 @@
     composes: sticky from '~@zohodesk/components/es/common/common.module.css';
     z-index: 1;
     /* css:theme-validation:ignore */
-    padding: 0 ;
     background-color: var(--local_tablelist_bg);
 }
 
 [dir=ltr] .dragHandleWrapper {
-    left: 0 ;
+    left: var(--local-tableList-reorder-left, var(--zd_size0));
+    padding: 0 var(--local-tableList-reorder-paddingRight, var(--zd_size0)) 0 var(--local-tableList-reorder-paddingLeft, var(--zd_size0));
 }
 
 [dir=rtl] .dragHandleWrapper {
-    right: 0 ;
+    right: var(--local-tableList-reorder-left, var(--zd_size0));
+    padding: 0 var(--local-tableList-reorder-paddingLeft, var(--zd_size0)) 0 var(--local-tableList-reorder-paddingRight, var(--zd_size0));
 }
 
 .rowDropIndicator {
@@ -104,7 +220,7 @@
     /* css:theme-validation:ignore */
     position: absolute;
     z-index: 2;
-    background-color: var(--local_tablelist_drop_highlight_bg);
+    background-color: var(--local_tablelist_reorder_placeholderline_bg);
 }
 
 .dropIndicatorTop {
@@ -115,75 +231,56 @@
     bottom: calc( var(--zd_size3) * -1 ) ;
 }
 
-[dir=ltr] .offsetLeft0 {
-    left: 0  !important;
-}
-
-[dir=rtl] .offsetLeft0 {
-    right: 0  !important;
-}
-
-[dir=ltr] .offsetLeft8 {
-    left: var(--zd_size8)  !important;
-}
-
-[dir=rtl] .offsetLeft8 {
-    right: var(--zd_size8)  !important;
-}
-
-[dir=ltr] .offsetLeft24 {
-    left: var(--zd_size24)  !important;
-}
-
-[dir=rtl] .offsetLeft24 {
-    right: var(--zd_size24)  !important;
-}
-
-[dir=ltr] .paddingLeft0 {
-    padding-left: 0 ;
-}
-
-[dir=rtl] .paddingLeft0 {
-    padding-right: 0 ;
-}
-
-[dir=ltr] .paddingLeft8 {
-    padding-left: var(--zd_size8)  !important;
+.row {
+    --local_padding_left: var(--local-tableList-row-paddingLeft);
+    --local_margin_right: var(--local-tableList-row-marginRight);
 }
 
-[dir=rtl] .paddingLeft8 {
-    padding-right: var(--zd_size8)  !important;
+.tableListSelectContainer {
+    --local_column_width: var(--local-tableList-selectionColumn-width);
+    justify-content: var(--local-tableList-selectionColumn-justifyContent, start);
 }
 
-[dir=ltr] .paddingLeft16 {
-    padding-left: var(--zd_size16)  !important;
+[dir=ltr] .tableListSelectContainer {
+    left: var(--local-tableList-selectionColumn-left, var(--zd_size0));
+    padding-left: var(--local-tableList-selectionColumn-paddingLeft, var(--zd_size0));
+    padding-right: var(--local-tableList-selectionColumn-paddingRight, var(--zd_size0));
 }
 
-[dir=rtl] .paddingLeft16 {
-    padding-right: var(--zd_size16)  !important;
+[dir=rtl] .tableListSelectContainer {
+    right: var(--local-tableList-selectionColumn-left, var(--zd_size0));
+    padding-right: var(--local-tableList-selectionColumn-paddingLeft, var(--zd_size0));
+    padding-left: var(--local-tableList-selectionColumn-paddingRight, var(--zd_size0));
 }
 
-[dir=ltr] .paddingRight8 {
-    padding-right: var(--zd_size8)  !important;
+.header {
+    --local_padding_left: var(--local-tableList-header-paddingLeft);
 }
 
-[dir=rtl] .paddingRight8 {
-    padding-left: var(--zd_size8)  !important;
+.reOrderHeader {
+    --local_column_width: var(--local-tableList-reorderHeader-width);
 }
 
-[dir=ltr] .paddingRight16 {
-    padding-right: var(--zd_size16)  !important;
+[dir=ltr] .reOrderHeader {
+    left: var(--local-tableList-reorderHeader-left, var(--zd_size0));
+    padding-right: var(--local-tableList-reorderHeader-paddingRight, var(--zd_size0));
 }
 
-[dir=rtl] .paddingRight16 {
-    padding-left: var(--zd_size16)  !important;
+[dir=rtl] .reOrderHeader {
+    right: var(--local-tableList-reorderHeader-left, var(--zd_size0));
+    padding-left: var(--local-tableList-reorderHeader-paddingRight, var(--zd_size0));
 }
 
-[dir=ltr] .paddingRight24 {
-    padding-right: var(--zd_size24)  !important;
+.massActionHeader {
+    --local_column_width: var(--local-tableList-massActionHeader-width);
 }
 
-[dir=rtl] .paddingRight24 {
-    padding-left: var(--zd_size24)  !important;
+[dir=ltr] .massActionHeader {
+    left: var(--local-tableList-massActionHeader-left, var(--zd_size0));
+    padding-right: var(--local-tableList-massActionHeader-paddingRight, var(--zd_size0));
 }
 
+[dir=rtl] .massActionHeader {
+    right: var(--local-tableList-massActionHeader-left, var(--zd_size0));
+    padding-left: var(--local-tableList-massActionHeader-paddingRight, var(--zd_size0));
+}

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

@@ -13,7 +13,8 @@ import MassAction from "./header/MassAction";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
-import style from "./../../ui/css/TableList.module.css";
+import getHeaderClasses from "./../../utils/getHeaderClasses";
+import style from "./../css/TableList.module.css";
 
 function Header(_ref2) {
   let {
@@ -36,33 +37,38 @@ function Header(_ref2) {
     return null;
   }
 
+  const headerClasses = getHeaderClasses({
+    isReorderEnabled,
+    isSelectionEnabled,
+    isKeyboardControlsEnabled
+  });
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
     $flag_padding: !isSelectionEnabled && !isReorderEnabled,
-    $flag_hasHighlighter: isKeyboardControlsEnabled
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled), rendermassAction(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+    $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)));
 }
 
-function rendermassAction(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled, actions) {
+function rendermassAction(isSelectionEnabled, actions) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
-    isReorderEnabled: isReorderEnabled,
-    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     actions: actions
   });
 }
 
-function renderReOrderColumn(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled) {
-  if (isReorderEnabled) {
-    return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
-      customStyle: {
-        container: isKeyboardControlsEnabled && isSelectionEnabled ? style.paddingRight16 : isKeyboardControlsEnabled ? `${style.offsetLeft8} ${style.paddingRight8}` : style.offsetLeft0
-      },
-      $customProps_container: {
-        $data_width: 24
-      }
-    }, /*#__PURE__*/React.createElement(React.Fragment, null));
+function renderReOrderColumn(isReorderEnabled) {
+  if (!isReorderEnabled) {
+    return null;
   }
+
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: style.reOrderHeader
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null));
 }
 
 function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {

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

@@ -15,7 +15,8 @@ const Rows = _ref => {
     hasRowActions,
     rowActionsColumnWidth,
     isKeyboardControlsEnabled,
-    dropIndicator
+    dropIndicator,
+    isReOrderLoading
   } = _ref;
   return rows.map((row, index) => {
     const isDroppable = dropIndicator.index !== null ? dropIndicator.index === index ? true : false : false;
@@ -23,12 +24,13 @@ const Rows = _ref => {
     return /*#__PURE__*/React.createElement(SortableRow, {
       key: `${row.id}`,
       index: index,
-      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition)
+      disabled: isReOrderLoading,
+      ...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) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading) {
   const {
     id,
     columns,
@@ -55,7 +57,8 @@ function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelect
     isKeyboardControlsEnabled,
     rowActionsColumnWidth,
     isDroppable,
-    dropPosition
+    dropPosition,
+    isReOrderLoading
   };
 }
 

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

@@ -2,13 +2,11 @@ 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 "./../../../ui/css/TableList.module.css";
+import style from "./../../css/TableList.module.css";
 
 function MassAction(_ref) {
   let {
     isSelectionEnabled,
-    isReorderEnabled,
-    isKeyboardControlsEnabled,
     actions
   } = _ref;
 
@@ -16,16 +14,11 @@ function MassAction(_ref) {
     return null;
   }
 
-  const customPropsContainer = isReorderEnabled && isSelectionEnabled ? {
-    $data_width: 56
-  } : {};
-
   if (!actions || actions.length === 0) {
     return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
       customStyle: {
-        container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.offsetLeft8} ${style.paddingRight16}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
-      },
-      $customProps_container: customPropsContainer
+        container: style.massActionHeader
+      }
     }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: "M/A",
       $i18n_tooltip: "Mass Action"
@@ -34,9 +27,8 @@ function MassAction(_ref) {
 
   return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
     customStyle: {
-      container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.offsetLeft8} ${style.paddingRight16}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
-    },
-    $customProps_container: customPropsContainer
+      container: style.massActionHeader
+    }
   }, /*#__PURE__*/React.createElement(ActionEventMediator, {
     actions: actions
   }));