@zohodesk/library-platform 1.1.0-exp.2 → 1.1.1-exp.6

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

@@ -0,0 +1,60 @@
+import SectionConstants from "../../../../../../cc/section/Constants";
+import FieldConstants from "../../../../../../cc/fields/field/Constants";
+
+class EventHandlersFactory {
+  static create() {
+    return {
+      [FieldConstants.FIELD_BLURRED]: this.handleFieldBlurred,
+      [FieldConstants.FIELD_CHANGED]: this.handleFieldChanged
+    };
+  }
+
+  static handleFieldBlurred(_ref) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref;
+    const {
+      id
+    } = state.properties;
+    const {
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: SectionConstants.SECTION_FIELD_BLURRED,
+      payload: {
+        id,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldChanged(_ref2) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref2;
+    const {
+      id
+    } = state.properties;
+    const {
+      fieldName,
+      value
+    } = action.payload;
+    dispatch({
+      type: SectionConstants.SECTION_FIELD_CHANGED,
+      payload: {
+        id,
+        fieldName,
+        value
+      },
+      metaData: {}
+    });
+  }
+
+}
+
+export default EventHandlersFactory;

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

@@ -0,0 +1,15 @@
+/* eslint-disable @zohodesk/architecturerules/define-property-schema */
+import { createCustomComponent } from "../../../../../custom-component";
+import { SectionProperties } from "../../../../../../cc/section";
+import SectionView from "./SectionView";
+import TransFormState from "../../adapters/presenter/TransFormState";
+import EventHandlersFactory from "./EventHandlerFactory";
+let WrapSection = createCustomComponent({
+  name: 'Section',
+  View: SectionView,
+  properties: SectionProperties,
+  transformState: TransFormState,
+  eventHandlers: EventHandlersFactory.create(),
+  behaviours: []
+});
+export default WrapSection;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import ConvertSlotToComponent from "../../../../../slot/frameworks/ui/ConvertSlotToComponent";
+import Section from '@zohodesk-private/desk-components/es/setup/SetupFormBox/SetupFormBox';
+import FieldsLayout from '@zohodesk-private/desk-components/es/form/FieldsLayout/FieldsLayout';
+import ComponentRegistry from "../../../../../custom-component/frameworks/ui/ComponentRegistry";
+import { TextArea, TextBox, Email, PickList, Currency, MultiSelect, Url, Percentage, Phone, Number, Decimal, Date, DateTime, Checkbox } from "../../../form-fields";
+import EPHITag from "../../../form-fields/ephi-tag/frameworks/ui/EPHITag";
+import InfoIcon from "../../../form-fields/info-icon/frameworks/ui/InfoIcon"; // NOTE: This is a workaround to avoid dynamic imports
+// NOTE: register these components in place
+
+ComponentRegistry.register('TextBox', TextBox);
+ComponentRegistry.register('TextArea', TextArea);
+ComponentRegistry.register('PickList', PickList);
+ComponentRegistry.register('Email', Email);
+ComponentRegistry.register('Currency', Currency);
+ComponentRegistry.register('MultiSelect', MultiSelect);
+ComponentRegistry.register('Url', Url);
+ComponentRegistry.register('Percentage', Percentage);
+ComponentRegistry.register('Phone', Phone);
+ComponentRegistry.register('Number', Number);
+ComponentRegistry.register('Decimal', Decimal);
+ComponentRegistry.register('Date', Date);
+ComponentRegistry.register('DateTime', DateTime);
+ComponentRegistry.register('Checkbox', Checkbox);
+ComponentRegistry.register('EPHITag', EPHITag);
+ComponentRegistry.register('InfoIcon', InfoIcon);
+
+function SectionView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    title,
+    description,
+    fields
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Section, {
+    $i18n_heading: title,
+    $i18n_description: description,
+    testId: id,
+    customId: id,
+    $tagAttributes_container: {
+      ref
+    }
+  }, /*#__PURE__*/React.createElement(FieldsLayout, {
+    $flag_topSpace: !!title || !!description
+  }, ConvertSlotToComponent(fields)));
+}
+
+export default SectionView;

package/es/library/dot/components/section/frameworks/ui/__test__/Section.test.js

