impact-nova 1.8.2 → 1.8.3
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/calendar.js +2 -3
- package/dist/components/ui/combobox.d.ts +1 -0
- package/dist/components/ui/combobox.js +116 -102
- package/dist/components/ui/date-picker/date-picker.js +52 -50
- package/dist/components/ui/date-picker/date-range-picker.js +92 -90
- package/dist/components/ui/date-picker/month-picker.js +57 -55
- package/dist/components/ui/date-picker/month-range-picker.js +84 -82
- package/dist/components/ui/date-picker/multi-date-picker.js +45 -43
- package/dist/components/ui/date-picker/week-range-picker.js +77 -75
- package/dist/components/ui/expandable-sku/expandable-sku.js +10 -10
- package/dist/components/ui/filter-strip/filter-tag-list.d.ts +8 -1
- package/dist/components/ui/filter-strip/filter-tag-list.js +99 -85
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { X as
|
|
4
|
-
import { CalendarMonth as
|
|
5
|
-
import { format as p, isValid as
|
|
6
|
-
import { cn as
|
|
1
|
+
import { jsxs as u, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import * as d from "react";
|
|
3
|
+
import { X as ye } from "lucide-react";
|
|
4
|
+
import { CalendarMonth as be, Info as J } from "../../../icons/index.js";
|
|
5
|
+
import { format as p, isValid as y, parse as b } from "date-fns";
|
|
6
|
+
import { cn as x, padValidDateString as E, maskDate as Q } from "../../../lib/utils.js";
|
|
7
7
|
import { Popover as we, PopoverTrigger as De, PopoverContent as ke } from "../popover.js";
|
|
8
8
|
import { Calendar as ve } from "../calendar.js";
|
|
9
9
|
import { Tooltip as U, TooltipTrigger as W, TooltipContent as Y } from "../tooltip.js";
|
|
10
10
|
import { getDateFnsLocale as Ne } from "../../../i18n/getDateFnsLocale.js";
|
|
11
11
|
import { useImpactNovaI18n as Se } from "../../../i18n/ImpactNovaI18nContext.js";
|
|
12
|
-
const Pe =
|
|
12
|
+
const Pe = d.forwardRef(
|
|
13
13
|
({
|
|
14
14
|
value: n,
|
|
15
|
-
onChange:
|
|
15
|
+
onChange: f,
|
|
16
16
|
format: t = "MM/dd/yyyy",
|
|
17
17
|
startPlaceholder: Z,
|
|
18
18
|
endPlaceholder: $,
|
|
@@ -20,75 +20,75 @@ const Pe = f.forwardRef(
|
|
|
20
20
|
maxDate: F,
|
|
21
21
|
startMonth: ee,
|
|
22
22
|
endMonth: te,
|
|
23
|
-
showFooter:
|
|
23
|
+
showFooter: h = !0,
|
|
24
24
|
weekStartsOn: z,
|
|
25
|
-
disabled:
|
|
25
|
+
disabled: m,
|
|
26
26
|
label: B,
|
|
27
27
|
helperText: V,
|
|
28
28
|
helperTextPosition: j = "absolute",
|
|
29
29
|
prefix: Re,
|
|
30
30
|
prefixClick: Ie,
|
|
31
|
-
isError:
|
|
31
|
+
isError: N,
|
|
32
32
|
size: O,
|
|
33
33
|
required: ne,
|
|
34
34
|
className: oe,
|
|
35
35
|
...le
|
|
36
|
-
},
|
|
37
|
-
const { locale: T, t: R } = Se(), o =
|
|
38
|
-
|
|
39
|
-
const [i,
|
|
40
|
-
|
|
41
|
-
i || (
|
|
42
|
-
}, [n, t, i, o]),
|
|
43
|
-
i && (
|
|
36
|
+
}, re) => {
|
|
37
|
+
const { locale: T, t: R } = Se(), o = d.useMemo(() => Ne(T), [T]), H = Z ?? R("datePicker.startDate"), X = $ ?? R("datePicker.endDate"), q = d.useRef(null), se = d.useRef(null);
|
|
38
|
+
d.useRef(null), d.useRef(null), d.useImperativeHandle(re, () => q.current);
|
|
39
|
+
const [i, w] = d.useState(!1), C = d.useRef(!1), [I, D] = d.useState(n), [k, S] = d.useState(n?.from ? p(n.from, t, { locale: o }) : ""), [v, P] = d.useState(n?.to ? p(n.to, t, { locale: o }) : ""), [ie, A] = d.useState(n?.from || /* @__PURE__ */ new Date());
|
|
40
|
+
d.useEffect(() => {
|
|
41
|
+
i || (S(n?.from ? p(n.from, t, { locale: o }) : ""), P(n?.to ? p(n.to, t, { locale: o }) : ""), D(n));
|
|
42
|
+
}, [n, t, i, o]), d.useEffect(() => {
|
|
43
|
+
i && (D(n), S(n?.from ? p(n.from, t, { locale: o }) : ""), P(n?.to ? p(n.to, t, { locale: o }) : ""), A(n?.from || /* @__PURE__ */ new Date()));
|
|
44
44
|
}, [i, n, t, o]);
|
|
45
45
|
const ce = (e) => {
|
|
46
|
-
|
|
46
|
+
D(e), e?.from && S(p(e.from, t, { locale: o })), e?.to && P(p(e.to, t, { locale: o })), h || e?.from && e?.to && e.from.getTime() !== e.to.getTime() && (f?.(e), w(!1));
|
|
47
47
|
}, ae = (e) => {
|
|
48
|
-
let
|
|
49
|
-
|
|
48
|
+
let r = e !== void 0 ? e : I;
|
|
49
|
+
r?.from && !r.to && (r = { from: r.from, to: r.from }), f?.(r), w(!1);
|
|
50
50
|
}, K = () => {
|
|
51
|
-
|
|
51
|
+
D(n), S(n?.from ? p(n.from, t, { locale: o }) : ""), P(n?.to ? p(n.to, t, { locale: o }) : ""), w(!1);
|
|
52
52
|
}, L = () => {
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
const
|
|
56
|
-
if (
|
|
53
|
+
D(void 0), S(""), P(""), f?.(void 0), h || w(!1);
|
|
54
|
+
}, fe = (e) => {
|
|
55
|
+
const r = e.target.value, c = Q(r, t, k);
|
|
56
|
+
if (S(c), c === "") {
|
|
57
57
|
const l = { from: void 0, to: I?.to };
|
|
58
|
-
|
|
58
|
+
D(l), h || f?.(l);
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
61
|
-
const
|
|
62
|
-
if (
|
|
63
|
-
const l = { from:
|
|
64
|
-
|
|
61
|
+
const s = b(c, t, /* @__PURE__ */ new Date(), { locale: o });
|
|
62
|
+
if (y(s) && c.length === t.length) {
|
|
63
|
+
const l = { from: s, to: I?.to };
|
|
64
|
+
D(l), A(s), h || f?.(l);
|
|
65
65
|
}
|
|
66
|
-
},
|
|
67
|
-
const
|
|
68
|
-
if (
|
|
66
|
+
}, de = (e) => {
|
|
67
|
+
const r = e.target.value, c = Q(r, t, v);
|
|
68
|
+
if (P(c), c === "") {
|
|
69
69
|
const l = { from: I?.from, to: void 0 };
|
|
70
|
-
|
|
70
|
+
D(l), h || f?.(l);
|
|
71
71
|
return;
|
|
72
72
|
}
|
|
73
|
-
const
|
|
74
|
-
if (
|
|
75
|
-
const l = { from: I?.from, to:
|
|
76
|
-
|
|
73
|
+
const s = b(c, t, /* @__PURE__ */ new Date(), { locale: o });
|
|
74
|
+
if (y(s) && c.length === t.length) {
|
|
75
|
+
const l = { from: I?.from, to: s };
|
|
76
|
+
D(l), s && A(s), h || f?.(l);
|
|
77
77
|
}
|
|
78
78
|
}, G = () => {
|
|
79
79
|
if (i) return;
|
|
80
|
-
const e = E(
|
|
81
|
-
|
|
82
|
-
}, pe = n?.from ? p(n.from, t, { locale: o }) : "", me = n?.to ? p(n.to, t, { locale: o }) : "", ue =
|
|
83
|
-
return /* @__PURE__ */
|
|
84
|
-
/* @__PURE__ */
|
|
85
|
-
B && /* @__PURE__ */
|
|
80
|
+
const e = E(k, t), r = E(v, t), c = b(e, t, /* @__PURE__ */ new Date(), { locale: o }), s = b(r, t, /* @__PURE__ */ new Date(), { locale: o }), l = y(c) && e.length === t.length, g = y(s) && r.length === t.length;
|
|
81
|
+
k && !l ? S(n?.from ? p(n.from, t, { locale: o }) : "") : l && S(e), v && !g ? P(n?.to ? p(n.to, t, { locale: o }) : "") : g && P(r), l && g && !h ? f?.({ from: c, to: s }) : l && !h ? f?.({ from: c, to: n?.to }) : g && !h && f?.({ from: n?.from, to: s });
|
|
82
|
+
}, pe = n?.from ? p(n.from, t, { locale: o }) : "", me = n?.to ? p(n.to, t, { locale: o }) : "", ue = k !== pe, xe = v !== me, he = k.length === t.length && !y(b(k, t, /* @__PURE__ */ new Date(), { locale: o })), ge = v.length === t.length && !y(b(v, t, /* @__PURE__ */ new Date(), { locale: o }));
|
|
83
|
+
return /* @__PURE__ */ u("div", { className: "flex w-full min-w-[240px] flex-col gap-[6px]", "data-component": "date-range-picker", "data-disabled": m || void 0, children: [
|
|
84
|
+
/* @__PURE__ */ u("div", { className: "flex flex-col gap-[6px]", children: [
|
|
85
|
+
B && /* @__PURE__ */ u(
|
|
86
86
|
"label",
|
|
87
87
|
{
|
|
88
|
-
className:
|
|
88
|
+
className: x(
|
|
89
89
|
"text-xs font-medium leading-[18px] text-content-tertiary",
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
m && "opacity-70",
|
|
91
|
+
N && "text-destructive"
|
|
92
92
|
),
|
|
93
93
|
children: [
|
|
94
94
|
B,
|
|
@@ -97,51 +97,53 @@ const Pe = f.forwardRef(
|
|
|
97
97
|
]
|
|
98
98
|
}
|
|
99
99
|
),
|
|
100
|
-
/* @__PURE__ */
|
|
100
|
+
/* @__PURE__ */ u(
|
|
101
101
|
"div",
|
|
102
102
|
{
|
|
103
|
-
className:
|
|
103
|
+
className: x(
|
|
104
104
|
"w-full",
|
|
105
105
|
V && j === "absolute" && "relative"
|
|
106
106
|
),
|
|
107
107
|
children: [
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
|
|
108
|
+
/* @__PURE__ */ u(we, { open: m ? !1 : i, onOpenChange: (e) => {
|
|
109
|
+
m || w(e);
|
|
110
|
+
}, children: [
|
|
111
|
+
/* @__PURE__ */ a(De, { asChild: !0, children: /* @__PURE__ */ u(
|
|
110
112
|
"div",
|
|
111
113
|
{
|
|
112
114
|
"data-state": i ? "open" : "closed",
|
|
113
|
-
className:
|
|
115
|
+
className: x(
|
|
114
116
|
"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",
|
|
115
|
-
|
|
117
|
+
N ? "border-destructive hover:border-destructive" : "border-field",
|
|
116
118
|
O === "sm" ? "h-6" : O === "md" ? "h-[28px]" : "h-8",
|
|
117
|
-
|
|
119
|
+
m && "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
|
|
118
120
|
"cursor-pointer",
|
|
119
121
|
oe
|
|
120
122
|
),
|
|
121
123
|
children: [
|
|
122
|
-
/* @__PURE__ */
|
|
124
|
+
/* @__PURE__ */ u("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
|
|
123
125
|
/* @__PURE__ */ a(
|
|
124
126
|
"input",
|
|
125
127
|
{
|
|
126
128
|
ref: q,
|
|
127
129
|
type: "text",
|
|
128
|
-
value:
|
|
129
|
-
onChange:
|
|
130
|
+
value: k,
|
|
131
|
+
onChange: fe,
|
|
130
132
|
onBlur: G,
|
|
131
133
|
onClick: (e) => i && e.stopPropagation(),
|
|
132
134
|
onKeyDown: (e) => {
|
|
133
135
|
if (e.key === "Enter" && !i) {
|
|
134
136
|
e.preventDefault();
|
|
135
|
-
const
|
|
136
|
-
|
|
137
|
+
const r = E(k, t), c = E(v, t), s = b(r, t, /* @__PURE__ */ new Date(), { locale: o }), l = b(c, t, /* @__PURE__ */ new Date(), { locale: o }), g = y(s) && r.length === t.length, M = y(l) && c.length === t.length;
|
|
138
|
+
g && M ? f?.({ from: s, to: l }) : g ? f?.({ from: s, to: n?.to }) : M && f?.({ from: n?.from, to: l });
|
|
137
139
|
}
|
|
138
|
-
e.key === "ArrowDown" && !i && (e.preventDefault(), C.current = !0,
|
|
140
|
+
e.key === "ArrowDown" && !i && !m && (e.preventDefault(), C.current = !0, w(!0)), e.key === "Escape" && i && (e.preventDefault(), K());
|
|
139
141
|
},
|
|
140
142
|
placeholder: i ? t : H,
|
|
141
|
-
disabled: !!
|
|
143
|
+
disabled: !!m,
|
|
142
144
|
"aria-label": H,
|
|
143
145
|
"data-field": "start",
|
|
144
|
-
className:
|
|
146
|
+
className: x(
|
|
145
147
|
"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",
|
|
146
148
|
he ? "text-destructive" : ue ? "text-content-muted" : ""
|
|
147
149
|
),
|
|
@@ -151,33 +153,33 @@ const Pe = f.forwardRef(
|
|
|
151
153
|
/* @__PURE__ */ a(
|
|
152
154
|
"input",
|
|
153
155
|
{
|
|
154
|
-
ref:
|
|
156
|
+
ref: se,
|
|
155
157
|
type: "text",
|
|
156
|
-
value:
|
|
157
|
-
onChange:
|
|
158
|
+
value: v,
|
|
159
|
+
onChange: de,
|
|
158
160
|
onBlur: G,
|
|
159
161
|
onClick: (e) => i && e.stopPropagation(),
|
|
160
162
|
onKeyDown: (e) => {
|
|
161
163
|
if (e.key === "Enter" && !i) {
|
|
162
164
|
e.preventDefault();
|
|
163
|
-
const
|
|
164
|
-
|
|
165
|
+
const r = E(k, t), c = E(v, t), s = b(r, t, /* @__PURE__ */ new Date(), { locale: o }), l = b(c, t, /* @__PURE__ */ new Date(), { locale: o }), g = y(s) && r.length === t.length, M = y(l) && c.length === t.length;
|
|
166
|
+
g && M ? f?.({ from: s, to: l }) : g ? f?.({ from: s, to: n?.to }) : M && f?.({ from: n?.from, to: l });
|
|
165
167
|
}
|
|
166
|
-
e.key === "ArrowDown" && !i && (e.preventDefault(), C.current = !0,
|
|
168
|
+
e.key === "ArrowDown" && !i && !m && (e.preventDefault(), C.current = !0, w(!0)), e.key === "Escape" && i && (e.preventDefault(), K());
|
|
167
169
|
},
|
|
168
170
|
placeholder: i ? t : X,
|
|
169
|
-
disabled: !!
|
|
171
|
+
disabled: !!m,
|
|
170
172
|
"aria-label": X,
|
|
171
173
|
"data-field": "end",
|
|
172
|
-
className:
|
|
174
|
+
className: x(
|
|
173
175
|
"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",
|
|
174
176
|
ge ? "text-destructive" : xe ? "text-content-muted" : ""
|
|
175
177
|
)
|
|
176
178
|
}
|
|
177
179
|
)
|
|
178
180
|
] }),
|
|
179
|
-
/* @__PURE__ */
|
|
180
|
-
n?.from && !
|
|
181
|
+
/* @__PURE__ */ u("div", { className: "flex items-center gap-1 shrink-0", children: [
|
|
182
|
+
n?.from && !m && /* @__PURE__ */ u(U, { children: [
|
|
181
183
|
/* @__PURE__ */ a(W, { asChild: !0, children: /* @__PURE__ */ a(
|
|
182
184
|
"button",
|
|
183
185
|
{
|
|
@@ -191,17 +193,17 @@ const Pe = f.forwardRef(
|
|
|
191
193
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), L());
|
|
192
194
|
},
|
|
193
195
|
className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer",
|
|
194
|
-
children: /* @__PURE__ */ a(
|
|
196
|
+
children: /* @__PURE__ */ a(ye, { className: "h-4 w-4 hover:text-content text-content-muted" })
|
|
195
197
|
}
|
|
196
198
|
) }),
|
|
197
199
|
/* @__PURE__ */ a(Y, { variant: "tertiary", side: "top", children: R("calendar.clear") })
|
|
198
200
|
] }),
|
|
199
|
-
/* @__PURE__ */
|
|
201
|
+
/* @__PURE__ */ u(U, { children: [
|
|
200
202
|
/* @__PURE__ */ a(W, { asChild: !0, children: /* @__PURE__ */ a("button", { type: "button", tabIndex: 0, "aria-label": R("datePicker.selectMonthRange"), onClick: (e) => {
|
|
201
|
-
e.stopPropagation(),
|
|
203
|
+
e.stopPropagation(), m || w(!i);
|
|
202
204
|
}, onKeyDown: (e) => {
|
|
203
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), C.current = !0,
|
|
204
|
-
}, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ a(
|
|
205
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), m || (C.current = !0, w(!i)));
|
|
206
|
+
}, className: "inline-flex items-center justify-center bg-transparent border-none p-0 cursor-pointer", children: /* @__PURE__ */ a(be, { className: "h-4 w-4 text-secondary-foreground" }) }) }),
|
|
205
207
|
/* @__PURE__ */ a(Y, { variant: "tertiary", side: "top", children: R("datePicker.selectMonthRange") })
|
|
206
208
|
] })
|
|
207
209
|
] })
|
|
@@ -227,7 +229,7 @@ const Pe = f.forwardRef(
|
|
|
227
229
|
disabled: { before: _, after: F },
|
|
228
230
|
startMonth: ee,
|
|
229
231
|
endMonth: te,
|
|
230
|
-
showFooter:
|
|
232
|
+
showFooter: h,
|
|
231
233
|
onApply: ae,
|
|
232
234
|
onCancel: K,
|
|
233
235
|
onClear: L,
|
|
@@ -238,23 +240,23 @@ const Pe = f.forwardRef(
|
|
|
238
240
|
}
|
|
239
241
|
)
|
|
240
242
|
] }),
|
|
241
|
-
V && j === "absolute" && /* @__PURE__ */
|
|
243
|
+
V && j === "absolute" && /* @__PURE__ */ u("div", { className: x("absolute left-0 top-full z-10 mt-1 flex min-w-0 max-w-full items-center gap-[6px]", N && "text-destructive"), children: [
|
|
242
244
|
/* @__PURE__ */ a(
|
|
243
245
|
J,
|
|
244
246
|
{
|
|
245
247
|
size: "xs",
|
|
246
|
-
className:
|
|
248
|
+
className: x(
|
|
247
249
|
"shrink-0",
|
|
248
|
-
|
|
250
|
+
N ? "text-destructive" : "text-content-muted"
|
|
249
251
|
)
|
|
250
252
|
}
|
|
251
253
|
),
|
|
252
254
|
/* @__PURE__ */ a(
|
|
253
255
|
"p",
|
|
254
256
|
{
|
|
255
|
-
className:
|
|
257
|
+
className: x(
|
|
256
258
|
"min-w-0 text-[12px] font-medium leading-[18px] text-navigation-muted",
|
|
257
|
-
|
|
259
|
+
N && "text-destructive"
|
|
258
260
|
),
|
|
259
261
|
children: V
|
|
260
262
|
}
|
|
@@ -264,23 +266,23 @@ const Pe = f.forwardRef(
|
|
|
264
266
|
}
|
|
265
267
|
)
|
|
266
268
|
] }),
|
|
267
|
-
V && j === "flow" && /* @__PURE__ */
|
|
269
|
+
V && j === "flow" && /* @__PURE__ */ u("div", { className: x("flex items-center gap-[6px]", N && "text-destructive"), children: [
|
|
268
270
|
/* @__PURE__ */ a(
|
|
269
271
|
J,
|
|
270
272
|
{
|
|
271
273
|
size: "xs",
|
|
272
|
-
className:
|
|
274
|
+
className: x(
|
|
273
275
|
"shrink-0",
|
|
274
|
-
|
|
276
|
+
N ? "text-destructive" : "text-content-muted"
|
|
275
277
|
)
|
|
276
278
|
}
|
|
277
279
|
),
|
|
278
280
|
/* @__PURE__ */ a(
|
|
279
281
|
"p",
|
|
280
282
|
{
|
|
281
|
-
className:
|
|
283
|
+
className: x(
|
|
282
284
|
"text-[12px] font-medium leading-[18px] text-navigation-muted",
|
|
283
|
-
|
|
285
|
+
N && "text-destructive"
|
|
284
286
|
),
|
|
285
287
|
children: V
|
|
286
288
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as g, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import * as o from "react";
|
|
3
|
-
import { X as
|
|
4
|
-
import { CalendarMonth as
|
|
5
|
-
import { isValid as
|
|
6
|
-
import { cn as
|
|
7
|
-
import { Input as
|
|
8
|
-
import { Popover as
|
|
3
|
+
import { X as L } from "lucide-react";
|
|
4
|
+
import { CalendarMonth as Q } from "../../../icons/index.js";
|
|
5
|
+
import { isValid as C, parse as P } from "date-fns";
|
|
6
|
+
import { cn as U, padValidDateString as W, maskDate as Z } from "../../../lib/utils.js";
|
|
7
|
+
import { Input as _ } from "../input.js";
|
|
8
|
+
import { Popover as b, PopoverTrigger as F, PopoverContent as v } from "../popover.js";
|
|
9
9
|
import { Calendar as tt } from "../calendar.js";
|
|
10
10
|
import { Tooltip as I, TooltipTrigger as T, TooltipContent as N } from "../tooltip.js";
|
|
11
11
|
import { useImpactNovaI18n as et } from "../../../i18n/ImpactNovaI18nContext.js";
|
|
@@ -18,69 +18,71 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
|
|
|
18
18
|
maxDate: R,
|
|
19
19
|
startMonth: O,
|
|
20
20
|
endMonth: Y,
|
|
21
|
-
showFooter:
|
|
22
|
-
disabled:
|
|
21
|
+
showFooter: p = !0,
|
|
22
|
+
disabled: m,
|
|
23
23
|
className: j,
|
|
24
24
|
...B
|
|
25
25
|
}, E) => {
|
|
26
|
-
const { t:
|
|
26
|
+
const { t: y } = et(), $ = V ?? y("datePicker.selectMonth"), w = o.useRef(null);
|
|
27
27
|
o.useRef(null), o.useImperativeHandle(E, () => w.current);
|
|
28
|
-
const [r,
|
|
28
|
+
const [r, h] = o.useState(!1), [S, a] = o.useState(t), [l, i] = o.useState(t ? c(t) : ""), [H, u] = o.useState(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date());
|
|
29
29
|
o.useEffect(() => {
|
|
30
30
|
r || (i(t ? c(t) : ""), a(t));
|
|
31
31
|
}, [r, t]), o.useEffect(() => {
|
|
32
|
-
r && (a(t),
|
|
32
|
+
r && (a(t), u(t ? new Date(t.year, t.month) : /* @__PURE__ */ new Date()), i(t ? c(t) : ""));
|
|
33
33
|
}, [r, t]);
|
|
34
|
-
const
|
|
35
|
-
a(e), e && i(c(e)),
|
|
36
|
-
},
|
|
37
|
-
s?.(e !== void 0 ? e : S),
|
|
38
|
-
},
|
|
39
|
-
a(t), i(t ? c(t) : ""),
|
|
34
|
+
const X = (e) => {
|
|
35
|
+
a(e), e && i(c(e)), p || (s?.(e), h(!1));
|
|
36
|
+
}, q = (e) => {
|
|
37
|
+
s?.(e !== void 0 ? e : S), h(!1);
|
|
38
|
+
}, z = () => {
|
|
39
|
+
a(t), i(t ? c(t) : ""), h(!1);
|
|
40
40
|
}, k = () => {
|
|
41
|
-
a(void 0), i(""), s?.(void 0),
|
|
42
|
-
},
|
|
43
|
-
const
|
|
44
|
-
if (i(
|
|
45
|
-
a(void 0),
|
|
41
|
+
a(void 0), i(""), s?.(void 0), p || h(!1);
|
|
42
|
+
}, G = (e) => {
|
|
43
|
+
const d = e.target.value, f = Z(d, "MM/yyyy", l);
|
|
44
|
+
if (i(f), f === "") {
|
|
45
|
+
a(void 0), p || s?.(void 0);
|
|
46
46
|
return;
|
|
47
47
|
}
|
|
48
|
-
const
|
|
49
|
-
if (
|
|
50
|
-
const x = { month:
|
|
51
|
-
a(x),
|
|
48
|
+
const M = P(f, "MM/yyyy", /* @__PURE__ */ new Date());
|
|
49
|
+
if (C(M) && f.length === 7) {
|
|
50
|
+
const x = { month: M.getMonth(), year: M.getFullYear() };
|
|
51
|
+
a(x), u(M), p || s?.(x);
|
|
52
52
|
}
|
|
53
|
-
},
|
|
53
|
+
}, J = () => {
|
|
54
54
|
if (r) return;
|
|
55
|
-
const e =
|
|
56
|
-
if (!
|
|
55
|
+
const e = W(l, "MM/yyyy"), d = P(e, "MM/yyyy", /* @__PURE__ */ new Date());
|
|
56
|
+
if (!C(d) || e.length !== 7)
|
|
57
57
|
i(t ? c(t) : ""), a(t);
|
|
58
|
-
else if (i(e), !
|
|
59
|
-
const
|
|
60
|
-
s?.(
|
|
58
|
+
else if (i(e), !p) {
|
|
59
|
+
const f = { month: d.getMonth(), year: d.getFullYear() };
|
|
60
|
+
s?.(f);
|
|
61
61
|
}
|
|
62
|
-
}, D = (t ? c(t) : "") !== l,
|
|
63
|
-
return /* @__PURE__ */
|
|
62
|
+
}, D = (t ? c(t) : "") !== l, K = l.length === 7 && !C(P(l, "MM/yyyy", /* @__PURE__ */ new Date()));
|
|
63
|
+
return /* @__PURE__ */ g(b, { open: m ? !1 : r, onOpenChange: (e) => {
|
|
64
|
+
m || h(e);
|
|
65
|
+
}, children: [
|
|
64
66
|
/* @__PURE__ */ n(F, { asChild: !0, children: /* @__PURE__ */ n("div", { "data-component": "month-picker", "data-state": r ? "open" : "closed", "data-pending": D || void 0, children: /* @__PURE__ */ n(
|
|
65
|
-
|
|
67
|
+
_,
|
|
66
68
|
{
|
|
67
69
|
ref: w,
|
|
68
70
|
value: l,
|
|
69
|
-
onChange:
|
|
70
|
-
onBlur:
|
|
71
|
+
onChange: G,
|
|
72
|
+
onBlur: J,
|
|
71
73
|
onClick: (e) => r && e.stopPropagation(),
|
|
72
|
-
placeholder: r ?
|
|
73
|
-
disabled:
|
|
74
|
+
placeholder: r ? y("datePicker.monthYearFormat") : $,
|
|
75
|
+
disabled: m,
|
|
74
76
|
"data-form-control": "input",
|
|
75
|
-
className:
|
|
77
|
+
className: U(
|
|
76
78
|
"cursor-pointer",
|
|
77
|
-
|
|
79
|
+
K ? "text-destructive" : D ? "text-content-muted" : "",
|
|
78
80
|
j
|
|
79
81
|
),
|
|
80
|
-
suffix: /* @__PURE__ */
|
|
81
|
-
t && !
|
|
82
|
+
suffix: /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
|
|
83
|
+
t && !m && /* @__PURE__ */ g(I, { children: [
|
|
82
84
|
/* @__PURE__ */ n(T, { asChild: !0, children: /* @__PURE__ */ n(
|
|
83
|
-
|
|
85
|
+
L,
|
|
84
86
|
{
|
|
85
87
|
className: "h-4 w-4 cursor-pointer hover:text-content",
|
|
86
88
|
onClick: (e) => {
|
|
@@ -88,11 +90,11 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
|
|
|
88
90
|
}
|
|
89
91
|
}
|
|
90
92
|
) }),
|
|
91
|
-
/* @__PURE__ */ n(N, { variant: "tertiary", side: "top", children:
|
|
93
|
+
/* @__PURE__ */ n(N, { variant: "tertiary", side: "top", children: y("calendar.clear") })
|
|
92
94
|
] }),
|
|
93
|
-
/* @__PURE__ */
|
|
94
|
-
/* @__PURE__ */ n(T, { asChild: !0, children: /* @__PURE__ */ n(
|
|
95
|
-
/* @__PURE__ */ n(N, { variant: "tertiary", side: "top", children:
|
|
95
|
+
/* @__PURE__ */ g(I, { children: [
|
|
96
|
+
/* @__PURE__ */ n(T, { asChild: !0, children: /* @__PURE__ */ n(Q, { className: "h-4 w-4 text-secondary-foreground" }) }),
|
|
97
|
+
/* @__PURE__ */ n(N, { variant: "tertiary", side: "top", children: y("datePicker.selectMonth") })
|
|
96
98
|
] })
|
|
97
99
|
] }),
|
|
98
100
|
...B
|
|
@@ -110,15 +112,15 @@ const c = (t) => `${(t.month + 1).toString().padStart(2, "0")}/${t.year}`, nt =
|
|
|
110
112
|
pickerType: "month",
|
|
111
113
|
monthMode: "single",
|
|
112
114
|
selectedMonths: S,
|
|
113
|
-
onMonthSelect:
|
|
114
|
-
month:
|
|
115
|
-
onMonthChange:
|
|
115
|
+
onMonthSelect: X,
|
|
116
|
+
month: H,
|
|
117
|
+
onMonthChange: u,
|
|
116
118
|
disabled: { before: A, after: R },
|
|
117
119
|
startMonth: O,
|
|
118
120
|
endMonth: Y,
|
|
119
|
-
showFooter:
|
|
120
|
-
onApply:
|
|
121
|
-
onCancel:
|
|
121
|
+
showFooter: p,
|
|
122
|
+
onApply: q,
|
|
123
|
+
onCancel: z,
|
|
122
124
|
onClear: k
|
|
123
125
|
}
|
|
124
126
|
)
|