@widergy/energy-ui 3.189.0 → 3.190.1

package/CHANGELOG.md

@@ -1,9 +1,32 @@
+## [3.190.1](https://github.com/widergy/energy-ui/compare/v3.190.0...v3.190.1) (2026-10-01)
+
+
+### Bug Fixes
+
+* trigger new patch release ([a1041dc](https://github.com/widergy/energy-ui/commit/a1041dcaa62c417f3b37d989877af9e3eef0fcc1))
+
+# [3.190.0](https://github.com/widergy/energy-ui/compare/v3.189.0...v3.190.0) (2026-09-29)
+
+### Novedades y Mejoras
+
+* Los campos de selección múltiple ahora permiten definir un límite máximo de opciones seleccionables; al alcanzarlo, las opciones restantes se bloquean automáticamente. [#879](https://github.com/widergy/Energy-UI/pull/879) [EGIT-400](https://widergy.atlassian.net/browse/EGIT-400)
+* Los menús desplegables de selección ahora pueden mostrar un texto de ayuda para orientar al usuario. [#878](https://github.com/widergy/Energy-UI/pull/878) [EGIT-399](https://widergy.atlassian.net/browse/EGIT-399)
+
+### Correcciones
+
+* Se corrigió un problema por el que, al colapsar un panel, el botón para reabrirlo desaparecía. Además, la barra de control ahora permanece visible en todo momento, el botón de cierre se desplaza con una transición suave y la barra ya no se deforma al colapsar paneles con paginación. [#867](https://github.com/widergy/Energy-UI/pull/867) [AXAG-407](https://widergy.atlassian.net/browse/AXAG-407)
+* Mejoras internas de la plataforma. [`5d4b3c4`](https://github.com/widergy/Energy-UI/commit/5d4b3c4)
+
 # [3.189.0](https://github.com/widergy/energy-ui/compare/v3.188.7...v3.189.0) (2026-09-28)
 
+### Novedades y Mejoras
 
-### Features
+* Los archivos adjuntos en formatos de imagen modernos ahora se convierten automáticamente a un formato compatible al ser cargados, sin interrumpir el flujo del usuario en caso de error durante la conversión. [#874](https://github.com/widergy/Energy-UI/pull/874) [CX-3046](https://widergy.atlassian.net/browse/CX-3046)
+
+### Correcciones
 
-* [CX-3046] heic to jpeg attachment ([#874](https://github.com/widergy/energy-ui/issues/874)) ([8c03564](https://github.com/widergy/energy-ui/commit/8c03564f1d998c8c1c194c47216c541b65185648))
+* Se corrigió un problema por el que, al adjuntar un archivo que no requería reducción de tamaño, el sistema descartaba silenciosamente la versión procesada del archivo y enviaba el original en su lugar. [#874](https://github.com/widergy/Energy-UI/pull/874) [CX-3046](https://widergy.atlassian.net/browse/CX-3046)
+* Mejoras internas de la plataforma. [`2f31c22`](https://github.com/widergy/Energy-UI/commit/2f31c22)
 
 ## [3.188.7](https://github.com/widergy/energy-ui/compare/v3.188.6...v3.188.7) (2026-09-25)
 

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../../../../../UTButton")),_UTLabel=_interopRequireDefault(require("../../../../../UTLabel")),_index=_interopRequireDefault(require("../../../../../UTProgressBar/index.js")),_testIds=require("../../../../../../constants/testIds"),_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(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var a in o)({}).hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e},_extends.apply(null,arguments)}const{panel:panel}=_testIds.TEST_IDS,ControlAreaSection=e=>{let{backButton:t,backButtonClass:o,backButtonDataTestId:a,classes:r,closeButtonClass:n,closeButtonDataTestId:s,currentPage:l,currentStep:p,hideCloseButton:u,iconBackClass:c,iconCloseClass:i,isWorkflow:d,nextButton:_,onClose:f,onGoBack:T,onOpen:y,open:b,panelIsCollapsible:B,showBackButton:C,showPagination:m,stepsCount:g,totalPages:I}=e;return C||m||!u||d||B?_react.default.createElement("div",{className:_stylesModule.default.controlAreaContainer},_react.default.createElement("div",{className:_stylesModule.default.controlAreaBar},_react.default.createElement("div",{className:_stylesModule.default.controlLeftArea},C&&_react.default.createElement("div",{className:_stylesModule.default.backButtonContainer},_react.default.createElement(_UTButton.default,{classNames:{icon:c,root:o},dataTestId:a,Icon:"IconArrowLeft",onClick:T,variant:"text"})),m&&_react.default.createElement("div",{className:_stylesModule.default.paginationContainer},_react.default.createElement(_UTLabel.default,{colorTheme:"gray"},"".concat(l," / ").concat(I)),_react.default.createElement(_UTButton.default,_extends({dataTestId:panel.paginationPrev,Icon:"IconChevronLeft",variant:"text"},t)),_react.default.createElement(_UTButton.default,_extends({dataTestId:panel.paginationNext,Icon:"IconChevronRight",variant:"text"},_)))),(B||!u)&&_react.default.createElement(_UTButton.default,{classNames:{icon:i,root:n},dataTestId:s,Icon:B?"IconLayoutSidebarRight":"IconX",onClick:B&&!b?y:f,variant:"text"})),d&&_react.default.createElement(_index.default,{classNames:{barColorPrimary:r.barColorPrimary,colorPrimary:r.colorPrimary,container:_stylesModule.default.progressBarContainer},value:100*p/g})):null};ControlAreaSection.propTypes={backButton:_propTypes.object,backButtonClass:_propTypes.string,backButtonDataTestId:_propTypes.string,classes:_propTypes.object,closeButtonClass:_propTypes.string,closeButtonDataTestId:_propTypes.string,currentPage:_propTypes.number,currentStep:_propTypes.number,hideCloseButton:_propTypes.bool,iconBackClass:_propTypes.string,iconCloseClass:_propTypes.string,isWorkflow:_propTypes.bool,nextButton:_propTypes.object,onClose:_propTypes.func,onGoBack:_propTypes.func,onOpen:_propTypes.func,open:_propTypes.bool,panelIsCollapsible:_propTypes.bool,showBackButton:_propTypes.bool,showPagination:_propTypes.bool,stepsCount:_propTypes.number,totalPages:_propTypes.number};var _default=exports.default=ControlAreaSection;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../../../../../UTButton")),_UTLabel=_interopRequireDefault(require("../../../../../UTLabel")),_index=_interopRequireDefault(require("../../../../../UTProgressBar/index.js")),_testIds=require("../../../../../../constants/testIds"),_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(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var a in o)({}).hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e},_extends.apply(null,arguments)}const{panel:panel}=_testIds.TEST_IDS,ControlAreaSection=e=>{let{backButton:t,backButtonClass:o,backButtonDataTestId:a,classes:r,closeButtonClass:n,closeButtonDataTestId:s,currentPage:l,currentStep:p,hideCloseButton:c,iconBackClass:u,iconCloseClass:i,isWorkflow:d,nextButton:_,onClose:f,onGoBack:T,onOpen:y,open:C,panelIsCollapsed:b,panelIsCollapsible:B,showBackButton:m,showPagination:I,stepsCount:g,totalPages:v}=e;return m||I||!c||d||B?_react.default.createElement("div",{className:_stylesModule.default.controlAreaContainer},_react.default.createElement("div",{className:_stylesModule.default.controlAreaBar},_react.default.createElement("div",{className:"".concat(_stylesModule.default.controlLeftArea," ").concat(b?_stylesModule.default.controlLeftAreaCollapsed:"")},m&&_react.default.createElement("div",{className:_stylesModule.default.backButtonContainer},_react.default.createElement(_UTButton.default,{classNames:{icon:u,root:o},dataTestId:a,Icon:"IconArrowLeft",onClick:T,variant:"text"})),I&&_react.default.createElement("div",{className:_stylesModule.default.paginationContainer},_react.default.createElement(_UTLabel.default,{colorTheme:"gray"},"".concat(l," / ").concat(v)),_react.default.createElement(_UTButton.default,_extends({dataTestId:panel.paginationPrev,Icon:"IconChevronLeft",variant:"text"},t)),_react.default.createElement(_UTButton.default,_extends({dataTestId:panel.paginationNext,Icon:"IconChevronRight",variant:"text"},_)))),(B||!c)&&_react.default.createElement(_UTButton.default,{classNames:{icon:i,root:n},dataTestId:s,Icon:B?"IconLayoutSidebarRight":"IconX",onClick:B&&!C?y:f,variant:"text"})),!b&&d&&_react.default.createElement(_index.default,{classNames:{barColorPrimary:r.barColorPrimary,colorPrimary:r.colorPrimary,container:_stylesModule.default.progressBarContainer},value:100*p/g})):null};ControlAreaSection.propTypes={backButton:_propTypes.object,backButtonClass:_propTypes.string,backButtonDataTestId:_propTypes.string,classes:_propTypes.object,closeButtonClass:_propTypes.string,closeButtonDataTestId:_propTypes.string,currentPage:_propTypes.number,currentStep:_propTypes.number,hideCloseButton:_propTypes.bool,iconBackClass:_propTypes.string,iconCloseClass:_propTypes.string,isWorkflow:_propTypes.bool,nextButton:_propTypes.object,onClose:_propTypes.func,onGoBack:_propTypes.func,onOpen:_propTypes.func,open:_propTypes.bool,panelIsCollapsed:_propTypes.bool,panelIsCollapsible:_propTypes.bool,showBackButton:_propTypes.bool,showPagination:_propTypes.bool,stepsCount:_propTypes.number,totalPages:_propTypes.number};var _default=exports.default=ControlAreaSection;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_SwipeableDrawer=_interopRequireDefault(require("@material-ui/core/SwipeableDrawer")),_propTypes=require("prop-types"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_index=_interopRequireDefault(require("../../../WithTheme/index.js")),_testIds=require("../../../../constants/testIds.js"),_classesUtils=require("../../../../utils/classesUtils.js"),_AdditionalContentModule=_interopRequireDefault(require("./components/AdditionalContentModule")),_ControlAreaSection=_interopRequireDefault(require("./components/ControlAreaSection")),_HeaderSection=_interopRequireDefault(require("./components/HeaderSection")),_BodySection=_interopRequireDefault(require("./components/BodySection")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants.js"),_theme=require("./theme");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var o=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,p,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(s=t?n:o){if(s.has(e))return s.get(e);s.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((p=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(p.get||p.set)?s(a,t,p):a[t]=e[t]);return a})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_extends.apply(null,arguments)}const{panel:panel}=_testIds.TEST_IDS,UTPanel=e=>{var t;let{additionalContent:o,backButtonDataTestId:n=panel.backButton,BackdropProps:s={},children:p,classes:a,classNames:r,closeButtonDataTestId:l=panel.closeButton,collapsableHeader:i=!1,collapsablePanel:c=!1,currentStep:d=1,CustomHeaderComponent:u,disableScrollbar:_=!1,HeaderComponent:y,headerItems:T,headerMainActionButton:f={},headerSecondaryActionButton:b={},hideCloseButton:m=!1,hideHeader:C=!1,hideMainButton:h=!1,inline:g=!1,isWorkflow:B=!1,mainActionDataTestId:S=panel.mainAction,mainButton:P={},modalProps:M,onClose:k,onEndReachedCallback:I,onGoBack:w=()=>{},onOpen:q=()=>{},open:D,openAdditionalContentRequest:A,paginationProps:v={},panelSide:j,perfectScrollbarOptions:O,pretitleComponent:R,secondaryActionDataTestId:E=panel.secondaryAction,showBackButton:H=!1,showMainStatus:x=!1,showPagination:W=!1,showTag:N=!1,singleHeaderItemsColumn:U=!1,size:z="M",statusProps:G={},stepsCount:Z,subtitle:F="",tagProps:J={},title:K="",titleDataTestId:L=panel.title,titleProps:Q={},...V}=e;const X=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(a,r),[r,a]),[Y,$]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{var e;o&&o.length>0&&(null!==(e=o[0])&&void 0!==e&&e.collapse?$(null):$(o[0].id))},[o]),(0,_react.useEffect)(()=>{null!=A&&A.id&&$(A.id)},[A]);const ee=c&&g,te=ee&&!D,oe=!(0,_isEmpty.default)(o),{nextButton:ne={},backButton:se={},currentPage:pe=1,totalPages:ae=1}=v,{backButton:re,closeButton:le,iconBack:ie,iconClose:ce,perfectScrollbar:de,...ue}=X;return _react.default.createElement(_SwipeableDrawer.default,_extends({anchor:j,BackdropProps:{...s,classes:{root:ue.backdrop,...null==s?void 0:s.classes}},classes:{...ue,paper:"\n          ".concat(_stylesModule.default.paper,"\n          ").concat(ee&&D&&_stylesModule.default.collapsedPaper,"\n          ").concat(ue.paper,"\n          ").concat(_stylesModule.default[_constants.SIZES[z]],"\n          ").concat(oe&&Y&&_stylesModule.default.withAdditionalContent,"\n          ").concat(oe&&!Y&&_stylesModule.default.withAdditionalContentCollapsed,"\n        "),root:ue.root,docked:"\n          ".concat(_stylesModule.default[_constants.SIZES[z]],"\n          ").concat(_stylesModule.default.docked,"\n          ").concat(te&&_stylesModule.default.collapsed,"\n          ").concat(!D&&!c&&_stylesModule.default.closedPersistentPanel,"\n          ").concat(oe&&Y&&_stylesModule.default.withAdditionalContentDocked,"\n          ").concat(oe&&!Y&&_stylesModule.default.withAdditionalContentCollapsedDocked,"\n        ")},disablePortal:g,disableSwipeToOpen:!0,ModalProps:{...M},onClose:k,onOpen:q,open:ee||D,swipeAreaWidth:0,variant:g?c?"permanent":"persistent":"temporary"},V),!te&&_react.default.createElement("div",{className:_stylesModule.default.panelWrapper},_react.default.createElement(_ControlAreaSection.default,{backButton:se,backButtonClass:re,backButtonDataTestId:n,classes:X,closeButtonClass:le,closeButtonDataTestId:l,currentPage:pe,currentStep:d,hideCloseButton:m,iconBackClass:ie,iconCloseClass:ce,isWorkflow:B,nextButton:ne,onClose:k,onGoBack:w,onOpen:q,open:D,panelIsCollapsible:ee,showBackButton:H,showPagination:W,stepsCount:Z,totalPages:ae}),_react.default.createElement("div",{className:_stylesModule.default.contentRowContainer},_react.default.createElement("div",{className:_stylesModule.default.mainContentSection},_react.default.createElement(_HeaderSection.default,{classes:X,collapsableHeader:i,CustomHeaderComponent:u,HeaderComponent:y,headerItems:T,headerMainActionButton:f,headerSecondaryActionButton:b,hideHeader:C,mainActionDataTestId:S,pretitleComponent:R,secondaryActionDataTestId:E,showMainStatus:x,showTag:N,singleHeaderItemsColumn:U,statusProps:G,subtitle:F,tagProps:J,title:K,titleClass:X.title,titleDataTestId:L,titleProps:Q}),_react.default.createElement(_BodySection.default,{bodyContainerClass:"".concat(_stylesModule.default.bodyContainer," ").concat(null!==(t=null==X?void 0:X.bodyContainer)&&void 0!==t?t:""),disableScrollbar:_,hideMainButton:h,mainButton:P,onEndReachedCallback:I,perfectScrollbarClass:de,perfectScrollbarOptions:O},p)),oe&&_react.default.createElement(_AdditionalContentModule.default,{activeId:Y,additionalContent:o,onSelectItem:$}))))};UTPanel.propTypes={additionalContent:(0,_propTypes.arrayOf)((0,_propTypes.shape)({id:_propTypes.string.isRequired,Icon:_propTypes.string.isRequired,count:_propTypes.number,BodyComponent:_propTypes.elementType.isRequired,tooltipProps:_propTypes.object.isRequired})),backButtonDataTestId:_propTypes.string,BackdropProps:_propTypes.object,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:_propTypes.object,closeButtonDataTestId:_propTypes.string,collapsableHeader:_propTypes.bool,collapsablePanel:_propTypes.bool,currentStep:_propTypes.number,disableScrollbar:_propTypes.bool,CustomHeaderComponent:_propTypes.elementType,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}),hideCloseButton:_propTypes.bool,hideHeader:_propTypes.bool,hideMainButton:_propTypes.bool,inline:_propTypes.bool,isWorkflow:_propTypes.bool,mainActionDataTestId:_propTypes.string,mainButton:_propTypes.object,modalProps:_propTypes.object,onClose:_propTypes.func,onEndReachedCallback:_propTypes.func,onGoBack:_propTypes.func,onOpen:_propTypes.func,open:_propTypes.bool,openAdditionalContentRequest:_propTypes.object,panelSide:_propTypes.string,perfectScrollbarOptions:_propTypes.object,pretitleComponent:(0,_propTypes.oneOfType)([_propTypes.element,_propTypes.elementType]),secondaryActionDataTestId:_propTypes.string,singleHeaderItemsColumn:_propTypes.bool,size:(0,_propTypes.oneOf)(Object.keys(_constants.SIZES)),showBackButton:_propTypes.bool,showMainStatus:_propTypes.bool,showTag:_propTypes.bool,showPagination:_propTypes.bool,statusProps:_propTypes.object,stepsCount:_propTypes.number,currentPage:_propTypes.number,totalPages:_propTypes.number,subtitle:_propTypes.string,paginationProps:_propTypes.object,tagProps:(0,_propTypes.shape)({classes:(0,_propTypes.objectOf)(_propTypes.string),className:_propTypes.string,Icon:_propTypes.elementType,iconProps:_propTypes.object,labelDataTestId:_propTypes.string,size:_propTypes.string,title:_propTypes.string,type:_propTypes.string,variant:_propTypes.string,withoutIcon:_propTypes.bool}),title:_propTypes.string,titleDataTestId:_propTypes.string,titleProps:_propTypes.object};var _default=exports.default=(0,_index.default)(_theme.retrieveStyle)(UTPanel);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_SwipeableDrawer=_interopRequireDefault(require("@material-ui/core/SwipeableDrawer")),_propTypes=require("prop-types"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_index=_interopRequireDefault(require("../../../WithTheme/index.js")),_testIds=require("../../../../constants/testIds.js"),_classesUtils=require("../../../../utils/classesUtils.js"),_AdditionalContentModule=_interopRequireDefault(require("./components/AdditionalContentModule")),_ControlAreaSection=_interopRequireDefault(require("./components/ControlAreaSection")),_HeaderSection=_interopRequireDefault(require("./components/HeaderSection")),_BodySection=_interopRequireDefault(require("./components/BodySection")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants.js"),_theme=require("./theme");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var o=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,p,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(s=t?n:o){if(s.has(e))return s.get(e);s.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((p=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(p.get||p.set)?s(a,t,p):a[t]=e[t]);return a})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_extends.apply(null,arguments)}const{panel:panel}=_testIds.TEST_IDS,UTPanel=e=>{var t;let{additionalContent:o,backButtonDataTestId:n=panel.backButton,BackdropProps:s={},children:p,classes:a,classNames:r,closeButtonDataTestId:l=panel.closeButton,collapsableHeader:i=!1,collapsablePanel:c=!1,currentStep:d=1,CustomHeaderComponent:u,disableScrollbar:_=!1,HeaderComponent:y,headerItems:T,headerMainActionButton:f={},headerSecondaryActionButton:b={},hideCloseButton:m=!1,hideHeader:C=!1,hideMainButton:h=!1,inline:g=!1,isWorkflow:B=!1,mainActionDataTestId:S=panel.mainAction,mainButton:P={},modalProps:M,onClose:k,onEndReachedCallback:I,onGoBack:w=()=>{},onOpen:q=()=>{},open:D,openAdditionalContentRequest:A,paginationProps:v={},panelSide:j,perfectScrollbarOptions:O,pretitleComponent:R,secondaryActionDataTestId:E=panel.secondaryAction,showBackButton:H=!1,showMainStatus:x=!1,showPagination:W=!1,showTag:N=!1,singleHeaderItemsColumn:U=!1,size:z="M",statusProps:G={},stepsCount:Z,subtitle:F="",tagProps:J={},title:K="",titleDataTestId:L=panel.title,titleProps:Q={},...V}=e;const X=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(a,r),[r,a]),[Y,$]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{var e;o&&o.length>0&&(null!==(e=o[0])&&void 0!==e&&e.collapse?$(null):$(o[0].id))},[o]),(0,_react.useEffect)(()=>{null!=A&&A.id&&$(A.id)},[A]);const ee=c&&g,te=ee&&!D,oe=!(0,_isEmpty.default)(o),{nextButton:ne={},backButton:se={},currentPage:pe=1,totalPages:ae=1}=v,{backButton:re,closeButton:le,iconBack:ie,iconClose:ce,perfectScrollbar:de,...ue}=X;return _react.default.createElement(_SwipeableDrawer.default,_extends({anchor:j,BackdropProps:{...s,classes:{root:ue.backdrop,...null==s?void 0:s.classes}},classes:{...ue,paper:"\n          ".concat(_stylesModule.default.paper,"\n          ").concat(ee&&D&&_stylesModule.default.collapsedPaper,"\n          ").concat(ue.paper,"\n          ").concat(_stylesModule.default[_constants.SIZES[z]],"\n          ").concat(oe&&Y&&_stylesModule.default.withAdditionalContent,"\n          ").concat(oe&&!Y&&_stylesModule.default.withAdditionalContentCollapsed,"\n        "),root:ue.root,docked:"\n          ".concat(_stylesModule.default[_constants.SIZES[z]],"\n          ").concat(_stylesModule.default.docked,"\n          ").concat(te&&_stylesModule.default.collapsed,"\n          ").concat(!D&&!c&&_stylesModule.default.closedPersistentPanel,"\n          ").concat(oe&&Y&&_stylesModule.default.withAdditionalContentDocked,"\n          ").concat(oe&&!Y&&_stylesModule.default.withAdditionalContentCollapsedDocked,"\n        ")},disablePortal:g,disableSwipeToOpen:!0,ModalProps:{...M},onClose:k,onOpen:q,open:ee||D,swipeAreaWidth:0,variant:g?c?"permanent":"persistent":"temporary"},V),_react.default.createElement("div",{className:_stylesModule.default.panelWrapper},_react.default.createElement(_ControlAreaSection.default,{backButton:se,backButtonClass:re,backButtonDataTestId:n,classes:X,closeButtonClass:le,closeButtonDataTestId:l,currentPage:pe,currentStep:d,hideCloseButton:m,iconBackClass:ie,iconCloseClass:ce,isWorkflow:B,nextButton:ne,onClose:k,onGoBack:w,onOpen:q,open:D,panelIsCollapsed:te,panelIsCollapsible:ee,showBackButton:H,showPagination:W,stepsCount:Z,totalPages:ae}),!te&&_react.default.createElement("div",{className:_stylesModule.default.contentRowContainer},_react.default.createElement("div",{className:_stylesModule.default.mainContentSection},_react.default.createElement(_HeaderSection.default,{classes:X,collapsableHeader:i,CustomHeaderComponent:u,HeaderComponent:y,headerItems:T,headerMainActionButton:f,headerSecondaryActionButton:b,hideHeader:C,mainActionDataTestId:S,pretitleComponent:R,secondaryActionDataTestId:E,showMainStatus:x,showTag:N,singleHeaderItemsColumn:U,statusProps:G,subtitle:F,tagProps:J,title:K,titleClass:X.title,titleDataTestId:L,titleProps:Q}),_react.default.createElement(_BodySection.default,{bodyContainerClass:"".concat(_stylesModule.default.bodyContainer," ").concat(null!==(t=null==X?void 0:X.bodyContainer)&&void 0!==t?t:""),disableScrollbar:_,hideMainButton:h,mainButton:P,onEndReachedCallback:I,perfectScrollbarClass:de,perfectScrollbarOptions:O},p)),oe&&_react.default.createElement(_AdditionalContentModule.default,{activeId:Y,additionalContent:o,onSelectItem:$}))))};UTPanel.propTypes={additionalContent:(0,_propTypes.arrayOf)((0,_propTypes.shape)({id:_propTypes.string.isRequired,Icon:_propTypes.string.isRequired,count:_propTypes.number,BodyComponent:_propTypes.elementType.isRequired,tooltipProps:_propTypes.object.isRequired})),backButtonDataTestId:_propTypes.string,BackdropProps:_propTypes.object,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:_propTypes.object,closeButtonDataTestId:_propTypes.string,collapsableHeader:_propTypes.bool,collapsablePanel:_propTypes.bool,currentStep:_propTypes.number,disableScrollbar:_propTypes.bool,CustomHeaderComponent:_propTypes.elementType,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}),hideCloseButton:_propTypes.bool,hideHeader:_propTypes.bool,hideMainButton:_propTypes.bool,inline:_propTypes.bool,isWorkflow:_propTypes.bool,mainActionDataTestId:_propTypes.string,mainButton:_propTypes.object,modalProps:_propTypes.object,onClose:_propTypes.func,onEndReachedCallback:_propTypes.func,onGoBack:_propTypes.func,onOpen:_propTypes.func,open:_propTypes.bool,openAdditionalContentRequest:_propTypes.object,panelSide:_propTypes.string,perfectScrollbarOptions:_propTypes.object,pretitleComponent:(0,_propTypes.oneOfType)([_propTypes.element,_propTypes.elementType]),secondaryActionDataTestId:_propTypes.string,singleHeaderItemsColumn:_propTypes.bool,size:(0,_propTypes.oneOf)(Object.keys(_constants.SIZES)),showBackButton:_propTypes.bool,showMainStatus:_propTypes.bool,showTag:_propTypes.bool,showPagination:_propTypes.bool,statusProps:_propTypes.object,stepsCount:_propTypes.number,currentPage:_propTypes.number,totalPages:_propTypes.number,subtitle:_propTypes.string,paginationProps:_propTypes.object,tagProps:(0,_propTypes.shape)({classes:(0,_propTypes.objectOf)(_propTypes.string),className:_propTypes.string,Icon:_propTypes.elementType,iconProps:_propTypes.object,labelDataTestId:_propTypes.string,size:_propTypes.string,title:_propTypes.string,type:_propTypes.string,variant:_propTypes.string,withoutIcon:_propTypes.bool}),title:_propTypes.string,titleDataTestId:_propTypes.string,titleProps:_propTypes.object};var _default=exports.default=(0,_index.default)(_theme.retrieveStyle)(UTPanel);

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

@@ -1,5 +1,5 @@
 $body-component-width: 450px;
-$collapsed-panel-size: 58px;
+$collapsed-panel-size: 54px;
 $large-panel-size: 600px;
 $medium-panel-size: 450px;
 $sidebar-width: 56px;
@@ -24,18 +24,27 @@ $additional-content-total: $body-component-width + $sidebar-width;
   display: flex;
   flex: 1;
   gap: var(--UT-panel-gap-sm, 8px);
+  opacity: 1;
+  overflow: hidden;
+  transition: flex-grow 0.3s ease, opacity 0.3s ease;
+}
+
+.controlLeftAreaCollapsed {
+  flex-grow: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .backButtonContainer {
   align-items: center;
   display: flex;
+  flex-shrink: 0;
 }
 
 .controlAreaBar {
   align-items: center;
   display: flex;
-  gap: var(--UT-panel-gap-sm, 8px);
-  justify-content: space-between;
+  justify-content: center;
   padding: var(--UT-panel-padding-xs, 8px);
 }
 
@@ -48,7 +57,9 @@ $additional-content-total: $body-component-width + $sidebar-width;
 .paginationContainer {
   align-items: center;
   display: flex;
+  flex-shrink: 0;
   grid-gap: var(--UT-panel-gap-lg, 16px);
+  white-space: nowrap;
 }
 
 .contentRowContainer {
@@ -148,6 +159,14 @@ $additional-content-total: $body-component-width + $sidebar-width;
   &.withAdditionalContentCollapsed {
     width: $small-panel-size + $sidebar-width;
   }
+
+  &.withAdditionalContentDocked {
+    width: $small-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsedDocked {
+    width: $small-panel-size + $sidebar-width;
+  }
 }
 
 .large {
@@ -160,6 +179,14 @@ $additional-content-total: $body-component-width + $sidebar-width;
   &.withAdditionalContentCollapsed {
     width: $large-panel-size + $sidebar-width;
   }
+
+  &.withAdditionalContentDocked {
+    width: $large-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsedDocked {
+    width: $large-panel-size + $sidebar-width;
+  }
 }
 
 .medium {
@@ -172,6 +199,14 @@ $additional-content-total: $body-component-width + $sidebar-width;
   &.withAdditionalContentCollapsed {
     width: $medium-panel-size + $sidebar-width;
   }
+
+  &.withAdditionalContentDocked {
+    width: $medium-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsedDocked {
+    width: $medium-panel-size + $sidebar-width;
+  }
 }
 
 .bodyContainer {
@@ -207,6 +242,7 @@ $additional-content-total: $body-component-width + $sidebar-width;
   .paper {
     overflow: hidden;
     position: relative;
+    transition: width 0.3s ease;
     z-index: 1;
   }
 
@@ -215,10 +251,6 @@ $additional-content-total: $body-component-width + $sidebar-width;
   }
 }
 
-.withAdditionalContentCollapsedDocked {
-  transition: width 0.3s ease;
-}
-
 .closedPersistentPanel {
   width: 0;
 }
@@ -226,6 +258,11 @@ $additional-content-total: $body-component-width + $sidebar-width;
 .collapsed {
   width: $collapsed-panel-size;
 
+  &.withAdditionalContentDocked,
+  &.withAdditionalContentCollapsedDocked {
+    width: $collapsed-panel-size;
+  }
+
   .small,
   .medium,
   .large {

package/dist/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_react=_interopRequireWildcard(require("react")),_reactPerfectScrollbar=_interopRequireDefault(require("react-perfect-scrollbar")),_propTypes=require("prop-types"),_isFinite=_interopRequireDefault(require("lodash/isFinite")),_UTLabel=_interopRequireDefault(require("../../../../../UTLabel")),_UTCheckList=_interopRequireDefault(require("../../../../../UTCheckList")),_constants=require("../../../../../UTCheckList/versions/V1/constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants2=require("./constants");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,s,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?n(o,t,s):o[t]=e[t]);return o})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}const ListboxComponent=e=>{let{CustomRow:t,dataTestId:r,filteredOptions:a,fixedBottomOption:n,handleSelectionChange:s,horizontalSpacing:o=_constants.SPACING.SMALL,itemDataTestId:p,maxHeight:i=_constants2.DEFAULT_MAX_HEIGHT,multiple:l,noMatchesText:u,value:_,verticalSpacing:c=_constants.SPACING.SMALL}=e;const f=(0,_react.useMemo)(()=>(0,_isEmpty.default)(a),[a]),d=(0,_react.useMemo)(()=>(0,_isFinite.default)(i)?i:_constants2.DEFAULT_MAX_HEIGHT,[i]),y=(0,_react.useRef)(null),[T,m]=(0,_react.useState)(0);(0,_react.useLayoutEffect)(()=>{y.current&&m(y.current.offsetHeight)},[n]);const g=d-T,h={CustomRow:t,horizontalSpacing:o,isSimple:!l,itemDataTestId:p,onChange:s,reversed:!0,showSelectAll:!1,value:l?_:[_],variant:"button",version:"V1",verticalSpacing:c};return _react.default.createElement("div",{className:_stylesModule.default.listbox},f?_react.default.createElement(_UTLabel.default,{colorTheme:"gray",className:_stylesModule.default.noOptionsLabel},u):_react.default.createElement(_reactPerfectScrollbar.default,{style:{maxHeight:g}},_react.default.createElement(_UTCheckList.default,_extends({},h,{dataTestId:r,options:a}))),n&&_react.default.createElement("div",{ref:y},_react.default.createElement("div",{className:_stylesModule.default.fixedOptionDivider}),_react.default.createElement(_UTCheckList.default,_extends({},h,{onChange:e=>{l||0!==e.length?s(e):s([n.value])},options:[n]}))))};ListboxComponent.propTypes={CustomRow:_propTypes.elementType,dataTestId:_propTypes.string,filteredOptions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])})),fixedBottomOption:(0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])}),handleSelectionChange:_propTypes.func,horizontalSpacing:_propTypes.string,itemDataTestId:_propTypes.string,maxHeight:_propTypes.number,multiple:_propTypes.bool,noMatchesText:_propTypes.string,value:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)((0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])),_propTypes.string,_propTypes.number]),verticalSpacing:_propTypes.string};var _default=exports.default=ListboxComponent;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_react=_interopRequireWildcard(require("react")),_reactPerfectScrollbar=_interopRequireDefault(require("react-perfect-scrollbar")),_propTypes=require("prop-types"),_isFinite=_interopRequireDefault(require("lodash/isFinite")),_UTLabel=_interopRequireDefault(require("../../../../../UTLabel")),_UTCheckList=_interopRequireDefault(require("../../../../../UTCheckList")),_constants=require("../../../../../UTCheckList/versions/V1/constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants2=require("./constants"),_utils=require("./utils");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,n,p={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return p;if(s=t?a:r){if(s.has(e))return s.get(e);s.set(e,p)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?s(p,t,n):p[t]=e[t]);return p})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}const ListboxComponent=e=>{let{CustomRow:t,dataTestId:r,filteredOptions:a,fixedBottomOption:s,handleSelectionChange:n,helpText:p,helpTextDataTestId:o,horizontalSpacing:l=_constants.SPACING.SMALL,itemDataTestId:i,maxHeight:u=_constants2.DEFAULT_MAX_HEIGHT,maxOptions:_,multiple:c,noMatchesText:d,value:f,verticalSpacing:T=_constants.SPACING.SMALL}=e;const y=(0,_react.useMemo)(()=>(0,_isEmpty.default)(a),[a]),m=(0,_react.useMemo)(()=>(0,_isFinite.default)(u)?u:_constants2.DEFAULT_MAX_HEIGHT,[u]),h=(0,_react.useRef)(null),[g,v]=(0,_react.useState)(0);(0,_react.useLayoutEffect)(()=>{h.current&&v(h.current.offsetHeight)},[s]);const b=m-g,x={CustomRow:t,horizontalSpacing:l,isSimple:!c,itemDataTestId:i,onChange:n,reversed:!0,showSelectAll:!1,value:c?f:[f],variant:"button",version:"V1",verticalSpacing:T},O=p&&_react.default.createElement("div",{className:_stylesModule.default.helpText,onMouseDown:e=>e.preventDefault(),role:"presentation"},_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.helpTextLabel,colorTheme:"gray",dataTestId:o,shade:"04",variant:"small"},p));return _react.default.createElement("div",{className:_stylesModule.default.listbox},y?_react.default.createElement(_react.default.Fragment,null,O,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",className:_stylesModule.default.noOptionsLabel},d)):_react.default.createElement(_reactPerfectScrollbar.default,{style:{maxHeight:b}},O,_react.default.createElement(_UTCheckList.default,_extends({},x,{dataTestId:r,options:(0,_utils.limitOptions)(a,f,_)}))),s&&_react.default.createElement("div",{ref:h},_react.default.createElement("div",{className:_stylesModule.default.fixedOptionDivider}),_react.default.createElement(_UTCheckList.default,_extends({},x,{onChange:e=>{c||0!==e.length?n(e):n([s.value])},options:(0,_utils.limitOptions)([s],f,_)}))))};ListboxComponent.propTypes={CustomRow:_propTypes.elementType,dataTestId:_propTypes.string,filteredOptions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])})),fixedBottomOption:(0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])}),handleSelectionChange:_propTypes.func,helpText:_propTypes.string,helpTextDataTestId:_propTypes.string,horizontalSpacing:_propTypes.string,itemDataTestId:_propTypes.string,maxHeight:_propTypes.number,maxOptions:_propTypes.number,multiple:_propTypes.bool,noMatchesText:_propTypes.string,value:(0,_propTypes.oneOfType)([(0,_propTypes.arrayOf)((0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])),_propTypes.string,_propTypes.number]),verticalSpacing:_propTypes.string};var _default=exports.default=ListboxComponent;

package/dist/components/UTSelect/versions/V1/components/ListboxComponent/styles.module.scss

@@ -3,6 +3,14 @@
   flex-direction: column;
 }
 
+.helpText {
+  padding: var(--padding-sm, 12px) 0;
+}
+
+.helpTextLabel {
+  font-style: italic;
+}
+
 .noOptionsLabel {
   text-align: center;
 }

package/dist/components/UTSelect/versions/V1/components/ListboxComponent/utils.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.limitOptions=void 0;const limitOptions=(i,t,e)=>!e||!Array.isArray(t)||t.length<e?i:i.map(i=>({...i,disabled:i.disabled||!t.includes(i.value)}));exports.limitOptions=limitOptions;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _clone=_interopRequireDefault(require("lodash/clone")),_react=_interopRequireWildcard(require("react")),_lab=require("@material-ui/lab"),_Popper=_interopRequireDefault(require("@material-ui/core/Popper")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTPaper=_interopRequireDefault(require("../../../UTPaper")),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_utils=require("../../../UTValidation/utils"),_inputs=require("../../../../constants/inputs"),_InputComponent=_interopRequireDefault(require("./components/InputComponent")),_ListboxComponent=_interopRequireDefault(require("./components/ListboxComponent")),_types=require("./types"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants"),_utils2=require("./utils");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(l=t?r:a){if(l.has(e))return l.get(e);l.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?l(o,t,n):o[t]=e[t]);return o})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}const UTSelect=e=>{let{action:t,actions:a,alwaysShowPlaceholder:r=!0,autocompleteProps:l={},className:n,clearable:o=!0,CustomRow:s,dataTestId:i,disabled:u,disableFilterOptions:c=!1,error:p,errorDataTestId:d,fixedBottomOption:_,freeWidth:f=!1,hideSingleCategoryTitle:m=!1,paperClassName:y,helpText:T,icon:b,inputSize:h,itemDataTestId:g,listDataTestId:q,listProps:v={},menuWidth:C,multiple:x=!1,noMatchesText:O="No hay coincidencias con tu búsqueda",noOptionsText:R="No hay opciones disponibles",onChange:D=()=>{},onChangeSearchTerm:M=()=>{},options:L=[],placeholder:P,prefix:S,readOnly:w,required:U,suffix:E,title:I,titleVariant:A=_inputs.TITLE_VARIANTS.large,value:V=(x?[]:null),variant:N=_constants.VARIANTS.select,withAutoReset:W=!0}=e;const k=(0,_react.useMemo)(()=>{if(!L||0===L.length)return[];const e=(0,_clone.default)(L).map(e=>({...e,name:"".concat(e.name)})),t=new Map;e.forEach(e=>{t.has(e.category)||t.set(e.category,t.size)});const a=e.sort((e,a)=>t.get(e.category)-t.get(a.category));return m&&t.size<=1?a.map(e=>{let{category:t,...a}=e;return a}):a},[L,m]),j=(0,_react.useMemo)(()=>_?[...k,_]:k,[k,_]),[z,F]=(0,_react.useState)(!1),[B,G]=(0,_react.useState)((0,_utils2.getDisplayValue)(V,j,x)),[H,J]=(0,_react.useState)(!!B),[K,Q]=(0,_react.useState)(k),X=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{const e=_&&(x?Array.isArray(V)&&V.includes(_.value):V===(null==_?void 0:_.value));W&&!e&&(0,_utils2.shouldReset)(V,k,x)&&(D(null),Q((0,_utils2.sortOptions)(k,null,x)))},[x,D,k,V,W,_]),(0,_react.useEffect)(()=>{if(!z){const e=(0,_utils2.getDisplayValue)(V,j,x);G(e),J(e)}},[V,j,x,z]),(0,_react.useEffect)(()=>{z&&Q((0,_utils2.sortOptions)(k,V,x))},[k]),(0,_react.useEffect)(()=>{Q((0,_utils2.sortOptions)(k,V,x))},[]),(0,_react.useEffect)(()=>{z&&Q((0,_utils2.sortOptions)(k,V,x))},[z]);const Y=(0,_react.useMemo)(()=>p&&(0,_utils.formatErrorToValidation)(p),[p]),Z=N===_constants.VARIANTS.picker,$=(0,_react.useMemo)(()=>{const e=c||Z?K:K.filter(e=>"".concat(e.name).toLowerCase().includes(B.toLowerCase()));return _?e.filter(e=>e.value!==_.value):e},[K,B,c,Z,_]),ee=(0,_react.useCallback)(e=>{null==M||M(e),G(e)},[M]),te=(0,_react.useCallback)(e=>{F(!1);const t=(0,_utils2.getDisplayValue)(e,j,x);ee(t),J(""!==t)},[_utils2.getDisplayValue,j,x,ee]),ae=e=>{const t=x?e:e.length>0?e[0]:"";var a;(D(t),x)||(null===(a=X.current)||void 0===a||a.blur(),te(t))},re=()=>{J(!1),ee(""),F(!0)},le=()=>{te(V)},ne=()=>{D(x?[]:null),ee(""),J(!1),F(!1)},oe=(0,_react.useMemo)(()=>(0,_utils2.getLeftAdornments)({error:p,multiple:x,value:V,prefix:S,icon:b}),[x,V,S,b]),se=(0,_react.useMemo)(()=>(0,_utils2.getRightAdornments)({action:t,clearable:o,disabled:u,handleClearSelection:ne,readOnly:w,showClearButton:H,suffix:E,variant:N}),[E,H,o,u,t,ne,N]),ie=(0,_react.useMemo)(()=>({CustomRow:s,dataTestId:q,filteredOptions:$,fixedBottomOption:_,handleSelectionChange:ae,itemDataTestId:g,multiple:x,noMatchesText:O,value:V,...v}),[s,$,_,ae,x,O,V,v]),ue=(0,_react.useRef)(C);ue.current=C;const ce=(0,_react.useCallback)(e=>{const t=ue.current;return _react.default.createElement(_Popper.default,_extends({},e,t?{placement:"bottom-start"}:{},{style:t?{...e.style,width:t}:e.style}))},[]),pe=_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.noOptionsLabel,colorTheme:"gray"},R);return _react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(n)},I&&_react.default.createElement(_UTFieldLabel.default,{actions:a,required:U,size:A},I),_react.default.createElement(_lab.Autocomplete,_extends({classes:{...f&&!C?{popper:_stylesModule.default.popper}:{},...y?{paper:y}:{}},PopperComponent:ce,disabled:u||w,getOptionLabel:e=>"".concat(e.name),ListboxComponent:_ListboxComponent.default,ListboxProps:ie,multiple:x,noOptionsText:pe,onClose:()=>F(!1),onOpen:()=>F(!0),open:z,options:k,PaperComponent:_UTPaper.default,renderInput:e=>_react.default.createElement(_InputComponent.default,{alwaysShowPlaceholder:r,dataTestId:i,disabled:u,error:p,inputRef:X,inputSize:h,leftAdornments:oe,onBlur:le,onChange:ee,onFocus:re,params:e,placeholder:P,readOnly:w,rightAdornments:se,value:B,variant:N})},l)),T&&_react.default.createElement(_UTLabel.default,{colorTheme:"gray",variant:"small"},T),Y&&_react.default.createElement(_UTValidation.default,{dataTestId:d,validationData:Y}))};UTSelect.propTypes=_types.utselectTypes;var _default=exports.default=UTSelect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _clone=_interopRequireDefault(require("lodash/clone")),_react=_interopRequireWildcard(require("react")),_lab=require("@material-ui/lab"),_Popper=_interopRequireDefault(require("@material-ui/core/Popper")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTPaper=_interopRequireDefault(require("../../../UTPaper")),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_utils=require("../../../UTValidation/utils"),_inputs=require("../../../../constants/inputs"),_InputComponent=_interopRequireDefault(require("./components/InputComponent")),_ListboxComponent=_interopRequireDefault(require("./components/ListboxComponent")),_types=require("./types"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants"),_utils2=require("./utils");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(l=t?r:a){if(l.has(e))return l.get(e);l.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?l(o,t,n):o[t]=e[t]);return o})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}const UTSelect=e=>{let{action:t,actions:a,alwaysShowPlaceholder:r=!0,autocompleteProps:l={},className:n,clearable:o=!0,CustomRow:s,dataTestId:i,disabled:u,disableFilterOptions:c=!1,error:p,errorDataTestId:d,fixedBottomOption:_,freeWidth:f=!1,hideSingleCategoryTitle:m=!1,paperClassName:T,helpText:y,icon:h,inputSize:b,itemDataTestId:g,listDataTestId:q,listProps:x={},maxOptions:v,menuHelpText:O,menuHelpTextDataTestId:C,menuWidth:R,multiple:D=!1,noMatchesText:M="No hay coincidencias con tu búsqueda",noOptionsText:I="No hay opciones disponibles",onChange:L=()=>{},onChangeSearchTerm:P=()=>{},options:S=[],placeholder:w,prefix:U,readOnly:E,required:A,suffix:V,title:N,titleVariant:W=_inputs.TITLE_VARIANTS.large,value:k=(D?[]:null),variant:j=_constants.VARIANTS.select,withAutoReset:z=!0}=e;const F=(0,_react.useMemo)(()=>{if(!S||0===S.length)return[];const e=(0,_clone.default)(S).map(e=>({...e,name:"".concat(e.name)})),t=new Map;e.forEach(e=>{t.has(e.category)||t.set(e.category,t.size)});const a=e.sort((e,a)=>t.get(e.category)-t.get(a.category));return m&&t.size<=1?a.map(e=>{let{category:t,...a}=e;return a}):a},[S,m]),B=(0,_react.useMemo)(()=>_?[...F,_]:F,[F,_]),[H,G]=(0,_react.useState)(!1),[J,K]=(0,_react.useState)((0,_utils2.getDisplayValue)(k,B,D)),[Q,X]=(0,_react.useState)(!!J),[Y,Z]=(0,_react.useState)(F),$=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{const e=_&&(D?Array.isArray(k)&&k.includes(_.value):k===(null==_?void 0:_.value));z&&!e&&(0,_utils2.shouldReset)(k,F,D)&&(L(null),Z((0,_utils2.sortOptions)(F,null,D)))},[D,L,F,k,z,_]),(0,_react.useEffect)(()=>{if(!H){const e=(0,_utils2.getDisplayValue)(k,B,D);K(e),X(e)}},[k,B,D,H]),(0,_react.useEffect)(()=>{H&&Z((0,_utils2.sortOptions)(F,k,D))},[F]),(0,_react.useEffect)(()=>{Z((0,_utils2.sortOptions)(F,k,D))},[]),(0,_react.useEffect)(()=>{H&&Z((0,_utils2.sortOptions)(F,k,D))},[H]);const ee=(0,_react.useMemo)(()=>p&&(0,_utils.formatErrorToValidation)(p),[p]),te=j===_constants.VARIANTS.picker,ae=(0,_react.useMemo)(()=>{const e=c||te?Y:Y.filter(e=>"".concat(e.name).toLowerCase().includes(J.toLowerCase()));return _?e.filter(e=>e.value!==_.value):e},[Y,J,c,te,_]),re=(0,_react.useCallback)(e=>{null==P||P(e),K(e)},[P]),le=(0,_react.useCallback)(e=>{G(!1);const t=(0,_utils2.getDisplayValue)(e,B,D);re(t),X(""!==t)},[_utils2.getDisplayValue,B,D,re]),ne=e=>{const t=D?e:e.length>0?e[0]:"";var a;(L(t),D)||(null===(a=$.current)||void 0===a||a.blur(),le(t))},oe=()=>{X(!1),re(""),G(!0)},se=()=>{le(k)},ie=()=>{L(D?[]:null),re(""),X(!1),G(!1)},ue=(0,_react.useMemo)(()=>(0,_utils2.getLeftAdornments)({error:p,multiple:D,value:k,prefix:U,icon:h}),[D,k,U,h]),ce=(0,_react.useMemo)(()=>(0,_utils2.getRightAdornments)({action:t,clearable:o,disabled:u,handleClearSelection:ie,readOnly:E,showClearButton:Q,suffix:V,variant:j}),[V,Q,o,u,t,ie,j]),pe=(0,_react.useMemo)(()=>({CustomRow:s,dataTestId:q,filteredOptions:ae,fixedBottomOption:_,handleSelectionChange:ne,helpText:O,helpTextDataTestId:C,itemDataTestId:g,maxOptions:v,multiple:D,noMatchesText:M,value:k,...x}),[s,ae,_,ne,v,O,C,D,M,k,x]),de=(0,_react.useRef)(R);de.current=R;const _e=(0,_react.useCallback)(e=>{const t=de.current;return _react.default.createElement(_Popper.default,_extends({},e,t?{placement:"bottom-start"}:{},{style:t?{...e.style,width:t}:e.style}))},[]),fe=_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.noOptionsLabel,colorTheme:"gray"},I);return _react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(n)},N&&_react.default.createElement(_UTFieldLabel.default,{actions:a,required:A,size:W},N),_react.default.createElement(_lab.Autocomplete,_extends({classes:{...f&&!R?{popper:_stylesModule.default.popper}:{},...T?{paper:T}:{}},PopperComponent:_e,disabled:u||E,getOptionLabel:e=>"".concat(e.name),ListboxComponent:_ListboxComponent.default,ListboxProps:pe,multiple:D,noOptionsText:fe,onClose:()=>G(!1),onOpen:()=>G(!0),open:H,options:F,PaperComponent:_UTPaper.default,renderInput:e=>_react.default.createElement(_InputComponent.default,{alwaysShowPlaceholder:r,dataTestId:i,disabled:u,error:p,inputRef:$,inputSize:b,leftAdornments:ue,onBlur:se,onChange:re,onFocus:oe,params:e,placeholder:w,readOnly:E,rightAdornments:ce,value:J,variant:j})},l)),y&&_react.default.createElement(_UTLabel.default,{colorTheme:"gray",variant:"small"},y),ee&&_react.default.createElement(_UTValidation.default,{dataTestId:d,validationData:ee}))};UTSelect.propTypes=_types.utselectTypes;var _default=exports.default=UTSelect;

