@widergy/energy-ui 3.158.0 → 3.159.0

package/dist/esm/components/UTTable/components/TableFooter/components/PageSizeSelector/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { arrayOf, string, number, func } from 'prop-types';
+import UTSelect from '../../../../../UTSelect';
+import UTLabel from '../../../../../UTLabel';
+import { classesType } from '../../../../types';
+import { getPageSizeOptions } from './utils';
+import styles from './styles.module.scss';
+const PageSizeSelector = _ref => {
+  let {
+    classes,
+    options,
+    rowsPerPage,
+    onChangeRowPerPage,
+    label,
+    totalRows
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.pageSizeSelector
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.selectorContainer
+  }, /*#__PURE__*/React.createElement(UTSelect, {
+    options: getPageSizeOptions(options, totalRows),
+    labelKey: "label",
+    valueKey: "value",
+    input: {
+      onChange: onChangeRowPerPage,
+      value: rowsPerPage
+    },
+    disableFirstOption: true,
+    variant: "outlined",
+    selectProps: {
+      className: "".concat(styles.pageSizeSelectContainer, " ").concat(classes.pageSizeSelectContainer),
+      classes: {
+        select: classes.pageSizeSelect
+      }
+    }
+  })), /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.label, " ").concat(classes.totalRowsLabel)
+  }, label));
+};
+PageSizeSelector.propTypes = {
+  classes: classesType,
+  options: arrayOf(number),
+  rowsPerPage: number,
+  onChangeRowPerPage: func,
+  label: string,
+  totalRows: number
+};
+export default PageSizeSelector;

package/dist/esm/components/UTTable/components/TableFooter/components/PageSizeSelector/styles.module.scss

@@ -0,0 +1,24 @@
+.pageSizeSelector {
+  align-items: center;
+  display: flex;
+  white-space: nowrap;
+}
+
+.label {
+  margin-left: 16px;
+}
+
+.selectorContainer {
+  flex-shrink: 1;
+  min-width: 80px;
+
+  legend {
+    display: none;
+  }
+}
+
+.pageSizeSelectContainer {
+  & fieldset {
+    top: 0;
+  }
+}

package/dist/esm/components/UTTable/components/TableFooter/components/PageSizeSelector/utils.js

@@ -0,0 +1,13 @@
+import { isEmpty } from '@widergy/web-utils/lib/array';
+const getPrevOption = (options, index) => index === 0 ? 0 : options[index - 1];
+export const getPageSizeOptions = (originalOptions, totalRows) => {
+  const filteredOptions = originalOptions.filter((_, index) => getPrevOption(originalOptions, index) < totalRows);
+  if (isEmpty(filteredOptions)) return [{
+    value: originalOptions[0],
+    label: totalRows
+  }];
+  return filteredOptions.map(value => ({
+    value,
+    label: Math.min(value, totalRows)
+  }));
+};

package/dist/esm/components/UTTable/components/TableFooter/components/Pagination/components/NavigationButton/index.js

@@ -0,0 +1,32 @@
+import React, { memo } from 'react';
+import { bool, elementType, func, number, oneOfType, string } from 'prop-types';
+import UTTouchableWithoutFeedback from '../../../../../../../UTTouchableWithoutFeedback';
+import { classesType } from '../../../../../../types';
+import styles from './styles.module.scss';
+const NavigationButton = _ref => {
+  let {
+    classes,
+    Icon,
+    label,
+    onClick,
+    className,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "\n      ".concat(className, "\n      ").concat(styles.navigationButton, "\n      ").concat(classes.navigationButton, "\n      ").concat(disabled && "".concat(styles.buttonDisabled, " ").concat(classes.navigationButtonDisabled), "\n    "),
+    onClick: onClick
+  }, label && /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, label), /*#__PURE__*/React.createElement(Icon, {
+    className: classes.navigationArrow
+  }));
+};
+NavigationButton.propTypes = {
+  classes: classesType,
+  className: string,
+  disabled: bool,
+  Icon: elementType,
+  label: oneOfType([string, number]),
+  onClick: func
+};
+export default /*#__PURE__*/memo(NavigationButton);

