@sebgroup/green-react 3.17.0 → 3.18.0

package/src/lib/stepper/stepper.js

@@ -0,0 +1,82 @@
+import { _ as __rest } from '../../../_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { validateClassName } from '@sebgroup/extract';
+
+// TODO: Should be named "Numeric input" instead of stepper?
+function Stepper(_a) {
+  var id = _a.id,
+    label = _a.label,
+    description = _a.description,
+    statusMessage = _a.statusMessage,
+    validator = _a.validator,
+    _a$value = _a.value,
+    value = _a$value === void 0 ? 0 : _a$value,
+    _a$onChange = _a.onChange,
+    onChange = _a$onChange === void 0 ? function () {
+      return undefined;
+    } : _a$onChange,
+    _a$onIncrease = _a.onIncrease,
+    onIncrease = _a$onIncrease === void 0 ? function () {
+      return undefined;
+    } : _a$onIncrease,
+    _a$onDecrease = _a.onDecrease,
+    onDecrease = _a$onDecrease === void 0 ? function () {
+      return undefined;
+    } : _a$onDecrease,
+    testId = _a.testId,
+    props = __rest(_a, ["id", "label", "description", "statusMessage", "validator", "value", "onChange", "onIncrease", "onDecrease", "testId"]);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      onIncrease();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      onDecrease();
+    }
+  };
+  var PrimitiveStepper = jsxs("div", {
+    "data-testid": testId,
+    className: "group group-border group-stepper ".concat(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)),
+    children: [jsx("button", {
+      type: "button",
+      onClick: onDecrease,
+      children: "-"
+    }), jsx("input", Object.assign({
+      id: id,
+      type: "text",
+      inputMode: "numeric",
+      pattern: "[0-9]*",
+      onChange: onChange,
+      onFocus: function onFocus(_ref) {
+        var target = _ref.target;
+        return target.select();
+      },
+      onKeyDown: handleKeyDown,
+      placeholder: "0",
+      value: value
+    }, props)), jsx("button", {
+      type: "button",
+      onClick: onIncrease,
+      children: "+"
+    })]
+  });
+  if (!label && !description && !statusMessage && !validator) return PrimitiveStepper;
+  return jsxs("div", {
+    className: "form-group",
+    children: [label && jsx("label", {
+      htmlFor: id,
+      children: label
+    }), description && jsx("span", {
+      className: "form-info",
+      children: description
+    }), jsxs("div", {
+      className: "stepper-wrapper",
+      children: [PrimitiveStepper, validator && jsx("span", {
+        className: "form-info",
+        children: validator.message
+      })]
+    })]
+  });
+}
+
+export { Stepper };

package/src/lib/table/components/Table.js

@@ -0,0 +1,38 @@
+import { _ as _slicedToArray } from '../../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import classNames from 'classnames';
+import { TableContext } from './context/TableContextProvider.js';
+
+var Table = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var onRowSelect = _a.onRowSelect,
+    onRowExpand = _a.onRowExpand,
+    onSort = _a.onSort,
+    _a$sortedColumn = _a.sortedColumn,
+    sortedColumn = _a$sortedColumn === void 0 ? null : _a$sortedColumn,
+    className = _a.className,
+    props = __rest(_a, ["onRowSelect", "onRowExpand", "onSort", "sortedColumn", "className"]);
+  var _React$useState = React.useState({
+      expandedRows: [],
+      sortedColumn: sortedColumn
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    tableState = _React$useState2[0],
+    setTableState = _React$useState2[1];
+  return jsx(TableContext.Provider, {
+    value: {
+      tableState: tableState,
+      onSort: onSort,
+      onRowSelect: onRowSelect,
+      onRowExpand: onRowExpand,
+      setTableState: setTableState
+    },
+    children: jsx("table", Object.assign({}, props, {
+      className: classNames('table', className),
+      ref: ref
+    }))
+  });
+}));
+
+export { Table };

package/src/lib/table/components/context/TableContextProvider.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+var defaultContext = {
+  tableState: {
+    sortedColumn: null,
+    expandedRows: []
+  },
+  setTableState: null,
+  onRowSelect: null,
+  onRowExpand: null,
+  onSort: null
+};
+var TableContext = /*#__PURE__*/React.createContext(defaultContext);
+var useTableContext = function useTableContext() {
+  return React.useContext(TableContext);
+};
+
+export { TableContext, useTableContext };