@@ -0,0 +1,76 @@
+/* eslint-disable*/
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import WrapSection from "../Section";
+beforeEach(() => {
+  cleanup();
+});
+describe('Section Component', () => {
+  it('should render section', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(WrapSection, null));
+    expect(getByRole('region')).toBeInTheDocument();
+  });
+  it('should render section with valid title', () => {
+    const {
+      getByRole
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      title: 'User Information'
+    }));
+    expect(getByRole('heading')).toHaveTextContent('User Information');
+  });
+  it('should throw error for title longer than 255 characters', () => {
+    const longTitle = 'a'.repeat(256);
+    expect(() => render( /*#__PURE__*/React.createElement(WrapSection, {
+      title: longTitle
+    }))).toThrow();
+  });
+  it('should throw error for title with special characters', () => {
+    expect(() => render( /*#__PURE__*/React.createElement(WrapSection, {
+      title: 'User@Info!'
+    }))).toThrow();
+  });
+  it('should render section with no title', () => {
+    const {
+      queryByRole
+    } = render( /*#__PURE__*/React.createElement(WrapSection, null));
+    expect(queryByRole('heading')).toBeNull();
+  });
+  it('should render section with empty description', () => {
+    const {
+      queryByTestId
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      id: "custom_section",
+      description: ""
+    }));
+    expect(queryByTestId('custom_section_description')).toBeNull();
+  });
+  it('should render section with valid description', () => {
+    const {
+      getByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      id: "custom_section",
+      description: 'This section includes fields for user details.',
+      isVisible: true
+    }));
+    expect(getByText('This section includes fields for user details.')).toBeInTheDocument();
+    expect(getByTestId('custom_section_description')).toHaveTextContent('This section includes fields for user details.');
+  });
+  it('should render section with large description', () => {
+    const largeDescription = 'a'.repeat(10000);
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(WrapSection, {
+      description: largeDescription,
+      isVisible: true
+    }));
+    expect(getByText(largeDescription)).toBeInTheDocument();
+  }); // TODO: Curently, component without ref not support. So, It will be handled by parent component.
+  // it('should not render hidden section', () => {
+  //   const { queryByRole } = render(<WrapSection title={'Payment Information'} isVisible={false} />);
+  //   expect(queryByRole('region')).not.toBeInTheDocument();
+  // });
+});

package/es/library/dot/components/table-list/adapters/presenters/TableTranslator.js

@@ -1,15 +1,11 @@
 class TableTranslator {
   static translate(state) {
-    var _state;
-
     const {
       data,
-      selectionConfig
+      selectionConfig,
+      selection,
+      sortBy
     } = state.properties;
-    const {
-      sortBy,
-      selection
-    } = (_state = state) === null || _state === void 0 ? void 0 : _state.behaviours;
     const headers = TableTranslator.translateHeaders(data.headers, sortBy);
     const rows = TableTranslator.translateRows(data.rows, selection, selectionConfig);
     state = { ...state,
@@ -25,10 +21,9 @@ class TableTranslator {
 
   static translateHeaders(headers, sortBy) {
     return headers.map(header => {
-      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.id) === header.id ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
+      const sortOrder = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.name) === header.name ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.order : 'none';
       return { ...header,
-        sortOrder,
-        sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
+        sortOrder
       };
     });
   }
@@ -42,11 +37,16 @@ class TableTranslator {
       return { ...row,
         isSelected: selected.includes(row.id),
         isSelectable: selected.includes(row.id) || !hasAllSelected,
-        selectionTooltip: !selected.includes(row.id) && hasAllSelected ? selectionConfig.limitExceedAlertMessage : `Record ${index + 1}`
+        selectionTooltip: this.getSelectionTooltip(row.id, index, selected, hasAllSelected, selectionConfig)
       };
     });
   }
 
+  static getSelectionTooltip(id, index, selected, hasAllSelected, selectionConfig) {
+    // return `Record ${index + 1}`;
+    return !selected.includes(id) && hasAllSelected ? selectionConfig.limitExceedAlertMessage : `Record ${index + 1}`;
+  }
+
 }
 
 export default TableTranslator;

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

@@ -0,0 +1,9 @@
+import { useRef, useCallback } from 'react';
+export function useLatestCallBack(callback) {
+  const funcRef = useRef(callback); // Doubt: Simply storing the callback in ref, will it be optimized or below is more suitable ?
+
+  funcRef.current = callback;
+  return useCallback(function () {
+    return funcRef.current(...arguments);
+  }, []);
+}

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