package/dist/esm/components/UTTable/components/TableFooter/components/Pagination/components/NavigationButton/styles.module.scss

@@ -0,0 +1,13 @@
+.navigationButton {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  + .navigationButton {
+    margin-left: 4px;
+  }
+}
+
+.buttonDisabled {
+  pointer-events: none;
+}

package/dist/esm/components/UTTable/components/TableFooter/components/Pagination/index.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { func, number, bool } from 'prop-types';
+var NavigateBeforeIcon = function NavigateBeforeIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M5.829 14a.998.998 0 0 1-.78-.373l-4.828-6A1 1 0 0 1 .23 6.36l5-6a1 1 0 1 1 1.536 1.28L2.294 7.011l4.315 5.362A1 1 0 0 1 5.828 14",
+    fillRule: "evenodd"
+  }));
+};
+NavigateBeforeIcon.defaultProps = {
+  width: "7",
+  height: "14",
+  viewBox: "0 0 7 14",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var NavigateNextIcon = function NavigateNextIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M1 14a1 1 0 0 1-.768-1.64l4.475-5.371L.393 1.627A1 1 0 0 1 1.95.373l4.829 6a1 1 0 0 1-.012 1.267l-5 6A1 1 0 0 1 1 14",
+    fillRule: "evenodd"
+  }));
+};
+NavigateNextIcon.defaultProps = {
+  width: "7",
+  height: "14",
+  viewBox: "0 0 7 14",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var NavigateHeaderBeforeIcon = function NavigateHeaderBeforeIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M5.232.36a1 1 0 0 1 1.536 1.28L2.292 7.01l4.315 5.363a1 1 0 0 1-1.558 1.254l-4.828-6A1 1 0 0 1 .232 6.36Zm7 0a1 1 0 0 1 1.537 1.28L9.293 7.011l4.315 5.362a1 1 0 0 1-1.56 1.254l-4.828-6a1 1 0 0 1 .012-1.267Z",
+    fillRule: "evenodd"
+  }));
+};
+NavigateHeaderBeforeIcon.defaultProps = {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 14 14",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var NavigateHeaderNextIcon = function NavigateHeaderNextIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M7.545.221a1 1 0 0 1 1.406.152l4.828 6a1 1 0 0 1-.01 1.267l-5 6a1 1 0 1 1-1.537-1.28l4.476-5.371-4.316-5.362A1 1 0 0 1 7.545.221Zm-7 0a1 1 0 0 1 1.406.152l4.828 6a1 1 0 0 1-.01 1.267l-5 6a1 1 0 1 1-1.537-1.28l4.475-5.371L.392 1.627A1 1 0 0 1 .545.221Z",
+    fillRule: "evenodd"
+  }));
+};
+NavigateHeaderNextIcon.defaultProps = {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 14 14",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import UTTouchableWithoutFeedback from '../../../../../UTTouchableWithoutFeedback';
+import { classesType } from '../../../../types';
+import { PAGINATION_LIMIT_DOUBLE_ARROWS } from '../../../../constants';
+import NavigationButton from './components/NavigationButton';
+import { getPageNumbers } from './utils';
+import styles from './styles.module.scss';
+const Pagination = _ref => {
+  let {
+    classes,
+    currentPage,
+    handlePageChange,
+    rowsPerPage,
+    totalRows,
+    isResponsive
+  } = _ref;
+  const totalPages = rowsPerPage >= totalRows ? 1 : Math.ceil(totalRows / rowsPerPage);
+  const pageList = getPageNumbers(totalPages, currentPage, isResponsive);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.pagination, " ").concat(classes.pagination || '')
+  }, totalPages > PAGINATION_LIMIT_DOUBLE_ARROWS && !isResponsive && /*#__PURE__*/React.createElement(NavigationButton, {
+    classes: classes,
+    className: styles.invertNavigationLabel,
+    Icon: NavigateHeaderBeforeIcon,
+    label: "1",
+    disabled: currentPage === 0,
+    onClick: () => handlePageChange(0)
+  }), /*#__PURE__*/React.createElement(NavigationButton, {
+    classes: classes,
+    className: styles.firstArrow,
+    Icon: NavigateBeforeIcon,
+    disabled: currentPage === 0,
+    onClick: () => handlePageChange(currentPage - 1)
+  }), pageList.map(page => /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    key: "page_".concat(page),
+    className: "\n            ".concat(styles.pageButton, "\n            ").concat(classes.pageButton, "\n            ").concat(currentPage === page && "".concat(styles.buttonDisabled, " ").concat(classes.pageButtonSelected), "\n          "),
+    onClick: () => handlePageChange(page)
+  }, page + 1)), /*#__PURE__*/React.createElement(NavigationButton, {
+    classes: classes,
+    className: styles.lastArrow,
+    Icon: NavigateNextIcon,
+    disabled: currentPage === totalPages - 1,
+    onClick: () => handlePageChange(currentPage + 1)
+  }), totalPages > PAGINATION_LIMIT_DOUBLE_ARROWS && !isResponsive && /*#__PURE__*/React.createElement(NavigationButton, {
+    classes: classes,
+    className: styles.navigationLabel,
+    Icon: NavigateHeaderNextIcon,
+    label: totalPages,
+    disabled: currentPage === totalPages - 1,
+    onClick: () => handlePageChange(totalPages - 1)
+  }));
+};
+Pagination.propTypes = {
+  classes: classesType,
+  currentPage: number,
+  rowsPerPage: number,
+  handlePageChange: func,
+  totalRows: number,
+  isResponsive: bool
+};
+export default Pagination;