package/src/lib/table/components/index.js

@@ -0,0 +1,14 @@
+export { SortDirection } from './table-typings.js';
+export { TableContext, useTableContext } from './context/TableContextProvider.js';
+export { filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols } from './parts/helperFunctions/helperFunctions.js';
+export { TableCell } from './parts/TableCell/TableCell.js';
+export { TableBody } from './parts/TableBody/TableBody.js';
+export { TableHeader } from './parts/TableHeader/TableHeader.js';
+export { TableHeaderCell } from './parts/TableHeaderCell/TableHeaderCell.js';
+export { TableRow } from './parts/TableRow/TableRow.js';
+export { Table } from './Table.js';
+import 'react';
+import '../../../../_rollupPluginBabelHelpers.js';
+import '../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'classnames';

package/src/lib/table/components/parts/TableBody/TableBody.js

@@ -0,0 +1,41 @@
+import { _ as __rest } from '../../../../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+var TableBody = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var props = __rest(_a, []);
+  var parentKey;
+  /**
+   * clone table row by appending parent key to sub row if necessary
+   * @param Child react element
+   * @param index index number
+   */
+  var cloneTableRow = React.useCallback(function (Child, index) {
+    var _a;
+    var isTableRow = /*#__PURE__*/React.isValidElement(Child) && ((_a = Child === null || Child === void 0 ? void 0 : Child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'TableRow';
+    if (isTableRow && !Child.props.isSubRow) {
+      parentKey = Child.props.uniqueKey;
+    }
+    return isTableRow ? /*#__PURE__*/React.cloneElement(Child, {
+      index: index,
+      parentKey: parentKey
+    }) : Child;
+  }, []);
+  return jsx("tbody", Object.assign({}, props, {
+    ref: ref,
+    children: React.Children.map(props.children, function (Child, i) {
+      if ((Child === null || Child === void 0 ? void 0 : Child.type) === React.Fragment) {
+        return /*#__PURE__*/React.cloneElement(Child, {
+          children: React.Children.map(Child.props.children, function (FragmentChild, fragmentIndex) {
+            return cloneTableRow(FragmentChild, fragmentIndex);
+          })
+        });
+      } else {
+        return cloneTableRow(Child, i);
+      }
+    })
+  }));
+});
+TableBody.displayName = 'TableBody';
+
+export { TableBody };

package/src/lib/table/components/parts/TableBody/index.js

@@ -0,0 +1,4 @@
+export { TableBody } from './TableBody.js';
+import '../../../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';

package/src/lib/table/components/parts/TableCell/TableCell.js

@@ -0,0 +1,13 @@
+import { _ as __rest } from '../../../../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+var TableCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var props = __rest(_a, []);
+  return jsx("td", Object.assign({}, props, {
+    ref: ref
+  }));
+});
+TableCell.displayName = 'TableCell';
+
+export { TableCell };

package/src/lib/table/components/parts/TableCell/index.js

@@ -0,0 +1,4 @@
+export { TableCell } from './TableCell.js';
+import '../../../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';

package/src/lib/table/components/parts/TableHeader/TableHeader.js

@@ -0,0 +1,23 @@
+import { _ as __rest } from '../../../../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+var TableHeader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var props = __rest(_a, []);
+  return jsx("thead", Object.assign({}, props, {
+    ref: ref,
+    children: React.Children.count(props.children) === 1 && /*#__PURE__*/React.isValidElement(props.children) ? /*#__PURE__*/React.cloneElement(props.children, {
+      isHeaderRow: true,
+      index: -1
+    }) : React.Children.map(props.children, function (Child, i) {
+      var _a;
+      return /*#__PURE__*/React.isValidElement(Child) && ((_a = Child === null || Child === void 0 ? void 0 : Child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'TableRow' ? /*#__PURE__*/React.cloneElement(Child, {
+        index: i,
+        hideSelect: !Child.props.isHeaderRow
+      }) : Child;
+    })
+  }));
+});
+TableHeader.displayName = 'TableHeader';
+
+export { TableHeader };

