@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTTable/assets/arrow-head-left.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-5.000000, -5.000000)">
+            <path fill="#FFFFFF" d="M10.2321,5.3599 C10.5851,4.9359 11.2151,4.8789 11.6401,5.2319 C12.0641,5.5859 12.1211,6.2159 11.7681,6.6399 L11.7681,6.6399 L7.2921,12.0109 L11.6071,17.3729 C11.9531,17.8029 11.8851,18.4329 11.4551,18.7789 C11.2701,18.9279 11.0491,18.9999 10.8281,18.9999 C10.5361,18.9999 10.2461,18.8729 10.0491,18.6269 L10.0491,18.6269 L5.2211,12.6269 C4.9221,12.2559 4.9271,11.7259 5.2321,11.3599 L5.2321,11.3599 Z M17.2315,5.3602 C17.5855,4.9352 18.2155,4.8792 18.6405,5.2322 C19.0645,5.5852 19.1215,6.2162 18.7685,6.6402 L18.7685,6.6402 L14.2925,12.0112 L18.6075,17.3732 C18.9535,17.8032 18.8855,18.4322 18.4555,18.7792 C18.2705,18.9282 18.0485,19.0002 17.8285,19.0002 C17.5365,19.0002 17.2465,18.8722 17.0485,18.6272 L17.0485,18.6272 L12.2205,12.6272 C11.9225,12.2562 11.9265,11.7252 12.2315,11.3602 L12.2315,11.3602 Z" id="path-arrow-head-left"></path>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTTable/assets/arrow-head-right.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-5.000000, -5.000000)">
+            <path fill="#FFFFFF" d="M12.5453,5.221 C12.9753,4.874 13.6043,4.943 13.9513,5.373 L13.9513,5.373 L18.7793,11.373 C19.0783,11.744 19.0733,12.274 18.7683,12.64 L18.7683,12.64 L13.7683,18.64 C13.5703,18.877 13.2863,19 12.9993,19 C12.7743,19 12.5473,18.924 12.3603,18.768 C11.9353,18.415 11.8783,17.784 12.2323,17.36 L12.2323,17.36 L16.7083,11.989 L12.3923,6.627 C12.0463,6.197 12.1143,5.567 12.5453,5.221 Z M5.5452,5.221 C5.9752,4.875 6.6042,4.943 6.9512,5.373 L6.9512,5.373 L11.7792,11.373 C12.0772,11.744 12.0732,12.274 11.7682,12.64 L11.7682,12.64 L6.7682,18.64 C6.5702,18.877 6.2862,19 5.9992,19 C5.7742,19 5.5472,18.924 5.3602,18.768 C4.9352,18.415 4.8782,17.784 5.2322,17.36 L5.2322,17.36 L9.7072,11.989 L5.3922,6.627 C5.0462,6.197 5.1152,5.567 5.5452,5.221 Z" id="path-1"></path>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTTable/assets/arrow-left.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="7px" height="14px" viewBox="0 0 7 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-8.000000, -5.000000)">
+            <path fill="#FFFFFF" d="M13.8286,19 C13.5366,19 13.2466,18.873 13.0486,18.627 L8.2206,12.627 C7.9226,12.256 7.9266,11.726 8.2316,11.36 L13.2316,5.36 C13.5846,4.936 14.2156,4.879 14.6406,5.232 C15.0646,5.585 15.1216,6.216 14.7676,6.64 L10.2926,12.011 L14.6076,17.373 C14.9536,17.803 14.8856,18.433 14.4546,18.779 C14.2706,18.928 14.0486,19 13.8286,19"></path>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTTable/assets/arrow-right.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="7px" height="14px" viewBox="0 0 7 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-9.000000, -5.000000)">
+            <path fill="#FFFFFF" d="M9.9995,19 C9.7735,19 9.5465,18.924 9.3595,18.768 C8.9355,18.415 8.8785,17.784 9.2315,17.36 L13.7075,11.989 L9.3925,6.627 C9.0465,6.197 9.1145,5.567 9.5445,5.221 C9.9755,4.875 10.6045,4.943 10.9515,5.373 L15.7795,11.373 C16.0775,11.744 16.0735,12.274 15.7685,12.64 L10.7685,18.64 C10.5705,18.877 10.2865,19 9.9995,19"></path>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTTable/assets/refresh.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-1091.000000, -182.000000)">
+            <g transform="translate(1088.000000, 179.000000)">
+                <path fill="#FF6026" d="M20.3032,13.4258 C19.7772,13.2588 19.2152,13.5498 19.0472,14.0758 C18.1102,17.0218 15.3522,18.9998 12.1842,18.9998 C8.2222,18.9998 5.0002,15.8598 5.0002,11.9998 C5.0002,8.1408 8.2222,4.9998 12.1842,4.9998 C13.9122,4.9998 15.5422,5.6018 16.8292,6.6698 L14.6632,6.3128 C14.1132,6.2128 13.6032,6.5918 13.5132,7.1358 C13.4232,7.6808 13.7922,8.1958 14.3372,8.2848 L18.5832,8.9868 C18.6382,8.9958 18.6942,8.9998 18.7472,8.9998 C18.8662,8.9998 18.9822,8.9788 19.0902,8.9388 C19.1272,8.9248 19.1572,8.8988 19.1932,8.8798 C19.2592,8.8458 19.3282,8.8158 19.3852,8.7678 C19.4212,8.7388 19.4442,8.6968 19.4752,8.6628 C19.5222,8.6138 19.5722,8.5668 19.6072,8.5068 C19.6322,8.4638 19.6422,8.4128 19.6612,8.3648 C19.6852,8.3058 19.7172,8.2508 19.7292,8.1858 L20.4832,4.1858 C20.5852,3.6428 20.2282,3.1188 19.6852,3.0178 C19.1442,2.9198 18.6192,3.2728 18.5172,3.8148 L18.2452,5.2558 C16.5812,3.8148 14.4482,2.9998 12.1842,2.9998 C7.1202,2.9998 3.0002,7.0368 3.0002,11.9998 C3.0002,16.9628 7.1202,20.9998 12.1842,20.9998 C16.2262,20.9998 19.7502,18.4608 20.9532,14.6818 C21.1202,14.1558 20.8292,13.5938 20.3032,13.4258" id="path-refresh"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1 @@
+export const DEAULT_LOADING_SIZE = 24;

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

