@zohodesk/library-platform 1.0.0-exp.1 → 1.0.0-exp.3

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

@@ -0,0 +1,34 @@
+import { LIST_SELECTION_TOGGLE_ITEMS, LIST_SELECTION_TOGGLE_ITEMS_IN_RANGE } from "../../../../../../bc/list-selection/Constants";
+import AbstractController from "./AbstractController";
+
+class SelectItemController extends AbstractController {
+  handle(event) {
+    const {
+      dispatch,
+      action
+    } = event;
+    const {
+      id,
+      event: browser_event
+    } = action.payload;
+
+    if (browser_event.shiftKey) {
+      dispatch({
+        type: LIST_SELECTION_TOGGLE_ITEMS_IN_RANGE,
+        payload: {
+          id
+        }
+      });
+    } else {
+      dispatch({
+        type: LIST_SELECTION_TOGGLE_ITEMS,
+        payload: {
+          selected: [id]
+        }
+      });
+    }
+  }
+
+}
+
+export default SelectItemController;

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

@@ -0,0 +1,25 @@
+import { SORTBY_SORT } from "../../../../../../bc/sort-by/Constants";
+import AbstractController from "./AbstractController";
+
+class SortByController extends AbstractController {
+  handle(event) {
+    const {
+      dispatch,
+      action
+    } = event;
+    const {
+      id,
+      name
+    } = action.payload;
+    dispatch({
+      type: SORTBY_SORT,
+      payload: {
+        id,
+        name
+      }
+    });
+  }
+
+}
+
+export default SortByController;

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

@@ -0,0 +1,18 @@
+import { ZLIST_FETCH_SORTED } from "../../../../../../bc/zlist/Constants";
+import AbstractController from "./AbstractController";
+
+class SortedController extends AbstractController {
+  handle(event) {
+    const {
+      action,
+      dispatch
+    } = event;
+    dispatch({
+      type: ZLIST_FETCH_SORTED,
+      payload: action.payload
+    });
+  }
+
+}
+
+export default SortedController;

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

@@ -0,0 +1,7 @@
+export { default as SelectItemController } from "./SelectItemController";
+export { default as SelectAllController } from "./SelectAllController";
+export { default as ScrollController } from "./ScrollController";
+export { default as SortByController } from "./SortByController";
+export { default as SortedController } from "./SortedController";
+export { default as FieldChangeController } from "./FieldChangeController";
+export { default as FieldClickController } from "./FieldClickController";

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