package/src/lib/table/components/parts/TableHeader/index.js

@@ -0,0 +1,4 @@
+export { TableHeader } from './TableHeader.js';
+import '../../../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';

package/src/lib/table/components/parts/TableHeaderCell/TableHeaderCell.js

@@ -0,0 +1,95 @@
+import { _ as _slicedToArray } from '../../../../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../../../../_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import classNames from 'classnames';
+import { SortDirection } from '../../table-typings.js';
+import { useTableContext } from '../../context/TableContextProvider.js';
+
+var TableHeaderCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var accessor = _a.accessor,
+    disableSort = _a.disableSort,
+    className = _a.className,
+    sortDirection = _a.sortDirection,
+    onClick = _a.onClick,
+    children = _a.children,
+    props = __rest(_a, ["accessor", "disableSort", "className", "sortDirection", "onClick", "children"]);
+  var tableContext = useTableContext();
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    sortedColumn = _React$useState2[0],
+    setSortedColumn = _React$useState2[1];
+  var _React$useState3 = React.useState(SortDirection.ASC),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    sortOrder = _React$useState4[0],
+    setSortOrder = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    sortable = _React$useState6[0],
+    setSortable = _React$useState6[1];
+  /**
+   * get latest sort direction
+   * @param oldSortDirection current sort direction
+   */
+  var getSortDirection = function getSortDirection(oldSortDirection) {
+    return oldSortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
+  };
+  /** on column sort */
+  var onSort = React.useCallback(function () {
+    var _a;
+    var newSortedColumn = sortedColumn && sortedColumn.accessor === accessor ? Object.assign(Object.assign({}, sortedColumn), {
+      sortDirection: getSortDirection(sortedColumn.sortDirection)
+    }) : {
+      accessor: accessor,
+      sortDirection: SortDirection.DESC
+    };
+    tableContext.setTableState(Object.assign(Object.assign({}, tableContext.tableState), {
+      sortedColumn: newSortedColumn
+    }));
+    !!newSortedColumn && ((_a = tableContext === null || tableContext === void 0 ? void 0 : tableContext.onSort) === null || _a === void 0 ? void 0 : _a.call(tableContext, newSortedColumn));
+  }, [sortedColumn, tableContext]);
+  var getCurrentSortValue = React.useCallback(function () {
+    if (!sortable || !sortOrder) {
+      return 'none';
+    }
+    if (sortOrder === SortDirection.ASC) {
+      return 'ascending';
+    }
+    return 'descending';
+  }, [sortable, sortOrder]);
+  React.useEffect(function () {
+    setSortable(!disableSort && !!tableContext.onSort);
+  }, [disableSort, tableContext.onSort]);
+  React.useEffect(function () {
+    setSortedColumn(tableContext.tableState.sortedColumn);
+  }, [tableContext.tableState.sortedColumn]);
+  React.useEffect(function () {
+    if (sortDirection && tableContext.onSort) {
+      tableContext.setTableState(Object.assign(Object.assign({}, tableContext.tableState), {
+        sortedColumn: {
+          accessor: accessor,
+          sortDirection: sortDirection
+        }
+      }));
+    }
+  }, [sortDirection, tableContext.onSort]);
+  React.useEffect(function () {
+    setSortOrder(sortable && (sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.accessor) === accessor ? sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sortDirection : null);
+  }, [sortable, sortedColumn]);
+  return jsx("th", Object.assign({
+    className: classNames(className, {
+      'sg-sortable': sortable
+    }),
+    onClick: sortable ? onSort : onClick,
+    ref: ref,
+    "aria-sort": getCurrentSortValue()
+  }, props, {
+    children: sortable ? jsxs("button", {
+      className: "sg-table-sort",
+      children: [" ", children]
+    }) : children
+  }));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+export { TableHeaderCell };

package/src/lib/table/components/parts/TableHeaderCell/index.js

@@ -0,0 +1,8 @@
+export { TableHeaderCell } from './TableHeaderCell.js';
+import '../../../../../../_rollupPluginBabelHelpers.js';
+import '../../../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '../../table-typings.js';
+import '../../context/TableContextProvider.js';