@@ -0,0 +1,101 @@
+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 CircularProgress from '@material-ui/core/CircularProgress';
+import React, { memo, useState, Fragment } from 'react';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { object, string } from 'prop-types';
+import UTIcon from '../../../UTIcon';
+import UTMenu from '../../../UTMenu';
+import UTTooltip from '../../../UTTooltip';
+import { columnType, classesType } from '../../types';
+import styles from './styles.module.scss';
+import { DEAULT_LOADING_SIZE } from './constants';
+const ActionIcons = _ref => {
+  let {
+    classes,
+    column,
+    dataTestId,
+    rowData
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Fragment, null, column.actions.map((_ref2, i) => {
+    let {
+      Icon,
+      buttonClassName,
+      disabledIconClassName,
+      disabledTooltip,
+      iconClassName,
+      iconName = '',
+      iconProps,
+      isDisabled = () => false,
+      isLoading = () => false,
+      isVisible = () => true,
+      key,
+      loadingClassName,
+      loadingSize = DEAULT_LOADING_SIZE,
+      menuItems = [],
+      onClick,
+      tooltip,
+      tooltipProps = {},
+      withMenuDivider
+    } = _ref2;
+    const [menuAnchor, setMenuAnchor] = useState();
+    const [menuRowContextData, setMenuRowConextData] = useState();
+    const openMenu = event => setMenuAnchor(event.currentTarget);
+    const closeMenu = () => setMenuAnchor();
+    const handleActionClick = (event, eventRowData) => {
+      if (isEmpty(menuItems)) onClick(eventRowData);else {
+        setMenuRowConextData({
+          ...eventRowData,
+          clickCallback: closeMenu
+        });
+        openMenu(event);
+      }
+    };
+    const visibleMenuItems = menuItems.filter(menuItem => !menuItem.isVisible || menuItem.isVisible(rowData)).map(menuItem => ({
+      ...menuItem,
+      disabled: menuItem.isDisabled && menuItem.isDisabled(rowData)
+    }));
+    const getDisabledTooltip = () => typeof disabledTooltip === 'function' ? disabledTooltip(rowData) : disabledTooltip;
+    const tooltipContent = isDisabled(rowData) && disabledTooltip ? getDisabledTooltip() : tooltip;
+    const tippyProps = {
+      appendTo: () => document.body,
+      interactive: false,
+      ...tooltipProps
+    };
+    return isVisible(rowData) && /*#__PURE__*/React.createElement(UTTooltip, {
+      content: tooltipContent,
+      key: key,
+      stringContentClassName: styles.tooltip,
+      stringContentProps: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.stringContentProps,
+      tippyProps: tippyProps
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.iconButton, " ").concat(classes.actionIconButton, " \n                  ").concat((isDisabled(rowData) || isLoading(rowData)) && styles.disabled, " ").concat(buttonClassName),
+      "data-testid": "".concat(dataTestId, ".").concat(i),
+      onClick: event => handleActionClick(event, rowData),
+      role: "button"
+    }, isLoading(rowData) ? /*#__PURE__*/React.createElement(CircularProgress, {
+      className: "".concat(classes.actionLoading, " ").concat(loadingClassName),
+      size: loadingSize
+    }) : isEmpty(iconName) ? /*#__PURE__*/React.createElement(Icon, {
+      className: "\n                        ".concat(styles.actionIcon, "\n                        ").concat(classes.actionIcon, "\n                        ").concat(iconClassName, "\n                        ").concat(isDisabled(rowData) && disabledIconClassName)
+    }) : /*#__PURE__*/React.createElement(UTIcon, _extends({
+      name: iconName
+    }, iconProps, {
+      className: "".concat(iconClassName, " ").concat(isDisabled(rowData) ? disabledIconClassName : '', " ").concat((iconProps === null || iconProps === void 0 ? void 0 : iconProps.className) || '')
+    }))), !!menuAnchor && !isEmpty(menuItems) && /*#__PURE__*/React.createElement(UTMenu, {
+      anchor: menuAnchor,
+      contextData: menuRowContextData,
+      iconBefore: true,
+      items: visibleMenuItems,
+      onClose: closeMenu,
+      withDivider: withMenuDivider,
+      withMenuItem: true
+    })));
+  }));
+};
+ActionIcons.propTypes = {
+  classes: classesType,
+  column: columnType,
+  rowData: object,
+  dataTestId: string
+};
+export default /*#__PURE__*/memo(ActionIcons);

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

