@ktnpm_devops/react-component 0.4.1 → 0.5.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/dist/charts/Sparkline/Sparkline.d.ts +4 -0
- package/dist/charts/Sparkline/Sparkline.d.ts.map +1 -0
- package/dist/charts/Sparkline/Sparkline.types.d.ts +15 -0
- package/dist/charts/Sparkline/Sparkline.types.d.ts.map +1 -0
- package/dist/charts/Sparkline/index.d.ts +3 -0
- package/dist/charts/Sparkline/index.d.ts.map +1 -0
- package/dist/composites/Accordion/Accordion.d.ts +5 -0
- package/dist/composites/Accordion/Accordion.d.ts.map +1 -0
- package/dist/composites/Accordion/Accordion.types.d.ts +15 -0
- package/dist/composites/Accordion/Accordion.types.d.ts.map +1 -0
- package/dist/composites/Accordion/index.d.ts +3 -0
- package/dist/composites/Accordion/index.d.ts.map +1 -0
- package/dist/composites/DatePickerDropdown/DatePickerDropdown.d.ts +7 -0
- package/dist/composites/DatePickerDropdown/DatePickerDropdown.d.ts.map +1 -0
- package/dist/composites/DatePickerDropdown/DatePickerDropdown.types.d.ts +20 -0
- package/dist/composites/DatePickerDropdown/DatePickerDropdown.types.d.ts.map +1 -0
- package/dist/composites/DatePickerDropdown/index.d.ts +3 -0
- package/dist/composites/DatePickerDropdown/index.d.ts.map +1 -0
- package/dist/composites/FilterDropdown/FilterDropdown.d.ts +7 -0
- package/dist/composites/FilterDropdown/FilterDropdown.d.ts.map +1 -0
- package/dist/composites/FilterDropdown/FilterDropdown.types.d.ts +29 -0
- package/dist/composites/FilterDropdown/FilterDropdown.types.d.ts.map +1 -0
- package/dist/composites/FilterDropdown/index.d.ts +3 -0
- package/dist/composites/FilterDropdown/index.d.ts.map +1 -0
- package/dist/constants.d.ts +2 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/data/HeatmapMatrix/HeatmapMatrix.d.ts +4 -0
- package/dist/data/HeatmapMatrix/HeatmapMatrix.d.ts.map +1 -0
- package/dist/data/HeatmapMatrix/HeatmapMatrix.types.d.ts +40 -0
- package/dist/data/HeatmapMatrix/HeatmapMatrix.types.d.ts.map +1 -0
- package/dist/data/HeatmapMatrix/index.d.ts +3 -0
- package/dist/data/HeatmapMatrix/index.d.ts.map +1 -0
- package/dist/index.cjs +49 -29
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +16 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +50 -30
- package/dist/index.js.map +1 -1
- package/dist/index10.cjs +14 -15
- package/dist/index10.cjs.map +1 -1
- package/dist/index10.js +15 -16
- package/dist/index10.js.map +1 -1
- package/dist/index11.cjs +15 -4
- package/dist/index11.cjs.map +1 -1
- package/dist/index11.js +15 -4
- package/dist/index11.js.map +1 -1
- package/dist/index12.cjs +4 -16
- package/dist/index12.cjs.map +1 -1
- package/dist/index12.js +4 -16
- package/dist/index12.js.map +1 -1
- package/dist/index13.cjs +16 -10
- package/dist/index13.cjs.map +1 -1
- package/dist/index13.js +16 -10
- package/dist/index13.js.map +1 -1
- package/dist/index14.cjs +10 -100
- package/dist/index14.cjs.map +1 -1
- package/dist/index14.js +11 -101
- package/dist/index14.js.map +1 -1
- package/dist/index15.cjs +100 -20
- package/dist/index15.cjs.map +1 -1
- package/dist/index15.js +101 -21
- package/dist/index15.js.map +1 -1
- package/dist/index16.cjs +20 -43
- package/dist/index16.cjs.map +1 -1
- package/dist/index16.js +21 -44
- package/dist/index16.js.map +1 -1
- package/dist/index17.cjs +38 -85
- package/dist/index17.cjs.map +1 -1
- package/dist/index17.js +40 -87
- package/dist/index17.js.map +1 -1
- package/dist/index18.cjs +85 -153
- package/dist/index18.cjs.map +1 -1
- package/dist/index18.js +87 -155
- package/dist/index18.js.map +1 -1
- package/dist/index19.cjs +150 -128
- package/dist/index19.cjs.map +1 -1
- package/dist/index19.js +150 -128
- package/dist/index19.js.map +1 -1
- package/dist/index20.cjs +121 -106
- package/dist/index20.cjs.map +1 -1
- package/dist/index20.js +122 -107
- package/dist/index20.js.map +1 -1
- package/dist/index21.cjs +121 -17
- package/dist/index21.cjs.map +1 -1
- package/dist/index21.js +121 -17
- package/dist/index21.js.map +1 -1
- package/dist/index22.cjs +17 -8
- package/dist/index22.cjs.map +1 -1
- package/dist/index22.js +18 -9
- package/dist/index22.js.map +1 -1
- package/dist/index23.cjs +152 -119
- package/dist/index23.cjs.map +1 -1
- package/dist/index23.js +153 -120
- package/dist/index23.js.map +1 -1
- package/dist/index24.cjs +125 -33
- package/dist/index24.cjs.map +1 -1
- package/dist/index24.js +126 -34
- package/dist/index24.js.map +1 -1
- package/dist/index25.cjs +71 -218
- package/dist/index25.cjs.map +1 -1
- package/dist/index25.js +73 -220
- package/dist/index25.js.map +1 -1
- package/dist/index26.cjs +6 -32
- package/dist/index26.cjs.map +1 -1
- package/dist/index26.js +7 -33
- package/dist/index26.js.map +1 -1
- package/dist/index27.cjs +120 -67
- package/dist/index27.cjs.map +1 -1
- package/dist/index27.js +121 -68
- package/dist/index27.js.map +1 -1
- package/dist/index28.cjs +37 -58
- package/dist/index28.cjs.map +1 -1
- package/dist/index28.js +38 -59
- package/dist/index28.js.map +1 -1
- package/dist/index29.cjs +208 -137
- package/dist/index29.cjs.map +1 -1
- package/dist/index29.js +209 -138
- package/dist/index29.js.map +1 -1
- package/dist/index30.cjs +32 -6
- package/dist/index30.cjs.map +1 -1
- package/dist/index30.js +33 -7
- package/dist/index30.js.map +1 -1
- package/dist/index31.cjs +78 -17
- package/dist/index31.cjs.map +1 -1
- package/dist/index31.js +78 -17
- package/dist/index31.js.map +1 -1
- package/dist/index32.cjs +55 -73
- package/dist/index32.cjs.map +1 -1
- package/dist/index32.js +57 -75
- package/dist/index32.js.map +1 -1
- package/dist/index33.cjs +145 -135
- package/dist/index33.cjs.map +1 -1
- package/dist/index33.js +146 -136
- package/dist/index33.js.map +1 -1
- package/dist/index34.cjs +66 -99
- package/dist/index34.cjs.map +1 -1
- package/dist/index34.js +68 -101
- package/dist/index34.js.map +1 -1
- package/dist/index35.cjs +8 -6
- package/dist/index35.cjs.map +1 -1
- package/dist/index35.js +8 -6
- package/dist/index35.js.map +1 -1
- package/dist/index36.cjs +16 -215
- package/dist/index36.cjs.map +1 -1
- package/dist/index36.js +16 -215
- package/dist/index36.js.map +1 -1
- package/dist/index37.cjs +76 -7
- package/dist/index37.cjs.map +1 -1
- package/dist/index37.js +78 -9
- package/dist/index37.js.map +1 -1
- package/dist/index38.cjs +145 -16
- package/dist/index38.cjs.map +1 -1
- package/dist/index38.js +144 -15
- package/dist/index38.js.map +1 -1
- package/dist/index39.cjs +66 -28
- package/dist/index39.cjs.map +1 -1
- package/dist/index39.js +65 -27
- package/dist/index39.js.map +1 -1
- package/dist/index40.cjs +106 -69
- package/dist/index40.cjs.map +1 -1
- package/dist/index40.js +105 -68
- package/dist/index40.js.map +1 -1
- package/dist/index41.cjs +49 -16
- package/dist/index41.cjs.map +1 -1
- package/dist/index41.js +48 -15
- package/dist/index41.js.map +1 -1
- package/dist/index42.cjs +8 -25
- package/dist/index42.cjs.map +1 -1
- package/dist/index42.js +7 -24
- package/dist/index42.js.map +1 -1
- package/dist/index43.cjs +218 -7
- package/dist/index43.cjs.map +1 -1
- package/dist/index43.js +217 -6
- package/dist/index43.js.map +1 -1
- package/dist/index44.cjs +10 -7
- package/dist/index44.cjs.map +1 -1
- package/dist/index44.js +9 -6
- package/dist/index44.js.map +1 -1
- package/dist/index45.cjs +18 -67
- package/dist/index45.cjs.map +1 -1
- package/dist/index45.js +18 -67
- package/dist/index45.js.map +1 -1
- package/dist/index46.cjs +67 -18
- package/dist/index46.cjs.map +1 -1
- package/dist/index46.js +66 -17
- package/dist/index46.js.map +1 -1
- package/dist/index47.cjs +15 -57
- package/dist/index47.cjs.map +1 -1
- package/dist/index47.js +15 -57
- package/dist/index47.js.map +1 -1
- package/dist/index48.cjs +2 -35
- package/dist/index48.cjs.map +1 -1
- package/dist/index48.js +3 -36
- package/dist/index48.js.map +1 -1
- package/dist/index49.cjs +22 -49
- package/dist/index49.cjs.map +1 -1
- package/dist/index49.js +22 -49
- package/dist/index49.js.map +1 -1
- package/dist/index50.cjs +15 -18
- package/dist/index50.cjs.map +1 -1
- package/dist/index50.js +15 -18
- package/dist/index50.js.map +1 -1
- package/dist/index51.cjs +69 -33
- package/dist/index51.cjs.map +1 -1
- package/dist/index51.js +68 -32
- package/dist/index51.js.map +1 -1
- package/dist/index52.cjs +22 -13
- package/dist/index52.cjs.map +1 -1
- package/dist/index52.js +23 -14
- package/dist/index52.js.map +1 -1
- package/dist/index53.cjs +13 -10
- package/dist/index53.cjs.map +1 -1
- package/dist/index53.js +14 -11
- package/dist/index53.js.map +1 -1
- package/dist/index54.cjs +11 -2
- package/dist/index54.cjs.map +1 -1
- package/dist/index54.js +11 -2
- package/dist/index54.js.map +1 -1
- package/dist/index55.cjs +20 -2
- package/dist/index55.cjs.map +1 -1
- package/dist/index55.js +21 -3
- package/dist/index55.js.map +1 -1
- package/dist/index56.cjs +2 -20
- package/dist/index56.cjs.map +1 -1
- package/dist/index56.js +3 -21
- package/dist/index56.js.map +1 -1
- package/dist/index57.cjs +1 -4
- package/dist/index57.cjs.map +1 -1
- package/dist/index57.js +1 -4
- package/dist/index57.js.map +1 -1
- package/dist/index58.cjs +30 -75
- package/dist/index58.cjs.map +1 -1
- package/dist/index58.js +30 -75
- package/dist/index58.js.map +1 -1
- package/dist/index59.cjs +13 -10
- package/dist/index59.cjs.map +1 -1
- package/dist/index59.js +13 -10
- package/dist/index59.js.map +1 -1
- package/dist/index60.cjs +15 -27
- package/dist/index60.cjs.map +1 -1
- package/dist/index60.js +15 -27
- package/dist/index60.js.map +1 -1
- package/dist/index61.cjs +16 -34
- package/dist/index61.cjs.map +1 -1
- package/dist/index61.js +16 -34
- package/dist/index61.js.map +1 -1
- package/dist/index62.cjs +10 -16
- package/dist/index62.cjs.map +1 -1
- package/dist/index62.js +11 -17
- package/dist/index62.js.map +1 -1
- package/dist/index63.cjs +13 -37
- package/dist/index63.cjs.map +1 -1
- package/dist/index63.js +14 -38
- package/dist/index63.js.map +1 -1
- package/dist/index64.cjs +16 -52
- package/dist/index64.cjs.map +1 -1
- package/dist/index64.js +16 -52
- package/dist/index64.js.map +1 -1
- package/dist/index65.cjs +49 -13
- package/dist/index65.cjs.map +1 -1
- package/dist/index65.js +49 -13
- package/dist/index65.js.map +1 -1
- package/dist/index66.cjs +36 -15
- package/dist/index66.cjs.map +1 -1
- package/dist/index66.js +37 -16
- package/dist/index66.js.map +1 -1
- package/dist/index67.cjs +42 -33
- package/dist/index67.cjs.map +1 -1
- package/dist/index67.js +42 -33
- package/dist/index67.js.map +1 -1
- package/dist/index68.cjs +43 -134
- package/dist/index68.cjs.map +1 -1
- package/dist/index68.js +42 -133
- package/dist/index68.js.map +1 -1
- package/dist/index69.cjs +2 -41
- package/dist/index69.cjs.map +1 -1
- package/dist/index69.js +3 -42
- package/dist/index69.js.map +1 -1
- package/dist/index70.cjs +27 -0
- package/dist/index70.cjs.map +1 -0
- package/dist/index70.js +27 -0
- package/dist/index70.js.map +1 -0
- package/dist/index71.cjs +27 -0
- package/dist/index71.cjs.map +1 -0
- package/dist/index71.js +27 -0
- package/dist/index71.js.map +1 -0
- package/dist/index72.cjs +12 -0
- package/dist/index72.cjs.map +1 -0
- package/dist/index72.js +12 -0
- package/dist/index72.js.map +1 -0
- package/dist/index73.cjs +39 -0
- package/dist/index73.cjs.map +1 -0
- package/dist/index73.js +39 -0
- package/dist/index73.js.map +1 -0
- package/dist/index74.cjs +36 -0
- package/dist/index74.cjs.map +1 -0
- package/dist/index74.js +36 -0
- package/dist/index74.js.map +1 -0
- package/dist/index75.cjs +72 -0
- package/dist/index75.cjs.map +1 -0
- package/dist/index75.js +72 -0
- package/dist/index75.js.map +1 -0
- package/dist/index76.cjs +27 -0
- package/dist/index76.cjs.map +1 -0
- package/dist/index76.js +27 -0
- package/dist/index76.js.map +1 -0
- package/dist/index77.cjs +136 -0
- package/dist/index77.cjs.map +1 -0
- package/dist/index77.js +136 -0
- package/dist/index77.js.map +1 -0
- package/dist/index78.cjs +48 -0
- package/dist/index78.cjs.map +1 -0
- package/dist/index78.js +48 -0
- package/dist/index78.js.map +1 -0
- package/dist/index79.cjs +87 -0
- package/dist/index79.cjs.map +1 -0
- package/dist/index79.js +87 -0
- package/dist/index79.js.map +1 -0
- package/dist/index80.cjs +60 -0
- package/dist/index80.cjs.map +1 -0
- package/dist/index80.js +60 -0
- package/dist/index80.js.map +1 -0
- package/dist/index81.cjs +36 -0
- package/dist/index81.cjs.map +1 -0
- package/dist/index81.js +36 -0
- package/dist/index81.js.map +1 -0
- package/dist/index82.cjs +33 -0
- package/dist/index82.cjs.map +1 -0
- package/dist/index82.js +33 -0
- package/dist/index82.js.map +1 -0
- package/dist/index83.cjs +42 -0
- package/dist/index83.cjs.map +1 -0
- package/dist/index83.js +42 -0
- package/dist/index83.js.map +1 -0
- package/dist/index84.cjs +60 -0
- package/dist/index84.cjs.map +1 -0
- package/dist/index84.js +60 -0
- package/dist/index84.js.map +1 -0
- package/dist/index85.cjs +12 -0
- package/dist/index85.cjs.map +1 -0
- package/dist/index85.js +12 -0
- package/dist/index85.js.map +1 -0
- package/dist/index86.cjs +18 -0
- package/dist/index86.cjs.map +1 -0
- package/dist/index86.js +18 -0
- package/dist/index86.js.map +1 -0
- package/dist/index9.cjs +45 -14
- package/dist/index9.cjs.map +1 -1
- package/dist/index9.js +46 -15
- package/dist/index9.js.map +1 -1
- package/dist/primitives/SegmentedControl/SegmentedControl.d.ts +8 -0
- package/dist/primitives/SegmentedControl/SegmentedControl.d.ts.map +1 -0
- package/dist/primitives/SegmentedControl/SegmentedControl.types.d.ts +25 -0
- package/dist/primitives/SegmentedControl/SegmentedControl.types.d.ts.map +1 -0
- package/dist/primitives/SegmentedControl/index.d.ts +3 -0
- package/dist/primitives/SegmentedControl/index.d.ts.map +1 -0
- package/dist/primitives/StatCard/StatCard.d.ts +4 -0
- package/dist/primitives/StatCard/StatCard.d.ts.map +1 -0
- package/dist/primitives/StatCard/StatCard.types.d.ts +16 -0
- package/dist/primitives/StatCard/StatCard.types.d.ts.map +1 -0
- package/dist/primitives/StatCard/index.d.ts +3 -0
- package/dist/primitives/StatCard/index.d.ts.map +1 -0
- package/dist/primitives/Toast/Toast.d.ts +5 -0
- package/dist/primitives/Toast/Toast.d.ts.map +1 -0
- package/dist/primitives/Toast/Toast.types.d.ts +28 -0
- package/dist/primitives/Toast/Toast.types.d.ts.map +1 -0
- package/dist/primitives/Toast/ToastProvider.d.ts +5 -0
- package/dist/primitives/Toast/ToastProvider.d.ts.map +1 -0
- package/dist/primitives/Toast/index.d.ts +4 -0
- package/dist/primitives/Toast/index.d.ts.map +1 -0
- package/dist/style.css +561 -0
- package/package.json +1 -1
package/dist/index28.js
CHANGED
|
@@ -1,63 +1,42 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { clsx } from "./
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createPortal } from "react-dom";
|
|
3
|
+
import { clsx } from "./index47.js";
|
|
4
|
+
import { useEscapeKey } from "./index5.js";
|
|
5
|
+
import styles from "./index71.js";
|
|
6
|
+
const Modal = ({
|
|
7
|
+
open,
|
|
8
|
+
title,
|
|
9
|
+
onClose,
|
|
10
|
+
children,
|
|
11
|
+
footer,
|
|
12
|
+
portalTarget,
|
|
13
|
+
className,
|
|
14
|
+
bodyClassName,
|
|
15
|
+
style,
|
|
16
|
+
closeLabel = "×"
|
|
17
|
+
}) => {
|
|
18
|
+
useEscapeKey(onClose, open);
|
|
19
|
+
if (!open) return null;
|
|
20
|
+
const modalContent = /* @__PURE__ */ jsx("div", { className: styles.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), style, children: [
|
|
21
|
+
/* @__PURE__ */ jsxs("div", { className: styles.header, children: [
|
|
22
|
+
title ? /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) : /* @__PURE__ */ jsx("span", {}),
|
|
23
|
+
/* @__PURE__ */ jsx(
|
|
24
|
+
"button",
|
|
25
|
+
{
|
|
26
|
+
type: "button",
|
|
27
|
+
onClick: onClose,
|
|
28
|
+
className: styles.closeBtn,
|
|
29
|
+
"aria-label": "Close modal",
|
|
30
|
+
children: closeLabel
|
|
31
|
+
}
|
|
32
|
+
)
|
|
33
|
+
] }),
|
|
34
|
+
/* @__PURE__ */ jsx("div", { className: clsx(styles.body, bodyClassName), children }),
|
|
35
|
+
footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer })
|
|
36
|
+
] }) });
|
|
37
|
+
return createPortal(modalContent, portalTarget ?? document.body);
|
|
15
38
|
};
|
|
16
|
-
const alignClass = {
|
|
17
|
-
start: styles.alignStart,
|
|
18
|
-
center: styles.alignCenter,
|
|
19
|
-
end: styles.alignEnd,
|
|
20
|
-
stretch: styles.alignStretch,
|
|
21
|
-
baseline: styles.alignBaseline
|
|
22
|
-
};
|
|
23
|
-
const justifyClass = {
|
|
24
|
-
start: styles.justifyStart,
|
|
25
|
-
center: styles.justifyCenter,
|
|
26
|
-
end: styles.justifyEnd,
|
|
27
|
-
between: styles.justifyBetween,
|
|
28
|
-
around: styles.justifyAround,
|
|
29
|
-
evenly: styles.justifyEvenly
|
|
30
|
-
};
|
|
31
|
-
const Row = forwardRef(
|
|
32
|
-
({
|
|
33
|
-
gap = "md",
|
|
34
|
-
align = "stretch",
|
|
35
|
-
justify = "start",
|
|
36
|
-
wrap = true,
|
|
37
|
-
direction = "row",
|
|
38
|
-
className,
|
|
39
|
-
children,
|
|
40
|
-
...props
|
|
41
|
-
}, ref) => /* @__PURE__ */ jsx(
|
|
42
|
-
"div",
|
|
43
|
-
{
|
|
44
|
-
ref,
|
|
45
|
-
className: clsx(
|
|
46
|
-
styles.root,
|
|
47
|
-
gapClass[gap],
|
|
48
|
-
alignClass[align],
|
|
49
|
-
justifyClass[justify],
|
|
50
|
-
wrap ? styles.wrap : styles.nowrap,
|
|
51
|
-
direction === "column" ? styles.dirColumn : styles.dirRow,
|
|
52
|
-
className
|
|
53
|
-
),
|
|
54
|
-
...props,
|
|
55
|
-
children
|
|
56
|
-
}
|
|
57
|
-
)
|
|
58
|
-
);
|
|
59
|
-
Row.displayName = "Row";
|
|
60
39
|
export {
|
|
61
|
-
|
|
40
|
+
Modal
|
|
62
41
|
};
|
|
63
42
|
//# sourceMappingURL=index28.js.map
|
package/dist/index28.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index28.js","sources":["../src/primitives/
|
|
1
|
+
{"version":3,"file":"index28.js","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n open: boolean;\n title?: ReactNode;\n onClose: () => void;\n children: ReactNode;\n footer?: ReactNode;\n portalTarget?: HTMLElement;\n className?: string;\n bodyClassName?: string;\n style?: CSSProperties;\n closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n open,\n title,\n onClose,\n children,\n footer,\n portalTarget,\n className,\n bodyClassName,\n style,\n closeLabel = '\\u00D7',\n}: ModalProps) => {\n useEscapeKey(onClose, open);\n\n if (!open) return null;\n\n const modalContent = (\n <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n <div className={clsx(styles.root, className)} style={style}>\n <div className={styles.header}>\n {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n <button\n type=\"button\"\n onClick={onClose}\n className={styles.closeBtn}\n aria-label=\"Close modal\"\n >\n {closeLabel}\n </button>\n </div>\n <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n </div>\n );\n\n return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChB,eAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAA,qBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,QACpB,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAG,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM,wBAAS,QAAA,CAAA,CAAK;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW,OAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACA,oBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAO,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;"}
|
package/dist/index29.cjs
CHANGED
|
@@ -2,156 +2,227 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const constants = require("./
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{ value: "persistence", label: "Persistence" }
|
|
14
|
-
];
|
|
15
|
-
const WIDTH_METRIC_OPTIONS = [
|
|
16
|
-
{ value: "slots", label: "Slots" },
|
|
17
|
-
{ value: "distinct_objects", label: "Distinct Objects" }
|
|
18
|
-
];
|
|
19
|
-
const buildNodes = (rows) => {
|
|
20
|
-
const seen = /* @__PURE__ */ new Set();
|
|
21
|
-
const nodes = [];
|
|
22
|
-
for (const row of rows) {
|
|
23
|
-
if (!seen.has(row.source)) {
|
|
24
|
-
seen.add(row.source);
|
|
25
|
-
nodes.push({ name: row.source });
|
|
26
|
-
}
|
|
27
|
-
if (!seen.has(row.target)) {
|
|
28
|
-
seen.add(row.target);
|
|
29
|
-
nodes.push({ name: row.target });
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
return nodes;
|
|
5
|
+
const clsx = require("./index47.cjs");
|
|
6
|
+
const useClickOutside = require("./index4.cjs");
|
|
7
|
+
const constants = require("./index51.cjs");
|
|
8
|
+
const MultiSelectDropdown_module = require("./index79.cjs");
|
|
9
|
+
const arraysMatch = (a, b) => {
|
|
10
|
+
if (a.length !== b.length) return false;
|
|
11
|
+
const set = new Set(b);
|
|
12
|
+
return a.every((v) => set.has(v));
|
|
33
13
|
};
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
14
|
+
const MultiSelectDropdown = ({
|
|
15
|
+
label,
|
|
16
|
+
options,
|
|
17
|
+
selected,
|
|
18
|
+
onApply,
|
|
37
19
|
isLoading = false,
|
|
38
20
|
error = null,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
className,
|
|
43
|
-
colorMetric = "deviation",
|
|
44
|
-
widthMetric = "slots",
|
|
45
|
-
onColorMetricChange,
|
|
46
|
-
onWidthMetricChange,
|
|
47
|
-
onNodeClick,
|
|
48
|
-
onNodeContextMenu,
|
|
49
|
-
maxNodes = constants.MAX_SANKEY_NODES
|
|
21
|
+
allowCustomValues = false,
|
|
22
|
+
customTriggerLabel,
|
|
23
|
+
selectionMode
|
|
50
24
|
}) => {
|
|
51
|
-
const
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}));
|
|
61
|
-
return {
|
|
62
|
-
tooltip: { trigger: "item" },
|
|
63
|
-
series: [
|
|
64
|
-
{
|
|
65
|
-
type: "sankey",
|
|
66
|
-
data: nodes.map((node, i) => ({
|
|
67
|
-
...node,
|
|
68
|
-
itemStyle: { color: constants.CHART_COLORS[i % constants.CHART_COLORS.length] }
|
|
69
|
-
})),
|
|
70
|
-
links,
|
|
71
|
-
emphasis: { focus: "adjacency" },
|
|
72
|
-
lineStyle: { color: "gradient", curveness: 0.5 }
|
|
73
|
-
}
|
|
74
|
-
]
|
|
75
|
-
};
|
|
76
|
-
}, [visibleRows]);
|
|
77
|
-
const handleChartReady = (instance) => {
|
|
78
|
-
if (onNodeClick) {
|
|
79
|
-
instance.on("click", (params) => {
|
|
80
|
-
const p = params;
|
|
81
|
-
if (p.dataType === "node" && p.name) {
|
|
82
|
-
onNodeClick({ name: p.name, type: "node" });
|
|
83
|
-
}
|
|
25
|
+
const [isOpen, setIsOpen] = react.useState(false);
|
|
26
|
+
const [searchTerm, setSearchTerm] = react.useState("");
|
|
27
|
+
const containerRef = react.useRef(null);
|
|
28
|
+
const normalizedOptions = react.useMemo(() => {
|
|
29
|
+
const map = /* @__PURE__ */ new Map();
|
|
30
|
+
options.forEach((opt) => map.set(opt.value, opt));
|
|
31
|
+
if (Array.isArray(selected)) {
|
|
32
|
+
selected.forEach((v) => {
|
|
33
|
+
if (v && !map.has(v)) map.set(v, { value: v });
|
|
84
34
|
});
|
|
85
35
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
36
|
+
return Array.from(map.values());
|
|
37
|
+
}, [options, selected]);
|
|
38
|
+
const filteredOptions = react.useMemo(() => {
|
|
39
|
+
if (!searchTerm.trim()) return normalizedOptions;
|
|
40
|
+
const term = searchTerm.trim().toLowerCase();
|
|
41
|
+
return normalizedOptions.filter((opt) => {
|
|
42
|
+
const lbl = opt.label ?? opt.value;
|
|
43
|
+
return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
|
|
44
|
+
});
|
|
45
|
+
}, [normalizedOptions, searchTerm]);
|
|
46
|
+
const allOptionValues = react.useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);
|
|
47
|
+
const initialSelection = react.useMemo(
|
|
48
|
+
() => Array.isArray(selected) && selected.length ? Array.from(new Set(selected)) : allOptionValues,
|
|
49
|
+
[selected, allOptionValues]
|
|
50
|
+
);
|
|
51
|
+
const [pendingSelection, setPendingSelection] = react.useState(initialSelection);
|
|
52
|
+
const closeAndReset = react.useCallback(() => {
|
|
53
|
+
setIsOpen(false);
|
|
54
|
+
setPendingSelection(initialSelection);
|
|
55
|
+
setSearchTerm("");
|
|
56
|
+
}, [initialSelection]);
|
|
57
|
+
useClickOutside.useClickOutside(containerRef, closeAndReset);
|
|
58
|
+
react.useEffect(() => {
|
|
59
|
+
if (isOpen) {
|
|
60
|
+
setPendingSelection(initialSelection);
|
|
61
|
+
setSearchTerm("");
|
|
62
|
+
}
|
|
63
|
+
}, [isOpen, initialSelection]);
|
|
64
|
+
react.useEffect(() => {
|
|
65
|
+
if (!isOpen) setPendingSelection(initialSelection);
|
|
66
|
+
}, [initialSelection, isOpen]);
|
|
67
|
+
const handleToggleOption = (value) => {
|
|
68
|
+
setPendingSelection((prev) => {
|
|
69
|
+
const unique = Array.from(new Set(prev));
|
|
70
|
+
return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
const handleSelectAll = () => {
|
|
74
|
+
if (filteredOptions.length === 0) {
|
|
75
|
+
setPendingSelection([]);
|
|
76
|
+
return;
|
|
97
77
|
}
|
|
98
|
-
|
|
78
|
+
setPendingSelection(filteredOptions.map((o) => o.value));
|
|
79
|
+
};
|
|
80
|
+
const handleClearAll = () => setPendingSelection([]);
|
|
81
|
+
const handleApply = () => {
|
|
82
|
+
const unique = Array.from(new Set(pendingSelection));
|
|
83
|
+
const mode = unique.length === 0 || unique.length === normalizedOptions.length ? "all" : "custom";
|
|
84
|
+
onApply(unique, { selectionMode: mode });
|
|
85
|
+
setIsOpen(false);
|
|
86
|
+
};
|
|
87
|
+
const handleCancel = () => {
|
|
88
|
+
setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));
|
|
89
|
+
setIsOpen(false);
|
|
90
|
+
};
|
|
91
|
+
const pendingSet = react.useMemo(() => new Set(pendingSelection), [pendingSelection]);
|
|
92
|
+
const selectedSet = react.useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);
|
|
93
|
+
const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));
|
|
94
|
+
const totalOptions = normalizedOptions.length;
|
|
95
|
+
const selectedSize = selectedSet.size;
|
|
96
|
+
const pendingSize = pendingSet.size;
|
|
97
|
+
const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;
|
|
98
|
+
const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;
|
|
99
|
+
const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;
|
|
100
|
+
const pendingCountValue = isPendingAll ? totalOptions : pendingSize;
|
|
101
|
+
const isActiveFilter = selectionMode !== void 0 ? selectionMode === "custom" : !isSelectedAll;
|
|
102
|
+
const getSelectedLabel = () => {
|
|
103
|
+
if (isSelectedAll) return "All";
|
|
104
|
+
if (selectedSize === 1) {
|
|
105
|
+
const val = Array.from(selectedSet)[0];
|
|
106
|
+
const opt = normalizedOptions.find((o) => o.value === val);
|
|
107
|
+
return (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value) || String(selectedCountValue);
|
|
108
|
+
}
|
|
109
|
+
return String(selectedCountValue);
|
|
110
|
+
};
|
|
111
|
+
const shouldDisableControls = isLoading || options.length === 0;
|
|
112
|
+
const normalizedSearch = searchTerm.trim();
|
|
113
|
+
const canCreateCustom = allowCustomValues && normalizedSearch.length > 0 && !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());
|
|
114
|
+
const handleCreateCustom = () => {
|
|
115
|
+
if (!normalizedSearch) return;
|
|
116
|
+
setPendingSelection((prev) => Array.from(/* @__PURE__ */ new Set([...prev, normalizedSearch])));
|
|
117
|
+
setSearchTerm("");
|
|
99
118
|
};
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
119
|
+
const handleClearFilter = (e) => {
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
e.stopPropagation();
|
|
122
|
+
onApply([], { selectionMode: "all" });
|
|
123
|
+
};
|
|
124
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.root, ref: containerRef, children: [
|
|
125
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
126
|
+
"button",
|
|
127
|
+
{
|
|
128
|
+
type: "button",
|
|
129
|
+
className: clsx.clsx(MultiSelectDropdown_module.default.trigger, { [MultiSelectDropdown_module.default.active]: isOpen }),
|
|
130
|
+
onClick: () => setIsOpen((prev) => !prev),
|
|
131
|
+
"aria-expanded": isOpen,
|
|
132
|
+
"aria-haspopup": "listbox",
|
|
133
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.triggerContent, children: [
|
|
134
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { className: MultiSelectDropdown_module.default.chevron, width: constants.ICON_SIZE.MD, height: constants.ICON_SIZE.MD, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }),
|
|
135
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.label, children: label }),
|
|
136
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.valueGroup, children: [
|
|
137
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.value, children: customTriggerLabel || getSelectedLabel() }),
|
|
138
|
+
isActiveFilter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.badge, children: selectedCountValue }),
|
|
139
|
+
isActiveFilter && /* @__PURE__ */ jsxRuntime.jsx(
|
|
140
|
+
"div",
|
|
141
|
+
{
|
|
142
|
+
role: "button",
|
|
143
|
+
tabIndex: 0,
|
|
144
|
+
className: MultiSelectDropdown_module.default.clear,
|
|
145
|
+
onClick: handleClearFilter,
|
|
146
|
+
onKeyDown: (e) => {
|
|
147
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
148
|
+
e.preventDefault();
|
|
149
|
+
handleClearFilter(e);
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
"aria-label": `Clear ${label} filter`,
|
|
153
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: constants.ICON_SIZE.SM, height: constants.ICON_SIZE.SM, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
154
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
155
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
156
|
+
] })
|
|
157
|
+
}
|
|
158
|
+
)
|
|
159
|
+
] })
|
|
160
|
+
] })
|
|
161
|
+
}
|
|
162
|
+
),
|
|
163
|
+
isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.panel, role: "dialog", "aria-label": `${label} filter`, children: [
|
|
164
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.header, children: [
|
|
109
165
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
110
|
-
"
|
|
166
|
+
"input",
|
|
111
167
|
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
168
|
+
type: "search",
|
|
169
|
+
className: MultiSelectDropdown_module.default.search,
|
|
170
|
+
placeholder: `Search ${label.toLowerCase()}`,
|
|
171
|
+
value: searchTerm,
|
|
172
|
+
onChange: (e) => setSearchTerm(e.target.value),
|
|
173
|
+
disabled: shouldDisableControls
|
|
116
174
|
}
|
|
117
|
-
)
|
|
175
|
+
),
|
|
176
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.headerActions, children: [
|
|
177
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleSelectAll, disabled: shouldDisableControls, children: "Select all" }),
|
|
178
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleClearAll, disabled: pendingSize === 0, children: "Deselect all" })
|
|
179
|
+
] })
|
|
118
180
|
] }),
|
|
119
|
-
|
|
120
|
-
/* @__PURE__ */ jsxRuntime.jsx("
|
|
121
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
181
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.list, role: "listbox", children: [
|
|
182
|
+
isLoading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "Loading options..." }),
|
|
183
|
+
!isLoading && error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx.clsx(MultiSelectDropdown_module.default.status, MultiSelectDropdown_module.default.statusError), children: error }),
|
|
184
|
+
!isLoading && !error && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "No matches" }),
|
|
185
|
+
!isLoading && !error && filteredOptions.map((opt) => {
|
|
186
|
+
const checked = pendingSet.has(opt.value);
|
|
187
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: MultiSelectDropdown_module.default.option, children: [
|
|
188
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
189
|
+
"input",
|
|
190
|
+
{
|
|
191
|
+
type: "checkbox",
|
|
192
|
+
checked,
|
|
193
|
+
onChange: () => handleToggleOption(opt.value),
|
|
194
|
+
"aria-checked": checked
|
|
195
|
+
}
|
|
196
|
+
),
|
|
197
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.optionLabel, children: [
|
|
198
|
+
opt.label ?? opt.value,
|
|
199
|
+
opt.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.optionCount, children: opt.count })
|
|
200
|
+
] })
|
|
201
|
+
] }, opt.value);
|
|
202
|
+
}),
|
|
203
|
+
!isLoading && !error && canCreateCustom && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: MultiSelectDropdown_module.default.create, onClick: handleCreateCustom, children: [
|
|
204
|
+
'Use "',
|
|
205
|
+
normalizedSearch,
|
|
206
|
+
'"'
|
|
207
|
+
] })
|
|
208
|
+
] }),
|
|
209
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footer, children: [
|
|
210
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selection, children: [
|
|
211
|
+
isPendingAll ? "All selected" : `${pendingCountValue} selected`,
|
|
212
|
+
hasChanges && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selectionDelta, children: [
|
|
213
|
+
"(",
|
|
214
|
+
pendingCountValue - selectedCountValue >= 0 ? "+" : "",
|
|
215
|
+
pendingCountValue - selectedCountValue,
|
|
216
|
+
")"
|
|
217
|
+
] })
|
|
218
|
+
] }),
|
|
219
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footerActions, children: [
|
|
220
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleCancel, children: "Cancel" }),
|
|
221
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleApply, disabled: !hasChanges, children: "Apply" })
|
|
222
|
+
] })
|
|
130
223
|
] })
|
|
131
|
-
] })
|
|
132
|
-
isTruncated && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.warning, children: [
|
|
133
|
-
"Showing ",
|
|
134
|
-
maxNodes,
|
|
135
|
-
" of ",
|
|
136
|
-
rows.length,
|
|
137
|
-
" flows. Some data has been truncated."
|
|
138
|
-
] }),
|
|
139
|
-
isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.loading, children: "Loading chart..." }),
|
|
140
|
-
!isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.error, children: [
|
|
141
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
|
|
142
|
-
onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: SankeyChartCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
|
|
143
|
-
] }),
|
|
144
|
-
!isLoading && !error && rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.empty, children: "No flow data available." }),
|
|
145
|
-
!isLoading && !error && rows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
146
|
-
ReactECharts,
|
|
147
|
-
{
|
|
148
|
-
option,
|
|
149
|
-
style: { height: "100%", minHeight: "25rem" },
|
|
150
|
-
onChartReady: handleChartReady
|
|
151
|
-
}
|
|
152
|
-
) })
|
|
224
|
+
] })
|
|
153
225
|
] });
|
|
154
226
|
};
|
|
155
|
-
|
|
156
|
-
exports.SankeyChartCard = SankeyChartCard;
|
|
227
|
+
exports.MultiSelectDropdown = MultiSelectDropdown;
|
|
157
228
|
//# sourceMappingURL=index29.cjs.map
|
package/dist/index29.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index29.cjs","sources":["../src/charts/SankeyChartCard/SankeyChartCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { SankeyChartCardProps } from './SankeyChartCard.types';\nimport type { EChartsInstance, SankeyColorMetric, SankeyWidthMetric } from '../../types/chart.types';\nimport { MAX_SANKEY_NODES, CHART_COLORS } from '../../constants';\nimport styles from './SankeyChartCard.module.css';\n\n/** Colour metric labels for the toolbar selector. */\nconst COLOR_METRIC_OPTIONS: { value: SankeyColorMetric; label: string }[] = [\n { value: 'deviation', label: 'Deviation' },\n { value: 'severity', label: 'Severity' },\n { value: 'origin', label: 'Origin' },\n { value: 'persistence', label: 'Persistence' },\n];\n\n/** Width metric labels for the toolbar selector. */\nconst WIDTH_METRIC_OPTIONS: { value: SankeyWidthMetric; label: string }[] = [\n { value: 'slots', label: 'Slots' },\n { value: 'distinct_objects', label: 'Distinct Objects' },\n];\n\n/** Build a unique node list from source/target pairs. */\nconst buildNodes = (rows: SankeyChartCardProps['rows']) => {\n const seen = new Set<string>();\n const nodes: { name: string }[] = [];\n\n for (const row of rows) {\n if (!seen.has(row.source)) {\n seen.add(row.source);\n nodes.push({ name: row.source });\n }\n if (!seen.has(row.target)) {\n seen.add(row.target);\n nodes.push({ name: row.target });\n }\n }\n\n return nodes;\n};\n\nexport const SankeyChartCard = ({\n title,\n rows,\n isLoading = false,\n error = null,\n onRetry,\n onChartReady,\n actions,\n className,\n colorMetric = 'deviation',\n widthMetric = 'slots',\n onColorMetricChange,\n onWidthMetricChange,\n onNodeClick,\n onNodeContextMenu,\n maxNodes = MAX_SANKEY_NODES,\n}: SankeyChartCardProps) => {\n const isTruncated = rows.length > maxNodes;\n const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;\n\n const option = useMemo(() => {\n const nodes = buildNodes(visibleRows);\n const links = visibleRows.map((row) => ({\n source: row.source,\n target: row.target,\n value: row.value,\n lineStyle: row.color ? { color: row.color } : undefined,\n }));\n\n return {\n tooltip: { trigger: 'item' as const },\n series: [\n {\n type: 'sankey' as const,\n data: nodes.map((node, i) => ({\n ...node,\n itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n })),\n links,\n emphasis: { focus: 'adjacency' as const },\n lineStyle: { color: 'gradient' as const, curveness: 0.5 },\n },\n ],\n };\n }, [visibleRows]);\n\n const handleChartReady = (instance: EChartsInstance) => {\n if (onNodeClick) {\n instance.on('click', (params: unknown) => {\n const p = params as { dataType?: string; name?: string };\n if (p.dataType === 'node' && p.name) {\n onNodeClick({ name: p.name, type: 'node' });\n }\n });\n }\n\n if (onNodeContextMenu) {\n instance.on('contextmenu', (params: unknown) => {\n const p = params as { dataType?: string; name?: string; event?: { offsetX?: number; offsetY?: number } };\n if (p.dataType === 'node' && p.name) {\n onNodeContextMenu(\n { name: p.name, type: 'node' },\n { x: p.event?.offsetX ?? 0, y: p.event?.offsetY ?? 0 },\n );\n }\n });\n }\n\n onChartReady?.(instance);\n };\n\n const hasToolbar = onColorMetricChange || onWidthMetricChange;\n\n return (\n <div className={clsx(styles.root, className)}>\n <header className={styles.header}>\n <h3 className={styles.title}>{title}</h3>\n {actions && <div className={styles.headerActions}>{actions}</div>}\n </header>\n\n {hasToolbar && (\n <div className={styles.toolbar}>\n {onColorMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Color: </span>\n <select\n className={styles.toolbarSelect}\n value={colorMetric}\n onChange={(e) => onColorMetricChange(e.target.value as SankeyColorMetric)}\n >\n {COLOR_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n {onWidthMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Width: </span>\n <select\n className={styles.toolbarSelect}\n value={widthMetric}\n onChange={(e) => onWidthMetricChange(e.target.value as SankeyWidthMetric)}\n >\n {WIDTH_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n </div>\n )}\n\n {isTruncated && (\n <div className={styles.warning}>\n Showing {maxNodes} of {rows.length} flows. Some data has been truncated.\n </div>\n )}\n\n {isLoading && <div className={styles.loading}>Loading chart...</div>}\n\n {!isLoading && error && (\n <div className={styles.error}>\n <span>{error}</span>\n {onRetry && (\n <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n Retry\n </button>\n )}\n </div>\n )}\n\n {!isLoading && !error && rows.length === 0 && (\n <div className={styles.empty}>No flow data available.</div>\n )}\n\n {!isLoading && !error && rows.length > 0 && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', minHeight: '25rem' }}\n onChartReady={handleChartReady}\n />\n </div>\n )}\n </div>\n );\n};\n\nSankeyChartCard.displayName = 'SankeyChartCard';\n"],"names":["MAX_SANKEY_NODES","useMemo","CHART_COLORS","clsx","styles","jsxs","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index29.cjs","sources":["../src/composites/MultiSelectDropdown/MultiSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport styles from './MultiSelectDropdown.module.css';\n\nexport interface MultiSelectOption {\n value: string;\n label?: string;\n count?: number;\n}\n\nexport interface MultiSelectDropdownProps {\n /** Label displayed on the trigger button. */\n label: string;\n /** Available options. */\n options: MultiSelectOption[];\n /** Currently selected values (controlled). */\n selected: string[];\n /** Called when the user applies a new selection. */\n onApply: (values: string[], metadata: { selectionMode: 'all' | 'custom' }) => void;\n /** Show loading indicator and disable controls. */\n isLoading?: boolean;\n /** Error message to display in the option list. */\n error?: string | null;\n /** Allow creating options from the search term. */\n allowCustomValues?: boolean;\n /** Override the trigger value label. */\n customTriggerLabel?: string;\n /** Explicit selection mode override. */\n selectionMode?: 'all' | 'custom';\n}\n\nconst arraysMatch = (a: string[], b: string[]): boolean => {\n if (a.length !== b.length) return false;\n const set = new Set(b);\n return a.every((v) => set.has(v));\n};\n\nexport const MultiSelectDropdown = ({\n label,\n options,\n selected,\n onApply,\n isLoading = false,\n error = null,\n allowCustomValues = false,\n customTriggerLabel,\n selectionMode,\n}: MultiSelectDropdownProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState('');\n const containerRef = useRef<HTMLDivElement>(null);\n\n const normalizedOptions = useMemo<MultiSelectOption[]>(() => {\n const map = new Map<string, MultiSelectOption>();\n options.forEach((opt) => map.set(opt.value, opt));\n if (Array.isArray(selected)) {\n selected.forEach((v) => {\n if (v && !map.has(v)) map.set(v, { value: v });\n });\n }\n return Array.from(map.values());\n }, [options, selected]);\n\n const filteredOptions = useMemo<MultiSelectOption[]>(() => {\n if (!searchTerm.trim()) return normalizedOptions;\n const term = searchTerm.trim().toLowerCase();\n return normalizedOptions.filter((opt) => {\n const lbl = opt.label ?? opt.value;\n return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n });\n }, [normalizedOptions, searchTerm]);\n\n const allOptionValues = useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);\n\n const initialSelection = useMemo(\n () => (Array.isArray(selected) && selected.length ? Array.from(new Set(selected)) : allOptionValues),\n [selected, allOptionValues],\n );\n\n const [pendingSelection, setPendingSelection] = useState<string[]>(initialSelection);\n\n const closeAndReset = useCallback(() => {\n setIsOpen(false);\n setPendingSelection(initialSelection);\n setSearchTerm('');\n }, [initialSelection]);\n\n useClickOutside(containerRef, closeAndReset);\n\n useEffect(() => {\n if (isOpen) {\n setPendingSelection(initialSelection);\n setSearchTerm('');\n }\n }, [isOpen, initialSelection]);\n\n useEffect(() => {\n if (!isOpen) setPendingSelection(initialSelection);\n }, [initialSelection, isOpen]);\n\n const handleToggleOption = (value: string) => {\n setPendingSelection((prev) => {\n const unique = Array.from(new Set(prev));\n return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];\n });\n };\n\n const handleSelectAll = () => {\n if (filteredOptions.length === 0) {\n setPendingSelection([]);\n return;\n }\n setPendingSelection(filteredOptions.map((o) => o.value));\n };\n\n const handleClearAll = () => setPendingSelection([]);\n\n const handleApply = () => {\n const unique = Array.from(new Set(pendingSelection));\n const mode: 'all' | 'custom' =\n unique.length === 0 || unique.length === normalizedOptions.length ? 'all' : 'custom';\n onApply(unique, { selectionMode: mode });\n setIsOpen(false);\n };\n\n const handleCancel = () => {\n setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));\n setIsOpen(false);\n };\n\n const pendingSet = useMemo(() => new Set(pendingSelection), [pendingSelection]);\n const selectedSet = useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);\n const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));\n\n const totalOptions = normalizedOptions.length;\n const selectedSize = selectedSet.size;\n const pendingSize = pendingSet.size;\n const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;\n const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;\n const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;\n const pendingCountValue = isPendingAll ? totalOptions : pendingSize;\n\n const isActiveFilter = selectionMode !== undefined ? selectionMode === 'custom' : !isSelectedAll;\n\n const getSelectedLabel = (): string => {\n if (isSelectedAll) return 'All';\n if (selectedSize === 1) {\n const val = Array.from(selectedSet)[0];\n const opt = normalizedOptions.find((o) => o.value === val);\n return opt?.label || opt?.value || String(selectedCountValue);\n }\n return String(selectedCountValue);\n };\n\n const shouldDisableControls = isLoading || options.length === 0;\n\n const normalizedSearch = searchTerm.trim();\n const canCreateCustom =\n allowCustomValues &&\n normalizedSearch.length > 0 &&\n !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());\n\n const handleCreateCustom = () => {\n if (!normalizedSearch) return;\n setPendingSelection((prev) => Array.from(new Set([...prev, normalizedSearch])));\n setSearchTerm('');\n };\n\n const handleClearFilter = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n onApply([], { selectionMode: 'all' });\n };\n\n return (\n <div className={styles.root} ref={containerRef}>\n <button\n type=\"button\"\n className={clsx(styles.trigger, { [styles.active]: isOpen })}\n onClick={() => setIsOpen((prev) => !prev)}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n >\n <div className={styles.triggerContent}>\n <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n <span className={styles.label}>{label}</span>\n <div className={styles.valueGroup}>\n <span className={styles.value}>{customTriggerLabel || getSelectedLabel()}</span>\n {isActiveFilter && (\n <span className={styles.badge}>{selectedCountValue}</span>\n )}\n {isActiveFilter && (\n <div\n role=\"button\"\n tabIndex={0}\n className={styles.clear}\n onClick={handleClearFilter}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n handleClearFilter(e as unknown as React.MouseEvent);\n }\n }}\n aria-label={`Clear ${label} filter`}\n >\n <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </div>\n )}\n </div>\n </div>\n </button>\n\n {isOpen && (\n <div className={styles.panel} role=\"dialog\" aria-label={`${label} filter`}>\n <div className={styles.header}>\n <input\n type=\"search\"\n className={styles.search}\n placeholder={`Search ${label.toLowerCase()}`}\n value={searchTerm}\n onChange={(e) => setSearchTerm(e.target.value)}\n disabled={shouldDisableControls}\n />\n <div className={styles.headerActions}>\n <button type=\"button\" className={styles.chip} onClick={handleSelectAll} disabled={shouldDisableControls}>\n Select all\n </button>\n <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleClearAll} disabled={pendingSize === 0}>\n Deselect all\n </button>\n </div>\n </div>\n\n <div className={styles.list} role=\"listbox\">\n {isLoading && <p className={styles.status}>Loading options...</p>}\n {!isLoading && error && <p className={clsx(styles.status, styles.statusError)}>{error}</p>}\n {!isLoading && !error && filteredOptions.length === 0 && (\n <p className={styles.status}>No matches</p>\n )}\n {!isLoading &&\n !error &&\n filteredOptions.map((opt) => {\n const checked = pendingSet.has(opt.value);\n return (\n <label key={opt.value} className={styles.option}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={() => handleToggleOption(opt.value)}\n aria-checked={checked}\n />\n <span className={styles.optionLabel}>\n {opt.label ?? opt.value}\n {opt.count !== undefined && (\n <span className={styles.optionCount}>{opt.count}</span>\n )}\n </span>\n </label>\n );\n })}\n {!isLoading && !error && canCreateCustom && (\n <button type=\"button\" className={styles.create} onClick={handleCreateCustom}>\n Use "{normalizedSearch}"\n </button>\n )}\n </div>\n\n <div className={styles.footer}>\n <span className={styles.selection}>\n {isPendingAll ? 'All selected' : `${pendingCountValue} selected`}\n {hasChanges && (\n <span className={styles.selectionDelta}>\n ({pendingCountValue - selectedCountValue >= 0 ? '+' : ''}\n {pendingCountValue - selectedCountValue})\n </span>\n )}\n </span>\n <div className={styles.footerActions}>\n <button type=\"button\" className={clsx(styles.chip, styles.chipGhost)} onClick={handleCancel}>\n Cancel\n </button>\n <button type=\"button\" className={styles.chip} onClick={handleApply} disabled={!hasChanges}>\n Apply\n </button>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["useState","useRef","useMemo","useCallback","useClickOutside","useEffect","styles","jsx","clsx","jsxs","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH"],"mappings":"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"}
|