package/src/lib/table/components/parts/TableRow/TableRow.js

@@ -0,0 +1,164 @@
+import { _ as _slicedToArray, d as _toConsumableArray } from '../../../../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../../../../_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import classNames from 'classnames';
+import { TableHeaderCell } from '../TableHeaderCell/TableHeaderCell.js';
+import { TableCell } from '../TableCell/TableCell.js';
+import { useTableContext } from '../../context/TableContextProvider.js';
+import '../../table-typings.js';
+
+var angleDown = jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 256 512",
+  children: jsx("path", {
+    d: "M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z"
+  })
+});
+var angleRightIcon = jsx("svg", {
+  name: "angle-right",
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 192 512",
+  children: jsx("path", {
+    d: "M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z"
+  })
+});
+var TableRow = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
+  var className = _a.className,
+    isHeaderRow = _a.isHeaderRow,
+    hideSelect = _a.hideSelect,
+    uniqueKey = _a.uniqueKey,
+    parentKey = _a.parentKey,
+    _a$checked = _a.checked,
+    checked = _a$checked === void 0 ? false : _a$checked,
+    _a$indeterminate = _a.indeterminate,
+    indeterminate = _a$indeterminate === void 0 ? false : _a$indeterminate,
+    _a$isSubRow = _a.isSubRow,
+    isSubRow = _a$isSubRow === void 0 ? false : _a$isSubRow,
+    _a$isExpanded = _a.isExpanded,
+    isExpanded = _a$isExpanded === void 0 ? false : _a$isExpanded;
+    _a.checkboxProps;
+    var _a$collapseButtonProp = _a.collapseButtonProps,
+    collapseButtonProps = _a$collapseButtonProp === void 0 ? {} : _a$collapseButtonProp,
+    props = __rest(_a, ["className", "isHeaderRow", "hideSelect", "uniqueKey", "parentKey", "checked", "indeterminate", "isSubRow", "isExpanded", "checkboxProps", "collapseButtonProps"]);
+  var tableContext = useTableContext();
+  var _React$useState = React.useState(uniqueKey),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    uniqueId = _React$useState2[0],
+    setUniqueId = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isShown = _React$useState4[0],
+    setIsShown = _React$useState4[1];
+  var _React$useState5 = React.useState(isExpanded),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    expanded = _React$useState6[0],
+    setExpanded = _React$useState6[1];
+  var _React$useState7 = React.useState(isExpanded),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isParentRow = _React$useState8[0],
+    setIsParentRow = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    columnProps = _React$useState10[0],
+    setColumnProps = _React$useState10[1];
+  var _React$useState11 = React.useState(((_b = tableContext.tableState) === null || _b === void 0 ? void 0 : _b.expandedRows) || []),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    expandedRows = _React$useState12[0],
+    setExpandedRows = _React$useState12[1];
+  var headerId = useId();
+  /** initiate default expanded row */
+  var initiateExpandedRows = React.useCallback(function () {
+    var newExpandedRows = _toConsumableArray(expandedRows);
+    var expandedIndex = newExpandedRows.indexOf(uniqueId);
+    if (isExpanded && expandedIndex === -1) {
+      newExpandedRows.push(uniqueId);
+    } else if (expandedIndex > -1) {
+      var _expandedIndex = newExpandedRows.indexOf(uniqueId);
+      newExpandedRows.splice(_expandedIndex, 1);
+    }
+    tableContext.setTableState(Object.assign(Object.assign({}, tableContext.tableState), {
+      expandedRows: newExpandedRows
+    }));
+    setExpandedRows(newExpandedRows);
+  }, [isExpanded, uniqueId]);
+  React.useEffect(function () {
+    setUniqueId(isHeaderRow ? 'all' : uniqueKey || headerId);
+  }, [uniqueKey, isHeaderRow]);
+  React.useEffect(function () {
+    setExpandedRows(tableContext.tableState.expandedRows || []);
+  }, [tableContext.tableState.expandedRows]);
+  React.useEffect(function () {
+    setExpanded(isExpanded);
+    if (!isSubRow && !isHeaderRow && tableContext.onRowExpand) {
+      initiateExpandedRows();
+    }
+  }, [isExpanded, initiateExpandedRows]);
+  React.useEffect(function () {
+    setColumnProps(isHeaderRow ? {
+      disableSort: true
+    } : null);
+  }, [isHeaderRow]);
+  React.useEffect(function () {
+    setIsParentRow(!(isHeaderRow || isSubRow));
+  }, [isHeaderRow, isSubRow]);
+  React.useEffect(function () {
+    if (tableContext.onRowExpand) {
+      setIsShown(isSubRow && expandedRows.indexOf(parentKey) > -1);
+    }
+  }, [expandedRows]);
+  var Cell = isHeaderRow ? TableHeaderCell : TableCell;
+  return jsxs("tr", Object.assign({}, props, {
+    ref: ref,
+    className: classNames(className, {
+      'sub-row': isSubRow,
+      expanded: isExpanded,
+      collapsible: isParentRow && !!tableContext.onRowExpand,
+      show: isShown
+    }),
+    children: [!!tableContext.onRowExpand && jsx(Cell, Object.assign({}, columnProps, {
+      className: classNames({
+        'collapse-control': isParentRow
+      }),
+      children: isParentRow && jsx("button", Object.assign({}, collapseButtonProps, {
+        className: classNames('collapse-btn', collapseButtonProps.className),
+        onClick: function onClick() {
+          var _a;
+          return (_a = tableContext === null || tableContext === void 0 ? void 0 : tableContext.onRowExpand) === null || _a === void 0 ? void 0 : _a.call(tableContext, !isExpanded, uniqueId);
+        },
+        children: jsx("div", {
+          className: "icon-holder",
+          children: expanded ? angleDown : angleRightIcon
+        })
+      }))
+    })), !!tableContext.onRowSelect && jsx(Cell, Object.assign({}, columnProps, {
+      className: classNames({
+        'select-control': !(hideSelect || isSubRow)
+      }),
+      children: !(hideSelect || isSubRow) && jsxs("label", {
+        className: "form-control p-0",
+        children: [jsx("input", {
+          type: "checkbox",
+          checked: checked,
+          ref: function ref(input) {
+            if (input) {
+              input.indeterminate = indeterminate && !checked;
+            }
+          },
+          name: "tb_checkbox_".concat(uniqueId),
+          id: "tb_checkbox_".concat(uniqueId),
+          onChange: function onChange(event) {
+            var _a;
+            return (_a = tableContext === null || tableContext === void 0 ? void 0 : tableContext.onRowSelect) === null || _a === void 0 ? void 0 : _a.call(tableContext, event, uniqueId);
+          }
+        }), jsx("i", {
+          className: "m-0"
+        })]
+      })
+    })), props.children]
+  }));
+});
+TableRow.displayName = 'TableRow';
+
+export { TableRow };

