@widergy/energy-ui 3.21.2 → 3.22.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.22.0](https://github.com/widergy/energy-ui/compare/v3.21.2...v3.22.0) (2024-09-24)
+
+
+### Features
+
+* utpanel v1 ([#491](https://github.com/widergy/energy-ui/issues/491)) ([353d235](https://github.com/widergy/energy-ui/commit/353d2355f923d56e2ab667312e074dc809c6e2c7))
+
 ## [3.21.2](https://github.com/widergy/energy-ui/compare/v3.21.1...v3.21.2) (2024-09-23)
 
 

package/dist/components/UTPanel/index.js

@@ -5,100 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _SwipeableDrawer = _interopRequireDefault(require("@material-ui/core/SwipeableDrawer"));
-require("react-perfect-scrollbar/dist/css/styles.css");
-var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _propTypes = require("prop-types");
-var _UTButton = _interopRequireDefault(require("../UTButton"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _commonTypes = require("../../types/commonTypes");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
 const UTPanel = _ref => {
   let {
-    children,
-    classes = {},
-    containerRef,
-    disableScrollbar = false,
-    modalProps,
-    onClose,
-    onEndReachedCallback,
-    onOpen = () => {},
-    open,
-    panelSide,
-    perfectScrollbarOptions,
-    title,
-    TitleComponent,
-    TitleIcon,
+    version = 'V0',
     ...props
   } = _ref;
-  const {
-    title: titleClass,
-    titleIcon: titleIconClass,
-    titleContainer: titleContainerClass,
-    perfectScrollbar: perfectScrollbarClass,
-    closeButton: closeButtonClass,
-    iconClose: iconCloseClass,
-    ...drawerClasses
-  } = classes;
-  return /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, _extends({
-    anchor: panelSide,
-    open: open,
-    onOpen: onOpen,
-    onClose: onClose,
-    disableSwipeToOpen: true,
-    swipeAreaWidth: 0,
-    ModalProps: {
-      container: containerRef,
-      keepMounted: !!containerRef,
-      ...modalProps
-    },
-    classes: {
-      ...drawerClasses,
-      paper: `${_stylesModule.default.paper} ${drawerClasses.paper}`,
-      root: `${containerRef && _stylesModule.default.root} ${drawerClasses.root}`
-    }
-  }, props), /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_stylesModule.default.titleContainer} ${titleContainerClass}`
-  }, TitleComponent || /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.iconTitleContainer
-  }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
-    className: `${_stylesModule.default.titleIcon} ${titleIconClass}`
-  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    weight: "semibold",
-    className: classes.title
-  }, title)), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-    classNames: {
-      icon: iconCloseClass,
-      root: closeButtonClass
-    },
-    Icon: _Close.default,
-    onClick: onClose,
-    variant: "text"
-  })), disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
-    onYReachEnd: onEndReachedCallback,
-    className: `${_stylesModule.default.perfectScrollbar} ${perfectScrollbarClass}`,
-    options: {
-      suppressScrollX: true,
-      ...perfectScrollbarOptions
-    }
-  }, children));
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTPanel.propTypes = {
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  containerRef: _commonTypes.refType,
-  disableScrollbar: _propTypes.bool,
-  modalProps: _propTypes.object,
-  onClose: _propTypes.func,
-  onEndReachedCallback: _propTypes.func,
-  onOpen: _propTypes.func,
-  open: _propTypes.bool,
-  panelSide: _propTypes.string,
-  perfectScrollbarOptions: _propTypes.object,
-  title: _propTypes.string,
-  TitleComponent: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.elementType]),
-  TitleIcon: _propTypes.elementType
+  version: _propTypes.string
 };
 var _default = exports.default = UTPanel;

package/dist/components/UTPanel/versions/V0/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SwipeableDrawer = _interopRequireDefault(require("@material-ui/core/SwipeableDrawer"));
+require("react-perfect-scrollbar/dist/css/styles.css");
+var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _commonTypes = require("../../../../types/commonTypes");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const UTPanel = _ref => {
+  let {
+    children,
+    classes = {},
+    containerRef,
+    disableScrollbar = false,
+    modalProps,
+    onClose,
+    onEndReachedCallback,
+    onOpen = () => {},
+    open,
+    panelSide,
+    perfectScrollbarOptions,
+    title,
+    TitleComponent,
+    TitleIcon,
+    ...props
+  } = _ref;
+  const {
+    title: titleClass,
+    titleIcon: titleIconClass,
+    titleContainer: titleContainerClass,
+    perfectScrollbar: perfectScrollbarClass,
+    closeButton: closeButtonClass,
+    iconClose: iconCloseClass,
+    ...drawerClasses
+  } = classes;
+  return /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, _extends({
+    anchor: panelSide,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    disableSwipeToOpen: true,
+    swipeAreaWidth: 0,
+    ModalProps: {
+      container: containerRef,
+      keepMounted: !!containerRef,
+      ...modalProps
+    },
+    classes: {
+      ...drawerClasses,
+      paper: `${_stylesModule.default.paper} ${drawerClasses.paper}`,
+      root: `${containerRef && _stylesModule.default.root} ${drawerClasses.root}`
+    }
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.titleContainer} ${titleContainerClass}`
+  }, TitleComponent || /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.iconTitleContainer
+  }, TitleIcon && /*#__PURE__*/_react.default.createElement(TitleIcon, {
+    className: `${_stylesModule.default.titleIcon} ${titleIconClass}`
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "semibold",
+    className: classes.title
+  }, title)), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: iconCloseClass,
+      root: closeButtonClass
+    },
+    Icon: _Close.default,
+    onClick: onClose,
+    variant: "text"
+  })), disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    onYReachEnd: onEndReachedCallback,
+    className: `${_stylesModule.default.perfectScrollbar} ${perfectScrollbarClass}`,
+    options: {
+      suppressScrollX: true,
+      ...perfectScrollbarOptions
+    }
+  }, children));
+};
+UTPanel.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  containerRef: _commonTypes.refType,
+  disableScrollbar: _propTypes.bool,
+  modalProps: _propTypes.object,
+  onClose: _propTypes.func,
+  onEndReachedCallback: _propTypes.func,
+  onOpen: _propTypes.func,
+  open: _propTypes.bool,
+  panelSide: _propTypes.string,
+  perfectScrollbarOptions: _propTypes.object,
+  title: _propTypes.string,
+  TitleComponent: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.elementType]),
+  TitleIcon: _propTypes.elementType
+};
+var _default = exports.default = UTPanel;