@@ -0,0 +1,27 @@
+.iconButton {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  margin: -4px 0;
+  padding: 8px;
+  transition: 0.5s;
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
+}
+
+.actionIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+
+.disabled {
+  pointer-events: none;
+}
+
+.tooltip {
+  text-align: center;
+}

package/dist/esm/components/UTTable/components/Cell/components/ActionButton/index.js

@@ -0,0 +1,24 @@
+import React, { memo } from 'react';
+import { object } from 'prop-types';
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import UTButton from '../../../../../UTButton';
+import { columnType } from '../../../../types';
+const ActionButton = _ref => {
+  var _column$actions;
+  let {
+    column,
+    rowData
+  } = _ref;
+  const actionConfig = (_column$actions = column.actions) === null || _column$actions === void 0 ? void 0 : _column$actions[0];
+  return !objectIsEmpty(actionConfig) && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: actionConfig.buttonClassNames,
+    key: actionConfig.key,
+    onClick: () => actionConfig.onClick(rowData),
+    variant: "text"
+  }, actionConfig.text);
+};
+ActionButton.propTypes = {
+  column: columnType,
+  rowData: object
+};
+export default /*#__PURE__*/memo(ActionButton);

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

@@ -0,0 +1,60 @@
+import React, { memo } from 'react';
+import { object, string } from 'prop-types';
+import ActionIcons from '../ActionIcons';
+import Status from '../Status';
+import { CELL_TYPES, COLUMN_POSITION } from '../../constants';
+import { classesType, columnSizesType, columnType } from '../../types';
+import ActionButton from './components/ActionButton';
+import styles from './styles.module.scss';
+const Cell = _ref => {
+  let {
+    actionDataTestId,
+    align = COLUMN_POSITION.LEFT,
+    classes,
+    column,
+    columnSizes,
+    dataTestId,
+    defaultNullValue,
+    rowData,
+    style
+  } = _ref;
+  const cellAlignStyles = column.align ? styles["".concat(column.align, "Align")] : [CELL_TYPES.ACTION_ICONS, CELL_TYPES.ACTION_BUTTON].includes(column.type) ? styles.centerAlign : styles["".concat(align, "Align")];
+  const cellStyle = {
+    width: column.withoutPadding ? style.paddingLeft + style.paddingRight + columnSizes[column.key] : columnSizes[column.key],
+    ...style,
+    paddingBottom: column.withoutPadding ? 0 : style.paddingBottom,
+    paddingLeft: column.withoutPadding ? 0 : style.paddingLeft,
+    paddingRight: column.withoutPadding ? 0 : style.paddingRight,
+    paddingTop: column.withoutPadding ? 0 : style.paddingTop
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: " ".concat(styles.rowElement, " ").concat(cellAlignStyles, " ").concat(classes.rowCell),
+    "data-testid": dataTestId,
+    style: cellStyle
+  }, column.cellRenderer ? column.cellRenderer(rowData[column.key], rowData) : column.type === CELL_TYPES.ACTION_BUTTON ? /*#__PURE__*/React.createElement(ActionButton, {
+    column: column,
+    rowData: rowData
+  }) : column.type === CELL_TYPES.ACTION_ICONS ? /*#__PURE__*/React.createElement(ActionIcons, {
+    classes: classes,
+    column: column,
+    dataTestId: actionDataTestId,
+    rowData: rowData
+  }) : column.type === CELL_TYPES.STATUS ? /*#__PURE__*/React.createElement(Status, {
+    classes: classes,
+    definition: column.status,
+    label: rowData[column.labelKey],
+    value: rowData[column.key]
+  }) : /*#__PURE__*/React.createElement("span", null, rowData[column.key] || defaultNullValue));
+};
+Cell.propTypes = {
+  actionDataTestId: string,
+  align: string,
+  classes: classesType,
+  column: columnType,
+  columnSizes: columnSizesType,
+  dataTestId: string,
+  defaultNullValue: string,
+  rowData: object,
+  style: object
+};
+export default /*#__PURE__*/memo(Cell);

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