@@ -0,0 +1,32 @@
+class TableTranslator {
+  static translate(state) {
+    state = { ...state,
+      properties: { ...state.properties,
+        data: { ...state.properties.data,
+          headers: state.properties.data.headers.map(header => {
+            var _state, _state$behaviours, _state$behaviours$sor, _state2, _state2$behaviours, _state2$behaviours$so;
+
+            const sortOrder = ((_state = state) === null || _state === void 0 ? void 0 : (_state$behaviours = _state.behaviours) === null || _state$behaviours === void 0 ? void 0 : (_state$behaviours$sor = _state$behaviours.sortBy) === null || _state$behaviours$sor === void 0 ? void 0 : _state$behaviours$sor.id) === header.id ? (_state2 = state) === null || _state2 === void 0 ? void 0 : (_state2$behaviours = _state2.behaviours) === null || _state2$behaviours === void 0 ? void 0 : (_state2$behaviours$so = _state2$behaviours.sortBy) === null || _state2$behaviours$so === void 0 ? void 0 : _state2$behaviours$so.order : 'none';
+            return { ...header,
+              sortOrder,
+              sortTooltip: sortOrder === 'none' ? '' : sortOrder === 'ascending' ? 'Click to Sort Descending' : 'Click to Sort Ascending'
+            };
+          }),
+          rows: state.properties.data.rows.map((row, index) => {
+            var _state3, _state3$behaviours, _state3$behaviours$se, _state4, _state4$behaviours, _state4$behaviours$se, _state5, _state5$behaviours, _state5$behaviours$se, _state6, _state6$behaviours, _state6$behaviours$se, _state7, _state7$behaviours, _state7$behaviours$se;
+
+            return { ...row,
+              isSelected: (_state3 = state) === null || _state3 === void 0 ? void 0 : (_state3$behaviours = _state3.behaviours) === null || _state3$behaviours === void 0 ? void 0 : (_state3$behaviours$se = _state3$behaviours.selection) === null || _state3$behaviours$se === void 0 ? void 0 : _state3$behaviours$se.selected.includes(row.id),
+              isSelectable: ((_state4 = state) === null || _state4 === void 0 ? void 0 : (_state4$behaviours = _state4.behaviours) === null || _state4$behaviours === void 0 ? void 0 : (_state4$behaviours$se = _state4$behaviours.selection) === null || _state4$behaviours$se === void 0 ? void 0 : _state4$behaviours$se.selected.includes(row.id)) || !((_state5 = state) !== null && _state5 !== void 0 && (_state5$behaviours = _state5.behaviours) !== null && _state5$behaviours !== void 0 && (_state5$behaviours$se = _state5$behaviours.selection) !== null && _state5$behaviours$se !== void 0 && _state5$behaviours$se.hasAllSelected),
+              selectionTooltip: !((_state6 = state) !== null && _state6 !== void 0 && (_state6$behaviours = _state6.behaviours) !== null && _state6$behaviours !== void 0 && (_state6$behaviours$se = _state6$behaviours.selection) !== null && _state6$behaviours$se !== void 0 && _state6$behaviours$se.selected.includes(row.id)) && (_state7 = state) !== null && _state7 !== void 0 && (_state7$behaviours = _state7.behaviours) !== null && _state7$behaviours !== void 0 && (_state7$behaviours$se = _state7$behaviours.selection) !== null && _state7$behaviours$se !== void 0 && _state7$behaviours$se.hasAllSelected ? state.properties.selectionConfig.limitExceedAlertMessage : `Record ${index + 1}`
+            };
+          })
+        }
+      }
+    };
+    return state;
+  }
+
+}
+
+export default TableTranslator;

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

@@ -0,0 +1,32 @@
+import { TableListConstants } from "../../../../../../cc/table-list";
+import { SelectItemController, SelectAllController, ScrollController, FieldChangeController, FieldClickController, SortByController, SortedController } 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 {
+  static create() {
+    const controller = {
+      listSelectItem: new SelectItemController().handle,
+      listSelectAll: new SelectAllController().handle,
+      scroll: new ScrollController().handle,
+      sortBy: new SortByController().handle,
+      sorted: new SortedController().handle,
+      fieldChange: new FieldChangeController().handle,
+      fieldClick: new FieldClickController().handle
+    };
+    return {
+      [TableRowConstants.TABLE_ROW_CLICKED]: new RowClickController().handle,
+      [TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION]: controller.listSelectItem,
+      [TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION]: controller.listSelectAll,
+      [TableListConstants.TABLE_LIST_SCROLLED]: controller.scroll,
+      [TableListConstants.TABLE_LIST_SORTED]: controller.sortBy,
+      [SORTBY_SORTED]: controller.sorted,
+      [TableRowConstants.TABLE_ROW_FIELD_CHANGED]: controller.fieldChange,
+      [TableRowConstants.TABLE_ROW_FIELD_CLICKED]: controller.fieldClick
+    };
+  }
+
+}
+
+export default EventHandlersFactory;

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

