@synerise/ds-progress-bar 1.1.40 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.40...@synerise/ds-progress-bar@1.2.0) (2026-03-20)
7
+
8
+ ### Features
9
+
10
+ - **progress-bar:** tooltips in multivalue progress bar ([e37f829](https://github.com/Synerise/synerise-design/commit/e37f829fee9c194abf2312349b563e4a55f78cad))
11
+
6
12
  ## [1.1.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.39...@synerise/ds-progress-bar@1.1.40) (2026-03-09)
7
13
 
8
14
  **Note:** Version bump only for package @synerise/ds-progress-bar
package/README.md CHANGED
@@ -15,14 +15,15 @@ Progress-Bar UI Component
15
15
 
16
16
  | Property | Description | Type | Default |
17
17
  | ----------- | -------------------------------------------- | ------- | ------- |
18
- | steps | Number of steps in progress bar | number | - |
19
- | description | Text of description under progress bar | string | - |
20
- | percent | Value of progress bar, also visible in label | number | - |
21
- | thin | Displays a thinner line | boolean | `false` |
22
- | label | Optional label above progress bar | string | - |
23
- | customColor | Bar color | string | - |
24
- | width | CSS width property of progress-bar | string | - |
25
- | inline | set percent value next to progress bar | boolean | `false` |
18
+ | steps | Number of steps in progress bar | number | `1` |
19
+ | description | Text of description under progress bar | ReactNode | - |
20
+ | percent | Value of progress bar, also visible in label | number | `50` |
21
+ | thin | Displays a thinner line | boolean | `false` |
22
+ | label | Optional label above progress bar | ReactNode | - |
23
+ | customColor | Bar color | string | `''` |
24
+ | width | CSS width of each segment tile | string | `'100%'` |
25
+ | inline | set percent value next to progress bar | boolean | `false` |
26
+ | containerStyles | Container inline styles (**@deprecated** — use `style` prop) | CSSProperties | - |
26
27
 
27
28
  ### ProgressTiles
28
29
 
@@ -42,7 +43,9 @@ Progress-Bar UI Component
42
43
 
43
44
  ### ProgressValue
44
45
 
45
- | Property | Description | Type | Default |
46
- | -------- | -------------------------------- | ------ | ------- |
47
- | percent | Value to display (length of bar) | number | - |
48
- | color | Bar color | string | - |
46
+ | Property | Description | Type | Default |
47
+ | ------------ | ---------------------------------------- | ------------ | ----------- |
48
+ | percent | Value to display (length of bar) | number | - |
49
+ | color | Bar color | string | - |
50
+ | tooltip | Tooltip content shown on hover | ReactNode | `undefined` |
51
+ | tooltipProps | Additional props passed to the Tooltip | TooltipProps | `undefined` |
@@ -2,6 +2,7 @@ var _excluded = ["values", "stackedBars"];
2
2
  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); }
3
3
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
4
  import React, { useMemo } from 'react';
5
+ import Tooltip from '@synerise/ds-tooltip';
5
6
  import * as S from './MultiValue.styles';
6
7
  var normalizePercent = function normalizePercent(value) {
7
8
  if (value < 0) {
@@ -25,11 +26,13 @@ var Multivalue = function Multivalue(_ref) {
25
26
  return /*#__PURE__*/React.createElement(S.Container, _extends({
26
27
  stackedBars: stackedBars
27
28
  }, htmlAttributes), finalValues.map(function (val, index) {
28
- return /*#__PURE__*/React.createElement(S.Multivalue, {
29
+ return /*#__PURE__*/React.createElement(Tooltip, _extends({
30
+ title: val.tooltip
31
+ }, val == null ? void 0 : val.tooltipProps), /*#__PURE__*/React.createElement(S.Multivalue, {
29
32
  key: val.color + "-" + val.percent + "-" + index,
30
33
  color: val.color,
31
34
  percent: normalizePercent(val.percent)
32
- });
35
+ }));
33
36
  }));
34
37
  };
35
38
  export default Multivalue;
@@ -1,3 +1,5 @@
1
+ import { type ReactNode } from 'react';
2
+ import { type TooltipProps } from '@synerise/ds-tooltip';
1
3
  import { type WithHTMLAttributes } from '@synerise/ds-utils';
2
4
  export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
3
5
  values: ProgressValue[];
@@ -6,4 +8,6 @@ export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
6
8
  export type ProgressValue = {
7
9
  percent: number;
8
10
  color: string;
11
+ tooltip?: ReactNode;
12
+ tooltipProps?: TooltipProps;
9
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-progress-bar",
3
- "version": "1.1.40",
3
+ "version": "1.2.0",
4
4
  "description": "Progress-Bar UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,13 +35,14 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-form-field": "^1.3.8",
39
- "@synerise/ds-utils": "^1.6.0"
38
+ "@synerise/ds-form-field": "^1.3.9",
39
+ "@synerise/ds-tooltip": "^1.4.9",
40
+ "@synerise/ds-utils": "^1.7.0"
40
41
  },
41
42
  "peerDependencies": {
42
43
  "@synerise/ds-core": "*",
43
44
  "react": ">=16.9.0 <= 18.3.1",
44
45
  "styled-components": "^5.3.3"
45
46
  },
46
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
47
+ "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
47
48
  }