@@ -0,0 +1,21 @@
+.rowElement {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.leftAlign {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.rightAlign {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.centerAlign {
+  justify-content: center;
+  text-align: center;
+}

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

@@ -0,0 +1,4 @@
+export const ORDER_DIRECTION = {
+  ASC: 'asc',
+  DESC: 'desc'
+};

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

@@ -0,0 +1,60 @@
+import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
+import React, { memo } from 'react';
+import UnfoldMoreIcon from '@material-ui/icons/UnfoldMore';
+import { bool, func, object, shape, string } from 'prop-types';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { CELL_ACTION_TYPES, CELL_TYPES, COLUMN_POSITION } from '../../constants';
+import { classesType, columnSizesType, columnType } from '../../types';
+import styles from './styles.module.scss';
+import { getNewOrder } from './utils';
+import { ORDER_DIRECTION } from './constants';
+const HeaderCell = _ref => {
+  let {
+    align = COLUMN_POSITION.LEFT,
+    classes,
+    column,
+    columnSizes,
+    dataTestId,
+    handleOrder,
+    order,
+    removeDefaultOrderIcon,
+    style
+  } = _ref;
+  const handleClick = () => handleOrder(getNewOrder(order, column));
+  const OrderICon = order.key !== column.key ? UnfoldMoreIcon : ArrowUpwardIcon;
+  const cellAlignStyles = column.align ? styles["".concat(column.align, "Align")] : [CELL_TYPES.ACTION_ICONS, CELL_TYPES.ACTION_BUTTON].includes(column.type) ? styles.centerAlign : styles["".concat(align, "Align")];
+  const activeCell = order.key === column.key;
+  const isSortable = column.sortable && !CELL_ACTION_TYPES.includes(column.type);
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "\n      ".concat(styles.rowElement, "\n      ").concat(isSortable ? classes.headerCellHover : styles.disableClick, "\n      ").concat(cellAlignStyles, "\n      ").concat(classes.headerCell, "\n      ").concat(activeCell ? classes.headerActiveCell : classes.headerInactiveCell, "\n      "),
+    dataTestId: dataTestId,
+    onClick: isSortable ? handleClick : null,
+    style: {
+      width: columnSizes[column.key],
+      ...style
+    }
+  }, /*#__PURE__*/React.createElement("div", null, column.categoryName && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerCellCategoryName, " ").concat(classes.headerCellCategoryName)
+  }, column.categoryName), /*#__PURE__*/React.createElement("span", {
+    className: styles.headerCellName
+  }, column.name), column.unit && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.unit, " ").concat(classes.headerCellUnit)
+  }, column.unit)), isSortable && /*#__PURE__*/React.createElement(OrderICon, {
+    className: "\n            ".concat(styles.orderIcon, "\n            ").concat(classes.orderIcon, "\n            ").concat(order.key !== column.key && removeDefaultOrderIcon && styles.hideIcon, "\n            ").concat(order.direction === ORDER_DIRECTION.DESC && styles.invertArrow, "\n          ")
+  }));
+};
+HeaderCell.propTypes = {
+  align: string,
+  classes: classesType,
+  column: columnType,
+  columnSizes: columnSizesType,
+  dataTestId: string,
+  handleOrder: func,
+  order: shape({
+    key: string,
+    direction: string
+  }),
+  removeDefaultOrderIcon: bool,
+  style: object
+};
+export default /*#__PURE__*/memo(HeaderCell);

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