package/dist/esm/components/UTTable/components/TableFooter/components/Pagination/styles.module.scss

@@ -0,0 +1,42 @@
+.pagination {
+  align-items: center;
+  display: flex;
+}
+
+.pageButton {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.pageButtonSelected {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.buttonDisabled {
+  pointer-events: none;
+}
+
+.firstArrow {
+  margin-right: 4px;
+}
+
+.lastArrow {
+  margin-left: 4px;
+}
+
+.invertNavigationLabel {
+  flex-direction: row-reverse;
+
+  :first-child {
+    margin-left: 4px;
+  }
+}
+
+.navigationLabel {
+  :first-child {
+    margin-right: 4px;
+  }
+}

package/dist/esm/components/UTTable/components/TableFooter/components/Pagination/utils.js

@@ -0,0 +1,11 @@
+import { MAX_PAGINATION_ITEMS } from '../../../../constants';
+export const getPageNumbers = (totalPages, currentPage, isResponsive) => {
+  if (isResponsive) return [currentPage];
+  if (totalPages <= MAX_PAGINATION_ITEMS) return [...Array(totalPages).keys()];
+  const paginationFactor = MAX_PAGINATION_ITEMS / 2;
+  if (currentPage < Math.ceil(paginationFactor)) return [...Array(MAX_PAGINATION_ITEMS).keys()];
+  if (totalPages - currentPage < paginationFactor) return [...Array(totalPages).keys()].slice(totalPages - MAX_PAGINATION_ITEMS, totalPages);
+  const floorFactor = Math.floor(paginationFactor);
+  const ceilFactor = Math.ceil(paginationFactor);
+  return [...Array(currentPage + ceilFactor).keys()].slice(currentPage - floorFactor);
+};

package/dist/esm/components/UTTable/components/TableFooter/constants.js

@@ -0,0 +1 @@
+export const PREPOSITION = 'de';

package/dist/esm/components/UTTable/components/TableFooter/index.js

@@ -0,0 +1,51 @@
+import React, { memo } from 'react';
+import { arrayOf, number, func, string, bool } from 'prop-types';
+import { classesType } from '../../types';
+import PageSizeSelector from './components/PageSizeSelector';
+import Pagination from './components/Pagination';
+import { PREPOSITION } from './constants';
+import styles from './styles.module.scss';
+const TableFooter = _ref => {
+  let {
+    classes,
+    page,
+    handlePageChange,
+    onChangeRowPerPage,
+    rowsPerPage,
+    rowsPerPageOptions,
+    hidePageSelector = false,
+    totalRows,
+    totalRowsLabel,
+    isResponsive
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.tableFooter
+  }, !hidePageSelector && /*#__PURE__*/React.createElement(PageSizeSelector, {
+    classes: classes,
+    options: rowsPerPageOptions,
+    rowsPerPage: rowsPerPage,
+    onChangeRowPerPage: onChangeRowPerPage,
+    totalRows: totalRows,
+    label: "".concat(PREPOSITION, " ").concat(totalRows, " ").concat(totalRowsLabel)
+  }), /*#__PURE__*/React.createElement(Pagination, {
+    classes: classes,
+    currentPage: page,
+    handlePageChange: handlePageChange,
+    rowsPerPage: rowsPerPage,
+    totalRows: totalRows,
+    isResponsive: isResponsive
+  }));
+};
+TableFooter.propTypes = {
+  classes: classesType,
+  page: number,
+  handlePageChange: func,
+  onChangeRowPerPage: func,
+  rowsPerPage: number,
+  rowsPerPageOptions: arrayOf(number),
+  hidePageSelector: bool,
+  totalRows: number,
+  totalRowsLabel: string,
+  isResponsive: bool
+};
+export default /*#__PURE__*/memo(TableFooter);

package/dist/esm/components/UTTable/components/TableFooter/styles.module.scss

@@ -0,0 +1,11 @@
+.tableFooter {
+  align-content: center;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 32px;
+}
+
+.totalRowsLabel {
+  align-items: center;
+  display: flex;
+}

package/dist/esm/components/UTTable/components/TableHeader/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const TableHeader = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+TableHeader.propTypes = {
+  version: string
+};
+export default TableHeader;

package/dist/esm/components/UTTable/components/TableHeader/versions/V0/index.js

@@ -0,0 +1,60 @@
+import React, { memo } from 'react';
+import { func, node, string, bool } from 'prop-types';
+var RefreshIcon = function RefreshIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fill: "#FF6026",
+    d: "M17.303 10.426a1.001 1.001 0 0 0-1.256.65C15.11 14.022 12.352 16 9.184 16 5.222 16 2 12.86 2 9s3.222-7 7.184-7c1.728 0 3.358.602 4.645 1.67l-2.166-.357a.99.99 0 0 0-1.15.823.999.999 0 0 0 .824 1.149l4.246.702a1.025 1.025 0 0 0 .507-.048c.037-.014.067-.04.103-.06.066-.033.135-.063.192-.111.036-.03.06-.071.09-.105.047-.05.097-.096.132-.156.025-.043.035-.094.054-.142.024-.06.056-.114.068-.18l.754-4a1 1 0 1 0-1.966-.37l-.272 1.44A9.23 9.23 0 0 0 9.185 0C4.12 0 0 4.037 0 9s4.12 9 9.184 9c4.042 0 7.566-2.54 8.77-6.318a1.001 1.001 0 0 0-.65-1.256",
+    fillRule: "evenodd"
+  }));
+};
+RefreshIcon.defaultProps = {
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import UTButton from '../../../../../UTButton';
+import UTLabel from '../../../../../UTLabel';
+import { classesType } from '../../../../types';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import styles from './styles.module.scss';
+const {
+  table
+} = TEST_IDS;
+const TableHeader = _ref => {
+  let {
+    classes,
+    disabled,
+    GeneralActions,
+    onReload,
+    title,
+    titleDataTestId
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.header, " ").concat(classes.headerContainer)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.titleContainer
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.tableTitle,
+    dataTestId: titleDataTestId !== null && titleDataTestId !== void 0 ? titleDataTestId : table.tableHeader.title,
+    variant: "subtitle1",
+    weight: "medium"
+  }, title), onReload && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: "".concat(styles.reloadIcon, " ").concat(classes.reloadIcon),
+      root: "".concat(classes.reloadButton, " ").concat(disabled && classes.reloadButtonDisabled)
+    },
+    Icon: RefreshIcon,
+    onClick: onReload,
+    variant: "text"
+  })), GeneralActions);
+};
+TableHeader.propTypes = {
+  classes: classesType,
+  disabled: bool,
+  GeneralActions: node,
+  onReload: func,
+  title: string,
+  titleDataTestId: string
+};
+export default /*#__PURE__*/memo(TableHeader);

