@widergy/energy-ui 3.82.2 → 3.83.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.83.0](https://github.com/widergy/energy-ui/compare/v3.82.2...v3.83.0) (2025-06-19)
+
+
+### Features
+
+* [AGCE-760] panel update ([#629](https://github.com/widergy/energy-ui/issues/629)) ([682b88c](https://github.com/widergy/energy-ui/commit/682b88c1d711a95e2cf8b47865761b93855a0b5c))
+
 ## [3.82.2](https://github.com/widergy/energy-ui/compare/v3.82.1...v3.82.2) (2025-06-18)
 
 

package/dist/components/UTBadge/theme.js

@@ -20,6 +20,7 @@ const baseButtonTheme = () => ({
     alignItems: 'center',
     borderRadius: '100px',
     display: 'inline-flex',
+    flexShrink: 0,
     height: 'fit-content',
     justifyContent: 'center',
     minHeight: '10px',

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

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.SIZES = exports.MENU_LABEL = exports.ACCEPT_BUTTON_TEXT = void 0;
 const SIZES = exports.SIZES = {
   L: 'large',
-  M: 'medium'
+  M: 'medium',
+  S: 'small'
 };
 const ACCEPT_BUTTON_TEXT = exports.ACCEPT_BUTTON_TEXT = 'Aceptar';
 const MENU_LABEL = exports.MENU_LABEL = 'Más';

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

@@ -36,6 +36,7 @@ const UTPanel = _ref => {
     classNames,
     closeButtonDataTestId = panel.closeButton,
     collapsableHeader = false,
+    collapsablePanel = false,
     currentStep = 1,
     disableScrollbar = false,
     HeaderComponent,
@@ -45,6 +46,7 @@ const UTPanel = _ref => {
     hideCloseButton = false,
     hideHeader = false,
     hideMainButton = false,
+    inline = false,
     isWorkflow = false,
     mainActionDataTestId = panel.mainAction,
     mainButton = {},
@@ -71,6 +73,8 @@ const UTPanel = _ref => {
   const openMenu = event => setAnchor(event.currentTarget);
   const closeMenu = () => setAnchor();
   const secondaryActionAsMenu = (0, _isArray.default)(headerSecondaryActionButton);
+  const panelIsCollapsible = collapsablePanel && inline;
+  const panelIsCollapsed = panelIsCollapsible && !open;
   const {
     closeButton: closeButtonClass,
     headerContainer: headerContainerClass,
@@ -81,38 +85,41 @@ const UTPanel = _ref => {
   } = classes;
   return /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, _extends({
     anchor: panelSide,
+    BackdropProps: {
+      ...BackdropProps,
+      classes: {
+        root: drawerClasses.backdrop,
+        ...(BackdropProps === null || BackdropProps === void 0 ? void 0 : BackdropProps.classes)
+      }
+    },
     classes: {
       ...drawerClasses,
-      paper: "".concat(_stylesModule.default.paper, " ").concat(drawerClasses.paper, " ").concat(_stylesModule.default[_constants.SIZES[size]]),
-      root: drawerClasses.root
+      paper: "\n          ".concat(_stylesModule.default.paper, "\n          ").concat(panelIsCollapsible && open && _stylesModule.default.collapsedPaper, "\n          ").concat(drawerClasses.paper, "\n          ").concat(_stylesModule.default[_constants.SIZES[size]], "\n        "),
+      root: drawerClasses.root,
+      docked: "\n          ".concat(_stylesModule.default[_constants.SIZES[size]], "\n          ").concat(_stylesModule.default.docked, "\n          ").concat(panelIsCollapsed && _stylesModule.default.collapsed, "\n          ").concat(!open && !collapsablePanel && _stylesModule.default.closedPersistentPanel, "\n        ")
     },
+    disablePortal: inline,
     disableSwipeToOpen: true,
     ModalProps: {
       ...modalProps
     },
     onClose: onClose,
     onOpen: onOpen,
-    open: open,
+    open: panelIsCollapsible || open,
     swipeAreaWidth: 0,
-    BackdropProps: {
-      ...BackdropProps,
-      classes: {
-        root: drawerClasses.backdrop,
-        ...(BackdropProps === null || BackdropProps === void 0 ? void 0 : BackdropProps.classes)
-      }
-    }
-  }, props), /*#__PURE__*/_react.default.createElement("div", {
+    variant: inline ? collapsablePanel ? 'permanent' : 'persistent' : 'temporary'
+  }, props), (!hideCloseButton || isWorkflow || panelIsCollapsible) && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.controlAreaContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.controlAreaBar
-  }, !hideCloseButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+  }, (panelIsCollapsible || !hideCloseButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, {
     classNames: {
       icon: iconCloseClass,
       root: closeButtonClass
     },
     dataTestId: closeButtonDataTestId,
-    Icon: "IconX",
-    onClick: onClose,
+    Icon: panelIsCollapsible ? 'IconLayoutSidebarRight' : 'IconX',
+    onClick: panelIsCollapsible && !open ? onOpen : onClose,
     variant: "text"
   })), isWorkflow && /*#__PURE__*/_react.default.createElement(_index.default, {
     classNames: {
@@ -121,7 +128,7 @@ const UTPanel = _ref => {
       colorPrimary: classes.colorPrimary
     },
     value: currentStep * 100 / stepsCount
-  })), !hideHeader && /*#__PURE__*/_react.default.createElement("div", {
+  })), !hideHeader && !panelIsCollapsed && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerContainer, " ").concat(headerContainerClass)
   }, HeaderComponent || /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerArea
@@ -162,10 +169,10 @@ const UTPanel = _ref => {
     colorTheme: "success",
     dataTestId: mainActionDataTestId,
     variant: "filled"
-  }, headerMainActionButton), headerMainActionButton.text)))), !(0, _isEmpty.default)(headerItems) && /*#__PURE__*/_react.default.createElement("div", {
+  }, headerMainActionButton), headerMainActionButton.text)))), !(0, _isEmpty.default)(headerItems) && !panelIsCollapsed && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerItemsContainer, " \n          ").concat(collapseHeader ? _stylesModule.default.expandedContainer : _stylesModule.default.collapsedContainer, " \n          ").concat(singleHeaderItemsColumn && _stylesModule.default.singleHeaderItemsColumn || '')
-  }, headerItems.map(_DataItem.default)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.bodyContainer, " ").concat(!hideMainButton && _stylesModule.default.bodyOffset, " ").concat(classes.bodyContainer)
+  }, headerItems.map(_DataItem.default)), !panelIsCollapsed && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.bodyContainer, " ").concat(inline && _stylesModule.default.inlineBodyContainer, " ").concat(!hideMainButton && _stylesModule.default.bodyOffset, " ").concat(classes.bodyContainer)
   }, disableScrollbar ? children : /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
     className: "".concat(_stylesModule.default.perfectScrollbar, " ").concat(perfectScrollbarClass),
     onYReachEnd: onEndReachedCallback,
