@widergy/energy-ui 3.128.1 → 3.129.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [3.129.0](https://github.com/widergy/energy-ui/compare/v3.128.2...v3.129.0) (2026-01-13)
+
+
+### Bug Fixes
+
+* [EVEP-310] barchart linear tooltip ([#741](https://github.com/widergy/energy-ui/issues/741)) ([3bc6fbc](https://github.com/widergy/energy-ui/commit/3bc6fbc9049fa515406aea6666c0faa21162f073))
+* [EVEP-310] fix ([#745](https://github.com/widergy/energy-ui/issues/745)) ([f0f47b0](https://github.com/widergy/energy-ui/commit/f0f47b0aa9e7d21bb1b31a8a499b4265afe4a8f6))
+
+
+### Features
+
+* [OUG] useCSSvariables ([#744](https://github.com/widergy/energy-ui/issues/744)) ([d7d678e](https://github.com/widergy/energy-ui/commit/d7d678e83c8afbe12785a2299bc88f2be8bf2c9b))
+
+## [3.128.2](https://github.com/widergy/energy-ui/compare/v3.128.1...v3.128.2) (2026-01-09)
+
+
+### Bug Fixes
+
+* [AXCH-799] block tests in CI ([#734](https://github.com/widergy/energy-ui/issues/734)) ([1ef1d75](https://github.com/widergy/energy-ui/commit/1ef1d75213c36e899f97b6f85aaa39b2cb0157a5))
+
 ## [3.128.1](https://github.com/widergy/energy-ui/compare/v3.128.0...v3.128.1) (2026-01-07)
 
 

package/dist/components/UTBarChart/components/LinearPlot/index.js

@@ -21,7 +21,8 @@ const LinearPlot = _ref => {
     type,
     color,
     customLineProps,
-    markers
+    markers,
+    classes
   } = _ref;
   const lineGenerator = d3.line().x(_ref2 => {
     let {
@@ -40,11 +41,12 @@ const LinearPlot = _ref => {
   return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", _extends({
     d: lineGenerator(data),
     stroke: color
-  }, props, customLineProps)), markers && (0, _utils.getMarkers)(data, xAxis, yAxis, barWidth, color, markers));
+  }, props, customLineProps)), markers && (0, _utils.getMarkers)(data, xAxis, yAxis, barWidth, color, markers, classes));
 };
 LinearPlot.propTypes = {
   data: _types.linearDataType,
   barWidth: _propTypes.number,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
   yAxis: _propTypes.func,
   xAxis: _propTypes.func,
   type: _propTypes.string,

package/dist/components/UTBarChart/components/LinearPlot/styles.module.scss

@@ -0,0 +1,3 @@
+.tooltip {
+  text-align: center;
+}

package/dist/components/UTBarChart/components/LinearPlot/utils.js

@@ -5,8 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMarkers = exports.getLineConfiguration = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
 var _constants = require("./constants");
+var _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 (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const DEFAULT_LINE_TYPE = 'solid';
 const getLineConfiguration = type => ({
   solid: {
@@ -25,10 +28,12 @@ const getLineConfiguration = type => ({
   custom: {}
 })[type || DEFAULT_LINE_TYPE];
 exports.getLineConfiguration = getLineConfiguration;
-const getMarkers = (data, xAxis, yAxis, barWidth, color, markersConfig) => data.map(_ref => {
+const getMarkers = (data, xAxis, yAxis, barWidth, color, markersConfig, classes) => data.map(_ref => {
   let {
     xCoordinate,
-    value
+    value,
+    tooltipContent,
+    tooltipProps
   } = _ref;
   const x = xAxis(xCoordinate) + barWidth / 2;
   const y = yAxis(value);
@@ -36,7 +41,12 @@ const getMarkers = (data, xAxis, yAxis, barWidth, color, markersConfig) => data.
   if (value === undefined || value === null) {
     return null;
   }
-  return markersConfig.type === _constants.MARKER_TYPES.DOT && /*#__PURE__*/_react.default.createElement("svg", {
+  return markersConfig.type === _constants.MARKER_TYPES.DOT && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, _extends({
+    className: classes.tooltip,
+    content: tooltipContent,
+    interactive: false,
+    stringContentClassName: _stylesModule.default.tooltip
+  }, tooltipProps), /*#__PURE__*/_react.default.createElement("svg", {
     x: x - size,
     y: y - size,
     height: 2 * size,
@@ -46,6 +56,6 @@ const getMarkers = (data, xAxis, yAxis, barWidth, color, markersConfig) => data.
     cy: size,
     r: size,
     fill: color
-  }));
+  })));
 });
 exports.getMarkers = getMarkers;

package/dist/components/UTBarChart/index.js

@@ -228,7 +228,8 @@ const UTBarChart = _ref => {
       markers: markers,
       type: type,
       xAxis: xAxis,
-      yAxis: linearYAxis
+      yAxis: linearYAxis,
+      classes: classes
     });
   }), /*#__PURE__*/_react.default.createElement(_Levels.default, {
     classes: classes,

package/dist/index.js

@@ -513,6 +513,12 @@ Object.defineProperty(exports, "stylesDeduplicationUtils", {
     return _stylesDeduplicationUtils.default;
   }
 });
+Object.defineProperty(exports, "useCSSVariables", {
+  enumerable: true,
+  get: function () {
+    return _useCSSVariables.default;
+  }
+});
 Object.defineProperty(exports, "useScrollBasedMenu", {
   enumerable: true,
   get: function () {
@@ -604,5 +610,6 @@ var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
 var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
 var _stylesDeduplicationUtils = _interopRequireDefault(require("./utils/stylesDeduplicationUtils"));
 var _useScrollBasedMenu = _interopRequireDefault(require("./utils/hooks/use-scroll-based-menu"));
+var _useCSSVariables = _interopRequireDefault(require("./utils/hooks/useCSSVariables"));
 var _UTCalendar = _interopRequireDefault(require("./components/UTCalendar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.baseTokens = void 0;
+const baseTokens = exports.baseTokens = {
+  base: {
+    'size-full': '100%',
+    'size-0': '0rem',
+    'size-1': '0.125rem',
+    'size-2': '0.25rem',
+    'size-3': '0.5rem',
+    'size-4': '0.75rem',
+    'size-5': '1rem',
+    'size-6': '1.25rem',
+    'size-7': '1.5rem',
+    'size-8': '2rem',
+    'size-9': '2.5rem',
+    'size-10': '3rem',
+    'size-11': '3.5rem',
+    'size-12': '4rem',
+    'size-13': '6rem',
+    'spacing-0': '0rem',
+    'spacing-1': '0.125rem',
+    'spacing-2': '0.25rem',
+    'spacing-3': '0.5rem',
+    'spacing-4': '0.75rem',
+    'spacing-5': '1rem',
+    'spacing-6': '1.25rem',
+    'spacing-7': '1.5rem',
+    'spacing-8': '2rem',
+    'spacing-9': '2.5rem',
+    'spacing-10': '3rem',
+    'spacing-11': '3.5rem',
+    'spacing-12': '4rem',
+    'spacing-13': '6rem',
+    'spacing-14': '8rem',
+    'font-family': 'Inter',
+    'font-size-100': '0.625rem',
+    'font-size-200': '0.75rem',
+    'font-size-300': '0.875rem',
+    'font-size-400': '1rem',
+    'font-size-500': '1.125rem',
+    'font-size-600': '1.25rem',
+    'font-size-700': '1.5rem',
+    'font-size-800': '1.875rem',
+    'font-size-900': '2.5rem',
+    'font-size-1000': '3rem',
+    'font-size-1100': '4rem',
+    'font-weight-regular': '400',
+    'font-weight-medium': '500',
+    'font-weight-semibold': '600',
+    'font-weight-bold': '700',
+    'font-lh-100': '',
+    'font-lh-110': '',
+    'font-lh-120': '',
+    'font-lh-140': '',
+    'font-lh-150': '',
+    'font-lh-170': ''
+  },
+  semantic: {
+    'padding-2xs': 'spacing-2',
+    'padding-xs': '	spacing-3',
+    'padding-sm': 'spacing-4',
+    'padding-md': 'spacing-5',
+    'padding-lg': 'spacing-7',
+    'padding-xl': 'spacing-8',
+    'padding-2xl': 'spacing-9',
+    'gap-2xs': 'spacing-1',
+    'gap-xs': 'spacing-2',
+    'gap-sm': 'spacing-3',
+    'gap-md': 'spacing-4',
+    'gap-lg': 'spacing-5',
+    'gap-xl': 'spacing-7',
+    'gap-2xl': 'spacing-8',
+    'gap-3xl': 'spacing-9',
+    'font-heading-size-1': 'font-size-800',
+    'font-heading-size-2': 'font-size-700',
+    'font-heading-size-3': 'font-size-600',
+    'font-heading-size-4': 'font-size-500',
+    'font-heading-size-5': 'font-size-400',
+    'font-heading-size-6': 'font-size-500',
+    'font-heading-weight-regular': 'font-weight-regular',
+    'font-heading-weight-medium': 'font-weight-medium',
+    'font-heading-lh': '',
+    'font-body-size-sm': 'font-size-200',
+    'font-body-size-md': 'font-size-300',
+    'font-body-size-lg': 'font-size-400',
+    'font-body-weight-regular': 'font-weight-regular',
+    'font-body-weight-medium': 'font-weight-medium',
+    'font-body-weight-semibold': 'font-weight-semibold',
+    'font-body-weight-bold': 'font-weight-bold',
+    'font-body-lh-sm': '',
+    'font-body-lh-md': '',
+    'font-body-lh-lg': '',
+    'font-metric-size-sm': 'font-size-300',
+    'font-metric-size-md': 'font-size-400',
+    'font-metric-size-lg': 'font-size-500',
+    'font-metric-weight-regular': 'font-weight-regular',
+    'font-metric-weight-medium': 'font-weight-medium',
+    'font-metric-lh': '',
+    'font-action-size-sm': 'font-size-200',
+    'font-action-size-md': 'font-size-300',
+    'font-action-weight': 'font-weight-medium',
+    'font-action-lh': '',
+    'font-label-size-sm': 'font-size-200',
+    'font-label-size-md': 'font-size-300',
+    'font-label-weight': 'font-weight-regular',
+    'font-label-lh': '',
+    'size-control-2xs': 'size-5',
+    'size-control-xs': 'size-7',
+    'size-control-sm': 'size-8',
+    'size-control-md': 'size-9',
+    'size-control-lg': 'size-10',
+    'size-control-xl': 'size-11',
+    'size-control-2xl': 'size-12',
+    'size-control-3xl': 'size-13'
+  },
+  component: {
+    'UT-button-height-sm': 'size-control-sm',
+    'UT-button-height-md': 'size-control-md',
+    'UT-button-height-lg': 'size-control-lg'
+  }
+};

package/dist/utils/hooks/useCSSVariables/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _mergeWith = _interopRequireDefault(require("lodash/mergeWith"));
+var _constants = require("./constants");
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Hook that injects CSS variables into the html element
+ * The variables will be available for all elements in the document
+ *
+ * @param {Object} cssVariables - Object with key-value pairs of CSS variables
+ * @param {string} tagId - ID for the style tag (default: 'wdrgy-css-variables')
+ * @param {string} prefix - Prefix for the variables (default: '')
+ * @param {Object} designTokens - Object with {base, semantic, component} tokens
+ *
+ * @example
+ * useCSSVariables({
+ *   primaryColor: '#007bff',
+ *   fontSize: '14px',
+ *   spacing: '8px'
+ * });
+ * // Generates:
+ * // html {
+ * //   --primaryColor: #007bff;
+ * //   --fontSize: 14px;
+ * //   --spacing: 8px;
+ * // }
+ */
+
+const useCSSVariables = function (cssVariables) {
+  let tagId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'wdrgy-css-variables';
+  let prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  (0, _react.useEffect)(() => {
+    // Validate and build CSS variables safely
+    const formattedVariables = Object.entries((0, _utils.mapTokens)((0, _mergeWith.default)(_constants.baseTokens, cssVariables))).filter(cssVar => typeof cssVar[1] === 'string' || typeof cssVar[1] === 'number').map(_ref => {
+      let [key, value] = _ref;
+      const variableName = prefix ? "--".concat(prefix, "-").concat(key) : "--".concat(key);
+      return "".concat(variableName, ": ").concat(value, ";");
+    }).join('\n  ');
+
+    // Remove previous style tag if it exists
+    const existingStyle = document.getElementById(tagId);
+    if (existingStyle) existingStyle.remove();
+
+    // Create the style tag content
+    const styleContent = "html {\n  ".concat(formattedVariables, "\n}");
+
+    // Create and insert the style tag
+    const styleTag = document.createElement('style');
+    styleTag.id = tagId;
+    styleTag.textContent = styleContent;
+    document.head.appendChild(styleTag);
+
+    // Cleanup: remove the style tag on unmount
+    return () => {
+      const style = document.getElementById(tagId);
+      if (style) style.remove();
+    };
+  }, [cssVariables, prefix, tagId]);
+};
+var _default = exports.default = useCSSVariables;

package/dist/utils/hooks/useCSSVariables/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapTokens = void 0;
+const mapTokens = tokens => {
+  const {
+    base = {},
+    semantic = {},
+    component = {},
+    ...other
+  } = tokens || {};
+  const allTokens = {
+    ...base,
+    ...other
+  };
+  Object.entries(semantic).concat(Object.entries(component)).forEach(_ref => {
+    let [key, value] = _ref;
+    allTokens[key] = allTokens[value];
+  });
+  return allTokens;
+};
+exports.mapTokens = mapTokens;

package/package.json

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