@widergy/energy-ui 3.82.2 → 3.83.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.83.1](https://github.com/widergy/energy-ui/compare/v3.83.0...v3.83.1) (2025-06-23)
+
+
+### Bug Fixes
+
+* [OAG-1369] date search error ([#621](https://github.com/widergy/energy-ui/issues/621)) ([7133f09](https://github.com/widergy/energy-ui/commit/7133f09385cd3bee092abf55b2b05cd99b64a4db))
+
+# [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/UTDatePicker/index.js

@@ -11,6 +11,7 @@ var _dayjs = _interopRequireDefault(require("@date-io/dayjs"));
 var _dayjs2 = _interopRequireDefault(require("dayjs"));
 var _es = _interopRequireDefault(require("dayjs/locale/es"));
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
 var _form = require("@widergy/web-utils/lib/form");
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -51,6 +52,7 @@ CalendarIcon.defaultProps = {
   xmlnsXlink: "http://www.w3.org/1999/xlink"
 };
 _dayjs2.default.extend(_customParseFormat.default);
+_dayjs2.default.extend(_isBetween.default);
 class CustomUtils extends _dayjs.default {
   constructor() {
     super(...arguments);
@@ -90,20 +92,20 @@ const UTDatePicker = _ref => {
   const onlyPastMonth = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
   const avoidFutureDates = (field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
   const {
-    minDate,
-    maxDate
-  } = (onlyPastMonth ? (0, _utils2.getPastMonthDates)() : avoidFutureDates ? (0, _utils2.getMaxDate)() : range) || {};
+    maxDate,
+    minDate
+  } = onlyPastMonth ? (0, _utils2.getPastMonthDates)() : avoidFutureDates ? (0, _utils2.getMaxDate)() : range || pickerProps || {};
   const [pickedDate, setPickedDate] = (0, _react.useState)(null);
   const [internalError, setInternalError] = (0, _react.useState)(null);
   const handleChange = date => {
-    setPickedDate(date);
-    const newValue = (0, _dayjs2.default)(date, _constants.OUTPUT_LABEL_MASK, true);
-    if ((0, _utils2.isValidDate)({
-      avoidFutureDates,
-      newValue,
-      onlyPastMonth,
-      range
-    })) input.onChange(newValue.format(configMask));else input.onChange('');
+    const finalDate = (0, _utils2.getFinalDate)({
+      date,
+      maxDate,
+      minDate
+    });
+    setPickedDate(finalDate);
+    const newValue = (0, _dayjs2.default)(finalDate, _constants.OUTPUT_LABEL_MASK, true);
+    if (newValue.isValid()) input.onChange(newValue.format(configMask));else input.onChange('');
   };
   (0, _react.useEffect)(() => {
     if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils2.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
@@ -172,10 +174,11 @@ const UTDatePicker = _ref => {
     PopoverProps: {
       ...(iconAnchor ? (0, _constants.iconAnchorProps)(operenerIconReference) : {}),
       ...popoverProps
-    },
+    }
+  }, pickerProps, {
     minDate: minDate,
     maxDate: maxDate
-  }, pickerProps))));
+  }))));
 };
 UTDatePicker.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),

package/dist/components/UTDatePicker/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidDate = exports.isSelected = exports.getPastMonthDates = exports.getMaxDate = exports.dateMatchesFormat = void 0;
+exports.isSelected = exports.getPastMonthDates = exports.getMaxDate = exports.getFinalDate = exports.dateMatchesFormat = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
@@ -27,24 +27,15 @@ const getMaxDate = () => {
   };
 };
 exports.getMaxDate = getMaxDate;
-const avoidFutureDatesValidation = date => !(0, _dayjs.default)().isBefore(date);
-const rangeValidation = (date, range) => {
-  const {
-    minDate,
-    maxDate
-  } = range;
-  return date.isBetween(minDate, maxDate, null, '[]');
-};
-const isValidDate = _ref => {
+const getFinalDate = _ref => {
   let {
-    avoidFutureDates,
-    newValue,
-    onlyPastMonth,
-    range
+    date,
+    maxDate,
+    minDate
   } = _ref;
-  if (avoidFutureDates && !avoidFutureDatesValidation(newValue)) return false;
-  if (onlyPastMonth && !rangeValidation(newValue, getPastMonthDates())) return false;
-  if (range && !rangeValidation(newValue, range)) return false;
-  return newValue.isValid();
+  const formattedDate = (0, _dayjs.default)(date);
+  if (maxDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isAfter(maxDate)) return (0, _dayjs.default)(maxDate);
+  if (minDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isBefore(minDate)) return (0, _dayjs.default)(minDate);
+  return formattedDate;
 };
-exports.isValidDate = isValidDate;
+exports.getFinalDate = getFinalDate;

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.1",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",