@zohodesk/library-platform 1.0.1 → 1.0.2-exp.4

package/es/library/custom-component/frameworks/ui/__testcases__/CreateCustomComponent.spec.js

@@ -0,0 +1,106 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import createCustomComponent from "../createCustomComponent";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+let View = (_ref, ref) => {
+  let {
+    state
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "custom-component",
+    "data-title": state.properties.title
+  }, "Hey");
+};
+
+let mockComponentCC = {
+  name: 'mockComponent',
+  View: View,
+  properties: {},
+  eventHandlers: {
+    "mockComponent#MOUNT": jest.fn(),
+    "mockComponent#UN_MOUNT": jest.fn(),
+    "mockComponent#UPDATE_PROPERTIES": jest.fn()
+  },
+  properties: {
+    title: {
+      name: 'titile',
+      defaultValue: 'default',
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  },
+  behaviour: [{
+    name: 'test',
+    properties: {},
+    setInitialState: () => ({}),
+    eventHandlers: {}
+  }]
+};
+describe('createCustomComponent integration test', () => {
+  // basic rendering test
+  it('should mount the component and check the rendering', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    let {
+      container
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    expect(container).toBeInTheDocument();
+  }); // test if the ref is passed to the component
+
+  it('should pass the ref to the component', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    let ref = /*#__PURE__*/React.createRef();
+    render( /*#__PURE__*/React.createElement(CustomComponent, {
+      ref: ref
+    }));
+    expect(typeof ref.current).toBe('object');
+  });
+  it('should pass props to the custom component', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    const component = screen.getByTestId('custom-component');
+    expect(component).toHaveAttribute('data-testid', 'custom-component');
+  });
+  it('should initialize custom behavior state', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    const {
+      behaviour
+    } = mockComponentCC;
+    expect(behaviour[0].setInitialState()).toEqual({});
+  });
+  it('should call the MOUNT event handler on mounting', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    expect(mockComponentCC.eventHandlers['mockComponent#MOUNT']).toHaveBeenCalled();
+  });
+  it('should update component when props change and update property event', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    const {
+      rerender
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, {
+      title: "Initial Title"
+    }));
+    let component = screen.getByTestId('custom-component');
+    expect(component).toHaveAttribute('data-title', 'Initial Title');
+    rerender( /*#__PURE__*/React.createElement(CustomComponent, {
+      title: "Updated Title"
+    }));
+    component = screen.getByTestId('custom-component');
+    expect(component).toHaveAttribute('data-title', 'Updated Title');
+    expect(mockComponentCC.eventHandlers['mockComponent#UPDATE_PROPERTIES']).toHaveBeenCalled();
+  });
+  it('should clean up properly on unmount', () => {
+    const CustomComponent = createCustomComponent(mockComponentCC);
+    const {
+      unmount
+    } = render( /*#__PURE__*/React.createElement(CustomComponent, null));
+    unmount();
+    expect(mockComponentCC.eventHandlers['mockComponent#UN_MOUNT']).toHaveBeenCalled();
+  });
+});

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

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

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

@@ -1,38 +1,17 @@
 import React from 'react';
-import Flex from '@zohodesk/layout/es/Flex/Flex';
 import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
-import ActionIcon from "../../../../legacy-to-new-arch/action-icon/ActionIcon";
-const defaultUiMapping = {
-  ActionIcon: ActionIcon
-};
+import ActionsRenderer from "../../../actions-renderer/frameworks/ui/ActionsRenderer";
 export default function ActionLocationView(_ref, ref) {
   let {
     state
   } = _ref;
   const {
-    actions
+    actions,
+    type
   } = state.properties;
-  return /*#__PURE__*/React.createElement(Flex, {
-    ref: ref,
-    $flag_fullsize: true,
-    $ui_displayMode: "flex",
-    $ui_alignItems: "center",
-    $ui_justifyContent: "end"
-  }, actions.map((action, index) => {
-    const {
-      type,
-      properties,
-      eventMappings
-    } = action;
-    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
-
-    const ActionUiType = defaultUiMapping[type] || ComponentRegistry.get(type);
-    return /*#__PURE__*/React.createElement(ActionUiType, {
-      key: index,
-      ...properties,
-      appendToActionPayload: {
-        eventMappings
-      }
-    });
-  }));
+  const ActionsRendererComponent = ComponentRegistry.get(type) || ActionsRenderer;
+  return /*#__PURE__*/React.createElement(ActionsRendererComponent, {
+    actions: actions,
+    getRef: ref
+  });
 }

