impact-nova 1.6.4 → 1.6.6
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/components/ui/accordion.js +34 -33
- package/dist/components/ui/ag-grid-react/index.js +151 -122
- package/dist/components/ui/alert-dialog.js +37 -34
- package/dist/components/ui/calendar.js +148 -133
- package/dist/components/ui/checkbox.js +44 -41
- package/dist/components/ui/date-picker/month-range-picker.js +63 -63
- package/dist/components/ui/date-picker/multi-month-picker.js +46 -43
- package/dist/components/ui/date-picker/multi-week-picker.js +22 -20
- package/dist/components/ui/dialog.js +56 -53
- package/dist/components/ui/filter-strip/filter-strip.js +9 -9
- package/dist/components/ui/filter-strip/filter-summary.js +3 -3
- package/dist/components/ui/input.js +12 -11
- package/dist/components/ui/sheet.js +48 -45
- package/dist/components/ui/sidebar.js +2 -2
- package/dist/components/ui/tabs.js +15 -13
- package/dist/icons/assets/layers.svg.js +7 -0
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +214 -212
- package/dist/impact-nova.css +1 -1
- package/package.json +1 -1
|
@@ -1,70 +1,73 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import * as
|
|
4
|
-
import { Check as
|
|
5
|
-
import { cn as
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
e !== void 0 ? e :
|
|
1
|
+
import { jsxs as r, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import * as n from "react";
|
|
3
|
+
import * as f from "@radix-ui/react-checkbox";
|
|
4
|
+
import { Check as y, Minus as w } from "lucide-react";
|
|
5
|
+
import { cn as s } from "../../lib/utils.js";
|
|
6
|
+
const I = n.forwardRef(({ className: g, label: c, helperText: o, isError: m, disabled: d, checked: e, defaultChecked: b, onCheckedChange: k, onKeyDown: v, ...u }, p) => {
|
|
7
|
+
const N = n.useId(), h = u.id || N, [i, l] = n.useState(
|
|
8
|
+
e !== void 0 ? e : b || !1
|
|
9
9
|
);
|
|
10
|
-
|
|
11
|
-
e !== void 0 &&
|
|
10
|
+
n.useEffect(() => {
|
|
11
|
+
e !== void 0 && l(e);
|
|
12
12
|
}, [e]);
|
|
13
|
-
const
|
|
14
|
-
e === void 0 &&
|
|
13
|
+
const x = (t) => {
|
|
14
|
+
e === void 0 && l(t), k?.(t);
|
|
15
15
|
};
|
|
16
|
-
return /* @__PURE__ */
|
|
17
|
-
/* @__PURE__ */
|
|
18
|
-
|
|
16
|
+
return /* @__PURE__ */ r("div", { className: "flex items-center", "data-component": "checkbox", "data-state": i === "indeterminate" ? "indeterminate" : i ? "checked" : "unchecked", "data-disabled": d || void 0, children: [
|
|
17
|
+
/* @__PURE__ */ a(
|
|
18
|
+
f.Root,
|
|
19
19
|
{
|
|
20
|
-
ref:
|
|
21
|
-
id:
|
|
22
|
-
className:
|
|
20
|
+
ref: p,
|
|
21
|
+
id: h,
|
|
22
|
+
className: s(
|
|
23
23
|
"peer h-4 w-4 shrink-0 rounded-[4px] border border-stroke-field bg-canvas-elevated ring-offset-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-brand data-[state=checked]:bg-accent data-[state=checked]:text-brand data-[state=indeterminate]:border-brand data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-brand mr-[7px]",
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
m && "border-destructive focus-visible:ring-destructive",
|
|
25
|
+
d && "border-stroke text-disabled-foreground data-[state=checked]:bg-disabled-surface data-[state=checked]:text-disabled-foreground",
|
|
26
|
+
g
|
|
27
27
|
),
|
|
28
28
|
checked: e,
|
|
29
|
-
defaultChecked:
|
|
30
|
-
onCheckedChange:
|
|
31
|
-
disabled:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
defaultChecked: b,
|
|
30
|
+
onCheckedChange: x,
|
|
31
|
+
disabled: d,
|
|
32
|
+
onKeyDown: (t) => {
|
|
33
|
+
t.key === "Enter" && (t.preventDefault(), x(i === "indeterminate" ? !0 : !i)), v?.(t);
|
|
34
|
+
},
|
|
35
|
+
...u,
|
|
36
|
+
children: /* @__PURE__ */ r(
|
|
37
|
+
f.Indicator,
|
|
35
38
|
{
|
|
36
39
|
"data-checkbox": "indicator",
|
|
37
|
-
className:
|
|
40
|
+
className: s("flex items-center justify-center text-current group"),
|
|
38
41
|
children: [
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
/* @__PURE__ */
|
|
42
|
+
/* @__PURE__ */ a(y, { className: "h-3 w-3 hidden group-data-[state=checked]:block", strokeWidth: 3 }),
|
|
43
|
+
/* @__PURE__ */ a(w, { className: "h-3 w-3 hidden group-data-[state=indeterminate]:block", strokeWidth: 3 })
|
|
41
44
|
]
|
|
42
45
|
}
|
|
43
46
|
)
|
|
44
47
|
}
|
|
45
48
|
),
|
|
46
|
-
(
|
|
47
|
-
|
|
49
|
+
(c || o) && /* @__PURE__ */ r("div", { className: "grid gap-[6px] leading-none", children: [
|
|
50
|
+
c && /* @__PURE__ */ r(
|
|
48
51
|
"label",
|
|
49
52
|
{
|
|
50
|
-
htmlFor:
|
|
51
|
-
className:
|
|
53
|
+
htmlFor: h,
|
|
54
|
+
className: s(
|
|
52
55
|
"text-sm font-medium leading-[20px] text-secondary-foreground peer-data-[state=checked]:text-content peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
53
|
-
|
|
54
|
-
|
|
56
|
+
m && "text-destructive",
|
|
57
|
+
d && "text-disabled-foreground"
|
|
55
58
|
),
|
|
56
59
|
children: [
|
|
57
|
-
|
|
60
|
+
c,
|
|
58
61
|
" ",
|
|
59
|
-
|
|
62
|
+
u.required && /* @__PURE__ */ a("span", { className: "text-destructive", children: "*" })
|
|
60
63
|
]
|
|
61
64
|
}
|
|
62
65
|
),
|
|
63
|
-
|
|
66
|
+
o && /* @__PURE__ */ a("p", { className: s("text-sm text-content-muted", m && "text-destructive"), children: o })
|
|
64
67
|
] })
|
|
65
68
|
] });
|
|
66
69
|
});
|
|
67
|
-
|
|
70
|
+
I.displayName = f.Root.displayName;
|
|
68
71
|
export {
|
|
69
|
-
|
|
72
|
+
I as Checkbox
|
|
70
73
|
};
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { jsxs as p, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
2
|
+
import * as d from "react";
|
|
3
3
|
import { X as ft } from "lucide-react";
|
|
4
4
|
import { CalendarMonth as mt, Info as pt } from "../../../icons/index.js";
|
|
5
5
|
import { isValid as P, parse as S } from "date-fns";
|
|
6
|
-
import { cn as y, padValidDateString as
|
|
6
|
+
import { cn as y, padValidDateString as B, maskDate as O } from "../../../lib/utils.js";
|
|
7
7
|
import { Popover as ht, PopoverTrigger as ut, PopoverContent as xt } from "../popover.js";
|
|
8
8
|
import { Calendar as gt } from "../calendar.js";
|
|
9
|
-
import { Tooltip as
|
|
9
|
+
import { Tooltip as z, TooltipTrigger as H, TooltipContent as X } from "../tooltip.js";
|
|
10
10
|
import { useImpactNovaI18n as Mt } from "../../../i18n/ImpactNovaI18nContext.js";
|
|
11
11
|
const r = (t, i = "MM/YYYY") => {
|
|
12
|
-
const
|
|
13
|
-
return i === "YYYY/MM" ? `${t.year}/${
|
|
14
|
-
}, Yt =
|
|
12
|
+
const R = (t.month + 1).toString().padStart(2, "0");
|
|
13
|
+
return i === "YYYY/MM" ? `${t.year}/${R}` : `${R}/${t.year}`;
|
|
14
|
+
}, Yt = d.forwardRef(
|
|
15
15
|
({
|
|
16
16
|
value: t,
|
|
17
17
|
onChange: i,
|
|
18
|
-
placeholder:
|
|
19
|
-
minDate:
|
|
18
|
+
placeholder: R,
|
|
19
|
+
minDate: N,
|
|
20
20
|
maxDate: q,
|
|
21
21
|
startMonth: G,
|
|
22
22
|
endMonth: J,
|
|
23
23
|
showFooter: u = !0,
|
|
24
24
|
disabled: w,
|
|
25
25
|
className: K,
|
|
26
|
-
isError:
|
|
26
|
+
isError: C,
|
|
27
27
|
size: D,
|
|
28
|
-
label:
|
|
29
|
-
helperText:
|
|
28
|
+
label: E,
|
|
29
|
+
helperText: T,
|
|
30
30
|
required: L,
|
|
31
31
|
prefix: wt,
|
|
32
32
|
prefixClick: bt,
|
|
@@ -34,28 +34,28 @@ const r = (t, i = "MM/YYYY") => {
|
|
|
34
34
|
...Q
|
|
35
35
|
}, U) => {
|
|
36
36
|
const { t: M } = Mt();
|
|
37
|
-
|
|
38
|
-
const
|
|
37
|
+
R ?? M("datePicker.selectMonthRange");
|
|
38
|
+
const A = d.useRef(null), W = d.useRef(null), l = d.useMemo(
|
|
39
39
|
() => n === "YYYY/MM" ? "yyyy/MM" : "MM/yyyy",
|
|
40
40
|
[n]
|
|
41
41
|
);
|
|
42
|
-
|
|
43
|
-
const [
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}, [
|
|
47
|
-
|
|
48
|
-
}, [
|
|
42
|
+
d.useImperativeHandle(U, () => A.current);
|
|
43
|
+
const [a, I] = d.useState(!1), [v, f] = d.useState(t), [b, x] = d.useState(t?.from ? r(t.from, n) : ""), [k, g] = d.useState(t?.to ? r(t.to, n) : ""), [Z, V] = d.useState(() => t?.from ? new Date(t.from.year, t.from.month, 1) : N || /* @__PURE__ */ new Date());
|
|
44
|
+
d.useEffect(() => {
|
|
45
|
+
a || (x(t?.from ? r(t.from, n) : ""), g(t?.to ? r(t.to, n) : ""), f(t));
|
|
46
|
+
}, [a, t, n]), d.useEffect(() => {
|
|
47
|
+
a && (f(t), x(t?.from ? r(t.from, n) : ""), g(t?.to ? r(t.to, n) : ""), V(t?.from ? new Date(t.from.year, t.from.month, 1) : N || /* @__PURE__ */ new Date()));
|
|
48
|
+
}, [a, t, n, N]);
|
|
49
49
|
const _ = (e) => {
|
|
50
|
-
f(e), e?.from && x(r(e.from, n)), e?.to && g(r(e.to, n)), !u && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (i?.(e),
|
|
50
|
+
f(e), e?.from && x(r(e.from, n)), e?.to && g(r(e.to, n)), !u && e?.from && e?.to && (e.from.month !== e.to.month || e.from.year !== e.to.year) && (i?.(e), I(!1));
|
|
51
51
|
}, F = (e) => {
|
|
52
|
-
i?.(e !== void 0 ? e :
|
|
52
|
+
i?.(e !== void 0 ? e : v), I(!1);
|
|
53
53
|
}, tt = () => {
|
|
54
|
-
f(t), x(t?.from ? r(t.from, n) : ""), g(t?.to ? r(t.to, n) : ""),
|
|
55
|
-
},
|
|
56
|
-
f(void 0), x(""), g(""), i?.(void 0), u ||
|
|
54
|
+
f(t), x(t?.from ? r(t.from, n) : ""), g(t?.to ? r(t.to, n) : ""), I(!1);
|
|
55
|
+
}, $ = () => {
|
|
56
|
+
f(void 0), x(""), g(""), i?.(void 0), u || I(!1);
|
|
57
57
|
}, et = (e) => {
|
|
58
|
-
const h = e.target.value, s =
|
|
58
|
+
const h = e.target.value, s = O(h, l, b);
|
|
59
59
|
if (x(s), s === "") {
|
|
60
60
|
const m = { from: void 0, to: t?.to };
|
|
61
61
|
f(m), u || i?.(m);
|
|
@@ -64,10 +64,10 @@ const r = (t, i = "MM/YYYY") => {
|
|
|
64
64
|
const c = S(s, l, /* @__PURE__ */ new Date());
|
|
65
65
|
if (P(c) && s.length === 7) {
|
|
66
66
|
const Y = { from: { month: c.getMonth(), year: c.getFullYear() }, to: t?.to };
|
|
67
|
-
f(Y),
|
|
67
|
+
f(Y), V(c), u || i?.(Y);
|
|
68
68
|
}
|
|
69
69
|
}, nt = (e) => {
|
|
70
|
-
const h = e.target.value, s =
|
|
70
|
+
const h = e.target.value, s = O(h, l, k);
|
|
71
71
|
if (g(s), s === "") {
|
|
72
72
|
const m = { from: t?.from, to: void 0 };
|
|
73
73
|
f(m), u || i?.(m);
|
|
@@ -76,41 +76,41 @@ const r = (t, i = "MM/YYYY") => {
|
|
|
76
76
|
const c = S(s, l, /* @__PURE__ */ new Date());
|
|
77
77
|
if (P(c) && s.length === 7) {
|
|
78
78
|
const m = { month: c.getMonth(), year: c.getFullYear() }, Y = { from: t?.from, to: m };
|
|
79
|
-
f(Y),
|
|
79
|
+
f(Y), V(c), u || i?.(Y);
|
|
80
80
|
}
|
|
81
|
-
},
|
|
82
|
-
if (
|
|
83
|
-
const e =
|
|
81
|
+
}, j = () => {
|
|
82
|
+
if (a) return;
|
|
83
|
+
const e = B(b, l), h = B(k, l), s = S(e, l, /* @__PURE__ */ new Date()), c = S(h, l, /* @__PURE__ */ new Date()), m = P(s) && e.length === 7, Y = P(c) && h.length === 7;
|
|
84
84
|
!m || !Y ? (x(t?.from ? r(t.from, n) : ""), g(t?.to ? r(t.to, n) : ""), f(t)) : (x(e), g(h), u || i?.({
|
|
85
85
|
from: { month: s.getMonth(), year: s.getFullYear() },
|
|
86
86
|
to: { month: c.getMonth(), year: c.getFullYear() }
|
|
87
87
|
}));
|
|
88
|
-
}, ot = t?.from ? r(t.from, n) : "", rt = t?.to ? r(t.to, n) : "", st = b !== ot, ct = k !== rt,
|
|
88
|
+
}, ot = t?.from ? r(t.from, n) : "", rt = t?.to ? r(t.to, n) : "", st = b !== ot, ct = k !== rt, dt = b.length === 7 && !P(S(b, l, /* @__PURE__ */ new Date())), at = k.length === 7 && !P(S(k, l, /* @__PURE__ */ new Date())), it = M("datePicker.startMonth"), lt = M("datePicker.endMonth");
|
|
89
89
|
return /* @__PURE__ */ p("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "month-range-picker", "data-disabled": w || void 0, children: [
|
|
90
90
|
/* @__PURE__ */ p("div", { className: "flex flex-col gap-[6px]", children: [
|
|
91
|
-
|
|
91
|
+
E && /* @__PURE__ */ p(
|
|
92
92
|
"label",
|
|
93
93
|
{
|
|
94
94
|
className: y(
|
|
95
95
|
"text-xs font-medium leading-[18px] text-content-tertiary",
|
|
96
96
|
w && "opacity-70",
|
|
97
|
-
|
|
97
|
+
C && "text-destructive"
|
|
98
98
|
),
|
|
99
99
|
children: [
|
|
100
|
-
|
|
100
|
+
E,
|
|
101
101
|
" ",
|
|
102
102
|
L && /* @__PURE__ */ o("span", { className: "text-destructive", children: "*" })
|
|
103
103
|
]
|
|
104
104
|
}
|
|
105
105
|
),
|
|
106
|
-
/* @__PURE__ */ p(ht, { open:
|
|
106
|
+
/* @__PURE__ */ p(ht, { open: a, onOpenChange: I, children: [
|
|
107
107
|
/* @__PURE__ */ o(ut, { asChild: !0, children: /* @__PURE__ */ p(
|
|
108
108
|
"div",
|
|
109
109
|
{
|
|
110
|
-
"data-state":
|
|
110
|
+
"data-state": a ? "open" : "closed",
|
|
111
111
|
className: y(
|
|
112
112
|
"flex w-full items-center justify-between gap-2 rounded-md border bg-canvas-elevated px-3 text-sm shadow-sm transition-colors hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
|
|
113
|
-
|
|
113
|
+
C ? "border-destructive hover:border-destructive" : "border-field",
|
|
114
114
|
D === "sm" ? "h-6" : D === "md" ? "h-[28px]" : "h-8",
|
|
115
115
|
w && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
|
|
116
116
|
"cursor-pointer",
|
|
@@ -121,18 +121,18 @@ const r = (t, i = "MM/YYYY") => {
|
|
|
121
121
|
/* @__PURE__ */ o(
|
|
122
122
|
"input",
|
|
123
123
|
{
|
|
124
|
-
ref:
|
|
124
|
+
ref: A,
|
|
125
125
|
type: "text",
|
|
126
126
|
value: b,
|
|
127
127
|
onChange: et,
|
|
128
|
-
onBlur:
|
|
129
|
-
onClick: (e) =>
|
|
130
|
-
placeholder:
|
|
128
|
+
onBlur: j,
|
|
129
|
+
onClick: (e) => a && e.stopPropagation(),
|
|
130
|
+
placeholder: a ? n === "YYYY/MM" ? "YYYY/MM" : M("datePicker.monthYearFormat") : it,
|
|
131
131
|
disabled: !!w,
|
|
132
132
|
"data-field": "start",
|
|
133
133
|
className: y(
|
|
134
134
|
"flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
|
|
135
|
-
|
|
135
|
+
dt ? "text-destructive" : st ? "text-content-muted" : ""
|
|
136
136
|
),
|
|
137
137
|
...Q
|
|
138
138
|
}
|
|
@@ -144,34 +144,34 @@ const r = (t, i = "MM/YYYY") => {
|
|
|
144
144
|
type: "text",
|
|
145
145
|
value: k,
|
|
146
146
|
onChange: nt,
|
|
147
|
-
onBlur:
|
|
148
|
-
onClick: (e) =>
|
|
149
|
-
placeholder:
|
|
147
|
+
onBlur: j,
|
|
148
|
+
onClick: (e) => a && e.stopPropagation(),
|
|
149
|
+
placeholder: a ? n === "YYYY/MM" ? "YYYY/MM" : M("datePicker.monthYearFormat") : lt,
|
|
150
150
|
disabled: !!w,
|
|
151
151
|
"data-field": "end",
|
|
152
152
|
className: y(
|
|
153
153
|
"flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
|
|
154
|
-
|
|
154
|
+
at ? "text-destructive" : ct ? "text-content-muted" : ""
|
|
155
155
|
)
|
|
156
156
|
}
|
|
157
157
|
)
|
|
158
158
|
] }),
|
|
159
159
|
/* @__PURE__ */ p("div", { className: "flex items-center gap-1 shrink-0", children: [
|
|
160
|
-
t?.from && !w && /* @__PURE__ */ p(
|
|
161
|
-
/* @__PURE__ */ o(
|
|
160
|
+
t?.from && !w && /* @__PURE__ */ p(z, { children: [
|
|
161
|
+
/* @__PURE__ */ o(H, { asChild: !0, children: /* @__PURE__ */ o(
|
|
162
162
|
ft,
|
|
163
163
|
{
|
|
164
164
|
className: "h-4 w-4 cursor-pointer hover:text-content text-content-muted",
|
|
165
165
|
onClick: (e) => {
|
|
166
|
-
e.stopPropagation(),
|
|
166
|
+
e.stopPropagation(), $();
|
|
167
167
|
}
|
|
168
168
|
}
|
|
169
169
|
) }),
|
|
170
|
-
/* @__PURE__ */ o(
|
|
170
|
+
/* @__PURE__ */ o(X, { variant: "tertiary", side: "top", children: M("calendar.clear") })
|
|
171
171
|
] }),
|
|
172
|
-
/* @__PURE__ */ p(
|
|
173
|
-
/* @__PURE__ */ o(
|
|
174
|
-
/* @__PURE__ */ o(
|
|
172
|
+
/* @__PURE__ */ p(z, { children: [
|
|
173
|
+
/* @__PURE__ */ o(H, { asChild: !0, children: /* @__PURE__ */ o(mt, { className: "h-4 w-4 text-secondary-foreground" }) }),
|
|
174
|
+
/* @__PURE__ */ o(X, { variant: "tertiary", side: "top", children: M("datePicker.selectMonthRange") })
|
|
175
175
|
] })
|
|
176
176
|
] })
|
|
177
177
|
]
|
|
@@ -188,33 +188,33 @@ const r = (t, i = "MM/YYYY") => {
|
|
|
188
188
|
{
|
|
189
189
|
pickerType: "month",
|
|
190
190
|
monthMode: "range",
|
|
191
|
-
selectedMonths:
|
|
191
|
+
selectedMonths: v,
|
|
192
192
|
onMonthSelect: _,
|
|
193
193
|
month: Z,
|
|
194
|
-
onMonthChange:
|
|
195
|
-
disabled: { before:
|
|
194
|
+
onMonthChange: V,
|
|
195
|
+
disabled: { before: N, after: q },
|
|
196
196
|
startMonth: G,
|
|
197
197
|
endMonth: J,
|
|
198
198
|
showFooter: u,
|
|
199
199
|
onApply: F,
|
|
200
200
|
onCancel: tt,
|
|
201
|
-
onClear:
|
|
201
|
+
onClear: $
|
|
202
202
|
}
|
|
203
203
|
)
|
|
204
204
|
}
|
|
205
205
|
)
|
|
206
206
|
] })
|
|
207
207
|
] }),
|
|
208
|
-
|
|
209
|
-
!
|
|
208
|
+
T && /* @__PURE__ */ p("div", { className: y("flex items-center gap-[6px]", C && "text-destructive"), children: [
|
|
209
|
+
!C && /* @__PURE__ */ o(pt, { size: 10, className: "shrink-0 text-content-muted" }),
|
|
210
210
|
/* @__PURE__ */ o(
|
|
211
211
|
"p",
|
|
212
212
|
{
|
|
213
213
|
className: y(
|
|
214
214
|
"text-[10px] leading-4 text-navigation-muted",
|
|
215
|
-
|
|
215
|
+
C && "text-destructive"
|
|
216
216
|
),
|
|
217
|
-
children:
|
|
217
|
+
children: T
|
|
218
218
|
}
|
|
219
219
|
)
|
|
220
220
|
] })
|
|
@@ -1,91 +1,94 @@
|
|
|
1
|
-
import { jsxs as l, jsx as
|
|
1
|
+
import { jsxs as l, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import * as c from "react";
|
|
3
3
|
import { X as I } from "lucide-react";
|
|
4
4
|
import { CalendarMonth as j } from "../../../icons/index.js";
|
|
5
5
|
import { cn as R } from "../../../lib/utils.js";
|
|
6
6
|
import { Input as $ } from "../input.js";
|
|
7
|
-
import { Popover as
|
|
8
|
-
import { Calendar as
|
|
9
|
-
import { Tooltip as
|
|
10
|
-
import { useImpactNovaI18n as
|
|
11
|
-
const
|
|
7
|
+
import { Popover as E, PopoverTrigger as L, PopoverContent as V } from "../popover.js";
|
|
8
|
+
import { Calendar as X } from "../calendar.js";
|
|
9
|
+
import { Tooltip as u, TooltipTrigger as g, TooltipContent as M } from "../tooltip.js";
|
|
10
|
+
import { useImpactNovaI18n as b } from "../../../i18n/ImpactNovaI18nContext.js";
|
|
11
|
+
const q = c.forwardRef(
|
|
12
12
|
({
|
|
13
13
|
value: e,
|
|
14
|
-
onChange:
|
|
14
|
+
onChange: a,
|
|
15
15
|
placeholder: y,
|
|
16
|
-
minDate:
|
|
16
|
+
minDate: d,
|
|
17
17
|
maxDate: C,
|
|
18
18
|
startMonth: P,
|
|
19
19
|
endMonth: T,
|
|
20
|
-
showFooter:
|
|
20
|
+
showFooter: s = !0,
|
|
21
21
|
disabled: p,
|
|
22
22
|
className: k,
|
|
23
23
|
...x
|
|
24
24
|
}, N) => {
|
|
25
|
-
const { t:
|
|
25
|
+
const { t: n } = b(), O = y ?? n("datePicker.selectMultipleMonths"), [h, r] = c.useState(!1), [m, i] = c.useState(e);
|
|
26
26
|
c.useEffect(() => {
|
|
27
27
|
i(e);
|
|
28
|
-
}, [
|
|
29
|
-
const
|
|
30
|
-
i(
|
|
31
|
-
},
|
|
32
|
-
|
|
28
|
+
}, [h, e]);
|
|
29
|
+
const A = (t) => {
|
|
30
|
+
i(t), s || a?.(t);
|
|
31
|
+
}, S = (t) => {
|
|
32
|
+
a?.(t !== void 0 ? t : m), r(!1);
|
|
33
33
|
}, v = () => {
|
|
34
|
-
i(e),
|
|
35
|
-
},
|
|
36
|
-
i(void 0),
|
|
37
|
-
}, w = e && e.length > 0 ? e.length === 1 ? `${e[0].month + 1}/${e[0].year}` :
|
|
38
|
-
return /* @__PURE__ */ l(
|
|
39
|
-
|
|
34
|
+
i(e), r(!1);
|
|
35
|
+
}, f = () => {
|
|
36
|
+
i(void 0), a?.(void 0), s || r(!1);
|
|
37
|
+
}, w = e && e.length > 0 ? e.length === 1 ? `${e[0].month + 1}/${e[0].year}` : n("datePicker.monthsSelected", { count: e.length }) : "";
|
|
38
|
+
return /* @__PURE__ */ l(E, { open: h, onOpenChange: (t) => {
|
|
39
|
+
p || r(t);
|
|
40
|
+
}, children: [
|
|
41
|
+
/* @__PURE__ */ o(L, { asChild: !0, children: /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
|
|
40
42
|
$,
|
|
41
43
|
{
|
|
42
44
|
ref: N,
|
|
43
45
|
value: w,
|
|
44
|
-
placeholder:
|
|
46
|
+
placeholder: O,
|
|
45
47
|
readOnly: !0,
|
|
46
48
|
disabled: p,
|
|
47
49
|
className: R("cursor-pointer", k),
|
|
48
50
|
suffix: /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
|
|
49
|
-
e && e.length > 0 && !p && /* @__PURE__ */ l(
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
+
e && e.length > 0 && !p && /* @__PURE__ */ l(u, { children: [
|
|
52
|
+
/* @__PURE__ */ o(g, { asChild: !0, children: /* @__PURE__ */ o(
|
|
51
53
|
I,
|
|
52
54
|
{
|
|
53
55
|
className: "h-4 w-4 cursor-pointer hover:text-content",
|
|
54
|
-
onClick: (
|
|
55
|
-
|
|
56
|
+
onClick: (t) => {
|
|
57
|
+
t.stopPropagation(), f();
|
|
56
58
|
}
|
|
57
59
|
}
|
|
58
60
|
) }),
|
|
59
|
-
/* @__PURE__ */
|
|
61
|
+
/* @__PURE__ */ o(M, { variant: "tertiary", side: "top", children: n("calendar.clear") })
|
|
60
62
|
] }),
|
|
61
|
-
/* @__PURE__ */ l(
|
|
62
|
-
/* @__PURE__ */
|
|
63
|
-
/* @__PURE__ */
|
|
63
|
+
/* @__PURE__ */ l(u, { children: [
|
|
64
|
+
/* @__PURE__ */ o(g, { asChild: !0, children: /* @__PURE__ */ o(j, { className: "h-4 w-4 text-secondary-foreground" }) }),
|
|
65
|
+
/* @__PURE__ */ o(M, { variant: "tertiary", side: "top", children: n("datePicker.selectMultipleMonths") })
|
|
64
66
|
] })
|
|
65
67
|
] }),
|
|
66
68
|
...x
|
|
67
69
|
}
|
|
68
70
|
) }) }),
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
|
|
71
|
+
/* @__PURE__ */ o(
|
|
72
|
+
V,
|
|
71
73
|
{
|
|
72
74
|
className: "w-auto p-0",
|
|
73
75
|
align: "start",
|
|
74
|
-
onOpenAutoFocus: (
|
|
75
|
-
children: /* @__PURE__ */
|
|
76
|
-
|
|
76
|
+
onOpenAutoFocus: (t) => t.preventDefault(),
|
|
77
|
+
children: /* @__PURE__ */ o(
|
|
78
|
+
X,
|
|
77
79
|
{
|
|
78
80
|
pickerType: "month",
|
|
79
81
|
monthMode: "multiple",
|
|
80
|
-
selectedMonths:
|
|
81
|
-
onMonthSelect:
|
|
82
|
-
disabled: { before:
|
|
82
|
+
selectedMonths: m,
|
|
83
|
+
onMonthSelect: A,
|
|
84
|
+
disabled: { before: d, after: C },
|
|
83
85
|
startMonth: P,
|
|
84
86
|
endMonth: T,
|
|
85
|
-
|
|
86
|
-
|
|
87
|
+
defaultMonth: d,
|
|
88
|
+
showFooter: s,
|
|
89
|
+
onApply: S,
|
|
87
90
|
onCancel: v,
|
|
88
|
-
onClear:
|
|
91
|
+
onClear: f,
|
|
89
92
|
captionLayout: "dropdown"
|
|
90
93
|
}
|
|
91
94
|
)
|
|
@@ -94,7 +97,7 @@ const X = c.forwardRef(
|
|
|
94
97
|
] });
|
|
95
98
|
}
|
|
96
99
|
);
|
|
97
|
-
|
|
100
|
+
q.displayName = "MultiMonthPicker";
|
|
98
101
|
export {
|
|
99
|
-
|
|
102
|
+
q as MultiMonthPicker
|
|
100
103
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as c, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
2
|
+
import * as a from "react";
|
|
3
3
|
import { X } from "lucide-react";
|
|
4
4
|
import { CalendarMonth as q } from "../../../icons/index.js";
|
|
5
5
|
import { format as g } from "date-fns";
|
|
@@ -13,7 +13,7 @@ import { useImpactNovaI18n as Q } from "../../../i18n/ImpactNovaI18nContext.js";
|
|
|
13
13
|
const U = (e, o = "MM/dd/yyyy", n) => {
|
|
14
14
|
const l = g(e.startDate, o, n ? { locale: n } : {}), p = g(e.endDate, o, n ? { locale: n } : {});
|
|
15
15
|
return `${l} - ${p}`;
|
|
16
|
-
}, Y =
|
|
16
|
+
}, Y = a.forwardRef(
|
|
17
17
|
({
|
|
18
18
|
value: e,
|
|
19
19
|
onChange: o,
|
|
@@ -26,28 +26,30 @@ const U = (e, o = "MM/dd/yyyy", n) => {
|
|
|
26
26
|
showFooter: d = !0,
|
|
27
27
|
calendarType: x = "calendar",
|
|
28
28
|
fiscalMode: N = "basic",
|
|
29
|
-
selectionMode:
|
|
30
|
-
fiscalMonthPattern:
|
|
31
|
-
fiscalYearStartMonth:
|
|
32
|
-
weekStartsOn:
|
|
29
|
+
selectionMode: O = "week",
|
|
30
|
+
fiscalMonthPattern: S,
|
|
31
|
+
fiscalYearStartMonth: A = 1,
|
|
32
|
+
weekStartsOn: v = 1,
|
|
33
33
|
disabled: m,
|
|
34
|
-
className:
|
|
35
|
-
...
|
|
34
|
+
className: D,
|
|
35
|
+
...L
|
|
36
36
|
}, I) => {
|
|
37
|
-
const { locale: h, t: f } = Q(), $ =
|
|
38
|
-
|
|
37
|
+
const { locale: h, t: f } = Q(), $ = a.useMemo(() => K(h), [h]), j = l ?? f("datePicker.selectWeeks"), [y, s] = a.useState(!1), [k, i] = a.useState(e);
|
|
38
|
+
a.useEffect(() => {
|
|
39
39
|
i(e);
|
|
40
40
|
}, [y, e]);
|
|
41
41
|
const R = (t) => {
|
|
42
42
|
i(t), d || o?.(t);
|
|
43
43
|
}, b = (t) => {
|
|
44
|
-
o?.(t !== void 0 ? t : k),
|
|
44
|
+
o?.(t !== void 0 ? t : k), s(!1);
|
|
45
45
|
}, E = () => {
|
|
46
|
-
i(e),
|
|
46
|
+
i(e), s(!1);
|
|
47
47
|
}, u = () => {
|
|
48
|
-
i(void 0), o?.(void 0), d ||
|
|
48
|
+
i(void 0), o?.(void 0), d || s(!1);
|
|
49
49
|
}, V = e && e.length > 0 ? e.length === 1 ? U(e[0], n, $) : `${e.length} weeks selected` : "";
|
|
50
|
-
return /* @__PURE__ */ c(F, { open: y, onOpenChange: (t) =>
|
|
50
|
+
return /* @__PURE__ */ c(F, { open: y, onOpenChange: (t) => {
|
|
51
|
+
m || s(t);
|
|
52
|
+
}, children: [
|
|
51
53
|
/* @__PURE__ */ r(G, { asChild: !0, children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
|
|
52
54
|
B,
|
|
53
55
|
{
|
|
@@ -56,7 +58,7 @@ const U = (e, o = "MM/dd/yyyy", n) => {
|
|
|
56
58
|
placeholder: j,
|
|
57
59
|
readOnly: !0,
|
|
58
60
|
disabled: m,
|
|
59
|
-
className: z("cursor-pointer",
|
|
61
|
+
className: z("cursor-pointer", D),
|
|
60
62
|
suffix: /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
|
|
61
63
|
e && e.length > 0 && !m && /* @__PURE__ */ c(C, { children: [
|
|
62
64
|
/* @__PURE__ */ r(M, { asChild: !0, children: /* @__PURE__ */ r(
|
|
@@ -75,7 +77,7 @@ const U = (e, o = "MM/dd/yyyy", n) => {
|
|
|
75
77
|
/* @__PURE__ */ r(P, { variant: "tertiary", side: "top", children: f("datePicker.selectWeeks") })
|
|
76
78
|
] })
|
|
77
79
|
] }),
|
|
78
|
-
...
|
|
80
|
+
...L
|
|
79
81
|
}
|
|
80
82
|
) }) }),
|
|
81
83
|
/* @__PURE__ */ r(
|
|
@@ -97,10 +99,10 @@ const U = (e, o = "MM/dd/yyyy", n) => {
|
|
|
97
99
|
showFooter: d,
|
|
98
100
|
calendarType: x,
|
|
99
101
|
fiscalMode: N,
|
|
100
|
-
selectionMode:
|
|
101
|
-
fiscalMonthPattern:
|
|
102
|
-
fiscalYearStartMonth:
|
|
103
|
-
weekStartsOn:
|
|
102
|
+
selectionMode: O,
|
|
103
|
+
fiscalMonthPattern: S,
|
|
104
|
+
fiscalYearStartMonth: A,
|
|
105
|
+
weekStartsOn: v,
|
|
104
106
|
onApply: b,
|
|
105
107
|
onCancel: E,
|
|
106
108
|
onClear: u,
|