@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/index24.js
CHANGED
|
@@ -1,42 +1,134 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { clsx } from "./
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
|
3
|
+
import { clsx } from "./index47.js";
|
|
4
|
+
import { useClickOutside } from "./index4.js";
|
|
4
5
|
import { useEscapeKey } from "./index5.js";
|
|
5
|
-
import styles from "./
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
import styles from "./index73.js";
|
|
7
|
+
const FilterDropdown = ({
|
|
8
|
+
label,
|
|
9
|
+
mode,
|
|
10
|
+
options = [],
|
|
11
|
+
selected,
|
|
12
|
+
onToggle,
|
|
13
|
+
onClear,
|
|
14
|
+
value = "",
|
|
15
|
+
onChange,
|
|
16
|
+
placeholder,
|
|
17
|
+
clearLabel = "Limpiar",
|
|
18
|
+
className
|
|
17
19
|
}) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
21
|
+
const containerRef = useRef(null);
|
|
22
|
+
const [draft, setDraft] = useState(value);
|
|
23
|
+
const lastCommitted = useRef(value);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (isOpen) {
|
|
26
|
+
setDraft(value);
|
|
27
|
+
lastCommitted.current = value;
|
|
28
|
+
}
|
|
29
|
+
}, [isOpen, value]);
|
|
30
|
+
const commitDraft = useCallback(() => {
|
|
31
|
+
if (draft !== lastCommitted.current) {
|
|
32
|
+
lastCommitted.current = draft;
|
|
33
|
+
onChange == null ? void 0 : onChange(draft);
|
|
34
|
+
}
|
|
35
|
+
}, [draft, onChange]);
|
|
36
|
+
const close = useCallback(() => {
|
|
37
|
+
if (mode === "text") commitDraft();
|
|
38
|
+
setIsOpen(false);
|
|
39
|
+
}, [mode, commitDraft]);
|
|
40
|
+
const cancel = useCallback(() => {
|
|
41
|
+
setDraft(lastCommitted.current);
|
|
42
|
+
setIsOpen(false);
|
|
43
|
+
}, []);
|
|
44
|
+
useClickOutside(containerRef, close);
|
|
45
|
+
useEscapeKey(cancel, isOpen);
|
|
46
|
+
const selectedSet = useMemo(
|
|
47
|
+
() => selected instanceof Set ? selected : new Set(selected ?? []),
|
|
48
|
+
[selected]
|
|
49
|
+
);
|
|
50
|
+
const count = mode === "multi" ? selectedSet.size : value ? 1 : 0;
|
|
51
|
+
const hasSelection = count > 0;
|
|
52
|
+
const clearText = () => {
|
|
53
|
+
setDraft("");
|
|
54
|
+
lastCommitted.current = "";
|
|
55
|
+
(onClear ?? (() => onChange == null ? void 0 : onChange("")))();
|
|
56
|
+
};
|
|
57
|
+
const clearHandler = mode === "multi" ? onClear : clearText;
|
|
58
|
+
return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx(styles.root, className), children: [
|
|
59
|
+
/* @__PURE__ */ jsxs(
|
|
60
|
+
"button",
|
|
61
|
+
{
|
|
62
|
+
type: "button",
|
|
63
|
+
className: clsx(styles.trigger, hasSelection && styles.isActive),
|
|
64
|
+
"aria-haspopup": "true",
|
|
65
|
+
"aria-expanded": isOpen,
|
|
66
|
+
onClick: () => setIsOpen((open) => !open),
|
|
67
|
+
children: [
|
|
68
|
+
label,
|
|
69
|
+
count > 0 && ` (${count})`,
|
|
70
|
+
/* @__PURE__ */ jsx(
|
|
71
|
+
"svg",
|
|
72
|
+
{
|
|
73
|
+
className: clsx(styles.arrow, isOpen && styles.arrowOpen),
|
|
74
|
+
viewBox: "0 0 24 24",
|
|
75
|
+
fill: "none",
|
|
76
|
+
stroke: "currentColor",
|
|
77
|
+
strokeWidth: "2",
|
|
78
|
+
strokeLinecap: "round",
|
|
79
|
+
strokeLinejoin: "round",
|
|
80
|
+
"aria-hidden": "true",
|
|
81
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
isOpen && /* @__PURE__ */ jsxs("div", { className: styles.pop, children: [
|
|
88
|
+
mode === "multi" ? /* @__PURE__ */ jsx("div", { className: styles.chips, children: options.map((option) => {
|
|
89
|
+
const on = selectedSet.has(option.value);
|
|
90
|
+
return /* @__PURE__ */ jsx(
|
|
91
|
+
"button",
|
|
92
|
+
{
|
|
93
|
+
type: "button",
|
|
94
|
+
className: clsx(styles.chip, on && styles.chipOn),
|
|
95
|
+
"aria-pressed": on,
|
|
96
|
+
onClick: () => onToggle == null ? void 0 : onToggle(option.value),
|
|
97
|
+
children: option.label
|
|
98
|
+
},
|
|
99
|
+
option.value
|
|
100
|
+
);
|
|
101
|
+
}) }) : /* @__PURE__ */ jsx(
|
|
102
|
+
"input",
|
|
25
103
|
{
|
|
26
|
-
type: "
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
104
|
+
type: "text",
|
|
105
|
+
className: styles.input,
|
|
106
|
+
value: draft,
|
|
107
|
+
placeholder,
|
|
108
|
+
"aria-label": label,
|
|
109
|
+
onChange: (event) => setDraft(event.target.value),
|
|
110
|
+
onKeyDown: (event) => {
|
|
111
|
+
if (event.key === "Enter") {
|
|
112
|
+
event.preventDefault();
|
|
113
|
+
close();
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
onBlur: (event) => {
|
|
117
|
+
var _a;
|
|
118
|
+
if (!((_a = containerRef.current) == null ? void 0 : _a.contains(event.relatedTarget))) commitDraft();
|
|
119
|
+
}
|
|
31
120
|
}
|
|
32
|
-
)
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
121
|
+
),
|
|
122
|
+
hasSelection && clearHandler && /* @__PURE__ */ jsxs("button", { type: "button", className: styles.clear, onClick: clearHandler, children: [
|
|
123
|
+
clearLabel,
|
|
124
|
+
" ",
|
|
125
|
+
label.toLowerCase()
|
|
126
|
+
] })
|
|
127
|
+
] })
|
|
128
|
+
] });
|
|
38
129
|
};
|
|
130
|
+
FilterDropdown.displayName = "FilterDropdown";
|
|
39
131
|
export {
|
|
40
|
-
|
|
132
|
+
FilterDropdown
|
|
41
133
|
};
|
|
42
134
|
//# sourceMappingURL=index24.js.map
|
package/dist/index24.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index24.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index24.js","sources":["../src/composites/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport type { FilterDropdownProps } from './FilterDropdown.types';\nimport styles from './FilterDropdown.module.css';\n\nexport const FilterDropdown = ({\n label,\n mode,\n options = [],\n selected,\n onToggle,\n onClear,\n value = '',\n onChange,\n placeholder,\n clearLabel = 'Limpiar',\n className,\n}: FilterDropdownProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Text mode keeps a draft that is only committed on Enter / blur / close.\n const [draft, setDraft] = useState(value);\n const lastCommitted = useRef(value);\n useEffect(() => {\n if (isOpen) {\n setDraft(value);\n lastCommitted.current = value;\n }\n }, [isOpen, value]);\n\n const commitDraft = useCallback(() => {\n if (draft !== lastCommitted.current) {\n lastCommitted.current = draft;\n onChange?.(draft);\n }\n }, [draft, onChange]);\n\n const close = useCallback(() => {\n if (mode === 'text') commitDraft();\n setIsOpen(false);\n }, [mode, commitDraft]);\n\n const cancel = useCallback(() => {\n setDraft(lastCommitted.current);\n setIsOpen(false);\n }, []);\n\n useClickOutside(containerRef, close);\n useEscapeKey(cancel, isOpen);\n\n const selectedSet = useMemo(\n () => (selected instanceof Set ? selected : new Set(selected ?? [])),\n [selected],\n );\n\n const count = mode === 'multi' ? selectedSet.size : value ? 1 : 0;\n const hasSelection = count > 0;\n\n const clearText = () => {\n setDraft('');\n lastCommitted.current = '';\n (onClear ?? (() => onChange?.('')))();\n };\n const clearHandler = mode === 'multi' ? onClear : clearText;\n\n return (\n <div ref={containerRef} className={clsx(styles.root, className)}>\n <button\n type=\"button\"\n className={clsx(styles.trigger, hasSelection && styles.isActive)}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n onClick={() => setIsOpen((open) => !open)}\n >\n {label}\n {count > 0 && ` (${count})`}\n <svg\n className={clsx(styles.arrow, isOpen && styles.arrowOpen)}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n\n {isOpen && (\n <div className={styles.pop}>\n {mode === 'multi' ? (\n <div className={styles.chips}>\n {options.map((option) => {\n const on = selectedSet.has(option.value);\n return (\n <button\n key={option.value}\n type=\"button\"\n className={clsx(styles.chip, on && styles.chipOn)}\n aria-pressed={on}\n onClick={() => onToggle?.(option.value)}\n >\n {option.label}\n </button>\n );\n })}\n </div>\n ) : (\n <input\n type=\"text\"\n className={styles.input}\n value={draft}\n placeholder={placeholder}\n aria-label={label}\n onChange={(event) => setDraft(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n close();\n }\n }}\n onBlur={(event) => {\n if (!containerRef.current?.contains(event.relatedTarget as Node)) commitDraft();\n }}\n />\n )}\n {hasSelection && clearHandler && (\n <button type=\"button\" className={styles.clear} onClick={clearHandler}>\n {clearLabel} {label.toLowerCase()}\n </button>\n )}\n </div>\n )}\n </div>\n );\n};\n\nFilterDropdown.displayName = 'FilterDropdown';\n"],"names":[],"mappings":"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"}
|
package/dist/index25.cjs
CHANGED
|
@@ -2,227 +2,80 @@
|
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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;
|
|
77
|
-
}
|
|
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("");
|
|
118
|
-
};
|
|
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: [
|
|
165
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
166
|
-
"input",
|
|
167
|
-
{
|
|
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
|
|
174
|
-
}
|
|
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
|
-
] })
|
|
180
|
-
] }),
|
|
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: [
|
|
5
|
+
const clsx = require("./index47.cjs");
|
|
6
|
+
const HeatmapMatrix_module = require("./index82.cjs");
|
|
7
|
+
function activateOnKey(event, action) {
|
|
8
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
9
|
+
event.preventDefault();
|
|
10
|
+
action();
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
const HeatmapMatrix = react.forwardRef(
|
|
14
|
+
({
|
|
15
|
+
columns,
|
|
16
|
+
rows,
|
|
17
|
+
cornerLabel,
|
|
18
|
+
getCell,
|
|
19
|
+
onRowHeaderClick,
|
|
20
|
+
onCellClick,
|
|
21
|
+
maxHeight,
|
|
22
|
+
className,
|
|
23
|
+
style,
|
|
24
|
+
...props
|
|
25
|
+
}, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
|
+
"div",
|
|
27
|
+
{
|
|
28
|
+
ref,
|
|
29
|
+
className: clsx.clsx(HeatmapMatrix_module.default.wrap, className),
|
|
30
|
+
style: { maxHeight, ...style },
|
|
31
|
+
...props,
|
|
32
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: HeatmapMatrix_module.default.root, children: [
|
|
33
|
+
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
34
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: HeatmapMatrix_module.default.corner, "aria-hidden": cornerLabel == null, children: cornerLabel }),
|
|
35
|
+
columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: HeatmapMatrix_module.default.colh, title: col.title, children: col.label }, col.key))
|
|
36
|
+
] }) }),
|
|
37
|
+
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row) => {
|
|
38
|
+
const rowInteractive = Boolean(onRowHeaderClick);
|
|
39
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
188
40
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
189
|
-
"
|
|
41
|
+
"th",
|
|
190
42
|
{
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
43
|
+
scope: "row",
|
|
44
|
+
className: clsx.clsx(HeatmapMatrix_module.default.rowh, rowInteractive && HeatmapMatrix_module.default.clickable),
|
|
45
|
+
role: rowInteractive ? "button" : void 0,
|
|
46
|
+
tabIndex: rowInteractive ? 0 : void 0,
|
|
47
|
+
onClick: rowInteractive ? () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key) : void 0,
|
|
48
|
+
onKeyDown: rowInteractive ? (event) => activateOnKey(event, () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key)) : void 0,
|
|
49
|
+
children: row.label
|
|
195
50
|
}
|
|
196
51
|
),
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
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
|
-
] })
|
|
52
|
+
columns.map((col) => {
|
|
53
|
+
const cell = getCell(row.key, col.key);
|
|
54
|
+
const cellInteractive = Boolean(onCellClick);
|
|
55
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
56
|
+
"td",
|
|
57
|
+
{
|
|
58
|
+
title: cell.title,
|
|
59
|
+
className: clsx.clsx(
|
|
60
|
+
HeatmapMatrix_module.default.cell,
|
|
61
|
+
cell.state && HeatmapMatrix_module.default[cell.state],
|
|
62
|
+
cellInteractive && HeatmapMatrix_module.default.clickable
|
|
63
|
+
),
|
|
64
|
+
role: cellInteractive ? "button" : void 0,
|
|
65
|
+
tabIndex: cellInteractive ? 0 : void 0,
|
|
66
|
+
onClick: cellInteractive ? () => onCellClick == null ? void 0 : onCellClick(row.key, col.key) : void 0,
|
|
67
|
+
onKeyDown: cellInteractive ? (event) => activateOnKey(event, () => onCellClick == null ? void 0 : onCellClick(row.key, col.key)) : void 0,
|
|
68
|
+
children: cell.value
|
|
69
|
+
},
|
|
70
|
+
col.key
|
|
71
|
+
);
|
|
72
|
+
})
|
|
73
|
+
] }, row.key);
|
|
74
|
+
}) })
|
|
223
75
|
] })
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
);
|
|
79
|
+
HeatmapMatrix.displayName = "HeatmapMatrix";
|
|
80
|
+
exports.HeatmapMatrix = HeatmapMatrix;
|
|
228
81
|
//# sourceMappingURL=index25.cjs.map
|
package/dist/index25.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index25.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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"}
|
|
1
|
+
{"version":3,"file":"index25.cjs","sources":["../src/data/HeatmapMatrix/HeatmapMatrix.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { HeatmapMatrixProps } from './HeatmapMatrix.types';\nimport styles from './HeatmapMatrix.module.css';\n\nfunction activateOnKey(event: React.KeyboardEvent, action: () => void) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n action();\n }\n}\n\nexport const HeatmapMatrix = forwardRef<HTMLDivElement, HeatmapMatrixProps>(\n (\n {\n columns,\n rows,\n cornerLabel,\n getCell,\n onRowHeaderClick,\n onCellClick,\n maxHeight,\n className,\n style,\n ...props\n },\n ref,\n ) => (\n <div\n ref={ref}\n className={clsx(styles.wrap, className)}\n style={{ maxHeight, ...style }}\n {...props}\n >\n <table className={styles.root}>\n <thead>\n <tr>\n <th scope=\"col\" className={styles.corner} aria-hidden={cornerLabel == null}>\n {cornerLabel}\n </th>\n {columns.map((col) => (\n <th key={col.key} scope=\"col\" className={styles.colh} title={col.title}>\n {col.label}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map((row) => {\n const rowInteractive = Boolean(onRowHeaderClick);\n return (\n <tr key={row.key}>\n <th\n scope=\"row\"\n className={clsx(styles.rowh, rowInteractive && styles.clickable)}\n role={rowInteractive ? 'button' : undefined}\n tabIndex={rowInteractive ? 0 : undefined}\n onClick={rowInteractive ? () => onRowHeaderClick?.(row.key) : undefined}\n onKeyDown={\n rowInteractive\n ? (event) => activateOnKey(event, () => onRowHeaderClick?.(row.key))\n : undefined\n }\n >\n {row.label}\n </th>\n {columns.map((col) => {\n const cell = getCell(row.key, col.key);\n const cellInteractive = Boolean(onCellClick);\n return (\n <td\n key={col.key}\n title={cell.title}\n className={clsx(\n styles.cell,\n cell.state && styles[cell.state],\n cellInteractive && styles.clickable,\n )}\n role={cellInteractive ? 'button' : undefined}\n tabIndex={cellInteractive ? 0 : undefined}\n onClick={cellInteractive ? () => onCellClick?.(row.key, col.key) : undefined}\n onKeyDown={\n cellInteractive\n ? (event) => activateOnKey(event, () => onCellClick?.(row.key, col.key))\n : undefined\n }\n >\n {cell.value}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n ),\n);\n\nHeatmapMatrix.displayName = 'HeatmapMatrix';\n"],"names":["forwardRef","jsx","clsx","styles","jsxs"],"mappings":";;;;;;AAKA,SAAS,cAAc,OAA4B,QAAoB;AACrE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,WAAA;AAAA,EACF;AACF;AAEO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,KAAAA,KAAKC,6BAAO,MAAM,SAAS;AAAA,MACtC,OAAO,EAAE,WAAW,GAAG,MAAA;AAAA,MACtB,GAAG;AAAA,MAEJ,UAAAC,2BAAAA,KAAC,SAAA,EAAM,WAAWD,qBAAAA,QAAO,MACvB,UAAA;AAAA,QAAAF,2BAAAA,IAAC,SAAA,EACC,0CAAC,MAAA,EACC,UAAA;AAAA,UAAAA,2BAAAA,IAAC,MAAA,EAAG,OAAM,OAAM,WAAWE,qBAAAA,QAAO,QAAQ,eAAa,eAAe,MACnE,UAAA,YAAA,CACH;AAAA,UACC,QAAQ,IAAI,CAAC,QACZF,2BAAAA,IAAC,MAAA,EAAiB,OAAM,OAAM,WAAWE,qBAAAA,QAAO,MAAM,OAAO,IAAI,OAC9D,cAAI,MAAA,GADE,IAAI,GAEb,CACD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,QACAF,2BAAAA,IAAC,SAAA,EACE,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,gBAAM,iBAAiB,QAAQ,gBAAgB;AAC/C,iDACG,MAAA,EACC,UAAA;AAAA,YAAAA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,WAAWC,KAAAA,KAAKC,qBAAAA,QAAO,MAAM,kBAAkBA,qBAAAA,QAAO,SAAS;AAAA,gBAC/D,MAAM,iBAAiB,WAAW;AAAA,gBAClC,UAAU,iBAAiB,IAAI;AAAA,gBAC/B,SAAS,iBAAiB,MAAM,qDAAmB,IAAI,OAAO;AAAA,gBAC9D,WACE,iBACI,CAAC,UAAU,cAAc,OAAO,MAAM,qDAAmB,IAAI,IAAI,IACjE;AAAA,gBAGL,UAAA,IAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAEN,QAAQ,IAAI,CAAC,QAAQ;AACpB,oBAAM,OAAO,QAAQ,IAAI,KAAK,IAAI,GAAG;AACrC,oBAAM,kBAAkB,QAAQ,WAAW;AAC3C,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAO,KAAK;AAAA,kBACZ,WAAWC,KAAAA;AAAAA,oBACTC,qBAAAA,QAAO;AAAA,oBACP,KAAK,SAASA,6BAAO,KAAK,KAAK;AAAA,oBAC/B,mBAAmBA,qBAAAA,QAAO;AAAA,kBAAA;AAAA,kBAE5B,MAAM,kBAAkB,WAAW;AAAA,kBACnC,UAAU,kBAAkB,IAAI;AAAA,kBAChC,SAAS,kBAAkB,MAAM,2CAAc,IAAI,KAAK,IAAI,OAAO;AAAA,kBACnE,WACE,kBACI,CAAC,UAAU,cAAc,OAAO,MAAM,2CAAc,IAAI,KAAK,IAAI,IAAI,IACrE;AAAA,kBAGL,UAAA,KAAK;AAAA,gBAAA;AAAA,gBAhBD,IAAI;AAAA,cAAA;AAAA,YAmBf,CAAC;AAAA,UAAA,EAAA,GAvCM,IAAI,GAwCb;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,cAAc,cAAc;;"}
|