package/dist/components/UTSelect/versions/V1/types.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.utselectTypes=void 0;var _propTypes=require("prop-types"),_buttonTypes=require("../../../../types/buttonTypes"),_constants=require("./constants");const utselectTypes=exports.utselectTypes={action:(0,_propTypes.shape)({Icon:_propTypes.string,onClick:_propTypes.func,size:_propTypes.string}),actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),alwaysShowPlaceholder:_propTypes.bool,autocompleteProps:_propTypes.object,className:_propTypes.string,clearable:_propTypes.bool,CustomRow:_propTypes.elementType,dataTestId:_propTypes.string,disabled:_propTypes.bool,disableFilterOptions:_propTypes.bool,error:_propTypes.string,errorDataTestId:_propTypes.string,fixedBottomOption:(0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])}),freeWidth:_propTypes.bool,hideSingleCategoryTitle:_propTypes.bool,paperClassName:_propTypes.string,helpText:_propTypes.string,icon:_propTypes.string,inputSize:_propTypes.string,itemDataTestId:_propTypes.string,listDataTestId:_propTypes.string,listProps:_propTypes.object,menuWidth:_propTypes.string,multiple:_propTypes.bool,noMatchesText:_propTypes.string,noOptionsText:_propTypes.string,onChange:_propTypes.func,onChangeSearchTerm:_propTypes.func,options:(0,_propTypes.arrayOf)((0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])})),placeholder:_propTypes.string,prefix:_propTypes.string,readOnly:_propTypes.bool,required:_propTypes.bool,suffix:_propTypes.string,title:_propTypes.string,titleVariant:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)((0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number]))]),variant:(0,_propTypes.oneOf)(Object.values(_constants.VARIANTS)),withAutoReset:_propTypes.bool};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.utselectTypes=void 0;var _propTypes=require("prop-types"),_buttonTypes=require("../../../../types/buttonTypes"),_constants=require("./constants");const utselectTypes=exports.utselectTypes={action:(0,_propTypes.shape)({Icon:_propTypes.string,onClick:_propTypes.func,size:_propTypes.string}),actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),alwaysShowPlaceholder:_propTypes.bool,autocompleteProps:_propTypes.object,className:_propTypes.string,clearable:_propTypes.bool,CustomRow:_propTypes.elementType,dataTestId:_propTypes.string,disabled:_propTypes.bool,disableFilterOptions:_propTypes.bool,error:_propTypes.string,errorDataTestId:_propTypes.string,fixedBottomOption:(0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])}),freeWidth:_propTypes.bool,hideSingleCategoryTitle:_propTypes.bool,paperClassName:_propTypes.string,helpText:_propTypes.string,icon:_propTypes.string,inputSize:_propTypes.string,itemDataTestId:_propTypes.string,listDataTestId:_propTypes.string,listProps:_propTypes.object,maxOptions:_propTypes.number,menuHelpText:_propTypes.string,menuHelpTextDataTestId:_propTypes.string,menuWidth:_propTypes.string,multiple:_propTypes.bool,noMatchesText:_propTypes.string,noOptionsText:_propTypes.string,onChange:_propTypes.func,onChangeSearchTerm:_propTypes.func,options:(0,_propTypes.arrayOf)((0,_propTypes.shape)({name:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])})),placeholder:_propTypes.string,prefix:_propTypes.string,readOnly:_propTypes.bool,required:_propTypes.bool,suffix:_propTypes.string,title:_propTypes.string,titleVariant:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)((0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number]))]),variant:(0,_propTypes.oneOf)(Object.values(_constants.VARIANTS)),withAutoReset:_propTypes.bool};

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var a in o)({}).hasOwnProperty.call(o,a)&&(t[a]=o[a])}return t},_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=t=>{let{backButton:e,backButtonClass:o,backButtonDataTestId:a,classes:n,closeButtonClass:s,closeButtonDataTestId:r,currentPage:c,currentStep:l,hideCloseButton:i,iconBackClass:u,iconCloseClass:m,isWorkflow:p,nextButton:b,onClose:B,onGoBack:C,onOpen:d,open:g,panelIsCollapsible:T,showBackButton:I,showPagination:f,stepsCount:y,totalPages:k}=t;return I||f||!i||p||T?React.createElement("div",{className:styles.controlAreaContainer},React.createElement("div",{className:styles.controlAreaBar},React.createElement("div",{className:styles.controlLeftArea},I&&React.createElement("div",{className:styles.backButtonContainer},React.createElement(UTButton,{classNames:{icon:u,root:o},dataTestId:a,Icon:"IconArrowLeft",onClick:C,variant:"text"})),f&&React.createElement("div",{className:styles.paginationContainer},React.createElement(UTLabel,{colorTheme:"gray"},"".concat(c," / ").concat(k)),React.createElement(UTButton,_extends({dataTestId:panel.paginationPrev,Icon:"IconChevronLeft",variant:"text"},e)),React.createElement(UTButton,_extends({dataTestId:panel.paginationNext,Icon:"IconChevronRight",variant:"text"},b)))),(T||!i)&&React.createElement(UTButton,{classNames:{icon:m,root:s},dataTestId:r,Icon:T?"IconLayoutSidebarRight":"IconX",onClick:T&&!g?d:B,variant:"text"})),p&&React.createElement(UTProgressBar,{classNames:{barColorPrimary:n.barColorPrimary,colorPrimary:n.colorPrimary,container:styles.progressBarContainer},value:100*l/y})):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(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var a in o)({}).hasOwnProperty.call(o,a)&&(t[a]=o[a])}return t},_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=t=>{let{backButton:e,backButtonClass:o,backButtonDataTestId:a,classes:n,closeButtonClass:s,closeButtonDataTestId:r,currentPage:l,currentStep:c,hideCloseButton:i,iconBackClass:u,iconCloseClass:m,isWorkflow:p,nextButton:b,onClose:B,onGoBack:C,onOpen:d,open:g,panelIsCollapsed:T,panelIsCollapsible:I,showBackButton:f,showPagination:y,stepsCount:k,totalPages:v}=t;return f||y||!i||p||I?React.createElement("div",{className:styles.controlAreaContainer},React.createElement("div",{className:styles.controlAreaBar},React.createElement("div",{className:"".concat(styles.controlLeftArea," ").concat(T?styles.controlLeftAreaCollapsed:"")},f&&React.createElement("div",{className:styles.backButtonContainer},React.createElement(UTButton,{classNames:{icon:u,root:o},dataTestId:a,Icon:"IconArrowLeft",onClick:C,variant:"text"})),y&&React.createElement("div",{className:styles.paginationContainer},React.createElement(UTLabel,{colorTheme:"gray"},"".concat(l," / ").concat(v)),React.createElement(UTButton,_extends({dataTestId:panel.paginationPrev,Icon:"IconChevronLeft",variant:"text"},e)),React.createElement(UTButton,_extends({dataTestId:panel.paginationNext,Icon:"IconChevronRight",variant:"text"},b)))),(I||!i)&&React.createElement(UTButton,{classNames:{icon:m,root:s},dataTestId:r,Icon:I?"IconLayoutSidebarRight":"IconX",onClick:I&&!g?d:B,variant:"text"})),!T&&p&&React.createElement(UTProgressBar,{classNames:{barColorPrimary:n.barColorPrimary,colorPrimary:n.colorPrimary,container:styles.progressBarContainer},value:100*c/k})):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,panelIsCollapsed:bool,panelIsCollapsible:bool,showBackButton:bool,showPagination:bool,stepsCount:number,totalPages:number};export default ControlAreaSection;

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_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=e=>{var t;let{additionalContent:o,backButtonDataTestId:n=panel.backButton,BackdropProps:a={},children:s,classes:l,classNames:r,closeButtonDataTestId:i=panel.closeButton,collapsableHeader:c=!1,collapsablePanel:d=!1,currentStep:p=1,CustomHeaderComponent:m,disableScrollbar:u=!1,HeaderComponent:b,headerItems:C,headerMainActionButton:h={},headerSecondaryActionButton:y={},hideCloseButton:g=!1,hideHeader:f=!1,hideMainButton:B=!1,inline:S=!1,isWorkflow:T=!1,mainActionDataTestId:P=panel.mainAction,mainButton:I={},modalProps:k,onClose:w,onEndReachedCallback:A,onGoBack:D=()=>{},onOpen:E=()=>{},open:O,openAdditionalContentRequest:j,paginationProps:v={},panelSide:R,perfectScrollbarOptions:H,pretitleComponent:M,secondaryActionDataTestId:x=panel.secondaryAction,showBackButton:W=!1,showMainStatus:q=!1,showPagination:N=!1,showTag:_=!1,singleHeaderItemsColumn:U=!1,size:Z="M",statusProps:z={},stepsCount:G,subtitle:F="",tagProps:J={},title:K="",titleDataTestId:L=panel.title,titleProps:Q={},...V}=e;const X=useMemo(()=>mergeClasses(l,r),[r,l]),[Y,$]=useState(null);useEffect(()=>{var e;o&&o.length>0&&(null!==(e=o[0])&&void 0!==e&&e.collapse?$(null):$(o[0].id))},[o]),useEffect(()=>{null!=j&&j.id&&$(j.id)},[j]);const ee=d&&S,te=ee&&!O,oe=!isEmpty(o),{nextButton:ne={},backButton:ae={},currentPage:se=1,totalPages:le=1}=v,{backButton:re,closeButton:ie,iconBack:ce,iconClose:de,perfectScrollbar:pe,...me}=X;return React.createElement(SwipeableDrawer,_extends({anchor:R,BackdropProps:{...a,classes:{root:me.backdrop,...null==a?void 0:a.classes}},classes:{...me,paper:"\n          ".concat(styles.paper,"\n          ").concat(ee&&O&&styles.collapsedPaper,"\n          ").concat(me.paper,"\n          ").concat(styles[SIZES[Z]],"\n          ").concat(oe&&Y&&styles.withAdditionalContent,"\n          ").concat(oe&&!Y&&styles.withAdditionalContentCollapsed,"\n        "),root:me.root,docked:"\n          ".concat(styles[SIZES[Z]],"\n          ").concat(styles.docked,"\n          ").concat(te&&styles.collapsed,"\n          ").concat(!O&&!d&&styles.closedPersistentPanel,"\n          ").concat(oe&&Y&&styles.withAdditionalContentDocked,"\n          ").concat(oe&&!Y&&styles.withAdditionalContentCollapsedDocked,"\n        ")},disablePortal:S,disableSwipeToOpen:!0,ModalProps:{...k},onClose:w,onOpen:E,open:ee||O,swipeAreaWidth:0,variant:S?d?"permanent":"persistent":"temporary"},V),!te&&React.createElement("div",{className:styles.panelWrapper},React.createElement(ControlAreaSection,{backButton:ae,backButtonClass:re,backButtonDataTestId:n,classes:X,closeButtonClass:ie,closeButtonDataTestId:i,currentPage:se,currentStep:p,hideCloseButton:g,iconBackClass:ce,iconCloseClass:de,isWorkflow:T,nextButton:ne,onClose:w,onGoBack:D,onOpen:E,open:O,panelIsCollapsible:ee,showBackButton:W,showPagination:N,stepsCount:G,totalPages:le}),React.createElement("div",{className:styles.contentRowContainer},React.createElement("div",{className:styles.mainContentSection},React.createElement(HeaderSection,{classes:X,collapsableHeader:c,CustomHeaderComponent:m,HeaderComponent:b,headerItems:C,headerMainActionButton:h,headerSecondaryActionButton:y,hideHeader:f,mainActionDataTestId:P,pretitleComponent:M,secondaryActionDataTestId:x,showMainStatus:q,showTag:_,singleHeaderItemsColumn:U,statusProps:z,subtitle:F,tagProps:J,title:K,titleClass:X.title,titleDataTestId:L,titleProps:Q}),React.createElement(BodySection,{bodyContainerClass:"".concat(styles.bodyContainer," ").concat(null!==(t=null==X?void 0:X.bodyContainer)&&void 0!==t?t:""),disableScrollbar:u,hideMainButton:B,mainButton:I,onEndReachedCallback:A,perfectScrollbarClass:pe,perfectScrollbarOptions:H},s)),oe&&React.createElement(AdditionalContentModule,{activeId:Y,additionalContent:o,onSelectItem:$}))))};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(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_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=e=>{var t;let{additionalContent:o,backButtonDataTestId:n=panel.backButton,BackdropProps:a={},children:s,classes:l,classNames:r,closeButtonDataTestId:i=panel.closeButton,collapsableHeader:c=!1,collapsablePanel:d=!1,currentStep:p=1,CustomHeaderComponent:m,disableScrollbar:u=!1,HeaderComponent:b,headerItems:C,headerMainActionButton:h={},headerSecondaryActionButton:y={},hideCloseButton:g=!1,hideHeader:f=!1,hideMainButton:B=!1,inline:S=!1,isWorkflow:T=!1,mainActionDataTestId:P=panel.mainAction,mainButton:I={},modalProps:k,onClose:w,onEndReachedCallback:A,onGoBack:D=()=>{},onOpen:E=()=>{},open:O,openAdditionalContentRequest:j,paginationProps:v={},panelSide:R,perfectScrollbarOptions:H,pretitleComponent:M,secondaryActionDataTestId:x=panel.secondaryAction,showBackButton:W=!1,showMainStatus:q=!1,showPagination:N=!1,showTag:_=!1,singleHeaderItemsColumn:U=!1,size:Z="M",statusProps:z={},stepsCount:G,subtitle:F="",tagProps:J={},title:K="",titleDataTestId:L=panel.title,titleProps:Q={},...V}=e;const X=useMemo(()=>mergeClasses(l,r),[r,l]),[Y,$]=useState(null);useEffect(()=>{var e;o&&o.length>0&&(null!==(e=o[0])&&void 0!==e&&e.collapse?$(null):$(o[0].id))},[o]),useEffect(()=>{null!=j&&j.id&&$(j.id)},[j]);const ee=d&&S,te=ee&&!O,oe=!isEmpty(o),{nextButton:ne={},backButton:ae={},currentPage:se=1,totalPages:le=1}=v,{backButton:re,closeButton:ie,iconBack:ce,iconClose:de,perfectScrollbar:pe,...me}=X;return React.createElement(SwipeableDrawer,_extends({anchor:R,BackdropProps:{...a,classes:{root:me.backdrop,...null==a?void 0:a.classes}},classes:{...me,paper:"\n          ".concat(styles.paper,"\n          ").concat(ee&&O&&styles.collapsedPaper,"\n          ").concat(me.paper,"\n          ").concat(styles[SIZES[Z]],"\n          ").concat(oe&&Y&&styles.withAdditionalContent,"\n          ").concat(oe&&!Y&&styles.withAdditionalContentCollapsed,"\n        "),root:me.root,docked:"\n          ".concat(styles[SIZES[Z]],"\n          ").concat(styles.docked,"\n          ").concat(te&&styles.collapsed,"\n          ").concat(!O&&!d&&styles.closedPersistentPanel,"\n          ").concat(oe&&Y&&styles.withAdditionalContentDocked,"\n          ").concat(oe&&!Y&&styles.withAdditionalContentCollapsedDocked,"\n        ")},disablePortal:S,disableSwipeToOpen:!0,ModalProps:{...k},onClose:w,onOpen:E,open:ee||O,swipeAreaWidth:0,variant:S?d?"permanent":"persistent":"temporary"},V),React.createElement("div",{className:styles.panelWrapper},React.createElement(ControlAreaSection,{backButton:ae,backButtonClass:re,backButtonDataTestId:n,classes:X,closeButtonClass:ie,closeButtonDataTestId:i,currentPage:se,currentStep:p,hideCloseButton:g,iconBackClass:ce,iconCloseClass:de,isWorkflow:T,nextButton:ne,onClose:w,onGoBack:D,onOpen:E,open:O,panelIsCollapsed:te,panelIsCollapsible:ee,showBackButton:W,showPagination:N,stepsCount:G,totalPages:le}),!te&&React.createElement("div",{className:styles.contentRowContainer},React.createElement("div",{className:styles.mainContentSection},React.createElement(HeaderSection,{classes:X,collapsableHeader:c,CustomHeaderComponent:m,HeaderComponent:b,headerItems:C,headerMainActionButton:h,headerSecondaryActionButton:y,hideHeader:f,mainActionDataTestId:P,pretitleComponent:M,secondaryActionDataTestId:x,showMainStatus:q,showTag:_,singleHeaderItemsColumn:U,statusProps:z,subtitle:F,tagProps:J,title:K,titleClass:X.title,titleDataTestId:L,titleProps:Q}),React.createElement(BodySection,{bodyContainerClass:"".concat(styles.bodyContainer," ").concat(null!==(t=null==X?void 0:X.bodyContainer)&&void 0!==t?t:""),disableScrollbar:u,hideMainButton:B,mainButton:I,onEndReachedCallback:A,perfectScrollbarClass:pe,perfectScrollbarOptions:H},s)),oe&&React.createElement(AdditionalContentModule,{activeId:Y,additionalContent:o,onSelectItem:$}))))};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/styles.module.scss

@@ -1,5 +1,5 @@
 $body-component-width: 450px;
-$collapsed-panel-size: 58px;
+$collapsed-panel-size: 54px;
 $large-panel-size: 600px;
 $medium-panel-size: 450px;
 $sidebar-width: 56px;
@@ -24,18 +24,27 @@ $additional-content-total: $body-component-width + $sidebar-width;
   display: flex;
   flex: 1;
   gap: var(--UT-panel-gap-sm, 8px);
+  opacity: 1;
+  overflow: hidden;
+  transition: flex-grow 0.3s ease, opacity 0.3s ease;
+}
+
+.controlLeftAreaCollapsed {
+  flex-grow: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 
 .backButtonContainer {
   align-items: center;
   display: flex;
+  flex-shrink: 0;
 }
 
 .controlAreaBar {
   align-items: center;
   display: flex;
-  gap: var(--UT-panel-gap-sm, 8px);
-  justify-content: space-between;
+  justify-content: center;
   padding: var(--UT-panel-padding-xs, 8px);
 }
 
@@ -48,7 +57,9 @@ $additional-content-total: $body-component-width + $sidebar-width;
 .paginationContainer {
   align-items: center;
   display: flex;
+  flex-shrink: 0;
   grid-gap: var(--UT-panel-gap-lg, 16px);
+  white-space: nowrap;
 }
 
 .contentRowContainer {
@@ -148,6 +159,14 @@ $additional-content-total: $body-component-width + $sidebar-width;
   &.withAdditionalContentCollapsed {
     width: $small-panel-size + $sidebar-width;
   }
+
+  &.withAdditionalContentDocked {
+    width: $small-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsedDocked {
+    width: $small-panel-size + $sidebar-width;
+  }
 }
 
 .large {
@@ -160,6 +179,14 @@ $additional-content-total: $body-component-width + $sidebar-width;
   &.withAdditionalContentCollapsed {
     width: $large-panel-size + $sidebar-width;
   }
+
+  &.withAdditionalContentDocked {
+    width: $large-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsedDocked {
+    width: $large-panel-size + $sidebar-width;
+  }
 }
 
 .medium {
@@ -172,6 +199,14 @@ $additional-content-total: $body-component-width + $sidebar-width;
   &.withAdditionalContentCollapsed {
     width: $medium-panel-size + $sidebar-width;
   }
+
+  &.withAdditionalContentDocked {
+    width: $medium-panel-size + $additional-content-total;
+  }
+
+  &.withAdditionalContentCollapsedDocked {
+    width: $medium-panel-size + $sidebar-width;
+  }
 }
 
 .bodyContainer {
@@ -207,6 +242,7 @@ $additional-content-total: $body-component-width + $sidebar-width;
   .paper {
     overflow: hidden;
     position: relative;
+    transition: width 0.3s ease;
     z-index: 1;
   }
 
@@ -215,10 +251,6 @@ $additional-content-total: $body-component-width + $sidebar-width;
   }
 }
 
-.withAdditionalContentCollapsedDocked {
-  transition: width 0.3s ease;
-}
-
 .closedPersistentPanel {
   width: 0;
 }
@@ -226,6 +258,11 @@ $additional-content-total: $body-component-width + $sidebar-width;
 .collapsed {
   width: $collapsed-panel-size;
 
+  &.withAdditionalContentDocked,
+  &.withAdditionalContentCollapsedDocked {
+    width: $collapsed-panel-size;
+  }
+
   .small,
   .medium,
   .large {

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/index.js

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)({}).hasOwnProperty.call(n,s)&&(e[s]=n[s])}return e},_extends.apply(null,arguments)}import isEmpty from"lodash/isEmpty";import React,{useLayoutEffect,useMemo,useRef,useState}from"react";import ScrollBar from"react-perfect-scrollbar";import{arrayOf,bool,elementType,func,oneOfType,shape,string,number}from"prop-types";import isFinite from"lodash/isFinite";import UTLabel from"../../../../../UTLabel";import UTCheckList from"../../../../../UTCheckList";import{SPACING}from"../../../../../UTCheckList/versions/V1/constants";import styles from"./styles.module.scss";import{DEFAULT_MAX_HEIGHT}from"./constants";const ListboxComponent=e=>{let{CustomRow:t,dataTestId:n,filteredOptions:s,fixedBottomOption:o,handleSelectionChange:a,horizontalSpacing:r=SPACING.SMALL,itemDataTestId:i,maxHeight:l=DEFAULT_MAX_HEIGHT,multiple:m,noMatchesText:c,value:p,verticalSpacing:u=SPACING.SMALL}=e;const f=useMemo(()=>isEmpty(s),[s]),d=useMemo(()=>isFinite(l)?l:DEFAULT_MAX_HEIGHT,[l]),g=useRef(null),[T,h]=useState(0);useLayoutEffect(()=>{g.current&&h(g.current.offsetHeight)},[o]);const y=d-T,b={CustomRow:t,horizontalSpacing:r,isSimple:!m,itemDataTestId:i,onChange:a,reversed:!0,showSelectAll:!1,value:m?p:[p],variant:"button",version:"V1",verticalSpacing:u};return React.createElement("div",{className:styles.listbox},f?React.createElement(UTLabel,{colorTheme:"gray",className:styles.noOptionsLabel},c):React.createElement(ScrollBar,{style:{maxHeight:y}},React.createElement(UTCheckList,_extends({},b,{dataTestId:n,options:s}))),o&&React.createElement("div",{ref:g},React.createElement("div",{className:styles.fixedOptionDivider}),React.createElement(UTCheckList,_extends({},b,{onChange:e=>{m||0!==e.length?a(e):a([o.value])},options:[o]}))))};ListboxComponent.propTypes={CustomRow:elementType,dataTestId:string,filteredOptions:arrayOf(shape({name:string,value:oneOfType([string,number])})),fixedBottomOption:shape({name:string,value:oneOfType([string,number])}),handleSelectionChange:func,horizontalSpacing:string,itemDataTestId:string,maxHeight:number,multiple:bool,noMatchesText:string,value:oneOfType([arrayOf(oneOfType([string,number])),string,number]),verticalSpacing:string};export default ListboxComponent;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},_extends.apply(null,arguments)}import isEmpty from"lodash/isEmpty";import React,{useLayoutEffect,useMemo,useRef,useState}from"react";import ScrollBar from"react-perfect-scrollbar";import{arrayOf,bool,elementType,func,oneOfType,shape,string,number}from"prop-types";import isFinite from"lodash/isFinite";import UTLabel from"../../../../../UTLabel";import UTCheckList from"../../../../../UTCheckList";import{SPACING}from"../../../../../UTCheckList/versions/V1/constants";import styles from"./styles.module.scss";import{DEFAULT_MAX_HEIGHT}from"./constants";import{limitOptions}from"./utils";const ListboxComponent=e=>{let{CustomRow:t,dataTestId:a,filteredOptions:n,fixedBottomOption:s,handleSelectionChange:o,helpText:i,helpTextDataTestId:r,horizontalSpacing:l=SPACING.SMALL,itemDataTestId:m,maxHeight:c=DEFAULT_MAX_HEIGHT,maxOptions:p,multiple:u,noMatchesText:f,value:T,verticalSpacing:h=SPACING.SMALL}=e;const d=useMemo(()=>isEmpty(n),[n]),g=useMemo(()=>isFinite(c)?c:DEFAULT_MAX_HEIGHT,[c]),y=useRef(null),[x,b]=useState(0);useLayoutEffect(()=>{y.current&&b(y.current.offsetHeight)},[s]);const v=g-x,L={CustomRow:t,horizontalSpacing:l,isSimple:!u,itemDataTestId:m,onChange:o,reversed:!0,showSelectAll:!1,value:u?T:[T],variant:"button",version:"V1",verticalSpacing:h},O=i&&React.createElement("div",{className:styles.helpText,onMouseDown:e=>e.preventDefault(),role:"presentation"},React.createElement(UTLabel,{className:styles.helpTextLabel,colorTheme:"gray",dataTestId:r,shade:"04",variant:"small"},i));return React.createElement("div",{className:styles.listbox},d?React.createElement(React.Fragment,null,O,React.createElement(UTLabel,{colorTheme:"gray",className:styles.noOptionsLabel},f)):React.createElement(ScrollBar,{style:{maxHeight:v}},O,React.createElement(UTCheckList,_extends({},L,{dataTestId:a,options:limitOptions(n,T,p)}))),s&&React.createElement("div",{ref:y},React.createElement("div",{className:styles.fixedOptionDivider}),React.createElement(UTCheckList,_extends({},L,{onChange:e=>{u||0!==e.length?o(e):o([s.value])},options:limitOptions([s],T,p)}))))};ListboxComponent.propTypes={CustomRow:elementType,dataTestId:string,filteredOptions:arrayOf(shape({name:string,value:oneOfType([string,number])})),fixedBottomOption:shape({name:string,value:oneOfType([string,number])}),handleSelectionChange:func,helpText:string,helpTextDataTestId:string,horizontalSpacing:string,itemDataTestId:string,maxHeight:number,maxOptions:number,multiple:bool,noMatchesText:string,value:oneOfType([arrayOf(oneOfType([string,number])),string,number]),verticalSpacing:string};export default ListboxComponent;

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/styles.module.scss