@@ -0,0 +1,74 @@
+.rowElement {
+  align-items: flex-end;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-start;
+
+  &:hover {
+    .hideIcon {
+      opacity: 0.6;
+    }
+  }
+}
+
+.headerCellName {
+  color: inherit !important;
+  font-weight: inherit !important;
+  position: relative;
+}
+
+.orderIcon {
+  font-size: 20px;
+}
+
+.invertArrow {
+  transform: rotate(180deg);
+}
+
+.hidden {
+  display: none;
+}
+
+.hideIcon {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.leftAlign {
+  text-align: left;
+
+  .orderIcon {
+    margin-left: 4px;
+  }
+}
+
+.rightAlign {
+  flex-direction: row-reverse;
+  text-align: right;
+
+  .orderIcon {
+    margin-right: 4px;
+  }
+}
+
+.centerAlign {
+  justify-content: center;
+  text-align: center;
+}
+
+.disableClick {
+  pointer-events: none;
+}
+
+.name {
+  color: inherit;
+}
+
+.unit {
+  color: inherit;
+  position: relative;
+}
+
+.headerCellCategoryName {
+  position: relative;
+}

package/dist/esm/components/UTTable/components/HeaderCell/utils.js

@@ -0,0 +1,9 @@
+import { ORDER_DIRECTION } from './constants';
+export const getNewOrder = (order, column) => {
+  if (order.key === column.key && order.direction === ORDER_DIRECTION.DESC) return {};
+  const direction = order.key === column.key && order.direction === ORDER_DIRECTION.ASC ? ORDER_DIRECTION.DESC : ORDER_DIRECTION.ASC;
+  return {
+    direction,
+    key: column.key
+  };
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { bool, object, objectOf, string } from 'prop-types';
+import ActionIcons from '../ActionIcons';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { columnType } from '../../types';
+import styles from './styles.module.scss';
+const PrimaryAction = _ref => {
+  let {
+    actionDataTestId,
+    classes,
+    column,
+    rowData,
+    showBottomBorder
+  } = _ref;
+  const {
+    onClick
+  } = column;
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(classes.actionCell, " ").concat(showBottomBorder ? "".concat(styles.lastCellContainer, " ").concat(classes.lastCellContainer) : styles.cellContainer),
+    onClick: () => onClick(rowData)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.columnName
+  }, " ", column.name, " "), column.actions && /*#__PURE__*/React.createElement(ActionIcons, {
+    classes: classes,
+    column: column,
+    dataTestId: "".concat(actionDataTestId, ".primaryAction"),
+    rowData: rowData
+  }));
+};
+PrimaryAction.propTypes = {
+  actionDataTestId: string,
+  classes: objectOf(string),
+  column: columnType,
+  rowData: object,
+  showBottomBorder: bool
+};
+export default PrimaryAction;

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

@@ -0,0 +1,18 @@
+%cellContainer {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+}
+
+.cellContainer {
+  @extend %cellContainer;
+  border-bottom: 0;
+}
+
+.lastCellContainer {
+  @extend %cellContainer;
+}
+
+.columnName {
+  margin-right: 10px;
+}

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