package/dist/components/UTPanel/versions/V1/README.md

@@ -0,0 +1,36 @@
+# UTPanel
+
+Component used for displaying a side panel.
+
+## Props
+
+| Name                        | Type   | Default  | Description                                                                                                                                                                      |
+| :-------------------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children                    | node   |          | Component content                                                                                                                                                                |
+| classes                     | object |          | Classes returned by UTPanel own[theme](./theme.js#L40) `retrieveStyle` and classes received from props.                                                                          |
+| classNames                  | object |          | Overrides the default panel theme.                                                                                                                                               |
+| collapsableHeader           | bool   | true     | Indicates if "header items" section is collapsible.                                                                                                                              |
+| currentStep                 | number | 1        | Workflow step number used to show the current progress in the UTProgressBar                                                                                                      |
+| disableScrollbar            | bool   | false    | Render the children without scrollbar                                                                                                                                            |
+| HeaderComponent             | node   |          | Custom header to render.                                                                                                                                                         |
+| headerItems                 | array  |          | Array of items (object) to show in "header items" section. Each item should have: "title" - String, "icon" - String, "value" - String                                            |
+| headerMainActionButton      | object |          | Object with header main button details: "callBack" - func // "colorTheme" - string - deafult: 'primary' // "text" - string // "variant" - string - default: 'semitransparent'    |
+| headerSecondaryActionButton | object |          | Object with header secondary button details:<br /> "callBack" - func // "colorTheme" - string - default: "success" // "text" - string // "variant" - string - ddefault: "filled" |
+| hideCloseButton             | bool   | false    | Indicates whether the close button is hide or not                                                                                                                                |
+| hideHeader                  | bool   | false    | Indicates whether the entire header is hide or not                                                                                                                               |
+| hideMainButton              | bool   | false    | Indicates whether the main (bottom) button is hide or not                                                                                                                        |
+| isWorkflow                  | bool   | false    | Indicates if the panel children's content a workflow. This prop activates the progress bar.                                                                                      |
+| mainButton                  | object |          | [UTButton props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTButton)                                                                                   |
+| modalProps                  | object |          | Material UI[modal props](https://v4.mui.com/api/modal/)                                                                                                                          |
+| onClose                     | func   |          | Callback to execute when closing panel.                                                                                                                                          |
+| onEndReachedCallback        | func   |          | Callback to execute when reaching the end of the vertical scroll                                                                                                                 |
+| onOpen                      | func   | () => {} | Callback to execute when opening panel.                                                                                                                                          |
+| open                        | bool   |          | Indicates whether the panel is open or not                                                                                                                                       |
+| panelSide                   | string |          | Indicates panel side.                                                                                                                                                            |
+| perfectScrollbarOptions     | object |          | [Perfect scrollbar](https://www.npmjs.com/package/react-perfect-scrollbar) props                                                                                                 |
+| singleHeaderItemsColumn     | bool   | false    | Indicates whether the header items are shown in a single column or not                                                                                                           |
+| size                        | string | 'M'      | Indicates the size of panel. Currently we have two options:<br /> L -> 800px<br /> M -> 450px                                                                                    |
+| stepsCount                  | Number |          | Indicates the total steps in case of workflow                                                                                                                                    |
+| subtitle                    | string |          | Subtitle to show                                                                                                                                                                 |
+| title                       | string |          | Title to show                                                                                                                                                                    |
+| titleProps                  | object | {}       | UTLabel props for title. Default props: variant="title2" weight="medium"                                                                                                         |

package/dist/components/UTPanel/versions/V1/components/DataItem/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = void 0;
+const SIZES = exports.SIZES = {
+  L: 'large',
+  M: 'medium'
+};

package/dist/components/UTPanel/versions/V1/components/DataItem/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DataItem = _ref => {
+  let {
+    size = 'M',
+    value,
+    icon,
+    title
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.container} ${_stylesModule.default[_constants.SIZES[size]]}`
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    className: _stylesModule.default.icon,
+    colorTheme: "gray",
+    name: icon
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.textContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    weight: "medium"
+  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, null, value)));
+};
+DataItem.propTypes = {
+  icon: _propTypes.string,
+  size: _propTypes.string,
+  title: _propTypes.string,
+  value: _propTypes.string
+};
+var _default = exports.default = DataItem;

package/dist/components/UTPanel/versions/V1/components/DataItem/styles.module.scss

@@ -0,0 +1,20 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex: 50%;
+}
+
+.textContainer {
+  display: flex;
+  grid-gap: 8px;
+}
+
+.large {
+  grid-gap: 16px;
+  padding: 16px 0;
+}
+
+.medium {
+  grid-gap: 8px;
+  padding: 8px 0;
+}

package/dist/components/UTPanel/versions/V1/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.ACCEPT_BUTTON_TEXT = void 0;
+const SIZES = exports.SIZES = {
+  L: 'large',
+  M: 'medium'
+};
+const ACCEPT_BUTTON_TEXT = exports.ACCEPT_BUTTON_TEXT = 'Aceptar';

package/dist/components/UTPanel/versions/V1/index.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SwipeableDrawer = _interopRequireDefault(require("@material-ui/core/SwipeableDrawer"));
+require("react-perfect-scrollbar/dist/css/styles.css");
+var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
+var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _index = _interopRequireDefault(require("../../../UTProgressBar/index.js"));
+var _classesUtils = require("../../../../utils/classesUtils.js");
+var _index2 = _interopRequireDefault(require("../../../WithTheme/index.js"));
+var _DataItem = _interopRequireDefault(require("./components/DataItem"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants.js");
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const UTPanel = _ref => {
+  let {
+    children,
+    classes: theme,
+    classNames,
+    collapsableHeader = true,
+    currentStep = 1,
+    disableScrollbar = false,
+    HeaderComponent,
+    headerItems,
+    headerMainActionButton = {},
+    headerSecondaryActionButton = {},
+    hideCloseButton = false,
+    hideHeader = false,
+    hideMainButton = false,
+    isWorkflow = false,
+    mainButton = {},
+    modalProps,
+    onClose,
+    onEndReachedCallback,
+    onOpen = () => {},
+    open,
+    panelSide,
+    perfectScrollbarOptions,
+    singleHeaderItemsColumn = false,
+    size = 'M',
+    stepsCount,
+    subtitle = '',
+    title = '',
+    titleProps = {},
+    ...props
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
+  const [collapseHeader, setCollapseHeader] = (0, _react.useState)(true);
+  const {
+    closeButton: closeButtonClass,
+    headerContainer: headerContainerClass,
+    iconClose: iconCloseClass,
+    perfectScrollbar: perfectScrollbarClass,
+    title: titleClass,
+    ...drawerClasses
+  } = classes;
+  return /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, _extends({
+    anchor: panelSide,
+    classes: {
+      ...drawerClasses,
+      paper: `${_stylesModule.default.paper} ${drawerClasses.paper} ${_stylesModule.default[_constants.SIZES[size]]}`,
+      root: drawerClasses.root
+    },
+    disableSwipeToOpen: true,
+    ModalProps: {
+      ...modalProps
+    },
+    onClose: onClose,
+    onOpen: onOpen,
+    open: open,
+    swipeAreaWidth: 0
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.controlAreaContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.controlAreaBar
+  }, !hideCloseButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      icon: iconCloseClass,
+      root: closeButtonClass
+    },
+    Icon: "IconX",
+    onClick: onClose,
+    variant: "text"
+  })), isWorkflow && /*#__PURE__*/_react.default.createElement(_index.default, {
+    classNames: {
+      barColorPrimary: classes.barColorPrimary,
+      container: _stylesModule.default.progressBarContainer,
+      colorPrimary: classes.colorPrimary
+    },
+    value: currentStep * 100 / stepsCount
+  })), !hideHeader && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.headerContainer} ${headerContainerClass}`
+  }, HeaderComponent || /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.headerArea
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.headerLeftArea
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titleArea
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: classes.title,
+    variant: "title2",
+    weight: "medium"
+  }, titleProps), title), collapsableHeader && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    Icon: collapseHeader ? 'IconChevronUp' : 'IconChevronDown',
+    onClick: () => setCollapseHeader(!collapseHeader),
+    size: "small",
+    variant: "text"
+  })), subtitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.subtitleArea
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray"
+  }, subtitle))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.headerRightArea
+  }, !(0, _isEmpty.default)(headerSecondaryActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: headerSecondaryActionButton.colorTheme || 'primary',
+    onClick: headerSecondaryActionButton.callBack,
+    variant: headerSecondaryActionButton.variant || 'semitransparent'
+  }, headerSecondaryActionButton.text), !(0, _isEmpty.default)(headerMainActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: headerMainActionButton.colorTheme || 'success',
+    onClick: headerMainActionButton.callBack,
+    variant: headerMainActionButton.variant || 'filled'
+  }, headerMainActionButton.text)))), !(0, _isEmpty.default)(headerItems) && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.headerItemsContainer} 
+          ${collapseHeader ? _stylesModule.default.expandedContainer : _stylesModule.default.collapsedContainer} 
+          ${singleHeaderItemsColumn && _stylesModule.default.singleHeaderItemsColumn || ''}`
+  }, headerItems.map(_DataItem.default)), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${_stylesModule.default.bodyContainer} ${classes.bodyContainer}`
+  }, disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+    className: `${_stylesModule.default.perfectScrollbar} ${perfectScrollbarClass}`,
+    onYReachEnd: onEndReachedCallback,
+    options: {
+      suppressScrollX: true,
+      ...perfectScrollbarOptions
+    }
+  }, children)), !hideMainButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    classNames: {
+      root: _stylesModule.default.mainButton
+    },
+    size: "large"
+  }, mainButton), mainButton?.text || _constants.ACCEPT_BUTTON_TEXT));
+};
+UTPanel.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: _propTypes.object,
+  collapsableHeader: _propTypes.bool,
+  currentStep: _propTypes.number,
+  disableScrollbar: _propTypes.bool,
+  HeaderComponent: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.elementType]),
+  headerItems: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    title: _propTypes.string,
+    icon: _propTypes.string,
+    value: _propTypes.string
+  })),
+  headerMainActionButton: (0, _propTypes.shape)({
+    callBack: _propTypes.func,
+    colorTheme: _propTypes.string,
+    text: _propTypes.string,
+    variant: _propTypes.string
+  }),
+  headerSecondaryActionButton: (0, _propTypes.shape)({
+    callBack: _propTypes.func,
+    colorTheme: _propTypes.string,
+    text: _propTypes.string,
+    variant: _propTypes.string
+  }),
+  isWorkflow: _propTypes.bool,
+  mainButton: _propTypes.object,
+  modalProps: _propTypes.object,
+  onClose: _propTypes.func,
+  onEndReachedCallback: _propTypes.func,
+  onOpen: _propTypes.func,
+  open: _propTypes.bool,
+  panelSide: _propTypes.string,
+  perfectScrollbarOptions: _propTypes.object,
+  hideCloseButton: _propTypes.bool,
+  hideMainButton: _propTypes.bool,
+  hideHeader: _propTypes.bool,
+  singleHeaderItemsColumn: _propTypes.bool,
+  size: _propTypes.string,
+  stepsCount: _propTypes.number,
+  subtitle: _propTypes.string,
+  title: _propTypes.string,
+  titleProps: _propTypes.object
+};
+var _default = exports.default = (0, _index2.default)(_theme.retrieveStyle)(UTPanel);