@@ -0,0 +1,49 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { useLatestCallBack } from "./useLatestCallBack";
+export function useMouseResizable(_ref) {
+  let {
+    onDragStart,
+    onDrag,
+    onDragEnd
+  } = _ref;
+  const elementRef = useRef();
+  const startResize = useLatestCallBack(mouseEvent => {
+    addEventListenersForMoveAndEnd();
+    onDragStart && onDragStart(mouseEvent);
+  });
+  const handleResize = useLatestCallBack(mouseEvent => {
+    onDrag && onDrag(mouseEvent);
+  });
+  const stopResize = useLatestCallBack(mouseEvent => {
+    removeEventListenersForMoveAndEnd();
+    onDragEnd && onDragEnd(mouseEvent);
+  });
+
+  function addEventListenersForMoveAndEnd() {
+    document.body.addEventListener('mousemove', handleResize);
+    document.body.addEventListener('mouseup', stopResize);
+    document.body.addEventListener('mouseleave', stopResize);
+  }
+
+  function removeEventListenersForMoveAndEnd() {
+    document.body.removeEventListener('mousemove', handleResize);
+    document.body.removeEventListener('mouseup', stopResize);
+    document.body.removeEventListener('mouseleave', stopResize);
+  }
+
+  const setDraggableRef = useCallback(element => {
+    if (elementRef.current === element) {
+      return;
+    }
+
+    elementRef.current && elementRef.current.removeEventListener('mousedown', startResize);
+    element && element.addEventListener('mousedown', startResize);
+    elementRef.current = element;
+  }, []); // useEffect(() => () => removeEventListenersForMoveAndEnd(), []);
+
+  useEffect(() => removeEventListenersForMoveAndEnd, []);
+  return {
+    ref: setDraggableRef,
+    elementRef
+  };
+}

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

@@ -1,7 +1,6 @@
 import { TableListConstants } from "../../../../../../cc/table-list";
-import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, SortedController } from "../../adapters/controllers";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController } from "../../adapters/controllers";
 import TableRowConstants from "../../../../../../cc/table-list/row/Constants";
