@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTPanel/index.js

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

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

@@ -1 +1,108 @@
-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 React from"react";import SwipeableDrawer from"@material-ui/core/SwipeableDrawer";import"react-perfect-scrollbar/dist/css/styles.css";import PerfectScrollbar from"react-perfect-scrollbar";import Close from"@material-ui/icons/Close";import{bool,func,string,elementType,objectOf,object,oneOfType,element}from"prop-types";import UTButton from"../../../UTButton";import UTLabel from"../../../UTLabel";import{TEST_IDS}from"../../../../constants/testIds";import{refType}from"../../../../types/commonTypes";import styles from"./styles.module.scss";const{panel:panel}=TEST_IDS,UTPanel=_ref=>{let{children:children,classes:classes={},closeButtonDataTestId:closeButtonDataTestId=panel.closeButton,containerRef:containerRef,disableScrollbar:disableScrollbar=!1,modalProps:modalProps,onClose:onClose,onEndReachedCallback:onEndReachedCallback,onOpen:onOpen=()=>{},open:open,panelSide:panelSide,perfectScrollbarOptions:perfectScrollbarOptions,title:title,TitleComponent:TitleComponent,titleDataTestId:titleDataTestId=panel.title,TitleIcon:TitleIcon,...props}=_ref;const{title:titleClass,titleIcon:titleIconClass,titleContainer:titleContainerClass,perfectScrollbar:perfectScrollbarClass,closeButton:closeButtonClass,iconClose:iconCloseClass,...drawerClasses}=classes;return React.createElement(SwipeableDrawer,_extends({anchor:panelSide,open:open,onOpen:onOpen,onClose:onClose,disableSwipeToOpen:!0,swipeAreaWidth:0,ModalProps:{container:containerRef,keepMounted:!!containerRef,...modalProps},classes:{...drawerClasses,paper:"".concat(styles.paper," ").concat(drawerClasses.paper),root:"".concat(containerRef&&styles.root," ").concat(drawerClasses.root)}},props),React.createElement("div",{className:"".concat(styles.titleContainer," ").concat(titleContainerClass)},TitleComponent||React.createElement("div",{className:styles.iconTitleContainer},TitleIcon&&React.createElement(TitleIcon,{className:"".concat(styles.titleIcon," ").concat(titleIconClass)}),React.createElement(UTLabel,{className:classes.title,dataTestId:titleDataTestId,weight:"semibold"},title)),React.createElement(UTButton,{classNames:{icon:iconCloseClass,root:closeButtonClass},dataTestId:closeButtonDataTestId,Icon:Close,onClick:onClose,variant:"text"})),disableScrollbar?children:React.createElement(PerfectScrollbar,{onYReachEnd:onEndReachedCallback,className:perfectScrollbarClass,options:{suppressScrollX:!0,...perfectScrollbarOptions}},children))};UTPanel.propTypes={classes:objectOf(string),closeButtonDataTestId:string,containerRef:refType,disableScrollbar:bool,modalProps:object,onClose:func,onEndReachedCallback:func,onOpen:func,open:bool,panelSide:string,perfectScrollbarOptions:object,title:string,TitleComponent:oneOfType([element,elementType]),titleDataTestId:string,TitleIcon:elementType};export default UTPanel;
+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); }
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import Close from '@material-ui/icons/Close';
+import { bool, func, string, elementType, objectOf, object, oneOfType, element } from 'prop-types';
+import UTButton from '../../../UTButton';
+import UTLabel from '../../../UTLabel';
+import { TEST_IDS } from '../../../../constants/testIds';
+import { refType } from '../../../../types/commonTypes';
+import styles from './styles.module.scss';
+const {
+  panel
+} = TEST_IDS;
+const UTPanel = _ref => {
+  let {
+    children,
+    classes = {},
+    closeButtonDataTestId = panel.closeButton,
+    containerRef,
+    disableScrollbar = false,
+    modalProps,
+    onClose,
+    onEndReachedCallback,
+    onOpen = () => {},
+    open,
+    panelSide,
+    perfectScrollbarOptions,
+    title,
+    TitleComponent,
+    titleDataTestId = panel.title,
+    TitleIcon,
+    ...props
+  } = _ref;
+  const {
+    title: titleClass,
+    titleIcon: titleIconClass,
+    titleContainer: titleContainerClass,
+    perfectScrollbar: perfectScrollbarClass,
+    closeButton: closeButtonClass,
+    iconClose: iconCloseClass,
+    ...drawerClasses
+  } = classes;
+  return /*#__PURE__*/React.createElement(SwipeableDrawer, _extends({
+    anchor: panelSide,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    disableSwipeToOpen: true,
+    swipeAreaWidth: 0,
+    ModalProps: {
+      container: containerRef,
+      keepMounted: !!containerRef,
+      ...modalProps
+    },
+    classes: {
+      ...drawerClasses,
+      paper: "".concat(styles.paper, " ").concat(drawerClasses.paper),
+      root: "".concat(containerRef && styles.root, " ").concat(drawerClasses.root)
+    }
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.titleContainer, " ").concat(titleContainerClass)
+  }, TitleComponent || /*#__PURE__*/React.createElement("div", {
+    className: styles.iconTitleContainer
+  }, TitleIcon && /*#__PURE__*/React.createElement(TitleIcon, {
+    className: "".concat(styles.titleIcon, " ").concat(titleIconClass)
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.title,
+    dataTestId: titleDataTestId,
+    weight: "semibold"
+  }, title)), /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: iconCloseClass,
+      root: closeButtonClass
+    },
+    dataTestId: closeButtonDataTestId,
+    Icon: Close,
+    onClick: onClose,
+    variant: "text"
+  })), disableScrollbar ? children : /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    onYReachEnd: onEndReachedCallback,
+    className: perfectScrollbarClass,
+    options: {
+      suppressScrollX: true,
+      ...perfectScrollbarOptions
+    }
+  }, children));
+};
+UTPanel.propTypes = {
+  classes: objectOf(string),
+  closeButtonDataTestId: string,
+  containerRef: refType,
+  disableScrollbar: bool,
+  modalProps: object,
+  onClose: func,
+  onEndReachedCallback: func,
+  onOpen: func,
+  open: bool,
+  panelSide: string,
+  perfectScrollbarOptions: object,
+  title: string,
+  TitleComponent: oneOfType([element, elementType]),
+  titleDataTestId: string,
+  TitleIcon: elementType
+};
+export default UTPanel;

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