@@ -0,0 +1,35 @@
+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,
+  properties: TableListProperties,
+  setInitialState: _ref => {
+    let {
+      properties
+    } = _ref;
+    return {};
+  },
+  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: ''
+    })
+  }]
+});
+export default TableList;

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import Table from '@zohodesk-private/desk-components/es/table/Table/Table';
+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 Loading from "./sub-components/Loading";
+import ColumnResizingLine from "./sub-components/ColumnResizingLine";
+import handleScroll from "./handlers/HandleScroll"; // @ts-ignore
+
+import style from "./css/TableList.module.css";
+
+function TableListView(_ref2, _ref) {
+  let {
+    state,
+    helpers
+  } = _ref2;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    data,
+    isLoading,
+    resizerConfig,
+    selectionConfig,
+    isFlexibleColumns,
+    hasRowActions
+  } = state.properties;
+  const {
+    emptyStateUiType
+  } = state.properties;
+  const {
+    resizerState,
+    selection
+  } = state.behaviours;
+  const {
+    headers,
+    rows
+  } = data;
+  const hasRows = rows.length > 0; // Will be adopted with properties
+
+  const isDataEmpty = !hasRows && !isLoading; // Will be adopted with properties
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.wrapper,
+    ref: _ref
+  }, /*#__PURE__*/React.createElement(Table, {
+    $event_onScroll: e => {
+      handleScroll(dispatch, {
+        scrollEvent: e
+      });
+    }
+  }, /*#__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,
+    headers: headers,
+    dispatch: dispatch
+  }), /*#__PURE__*/React.createElement(Body, {
+    hasRows: hasRows,
+    isFlexibleColumns: isFlexibleColumns
+  }, /*#__PURE__*/React.createElement(Rows, {
+    headers: headers,
+    rows: rows,
+    isFlexibleColumns: isFlexibleColumns,
+    isSelectionEnabled: selectionConfig.isEnabled,
+    resizedColumnsWidth: resizerState.resizedColumnsWidth,
+    hasRowActions: hasRowActions
+  })), /*#__PURE__*/React.createElement(NoData, {
+    isDataEmpty: isDataEmpty,
+    emptyStateUiType: emptyStateUiType
+  }), /*#__PURE__*/React.createElement(Loading, {
+    isLoading: isLoading,
+    hasRows: hasRows
+  })), /*#__PURE__*/React.createElement(ColumnResizingLine, {
+    isCurrentlyResizing: resizerState.isCurrentlyResizing,
+    initialPosition: resizerState.initialPosition,
+    resizedPosition: resizerState.resizedPosition,
+    tooltip: resizerState.tooltip
+  }));
+}
+
+export default TableListView;

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

@@ -0,0 +1,30 @@
+.loader {
+    padding: var(--zd_size40) 0 
+}
+.wrapper {
+    height: 100% ;
+    width: 100% ;
+    position: relative
+}
+.resizerSpace {
+    width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
+    flex-shrink: 0
+}
+.contentWrapper {
+    composes: sticky from '~@zohodesk/components/es/common/common.module.css';
+}
+[dir=ltr] .contentWrapper {
+    left: 0 ;
+}
+[dir=rtl] .contentWrapper {
+    right: 0 ;
+}
+.initialLoading {
+    height: calc(100% - (var(--zd_size100)))
+}
+.emptyContent {
+    padding: var(--zd_size100) 0 var(--zd_size60) 
+}
+.actions {
+    gap: var(--zd_size8) 
+}

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

@@ -0,0 +1,6 @@
+import { TableListConstants } from "../../../../../../../cc/table-list";
+export default function handleAllSelect(dispatch) {
+  dispatch({
+    type: TableListConstants.TABLE_LIST_TOGGLE_ALL_SELECTION
+  });
+}

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

@@ -0,0 +1,12 @@
+import { TableListConstants } from "../../../../../../../cc";
+export default function handleRowSelect(dispatch, _ref) {
+  let {
+    id
+  } = _ref;
+  dispatch({
+    type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
+    payload: {
+      id
+    }
+  });
+}

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

@@ -0,0 +1,12 @@
+import { TableListConstants } from "../../../../../../../cc";
+export default function handleScroll(dispatch, _ref) {
+  let {
+    scrollEvent
+  } = _ref;
+  dispatch({
+    type: TableListConstants.TABLE_LIST_SCROLLED,
+    payload: {
+      scrollEvent
+    }
+  });
+}

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