@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react';
+import { object, bool, string } from 'prop-types';
+import { columnType, classesType } from '../../types';
+import { COLUMN_SIZES, CELL_TYPES } from '../../constants';
+import Status from '../Status';
+import styles from './styles.module.scss';
+const ResponsiveCell = _ref => {
+  let {
+    classes,
+    column,
+    dataTestId,
+    defaultNullValue,
+    rowData,
+    rowStyles,
+    showBottomBorder
+  } = _ref;
+  const isBigCell = COLUMN_SIZES[column.size] > COLUMN_SIZES.medium || column.cellRenderer && !column.asRowInResponsive || column.type === CELL_TYPES.STATUS;
+  return /*#__PURE__*/React.createElement(Fragment, null, column.categoryName && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.categoryName, " ").concat(classes.categoryNameCell),
+    style: {
+      ...rowStyles.responsiveCell
+    }
+  }, column.categoryName), /*#__PURE__*/React.createElement("div", {
+    "data-testid": dataTestId,
+    className: "".concat(showBottomBorder ? "".concat(styles.lastCellContainer, " ").concat(classes.lastCellContainer) : styles.cellContainer, " ").concat(classes.responsiveCell, " ").concat(isBigCell ? styles.bigCell : styles.smallCell),
+    style: {
+      ...rowStyles.responsiveCell
+    }
+  }, (column.name || column.unit) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(isBigCell ? styles.bigCellInfoContainer : styles.infoContainer, " ").concat(classes.responsiveCellTitle)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.columnName
+  }, column.name), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.unit, " ").concat(classes.headerCellUnit)
+  }, " ", column.unit, " ")), column.cellRenderer ? column.cellRenderer(rowData[column.key], rowData) : column.type === CELL_TYPES.STATUS ? /*#__PURE__*/React.createElement(Status, {
+    classes: classes,
+    definition: column.status,
+    label: rowData[column.labelKey],
+    value: rowData[column.key]
+  }) : typeof rowData[column.key] !== 'string' ? rowData[column.key] || defaultNullValue : /*#__PURE__*/React.createElement("span", null, rowData[column.key] || defaultNullValue)));
+};
+ResponsiveCell.propTypes = {
+  column: columnType,
+  classes: classesType,
+  rowData: object,
+  rowStyles: object,
+  showBottomBorder: bool,
+  defaultNullValue: string,
+  dataTestId: string
+};
+export default ResponsiveCell;

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

@@ -0,0 +1,45 @@
+%cellContainer {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.cellContainer {
+  @extend %cellContainer;
+  border-bottom: 0;
+}
+
+.lastCellContainer {
+  @extend %cellContainer;
+}
+
+.bigCell {
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.smallCell {
+  justify-content: space-between;
+}
+
+.bigCellInfoContainer {
+  margin: 0 4px 10px 0;
+}
+
+.infoContainer {
+  margin: auto 0;
+}
+
+.columnName {
+  margin-right: 10px;
+}
+
+.unit {
+  color: inherit;
+  position: relative;
+}
+
+.categoryName {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import { arrayOf, string, shape, oneOfType, bool } from 'prop-types';
+import { stringCompare } from '@widergy/web-utils/lib/string';
+import styles from './styles.module.scss';
+const Status = _ref => {
+  let {
+    definition,
+    label,
+    value
+  } = _ref;
+  const isBool = typeof value === 'boolean';
+  const currentDefinition = (isBool || value) && definition.find(el => isBool ? el.value === value : el.value && stringCompare(el.value, value));
+  const {
+    className,
+    label: definitionLabel,
+    Icon,
+    iconClassName,
+    labelClassName
+  } = currentDefinition || {};
+  return currentDefinition && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.statusContainer, " ").concat(className)
+  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+    className: iconClassName
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.statusLabel, " ").concat(labelClassName)
+  }, definitionLabel || label || value));
+};
+Status.propTypes = {
+  definition: arrayOf(shape({
+    value: oneOfType([bool, string]),
+    label: string,
+    backgroundColor: string,
+    textColor: string
+  })),
+  label: string,
+  value: oneOfType([bool, string])
+};
+export default /*#__PURE__*/memo(Status);

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

@@ -0,0 +1,12 @@
+.statusContainer {
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 12px;
+  text-align: center;
+}
+
+.statusLabel {
+  color: inherit;
+  position: relative;
+}