@@ -173,7 +180,7 @@ const UTPanel = _ref => {
       suppressScrollX: true,
       ...perfectScrollbarOptions
     }
-  }, children)), !hideMainButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+  }, children)), !hideMainButton && !panelIsCollapsed && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     classNames: {
       root: _stylesModule.default.mainButton
     },
@@ -186,6 +193,7 @@ UTPanel.propTypes = {
   classNames: _propTypes.object,
   closeButtonDataTestId: _propTypes.string,
   collapsableHeader: _propTypes.bool,
+  collapsablePanel: _propTypes.bool,
   currentStep: _propTypes.number,
   disableScrollbar: _propTypes.bool,
   HeaderComponent: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.elementType]),
@@ -209,6 +217,7 @@ UTPanel.propTypes = {
   hideCloseButton: _propTypes.bool,
   hideHeader: _propTypes.bool,
   hideMainButton: _propTypes.bool,
+  inline: _propTypes.bool,
   isWorkflow: _propTypes.bool,
   mainActionDataTestId: _propTypes.string,
   mainButton: _propTypes.object,
@@ -221,7 +230,7 @@ UTPanel.propTypes = {
   perfectScrollbarOptions: _propTypes.object,
   secondaryActionDataTestId: _propTypes.string,
   singleHeaderItemsColumn: _propTypes.bool,
-  size: _propTypes.string,
+  size: (0, _propTypes.oneOf)(Object.keys(_constants.SIZES)),
   stepsCount: _propTypes.number,
   subtitle: _propTypes.string,
   title: _propTypes.string,

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

@@ -1,10 +1,11 @@
 $large-panel-size: 600px;
 $medium-panel-size: 450px;
+$small-panel-size: 300px;
+$collapsed-panel-size: 58px;
 
 .paper {
   display: flex;
   height: 100%;
-  position: absolute;
 }
 
 .controlAreaBar {
@@ -77,6 +78,10 @@ $medium-panel-size: 450px;
   margin-top: -16px;
 }
 
+.small {
+  width: $small-panel-size;
+}
+
 .large {
   width: $large-panel-size;
 }
@@ -115,3 +120,42 @@ $medium-panel-size: 450px;
   position: fixed;
   width: inherit;
 }
+
+.docked {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  transition: width 0.3s ease;
+
+  .bodyContainer {
+    overflow: hidden;
+  }
+
+  .paper {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+  }
+
+  .mainButton {
+    position: sticky;
+  }
+}
+
+.closedPersistentPanel {
+  width: 0;
+}
+
+.collapsed {
+  width: $collapsed-panel-size;
+
+  .small,
+  .medium,
+  .large {
+    width: $collapsed-panel-size;
+  }
+}
+
+.collapsedPaper {
+  transition: width 0.3s ease;
+}

package/package.json

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