@@ -0,0 +1,60 @@
+# 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. headerMainActionButton                                                                                                                                                      |
+| collapsableHeader           | bool    | false    | 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: "colorTheme" - string - deafult: 'primary' // "variant" - string - default: 'semitransparent'<br />// This prop will be spread so that it supports any UTButton props. |
+| headerSecondaryActionButton | object  |          | Object with header secondary button details: "colorTheme" - string - default: "success" // "variant" - string - default: "filled" // This prop will be spread so that it supports any UTButton props.          |
+| 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                                                                                                                                               |
+| onGoBack                    | func    | () => {} | Callback to execute when goBackButton is used                                                                                                                                                                  |
+| 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"                                                                                                                                       |
+| collapsablePanel            | bool    | false    | Indicates if panel can be collapsed when inline mode is enabled                                                                                                                                                |
+| inline                      | bool    | false    | Indicates if panel should be rendered inline instead of as a modal                                                                                                                                             |
+| paginationProps             | object  | {}       | Object containing pagination configuration: nextButton (UTButton props), backButton (UTButton props), currentPage (number), totalPages (number)                                                                |
+| showMainStatus              | bool    | false    | Shows a status indicator next to the title                                                                                                                                                                     |
+| showPagination              | bool    | false    | Shows pagination controls in the header                                                                                                                                                                        |
+| statusProps                 | object  | {}       | Props passed to UTStatus component when showMainStatus is true                                                                                                                                                 |
+| showBackButton              | boolean | false    | Shows a go back arrow button                                                                                                                                                                                   |
+| showTag                     | bool    | false    | Shows a tag indicator in the header area. When true, the tagProps object is passed to the UTStatus component to render a tag.                                                                                  |
+| tagProps                    | object  | {}       | Object containing props for the UTStatus component used as a tag in the header. Supports all [UTStatus props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTStatus)                    |
+| additionalContent           | array   |          | Array of sidebar items rendered in a collapsible side panel. See structure below.                                                                                                                             |
+
+### `additionalContent` item structure
+
+Each object in the array can contain:
+
+| Field           | Type          | Required | Description                                                                                      |
+| :-------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------ |
+| `id`            | `string`      | ✅        | Unique identifier for the item. Used as the active key and as part of the sidebar button testId. |
+| `Icon`          | `string`      | ✅        | Tabler icon name for the sidebar button (e.g. `'IconSettings'`).                                 |
+| `BodyComponent` | `elementType` | ✅        | React component rendered in the expanded content area when this item is active.                  |
+| `tooltipProps`  | `object`      | ✅        | Props passed to the `UTTooltip` wrapping the sidebar button. Must include `content`.             |
+| `count`         | `number`      | —        | When greater than 0, shows a numeric badge over the sidebar icon.                                |
+| `disabled`      | `bool`        | —        | When `true`, the sidebar button is disabled and the item cannot be selected.                     |

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

@@ -1 +1,102 @@
-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 React,{useMemo}from"react";import{arrayOf,bool,elementType,func,number,object,shape,string}from"prop-types";import"react-perfect-scrollbar/dist/css/styles.css";import PerfectScrollbar from"react-perfect-scrollbar";import UTButton from"../../../../../UTButton";import UTStatus from"../../../../../UTStatus";import UTTooltip from"../../../../../UTTooltip";import{TEST_IDS}from"../../../../../../constants/testIds";import styles from"./styles.module.scss";const{panel:panel}=TEST_IDS,AdditionalContentModule=_ref=>{let{activeId:activeId,additionalContent:additionalContent,onSelectItem:onSelectItem,tooltipContainer:tooltipContainer}=_ref;const activeContent=useMemo(()=>additionalContent.find(item=>item.id===activeId),[additionalContent,activeId]);if(!additionalContent||0===additionalContent.length)return null;const ActiveBodyComponent=null==activeContent?void 0:activeContent.BodyComponent,defaultTooltipContainer=tooltipContainer||(()=>document.body);return React.createElement("div",{className:styles.additionalContentWrapper},activeContent&&React.createElement(PerfectScrollbar,{options:{suppressScrollX:!0},className:styles.sidebarScroll},React.createElement("div",{className:styles.bodyComponent,"data-testid":panel.additionalContent.body},ActiveBodyComponent&&React.createElement(ActiveBodyComponent,null))),React.createElement("div",{className:"".concat(styles.sidebar," ").concat(activeContent?"":styles.sidebarCollapsed),"data-testid":panel.additionalContent.sidebar},React.createElement(PerfectScrollbar,{options:{suppressScrollX:!0},className:styles.sidebarScroll},React.createElement("div",{className:styles.sidebarContent},additionalContent.map(item=>{var _item$tooltipProps,_item$tooltipProps2,_item$tooltipProps$ti,_item$tooltipProps3,_item$tooltipProps4,_item$tooltipProps5;return React.createElement("div",{key:item.id,className:styles.sidebarItemWrapper},React.createElement(UTTooltip,_extends({content:(null===(_item$tooltipProps=item.tooltipProps)||void 0===_item$tooltipProps?void 0:_item$tooltipProps.content)||item.id,dataTestId:"".concat(panel.additionalContent.sidebarButton).concat(item.id,".tooltip"),tippyProps:{placement:(null===(_item$tooltipProps2=item.tooltipProps)||void 0===_item$tooltipProps2||null===(_item$tooltipProps2=_item$tooltipProps2.tippyProps)||void 0===_item$tooltipProps2?void 0:_item$tooltipProps2.placement)||"right",zIndex:null!==(_item$tooltipProps$ti=null===(_item$tooltipProps3=item.tooltipProps)||void 0===_item$tooltipProps3||null===(_item$tooltipProps3=_item$tooltipProps3.tippyProps)||void 0===_item$tooltipProps3?void 0:_item$tooltipProps3.zIndex)&&void 0!==_item$tooltipProps$ti?_item$tooltipProps$ti:9999,appendTo:(null===(_item$tooltipProps4=item.tooltipProps)||void 0===_item$tooltipProps4||null===(_item$tooltipProps4=_item$tooltipProps4.tippyProps)||void 0===_item$tooltipProps4?void 0:_item$tooltipProps4.appendTo)||defaultTooltipContainer,...(null===(_item$tooltipProps5=item.tooltipProps)||void 0===_item$tooltipProps5?void 0:_item$tooltipProps5.tippyProps)||{}}},(_ref2=>{let{_:_,...rest}=_ref2;return rest})(item.tooltipProps)),React.createElement("div",{className:styles.buttonWrapper},React.createElement(UTButton,{colorTheme:activeId===item.id?"primary":"gray",className:styles.sidebarButton,dataTestId:"".concat(panel.additionalContent.sidebarButton).concat(item.id),disabled:item.disabled,Icon:item.Icon,onClick:()=>onSelectItem(activeId===item.id?null:item.id),size:"medium",variant:activeId===item.id?"semitransparent":"text"}),item.count>0&&React.createElement(UTStatus,{area:!0,areaType:"ROUNDED",className:styles.countBadge,size:"xsmall",type:"negative",variant:"accent",withoutIcon:!0},item.count))))})))))};AdditionalContentModule.propTypes={additionalContent:arrayOf(shape({disabled:bool,id:string.isRequired,Icon:string.isRequired,count:number,BodyComponent:elementType.isRequired,tooltipProps:object.isRequired})).isRequired,activeId:string,onSelectItem:func.isRequired,tooltipContainer:func};export default AdditionalContentModule;
+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 React, { useMemo } from 'react';
+import { arrayOf, bool, elementType, func, number, object, shape, string } from 'prop-types';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import UTButton from '../../../../../UTButton';
+import UTStatus from '../../../../../UTStatus';
+import UTTooltip from '../../../../../UTTooltip';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import styles from './styles.module.scss';
+const {
+  panel
+} = TEST_IDS;
+const AdditionalContentModule = _ref => {
+  let {
+    activeId,
+    additionalContent,
+    onSelectItem,
+    tooltipContainer
+  } = _ref;
+  const activeContent = useMemo(() => additionalContent.find(item => item.id === activeId), [additionalContent, activeId]);
+  if (!additionalContent || additionalContent.length === 0) {
+    return null;
+  }
+  const ActiveBodyComponent = activeContent === null || activeContent === void 0 ? void 0 : activeContent.BodyComponent;
+  const defaultTooltipContainer = tooltipContainer || (() => document.body);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.additionalContentWrapper
+  }, activeContent && /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    options: {
+      suppressScrollX: true
+    },
+    className: styles.sidebarScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.bodyComponent,
+    "data-testid": panel.additionalContent.body
+  }, ActiveBodyComponent && /*#__PURE__*/React.createElement(ActiveBodyComponent, null))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.sidebar, " ").concat(!activeContent ? styles.sidebarCollapsed : ''),
+    "data-testid": panel.additionalContent.sidebar
+  }, /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    options: {
+      suppressScrollX: true
+    },
+    className: styles.sidebarScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sidebarContent
+  }, additionalContent.map(item => {
+    var _item$tooltipProps, _item$tooltipProps2, _item$tooltipProps$ti, _item$tooltipProps3, _item$tooltipProps4, _item$tooltipProps5;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      className: styles.sidebarItemWrapper
+    }, /*#__PURE__*/React.createElement(UTTooltip, _extends({
+      content: ((_item$tooltipProps = item.tooltipProps) === null || _item$tooltipProps === void 0 ? void 0 : _item$tooltipProps.content) || item.id,
+      dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id, ".tooltip"),
+      tippyProps: {
+        placement: ((_item$tooltipProps2 = item.tooltipProps) === null || _item$tooltipProps2 === void 0 || (_item$tooltipProps2 = _item$tooltipProps2.tippyProps) === null || _item$tooltipProps2 === void 0 ? void 0 : _item$tooltipProps2.placement) || 'right',
+        zIndex: (_item$tooltipProps$ti = (_item$tooltipProps3 = item.tooltipProps) === null || _item$tooltipProps3 === void 0 || (_item$tooltipProps3 = _item$tooltipProps3.tippyProps) === null || _item$tooltipProps3 === void 0 ? void 0 : _item$tooltipProps3.zIndex) !== null && _item$tooltipProps$ti !== void 0 ? _item$tooltipProps$ti : 9999,
+        appendTo: ((_item$tooltipProps4 = item.tooltipProps) === null || _item$tooltipProps4 === void 0 || (_item$tooltipProps4 = _item$tooltipProps4.tippyProps) === null || _item$tooltipProps4 === void 0 ? void 0 : _item$tooltipProps4.appendTo) || defaultTooltipContainer,
+        ...(((_item$tooltipProps5 = item.tooltipProps) === null || _item$tooltipProps5 === void 0 ? void 0 : _item$tooltipProps5.tippyProps) || {})
+      }
+    }, (_ref2 => {
+      let {
+        _,
+        ...rest
+      } = _ref2;
+      return rest;
+    })(item.tooltipProps)), /*#__PURE__*/React.createElement("div", {
+      className: styles.buttonWrapper
+    }, /*#__PURE__*/React.createElement(UTButton, {
+      colorTheme: activeId === item.id ? 'primary' : 'gray',
+      className: styles.sidebarButton,
+      dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
+      disabled: item.disabled,
+      Icon: item.Icon,
+      onClick: () => onSelectItem(activeId === item.id ? null : item.id),
+      size: "medium",
+      variant: activeId === item.id ? 'semitransparent' : 'text'
+    }), item.count > 0 && /*#__PURE__*/React.createElement(UTStatus, {
+      area: true,
+      areaType: "ROUNDED",
+      className: styles.countBadge,
+      size: "xsmall",
+      type: "negative",
+      variant: "accent",
+      withoutIcon: true
+    }, item.count))));
+  })))));
+};
+AdditionalContentModule.propTypes = {
+  additionalContent: arrayOf(shape({
+    disabled: bool,
+    id: string.isRequired,
+    Icon: string.isRequired,
+    count: number,
+    BodyComponent: elementType.isRequired,
+    tooltipProps: object.isRequired
+  })).isRequired,
+  activeId: string,
+  onSelectItem: func.isRequired,
+  tooltipContainer: func
+};
+export default AdditionalContentModule;

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

@@ -1 +1,50 @@
-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 React from"react";import{bool,func,node,object,string}from"prop-types";import PerfectScrollbar from"react-perfect-scrollbar";import UTButton from"../../../../../UTButton";import{TEST_IDS}from"../../../../../../constants/testIds";import styles from"../../styles.module.scss";import{ACCEPT_BUTTON_TEXT}from"../../constants.js";const{panel:panel}=TEST_IDS,BodySection=_ref=>{let{bodyContainerClass:bodyContainerClass,children:children,disableScrollbar:disableScrollbar,hideMainButton:hideMainButton,mainButton:mainButton,onEndReachedCallback:onEndReachedCallback,perfectScrollbarClass:perfectScrollbarClass,perfectScrollbarOptions:perfectScrollbarOptions}=_ref;return React.createElement(React.Fragment,null,React.createElement("div",{className:"".concat(styles.bodyWrapper," ").concat(bodyContainerClass||"")},disableScrollbar?children:React.createElement(PerfectScrollbar,{className:"".concat(styles.perfectScrollbar," ").concat(perfectScrollbarClass||""),onYReachEnd:onEndReachedCallback,options:{suppressScrollX:!0,...perfectScrollbarOptions}},children)),!hideMainButton&&React.createElement(UTButton,_extends({classNames:{root:styles.mainButton},dataTestId:panel.mainButton,size:"large"},mainButton),(null==mainButton?void 0:mainButton.text)||ACCEPT_BUTTON_TEXT))};BodySection.propTypes={bodyContainerClass:string,children:node,disableScrollbar:bool,hideMainButton:bool,mainButton:object,onEndReachedCallback:func,perfectScrollbarClass:string,perfectScrollbarOptions:object};export default BodySection;
+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 React from 'react';
+import { bool, func, node, object, string } from 'prop-types';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import UTButton from '../../../../../UTButton';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import styles from '../../styles.module.scss';
+import { ACCEPT_BUTTON_TEXT } from '../../constants.js';
+const {
+  panel
+} = TEST_IDS;
+const BodySection = _ref => {
+  let {
+    bodyContainerClass,
+    children,
+    disableScrollbar,
+    hideMainButton,
+    mainButton,
+    onEndReachedCallback,
+    perfectScrollbarClass,
+    perfectScrollbarOptions
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.bodyWrapper, " ").concat(bodyContainerClass || '')
+  }, disableScrollbar ? children : /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    className: "".concat(styles.perfectScrollbar, " ").concat(perfectScrollbarClass || ''),
+    onYReachEnd: onEndReachedCallback,
+    options: {
+      suppressScrollX: true,
+      ...perfectScrollbarOptions
+    }
+  }, children)), !hideMainButton && /*#__PURE__*/React.createElement(UTButton, _extends({
+    classNames: {
+      root: styles.mainButton
+    },
+    dataTestId: panel.mainButton,
+    size: "large"
+  }, mainButton), (mainButton === null || mainButton === void 0 ? void 0 : mainButton.text) || ACCEPT_BUTTON_TEXT));
+};
+BodySection.propTypes = {
+  bodyContainerClass: string,
+  children: node,
+  disableScrollbar: bool,
+  hideMainButton: bool,
+  mainButton: object,
+  onEndReachedCallback: func,
+  perfectScrollbarClass: string,
+  perfectScrollbarOptions: object
+};
+export default BodySection;

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

@@ -1 +1,111 @@
-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 React from"react";import{bool,func,number,string,object}from"prop-types";import UTButton from"../../../../../UTButton";import UTLabel from"../../../../../UTLabel";import UTProgressBar from"../../../../../UTProgressBar/index.js";import{TEST_IDS}from"../../../../../../constants/testIds";import styles from"../../styles.module.scss";const{panel:panel}=TEST_IDS,ControlAreaSection=_ref=>{let{backButton:backButton,backButtonClass:backButtonClass,backButtonDataTestId:backButtonDataTestId,classes:classes,closeButtonClass:closeButtonClass,closeButtonDataTestId:closeButtonDataTestId,currentPage:currentPage,currentStep:currentStep,hideCloseButton:hideCloseButton,iconBackClass:iconBackClass,iconCloseClass:iconCloseClass,isWorkflow:isWorkflow,nextButton:nextButton,onClose:onClose,onGoBack:onGoBack,onOpen:onOpen,open:open,panelIsCollapsible:panelIsCollapsible,showBackButton:showBackButton,showPagination:showPagination,stepsCount:stepsCount,totalPages:totalPages}=_ref;return showBackButton||showPagination||!hideCloseButton||isWorkflow||panelIsCollapsible?React.createElement("div",{className:styles.controlAreaContainer},React.createElement("div",{className:styles.controlAreaBar},React.createElement("div",{className:styles.controlLeftArea},showBackButton&&React.createElement("div",{className:styles.backButtonContainer},React.createElement(UTButton,{classNames:{icon:iconBackClass,root:backButtonClass},dataTestId:backButtonDataTestId,Icon:"IconArrowLeft",onClick:onGoBack,variant:"text"})),showPagination&&React.createElement("div",{className:styles.paginationContainer},React.createElement(UTLabel,{colorTheme:"gray"},"".concat(currentPage," / ").concat(totalPages)),React.createElement(UTButton,_extends({dataTestId:panel.paginationPrev,Icon:"IconChevronLeft",variant:"text"},backButton)),React.createElement(UTButton,_extends({dataTestId:panel.paginationNext,Icon:"IconChevronRight",variant:"text"},nextButton)))),(panelIsCollapsible||!hideCloseButton)&&React.createElement(UTButton,{classNames:{icon:iconCloseClass,root:closeButtonClass},dataTestId:closeButtonDataTestId,Icon:panelIsCollapsible?"IconLayoutSidebarRight":"IconX",onClick:panelIsCollapsible&&!open?onOpen:onClose,variant:"text"})),isWorkflow&&React.createElement(UTProgressBar,{classNames:{barColorPrimary:classes.barColorPrimary,colorPrimary:classes.colorPrimary,container:styles.progressBarContainer},value:100*currentStep/stepsCount})):null};ControlAreaSection.propTypes={backButton:object,backButtonClass:string,backButtonDataTestId:string,classes:object,closeButtonClass:string,closeButtonDataTestId:string,currentPage:number,currentStep:number,hideCloseButton:bool,iconBackClass:string,iconCloseClass:string,isWorkflow:bool,nextButton:object,onClose:func,onGoBack:func,onOpen:func,open:bool,panelIsCollapsible:bool,showBackButton:bool,showPagination:bool,stepsCount:number,totalPages:number};export default ControlAreaSection;
+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 React from 'react';
+import { bool, func, number, string, object } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import UTLabel from '../../../../../UTLabel';
+import UTProgressBar from '../../../../../UTProgressBar/index.js';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import styles from '../../styles.module.scss';
+const {
+  panel
+} = TEST_IDS;
+const ControlAreaSection = _ref => {
+  let {
+    backButton,
+    backButtonClass,
+    backButtonDataTestId,
+    classes,
+    closeButtonClass,
+    closeButtonDataTestId,
+    currentPage,
+    currentStep,
+    hideCloseButton,
+    iconBackClass,
+    iconCloseClass,
+    isWorkflow,
+    nextButton,
+    onClose,
+    onGoBack,
+    onOpen,
+    open,
+    panelIsCollapsible,
+    showBackButton,
+    showPagination,
+    stepsCount,
+    totalPages
+  } = _ref;
+  if (!showBackButton && !showPagination && hideCloseButton && !isWorkflow && !panelIsCollapsible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.controlAreaContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.controlAreaBar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.controlLeftArea
+  }, showBackButton && /*#__PURE__*/React.createElement("div", {
+    className: styles.backButtonContainer
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: iconBackClass,
+      root: backButtonClass
+    },
+    dataTestId: backButtonDataTestId,
+    Icon: "IconArrowLeft",
+    onClick: onGoBack,
+    variant: "text"
+  })), showPagination && /*#__PURE__*/React.createElement("div", {
+    className: styles.paginationContainer
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray"
+  }, "".concat(currentPage, " / ").concat(totalPages)), /*#__PURE__*/React.createElement(UTButton, _extends({
+    dataTestId: panel.paginationPrev,
+    Icon: "IconChevronLeft",
+    variant: "text"
+  }, backButton)), /*#__PURE__*/React.createElement(UTButton, _extends({
+    dataTestId: panel.paginationNext,
+    Icon: "IconChevronRight",
+    variant: "text"
+  }, nextButton)))), (panelIsCollapsible || !hideCloseButton) && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: iconCloseClass,
+      root: closeButtonClass
+    },
+    dataTestId: closeButtonDataTestId,
+    Icon: panelIsCollapsible ? 'IconLayoutSidebarRight' : 'IconX',
+    onClick: panelIsCollapsible && !open ? onOpen : onClose,
+    variant: "text"
+  })), isWorkflow && /*#__PURE__*/React.createElement(UTProgressBar, {
+    classNames: {
+      barColorPrimary: classes.barColorPrimary,
+      colorPrimary: classes.colorPrimary,
+      container: styles.progressBarContainer
+    },
+    value: currentStep * 100 / stepsCount
+  }));
+};
+ControlAreaSection.propTypes = {
+  backButton: object,
+  backButtonClass: string,
+  backButtonDataTestId: string,
+  classes: object,
+  closeButtonClass: string,
+  closeButtonDataTestId: string,
+  currentPage: number,
+  currentStep: number,
+  hideCloseButton: bool,
+  iconBackClass: string,
+  iconCloseClass: string,
+  isWorkflow: bool,
+  nextButton: object,
+  onClose: func,
+  onGoBack: func,
+  onOpen: func,
+  open: bool,
+  panelIsCollapsible: bool,
+  showBackButton: bool,
+  showPagination: bool,
+  stepsCount: number,
+  totalPages: number
+};
+export default ControlAreaSection;

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

@@ -1 +1,8 @@
-export const SIZES={L:"large",M:"medium"};export const ORIENTATION={HORIZONTAL:"horizontal",VERTICAL:"vertical"};
+export const SIZES = {
+  L: 'large',
+  M: 'medium'
+};
+export const ORIENTATION = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};

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

@@ -1 +1,37 @@
-import React from"react";import{func,string}from"prop-types";import UTIcon from"../../../../../UTIcon";import UTLabel from"../../../../../UTLabel";import styles from"./styles.module.scss";import{ORIENTATION,SIZES}from"./constants";const DataItem=_ref=>{let{icon:icon,orientation:orientation=ORIENTATION.HORIZONTAL,size:size="M",title:title,value:value,valueRenderComponent:valueRenderComponent}=_ref;return React.createElement("div",{className:"".concat(styles.container," ").concat(styles[SIZES[size]])},!!icon&&React.createElement(UTIcon,{className:styles.icon,colorTheme:"gray",name:icon}),React.createElement("div",{className:"".concat(styles.textContainer," ").concat(styles[ORIENTATION[orientation]])},React.createElement(UTLabel,{colorTheme:"gray",weight:"medium"},title),valueRenderComponent?valueRenderComponent():React.createElement(UTLabel,null,value)))};DataItem.propTypes={icon:string,orientation:string,size:string,title:string,value:string,valueRenderComponent:func};export default DataItem;
+import React from 'react';
+import { func, string } from 'prop-types';
+import UTIcon from '../../../../../UTIcon';
+import UTLabel from '../../../../../UTLabel';
+import styles from './styles.module.scss';
+import { ORIENTATION, SIZES } from './constants';
+const DataItem = _ref => {
+  let {
+    icon,
+    orientation = ORIENTATION.HORIZONTAL,
+    size = 'M',
+    title,
+    value,
+    valueRenderComponent
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(styles[SIZES[size]])
+  }, !!icon && /*#__PURE__*/React.createElement(UTIcon, {
+    className: styles.icon,
+    colorTheme: "gray",
+    name: icon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.textContainer, " ").concat(styles[ORIENTATION[orientation]])
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    weight: "medium"
+  }, title), valueRenderComponent ? valueRenderComponent() : /*#__PURE__*/React.createElement(UTLabel, null, value)));
+};
+DataItem.propTypes = {
+  icon: string,
+  orientation: string,
+  size: string,
+  title: string,
+  value: string,
+  valueRenderComponent: func
+};
+export default DataItem;