@@ -3,6 +3,14 @@
   flex-direction: column;
 }
 
+.helpText {
+  padding: var(--padding-sm, 12px) 0;
+}
+
+.helpTextLabel {
+  font-style: italic;
+}
+
 .noOptionsLabel {
   text-align: center;
 }

package/dist/esm/components/UTSelect/versions/V1/components/ListboxComponent/utils.js

@@ -0,0 +1 @@
+export const limitOptions=(i,a,e)=>!e||!Array.isArray(a)||a.length<e?i:i.map(i=>({...i,disabled:i.disabled||!a.includes(i.value)}));

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var a in o)({}).hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e},_extends.apply(null,arguments)}import clone from"lodash/clone";import React,{useMemo,useState,useRef,useCallback,useEffect}from"react";import{Autocomplete}from"@material-ui/lab";import Popper from"@material-ui/core/Popper";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTPaper from"../../../UTPaper";import UTValidation from"../../../UTValidation";import{formatErrorToValidation}from"../../../UTValidation/utils";import{TITLE_VARIANTS}from"../../../../constants/inputs";import InputComponent from"./components/InputComponent";import ListboxComponent from"./components/ListboxComponent";import{utselectTypes}from"./types";import styles from"./styles.module.scss";import{VARIANTS}from"./constants";import{getLeftAdornments,getRightAdornments,shouldReset,getDisplayValue,sortOptions}from"./utils";const UTSelect=e=>{let{action:t,actions:o,alwaysShowPlaceholder:a=!0,autocompleteProps:n={},className:s,clearable:r=!0,CustomRow:l,dataTestId:i,disabled:c,disableFilterOptions:p=!1,error:u,errorDataTestId:m,fixedBottomOption:d,freeWidth:f=!1,hideSingleCategoryTitle:T=!1,paperClassName:h,helpText:y,icon:g,inputSize:b,itemDataTestId:C,listDataTestId:R,listProps:x={},menuWidth:A,multiple:S=!1,noMatchesText:v="No hay coincidencias con tu búsqueda",noOptionsText:L="No hay opciones disponibles",onChange:O=()=>{},onChangeSearchTerm:E=()=>{},options:I=[],placeholder:U,prefix:V,readOnly:P,required:w,suffix:M,title:N,titleVariant:D=TITLE_VARIANTS.large,value:_=(S?[]:null),variant:k=VARIANTS.select,withAutoReset:z=!0}=e;const F=useMemo(()=>{if(!I||0===I.length)return[];const e=clone(I).map(e=>({...e,name:"".concat(e.name)})),t=new Map;e.forEach(e=>{t.has(e.category)||t.set(e.category,t.size)});const o=e.sort((e,o)=>t.get(e.category)-t.get(o.category));return T&&t.size<=1?o.map(e=>{let{category:t,...o}=e;return o}):o},[I,T]),B=useMemo(()=>d?[...F,d]:F,[F,d]),[q,j]=useState(!1),[W,G]=useState(getDisplayValue(_,B,S)),[H,J]=useState(!!W),[K,Q]=useState(F),X=useRef(null);useEffect(()=>{const e=d&&(S?Array.isArray(_)&&_.includes(d.value):_===(null==d?void 0:d.value));z&&!e&&shouldReset(_,F,S)&&(O(null),Q(sortOptions(F,null,S)))},[S,O,F,_,z,d]),useEffect(()=>{if(!q){const e=getDisplayValue(_,B,S);G(e),J(e)}},[_,B,S,q]),useEffect(()=>{q&&Q(sortOptions(F,_,S))},[F]),useEffect(()=>{Q(sortOptions(F,_,S))},[]),useEffect(()=>{q&&Q(sortOptions(F,_,S))},[q]);const Y=useMemo(()=>u&&formatErrorToValidation(u),[u]),Z=k===VARIANTS.picker,$=useMemo(()=>{const e=p||Z?K:K.filter(e=>"".concat(e.name).toLowerCase().includes(W.toLowerCase()));return d?e.filter(e=>e.value!==d.value):e},[K,W,p,Z,d]),ee=useCallback(e=>{null==E||E(e),G(e)},[E]),te=useCallback(e=>{j(!1);const t=getDisplayValue(e,B,S);ee(t),J(""!==t)},[getDisplayValue,B,S,ee]),oe=e=>{const t=S?e:e.length>0?e[0]:"";var o;(O(t),S)||(null===(o=X.current)||void 0===o||o.blur(),te(t))},ae=()=>{J(!1),ee(""),j(!0)},ne=()=>{te(_)},se=()=>{O(S?[]:null),ee(""),J(!1),j(!1)},re=useMemo(()=>getLeftAdornments({error:u,multiple:S,value:_,prefix:V,icon:g}),[S,_,V,g]),le=useMemo(()=>getRightAdornments({action:t,clearable:r,disabled:c,handleClearSelection:se,readOnly:P,showClearButton:H,suffix:M,variant:k}),[M,H,r,c,t,se,k]),ie=useMemo(()=>({CustomRow:l,dataTestId:R,filteredOptions:$,fixedBottomOption:d,handleSelectionChange:oe,itemDataTestId:C,multiple:S,noMatchesText:v,value:_,...x}),[l,$,d,oe,S,v,_,x]),ce=useRef(A);ce.current=A;const pe=useCallback(e=>{const t=ce.current;return React.createElement(Popper,_extends({},e,t?{placement:"bottom-start"}:{},{style:t?{...e.style,width:t}:e.style}))},[]),ue=React.createElement(UTLabel,{className:styles.noOptionsLabel,colorTheme:"gray"},L);return React.createElement("div",{className:"".concat(styles.container," ").concat(s)},N&&React.createElement(UTFieldLabel,{actions:o,required:w,size:D},N),React.createElement(Autocomplete,_extends({classes:{...f&&!A?{popper:styles.popper}:{},...h?{paper:h}:{}},PopperComponent:pe,disabled:c||P,getOptionLabel:e=>"".concat(e.name),ListboxComponent:ListboxComponent,ListboxProps:ie,multiple:S,noOptionsText:ue,onClose:()=>j(!1),onOpen:()=>j(!0),open:q,options:F,PaperComponent:UTPaper,renderInput:e=>React.createElement(InputComponent,{alwaysShowPlaceholder:a,dataTestId:i,disabled:c,error:u,inputRef:X,inputSize:b,leftAdornments:re,onBlur:ne,onChange:ee,onFocus:ae,params:e,placeholder:U,readOnly:P,rightAdornments:le,value:W,variant:k})},n)),y&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},y),Y&&React.createElement(UTValidation,{dataTestId:m,validationData:Y}))};UTSelect.propTypes=utselectTypes;export default UTSelect;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var a in o)({}).hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e},_extends.apply(null,arguments)}import clone from"lodash/clone";import React,{useMemo,useState,useRef,useCallback,useEffect}from"react";import{Autocomplete}from"@material-ui/lab";import Popper from"@material-ui/core/Popper";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTPaper from"../../../UTPaper";import UTValidation from"../../../UTValidation";import{formatErrorToValidation}from"../../../UTValidation/utils";import{TITLE_VARIANTS}from"../../../../constants/inputs";import InputComponent from"./components/InputComponent";import ListboxComponent from"./components/ListboxComponent";import{utselectTypes}from"./types";import styles from"./styles.module.scss";import{VARIANTS}from"./constants";import{getLeftAdornments,getRightAdornments,shouldReset,getDisplayValue,sortOptions}from"./utils";const UTSelect=e=>{let{action:t,actions:o,alwaysShowPlaceholder:a=!0,autocompleteProps:n={},className:s,clearable:r=!0,CustomRow:l,dataTestId:i,disabled:p,disableFilterOptions:c=!1,error:m,errorDataTestId:u,fixedBottomOption:d,freeWidth:f=!1,hideSingleCategoryTitle:T=!1,paperClassName:h,helpText:y,icon:g,inputSize:b,itemDataTestId:x,listDataTestId:C,listProps:R={},maxOptions:O,menuHelpText:A,menuHelpTextDataTestId:I,menuWidth:S,multiple:v=!1,noMatchesText:L="No hay coincidencias con tu búsqueda",noOptionsText:E="No hay opciones disponibles",onChange:U=()=>{},onChangeSearchTerm:V=()=>{},options:P=[],placeholder:w,prefix:D,readOnly:M,required:N,suffix:_,title:k,titleVariant:z=TITLE_VARIANTS.large,value:F=(v?[]:null),variant:B=VARIANTS.select,withAutoReset:q=!0}=e;const j=useMemo(()=>{if(!P||0===P.length)return[];const e=clone(P).map(e=>({...e,name:"".concat(e.name)})),t=new Map;e.forEach(e=>{t.has(e.category)||t.set(e.category,t.size)});const o=e.sort((e,o)=>t.get(e.category)-t.get(o.category));return T&&t.size<=1?o.map(e=>{let{category:t,...o}=e;return o}):o},[P,T]),H=useMemo(()=>d?[...j,d]:j,[j,d]),[W,G]=useState(!1),[J,K]=useState(getDisplayValue(F,H,v)),[Q,X]=useState(!!J),[Y,Z]=useState(j),$=useRef(null);useEffect(()=>{const e=d&&(v?Array.isArray(F)&&F.includes(d.value):F===(null==d?void 0:d.value));q&&!e&&shouldReset(F,j,v)&&(U(null),Z(sortOptions(j,null,v)))},[v,U,j,F,q,d]),useEffect(()=>{if(!W){const e=getDisplayValue(F,H,v);K(e),X(e)}},[F,H,v,W]),useEffect(()=>{W&&Z(sortOptions(j,F,v))},[j]),useEffect(()=>{Z(sortOptions(j,F,v))},[]),useEffect(()=>{W&&Z(sortOptions(j,F,v))},[W]);const ee=useMemo(()=>m&&formatErrorToValidation(m),[m]),te=B===VARIANTS.picker,oe=useMemo(()=>{const e=c||te?Y:Y.filter(e=>"".concat(e.name).toLowerCase().includes(J.toLowerCase()));return d?e.filter(e=>e.value!==d.value):e},[Y,J,c,te,d]),ae=useCallback(e=>{null==V||V(e),K(e)},[V]),ne=useCallback(e=>{G(!1);const t=getDisplayValue(e,H,v);ae(t),X(""!==t)},[getDisplayValue,H,v,ae]),se=e=>{const t=v?e:e.length>0?e[0]:"";var o;(U(t),v)||(null===(o=$.current)||void 0===o||o.blur(),ne(t))},re=()=>{X(!1),ae(""),G(!0)},le=()=>{ne(F)},ie=()=>{U(v?[]:null),ae(""),X(!1),G(!1)},pe=useMemo(()=>getLeftAdornments({error:m,multiple:v,value:F,prefix:D,icon:g}),[v,F,D,g]),ce=useMemo(()=>getRightAdornments({action:t,clearable:r,disabled:p,handleClearSelection:ie,readOnly:M,showClearButton:Q,suffix:_,variant:B}),[_,Q,r,p,t,ie,B]),me=useMemo(()=>({CustomRow:l,dataTestId:C,filteredOptions:oe,fixedBottomOption:d,handleSelectionChange:se,helpText:A,helpTextDataTestId:I,itemDataTestId:x,maxOptions:O,multiple:v,noMatchesText:L,value:F,...R}),[l,oe,d,se,O,A,I,v,L,F,R]),ue=useRef(S);ue.current=S;const de=useCallback(e=>{const t=ue.current;return React.createElement(Popper,_extends({},e,t?{placement:"bottom-start"}:{},{style:t?{...e.style,width:t}:e.style}))},[]),fe=React.createElement(UTLabel,{className:styles.noOptionsLabel,colorTheme:"gray"},E);return React.createElement("div",{className:"".concat(styles.container," ").concat(s)},k&&React.createElement(UTFieldLabel,{actions:o,required:N,size:z},k),React.createElement(Autocomplete,_extends({classes:{...f&&!S?{popper:styles.popper}:{},...h?{paper:h}:{}},PopperComponent:de,disabled:p||M,getOptionLabel:e=>"".concat(e.name),ListboxComponent:ListboxComponent,ListboxProps:me,multiple:v,noOptionsText:fe,onClose:()=>G(!1),onOpen:()=>G(!0),open:W,options:j,PaperComponent:UTPaper,renderInput:e=>React.createElement(InputComponent,{alwaysShowPlaceholder:a,dataTestId:i,disabled:p,error:m,inputRef:$,inputSize:b,leftAdornments:pe,onBlur:le,onChange:ae,onFocus:re,params:e,placeholder:w,readOnly:M,rightAdornments:ce,value:J,variant:B})},n)),y&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},y),ee&&React.createElement(UTValidation,{dataTestId:u,validationData:ee}))};UTSelect.propTypes=utselectTypes;export default UTSelect;

