@ktnpm_devops/react-component 0.7.1 → 0.9.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/composites/ChipGroup/ChipGroup.d.ts +4 -0
- package/dist/composites/ChipGroup/ChipGroup.d.ts.map +1 -0
- package/dist/composites/ChipGroup/ChipGroup.types.d.ts +20 -0
- package/dist/composites/ChipGroup/ChipGroup.types.d.ts.map +1 -0
- package/dist/composites/ChipGroup/index.d.ts +3 -0
- package/dist/composites/ChipGroup/index.d.ts.map +1 -0
- package/dist/composites/FilterDropdown/FilterDropdown.d.ts.map +1 -1
- package/dist/constants.d.ts +4 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/index.cjs +37 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +37 -31
- package/dist/index.js.map +1 -1
- package/dist/index10.cjs +2 -2
- package/dist/index10.js +2 -2
- package/dist/index11.cjs +2 -2
- package/dist/index11.js +2 -2
- package/dist/index12.cjs +2 -2
- package/dist/index12.js +2 -2
- package/dist/index13.cjs +2 -2
- package/dist/index13.js +2 -2
- package/dist/index14.cjs +2 -2
- package/dist/index14.js +2 -2
- package/dist/index15.cjs +3 -3
- package/dist/index15.js +3 -3
- package/dist/index16.cjs +2 -2
- package/dist/index16.js +2 -2
- package/dist/index17.cjs +15 -40
- package/dist/index17.cjs.map +1 -1
- package/dist/index17.js +15 -40
- package/dist/index17.js.map +1 -1
- package/dist/index18.cjs +24 -88
- package/dist/index18.cjs.map +1 -1
- package/dist/index18.js +26 -90
- package/dist/index18.js.map +1 -1
- package/dist/index19.cjs +40 -155
- package/dist/index19.cjs.map +1 -1
- package/dist/index19.js +42 -157
- package/dist/index19.js.map +1 -1
- package/dist/index20.cjs +86 -132
- package/dist/index20.cjs.map +1 -1
- package/dist/index20.js +88 -134
- package/dist/index20.js.map +1 -1
- package/dist/index21.cjs +150 -113
- package/dist/index21.cjs.map +1 -1
- package/dist/index21.js +151 -114
- package/dist/index21.js.map +1 -1
- package/dist/index22.cjs +136 -17
- package/dist/index22.cjs.map +1 -1
- package/dist/index22.js +136 -17
- package/dist/index22.js.map +1 -1
- package/dist/index23.cjs +98 -141
- package/dist/index23.cjs.map +1 -1
- package/dist/index23.js +97 -140
- package/dist/index23.js.map +1 -1
- package/dist/index24.cjs +16 -132
- package/dist/index24.cjs.map +1 -1
- package/dist/index24.js +16 -132
- package/dist/index24.js.map +1 -1
- package/dist/index25.cjs +160 -73
- package/dist/index25.cjs.map +1 -1
- package/dist/index25.js +162 -75
- package/dist/index25.js.map +1 -1
- package/dist/index26.cjs +130 -7
- package/dist/index26.cjs.map +1 -1
- package/dist/index26.js +132 -9
- package/dist/index26.js.map +1 -1
- package/dist/index27.cjs +74 -128
- package/dist/index27.cjs.map +1 -1
- package/dist/index27.js +76 -130
- package/dist/index27.js.map +1 -1
- package/dist/index28.cjs +8 -38
- package/dist/index28.cjs.map +1 -1
- package/dist/index28.js +9 -39
- package/dist/index28.js.map +1 -1
- package/dist/index29.cjs +118 -213
- package/dist/index29.cjs.map +1 -1
- package/dist/index29.js +119 -214
- package/dist/index29.js.map +1 -1
- package/dist/index30.cjs +38 -34
- package/dist/index30.cjs.map +1 -1
- package/dist/index30.js +39 -35
- package/dist/index30.js.map +1 -1
- package/dist/index31.cjs +222 -106
- package/dist/index31.cjs.map +1 -1
- package/dist/index31.js +224 -108
- package/dist/index31.js.map +1 -1
- package/dist/index32.cjs +29 -73
- package/dist/index32.cjs.map +1 -1
- package/dist/index32.js +31 -75
- package/dist/index32.js.map +1 -1
- package/dist/index33.cjs +104 -53
- package/dist/index33.cjs.map +1 -1
- package/dist/index33.js +105 -54
- package/dist/index33.js.map +1 -1
- package/dist/index34.cjs +62 -147
- package/dist/index34.cjs.map +1 -1
- package/dist/index34.js +63 -148
- package/dist/index34.js.map +1 -1
- package/dist/index35.cjs +75 -69
- package/dist/index35.cjs.map +1 -1
- package/dist/index35.js +77 -71
- package/dist/index35.js.map +1 -1
- package/dist/index36.cjs +57 -6
- package/dist/index36.cjs.map +1 -1
- package/dist/index36.js +57 -6
- package/dist/index36.js.map +1 -1
- package/dist/index37.cjs +152 -16
- package/dist/index37.cjs.map +1 -1
- package/dist/index37.js +152 -16
- package/dist/index37.js.map +1 -1
- package/dist/index38.cjs +66 -71
- package/dist/index38.cjs.map +1 -1
- package/dist/index38.js +68 -73
- package/dist/index38.js.map +1 -1
- package/dist/index39.cjs +7 -142
- package/dist/index39.cjs.map +1 -1
- package/dist/index39.js +9 -144
- package/dist/index39.js.map +1 -1
- package/dist/index40.cjs +17 -64
- package/dist/index40.cjs.map +1 -1
- package/dist/index40.js +17 -64
- package/dist/index40.js.map +1 -1
- package/dist/index41.cjs +69 -97
- package/dist/index41.cjs.map +1 -1
- package/dist/index41.js +71 -99
- package/dist/index41.js.map +1 -1
- package/dist/index42.cjs +140 -44
- package/dist/index42.cjs.map +1 -1
- package/dist/index42.js +141 -45
- package/dist/index42.js.map +1 -1
- package/dist/index43.cjs +64 -6
- package/dist/index43.cjs.map +1 -1
- package/dist/index43.js +65 -7
- package/dist/index43.js.map +1 -1
- package/dist/index44.cjs +74 -185
- package/dist/index44.cjs.map +1 -1
- package/dist/index44.js +67 -178
- package/dist/index44.js.map +1 -1
- package/dist/index45.cjs +45 -6
- package/dist/index45.cjs.map +1 -1
- package/dist/index45.js +46 -7
- package/dist/index45.js.map +1 -1
- package/dist/index46.cjs +6 -17
- package/dist/index46.cjs.map +1 -1
- package/dist/index46.js +6 -17
- package/dist/index46.js.map +1 -1
- package/dist/index47.cjs +208 -58
- package/dist/index47.cjs.map +1 -1
- package/dist/index47.js +209 -59
- package/dist/index47.js.map +1 -1
- package/dist/index48.cjs +10 -16
- package/dist/index48.cjs.map +1 -1
- package/dist/index48.js +9 -15
- package/dist/index48.js.map +1 -1
- package/dist/index49.cjs +19 -25
- package/dist/index49.cjs.map +1 -1
- package/dist/index49.js +18 -24
- package/dist/index49.js.map +1 -1
- package/dist/index50.cjs +67 -15
- package/dist/index50.cjs.map +1 -1
- package/dist/index50.js +66 -14
- package/dist/index50.js.map +1 -1
- package/dist/index51.cjs +15 -18
- package/dist/index51.cjs.map +1 -1
- package/dist/index51.js +15 -18
- package/dist/index51.js.map +1 -1
- package/dist/index52.cjs +24 -15
- package/dist/index52.cjs.map +1 -1
- package/dist/index52.js +24 -15
- package/dist/index52.js.map +1 -1
- package/dist/index53.cjs +24 -76
- package/dist/index53.cjs.map +1 -1
- package/dist/index53.js +23 -75
- package/dist/index53.js.map +1 -1
- package/dist/index54.cjs +22 -22
- package/dist/index54.js +22 -22
- package/dist/index55.cjs +6 -18
- package/dist/index55.cjs.map +1 -1
- package/dist/index55.js +6 -18
- package/dist/index55.js.map +1 -1
- package/dist/index56.cjs +80 -6
- package/dist/index56.cjs.map +1 -1
- package/dist/index56.js +79 -5
- package/dist/index56.js.map +1 -1
- package/dist/index57.cjs +28 -10
- package/dist/index57.cjs.map +1 -1
- package/dist/index57.js +28 -10
- package/dist/index57.js.map +1 -1
- package/dist/index58.cjs +14 -35
- package/dist/index58.cjs.map +1 -1
- package/dist/index58.js +14 -35
- package/dist/index58.js.map +1 -1
- package/dist/index59.cjs +13 -19
- package/dist/index59.cjs.map +1 -1
- package/dist/index59.js +14 -20
- package/dist/index59.js.map +1 -1
- package/dist/index60.cjs +10 -34
- package/dist/index60.cjs.map +1 -1
- package/dist/index60.js +11 -35
- package/dist/index60.js.map +1 -1
- package/dist/index61.cjs +13 -19
- package/dist/index61.cjs.map +1 -1
- package/dist/index61.js +14 -20
- package/dist/index61.js.map +1 -1
- package/dist/index62.cjs +53 -2
- package/dist/index62.cjs.map +1 -1
- package/dist/index62.js +54 -3
- package/dist/index62.js.map +1 -1
- package/dist/index63.cjs +2 -20
- package/dist/index63.cjs.map +1 -1
- package/dist/index63.js +3 -21
- package/dist/index63.js.map +1 -1
- package/dist/index64.cjs +2 -80
- package/dist/index64.cjs.map +1 -1
- package/dist/index64.js +3 -81
- package/dist/index64.js.map +1 -1
- package/dist/index65.cjs +5 -17
- package/dist/index65.cjs.map +1 -1
- package/dist/index65.js +5 -17
- package/dist/index65.js.map +1 -1
- package/dist/index66.cjs +47 -2
- package/dist/index66.cjs.map +1 -1
- package/dist/index66.js +48 -3
- package/dist/index66.js.map +1 -1
- package/dist/index67.cjs +19 -64
- package/dist/index67.cjs.map +1 -1
- package/dist/index67.js +20 -65
- package/dist/index67.js.map +1 -1
- package/dist/index68.cjs +19 -34
- package/dist/index68.cjs.map +1 -1
- package/dist/index68.js +19 -34
- package/dist/index68.js.map +1 -1
- package/dist/index69.cjs +2 -17
- package/dist/index69.cjs.map +1 -1
- package/dist/index69.js +3 -18
- package/dist/index69.js.map +1 -1
- package/dist/index70.cjs +17 -8
- package/dist/index70.cjs.map +1 -1
- package/dist/index70.js +18 -9
- package/dist/index70.js.map +1 -1
- package/dist/index71.cjs +2 -17
- package/dist/index71.cjs.map +1 -1
- package/dist/index71.js +3 -18
- package/dist/index71.js.map +1 -1
- package/dist/index72.cjs +30 -3
- package/dist/index72.cjs.map +1 -1
- package/dist/index72.js +30 -3
- package/dist/index72.js.map +1 -1
- package/dist/index73.cjs +65 -5
- package/dist/index73.cjs.map +1 -1
- package/dist/index73.js +66 -6
- package/dist/index73.js.map +1 -1
- package/dist/index74.cjs +2 -38
- package/dist/index74.cjs.map +1 -1
- package/dist/index74.js +3 -39
- package/dist/index74.js.map +1 -1
- package/dist/index75.cjs +34 -46
- package/dist/index75.cjs.map +1 -1
- package/dist/index75.js +34 -46
- package/dist/index75.js.map +1 -1
- package/dist/index76.cjs +13 -49
- package/dist/index76.cjs.map +1 -1
- package/dist/index76.js +14 -50
- package/dist/index76.js.map +1 -1
- package/dist/index77.cjs +22 -134
- package/dist/index77.cjs.map +1 -1
- package/dist/index77.js +21 -133
- package/dist/index77.js.map +1 -1
- package/dist/index78.cjs +17 -38
- package/dist/index78.cjs.map +1 -1
- package/dist/index78.js +18 -39
- package/dist/index78.js.map +1 -1
- package/dist/index79.cjs +79 -13
- package/dist/index79.cjs.map +1 -1
- package/dist/index79.js +80 -14
- package/dist/index79.js.map +1 -1
- package/dist/index80.cjs +25 -52
- package/dist/index80.cjs.map +1 -1
- package/dist/index80.js +25 -52
- package/dist/index80.js.map +1 -1
- package/dist/index81.cjs +48 -27
- package/dist/index81.cjs.map +1 -1
- package/dist/index81.js +48 -27
- package/dist/index81.js.map +1 -1
- package/dist/index82.cjs +15 -51
- package/dist/index82.cjs.map +1 -1
- package/dist/index82.js +15 -51
- package/dist/index82.js.map +1 -1
- package/dist/index83.cjs +6 -30
- package/dist/index83.cjs.map +1 -1
- package/dist/index83.js +6 -30
- package/dist/index83.js.map +1 -1
- package/dist/index84.cjs +28 -13
- package/dist/index84.cjs.map +1 -1
- package/dist/index84.js +29 -14
- package/dist/index84.js.map +1 -1
- package/dist/index85.cjs +134 -43
- package/dist/index85.cjs.map +1 -1
- package/dist/index85.js +133 -42
- package/dist/index85.js.map +1 -1
- package/dist/index86.cjs +39 -15
- package/dist/index86.cjs.map +1 -1
- package/dist/index86.js +40 -16
- package/dist/index86.js.map +1 -1
- package/dist/index87.cjs +37 -4
- package/dist/index87.cjs.map +1 -1
- package/dist/index87.js +38 -5
- package/dist/index87.js.map +1 -1
- package/dist/index88.cjs +52 -25
- package/dist/index88.cjs.map +1 -1
- package/dist/index88.js +52 -25
- package/dist/index88.js.map +1 -1
- package/dist/index89.cjs +21 -0
- package/dist/index89.cjs.map +1 -0
- package/dist/index89.js +21 -0
- package/dist/index89.js.map +1 -0
- package/dist/index9.cjs +2 -2
- package/dist/index9.js +2 -2
- package/dist/index90.cjs +24 -0
- package/dist/index90.cjs.map +1 -0
- package/dist/index90.js +24 -0
- package/dist/index90.js.map +1 -0
- package/dist/index91.cjs +18 -0
- package/dist/index91.cjs.map +1 -0
- package/dist/index91.js +18 -0
- package/dist/index91.js.map +1 -0
- package/dist/index92.cjs +42 -0
- package/dist/index92.cjs.map +1 -0
- package/dist/index92.js +42 -0
- package/dist/index92.js.map +1 -0
- package/dist/index93.cjs +24 -0
- package/dist/index93.cjs.map +1 -0
- package/dist/index93.js +24 -0
- package/dist/index93.js.map +1 -0
- package/dist/index94.cjs +45 -0
- package/dist/index94.cjs.map +1 -0
- package/dist/index94.js +45 -0
- package/dist/index94.js.map +1 -0
- package/dist/primitives/Chip/Chip.d.ts +4 -0
- package/dist/primitives/Chip/Chip.d.ts.map +1 -0
- package/dist/primitives/Chip/Chip.types.d.ts +12 -0
- package/dist/primitives/Chip/Chip.types.d.ts.map +1 -0
- package/dist/primitives/Chip/index.d.ts +3 -0
- package/dist/primitives/Chip/index.d.ts.map +1 -0
- package/dist/primitives/RangeSlider/RangeSlider.d.ts +4 -0
- package/dist/primitives/RangeSlider/RangeSlider.d.ts.map +1 -0
- package/dist/primitives/RangeSlider/RangeSlider.types.d.ts +12 -0
- package/dist/primitives/RangeSlider/RangeSlider.types.d.ts.map +1 -0
- package/dist/primitives/RangeSlider/index.d.ts +3 -0
- package/dist/primitives/RangeSlider/index.d.ts.map +1 -0
- package/dist/style.css +169 -18
- package/package.json +1 -1
package/dist/index41.js
CHANGED
|
@@ -1,109 +1,81 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
bar: "Bar",
|
|
10
|
-
pie: "Pie",
|
|
11
|
-
sunburst: "Sunburst"
|
|
12
|
-
};
|
|
13
|
-
const CHART_TYPES = ["bar", "pie", "sunburst"];
|
|
14
|
-
const StackedBarChartCard = ({
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useContext, useState, useId, createContext } from "react";
|
|
3
|
+
import { clsx } from "./index51.js";
|
|
4
|
+
import { SIDEBAR } from "./index56.js";
|
|
5
|
+
import styles from "./index92.js";
|
|
6
|
+
const SidebarContext = createContext({ isCollapsed: false });
|
|
7
|
+
const useSidebarContext = () => useContext(SidebarContext);
|
|
8
|
+
const SidebarSection = ({
|
|
15
9
|
title,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
10
|
+
children,
|
|
11
|
+
collapsible = false,
|
|
12
|
+
defaultCollapsed = false
|
|
13
|
+
}) => {
|
|
14
|
+
const { isCollapsed: sidebarCollapsed } = useSidebarContext();
|
|
15
|
+
const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);
|
|
16
|
+
const titleId = useId();
|
|
17
|
+
const isOpen = !collapsible || !sectionCollapsed;
|
|
18
|
+
return /* @__PURE__ */ jsxs("div", { className: styles.section, role: "group", "aria-labelledby": title ? titleId : void 0, children: [
|
|
19
|
+
title && !sidebarCollapsed && (collapsible ? /* @__PURE__ */ jsxs(
|
|
20
|
+
"button",
|
|
21
|
+
{
|
|
22
|
+
id: titleId,
|
|
23
|
+
type: "button",
|
|
24
|
+
className: styles.sectionToggle,
|
|
25
|
+
onClick: () => setSectionCollapsed((prev) => !prev),
|
|
26
|
+
"aria-expanded": isOpen,
|
|
27
|
+
children: [
|
|
28
|
+
/* @__PURE__ */ jsx("span", { className: styles.sectionTitle, children: title }),
|
|
29
|
+
/* @__PURE__ */ jsx("span", { className: clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen }), children: /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
) : /* @__PURE__ */ jsx("span", { id: titleId, className: styles.sectionTitle, children: title })),
|
|
33
|
+
isOpen && /* @__PURE__ */ jsx("div", { className: styles.sectionItems, children })
|
|
34
|
+
] });
|
|
35
|
+
};
|
|
36
|
+
SidebarSection.displayName = "Sidebar.Section";
|
|
37
|
+
const SidebarRoot = ({
|
|
38
|
+
isCollapsed = false,
|
|
39
|
+
onToggleCollapse,
|
|
40
|
+
width = SIDEBAR.WIDTH,
|
|
41
|
+
collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,
|
|
42
|
+
header,
|
|
43
|
+
footer,
|
|
44
|
+
children,
|
|
33
45
|
className
|
|
34
46
|
}) => {
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
}, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);
|
|
49
|
-
const handleChartReady = useCallback(
|
|
50
|
-
(instance) => {
|
|
51
|
-
onChartReady == null ? void 0 : onChartReady(instance);
|
|
52
|
-
},
|
|
53
|
-
[onChartReady]
|
|
54
|
-
);
|
|
55
|
-
const handleChartClick = useCallback(
|
|
56
|
-
(params) => {
|
|
57
|
-
if (!onSelectCategory || !params.name) return;
|
|
58
|
-
onSelectCategory({
|
|
59
|
-
category: params.name,
|
|
60
|
-
subCategory: params.seriesName ?? null
|
|
61
|
-
});
|
|
62
|
-
},
|
|
63
|
-
[onSelectCategory]
|
|
64
|
-
);
|
|
65
|
-
const hasData = data.length > 0;
|
|
66
|
-
return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
|
|
67
|
-
/* @__PURE__ */ jsxs("div", { className: styles.header, children: [
|
|
68
|
-
/* @__PURE__ */ jsxs("div", { className: styles.headerLeft, children: [
|
|
69
|
-
/* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
|
|
70
|
-
subtitle && /* @__PURE__ */ jsx("div", { className: styles.subtitle, children: subtitle })
|
|
71
|
-
] }),
|
|
72
|
-
/* @__PURE__ */ jsxs("div", { className: styles.headerRight, children: [
|
|
73
|
-
toolbar && /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: toolbar }),
|
|
74
|
-
/* @__PURE__ */ jsx("div", { className: styles.chartTypeToggle, children: CHART_TYPES.map((type) => /* @__PURE__ */ jsx(
|
|
47
|
+
const currentWidth = isCollapsed ? collapsedWidth : width;
|
|
48
|
+
return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxs(
|
|
49
|
+
"nav",
|
|
50
|
+
{
|
|
51
|
+
className: clsx(styles.root, { [styles.collapsed]: isCollapsed }, className),
|
|
52
|
+
style: { width: `${currentWidth}px` },
|
|
53
|
+
"aria-label": "Main navigation",
|
|
54
|
+
children: [
|
|
55
|
+
header && /* @__PURE__ */ jsx("div", { className: styles.header, children: header }),
|
|
56
|
+
/* @__PURE__ */ jsx("div", { className: styles.body, children }),
|
|
57
|
+
footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer }),
|
|
58
|
+
onToggleCollapse && /* @__PURE__ */ jsx(
|
|
75
59
|
"button",
|
|
76
60
|
{
|
|
77
61
|
type: "button",
|
|
78
|
-
className:
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
)
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart data..." }),
|
|
89
|
-
!isLoading && error && /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
|
|
90
|
-
/* @__PURE__ */ jsx("span", { children: error }),
|
|
91
|
-
onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
|
|
92
|
-
] }),
|
|
93
|
-
!isLoading && !error && !hasData && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
|
|
94
|
-
!isLoading && !error && hasData && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
|
|
95
|
-
ReactECharts,
|
|
96
|
-
{
|
|
97
|
-
option,
|
|
98
|
-
style: { height: "100%", width: "100%" },
|
|
99
|
-
onChartReady: handleChartReady,
|
|
100
|
-
onEvents: { click: handleChartClick },
|
|
101
|
-
notMerge: true
|
|
102
|
-
}
|
|
103
|
-
) })
|
|
104
|
-
] });
|
|
62
|
+
className: styles.toggle,
|
|
63
|
+
onClick: onToggleCollapse,
|
|
64
|
+
"aria-expanded": !isCollapsed,
|
|
65
|
+
"aria-label": "Toggle sidebar",
|
|
66
|
+
children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: isCollapsed ? /* @__PURE__ */ jsx("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
) });
|
|
105
72
|
};
|
|
73
|
+
SidebarRoot.displayName = "Sidebar";
|
|
74
|
+
const Sidebar = Object.assign(SidebarRoot, {
|
|
75
|
+
Section: SidebarSection
|
|
76
|
+
});
|
|
106
77
|
export {
|
|
107
|
-
|
|
78
|
+
Sidebar,
|
|
79
|
+
useSidebarContext
|
|
108
80
|
};
|
|
109
81
|
//# sourceMappingURL=index41.js.map
|
package/dist/index41.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index41.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index41.js","sources":["../src/composites/Sidebar/Sidebar.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\nimport clsx from 'clsx';\nimport { SIDEBAR } from '../../constants';\nimport type { SidebarProps, SidebarSectionProps } from './Sidebar.types';\nimport styles from './Sidebar.module.css';\n\ninterface SidebarContextValue {\n isCollapsed: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\n/** Hook to read sidebar collapsed state from context. */\nexport const useSidebarContext = () => useContext(SidebarContext);\n\n/* ------------------------------------------------------------------ */\n/* Sidebar.Section */\n/* ------------------------------------------------------------------ */\n\nconst SidebarSection = ({\n title,\n children,\n collapsible = false,\n defaultCollapsed = false,\n}: SidebarSectionProps) => {\n const { isCollapsed: sidebarCollapsed } = useSidebarContext();\n const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);\n const titleId = useId();\n\n const isOpen = !collapsible || !sectionCollapsed;\n\n return (\n <div className={styles.section} role=\"group\" aria-labelledby={title ? titleId : undefined}>\n {title && !sidebarCollapsed && (\n collapsible ? (\n <button\n id={titleId}\n type=\"button\"\n className={styles.sectionToggle}\n onClick={() => setSectionCollapsed((prev) => !prev)}\n aria-expanded={isOpen}\n >\n <span className={styles.sectionTitle}>{title}</span>\n <span className={clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen })}>\n <svg width={12} height={12} viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </button>\n ) : (\n <span id={titleId} className={styles.sectionTitle}>\n {title}\n </span>\n )\n )}\n {isOpen && <div className={styles.sectionItems}>{children}</div>}\n </div>\n );\n};\n\nSidebarSection.displayName = 'Sidebar.Section';\n\n/* ------------------------------------------------------------------ */\n/* Sidebar */\n/* ------------------------------------------------------------------ */\n\nconst SidebarRoot = ({\n isCollapsed = false,\n onToggleCollapse,\n width = SIDEBAR.WIDTH,\n collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,\n header,\n footer,\n children,\n className,\n}: SidebarProps) => {\n const currentWidth = isCollapsed ? collapsedWidth : width;\n\n return (\n <SidebarContext.Provider value={{ isCollapsed }}>\n <nav\n className={clsx(styles.root, { [styles.collapsed]: isCollapsed }, className)}\n style={{ width: `${currentWidth}px` }}\n aria-label=\"Main navigation\"\n >\n {header && <div className={styles.header}>{header}</div>}\n\n <div className={styles.body}>{children}</div>\n\n {footer && <div className={styles.footer}>{footer}</div>}\n\n {onToggleCollapse && (\n <button\n type=\"button\"\n className={styles.toggle}\n onClick={onToggleCollapse}\n aria-expanded={!isCollapsed}\n aria-label=\"Toggle sidebar\"\n >\n <svg width={16} height={16} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n {isCollapsed ? (\n <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n ) : (\n <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n )}\n </svg>\n </button>\n )}\n </nav>\n </SidebarContext.Provider>\n );\n};\n\nSidebarRoot.displayName = 'Sidebar';\n\n/** Compound Sidebar component. */\nexport const Sidebar = Object.assign(SidebarRoot, {\n Section: SidebarSection,\n});\n"],"names":[],"mappings":"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"}
|
package/dist/index42.cjs
CHANGED
|
@@ -2,50 +2,146 @@
|
|
|
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 clsx = require("./
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
5
|
+
const clsx = require("./index51.cjs");
|
|
6
|
+
const useClickOutside = require("./index4.cjs");
|
|
7
|
+
const useEscapeKey = require("./index5.cjs");
|
|
8
|
+
const constants = require("./index56.cjs");
|
|
9
|
+
const SingleSelectDropdown_module = require("./index62.cjs");
|
|
10
|
+
const SingleSelectDropdown = ({
|
|
11
|
+
label,
|
|
12
|
+
options,
|
|
13
|
+
selected,
|
|
14
|
+
onSelect,
|
|
15
|
+
customTriggerLabel,
|
|
16
|
+
onClear,
|
|
17
|
+
showClearButton = false
|
|
18
|
+
}) => {
|
|
19
|
+
const [isOpen, setIsOpen] = react.useState(false);
|
|
20
|
+
const [searchTerm, setSearchTerm] = react.useState("");
|
|
21
|
+
const [focusedIndex, setFocusedIndex] = react.useState(-1);
|
|
22
|
+
const containerRef = react.useRef(null);
|
|
23
|
+
const listRef = react.useRef(null);
|
|
24
|
+
const close = react.useCallback(() => {
|
|
25
|
+
setIsOpen(false);
|
|
26
|
+
setSearchTerm("");
|
|
27
|
+
setFocusedIndex(-1);
|
|
28
|
+
}, []);
|
|
29
|
+
useClickOutside.useClickOutside(containerRef, close);
|
|
30
|
+
useEscapeKey.useEscapeKey(close, isOpen);
|
|
31
|
+
const filteredOptions = react.useMemo(() => {
|
|
32
|
+
if (!searchTerm.trim()) return options;
|
|
33
|
+
const term = searchTerm.trim().toLowerCase();
|
|
34
|
+
return options.filter((opt) => {
|
|
35
|
+
const lbl = opt.label ?? opt.value;
|
|
36
|
+
return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
|
|
37
|
+
});
|
|
38
|
+
}, [options, searchTerm]);
|
|
39
|
+
const handleSelect = (value) => {
|
|
40
|
+
onSelect(value);
|
|
41
|
+
close();
|
|
42
|
+
};
|
|
43
|
+
const handleClear = (e) => {
|
|
44
|
+
e.stopPropagation();
|
|
45
|
+
onClear == null ? void 0 : onClear();
|
|
46
|
+
close();
|
|
47
|
+
};
|
|
48
|
+
const handleKeyDown = (e) => {
|
|
49
|
+
if (!isOpen) return;
|
|
50
|
+
if (e.key === "ArrowDown") {
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
|
|
53
|
+
} else if (e.key === "ArrowUp") {
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
setFocusedIndex((prev) => Math.max(prev - 1, 0));
|
|
56
|
+
} else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
|
|
57
|
+
e.preventDefault();
|
|
58
|
+
handleSelect(filteredOptions[focusedIndex].value);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const selectedOption = options.find((o) => o.value === selected);
|
|
62
|
+
const displayLabel = customTriggerLabel || (selectedOption == null ? void 0 : selectedOption.label) || (selectedOption == null ? void 0 : selectedOption.value) || "Select";
|
|
63
|
+
const showClear = showClearButton && selected !== null;
|
|
64
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.root, ref: containerRef, onKeyDown: handleKeyDown, children: [
|
|
65
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
66
|
+
"button",
|
|
28
67
|
{
|
|
29
|
-
|
|
30
|
-
className: clsx.clsx(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
68
|
+
type: "button",
|
|
69
|
+
className: clsx.clsx(SingleSelectDropdown_module.default.trigger, { [SingleSelectDropdown_module.default.active]: isOpen }),
|
|
70
|
+
onClick: () => {
|
|
71
|
+
setIsOpen((prev) => !prev);
|
|
72
|
+
setFocusedIndex(-1);
|
|
73
|
+
},
|
|
74
|
+
"aria-expanded": isOpen,
|
|
75
|
+
"aria-haspopup": "listbox",
|
|
76
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.triggerContent, children: [
|
|
77
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { className: SingleSelectDropdown_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" }) }),
|
|
78
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.label, children: label }),
|
|
79
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.value, children: displayLabel }),
|
|
80
|
+
showClear && /* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
+
"span",
|
|
82
|
+
{
|
|
83
|
+
className: SingleSelectDropdown_module.default.clear,
|
|
84
|
+
onClick: handleClear,
|
|
85
|
+
role: "button",
|
|
86
|
+
tabIndex: 0,
|
|
87
|
+
"aria-label": `Clear ${label}`,
|
|
88
|
+
onKeyDown: (e) => {
|
|
89
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
handleClear(e);
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
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: [
|
|
95
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
96
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
97
|
+
] })
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
] })
|
|
45
101
|
}
|
|
46
|
-
)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
102
|
+
),
|
|
103
|
+
isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.panel, role: "listbox", ref: listRef, children: [
|
|
104
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectDropdown_module.default.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
105
|
+
"input",
|
|
106
|
+
{
|
|
107
|
+
type: "search",
|
|
108
|
+
className: SingleSelectDropdown_module.default.search,
|
|
109
|
+
placeholder: `Search ${label.toLowerCase()}`,
|
|
110
|
+
value: searchTerm,
|
|
111
|
+
onChange: (e) => {
|
|
112
|
+
setSearchTerm(e.target.value);
|
|
113
|
+
setFocusedIndex(-1);
|
|
114
|
+
},
|
|
115
|
+
onClick: (e) => e.stopPropagation()
|
|
116
|
+
}
|
|
117
|
+
) }),
|
|
118
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.list, children: [
|
|
119
|
+
filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectDropdown_module.default.noResults, children: "No matches found" }),
|
|
120
|
+
filteredOptions.map((opt, i) => {
|
|
121
|
+
const isSelected = opt.value === selected;
|
|
122
|
+
const isFocused = i === focusedIndex;
|
|
123
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
124
|
+
"button",
|
|
125
|
+
{
|
|
126
|
+
type: "button",
|
|
127
|
+
className: clsx.clsx(SingleSelectDropdown_module.default.option, {
|
|
128
|
+
[SingleSelectDropdown_module.default.selected]: isSelected,
|
|
129
|
+
[SingleSelectDropdown_module.default.focused]: isFocused
|
|
130
|
+
}),
|
|
131
|
+
onClick: () => handleSelect(opt.value),
|
|
132
|
+
role: "option",
|
|
133
|
+
"aria-selected": isSelected,
|
|
134
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: SingleSelectDropdown_module.default.optionLabel, children: [
|
|
135
|
+
opt.label ?? opt.value,
|
|
136
|
+
opt.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.optionCount, children: opt.count })
|
|
137
|
+
] })
|
|
138
|
+
},
|
|
139
|
+
opt.value
|
|
140
|
+
);
|
|
141
|
+
})
|
|
142
|
+
] })
|
|
143
|
+
] })
|
|
144
|
+
] });
|
|
145
|
+
};
|
|
146
|
+
exports.SingleSelectDropdown = SingleSelectDropdown;
|
|
51
147
|
//# sourceMappingURL=index42.cjs.map
|
package/dist/index42.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index42.cjs","sources":["../src/primitives/StatCard/StatCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { StatCardProps } from './StatCard.types';\nimport styles from './StatCard.module.css';\n\nexport const StatCard = forwardRef<HTMLDivElement, StatCardProps>(\n (\n {\n label,\n value,\n sub,\n variant = 'default',\n clickable = false,\n active = false,\n className,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n return (\n <div\n ref={ref}\n className={clsx(\n styles.root,\n clickable && styles.isClick,\n active && styles.isActive,\n className,\n )}\n role={clickable ? 'button' : undefined}\n tabIndex={clickable ? 0 : undefined}\n onKeyDown={handleKeyDown}\n {...props}\n >\n <div className={styles.label}>{label}</div>\n <div className={clsx(styles.value, variant !== 'default' && styles[variant])}>{value}</div>\n {sub != null && <div className={styles.sub}>{sub}</div>}\n </div>\n );\n },\n);\n\nStatCard.displayName = 'StatCard';\n"],"names":["forwardRef","jsxs","clsx","styles","jsx"],"mappings":";;;;;;AAKO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,gBAAgB,CAAC,UAA+C;AACpE,6CAAY;AACZ,UAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAC7D,cAAM,eAAA;AACN,cAAM,cAAc,MAAA;AAAA,MACtB;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,KAAAA;AAAAA,UACTC,gBAAAA,QAAO;AAAA,UACP,aAAaA,gBAAAA,QAAO;AAAA,UACpB,UAAUA,gBAAAA,QAAO;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,MAAM,YAAY,WAAW;AAAA,QAC7B,UAAU,YAAY,IAAI;AAAA,QAC1B,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,gBAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,UACrCC,2BAAAA,IAAC,OAAA,EAAI,WAAWF,KAAAA,KAAKC,gBAAAA,QAAO,OAAO,YAAY,aAAaA,gBAAAA,QAAO,OAAO,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,UACpF,OAAO,QAAQC,2BAAAA,IAAC,SAAI,WAAWD,wBAAO,KAAM,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvD;AACF;AAEA,SAAS,cAAc;;"}
|
|
1
|
+
{"version":3,"file":"index42.cjs","sources":["../src/composites/SingleSelectDropdown/SingleSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport styles from './SingleSelectDropdown.module.css';\n\nexport interface SingleSelectOption {\n value: string;\n label?: string;\n count?: number;\n}\n\nexport interface SingleSelectDropdownProps {\n /** Label displayed on the trigger. */\n label: string;\n /** Available options. */\n options: SingleSelectOption[];\n /** Currently selected value (controlled). `null` means no selection. */\n selected: string | null;\n /** Called when the user selects an option. */\n onSelect: (value: string) => void;\n /** Override the trigger value label. */\n customTriggerLabel?: string;\n /** Called when the user clears the selection. */\n onClear?: () => void;\n /** Show clear button when a value is selected. */\n showClearButton?: boolean;\n}\n\nexport const SingleSelectDropdown = ({\n label,\n options,\n selected,\n onSelect,\n customTriggerLabel,\n onClear,\n showClearButton = false,\n}: SingleSelectDropdownProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState('');\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n const close = useCallback(() => {\n setIsOpen(false);\n setSearchTerm('');\n setFocusedIndex(-1);\n }, []);\n\n useClickOutside(containerRef, close);\n useEscapeKey(close, isOpen);\n\n const filteredOptions = useMemo(() => {\n if (!searchTerm.trim()) return options;\n const term = searchTerm.trim().toLowerCase();\n return options.filter((opt) => {\n const lbl = opt.label ?? opt.value;\n return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n });\n }, [options, searchTerm]);\n\n const handleSelect = (value: string) => {\n onSelect(value);\n close();\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n onClear?.();\n close();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!isOpen) return;\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n setFocusedIndex((prev) => Math.max(prev - 1, 0));\n } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\n e.preventDefault();\n handleSelect(filteredOptions[focusedIndex].value);\n }\n };\n\n const selectedOption = options.find((o) => o.value === selected);\n const displayLabel = customTriggerLabel || selectedOption?.label || selectedOption?.value || 'Select';\n const showClear = showClearButton && selected !== null;\n\n return (\n <div className={styles.root} ref={containerRef} onKeyDown={handleKeyDown}>\n <button\n type=\"button\"\n className={clsx(styles.trigger, { [styles.active]: isOpen })}\n onClick={() => {\n setIsOpen((prev) => !prev);\n setFocusedIndex(-1);\n }}\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 <span className={styles.value}>{displayLabel}</span>\n {showClear && (\n <span\n className={styles.clear}\n onClick={handleClear}\n role=\"button\"\n tabIndex={0}\n aria-label={`Clear ${label}`}\n onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClear(e as unknown as React.MouseEvent); } }}\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 </span>\n )}\n </div>\n </button>\n\n {isOpen && (\n <div className={styles.panel} role=\"listbox\" ref={listRef}>\n <div className={styles.searchContainer}>\n <input\n type=\"search\"\n className={styles.search}\n placeholder={`Search ${label.toLowerCase()}`}\n value={searchTerm}\n onChange={(e) => {\n setSearchTerm(e.target.value);\n setFocusedIndex(-1);\n }}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n <div className={styles.list}>\n {filteredOptions.length === 0 && (\n <div className={styles.noResults}>No matches found</div>\n )}\n {filteredOptions.map((opt, i) => {\n const isSelected = opt.value === selected;\n const isFocused = i === focusedIndex;\n return (\n <button\n key={opt.value}\n type=\"button\"\n className={clsx(styles.option, {\n [styles.selected]: isSelected,\n [styles.focused]: isFocused,\n })}\n onClick={() => handleSelect(opt.value)}\n role=\"option\"\n aria-selected={isSelected}\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 </button>\n );\n })}\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["useState","useRef","useCallback","useClickOutside","useEscapeKey","useMemo","jsxs","styles","jsx","clsx","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH"],"mappings":";;;;;;;;;AA8BO,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAAiC;AAC/B,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAS,KAAK;AAC1C,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAS,EAAE;AAC/C,QAAM,CAAC,cAAc,eAAe,IAAIA,MAAAA,SAAS,EAAE;AACnD,QAAM,eAAeC,MAAAA,OAAuB,IAAI;AAChD,QAAM,UAAUA,MAAAA,OAAuB,IAAI;AAE3C,QAAM,QAAQC,MAAAA,YAAY,MAAM;AAC9B,cAAU,KAAK;AACf,kBAAc,EAAE;AAChB,oBAAgB,EAAE;AAAA,EACpB,GAAG,CAAA,CAAE;AAELC,kBAAAA,gBAAgB,cAAc,KAAK;AACnCC,eAAAA,aAAa,OAAO,MAAM;AAE1B,QAAM,kBAAkBC,MAAAA,QAAQ,MAAM;AACpC,QAAI,CAAC,WAAW,KAAA,EAAQ,QAAO;AAC/B,UAAM,OAAO,WAAW,KAAA,EAAO,YAAA;AAC/B,WAAO,QAAQ,OAAO,CAAC,QAAQ;AAC7B,YAAM,MAAM,IAAI,SAAS,IAAI;AAC7B,aAAO,IAAI,cAAc,SAAS,IAAI,KAAK,IAAI,MAAM,cAAc,SAAS,IAAI;AAAA,IAClF,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,QAAM,eAAe,CAAC,UAAkB;AACtC,aAAS,KAAK;AACd,UAAA;AAAA,EACF;AAEA,QAAM,cAAc,CAAC,MAAwB;AAC3C,MAAE,gBAAA;AACF;AACA,UAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,CAAC,OAAQ;AAEb,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,gBAAgB,SAAS,CAAC,CAAC;AAAA,IAC1E,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAA;AACF,sBAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,GAAG,CAAC,CAAC;AAAA,IACjD,WAAW,EAAE,QAAQ,WAAW,gBAAgB,KAAK,eAAe,gBAAgB,QAAQ;AAC1F,QAAE,eAAA;AACF,mBAAa,gBAAgB,YAAY,EAAE,KAAK;AAAA,IAClD;AAAA,EACF;AAEA,QAAM,iBAAiB,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,QAAQ;AAC/D,QAAM,eAAe,uBAAsB,iDAAgB,WAAS,iDAAgB,UAAS;AAC7F,QAAM,YAAY,mBAAmB,aAAa;AAElD,SACEC,gCAAC,SAAI,WAAWC,4BAAAA,QAAO,MAAM,KAAK,cAAc,WAAW,eACzD,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWC,KAAAA,KAAKF,4BAAAA,QAAO,SAAS,EAAE,CAACA,oCAAO,MAAM,GAAG,QAAQ;AAAA,QAC3D,SAAS,MAAM;AACb,oBAAU,CAAC,SAAS,CAAC,IAAI;AACzB,0BAAgB,EAAE;AAAA,QACpB;AAAA,QACA,iBAAe;AAAA,QACf,iBAAc;AAAA,QAEd,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAWC,4BAAAA,QAAO,gBACrB,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,4BAAAA,QAAO,SAAS,OAAOG,UAAAA,UAAU,IAAI,QAAQA,UAAAA,UAAU,IAAI,SAASC,UAAAA,aAAa,MAAK,QAAO,QAAO,gBAAe,aAAaC,UAAAA,kBAAkB,eAAc,SAAQ,gBAAe,SACrM,UAAAJ,2BAAAA,IAAC,YAAA,EAAS,QAAO,iBAAA,CAAiB,EAAA,CACpC;AAAA,UACAA,2BAAAA,IAAC,QAAA,EAAK,WAAWD,4BAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,UACtCC,2BAAAA,IAAC,QAAA,EAAK,WAAWD,4BAAAA,QAAO,OAAQ,UAAA,cAAa;AAAA,UAC5C,aACCC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,4BAAAA,QAAO;AAAA,cAClB,SAAS;AAAA,cACT,MAAK;AAAA,cACL,UAAU;AAAA,cACV,cAAY,SAAS,KAAK;AAAA,cAC1B,WAAW,CAAC,MAAM;AAAE,oBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,oBAAE,eAAA;AAAkB,8BAAY,CAAgC;AAAA,gBAAG;AAAA,cAAE;AAAA,cAEnI,0CAAC,OAAA,EAAI,OAAOG,UAAAA,UAAU,IAAI,QAAQA,UAAAA,UAAU,IAAI,SAASC,UAAAA,aAAa,MAAK,QAAO,QAAO,gBAAe,aAAaC,UAAAA,kBAAkB,eAAc,SAAQ,gBAAe,SAC1K,UAAA;AAAA,gBAAAJ,2BAAAA,IAAC,QAAA,EAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,gBACpCA,2BAAAA,IAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,cAAA,EAAA,CACtC;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,0CACE,OAAA,EAAI,WAAWD,4BAAAA,QAAO,OAAO,MAAK,WAAU,KAAK,SAChD,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,4BAAAA,QAAO,iBACrB,UAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,4BAAAA,QAAO;AAAA,UAClB,aAAa,UAAU,MAAM,YAAA,CAAa;AAAA,UAC1C,OAAO;AAAA,UACP,UAAU,CAAC,MAAM;AACf,0BAAc,EAAE,OAAO,KAAK;AAC5B,4BAAgB,EAAE;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,QAAgB;AAAA,MAAA,GAEtC;AAAA,MACAD,2BAAAA,KAAC,OAAA,EAAI,WAAWC,4BAAAA,QAAO,MACpB,UAAA;AAAA,QAAA,gBAAgB,WAAW,KAC1BC,2BAAAA,IAAC,SAAI,WAAWD,oCAAO,WAAW,UAAA,mBAAA,CAAgB;AAAA,QAEnD,gBAAgB,IAAI,CAAC,KAAK,MAAM;AAC/B,gBAAM,aAAa,IAAI,UAAU;AACjC,gBAAM,YAAY,MAAM;AACxB,iBACEC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAK;AAAA,cACL,WAAWC,KAAAA,KAAKF,4BAAAA,QAAO,QAAQ;AAAA,gBAC7B,CAACA,4BAAAA,QAAO,QAAQ,GAAG;AAAA,gBACnB,CAACA,4BAAAA,QAAO,OAAO,GAAG;AAAA,cAAA,CACnB;AAAA,cACD,SAAS,MAAM,aAAa,IAAI,KAAK;AAAA,cACrC,MAAK;AAAA,cACL,iBAAe;AAAA,cAEf,UAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAWC,4BAAAA,QAAO,aACrB,UAAA;AAAA,gBAAA,IAAI,SAAS,IAAI;AAAA,gBACjB,IAAI,UAAU,UACbC,2BAAAA,IAAC,UAAK,WAAWD,4BAAAA,QAAO,aAAc,UAAA,IAAI,MAAA,CAAM;AAAA,cAAA,EAAA,CAEpD;AAAA,YAAA;AAAA,YAfK,IAAI;AAAA,UAAA;AAAA,QAkBf,CAAC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;;"}
|