package/src/lib/table/components/parts/TableRow/index.js

@@ -0,0 +1,10 @@
+export { TableRow } from './TableRow.js';
+import '../../../../../../_rollupPluginBabelHelpers.js';
+import '../../../../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '../TableHeaderCell/TableHeaderCell.js';
+import '../../table-typings.js';
+import '../../context/TableContextProvider.js';
+import '../TableCell/TableCell.js';

package/src/lib/table/components/parts/helperFunctions/helperFunctions.js

@@ -0,0 +1,138 @@
+import { d as _toConsumableArray } from '../../../../../../_rollupPluginBabelHelpers.js';
+import { SortDirection } from '../../table-typings.js';
+
+/**
+ * sum the total of columns or cols in a row
+ * @param colsLength the length of the columns
+ * @param useSelection add a column for selection checkboxes
+ * @param useShowActionColumn add another column for action columns
+ * @param useGroupBy add another columns for groupby
+ */
+function sumCols(colsLength, useSelection, useShowActionColumn, useGroupBy) {
+  var sum = colsLength;
+  if (useSelection) {
+    sum = sum + 1;
+  }
+  if (useGroupBy) {
+    sum = sum + 1;
+  }
+  if (useShowActionColumn) {
+    sum = sum + 1;
+  }
+  return sum;
+}
+/**
+ * sort array of tabke rows
+ * @param items table rows array
+ * @param columnName the target column name
+ * @param sortDirection the sort direction
+ * @return Array of tableRow
+ */
+function sortArray() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var columnName = arguments.length > 1 ? arguments[1] : undefined;
+  var sortDirection = arguments.length > 2 ? arguments[2] : undefined;
+  var _a;
+  var languages = ((_a = window.navigator) === null || _a === void 0 ? void 0 : _a.languages) || ['sw', 'en'];
+  var sortedItems = _toConsumableArray(items).sort(function (firstItem, secondItem) {
+    var result = 0;
+    if (sortDirection === SortDirection.ASC) {
+      if (isNaN(secondItem[columnName]) && isNaN(firstItem[columnName])) {
+        result = String(firstItem[columnName]).localeCompare(String(secondItem[columnName]), languages, {
+          sensitivity: 'base',
+          ignorePunctuation: true
+        });
+      } else {
+        result = firstItem[columnName] - secondItem[columnName];
+      }
+    } else {
+      if (isNaN(secondItem[columnName]) && isNaN(firstItem[columnName])) {
+        result = String(secondItem[columnName]).localeCompare(String(firstItem[columnName]), languages, {
+          sensitivity: 'base',
+          ignorePunctuation: true
+        });
+      } else {
+        result = secondItem[columnName] - firstItem[columnName];
+      }
+    }
+    return result;
+  });
+  return sortedItems;
+}
+/**
+ *
+ * @param data table data
+ * @param filterColumns filter columns
+ */
+function filterArrayByColumns(data, filterColumns) {
+  return data.filter(function (row) {
+    return filterColumns.length === 0 || filterColumns.every(function (column) {
+      return Array.isArray(column.value) ? column.value.length === 0 || column.value.indexOf(row[column.accessor]) > -1 : row[column.accessor] === column.value;
+    });
+  });
+}
+/**
+ * search text in array of table row
+ * @param data the array of table rows
+ * @param keyword The keyword to search in the array
+ * @param searchFields the target field to search
+ */
+function searchTextByColumns(data, keyword, searchFields) {
+  return _toConsumableArray(data).filter(function (row) {
+    var searchText = String(keyword);
+    return searchFields === null || searchFields === void 0 ? void 0 : searchFields.some(function (searchColumn) {
+      var result = false;
+      var regEx = new RegExp(searchText, 'gi');
+      if (row[searchColumn] === null || row[searchColumn] === undefined) {
+        result = false;
+      } else if (typeof row[searchColumn] === 'string') {
+        result = row[searchColumn].search(regEx) > -1;
+      } else if (typeof row[searchColumn] === 'number') {
+        result = String(row[searchColumn]).search(regEx) !== -1;
+      }
+      return result;
+    });
+  });
+}
+/**
+ * paginate data
+ * @param data table data
+ * @param offset page size
+ * @param currentPage current page index
+ */
+function paginate(data, offset, currentPage) {
+  if (offset && (data === null || data === void 0 ? void 0 : data.length) > 0) {
+    var start = currentPage * offset;
+    var end = offset + start;
+    var currentPageData = data === null || data === void 0 ? void 0 : data.slice(start, end);
+    return currentPageData;
+  }
+  return data;
+}
+/**
+ * on row select
+ * @param event input event
+ * @param data rows of data
+ * @param rowUniqueAccessor row unique accessor
+ * @param rowId row id value
+ */
+function onRowSelect(event, data, rowUniqueAccessor, rowId) {
+  var target = event.target;
+  var isAllSelected = true;
+  var isIndeterminate = false;
+  var newData = data === null || data === void 0 ? void 0 : data.map(function (row) {
+    if (row[rowUniqueAccessor] === rowId || rowId === 'all') {
+      row.checked = target.checked;
+    }
+    isAllSelected = isAllSelected && row.checked;
+    isIndeterminate = isIndeterminate || row.checked;
+    return row;
+  });
+  return {
+    data: newData,
+    isAllSelected: !!newData && isAllSelected,
+    isIndeterminate: isIndeterminate && !isAllSelected
+  };
+}
+
+export { filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols };