@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,118 @@
-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,{useState,useMemo}from"react";import{arrayOf,bool,element,elementType,object,oneOfType,shape,string}from"prop-types";import isEmpty from"lodash/isEmpty";import UTButton from"../../../../../UTButton";import UTStatus from"../../../../../UTStatus";import UTLabel from"../../../../../UTLabel";import UTMenu from"../../../../../UTMenu";import DataItem from"../DataItem";import styles from"../../styles.module.scss";const MENU_LABEL="Más",HeaderSection=_ref=>{let{classes:classes,collapsableHeader:collapsableHeader,CustomHeaderComponent:CustomHeaderComponent,HeaderComponent:HeaderComponent,headerItems:headerItems,headerMainActionButton:headerMainActionButton,headerSecondaryActionButton:headerSecondaryActionButton,hideHeader:hideHeader,mainActionDataTestId:mainActionDataTestId,pretitleComponent:pretitleComponent,secondaryActionDataTestId:secondaryActionDataTestId,showMainStatus:showMainStatus,showTag:showTag,singleHeaderItemsColumn:singleHeaderItemsColumn,statusProps:statusProps,subtitle:subtitle,tagProps:tagProps,title:title,titleClass:titleClass,titleDataTestId:titleDataTestId,titleProps:titleProps}=_ref;const[collapseHeader,setCollapseHeader]=useState(!0),[anchor,setAnchor]=useState(),secondaryActionAsMenu=useMemo(()=>Array.isArray(headerSecondaryActionButton),[headerSecondaryActionButton]);return hideHeader?null:React.createElement(React.Fragment,null,React.createElement("div",{className:"".concat(styles.headerContainer," ").concat((null==classes?void 0:classes.headerContainer)||"")},pretitleComponent&&React.createElement("div",{className:styles.pretitleArea},pretitleComponent),HeaderComponent||React.createElement("div",{className:styles.headerArea},React.createElement("div",{className:styles.headerLeftArea},showTag&&tagProps&&React.createElement(UTStatus,tagProps,tagProps.children),React.createElement("div",{className:styles.titleArea},React.createElement(UTLabel,_extends({className:titleClass,dataTestId:titleDataTestId,variant:"title2",weight:"medium"},titleProps),title),showMainStatus&&React.createElement(UTStatus,statusProps,statusProps.label),collapsableHeader&&React.createElement(UTButton,{Icon:collapseHeader?"IconChevronUp":"IconChevronDown",onClick:()=>setCollapseHeader(!collapseHeader),size:"small",variant:"text"})),subtitle&&React.createElement("div",{className:styles.subtitleArea},React.createElement(UTLabel,{colorTheme:"gray"},subtitle))),React.createElement("div",{className:styles.headerRightArea},!isEmpty(headerSecondaryActionButton)&&React.createElement(React.Fragment,null,secondaryActionAsMenu&&React.createElement(UTMenu,{anchor:anchor,iconBefore:!0,ItemComponent:UTButton,items:headerSecondaryActionButton,menuPlacement:"bottom-end",onClose:()=>setAnchor(),withMenuItem:!0}),React.createElement(UTButton,_extends({colorTheme:"secondary",dataTestId:secondaryActionDataTestId,onClick:secondaryActionAsMenu?event=>setAnchor(event.currentTarget):void 0,variant:"semitransparent"},!secondaryActionAsMenu&&headerSecondaryActionButton),secondaryActionAsMenu?"Más":headerSecondaryActionButton.text)),!isEmpty(headerMainActionButton)&&React.createElement(UTButton,_extends({colorTheme:"success",dataTestId:mainActionDataTestId,variant:"filled"},headerMainActionButton),headerMainActionButton.text)))),CustomHeaderComponent&&React.createElement(CustomHeaderComponent,null),!isEmpty(headerItems)&&React.createElement("div",{className:"".concat(styles.headerItemsContainer," \n          ").concat(collapseHeader?styles.expandedContainer:styles.collapsedContainer," \n          ").concat(singleHeaderItemsColumn&&styles.singleHeaderItemsColumn||"")},headerItems.map(DataItem)))};HeaderSection.propTypes={classes:object,collapsableHeader:bool,CustomHeaderComponent:elementType,HeaderComponent:oneOfType([element,elementType]),headerItems:arrayOf(shape({title:string,icon:string,value:string})),headerMainActionButton:object,headerSecondaryActionButton:oneOfType([object,arrayOf(object)]),hideHeader:bool,mainActionDataTestId:string,pretitleComponent:oneOfType([element,elementType]),secondaryActionDataTestId:string,showMainStatus:bool,showTag:bool,singleHeaderItemsColumn:bool,statusProps:object,subtitle:string,tagProps:object,title:string,titleClass:string,titleDataTestId:string,titleProps:object};export default HeaderSection;
+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, { useState, useMemo } from 'react';
+import { arrayOf, bool, element, elementType, object, oneOfType, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import UTButton from '../../../../../UTButton';
+import UTStatus from '../../../../../UTStatus';
+import UTLabel from '../../../../../UTLabel';
+import UTMenu from '../../../../../UTMenu';
+import DataItem from '../DataItem';
+import styles from '../../styles.module.scss';
+const MENU_LABEL = 'Más';
+const HeaderSection = _ref => {
+  let {
+    classes,
+    collapsableHeader,
+    CustomHeaderComponent,
+    HeaderComponent,
+    headerItems,
+    headerMainActionButton,
+    headerSecondaryActionButton,
+    hideHeader,
+    mainActionDataTestId,
+    pretitleComponent,
+    secondaryActionDataTestId,
+    showMainStatus,
+    showTag,
+    singleHeaderItemsColumn,
+    statusProps,
+    subtitle,
+    tagProps,
+    title,
+    titleClass,
+    titleDataTestId,
+    titleProps
+  } = _ref;
+  const [collapseHeader, setCollapseHeader] = useState(true);
+  const [anchor, setAnchor] = useState();
+  const openMenu = event => setAnchor(event.currentTarget);
+  const closeMenu = () => setAnchor();
+  const secondaryActionAsMenu = useMemo(() => Array.isArray(headerSecondaryActionButton), [headerSecondaryActionButton]);
+  if (hideHeader) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerContainer, " ").concat((classes === null || classes === void 0 ? void 0 : classes.headerContainer) || '')
+  }, pretitleComponent && /*#__PURE__*/React.createElement("div", {
+    className: styles.pretitleArea
+  }, pretitleComponent), HeaderComponent || /*#__PURE__*/React.createElement("div", {
+    className: styles.headerArea
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.headerLeftArea
+  }, showTag && tagProps && /*#__PURE__*/React.createElement(UTStatus, tagProps, tagProps.children), /*#__PURE__*/React.createElement("div", {
+    className: styles.titleArea
+  }, /*#__PURE__*/React.createElement(UTLabel, _extends({
+    className: titleClass,
+    dataTestId: titleDataTestId,
+    variant: "title2",
+    weight: "medium"
+  }, titleProps), title), showMainStatus && /*#__PURE__*/React.createElement(UTStatus, statusProps, statusProps.label), collapsableHeader && /*#__PURE__*/React.createElement(UTButton, {
+    Icon: collapseHeader ? 'IconChevronUp' : 'IconChevronDown',
+    onClick: () => setCollapseHeader(!collapseHeader),
+    size: "small",
+    variant: "text"
+  })), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: styles.subtitleArea
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray"
+  }, subtitle))), /*#__PURE__*/React.createElement("div", {
+    className: styles.headerRightArea
+  }, !isEmpty(headerSecondaryActionButton) && /*#__PURE__*/React.createElement(React.Fragment, null, secondaryActionAsMenu && /*#__PURE__*/React.createElement(UTMenu, {
+    anchor: anchor,
+    iconBefore: true,
+    ItemComponent: UTButton,
+    items: headerSecondaryActionButton,
+    menuPlacement: "bottom-end",
+    onClose: closeMenu,
+    withMenuItem: true
+  }), /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: "secondary",
+    dataTestId: secondaryActionDataTestId,
+    onClick: secondaryActionAsMenu ? openMenu : undefined,
+    variant: "semitransparent"
+  }, !secondaryActionAsMenu && headerSecondaryActionButton), secondaryActionAsMenu ? MENU_LABEL : headerSecondaryActionButton.text)), !isEmpty(headerMainActionButton) && /*#__PURE__*/React.createElement(UTButton, _extends({
+    colorTheme: "success",
+    dataTestId: mainActionDataTestId,
+    variant: "filled"
+  }, headerMainActionButton), headerMainActionButton.text)))), CustomHeaderComponent && /*#__PURE__*/React.createElement(CustomHeaderComponent, null), !isEmpty(headerItems) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.headerItemsContainer, " \n          ").concat(collapseHeader ? styles.expandedContainer : styles.collapsedContainer, " \n          ").concat(singleHeaderItemsColumn && styles.singleHeaderItemsColumn || '')
+  }, headerItems.map(DataItem)));
+};
+HeaderSection.propTypes = {
+  classes: object,
+  collapsableHeader: bool,
+  CustomHeaderComponent: elementType,
+  HeaderComponent: oneOfType([element, elementType]),
+  headerItems: arrayOf(shape({
+    title: string,
+    icon: string,
+    value: string
+  })),
+  headerMainActionButton: object,
+  headerSecondaryActionButton: oneOfType([object, arrayOf(object)]),
+  hideHeader: bool,
+  mainActionDataTestId: string,
+  pretitleComponent: oneOfType([element, elementType]),
+  secondaryActionDataTestId: string,
+  showMainStatus: bool,
+  showTag: bool,
+  singleHeaderItemsColumn: bool,
+  statusProps: object,
+  subtitle: string,
+  tagProps: object,
+  title: string,
+  titleClass: string,
+  titleDataTestId: string,
+  titleProps: object
+};
+export default HeaderSection;

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

