@synerise/ds-progress-bar 1.2.2 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.3.0...@synerise/ds-progress-bar@1.3.1) (2026-04-20)
+
+### Bug Fixes
+
+- **progress-bar:** change cursor to pointer if onClick prop passed ([2968660](https://github.com/Synerise/synerise-design/commit/29686608c296ac7038e860d8d58f677399e6aee7))
+
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.2.2...@synerise/ds-progress-bar@1.3.0) (2026-04-10)
+
+### Features
+
+- **progress-bar:** add onClick to Multivalue bars, fix border-radius with Tooltip wrappers ([9cf9f86](https://github.com/Synerise/synerise-design/commit/9cf9f86597bbf04a8ba8a42703fc6fc65065ccd1))
+
 ## [1.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.2.1...@synerise/ds-progress-bar@1.2.2) (2026-04-01)
 
 **Note:** Version bump only for package @synerise/ds-progress-bar

package/README.md

@@ -45,7 +45,8 @@ Progress-Bar UI Component
 
 | Property     | Description                              | Type         | Default     |
 | ------------ | ---------------------------------------- | ------------ | ----------- |
-| percent      | Value to display (length of bar)         | number       | -           |
-| color        | Bar color                                | string       | -           |
-| tooltip      | Tooltip content shown on hover           | ReactNode    | `undefined` |
-| tooltipProps | Additional props passed to the Tooltip   | TooltipProps | `undefined` |
+| percent      | Value to display (length of bar)         | number                      | -           |
+| color        | Bar color                                | string                      | -           |
+| onClick      | Click handler for the bar segment        | `(event: MouseEvent) => void` | `undefined` |
+| tooltip      | Tooltip content shown on hover           | ReactNode                   | `undefined` |
+| tooltipProps | Additional props passed to the Tooltip   | TooltipProps                | `undefined` |

package/dist/Multivalue/MultiValue.styles.d.ts

@@ -1,6 +1,11 @@
+import { MouseEvent } from 'react';
 export declare const Multivalue: import('styled-components').StyledComponent<"div", any, {
     color: string;
     percent: number;
+    $isFirst?: boolean;
+    $isLast?: boolean;
+    $stacked?: boolean;
+    onClick?: (event: MouseEvent) => void;
 }, never>;
 export declare const Container: import('styled-components').StyledComponent<"div", any, {
     stackedBars: boolean;

package/dist/Multivalue/MultiValue.styles.js

@@ -2,11 +2,11 @@ import styled, { css } from "styled-components";
 const Multivalue = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MultiValuestyles__Multivalue",
   componentId: "sc-145qx7z-0"
-})(["background:", ";width:", "%;height:6px;border-radius:6px;overflow:hidden;margin-top:-6px;"], (props) => props.color, (props) => props.percent);
+})(["background:", ";width:", "%;height:6px;overflow:hidden;margin-top:-6px;", ""], (props) => props.color, (props) => props.percent, (props) => props.$stacked ? css(["border-radius:6px;", ""], !props.$isFirst && css(["border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:2px solid white;"])) : css(["border-radius:0;", " ", ""], props.$isFirst && css(["border-top-left-radius:6px;border-bottom-left-radius:6px;"]), props.$isLast && css(["border-top-right-radius:6px;border-bottom-right-radius:6px;"])));
 const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MultiValuestyles__Container",
   componentId: "sc-145qx7z-1"
-})(["position:relative;height:16px;width:100%;padding-top:11px;", ""], (props) => props.stackedBars ? css(["", ":not(:first-child){border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:2px solid white;}"], Multivalue) : css(["justify-content:flex-start;display:flex;gap:2px;", "{border-radius:0;&:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}&:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}}"], Multivalue));
+})(["position:relative;height:16px;width:100%;padding-top:11px;", ""], (props) => !props.stackedBars && css(["justify-content:flex-start;display:flex;gap:2px;"]));
 export {
   Container,
   Multivalue

package/dist/Multivalue/Multivalue.js

@@ -16,10 +16,10 @@ const Multivalue = ({
   stackedBars = true,
   ...htmlAttributes
 }) => {
-  const finalValues = useMemo(() => stackedBars ? values.sort((a, b) => {
+  const finalValues = useMemo(() => stackedBars ? [...values].sort((a, b) => {
     return b.percent - a.percent;
   }) : values, [stackedBars, values]);
-  return /* @__PURE__ */ jsx(Container, { stackedBars, ...htmlAttributes, children: finalValues.map((val, index) => /* @__PURE__ */ jsx(Tooltip, { title: val.tooltip, ...val?.tooltipProps, children: /* @__PURE__ */ jsx(Multivalue$1, { color: val.color, percent: normalizePercent(val.percent) }, `${val.color}-${val.percent}-${index}`) })) });
+  return /* @__PURE__ */ jsx(Container, { stackedBars, ...htmlAttributes, children: finalValues.map((val, index) => /* @__PURE__ */ jsx(Tooltip, { title: val.tooltip, ...val?.tooltipProps, children: /* @__PURE__ */ jsx(Multivalue$1, { color: val.color, percent: normalizePercent(val.percent), onClick: val.onClick, $isFirst: index === 0, $isLast: index === finalValues.length - 1, $stacked: stackedBars }, `${val.color}-${val.percent}-${index}`) })) });
 };
 export {
   Multivalue as default

package/dist/Multivalue/Multivalue.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { TooltipProps } from '@synerise/ds-tooltip';
 import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
@@ -8,6 +8,7 @@ export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
 export type ProgressValue = {
     percent: number;
     color: string;
+    onClick?: (event: MouseEvent) => void;
     tooltip?: ReactNode;
     tooltipProps?: TooltipProps;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-progress-bar",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "Progress-Bar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -17,14 +17,11 @@
   },
   "scripts": {
     "build": "vite build",
-    "build:css": "node ../../../scripts/style/less.js",
-    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
     "build:watch": "vite build --watch",
-    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
-    "test": "jest",
-    "test:watch": "pnpm run test -- --watchAll",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,15 +32,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.11",
-    "@synerise/ds-tooltip": "^1.4.11",
-    "@synerise/ds-utils": "^1.7.1",
+    "@synerise/ds-form-field": "^1.3.12",
+    "@synerise/ds-tooltip": "^1.4.12",
+    "@synerise/ds-utils": "^1.8.0",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "vitest": "4"
   },
-  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
+  "gitHead": "4766ad0a45eea48ac75745bc9e7525f5dccc71e0"
 }