@@ -0,0 +1,12 @@
+import { TableListConstants } from "../../../../../../../cc";
+export default function handleSortClick(dispatch, _ref) {
+  let {
+    id
+  } = _ref;
+  dispatch({
+    type: TableListConstants.TABLE_LIST_SORTED,
+    payload: {
+      id
+    }
+  });
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import TableBody from '@zohodesk-private/desk-components/es/table/TableBody/TableBody';
+export default function Body(_ref) {
+  let {
+    hasRows,
+    isFlexibleColumns,
+    children
+  } = _ref;
+
+  if (hasRows) {
+    return /*#__PURE__*/React.createElement(TableBody, {
+      $flag_flexibleColumns: isFlexibleColumns
+    }, children);
+  }
+
+  return null;
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import TableColumnResizerLine from '@zohodesk-private/desk-components/es/table/TableColumnResizerLine/TableColumnResizerLine';
+export default function ColumnResizingLine(_ref) {
+  let {
+    isCurrentlyResizing,
+    initialPosition,
+    resizedPosition,
+    tooltip
+  } = _ref;
+
+  if (isCurrentlyResizing) {
+    return /*#__PURE__*/React.createElement(TableColumnResizerLine, {
+      $data_initialPosition: initialPosition,
+      $data_resizingPosition: resizedPosition,
+      $data_tooltipText: tooltip
+    });
+  }
+
+  return null;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader';
+import SelectAll from "./header/SelectAll";
+import Headers from "./header/Headers";
+import ActionColumn from "./header/ActionColumn";
+import ResizerExtraSpace from "./header/ResizerExtraSpace";
+
+function Header(_ref) {
+  let {
+    isSelectionEnabled,
+    hasAllSelected,
+    isResizerEnabled,
+    resizedColumnsWidth,
+    currentlyResizingColumn,
+    isCurrentlyResizing,
+    resizerExtraWidth,
+    isFlexibleColumns,
+    hasRowActions,
+    headers,
+    dispatch
+  } = _ref;
+
+  if (headers.length <= 0) {
+    return null;
+  } // TODO: Will be adopted with properties
+
+
+  return /*#__PURE__*/React.createElement(TableHeader, {
+    $flag_padding: !isSelectionEnabled
+  }, /*#__PURE__*/React.createElement(SelectAll, {
+    isSelectionEnabled: isSelectionEnabled,
+    hasAllSelected: hasAllSelected,
+    dispatch: dispatch
+  }), /*#__PURE__*/React.createElement(Headers, {
+    headers: headers,
+    resizedColumnsWidth: resizedColumnsWidth,
+    currentlyResizingColumn: currentlyResizingColumn,
+    isResizerEnabled: isResizerEnabled,
+    isFlexibleColumns: isFlexibleColumns,
+    dispatch: dispatch
+  }), /*#__PURE__*/React.createElement(ActionColumn, {
+    hasRowActions: hasRowActions
+  }), /*#__PURE__*/React.createElement(ResizerExtraSpace, {
+    isCurrentlyResizing: isCurrentlyResizing,
+    extraWidth: resizerExtraWidth
+  }));
+}
+
+export default Header;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Loader from '@zohodesk/svg/es/v1/Loader/Loader'; // @ts-ignore
+
+import style from "../css/TableList.module.css";
+export default function Loading(_ref) {
+  let {
+    isLoading,
+    hasRows
+  } = _ref;
+
+  if (isLoading) {
+    let loadingClass = !hasRows ? style.initialLoading : '';
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.contentWrapper} ${loadingClass}`
+    }, /*#__PURE__*/React.createElement(Loader, {
+      isCover: !hasRows,
+      className: style.loader
+    }));
+  }
+
+  return null;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import CommonEmptyState from "../../../../../legacy-to-new-arch/common-empty-state/CommonEmptyState"; // @ts-ignore
+
+import style from "../css/TableList.module.css";
+import ComponentRegistry from "../../../../../../custom-component/frameworks/ui/ComponentRegistry";
+export default function NoData(_ref) {
+  let {
+    isDataEmpty,
+    emptyStateUiType
+  } = _ref;
+
+  if (isDataEmpty) {
+    const EmptyState = ComponentRegistry.get(emptyStateUiType) || CommonEmptyState;
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: `${style.contentWrapper} ${style.emptyContent}`
+    }, /*#__PURE__*/React.createElement(EmptyState, null));
+  }
+
+  return null;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import Row from "./row/Row";
+const emptyArray = [];
+const emptyObject = {};
+
+function Rows(_ref) {
+  let {
+    headers,
+    rows,
+    isFlexibleColumns,
+    isSelectionEnabled,
+    resizedColumnsWidth,
+    hasRowActions
+  } = _ref;
+  return rows.map((row, index) => {
+    const {
+      id,
+      columns,
+      isSelected,
+      isSelectable,
+      selectionTooltip,
+      clickAction,
+      rowActions
+    } = row;
+    const updatedColumns = columns.map((column, index) => {
+      return {
+        size: headers[index].size,
+        field: column,
+        alignment: headers[index].alignment
+      };
+    });
+    return /*#__PURE__*/React.createElement(Row, {
+      key: index,
+      id: id,
+      columns: updatedColumns || emptyArray,
+      clickAction: clickAction || emptyObject,
+      rowActions: rowActions || emptyArray,
+      isSelected: isSelected,
+      isSelectable: isSelectable,
+      selectionTooltip: selectionTooltip,
+      isFlexibleColumns: isFlexibleColumns,
+      isSelectionEnabled: isSelectionEnabled,
+      resizedColumnsWidth: resizedColumnsWidth,
+      hasActions: hasRowActions
+    });
+  });
+}
+
+export default Rows;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import * as FieldComponents from "../../../../../../legacy-to-new-arch/field-components";
+import ComponentRegistry from "../../../../../../../custom-component/frameworks/ui/ComponentRegistry";
+
+const FieldComponent = props => {
+  const {
+    type,
+    fieldProps
+  } = props;
+  const Component = FieldComponents[type] || ComponentRegistry.get(type);
+
+  if (!Component) {
+    console.error(`Field Component type ${type} not found`);
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Component, { ...fieldProps
+  });
+};
+
+export default FieldComponent;

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import TableColumnResizer from '@zohodesk-private/desk-components/es/table/TableHead/TableColumnResizer/TableColumnResizer';
+export default function ColumnResizer(_ref) {
+  let {
+    isResizerEnabled,
+    isResizing
+  } = _ref;
+
+  if (isResizerEnabled) {
+    return /*#__PURE__*/React.createElement(TableColumnResizer, {
+      $flag_resizing: isResizing
+    });
+  }
+
+  return null;
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import TableHead from '@zohodesk-private/desk-components/es/table/TableHead/TableHead';
+import HeaderText from "./HeaderText";
+import ColumnResizer from "./ColumnResizer";
+
+function HeaderData(_ref) {
+  let {
+    header,
+    sortedBy,
+    sortTooltip,
+    isResizing,
+    isResizerEnabled,
+    resizedWidth,
+    isFlexibleColumns,
+    dispatch
+  } = _ref;
+  const {
+    id,
+    name,
+    text,
+    sortable,
+    size,
+    alignment
+  } = header;
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(TableHead, {
+      $ui_size: size,
+      $ui_align: alignment,
+      $data_width: resizedWidth,
+      $flag_flexible: isFlexibleColumns
+    }, /*#__PURE__*/React.createElement(HeaderText, {
+      id: id,
+      name: name,
+      text: text,
+      sortable: sortable,
+      sortedBy: sortedBy,
+      sortTooltip: sortTooltip // Yet to be implemented
+      ,
+      dispatch: dispatch
+    }), /*#__PURE__*/React.createElement(ColumnResizer, {
+      isResizerEnabled: isResizerEnabled,
+      isResizing: isResizing
+    }))
+  );
+}
+
+export default HeaderData;