@synerise/ds-progress-bar 1.2.1 → 1.3.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +5 -4
  3. package/dist/Multivalue/MultiValue.styles.d.ts +3 -0
  4. package/dist/Multivalue/MultiValue.styles.js +2 -2
  5. package/dist/Multivalue/Multivalue.js +2 -2
  6. package/dist/Multivalue/Multivalue.types.d.ts +2 -1
  7. package/package.json +9 -11
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
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.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)
7
+
8
+ ### Features
9
+
10
+ - **progress-bar:** add onClick to Multivalue bars, fix border-radius with Tooltip wrappers ([9cf9f86](https://github.com/Synerise/synerise-design/commit/9cf9f86597bbf04a8ba8a42703fc6fc65065ccd1))
11
+
12
+ ## [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)
13
+
14
+ **Note:** Version bump only for package @synerise/ds-progress-bar
15
+
6
16
  ## [1.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.2.0...@synerise/ds-progress-bar@1.2.1) (2026-03-24)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-progress-bar
package/README.md CHANGED
@@ -45,7 +45,8 @@ Progress-Bar UI Component
45
45
 
46
46
  | Property | Description | Type | Default |
47
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` |
48
+ | percent | Value to display (length of bar) | number | - |
49
+ | color | Bar color | string | - |
50
+ | onClick | Click handler for the bar segment | `(event: MouseEvent) => void` | `undefined` |
51
+ | tooltip | Tooltip content shown on hover | ReactNode | `undefined` |
52
+ | tooltipProps | Additional props passed to the Tooltip | TooltipProps | `undefined` |
package/dist/Multivalue/MultiValue.styles.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  export declare const Multivalue: import('styled-components').StyledComponent<"div", any, {
2
2
  color: string;
3
3
  percent: number;
4
+ $isFirst?: boolean;
5
+ $isLast?: boolean;
6
+ $stacked?: boolean;
4
7
  }, never>;
5
8
  export declare const Container: import('styled-components').StyledComponent<"div", any, {
6
9
  stackedBars: boolean;
package/dist/Multivalue/MultiValue.styles.js CHANGED
@@ -2,11 +2,11 @@ import styled, { css } from "styled-components";
2
2
  const Multivalue = /* @__PURE__ */ styled.div.withConfig({
3
3
  displayName: "MultiValuestyles__Multivalue",
4
4
  componentId: "sc-145qx7z-0"
5
- })(["background:", ";width:", "%;height:6px;border-radius:6px;overflow:hidden;margin-top:-6px;"], (props) => props.color, (props) => props.percent);
5
+ })(["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;"])));
6
6
  const Container = /* @__PURE__ */ styled.div.withConfig({
7
7
  displayName: "MultiValuestyles__Container",
8
8
  componentId: "sc-145qx7z-1"
9
- })(["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));
9
+ })(["position:relative;height:16px;width:100%;padding-top:11px;", ""], (props) => !props.stackedBars && css(["justify-content:flex-start;display:flex;gap:2px;"]));
10
10
  export {
11
11
  Container,
12
12
  Multivalue
package/dist/Multivalue/Multivalue.js CHANGED
@@ -16,10 +16,10 @@ const Multivalue = ({
16
16
  stackedBars = true,
17
17
  ...htmlAttributes
18
18
  }) => {
19
- const finalValues = useMemo(() => stackedBars ? values.sort((a, b) => {
19
+ const finalValues = useMemo(() => stackedBars ? [...values].sort((a, b) => {
20
20
  return b.percent - a.percent;
21
21
  }) : values, [stackedBars, values]);
22
- 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}`) })) });
22
+ 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}`) })) });
23
23
  };
24
24
  export {
25
25
  Multivalue as default
package/dist/Multivalue/Multivalue.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import { MouseEvent, ReactNode } from 'react';
2
2
  import { TooltipProps } from '@synerise/ds-tooltip';
3
3
  import { WithHTMLAttributes } from '@synerise/ds-utils';
4
4
  export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
@@ -8,6 +8,7 @@ export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
8
8
  export type ProgressValue = {
9
9
  percent: number;
10
10
  color: string;
11
+ onClick?: (event: MouseEvent) => void;
11
12
  tooltip?: ReactNode;
12
13
  tooltipProps?: TooltipProps;
13
14
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-progress-bar",
3
- "version": "1.2.1",
3
+ "version": "1.3.0",
4
4
  "description": "Progress-Bar UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -17,14 +17,11 @@
17
17
  },
18
18
  "scripts": {
19
19
  "build": "vite build",
20
- "build:css": "node ../../../scripts/style/less.js",
21
- "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
22
20
  "build:watch": "vite build --watch",
23
- "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
24
21
  "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
25
22
  "prepublish": "pnpm run build",
26
- "test": "jest",
27
- "test:watch": "pnpm run test -- --watchAll",
23
+ "test": "vitest run",
24
+ "test:watch": "vitest",
28
25
  "types": "tsc --noEmit",
29
26
  "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
30
27
  "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,15 +32,16 @@
35
32
  ],
36
33
  "types": "dist/index.d.ts",
37
34
  "dependencies": {
38
- "@synerise/ds-form-field": "^1.3.10",
39
- "@synerise/ds-tooltip": "^1.4.10",
40
- "@synerise/ds-utils": "^1.7.1",
35
+ "@synerise/ds-form-field": "^1.3.12",
36
+ "@synerise/ds-tooltip": "^1.4.12",
37
+ "@synerise/ds-utils": "^1.8.0",
41
38
  "uuid": "^8.3.2"
42
39
  },
43
40
  "peerDependencies": {
44
41
  "@synerise/ds-core": "*",
45
42
  "react": ">=16.9.0 <= 18.3.1",
46
- "styled-components": "^5.3.3"
43
+ "styled-components": "^5.3.3",
44
+ "vitest": "4"
47
45
  },
48
- "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
46
+ "gitHead": "ce3c6d75efe8573a2b274853636f959b75a6cd32"
49
47
  }