package/dist/esm/components/UTSelect/versions/V1/types.js

@@ -1 +1 @@
-import{arrayOf,bool,elementType,func,number,object,oneOf,oneOfType,shape,string}from"prop-types";import{buttonTypes}from"../../../../types/buttonTypes";import{VARIANTS}from"./constants";export const utselectTypes={action:shape({Icon:string,onClick:func,size:string}),actions:arrayOf(buttonTypes),alwaysShowPlaceholder:bool,autocompleteProps:object,className:string,clearable:bool,CustomRow:elementType,dataTestId:string,disabled:bool,disableFilterOptions:bool,error:string,errorDataTestId:string,fixedBottomOption:shape({name:string,value:oneOfType([string,number])}),freeWidth:bool,hideSingleCategoryTitle:bool,paperClassName:string,helpText:string,icon:string,inputSize:string,itemDataTestId:string,listDataTestId:string,listProps:object,menuWidth:string,multiple:bool,noMatchesText:string,noOptionsText:string,onChange:func,onChangeSearchTerm:func,options:arrayOf(shape({name:string,value:oneOfType([string,number])})),placeholder:string,prefix:string,readOnly:bool,required:bool,suffix:string,title:string,titleVariant:string,value:oneOfType([string,arrayOf(oneOfType([string,number]))]),variant:oneOf(Object.values(VARIANTS)),withAutoReset:bool};
+import{arrayOf,bool,elementType,func,number,object,oneOf,oneOfType,shape,string}from"prop-types";import{buttonTypes}from"../../../../types/buttonTypes";import{VARIANTS}from"./constants";export const utselectTypes={action:shape({Icon:string,onClick:func,size:string}),actions:arrayOf(buttonTypes),alwaysShowPlaceholder:bool,autocompleteProps:object,className:string,clearable:bool,CustomRow:elementType,dataTestId:string,disabled:bool,disableFilterOptions:bool,error:string,errorDataTestId:string,fixedBottomOption:shape({name:string,value:oneOfType([string,number])}),freeWidth:bool,hideSingleCategoryTitle:bool,paperClassName:string,helpText:string,icon:string,inputSize:string,itemDataTestId:string,listDataTestId:string,listProps:object,maxOptions:number,menuHelpText:string,menuHelpTextDataTestId:string,menuWidth:string,multiple:bool,noMatchesText:string,noOptionsText:string,onChange:func,onChangeSearchTerm:func,options:arrayOf(shape({name:string,value:oneOfType([string,number])})),placeholder:string,prefix:string,readOnly:bool,required:bool,suffix:string,title:string,titleVariant:string,value:oneOfType([string,arrayOf(oneOfType([string,number]))]),variant:oneOf(Object.values(VARIANTS)),withAutoReset:bool};

package/package.json

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