-import { SORTBY_SORTED } from "../../../../../../bc/sort-by/Constants";
 import RowClickController from "../../adapters/controllers/RowClickController";
 
 class EventHandlersFactory {
@@ -12,7 +11,6 @@ class EventHandlersFactory {
       [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: new SelectAllController().handle,
       [TableListConstants.TABLE_LIST_SCROLLED]: new ScrollController().handle,
       [TableListConstants.TABLE_LIST_SORTED]: new SortByController().handle,
-      [SORTBY_SORTED]: new SortedController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: new FieldChangeController().handle,
       [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: new FieldClickController().handle
     };

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

@@ -1,10 +1,8 @@
 import { TableListProperties } from "../../../../../../cc/table-list";
 import { createCustomComponent } from "../../../../../custom-component";
-import ListItemSelectionBehaviourFactory from "../../../../../behaviours/list-selection/frameworks/ListItemSelectionBehaviourFactory";
 import TableTranslator from "../../adapters/presenters/TableTranslator";
 import TableListView from "./TableListView";
 import EventHandlersFactory from "./EventHandlersFactory";
-import SortByBehaviourFactory from "../../../../../behaviours/sort-by/frameworks/ui/SortByBehaviourFactory";
 const TableList = createCustomComponent({
   name: 'TableList',
   View: TableListView,
@@ -12,19 +10,6 @@ const TableList = createCustomComponent({
   setInitialState: () => ({}),
   transformState: TableTranslator.translate,
   eventHandlers: EventHandlersFactory.create(),
-  behaviours: [ListItemSelectionBehaviourFactory.create(), SortByBehaviourFactory.create(), {
-    name: 'resizerState',
-    properties: {},
-    eventHandlers: {},
-    setInitialState: () => ({
-      currentlyResizingColumn: '',
-      isCurrentlyResizing: false,
-      resizedColumnsWidth: {},
-      extraWidth: 0,
-      initialPosition: 0,
-      resizedPosition: 0,
-      tooltip: ''
-    })
-  }]
+  behaviours: []
 });
 export default TableList;

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

@@ -4,6 +4,7 @@ import Header from "./sub-components/Header";
 import Body from "./sub-components/Body";
 import Rows from "./sub-components/Rows";
 import NoData from "./sub-components/NoData";
+import ErrorState from "./sub-components/ErrorState";
 import Loading from "./sub-components/Loading";
 import ColumnResizingLine from "./sub-components/ColumnResizingLine";
 import handleScroll from "./handlers/HandleScroll"; // @ts-ignore
@@ -21,17 +22,15 @@ function TableListView(_ref2, _ref) {
   const {
     data,
     isLoading,
-    resizerConfig,
+    resizerState,
     selectionConfig,
     isFlexibleColumns,
     rowCursor,
     rowActionsConfig,
-    emptyStateUiType
+    selection,
+    emptyStateUiType,
+    isError
   } = state.properties;
-  const {
-    resizerState,
-    selection
-  } = state.behaviours;
   const {
     headers,
     rows
@@ -42,7 +41,7 @@ function TableListView(_ref2, _ref) {
   } = rowActionsConfig;
   const hasRows = rows.length > 0; // TODO: derive from state.properties
 
-  const isDataEmpty = !hasRows && !isLoading; // TODO: derive from state.properties
+  const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
@@ -53,7 +52,6 @@ function TableListView(_ref2, _ref) {
     })
   }, renderHeader({
     headers,
-    resizerConfig,
     resizerState,
     selectionConfig,
     selection,
@@ -73,6 +71,8 @@ function TableListView(_ref2, _ref) {
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
+  }), /*#__PURE__*/React.createElement(ErrorState, {
+    isError: isError
   }), /*#__PURE__*/React.createElement(Loading, {
     isLoading: isLoading,
     hasRows: hasRows
@@ -82,7 +82,6 @@ function TableListView(_ref2, _ref) {
 function renderHeader(_ref3) {
   let {
     headers,
-    resizerConfig,
     resizerState,
     selectionConfig,
     selection,
@@ -93,8 +92,9 @@ function renderHeader(_ref3) {
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
     isSelectionEnabled: selectionConfig.isEnabled,
+    isSelectAllEnabled: selectionConfig.isSelectAllEnabled,
     hasAllSelected: selection.hasAllSelected,
-    isResizerEnabled: resizerConfig.isEnabled,
+    isResizerEnabled: resizerState.isEnabled,
     currentlyResizingColumn: resizerState.currentlyResizingColumn,
     isCurrentlyResizing: resizerState.isCurrentlyResizing,
     resizerExtraWidth: resizerState.extraWidth,

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

@@ -25,6 +25,9 @@
 .emptyContent {
     padding: var(--zd_size160) 0 var(--zd_size60) 
 }
+.errorContent {
+    padding: var(--zd_size60) 0 
+}
 .actions {
     gap: var(--zd_size8) 
 }

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ErrorOopsSomethingMiss from '@zohodesk/dot/lib/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss'; // import RequestUrlNotFound from '@zohodesk/dot/lib/version2/errorstate/UrlNotFound/UrlNotFound';
+// import UnableToProcess from '@zohodesk/dot/lib/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest';
+// import Inconvenience from '@zohodesk/dot/lib/version2/errorstate/Inconvenience/Inconvenience';
+
+/* @ts-ignore */
+
+import style from "../css/TableList.module.css";
+export default function ErrorState(_ref) {
+  let {
+    isError
+  } = _ref;
+
+  if (isError) {
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: `${style.contentWrapper} ${style.errorContent}`
+    }, /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {
+      title: "Oops! Something is missing",
+      description: "We are unable to process your request. Please try again later."
+    }));
+  }
+
+  return null;
+}

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

@@ -1,14 +1,22 @@
 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 TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader'; // import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
+
+const TableHeaderRow = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
 import SelectAll from "./header/SelectAll";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
 
-function Header(_ref) {
+function Header(_ref2) {
   let {
     isSelectionEnabled,
+    isSelectAllEnabled,
     hasAllSelected,
     isResizerEnabled,
     currentlyResizingColumn,
@@ -19,20 +27,22 @@ function Header(_ref) {
     rowActionsColumnWidth,
     headers,
     dispatch
-  } = _ref;
+  } = _ref2;
 
   if (headers.length <= 0) {
     return null;
   }
 
   return /*#__PURE__*/React.createElement(TableHeader, {
+    $flag_isColumnsFlexible: isFlexibleColumns,
     $flag_padding: !isSelectionEnabled
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderSelectAll(isSelectionEnabled, isSelectAllEnabled, hasAllSelected, dispatch), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
-function renderSelectAll(isSelectionEnabled, hasAllSelected, dispatch) {
+function renderSelectAll(isSelectionEnabled, isSelectAllEnabled, hasAllSelected, dispatch) {
   return /*#__PURE__*/React.createElement(SelectAll, {
     isSelectionEnabled: isSelectionEnabled,
+    isSelectAllEnabled: isSelectAllEnabled,
     hasAllSelected: hasAllSelected,
     dispatch: dispatch
   });

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

@@ -1,13 +1,55 @@
 import React from 'react';
 import TableColumnResizer from '@zohodesk-private/desk-components/es/table/TableHead/TableColumnResizer/TableColumnResizer';
+import { useMouseResizable } from "../../../hooks/useMouseResizable";
+import TableListEventConstants from "../../../../../../../../cc/table-list/Constants";
+const {
+  TABLE_LIST_RESIZE_START_REQUESTED,
+  TABLE_LIST_RESIZE_MOVE_REQUESTED,
+  TABLE_LIST_RESIZE_END_REQUESTED
+} = TableListEventConstants;
 export default function ColumnResizer(_ref) {
   let {
     isResizerEnabled,
-    isResizing
+    isResizing,
+    dispatch,
+    columnName,
+    columnWidth
   } = _ref;
+  const {
+    ref,
+    elementRef: resizerLineRef
+  } = useMouseResizable({
+    onDragStart: mouseEvent => {
+      const lineElement = resizerLineRef.current;
+      dispatch({
+        type: TABLE_LIST_RESIZE_START_REQUESTED,
+        payload: {
+          columnName,
+          columnWidth,
+          lineElement,
+          mouseEvent
+        }
+      });
+    },
+    onDrag: mouseEvent => {
+      dispatch({
+        type: TABLE_LIST_RESIZE_MOVE_REQUESTED,
+        payload: {
+          mouseEvent
+        }
+      });
+    },
+    onDragEnd: () => {
+      dispatch({
+        type: TABLE_LIST_RESIZE_END_REQUESTED,
+        payload: {}
+      });
+    }
+  });
 
   if (isResizerEnabled) {
     return /*#__PURE__*/React.createElement(TableColumnResizer, {
+      ref: ref,
       $flag_resizing: isResizing
     });
   }

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
-import HeaderText from "./HeaderText";
+import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
+import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
+import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
 import ColumnResizer from "./ColumnResizer";
 
 function HeaderData(_ref) {
   let {
     header,
     sortedBy,
-    sortTooltip,
     isResizing,
     isResizerEnabled,
     isFlexibleColumns,
@@ -19,29 +21,36 @@ function HeaderData(_ref) {
     text,
     sortable,
     width,
-    alignment
+    alignment,
+    actions
   } = header;
+  const hasActions = Boolean(actions === null || actions === void 0 ? void 0 : actions.length);
   return (
     /*#__PURE__*/
     // @ts-ignore
     React.createElement(TableHead, {
-      $ui_align: alignment,
+      $ui_align: hasActions ? 'left' : alignment,
       $data_width: width,
       $flag_flexible: isFlexibleColumns,
       $a11yAttributes_container: {
         'aria-sort': sortable ? sortedBy : 'none'
-      }
-    }, /*#__PURE__*/React.createElement(HeaderText, {
-      id: id,
-      name: name,
-      text: text,
-      sortable: sortable,
-      sortedBy: sortedBy,
-      sortTooltip: sortTooltip,
-      dispatch: dispatch
-    }), /*#__PURE__*/React.createElement(ColumnResizer, {
+      },
+      $customProps_container: hasActions ? {
+        $ui_displayMode: 'flex',
+        $ui_alignItems: 'center',
+        $ui_justifyContent: AlignmentOfFlex[alignment]
+      } : null
+    }, /*#__PURE__*/React.createElement(TableHeading, {
+      $i18n_text: text
+    }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {
+      actions: actions,
+      gap: ActionViewGap.SMALL
+    }) : null, /*#__PURE__*/React.createElement(ColumnResizer, {
       isResizerEnabled: isResizerEnabled,
-      isResizing: isResizing
+      isResizing: isResizing,
+      dispatch: dispatch,
+      columnName: name,
+      columnWidth: width
     }))
   );
 }