@zohodesk/library-platform 1.1.0-exp.1 → 1.1.0

package/es/desk-frameworks/table-connected/frameworks/TableConnectedFactory.js

@@ -7,25 +7,42 @@ import ZListBehaviourFactory from "../../../platform/zlist/frameworks/ZListBehav
 import RecordBehaviourFactory from "../../../platform/zrecord/frameworks/RecordBehaviourFactory";
 import EventHandlersFactory from "./EventHandlersFactory";
 import TableConnectedView from "./TableConnectedView";
-import defaultDataBroker from "../../../platform/data-broker";
-import DataBrokerBehaviourFactory from "../../../platform/zdata-broker/frameworks/DataBrokerBehaviourFactory";
+import defaultDataSource from "../../../platform/data-source";
+import DataSourceBehaviourFactory from "../../../platform/zdata-source/frameworks/DataBrokerBehaviourFactory";
+import ClientActionsBehaviourFactory from "../../../platform/client-actions/behaviour/zclient-actions/frameworks/ClientActionsBehaviourFactory";
 export default class TableConnectedFactory {
   static create(_ref) {
+    var _dataSource2;
+
     let {
       name,
-      dataBroker = defaultDataBroker,
+      dataBroker,
+      dataSource,
       eventHandlers = {},
       View = TableConnectedView
     } = _ref;
+
+    if (!dataSource) {
+      console.warn('Desk Platform Warning: dataBroker is deprecated, use dataSource instead');
+      dataSource = dataBroker;
+    }
+
+    const _dataSource = { ...dataSource,
+      httpTemplates: { ...defaultDataSource.httpTemplates,
+        ...((_dataSource2 = dataSource) === null || _dataSource2 === void 0 ? void 0 : _dataSource2.httpTemplates)
+      }
+    };
     return createCustomComponent({
       name: name,
       View: View,
       properties: Properties,
       eventHandlers: EventHandlersFactory.create(eventHandlers),
       transformState: TableTranslator.transformState,
-      behaviours: [ZHttpBehaviourFactory.create(), DataBrokerBehaviourFactory.create(), RecordBehaviourFactory.create(dataBroker.httpTemplates), ZFieldBehaviourFactory.create({
-        availableFields: dataBroker.httpTemplates.getAvailableFields,
-        selectedFields: dataBroker.httpTemplates.getSelectedFields
+      behaviours: [ZHttpBehaviourFactory.create(), DataSourceBehaviourFactory.create(), RecordBehaviourFactory.create(_dataSource.httpTemplates), ClientActionsBehaviourFactory.create({
+        getClientActions: _dataSource.httpTemplates.getClientActions
+      }), ZFieldBehaviourFactory.create({
+        availableFields: _dataSource.httpTemplates.getAvailableFields,
+        selectedFields: _dataSource.httpTemplates.getSelectedFields
       }), ZListBehaviourFactory.create()]
     });
   }

package/es/desk-frameworks/table-connected/frameworks/TableConnectedView.js

@@ -9,19 +9,24 @@ function View(_ref, ref) {
   const {
     isLoading,
     data = [],
-    hasRowActions,
+    rowActionsConfig,
+    rowCursor,
     properties,
     emptyStateUiType
   } = state;
   const {
-    isFlexibleColumns,
+    preferences,
     selectionConfig
   } = properties;
+  const {
+    autoColumnSizing
+  } = preferences || {};
   return /*#__PURE__*/React.createElement(TableList, {
     data: data,
+    rowCursor: rowCursor,
     getRef: ref,
-    isFlexibleColumns: isFlexibleColumns,
-    hasRowActions: hasRowActions,
+    isFlexibleColumns: autoColumnSizing,
+    rowActionsConfig: rowActionsConfig,
     isLoading: isLoading,
     emptyStateUiType: emptyStateUiType,
     selectionConfig: selectionConfig

package/es/library/behaviours/list-selection/domain/entities/ListItemSelection.js

@@ -49,7 +49,9 @@ class ListItemSelection {
           break;
         }
 
-        this.selectItem(id);
+        if (!this.isSelected(id)) {
+          this.selectItem(id);
+        }
       }
     } else {
       this.selected = [];
@@ -59,23 +61,41 @@ class ListItemSelection {
   toggleRange(startIndex, endIndex) {
     const isForward = startIndex < endIndex;
     const [start, end] = isForward ? [startIndex, endIndex] : [endIndex, startIndex];
-    let itemsForSelection = this.itemIds.slice(start, end + 1);
-    itemsForSelection = itemsForSelection.filter(i => !this.isSelected(i));
+    const itemsForSelection = this.itemIds.slice(start, end + 1);
+    const allSelected = itemsForSelection.every(id => this.isSelected(id));
     const yetToSelectCount = this.maxSelectionCount - this.selected.length;
+    const itemsToSelect = itemsForSelection.filter(id => !this.isSelected(id));
+    this.rangeSelection(isForward, itemsForSelection, allSelected, yetToSelectCount, itemsToSelect);
+  }
 
-    if (itemsForSelection.length > yetToSelectCount) {
+  rangeSelection(isForward, itemsForSelection, allSelected, yetToSelectCount, itemsToSelect) {
+    if (allSelected) {
       if (isForward) {
-        itemsForSelection.splice(yetToSelectCount + 1);
+        itemsForSelection.forEach(id => this.deselectItem(id));
       } else {
-        itemsForSelection.splice(0, itemsForSelection.length - yetToSelectCount);
+        itemsForSelection.reverse().forEach(id => this.deselectItem(id));
+      }
+    } else {
+      if (itemsToSelect.length > yetToSelectCount) {
+        if (isForward) {
+          itemsToSelect.splice(yetToSelectCount);
+        } else {
+          itemsToSelect.reverse();
+          itemsToSelect.splice(yetToSelectCount);
+          itemsToSelect.reverse();
+        }
       }
-    }
 
-    itemsForSelection.forEach(this.getStrategy(this.itemIds.at(endIndex)));
+      if (isForward) {
+        itemsToSelect.forEach(id => this.selectItem(id));
+      } else {
+        itemsToSelect.reverse().forEach(id => this.selectItem(id));
+      }
+    }
   }
 
   toggleUpto(id) {
-    let lastItem = this.selected.at(-1);
+    let lastItem = this.selected.at(-1) || id;
     let startIndex = this.itemIds.indexOf(lastItem);
     let endIndex = this.itemIds.indexOf(id);
     this.toggleRange(startIndex, endIndex);

package/es/library/custom-component/domain/entities/Component.js

@@ -99,7 +99,8 @@ export default class Component {
   }
 
   setBehaviours(behaviours) {
-    this._behaviours = behaviours; //store behaviour properties
+    this._behaviours = behaviours;
+    /* store behaviour properties */
 
     this._behaviours.forEach(behaviour => {
       behaviour.getProperties().data && behaviour.getProperties().data.forEach(obj => {
@@ -118,7 +119,8 @@ export default class Component {
 
         if (isValid) {
           property.updateValue(newProps[key]);
-        } // return isValid
+        }
+        /* return isValid */
 
       } else if (this._properties.findProperty(key)) {
         let property = this._properties.findProperty(key);
@@ -129,12 +131,14 @@ export default class Component {
 
         if (isValid) {
           property.updateValue(newProps[key]);
-        } // return isValid
+        }
+        /* return isValid */
 
       } else {
         throw new Error(`props '${key}' not exist `);
       }
-    }); // return this._properties.updateAllPropertiesValue(jsonValidator, newProps);
+    });
+    /* return this._properties.updateAllPropertiesValue(jsonValidator, newProps); */
 
     return true;
   }

package/es/library/dot/components/action-location/frameworks/ui/ActionComponentMapping.js

@@ -1,5 +1,7 @@
-import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import ActionIcon, { Button, FilterDropdown } from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
 const ActionComponentMapping = {
-  'ActionIcon': ActionIcon
+  'ActionIcon': ActionIcon,
+  'Button': Button,
+  'TableFilterDropdown': FilterDropdown
 };
 export default ActionComponentMapping;

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

@@ -24,7 +24,8 @@ function TableListView(_ref2, _ref) {
     resizerConfig,
     selectionConfig,
     isFlexibleColumns,
-    hasRowActions,
+    rowCursor,
+    rowActionsConfig,
     emptyStateUiType
   } = state.properties;
   const {
@@ -35,6 +36,10 @@ function TableListView(_ref2, _ref) {
     headers,
     rows
   } = data;
+  const {
+    hasActions: hasRowActions,
+    columnWidth: rowActionsColumnWidth
+  } = rowActionsConfig;
   const hasRows = rows.length > 0; // TODO: derive from state.properties
 
   const isDataEmpty = !hasRows && !isLoading; // TODO: derive from state.properties
@@ -54,14 +59,16 @@ function TableListView(_ref2, _ref) {
     selection,
     isFlexibleColumns,
     hasRowActions,
+    rowActionsColumnWidth,
     dispatch
   }), renderBody({
     headers,
     rows,
     isFlexibleColumns,
     selectionConfig,
-    resizerState,
+    rowCursor,
     hasRowActions,
+    rowActionsColumnWidth,
     hasRows
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
@@ -81,18 +88,19 @@ function renderHeader(_ref3) {
     selection,
     isFlexibleColumns,
     hasRowActions,
+    rowActionsColumnWidth,
     dispatch
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isSelectionEnabled: selectionConfig.isEnabled,
     hasAllSelected: selection.hasAllSelected,
     isResizerEnabled: resizerConfig.isEnabled,
-    resizedColumnsWidth: resizerState.resizedColumnsWidth,
     currentlyResizingColumn: resizerState.currentlyResizingColumn,
     isCurrentlyResizing: resizerState.isCurrentlyResizing,
     resizerExtraWidth: resizerState.extraWidth,
     isFlexibleColumns: isFlexibleColumns,
     hasRowActions: hasRowActions,
+    rowActionsColumnWidth: rowActionsColumnWidth,
     headers: headers,
     dispatch: dispatch
   });
@@ -104,8 +112,9 @@ function renderBody(_ref4) {
     rows,
     isFlexibleColumns,
     selectionConfig,
-    resizerState,
+    rowCursor,
     hasRowActions,
+    rowActionsColumnWidth,
     hasRows
   } = _ref4;
   return /*#__PURE__*/React.createElement(Body, {
@@ -116,8 +125,9 @@ function renderBody(_ref4) {
     rows: rows,
     isFlexibleColumns: isFlexibleColumns,
     isSelectionEnabled: selectionConfig.isEnabled,
-    resizedColumnsWidth: resizerState.resizedColumnsWidth,
-    hasRowActions: hasRowActions
+    rowCursor: rowCursor,
+    hasRowActions: hasRowActions,
+    rowActionsColumnWidth: rowActionsColumnWidth
   }));
 }
 

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

@@ -28,3 +28,13 @@
 .actions {
     gap: var(--zd_size8) 
 }
+
+.rowCursor_default {
+    cursor: default
+}
+.rowCursor_pointer {
+    cursor: pointer
+}
+.rowCursor_not-allowed {
+    cursor: not-allowed
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader';
+import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
 import SelectAll from "./header/SelectAll";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
@@ -10,12 +11,12 @@ function Header(_ref) {
     isSelectionEnabled,
     hasAllSelected,
     isResizerEnabled,
-    resizedColumnsWidth,
     currentlyResizingColumn,
     isCurrentlyResizing,
     resizerExtraWidth,
     isFlexibleColumns,
     hasRowActions,
+    rowActionsColumnWidth,
     headers,
     dispatch
   } = _ref;
@@ -25,8 +26,9 @@ function Header(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(TableHeader, {
+    $flag_isColumnsFlexible: isFlexibleColumns,
     $flag_padding: !isSelectionEnabled
-  }, renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch), renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth));
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
 function renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch) {
@@ -37,10 +39,9 @@ function renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch) {
   });
 }
 
-function renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
+function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,
-    resizedColumnsWidth: resizedColumnsWidth,
     currentlyResizingColumn: currentlyResizingColumn,
     isResizerEnabled: isResizerEnabled,
     isFlexibleColumns: isFlexibleColumns,
@@ -48,9 +49,10 @@ function renderHeaders(headers, resizedColumnsWidth, currentlyResizingColumn, is
   });
 }
 
-function renderActionColumn(hasRowActions) {
+function renderActionColumn(hasRowActions, columnWidth) {
   return /*#__PURE__*/React.createElement(ActionColumn, {
-    hasRowActions: hasRowActions
+    hasRowActions: hasRowActions,
+    columnWidth: columnWidth
   });
 }
 

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

@@ -7,16 +7,17 @@ function Rows(_ref) {
     rows,
     isFlexibleColumns,
     isSelectionEnabled,
-    resizedColumnsWidth,
-    hasRowActions
+    rowCursor,
+    hasRowActions,
+    rowActionsColumnWidth
   } = _ref;
   return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
     key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions)
+    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth)
   }));
 }
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resizedColumnsWidth, hasRowActions) {
+function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth) {
   const {
     id,
     columns,
@@ -35,14 +36,15 @@ function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, resize
     selectionTooltip,
     isFlexibleColumns,
     isSelectionEnabled,
-    resizedColumnsWidth,
-    hasActions: hasRowActions
+    cursor: rowCursor,
+    hasActions: hasRowActions,
+    rowActionsColumnWidth
   };
 }
 
 function getUpdatedColumns(columns, headers) {
   return columns.map((column, index) => ({
-    size: headers[index].size,
+    width: headers[index].width,
     field: column,
     alignment: headers[index].alignment
   }));

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

@@ -2,12 +2,13 @@ import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
 export default function ActionColumn(_ref) {
   let {
-    hasRowActions
+    hasRowActions,
+    columnWidth
   } = _ref;
 
   if (hasRowActions) {
     return /*#__PURE__*/React.createElement(TableHead, {
-      $ui_size: "medium"
+      $data_width: columnWidth
     }, /*#__PURE__*/React.createElement(React.Fragment, null));
   }
 

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

@@ -1,5 +1,8 @@
 import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
+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 HeaderText from "./HeaderText";
 import ColumnResizer from "./ColumnResizer";
 
@@ -10,7 +13,6 @@ function HeaderData(_ref) {
     sortTooltip,
     isResizing,
     isResizerEnabled,
-    resizedWidth,
     isFlexibleColumns,
     dispatch
   } = _ref;
@@ -19,20 +21,26 @@ function HeaderData(_ref) {
     name,
     text,
     sortable,
-    size,
-    alignment
+    width,
+    alignment,
+    actions
   } = header;
+  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
   return (
     /*#__PURE__*/
     // @ts-ignore
     React.createElement(TableHead, {
-      $ui_size: size,
       $ui_align: alignment,
-      $data_width: resizedWidth,
+      $data_width: width,
       $flag_flexible: isFlexibleColumns,
       $a11yAttributes_container: {
         'aria-sort': sortable ? sortedBy : 'none'
-      }
+      },
+      $customProps_container: hasActions ? {
+        $ui_displayMode: 'flex',
+        $ui_alignItems: 'center',
+        $ui_justifyContent: AlignmentOfFlex[alignment]
+      } : null
     }, /*#__PURE__*/React.createElement(HeaderText, {
       id: id,
       name: name,
@@ -41,7 +49,10 @@ function HeaderData(_ref) {
       sortedBy: sortedBy,
       sortTooltip: sortTooltip,
       dispatch: dispatch
-    }), /*#__PURE__*/React.createElement(ColumnResizer, {
+    }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions,
+      gap: ActionViewGap.SMALL
+    }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
       isResizing: isResizing
     }))

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

@@ -4,7 +4,6 @@ import HeaderData from "./HeaderData";
 function Headers(_ref) {
   let {
     headers,
-    resizedColumnsWidth,
     currentlyResizingColumn,
     isResizerEnabled,
     isFlexibleColumns,
@@ -17,12 +16,9 @@ function Headers(_ref) {
     } = header;
     let isResizing = currentlyResizingColumn === header.id; // TODO: To be adopted with properties
 
-    let resizedWidth = resizedColumnsWidth[header.id]; // TODO: To be adopted with properties
-
     return /*#__PURE__*/React.createElement(HeaderData, {
       key: index,
       header: header,
-      resizedWidth: resizedWidth,
       sortedBy: sortOrder,
       sortTooltip: sortTooltip,
       isResizing: isResizing,

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
 import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
-import TableCheckBox from '@zohodesk-private/desk-components/es/table/TableCheckBox/TableCheckBox';
 import { TableListConstants } from "../../../../../../../../cc/table-list";
 
 function SelectAll(_ref) {
@@ -14,9 +14,9 @@ function SelectAll(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableCheckBox, {
-    $flag_checked: hasAllSelected,
-    $event_onChange: () => dispatch({
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(CheckBox, {
+    checked: hasAllSelected,
+    onChange: () => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION
     })
   }));

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

@@ -3,23 +3,19 @@ import RowData from "./RowData";
 
 function Columns(_ref) {
   let {
-    resizedColumnsWidth,
     data,
     isFlexibleColumns
   } = _ref;
   return data.map((column, index) => {
     const {
-      size,
+      width,
       alignment,
       field
     } = column;
-    const resizedWidth = resizedColumnsWidth[field.id]; // Will be adopted with properties
-
     return /*#__PURE__*/React.createElement(RowData, {
       key: index,
       field: field,
-      resizedWidth: resizedWidth,
-      size: size,
+      width: width,
       alignment: alignment,
       isFlexibleColumns: isFlexibleColumns
     });

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

@@ -6,7 +6,9 @@ import RowActions from "./RowActions";
 import { createCustomComponent } from "../../../../../../../custom-component";
 import { RowEventHandlersFactory } from "./RowEventHandlersFactory";
 import TableRowProperties from "../../../../../../../../cc/table-list/row/Properties";
-import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
+import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants"; // @ts-ignore
+
+import style from "../../css/TableList.module.css";
 
 function RowView(_ref, ref) {
   let {
@@ -27,8 +29,9 @@ function RowView(_ref, ref) {
     columns,
     rowActionLocation,
     isFlexibleColumns,
-    resizedColumnsWidth,
-    hasActions
+    cursor,
+    hasActions,
+    rowActionsColumnWidth
   } = state.properties;
   const {
     type,
@@ -44,7 +47,10 @@ function RowView(_ref, ref) {
       payload: {
         id
       }
-    })
+    }),
+    customStyle: {
+      $pointer: style[`rowCursor_${cursor}`]
+    }
   }, renderRowSelection({
     isSelectionEnabled,
     id,
@@ -54,10 +60,10 @@ function RowView(_ref, ref) {
     dispatch
   }), renderColumns({
     columns,
-    resizedColumnsWidth,
     isFlexibleColumns
   }), renderRowActions({
     hasActions,
+    columnWidth: rowActionsColumnWidth,
     type,
     actions
   }));
@@ -85,12 +91,10 @@ function renderRowSelection(_ref2) {
 function renderColumns(_ref3) {
   let {
     columns,
-    resizedColumnsWidth,
     isFlexibleColumns
   } = _ref3;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
-    resizedColumnsWidth: resizedColumnsWidth,
     isFlexibleColumns: isFlexibleColumns
   });
 }
@@ -98,11 +102,13 @@ function renderColumns(_ref3) {
 function renderRowActions(_ref4) {
   let {
     hasActions,
+    columnWidth,
     actions,
     type
   } = _ref4;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
+    columnWidth: columnWidth,
     type: type,
     actions: actions
   });

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

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