package/es/library/dot/components/actions-renderer/frameworks/ui/ActionsRenderer.js

@@ -0,0 +1,9 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ActionLocationProperties from "../../../../../../cc/action-location/Properties";
+import ActionsRendererView from "./ActionsRendererView";
+export default createCustomComponent({
+  name: 'ActionsRenderer',
+  properties: ActionLocationProperties,
+  eventHandlers: {},
+  View: ActionsRendererView
+});

package/es/library/dot/components/actions-renderer/frameworks/ui/ActionsRendererView.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import ActionComponentMapping from "../../../action-location/frameworks/ui/ActionComponentMapping";
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+
+function ActionsRendererView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    actions
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center"
+  }, actions.map((action, index) => {
+    const {
+      type,
+      properties,
+      eventMappings
+    } = action;
+    /* eslint-disable-next-line @zohodesk/architecturerules/no-defaultProps-rule */
+
+    const ActionUiType = ActionComponentMapping[type] || ComponentRegistry.get(type);
+    return /*#__PURE__*/React.createElement(ActionUiType, {
+      key: index,
+      ...properties,
+      appendToActionPayload: {
+        eventMappings
+      }
+    });
+  }));
+}
+
+;
+export default ActionsRendererView;

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import Row from "./row/Row";
-const emptyArray = Object.freeze([]);
-const emptyObject = {};
 
 function Rows(_ref) {
   let {
@@ -9,44 +7,44 @@ 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,
     isSelected,
     isSelectable,
     selectionTooltip,
-    clickAction,
-    rowActions
+    rowActionLocation
   } = row;
   const updatedColumns = getUpdatedColumns(columns, headers);
   return {
     id,
-    columns: updatedColumns || emptyArray,
-    clickAction: clickAction || emptyObject,
-    rowActions: rowActions || emptyArray,
+    columns: updatedColumns,
+    rowActionLocation,
     isSelected,
     isSelectable,
     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,27 +21,38 @@ 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,
-      $flag_flexible: isFlexibleColumns
+      $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,
       text: text,
       sortable: sortable,
       sortedBy: sortedBy,
-      sortTooltip: sortTooltip // Yet to be implemented
-      ,
+      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 {
@@ -25,11 +27,16 @@ function RowView(_ref, ref) {
   const {
     id,
     columns,
-    rowActions,
+    rowActionLocation,
     isFlexibleColumns,
-    resizedColumnsWidth,
-    hasActions
+    cursor,
+    hasActions,
+    rowActionsColumnWidth
   } = state.properties;
+  const {
+    type,
+    actions
+  } = rowActionLocation;
   return /*#__PURE__*/React.createElement(TableRow, {
     key: id,
     ref: ref,
@@ -40,7 +47,10 @@ function RowView(_ref, ref) {
       payload: {
         id
       }
-    })
+    }),
+    customStyle: {
+      $pointer: style[`rowCursor_${cursor}`]
+    }
   }, renderRowSelection({
     isSelectionEnabled,
     id,
@@ -50,12 +60,12 @@ function RowView(_ref, ref) {
     dispatch
   }), renderColumns({
     columns,
-    resizedColumnsWidth,
     isFlexibleColumns
   }), renderRowActions({
     hasActions,
-    rowActions,
-    dispatch
+    columnWidth: rowActionsColumnWidth,
+    type,
+    actions
   }));
 }
 
@@ -81,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
   });
 }
@@ -94,13 +102,15 @@ function renderColumns(_ref3) {
 function renderRowActions(_ref4) {
   let {
     hasActions,
-    rowActions,
-    dispatch
+    columnWidth,
+    actions,
+    type
   } = _ref4;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
-    actions: rowActions,
-    dispatch: dispatch
+    columnWidth: columnWidth,
+    type: type,
+    actions: actions
   });
 }