@@ -1 +1,7 @@
-export const SIZES={L:"large",M:"medium",S:"small"};export const ACCEPT_BUTTON_TEXT="Aceptar";export const MENU_LABEL="Más";
+export const SIZES = {
+  L: 'large',
+  M: 'medium',
+  S: 'small'
+};
+export const ACCEPT_BUTTON_TEXT = 'Aceptar';
+export const MENU_LABEL = 'Más';

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

@@ -1 +1,274 @@
-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,useState,useEffect}from"react";import SwipeableDrawer from"@material-ui/core/SwipeableDrawer";import{arrayOf,bool,element,elementType,func,number,object,objectOf,oneOf,oneOfType,shape,string}from"prop-types";import isEmpty from"lodash/isEmpty";import WithTheme from"../../../WithTheme/index.js";import{TEST_IDS}from"../../../../constants/testIds.js";import{mergeClasses}from"../../../../utils/classesUtils.js";import AdditionalContentModule from"./components/AdditionalContentModule";import ControlAreaSection from"./components/ControlAreaSection";import HeaderSection from"./components/HeaderSection";import BodySection from"./components/BodySection";import styles from"./styles.module.scss";import{SIZES}from"./constants.js";import{retrieveStyle}from"./theme";const{panel:panel}=TEST_IDS,UTPanel=_ref=>{var _classes$bodyContaine;let{additionalContent:additionalContent,backButtonDataTestId:backButtonDataTestId=panel.backButton,BackdropProps:BackdropProps={},children:children,classes:theme,classNames:classNames,closeButtonDataTestId:closeButtonDataTestId=panel.closeButton,collapsableHeader:collapsableHeader=!1,collapsablePanel:collapsablePanel=!1,currentStep:currentStep=1,CustomHeaderComponent:CustomHeaderComponent,disableScrollbar:disableScrollbar=!1,HeaderComponent:HeaderComponent,headerItems:headerItems,headerMainActionButton:headerMainActionButton={},headerSecondaryActionButton:headerSecondaryActionButton={},hideCloseButton:hideCloseButton=!1,hideHeader:hideHeader=!1,hideMainButton:hideMainButton=!1,inline:inline=!1,isWorkflow:isWorkflow=!1,mainActionDataTestId:mainActionDataTestId=panel.mainAction,mainButton:mainButton={},modalProps:modalProps,onClose:onClose,onEndReachedCallback:onEndReachedCallback,onGoBack:onGoBack=()=>{},onOpen:onOpen=()=>{},open:open,openAdditionalContentRequest:openAdditionalContentRequest,paginationProps:paginationProps={},panelSide:panelSide,perfectScrollbarOptions:perfectScrollbarOptions,pretitleComponent:pretitleComponent,secondaryActionDataTestId:secondaryActionDataTestId=panel.secondaryAction,showBackButton:showBackButton=!1,showMainStatus:showMainStatus=!1,showPagination:showPagination=!1,showTag:showTag=!1,singleHeaderItemsColumn:singleHeaderItemsColumn=!1,size:size="M",statusProps:statusProps={},stepsCount:stepsCount,subtitle:subtitle="",tagProps:tagProps={},title:title="",titleDataTestId:titleDataTestId=panel.title,titleProps:titleProps={},...props}=_ref;const classes=useMemo(()=>mergeClasses(theme,classNames),[classNames,theme]),[activeAdditionalContentId,setActiveAdditionalContentId]=useState(null);useEffect(()=>{var _additionalContent$;additionalContent&&additionalContent.length>0&&(null!==(_additionalContent$=additionalContent[0])&&void 0!==_additionalContent$&&_additionalContent$.collapse?setActiveAdditionalContentId(null):setActiveAdditionalContentId(additionalContent[0].id))},[additionalContent]),useEffect(()=>{null!=openAdditionalContentRequest&&openAdditionalContentRequest.id&&setActiveAdditionalContentId(openAdditionalContentRequest.id)},[openAdditionalContentRequest]);const panelIsCollapsible=collapsablePanel&&inline,panelIsCollapsed=panelIsCollapsible&&!open,hasAdditionalContent=!isEmpty(additionalContent),{nextButton:nextButton={},backButton:backButton={},currentPage:currentPage=1,totalPages:totalPages=1}=paginationProps,{backButton:backButtonClass,closeButton:closeButtonClass,iconBack:iconBackClass,iconClose:iconCloseClass,perfectScrollbar:perfectScrollbarClass,...drawerClasses}=classes;return React.createElement(SwipeableDrawer,_extends({anchor:panelSide,BackdropProps:{...BackdropProps,classes:{root:drawerClasses.backdrop,...null==BackdropProps?void 0:BackdropProps.classes}},classes:{...drawerClasses,paper:"\n          ".concat(styles.paper,"\n          ").concat(panelIsCollapsible&&open&&styles.collapsedPaper,"\n          ").concat(drawerClasses.paper,"\n          ").concat(styles[SIZES[size]],"\n          ").concat(hasAdditionalContent&&activeAdditionalContentId&&styles.withAdditionalContent,"\n          ").concat(hasAdditionalContent&&!activeAdditionalContentId&&styles.withAdditionalContentCollapsed,"\n        "),root:drawerClasses.root,docked:"\n          ".concat(styles[SIZES[size]],"\n          ").concat(styles.docked,"\n          ").concat(panelIsCollapsed&&styles.collapsed,"\n          ").concat(!open&&!collapsablePanel&&styles.closedPersistentPanel,"\n          ").concat(hasAdditionalContent&&activeAdditionalContentId&&styles.withAdditionalContentDocked,"\n          ").concat(hasAdditionalContent&&!activeAdditionalContentId&&styles.withAdditionalContentCollapsedDocked,"\n        ")},disablePortal:inline,disableSwipeToOpen:!0,ModalProps:{...modalProps},onClose:onClose,onOpen:onOpen,open:panelIsCollapsible||open,swipeAreaWidth:0,variant:inline?collapsablePanel?"permanent":"persistent":"temporary"},props),!panelIsCollapsed&&React.createElement("div",{className:styles.panelWrapper},React.createElement(ControlAreaSection,{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}),React.createElement("div",{className:styles.contentRowContainer},React.createElement("div",{className:styles.mainContentSection},React.createElement(HeaderSection,{classes:classes,collapsableHeader:collapsableHeader,CustomHeaderComponent:CustomHeaderComponent,HeaderComponent:HeaderComponent,headerItems:headerItems,headerMainActionButton:headerMainActionButton,headerSecondaryActionButton:headerSecondaryActionButton,hideHeader:hideHeader,mainActionDataTestId:mainActionDataTestId,pretitleComponent:pretitleComponent,secondaryActionDataTestId:secondaryActionDataTestId,showMainStatus:showMainStatus,showTag:showTag,singleHeaderItemsColumn:singleHeaderItemsColumn,statusProps:statusProps,subtitle:subtitle,tagProps:tagProps,title:title,titleClass:classes.title,titleDataTestId:titleDataTestId,titleProps:titleProps}),React.createElement(BodySection,{bodyContainerClass:"".concat(styles.bodyContainer," ").concat(null!==(_classes$bodyContaine=null==classes?void 0:classes.bodyContainer)&&void 0!==_classes$bodyContaine?_classes$bodyContaine:""),disableScrollbar:disableScrollbar,hideMainButton:hideMainButton,mainButton:mainButton,onEndReachedCallback:onEndReachedCallback,perfectScrollbarClass:perfectScrollbarClass,perfectScrollbarOptions:perfectScrollbarOptions},children)),hasAdditionalContent&&React.createElement(AdditionalContentModule,{activeId:activeAdditionalContentId,additionalContent:additionalContent,onSelectItem:setActiveAdditionalContentId}))))};UTPanel.propTypes={additionalContent:arrayOf(shape({id:string.isRequired,Icon:string.isRequired,count:number,BodyComponent:elementType.isRequired,tooltipProps:object.isRequired})),backButtonDataTestId:string,BackdropProps:object,classes:objectOf(string),classNames:object,closeButtonDataTestId:string,collapsableHeader:bool,collapsablePanel:bool,currentStep:number,disableScrollbar:bool,CustomHeaderComponent:elementType,HeaderComponent:oneOfType([element,elementType]),headerItems:arrayOf(shape({title:string,icon:string,value:string})),headerMainActionButton:shape({callBack:func,colorTheme:string,text:string,variant:string}),headerSecondaryActionButton:shape({callBack:func,colorTheme:string,text:string,variant:string}),hideCloseButton:bool,hideHeader:bool,hideMainButton:bool,inline:bool,isWorkflow:bool,mainActionDataTestId:string,mainButton:object,modalProps:object,onClose:func,onEndReachedCallback:func,onGoBack:func,onOpen:func,open:bool,openAdditionalContentRequest:object,panelSide:string,perfectScrollbarOptions:object,pretitleComponent:oneOfType([element,elementType]),secondaryActionDataTestId:string,singleHeaderItemsColumn:bool,size:oneOf(Object.keys(SIZES)),showBackButton:bool,showMainStatus:bool,showTag:bool,showPagination:bool,statusProps:object,stepsCount:number,currentPage:number,totalPages:number,subtitle:string,paginationProps:object,tagProps:shape({classes:objectOf(string),className:string,Icon:elementType,iconProps:object,labelDataTestId:string,size:string,title:string,type:string,variant:string,withoutIcon:bool}),title:string,titleDataTestId:string,titleProps:object};export default WithTheme(retrieveStyle)(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); }
+import React, { useMemo, useState, useEffect } from 'react';
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+import { arrayOf, bool, element, elementType, func, number, object, objectOf, oneOf, oneOfType, shape, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import WithTheme from '../../../WithTheme/index.js';
+import { TEST_IDS } from '../../../../constants/testIds.js';
+import { mergeClasses } from '../../../../utils/classesUtils.js';
+import AdditionalContentModule from './components/AdditionalContentModule';
+import ControlAreaSection from './components/ControlAreaSection';
+import HeaderSection from './components/HeaderSection';
+import BodySection from './components/BodySection';
+import styles from './styles.module.scss';
+import { SIZES } from './constants.js';
+import { retrieveStyle } from './theme';
+const {
+  panel
+} = TEST_IDS;
+const UTPanel = _ref => {
+  var _classes$bodyContaine;
+  let {
+    additionalContent,
+    backButtonDataTestId = panel.backButton,
+    BackdropProps = {},
+    children,
+    classes: theme,
+    classNames,
+    closeButtonDataTestId = panel.closeButton,
+    collapsableHeader = false,
+    collapsablePanel = false,
+    currentStep = 1,
+    CustomHeaderComponent,
+    disableScrollbar = false,
+    HeaderComponent,
+    headerItems,
+    headerMainActionButton = {},
+    headerSecondaryActionButton = {},
+    hideCloseButton = false,
+    hideHeader = false,
+    hideMainButton = false,
+    inline = false,
+    isWorkflow = false,
+    mainActionDataTestId = panel.mainAction,
+    mainButton = {},
+    modalProps,
+    onClose,
+    onEndReachedCallback,
+    onGoBack = () => {},
+    onOpen = () => {},
+    open,
+    openAdditionalContentRequest,
+    paginationProps = {},
+    panelSide,
+    perfectScrollbarOptions,
+    pretitleComponent,
+    secondaryActionDataTestId = panel.secondaryAction,
+    showBackButton = false,
+    showMainStatus = false,
+    showPagination = false,
+    showTag = false,
+    singleHeaderItemsColumn = false,
+    size = 'M',
+    statusProps = {},
+    stepsCount,
+    subtitle = '',
+    tagProps = {},
+    title = '',
+    titleDataTestId = panel.title,
+    titleProps = {},
+    ...props
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(theme, classNames), [classNames, theme]);
+  const [activeAdditionalContentId, setActiveAdditionalContentId] = useState(null);
+  useEffect(() => {
+    if (additionalContent && additionalContent.length > 0) {
+      var _additionalContent$;
+      if ((_additionalContent$ = additionalContent[0]) !== null && _additionalContent$ !== void 0 && _additionalContent$.collapse) setActiveAdditionalContentId(null);else setActiveAdditionalContentId(additionalContent[0].id);
+    }
+  }, [additionalContent]);
+  useEffect(() => {
+    if (openAdditionalContentRequest !== null && openAdditionalContentRequest !== void 0 && openAdditionalContentRequest.id) {
+      setActiveAdditionalContentId(openAdditionalContentRequest.id);
+    }
+  }, [openAdditionalContentRequest]);
+  const panelIsCollapsible = collapsablePanel && inline;
+  const panelIsCollapsed = panelIsCollapsible && !open;
+  const hasAdditionalContent = !isEmpty(additionalContent);
+  const {
+    nextButton = {},
+    backButton = {},
+    currentPage = 1,
+    totalPages = 1
+  } = paginationProps;
+  const {
+    backButton: backButtonClass,
+    closeButton: closeButtonClass,
+    iconBack: iconBackClass,
+    iconClose: iconCloseClass,
+    perfectScrollbar: perfectScrollbarClass,
+    ...drawerClasses
+  } = classes;
+  return /*#__PURE__*/React.createElement(SwipeableDrawer, _extends({
+    anchor: panelSide,
+    BackdropProps: {
+      ...BackdropProps,
+      classes: {
+        root: drawerClasses.backdrop,
+        ...(BackdropProps === null || BackdropProps === void 0 ? void 0 : BackdropProps.classes)
+      }
+    },
+    classes: {
+      ...drawerClasses,
+      paper: "\n          ".concat(styles.paper, "\n          ").concat(panelIsCollapsible && open && styles.collapsedPaper, "\n          ").concat(drawerClasses.paper, "\n          ").concat(styles[SIZES[size]], "\n          ").concat(hasAdditionalContent && activeAdditionalContentId && styles.withAdditionalContent, "\n          ").concat(hasAdditionalContent && !activeAdditionalContentId && styles.withAdditionalContentCollapsed, "\n        "),
+      root: drawerClasses.root,
+      docked: "\n          ".concat(styles[SIZES[size]], "\n          ").concat(styles.docked, "\n          ").concat(panelIsCollapsed && styles.collapsed, "\n          ").concat(!open && !collapsablePanel && styles.closedPersistentPanel, "\n          ").concat(hasAdditionalContent && activeAdditionalContentId && styles.withAdditionalContentDocked, "\n          ").concat(hasAdditionalContent && !activeAdditionalContentId && styles.withAdditionalContentCollapsedDocked, "\n        ")
+    },
+    disablePortal: inline,
+    disableSwipeToOpen: true,
+    ModalProps: {
+      ...modalProps
+    },
+    onClose: onClose,
+    onOpen: onOpen,
+    open: panelIsCollapsible || open,
+    swipeAreaWidth: 0,
+    variant: inline ? collapsablePanel ? 'permanent' : 'persistent' : 'temporary'
+  }, props), !panelIsCollapsed && /*#__PURE__*/React.createElement("div", {
+    className: styles.panelWrapper
+  }, /*#__PURE__*/React.createElement(ControlAreaSection, {
+    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
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.contentRowContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.mainContentSection
+  }, /*#__PURE__*/React.createElement(HeaderSection, {
+    classes: classes,
+    collapsableHeader: collapsableHeader,
+    CustomHeaderComponent: CustomHeaderComponent,
+    HeaderComponent: HeaderComponent,
+    headerItems: headerItems,
+    headerMainActionButton: headerMainActionButton,
+    headerSecondaryActionButton: headerSecondaryActionButton,
+    hideHeader: hideHeader,
+    mainActionDataTestId: mainActionDataTestId,
+    pretitleComponent: pretitleComponent,
+    secondaryActionDataTestId: secondaryActionDataTestId,
+    showMainStatus: showMainStatus,
+    showTag: showTag,
+    singleHeaderItemsColumn: singleHeaderItemsColumn,
+    statusProps: statusProps,
+    subtitle: subtitle,
+    tagProps: tagProps,
+    title: title,
+    titleClass: classes.title,
+    titleDataTestId: titleDataTestId,
+    titleProps: titleProps
+  }), /*#__PURE__*/React.createElement(BodySection, {
+    bodyContainerClass: "".concat(styles.bodyContainer, " ").concat((_classes$bodyContaine = classes === null || classes === void 0 ? void 0 : classes.bodyContainer) !== null && _classes$bodyContaine !== void 0 ? _classes$bodyContaine : ''),
+    disableScrollbar: disableScrollbar,
+    hideMainButton: hideMainButton,
+    mainButton: mainButton,
+    onEndReachedCallback: onEndReachedCallback,
+    perfectScrollbarClass: perfectScrollbarClass,
+    perfectScrollbarOptions: perfectScrollbarOptions
+  }, children)), hasAdditionalContent && /*#__PURE__*/React.createElement(AdditionalContentModule, {
+    activeId: activeAdditionalContentId,
+    additionalContent: additionalContent,
+    onSelectItem: setActiveAdditionalContentId
+  }))));
+};
+UTPanel.propTypes = {
+  additionalContent: arrayOf(shape({
+    id: string.isRequired,
+    Icon: string.isRequired,
+    count: number,
+    BodyComponent: elementType.isRequired,
+    tooltipProps: object.isRequired
+  })),
+  backButtonDataTestId: string,
+  BackdropProps: object,
+  classes: objectOf(string),
+  classNames: object,
+  closeButtonDataTestId: string,
+  collapsableHeader: bool,
+  collapsablePanel: bool,
+  currentStep: number,
+  disableScrollbar: bool,
+  CustomHeaderComponent: elementType,
+  HeaderComponent: oneOfType([element, elementType]),
+  headerItems: arrayOf(shape({
+    title: string,
+    icon: string,
+    value: string
+  })),
+  headerMainActionButton: shape({
+    callBack: func,
+    colorTheme: string,
+    text: string,
+    variant: string
+  }),
+  headerSecondaryActionButton: shape({
+    callBack: func,
+    colorTheme: string,
+    text: string,
+    variant: string
+  }),
+  hideCloseButton: bool,
+  hideHeader: bool,
+  hideMainButton: bool,
+  inline: bool,
+  isWorkflow: bool,
+  mainActionDataTestId: string,
+  mainButton: object,
+  modalProps: object,
+  onClose: func,
+  onEndReachedCallback: func,
+  onGoBack: func,
+  onOpen: func,
+  open: bool,
+  openAdditionalContentRequest: object,
+  panelSide: string,
+  perfectScrollbarOptions: object,
+  pretitleComponent: oneOfType([element, elementType]),
+  secondaryActionDataTestId: string,
+  singleHeaderItemsColumn: bool,
+  size: oneOf(Object.keys(SIZES)),
+  showBackButton: bool,
+  showMainStatus: bool,
+  showTag: bool,
+  showPagination: bool,
+  statusProps: object,
+  stepsCount: number,
+  currentPage: number,
+  totalPages: number,
+  subtitle: string,
+  paginationProps: object,
+  tagProps: shape({
+    classes: objectOf(string),
+    className: string,
+    Icon: elementType,
+    iconProps: object,
+    labelDataTestId: string,
+    size: string,
+    title: string,
+    type: string,
+    variant: string,
+    withoutIcon: bool
+  }),
+  title: string,
+  titleDataTestId: string,
+  titleProps: object
+};
+export default WithTheme(retrieveStyle)(UTPanel);

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

@@ -1 +1,18 @@
-import{getIn}from"seamless-immutable";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{barColorPrimary:{background:getIn(theme,["UTPanel","progressBar","barColorPrimary","background"],"linear-gradient(90deg, #25E0A6 0%, #20BBFC 100%) !important")},colorPrimary:{backgroundColor:getIn(theme,["UTPanel","progressBar","colorPrimary","backgroundColor"],"".concat(theme.Palette.light["04"]," !important"))},backdrop:{backgroundColor:theme.Palette.dark["05"],opacity:"0.25 !important"}}};
+import { getIn } from 'seamless-immutable';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    barColorPrimary: {
+      background: getIn(theme, ['UTPanel', 'progressBar', 'barColorPrimary', 'background'], 'linear-gradient(90deg, #25E0A6 0%, #20BBFC 100%) !important')
+    },
+    colorPrimary: {
+      backgroundColor: getIn(theme, ['UTPanel', 'progressBar', 'colorPrimary', 'backgroundColor'], "".concat(theme.Palette.light['04'], " !important"))
+    },
+    backdrop: {
+      backgroundColor: theme.Palette.dark['05'],
+      opacity: '0.25 !important'
+    }
+  };
+};

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

@@ -1 +1,24 @@
-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{object,objectOf,string}from"prop-types";import{Paper}from"@material-ui/core";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";const UTPaper=_ref=>{let{children:children,classes:classes,className:className,...otherProps}=_ref;return React.createElement(Paper,_extends({},otherProps,{className:"".concat(classes.paper).concat(className?" ".concat(className):"")}),children)};UTPaper.propTypes={children:object,classes:objectOf(string),className:string,otherProps:object};export default WithTheme(retrieveStyle)(UTPaper);
+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 { object, objectOf, string } from 'prop-types';
+import { Paper } from '@material-ui/core';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+const UTPaper = _ref => {
+  let {
+    children,
+    classes,
+    className,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Paper, _extends({}, otherProps, {
+    className: "".concat(classes.paper).concat(className ? " ".concat(className) : '')
+  }), children);
+};
+UTPaper.propTypes = {
+  children: object,
+  classes: objectOf(string),
+  className: string,
+  otherProps: object
+};
+export default WithTheme(retrieveStyle)(UTPaper);

package/dist/esm/components/UTPaper/theme.js

@@ -1 +1,19 @@
-import{getShadow}from"../../utils/shadowUtils";export const retrieveStyle=_ref=>{var _theme$Palette$shadow;let{theme:theme}=_ref;return{paper:{backgroundColor:theme.Palette.light["01"],borderRadius:"8px",boxShadow:getShadow({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:2}),marginTop:"8px",padding:"16px"}}};
+import { getShadow } from '../../utils/shadowUtils';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow;
+  let {
+    theme
+  } = _ref;
+  return {
+    paper: {
+      backgroundColor: theme.Palette.light['01'],
+      borderRadius: '8px',
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      marginTop: '8px',
+      padding: '16px'
+    }
+  };
+};

package/dist/esm/components/UTPasswordField/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 UTPasswordField=_ref=>{let{version:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTPasswordField.propTypes={version:string};export default UTPasswordField;
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTPasswordField = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTPasswordField.propTypes = {
+  version: string
+};
+export default UTPasswordField;

package/dist/esm/components/UTPasswordField/versions/V0/README.md

@@ -0,0 +1,19 @@
+# UTPasswordField
+
+### Description
+Component that abstracts all possible uses for a password field. Based on the `UTTextField` component.
+
+### Usage
+This component shares all `UTTextField` props. The following props are specific to the `UTPasswordField` component:
+
+- `field`: expects an `object` with the field configuration. This prop is passed down to the text field, but the password component extracts
+  - `passwordValidations`: expects an `array` of `objects` with attributes `error: string, expression: string, requirement: string`. The `expression` attribute consists of a regular expression used to check for both an error or password requirement. The error and requirement attributes are messages to be displayed whenever it is needed. Validations are checked in real time, whereas errors show up after a submission failure.
+  - `showValidations`: expects a `boolean`. Flag to show or hide the validations based on the location of the password field. e.g: one would not want to show requirements on a sign in view, would want to in a sign up screen.
+- ValidationPassedIcon: expects an `element`, icon used to indicate when a validation has passed.
+- ValidationFailedIcon: expects an `element`, icon used to indicate when a validation has failed.
+- NoValueIcon: expects an `element`, icon used to indicate when the input has no value and has not failed to submit.
+- ErrorIcon: expects an `element`, icon used to indicate when an error is present.
+
+### Observations
+
+The `passwordValidations` object should be the same one used to set the validations in the field configuration for better understanding between visuals and functionality.

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Error/index.js

@@ -1 +1,38 @@
-import React from"react";import DefaultIcon from"@material-ui/icons/Info";import{bool,string,objectOf,elementType}from"prop-types";import UTLabel from"../../../../../../../UTLabel";import styles from"./styles.module.scss";const ErrorMessage=_ref=>{let{assertion:assertion,classes:classes,dataTestId:dataTestId,ErrorIcon:ErrorIcon,error:error}=_ref;const{failedIconStyle:failedIconStyle,iconStyle:iconStyle}=classes,Icon=ErrorIcon||DefaultIcon;return!assertion&&React.createElement("div",{className:styles.container,"data-testid":dataTestId},React.createElement(Icon,{className:"".concat(iconStyle," ").concat(failedIconStyle)}),React.createElement(UTLabel,{className:styles.label,colorTheme:"error",variant:"small",withMarkdown:!0},error))};ErrorMessage.propTypes={assertion:bool,classes:objectOf(string),dataTestId:string,ErrorIcon:elementType,error:string};export default ErrorMessage;
+import React from 'react';
+import DefaultIcon from '@material-ui/icons/Info';
+import { bool, string, objectOf, elementType } from 'prop-types';
+import UTLabel from '../../../../../../../UTLabel';
+import styles from './styles.module.scss';
+const ErrorMessage = _ref => {
+  let {
+    assertion,
+    classes,
+    dataTestId,
+    ErrorIcon,
+    error
+  } = _ref;
+  const {
+    failedIconStyle,
+    iconStyle
+  } = classes;
+  const Icon = ErrorIcon || DefaultIcon;
+  return !assertion && /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "".concat(iconStyle, " ").concat(failedIconStyle)
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.label,
+    colorTheme: "error",
+    variant: "small",
+    withMarkdown: true
+  }, error));
+};
+ErrorMessage.propTypes = {
+  assertion: bool,
+  classes: objectOf(string),
+  dataTestId: string,
+  ErrorIcon: elementType,
+  error: string
+};
+export default ErrorMessage;

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Validation/index.js

@@ -1 +1,58 @@
-import React from"react";import ValidationPassed from"@material-ui/icons/CheckCircle";import ValidationFailed from"@material-ui/icons/Cancel";import PlaceholderIcon from"@material-ui/icons/FiberManualRecord";import{string,objectOf,bool,elementType}from"prop-types";import UTLabel from"../../../../../../../UTLabel";import styles from"./styles.module.scss";const Validation=_ref=>{let{assertion:assertion,classes:classes,dataTestId:dataTestId,disabled:disabled,NoValueIcon:NoValueIcon,requirement:requirement,shouldShowError:shouldShowError,ValidationFailedIcon:ValidationFailedIcon,ValidationPassedIcon:ValidationPassedIcon,value:value}=_ref;const{passedIconStyle:passedIconStyle,failedIconStyle:failedIconStyle,iconStyle:iconStyle}=classes,PassedIcon=ValidationPassedIcon||ValidationPassed,FailedIcon=ValidationFailedIcon||ValidationFailed,NoValue=NoValueIcon||PlaceholderIcon,labelColor=value||shouldShowError?assertion?"success":"error":"gray";return React.createElement("div",{className:styles.container,"data-testid":dataTestId},value||shouldShowError&&!disabled?assertion?React.createElement(PassedIcon,{className:"".concat(styles.passedIcon," ").concat(iconStyle," ").concat(passedIconStyle)}):React.createElement(FailedIcon,{className:"".concat(styles.failedIcon," ").concat(iconStyle," ").concat(failedIconStyle)}):React.createElement(NoValue,{className:iconStyle}),React.createElement(UTLabel,{className:styles.label,colorTheme:labelColor,variant:"small",withMarkdown:!0},requirement))};Validation.propTypes={assertion:bool,classes:objectOf(string),dataTestId:string,disabled:bool,NoValueIcon:elementType,requirement:string,shouldShowError:bool,ValidationFailedIcon:elementType,ValidationPassedIcon:elementType,value:string};export default Validation;
+import React from 'react';
+import ValidationPassed from '@material-ui/icons/CheckCircle';
+import ValidationFailed from '@material-ui/icons/Cancel';
+import PlaceholderIcon from '@material-ui/icons/FiberManualRecord';
+import { string, objectOf, bool, elementType } from 'prop-types';
+import UTLabel from '../../../../../../../UTLabel';
+import styles from './styles.module.scss';
+const Validation = _ref => {
+  let {
+    assertion,
+    classes,
+    dataTestId,
+    disabled,
+    NoValueIcon,
+    requirement,
+    shouldShowError,
+    ValidationFailedIcon,
+    ValidationPassedIcon,
+    value
+  } = _ref;
+  const {
+    passedIconStyle,
+    failedIconStyle,
+    iconStyle
+  } = classes;
+  const PassedIcon = ValidationPassedIcon || ValidationPassed;
+  const FailedIcon = ValidationFailedIcon || ValidationFailed;
+  const NoValue = NoValueIcon || PlaceholderIcon;
+  const labelColor = !value && !shouldShowError ? 'gray' : assertion ? 'success' : 'error';
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    "data-testid": dataTestId
+  }, value || shouldShowError && !disabled ? assertion ? /*#__PURE__*/React.createElement(PassedIcon, {
+    className: "".concat(styles.passedIcon, " ").concat(iconStyle, " ").concat(passedIconStyle)
+  }) : /*#__PURE__*/React.createElement(FailedIcon, {
+    className: "".concat(styles.failedIcon, " ").concat(iconStyle, " ").concat(failedIconStyle)
+  }) : /*#__PURE__*/React.createElement(NoValue, {
+    className: iconStyle
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.label,
+    colorTheme: labelColor,
+    variant: "small",
+    withMarkdown: true
+  }, requirement));
+};
+Validation.propTypes = {
+  assertion: bool,
+  classes: objectOf(string),
+  dataTestId: string,
+  disabled: bool,
+  NoValueIcon: elementType,
+  requirement: string,
+  shouldShowError: bool,
+  ValidationFailedIcon: elementType,
+  ValidationPassedIcon: elementType,
+  value: string
+};
+export default Validation;