@widergy/energy-ui 3.133.1 → 3.135.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [3.135.0](https://github.com/widergy/energy-ui/compare/v3.134.0...v3.135.0) (2026-02-04)
+
+
+### Bug Fixes
+
+* [AXCH-799] new build step ([#743](https://github.com/widergy/energy-ui/issues/743)) ([b637fbc](https://github.com/widergy/energy-ui/commit/b637fbc0f5246d2c411905a0e5cdf1301b25f173))
+* ci version ([102a74f](https://github.com/widergy/energy-ui/commit/102a74f03b4cab60cec619d565e1966d374fe30a))
+
+
+### Features
+
+* [BRILLA-213] dynamic height in UTDataElement ([#754](https://github.com/widergy/energy-ui/issues/754)) ([6e4d4d5](https://github.com/widergy/energy-ui/commit/6e4d4d55caad3dbe18b4fe22c2b352511bef11e4))
+
+# [3.134.0](https://github.com/widergy/energy-ui/compare/v3.133.1...v3.134.0) (2026-02-04)
+
+
+### Features
+
+* [AXCH-799] sb tests in gh actions ([#747](https://github.com/widergy/energy-ui/issues/747)) ([cee8893](https://github.com/widergy/energy-ui/commit/cee88936ce45c771dddaed880e8f4f0e45958f93))
+
 ## [3.133.1](https://github.com/widergy/energy-ui/compare/v3.133.0...v3.133.1) (2026-01-27)
 
 

package/dist/components/UTDataElement/README.md

@@ -4,27 +4,28 @@ A versatile data component that can be customized with various themes, sizes, ic
 
 ## Props
 
-| Name            | Type              | Default      | Description                                                        |
-| --------------- | ----------------- | ------------ | ------------------------------------------------------------------ |
-| action          | object            |              | Action configuration for button or switch. See Action Types below. |
-| area            | bool              | `false`      | Specifies whether the component has a background area.             |
-| badge           | string \| number  |              | Displays a badge with text or number.                              |
-| badgeProps      | object            | `{}`         | Additional props for customizing the badge.                        |
-| children        | element           |              | Collapsible content displayed below the main component.            |
-| classes         | objectOf(string)  |              | Theme classes for styling.                                         |
-| classNames      | objectOf(string)  |              | Additional class names for custom styling.                         |
-| Data            | element \| string |              | Data content to display (can be a React element or string).        |
-| dataProps       | object            | `{}`         | Additional props for configuring the data element.                 |
-| forceShowBadge  | bool              | `false`      | Forces the badge to be displayed even when empty.                  |
-| Icon            | element \| string |              | Icon to display (can be a UTIcon name or custom React element).    |
-| iconProps       | object            | `{}`         | Additional props for the icon element.                             |
-| orientation     | string            | `horizontal` | Defines the layout orientation.                                    |
-| paddingVertical | string            | `medium`     | Vertical padding applied to the component.                         |
-| prefix          | string            |              | Text or symbol displayed before the title.                         |
-| prefixProps     | object            | `{}`         | Additional props for customizing the prefix.                       |
-| spacing         | string            | `medium`     | Defines the spacing between elements.                              |
-| title           | string            |              | Title text displayed in the component.                             |
-| titleProps      | object            | `{}`         | Additional props for customizing the title.                        |
+| Name               | Type              | Default      | Description                                                        |
+| ------------------ | ----------------- | ------------ | ------------------------------------------------------------------ |
+| action             | object            |              | Action configuration for button or switch. See Action Types below. |
+| area               | bool              | `false`      | Specifies whether the component has a background area.             |
+| badge              | string \| number  |              | Displays a badge with text or number.                              |
+| badgeProps         | object            | `{}`         | Additional props for customizing the badge.                        |
+| children           | element           |              | Collapsible content displayed below the main component.            |
+| classes            | objectOf(string)  |              | Theme classes for styling.                                         |
+| classNames         | objectOf(string)  |              | Additional class names for custom styling.                         |
+| Data               | element \| string |              | Data content to display (can be a React element or string).        |
+| dataProps          | object            | `{}`         | Additional props for configuring the data element.                 |
+| forceShowBadge     | bool              | `false`      | Forces the badge to be displayed even when empty.                  |
+| Icon               | element \| string |              | Icon to display (can be a UTIcon name or custom React element).    |
+| iconProps          | object            | `{}`         | Additional props for the icon element.                             |
+| orientation        | string            | `horizontal` | Defines the layout orientation.                                    |
+| paddingVertical    | string            | `medium`     | Vertical padding applied to the component.                         |
+| prefix             | string            |              | Text or symbol displayed before the title.                         |
+| prefixProps        | object            | `{}`         | Additional props for customizing the prefix.                       |
+| spacing            | string            | `medium`     | Defines the spacing between elements.                              |
+| title              | string            |              | Title text displayed in the component.                             |
+| titleProps         | object            | `{}`         | Additional props for customizing the title.                        |
+| transitionDuration | number            | `300`        | Duration of the transition animation in milliseconds.              |
 
 ## Action Types
 

package/dist/components/UTDataElement/UTDataElement.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithTooltip = exports.WithSwitchAction = exports.WithPrefix = exports.WithNumericBadge = exports.WithIcon = exports.WithExpandableContent = exports.WithButtonAction = exports.WithBadge = exports.VerticalOrientation = exports.SmallSpacing = exports.SmallPadding = exports.Playground = exports.ForcedBadge = exports.Default = exports.CustomDataTestId = exports.ComplexExample = exports.AreaMode = void 0;
+exports.default = exports.WithTooltip = exports.WithSwitchAction = exports.WithPrefix = exports.WithNumericBadge = exports.WithIcon = exports.WithExpandableContent = exports.WithButtonAction = exports.WithBadge = exports.VerticalOrientation = exports.SmallSpacing = exports.SmallPadding = exports.Playground = exports.NestedExample = exports.ForcedBadge = exports.Default = exports.CustomDataTestId = exports.ComplexExample = exports.AreaMode = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
@@ -457,6 +457,68 @@ const ComplexExample = exports.ComplexExample = {
   },
   name: 'Ejemplo Complejo'
 };
+const NestedExample = exports.NestedExample = {
+  args: {
+    title: 'Prueba anidamiento',
+    prefix: 'Nivel 1',
+    Data: /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "h6",
+      weight: "bold",
+      colorTheme: "primary"
+    }, "$10,000.00"),
+    Icon: 'IconBuildingBank',
+    badge: 'Master',
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_.default, {
+      title: "Este elemento es hijo del primero",
+      prefix: "Nivel 2",
+      Data: /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        variant: "body1",
+        weight: "medium",
+        colorTheme: "secondary"
+      }, "$7,500.00"),
+      Icon: "IconPigMoney",
+      badge: "Active",
+      orientation: _constants.ORIENTATION.HORIZONTAL,
+      paddingVertical: _constants.PADDING.SMALL,
+      spacing: _constants.SPACING.SMALL
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '12px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_.default, {
+      title: "Este elemento es hijo del segundo",
+      prefix: "Nivel 3",
+      Data: /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        variant: "body2",
+        weight: "regular",
+        colorTheme: "success"
+      }, "$2,500.00"),
+      Icon: "IconShield",
+      badge: "3",
+      orientation: _constants.ORIENTATION.HORIZONTAL,
+      paddingVertical: _constants.PADDING.SMALL,
+      spacing: _constants.SPACING.SMALL
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '8px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "caption",
+      colorTheme: "gray"
+    }, "\xDAltimo dep\xF3sito: $500.00 - 15 Ene 2024"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "caption",
+      colorTheme: "gray"
+    }, "Meta: $5,000.00 (50% completado)")))))),
+    orientation: _constants.ORIENTATION.HORIZONTAL,
+    paddingVertical: _constants.PADDING.MEDIUM,
+    spacing: _constants.SPACING.MEDIUM
+  },
+  name: 'Ejemplo de Anidamiento y contenido dinámico'
+};
 const AreaMode = exports.AreaMode = {
   args: {
     title: 'Elemento con Área Completa',

package/dist/components/UTDataElement/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOLTIP_PROPS = exports.SPACING = exports.PADDING = exports.ORIENTATION = exports.ACTION_TYPE = void 0;
+exports.TOOLTIP_PROPS = exports.SPACING = exports.PADDING = exports.ORIENTATION = exports.ANIMATION = exports.ACTION_TYPE = void 0;
 const ORIENTATION = exports.ORIENTATION = {
   HORIZONTAL: 'horizontal',
   VERTICAL: 'vertical'
@@ -24,4 +24,7 @@ const ACTION_TYPE = exports.ACTION_TYPE = {
 const TOOLTIP_PROPS = exports.TOOLTIP_PROPS = {
   appendTo: () => document.body,
   interactive: false
+};
+const ANIMATION = exports.ANIMATION = {
+  TRANSITION_DURATION: 300
 };

package/dist/components/UTDataElement/index.js

@@ -49,19 +49,37 @@ const UTDataElement = _ref => {
     prefixProps = {},
     spacing = _constants.SPACING.MEDIUM,
     title,
-    titleProps = {}
+    titleProps = {},
+    transitionDuration = _constants.ANIMATION.TRANSITION_DURATION
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, theme, classNames), [classNames, theme]);
   const [isCollapsed, setIsCollapsed] = (0, _react.useState)(true);
-  const [childrenHeight, setChildrenHeight] = (0, _react.useState)(0);
+  const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
+  const [contentHeight, setContentHeight] = (0, _react.useState)('0px');
   const childrenRef = (0, _react.useRef)(null);
-  const toggleCollapsed = (0, _react.useCallback)(() => setIsCollapsed(!isCollapsed), [isCollapsed]);
-  (0, _react.useEffect)(() => {
-    if (childrenRef.current) {
-      const rect = childrenRef.current.getBoundingClientRect();
-      setChildrenHeight(rect.height);
+  const toggleCollapsed = (0, _react.useCallback)(() => {
+    if (isCollapsed) {
+      if (childrenRef.current) {
+        const height = childrenRef.current.scrollHeight;
+        setContentHeight("".concat(height, "px"));
+        setIsTransitioning(true);
+        setIsCollapsed(false);
+        setTimeout(() => {
+          setIsTransitioning(false);
+          setContentHeight('none');
+        }, transitionDuration);
+      }
+    } else if (childrenRef.current) {
+      const height = childrenRef.current.scrollHeight;
+      setContentHeight("".concat(height, "px"));
+      setIsTransitioning(true);
+      requestAnimationFrame(() => {
+        setContentHeight('0px');
+        setIsCollapsed(true);
+        setTimeout(() => setIsTransitioning(false), transitionDuration);
+      });
     }
-  }, [children]);
+  }, [isCollapsed]);
   const IconComponent = (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon;
   const DataComponent = (0, _componentUtils.isUTLabel)(Data) ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, dataProps, Data) : Data;
   const showBadge = forceShowBadge || (0, _isString.default)(badge) && !(0, _isEmpty.default)(badge) || (0, _isFinite.default)(badge);
@@ -73,6 +91,7 @@ const UTDataElement = _ref => {
   const contentClasses = "".concat(classes.content, " ").concat(_stylesModule.default["spacing".concat((0, _componentUtils.capitalize)(spacing))]);
   const infoClasses = "".concat(classes.info, " ").concat(orientation === _constants.ORIENTATION.VERTICAL && classes.vertical);
   const iconCollapseButtonClasses = "".concat(classes.iconCollapseButton, " ").concat(isCollapsed && classes.collapsed);
+  const childrenClasses = "".concat(classes.children, " ").concat(isCollapsed ? classes.childrenCollapsed : classes.childrenExpanded, " ").concat(isTransitioning ? classes.childrenTransitioning : classes.childrenStatic);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat((0, _componentUtils.capitalize)(paddingVertical))]),
     "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
@@ -108,10 +127,9 @@ const UTDataElement = _ref => {
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
   })), children && /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      maxHeight: isCollapsed ? 0 : childrenHeight,
-      marginTop: isCollapsed ? 0 : 16
+      maxHeight: contentHeight
     },
-    className: classes.children
+    className: childrenClasses
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: childrenRef
   }, children)));
@@ -135,6 +153,7 @@ UTDataElement.propTypes = {
   prefixProps: _propTypes.object,
   spacing: _propTypes.string,
   title: _propTypes.string,
-  titleProps: _propTypes.object
+  titleProps: _propTypes.object,
+  transitionDuration: _propTypes.number
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTDataElement);

package/dist/components/UTDataElement/styles.module.scss

@@ -62,8 +62,27 @@
 .children {
   overflow: hidden;
   transition:
-    max-height 0.3s ease,
-    margin-top 0.3s ease;
+    max-height 0.3s ease-out,
+    margin-top 0.3s ease-out;
+}
+
+.childrenCollapsed {
+  max-height: 0;
+  margin-top: 0;
+}
+
+.childrenExpanded {
+  margin-top: 16px;
+}
+
+.childrenTransitioning {
+  transition:
+    max-height 0.3s ease-out,
+    margin-top 0.3s ease-out;
+}
+
+.childrenStatic {
+  transition: none;
 }
 
 .badge {

package/package.json

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