package/dist/esm/components/UTTable/components/TableHeader/versions/V0/styles.module.scss

@@ -0,0 +1,17 @@
+.titleContainer {
+  align-items: center;
+  display: flex;
+  margin-right: 16px;
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 32px;
+}
+
+.reloadIcon {
+  height: 18px;
+  width: 18px;
+}

package/dist/esm/components/UTTable/components/TableHeader/versions/V1/index.js

@@ -0,0 +1,182 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import isEmpty from 'lodash/isEmpty';
+import React, { Fragment, useEffect, useState } from 'react';
+import { arrayOf, bool, elementType, func, number, objectOf, oneOfType, shape, string } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import UTLabel from '../../../../../UTLabel';
+import UTMenu from '../../../../../UTMenu';
+import UTTooltip from '../../../../../UTTooltip';
+import useScrollBasedMenu from '../../../../../../utils/hooks/use-scroll-based-menu';
+import { classesType } from '../../../../types';
+import styles from './styles.module.scss';
+import { getMenuItems, reloadWindow } from './utils';
+const TableHeader = _ref => {
+  var _classes$wrapperHeade, _classes$textElements, _classes$titleAndDesc, _classes$selectedLabe, _classes$refreshAndAc, _classes$wrapperHeade2;
+  let {
+    actions,
+    automaticRefreshDelay,
+    classes,
+    description,
+    isDesktop,
+    isMobile,
+    loading,
+    onRefresh = reloadWindow,
+    ongoingRefreshLabel,
+    refreshLabel,
+    selectedLabel,
+    tableHeaderDataTestId,
+    title,
+    withAutomaticRefresh,
+    withRefresh
+  } = _ref;
+  const {
+    anchor,
+    closeMenu,
+    openMenu,
+    ref: menuButtonRef
+  } = useScrollBasedMenu();
+  const [latestRefresh, setLatestRefresh] = useState(new Date());
+  const handleRefresh = () => {
+    onRefresh();
+  };
+  useEffect(() => {
+    if (!loading) {
+      setLatestRefresh(new Date());
+    }
+  }, [loading]);
+  useEffect(() => {
+    let automaticRefreshTimeOut;
+    if (withAutomaticRefresh) {
+      automaticRefreshTimeOut = setTimeout(() => {
+        closeMenu();
+        handleRefresh();
+      }, automaticRefreshDelay);
+    }
+    return () => clearTimeout(automaticRefreshTimeOut);
+  }, [latestRefresh]);
+  return /*#__PURE__*/React.createElement("section", {
+    className: "".concat(styles.wrapperHeader, " ").concat((_classes$wrapperHeade = classes.wrapperHeader) !== null && _classes$wrapperHeade !== void 0 ? _classes$wrapperHeade : ''),
+    "data-testid": tableHeaderDataTestId
+  }, /*#__PURE__*/React.createElement("article", {
+    className: "".concat(styles.textElements, " ").concat((_classes$textElements = classes.textElements) !== null && _classes$textElements !== void 0 ? _classes$textElements : '')
+  }, (isMobile || title || description || selectedLabel) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.titleAndDescription, " ").concat((_classes$titleAndDesc = classes.titleAndDescription) !== null && _classes$titleAndDesc !== void 0 ? _classes$titleAndDesc : '')
+  }, title && /*#__PURE__*/React.createElement(UTLabel, {
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".title") : '',
+    weight: "medium"
+  }, title), description && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".description") : '',
+    shade: "04",
+    variant: "small"
+  }, description), isMobile && selectedLabel && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.selectedLabel, " ").concat((_classes$selectedLabe = classes.selectedLabel) !== null && _classes$selectedLabe !== void 0 ? _classes$selectedLabe : ''),
+    colorTheme: "accent",
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".selectedLabel") : '',
+    variant: "small",
+    weight: "medium"
+  }, selectedLabel)), !isMobile && selectedLabel && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "accent",
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".selectedLabel") : '',
+    variant: "small",
+    weight: "medium"
+  }, selectedLabel)), /*#__PURE__*/React.createElement("article", {
+    className: "".concat(styles.refreshAndActions, " ").concat((_classes$refreshAndAc = classes.refreshAndActions) !== null && _classes$refreshAndAc !== void 0 ? _classes$refreshAndAc : '')
+  }, withRefresh && /*#__PURE__*/React.createElement(Fragment, null, !isMobile && (loading ? /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".ongoingRefreshLabel") : '',
+    variant: "small",
+    weight: "medium"
+  }, ongoingRefreshLabel) : /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".refreshLabel") : '',
+    variant: "small",
+    weight: "medium"
+  }, refreshLabel)), /*#__PURE__*/React.createElement(UTTooltip, {
+    arrow: false,
+    content: isMobile && (loading ? /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "negative",
+      dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".ongoingRefreshLabel") : '',
+      variant: "small",
+      weight: "medium"
+    }, ongoingRefreshLabel) : /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "negative",
+      dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".refreshLabel") : '',
+      variant: "small",
+      weight: "medium"
+    }, refreshLabel)),
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".tooltip") : '',
+    tippyProps: {
+      placement: 'top'
+    }
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, {
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".button") : '',
+    Icon: "IconReload",
+    onClick: handleRefresh,
+    size: "small",
+    variant: "text"
+  })))), Array.isArray(actions) && !isEmpty(actions) && !isDesktop ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: menuButtonRef
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenuButton") : '',
+    Icon: "IconDots",
+    onClick: openMenu,
+    variant: "text"
+  })), /*#__PURE__*/React.createElement(UTMenu, {
+    anchor: anchor,
+    classNames: {
+      menuItemContainer: "".concat(styles.wrapperHeaderMenuItem, " ").concat((_classes$wrapperHeade2 = classes.wrapperHeaderMenuItem) !== null && _classes$wrapperHeade2 !== void 0 ? _classes$wrapperHeade2 : '')
+    },
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".dotMenu") : '',
+    iconBefore: true,
+    items: getMenuItems(actions, closeMenu),
+    onClose: closeMenu,
+    onOpen: openMenu,
+    popperProps: {
+      disablePortal: true
+    }
+  })) : Array.isArray(actions) && actions.map((actionConfig, index) => actionConfig.tooltip ? /*#__PURE__*/React.createElement(UTTooltip, _extends({
+    className: actionConfig.tooltipClassName,
+    content: actionConfig.tooltip,
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".").concat(index) : '',
+    tippyProps: {
+      arrow: false,
+      placement: 'top'
+    }
+  }, actionConfig.tooltipProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, actionConfig))) : /*#__PURE__*/React.createElement(UTButton, _extends({
+    dataTestId: tableHeaderDataTestId ? "".concat(tableHeaderDataTestId, ".").concat(index) : ''
+  }, actionConfig)))));
+};
+TableHeader.propTypes = {
+  actions: arrayOf(shape({
+    classes: objectOf(string),
+    classNames: objectOf(string),
+    colorTheme: string,
+    count: number,
+    dataTestId: string,
+    disabled: bool,
+    hideTextOnResponsive: bool,
+    Icon: oneOfType([elementType, string]),
+    iconPlacement: string,
+    loading: bool,
+    onClick: func,
+    size: string,
+    type: string,
+    variant: string
+  })),
+  automaticRefreshDelay: number,
+  classes: classesType,
+  description: string,
+  isDesktop: bool,
+  isMobile: bool,
+  loading: bool,
+  onRefresh: func,
+  ongoingRefreshLabel: string,
+  refreshLabel: string,
+  selectedLabel: string,
+  tableHeaderDataTestId: string,
+  title: string,
+  withAutomaticRefresh: bool,
+  withRefresh: bool
+};
+export default TableHeader;