package/dist/components/UTPanel/versions/V1/styles.module.scss

@@ -0,0 +1,113 @@
+$large-panel-size: 600px;
+$medium-panel-size: 450px;
+
+.paper {
+  display: flex;
+  height: calc(100% - 20px);
+  position: absolute;
+}
+
+.controlAreaBar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+
+.controlAreaContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.headerContainer {
+  padding: 8px 24px;
+}
+
+.headerArea {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.headerLeftArea {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.headerRightArea {
+  display: flex;
+  grid-gap: 8px;
+}
+
+.titleArea {
+  align-items: center;
+  display: flex;
+  grid-gap: 12px;
+}
+
+.subtitleArea {
+  display: flex;
+}
+
+.singleHeaderItemsColumn {
+  display: block !important;
+}
+
+.headerItemsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 24px;
+  transition:
+    max-height 0.08s ease,
+    opacity 0.08s ease,
+    margin-top 0.08s ease;
+
+  max-height: 100%;
+  margin-top: 0;
+}
+
+.expandedContainer {
+  opacity: 1;
+  max-height: 100%;
+}
+
+.collapsedContainer {
+  opacity: 0;
+  max-height: 0;
+  margin-top: -16px;
+}
+
+.large {
+  width: $large-panel-size;
+}
+
+.medium {
+  width: $medium-panel-size;
+}
+
+.progressBar {
+  height: 8px;
+}
+
+.bodyContainer {
+  padding: 24px;
+}
+
+.perfectScrollbar {
+  margin: 10px 0;
+}
+
+.root {
+  position: absolute !important;
+}
+
+.progressBarContainer {
+  margin-bottom: 16px;
+}
+
+.mainButton {
+  border-radius: 0 !important;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

package/dist/components/UTPanel/versions/V1/theme.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _seamlessImmutable = require("seamless-immutable");
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    barColorPrimary: {
+      background: (0, _seamlessImmutable.getIn)(theme, ['UTPanel', 'progressBar', 'barColorPrimary', 'background'], 'linear-gradient(90deg, #25E0A6 0%, #20BBFC 100%) !important')
+    },
+    colorPrimary: {
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTPanel', 'progressBar', 'colorPrimary', 'backgroundColor'], `${theme.Palette.light['04']} !important`)
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.21.2",
+  "version": "3.22.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",