@boxcustodia/library 2.0.0-alpha.20 → 2.0.0-alpha.21
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/date-picker/date-input.cjs.js +1 -1
- package/dist/components/date-picker/date-input.es.js +20 -21
- package/dist/components/date-picker/date-picker.cjs.js +1 -1
- package/dist/components/date-picker/date-picker.es.js +31 -34
- package/package.json +1 -1
- package/src/components/date-picker/date-input.tsx +2 -3
- package/src/components/date-picker/date-picker.test.tsx +3 -3
- package/src/components/date-picker/date-picker.tsx +1 -4
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),B=require("@radix-ui/react-use-controllable-state"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),B=require("@radix-ui/react-use-controllable-state"),s=require("date-fns"),M=require("lucide-react"),O=require("./use-date-input.cjs.js"),k=require("./use-date-input-popover.cjs.js"),H=require("./use-hidden-field-value.cjs.js"),i=require("../popover/popover.cjs.js"),f=require("../field/field.cjs.js"),E=require("../calendar/calendar.cjs.js"),U=require("../../lib/cn.cjs.js"),z=require("../input/input.cjs.js"),A=g=>{const{placeholder:u,value:m,onValueChange:v,defaultValue:y,autoComplete:b,className:x,disabledDate:n,renderFooter:D,disabled:o,onBlur:C,required:j,...q}=g,[a,d]=B.useControllableState({prop:m,onChange:e=>v?.(e??null),defaultProp:y??null}),I=a?s.format(a,"yyyy-MM-dd"):"",P=H.useHiddenFieldValue(I),{inputValue:w,handleChange:N,handleBlur:S,handleKeyDown:F,clear:K,setFromExternalDate:r}=O.useDateInput({date:a??null,onDateChange:e=>d(e),disabledDate:n}),{open:R,setOpen:c,handleInputKeyDown:T,inputRef:l}=k.useDateInputPopover({disabled:o}),V=e=>{F(e),T(e)},p=D?.({value:a??null,clear:()=>{r(null),K()},selectToday:()=>{const e=new Date;n?.(e)||r(e)},setValue:e=>{const h=e&&s.isDate(e)?e:null;d(h),r(h)}});return t.jsxs(i.PopoverRoot,{"data-slot":"date-input",open:R,onOpenChange:c,children:[t.jsxs("div",{className:U.cn(z.inputBaseClasses,"relative flex items-center gap-2 h-8","has-[:focus-visible]:border-ring","aria-invalid:border-error has-[:focus-visible]:aria-invalid:ring-error/20","has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:ring-error/20","has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",!a&&"text-muted-foreground",x,"field-error"),"data-slot":"date-input-trigger",onClick:e=>{e.target===e.currentTarget&&l.current?.focus()},children:[t.jsx(f.FieldControl,{render:t.jsx("input",{ref:P,type:"text",className:"sr-only",tabIndex:-1,"aria-hidden":"true",required:j,disabled:o,onFocus:()=>l.current?.focus()})}),t.jsx("input",{type:"text",value:w,onChange:N,onBlur:e=>{S(),C?.(e)},onKeyDown:V,placeholder:u??"dd/mm/aaaa",autoComplete:b??"off",disabled:o,className:"flex-1 min-w-0 bg-transparent outline-none text-start truncate pt-px","aria-label":u,ref:l,...q}),t.jsxs(i.PopoverTrigger,{type:"button",disabled:o,"data-slot":"date-input-calendar-trigger",className:"flex shrink-0 items-center justify-center text-muted-foreground hover:text-foreground",children:[t.jsx(M.CalendarIcon,{"data-slot":"date-input-icon"}),t.jsx("span",{className:"sr-only",children:"Seleccionar fecha"})]})]}),t.jsx(i.PopoverPopup,{className:"w-auto p-0",align:"start","data-slot":"date-input-content",children:t.jsxs(f.FieldRoot,{className:"contents",children:[t.jsx(E.Calendar,{className:"border-none",mode:"single",selected:a??void 0,onSelect:e=>{if(!e||!s.isDate(e)){r(null);return}n?.(e)||(r(e),c(!1))},disabled:n}),p&&t.jsx("div",{className:"p-2","data-slot":"date-input-footer",children:p})]})})]})};exports.DateInput=A;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as l, jsx as
|
|
2
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
3
3
|
import { useControllableState as j } from "@radix-ui/react-use-controllable-state";
|
|
4
4
|
import { format as k, isDate as m } from "date-fns";
|
|
5
5
|
import { CalendarIcon as M } from "lucide-react";
|
|
@@ -19,7 +19,7 @@ const ie = (f) => {
|
|
|
19
19
|
defaultValue: v,
|
|
20
20
|
autoComplete: y,
|
|
21
21
|
className: b,
|
|
22
|
-
disabledDate:
|
|
22
|
+
disabledDate: o,
|
|
23
23
|
renderFooter: C,
|
|
24
24
|
disabled: n,
|
|
25
25
|
onBlur: D,
|
|
@@ -35,11 +35,11 @@ const ie = (f) => {
|
|
|
35
35
|
handleBlur: K,
|
|
36
36
|
handleKeyDown: S,
|
|
37
37
|
clear: B,
|
|
38
|
-
setFromExternalDate:
|
|
38
|
+
setFromExternalDate: a
|
|
39
39
|
} = O({
|
|
40
40
|
date: r ?? null,
|
|
41
41
|
onDateChange: (e) => d(e),
|
|
42
|
-
disabledDate:
|
|
42
|
+
disabledDate: o
|
|
43
43
|
}), {
|
|
44
44
|
open: T,
|
|
45
45
|
setOpen: u,
|
|
@@ -50,15 +50,15 @@ const ie = (f) => {
|
|
|
50
50
|
}, c = C?.({
|
|
51
51
|
value: r ?? null,
|
|
52
52
|
clear: () => {
|
|
53
|
-
|
|
53
|
+
a(null), B();
|
|
54
54
|
},
|
|
55
55
|
selectToday: () => {
|
|
56
56
|
const e = /* @__PURE__ */ new Date();
|
|
57
|
-
|
|
57
|
+
o?.(e) || a(e);
|
|
58
58
|
},
|
|
59
59
|
setValue: (e) => {
|
|
60
60
|
const p = e && m(e) ? e : null;
|
|
61
|
-
d(p),
|
|
61
|
+
d(p), a(p);
|
|
62
62
|
}
|
|
63
63
|
});
|
|
64
64
|
return /* @__PURE__ */ l(H, { "data-slot": "date-input", open: T, onOpenChange: u, children: [
|
|
@@ -70,22 +70,21 @@ const ie = (f) => {
|
|
|
70
70
|
"relative flex items-center gap-2 h-8",
|
|
71
71
|
"has-[:focus-visible]:border-ring",
|
|
72
72
|
"aria-invalid:border-error has-[:focus-visible]:aria-invalid:ring-error/20",
|
|
73
|
-
// Re-assert the error border on focus: `has-[:focus-visible]:border-ring`
|
|
74
|
-
// ties on specificity and would otherwise wash the red out while typing.
|
|
75
73
|
"has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:ring-error/20",
|
|
76
74
|
"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
|
|
77
75
|
!r && "text-muted-foreground",
|
|
78
76
|
b,
|
|
79
77
|
"field-error"
|
|
80
78
|
),
|
|
79
|
+
"data-slot": "date-input-trigger",
|
|
81
80
|
onClick: (e) => {
|
|
82
81
|
e.target === e.currentTarget && s.current?.focus();
|
|
83
82
|
},
|
|
84
83
|
children: [
|
|
85
|
-
/* @__PURE__ */
|
|
84
|
+
/* @__PURE__ */ t(
|
|
86
85
|
G,
|
|
87
86
|
{
|
|
88
|
-
render: /* @__PURE__ */
|
|
87
|
+
render: /* @__PURE__ */ t(
|
|
89
88
|
"input",
|
|
90
89
|
{
|
|
91
90
|
ref: P,
|
|
@@ -100,7 +99,7 @@ const ie = (f) => {
|
|
|
100
99
|
)
|
|
101
100
|
}
|
|
102
101
|
),
|
|
103
|
-
/* @__PURE__ */
|
|
102
|
+
/* @__PURE__ */ t(
|
|
104
103
|
"input",
|
|
105
104
|
{
|
|
106
105
|
type: "text",
|
|
@@ -124,25 +123,25 @@ const ie = (f) => {
|
|
|
124
123
|
{
|
|
125
124
|
type: "button",
|
|
126
125
|
disabled: n,
|
|
127
|
-
"data-slot": "date-input-trigger",
|
|
126
|
+
"data-slot": "date-input-calendar-trigger",
|
|
128
127
|
className: "flex shrink-0 items-center justify-center text-muted-foreground hover:text-foreground",
|
|
129
128
|
children: [
|
|
130
|
-
/* @__PURE__ */
|
|
131
|
-
/* @__PURE__ */
|
|
129
|
+
/* @__PURE__ */ t(M, { "data-slot": "date-input-icon" }),
|
|
130
|
+
/* @__PURE__ */ t("span", { className: "sr-only", children: "Seleccionar fecha" })
|
|
132
131
|
]
|
|
133
132
|
}
|
|
134
133
|
)
|
|
135
134
|
]
|
|
136
135
|
}
|
|
137
136
|
),
|
|
138
|
-
/* @__PURE__ */
|
|
137
|
+
/* @__PURE__ */ t(
|
|
139
138
|
A,
|
|
140
139
|
{
|
|
141
140
|
className: "w-auto p-0",
|
|
142
141
|
align: "start",
|
|
143
142
|
"data-slot": "date-input-content",
|
|
144
143
|
children: /* @__PURE__ */ l(J, { className: "contents", children: [
|
|
145
|
-
/* @__PURE__ */
|
|
144
|
+
/* @__PURE__ */ t(
|
|
146
145
|
L,
|
|
147
146
|
{
|
|
148
147
|
className: "border-none",
|
|
@@ -150,15 +149,15 @@ const ie = (f) => {
|
|
|
150
149
|
selected: r ?? void 0,
|
|
151
150
|
onSelect: (e) => {
|
|
152
151
|
if (!e || !m(e)) {
|
|
153
|
-
|
|
152
|
+
a(null);
|
|
154
153
|
return;
|
|
155
154
|
}
|
|
156
|
-
|
|
155
|
+
o?.(e) || (a(e), u(!1));
|
|
157
156
|
},
|
|
158
|
-
disabled:
|
|
157
|
+
disabled: o
|
|
159
158
|
}
|
|
160
159
|
),
|
|
161
|
-
c && /* @__PURE__ */
|
|
160
|
+
c && /* @__PURE__ */ t("div", { className: "p-2", "data-slot": "date-input-footer", children: c })
|
|
162
161
|
] })
|
|
163
162
|
}
|
|
164
163
|
)
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@radix-ui/react-use-controllable-state"),q=require("lucide-react"),P=require("react"),b=require("./date-picker.utils.cjs.js"),y=require("./use-hidden-field-value.cjs.js"),V=require("../calendar/calendar.cjs.js"),h=require("../../lib/cn.cjs.js"),S=require("../popover/popover.cjs.js"),O=require("../input/input.cjs.js"),R=require("../field/field.cjs.js");function N(o){return o.mode==="range"?e.jsx(D,{...o}):o.mode==="multiple"?e.jsx(F,{...o}):e.jsx(T,{...o})}const k=({open:o,onOpenChange:u,displayText:f,hasValue:p,disabled:
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@radix-ui/react-use-controllable-state"),q=require("lucide-react"),P=require("react"),b=require("./date-picker.utils.cjs.js"),y=require("./use-hidden-field-value.cjs.js"),V=require("../calendar/calendar.cjs.js"),h=require("../../lib/cn.cjs.js"),S=require("../popover/popover.cjs.js"),O=require("../input/input.cjs.js"),R=require("../field/field.cjs.js");function N(o){return o.mode==="range"?e.jsx(D,{...o}):o.mode==="multiple"?e.jsx(F,{...o}):e.jsx(T,{...o})}const k=({open:o,onOpenChange:u,displayText:f,hasValue:p,disabled:g,className:s,classNames:c,children:m,footer:l,slot:i,formValue:v,required:d})=>{const r=P.useRef(null),a=y.useHiddenFieldValue(v);return e.jsxs(S.PopoverRoot,{"data-slot":i,open:o,onOpenChange:u,children:[e.jsxs(S.PopoverTrigger,{render:e.jsx("button",{ref:r,disabled:g,"data-slot":"date-picker-trigger",className:h.cn(O.inputBaseClasses,"inline-flex items-center gap-2 h-8 cursor-pointer text-left","focus-visible:border-ring","aria-invalid:border-error focus-visible:aria-invalid:ring-error/20","in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:ring-error/20","disabled:cursor-not-allowed disabled:opacity-50",!p&&"text-muted-foreground",s)}),children:[e.jsx("span",{className:"flex-1 truncate",children:f}),e.jsx(q.CalendarIcon,{"data-slot":"date-picker-icon",className:"shrink-0 text-muted-foreground"})]}),e.jsx(R.FieldControl,{render:e.jsx("input",{ref:a,type:"text",tabIndex:-1,"aria-hidden":"true",className:"sr-only",required:d,onFocus:()=>r.current?.focus()})}),e.jsx(S.PopoverPopup,{className:h.cn("w-auto p-0",c?.popup),align:"start","data-slot":`${i}-content`,children:e.jsxs(R.FieldRoot,{className:"contents",children:[m,l&&e.jsx("div",{className:h.cn("p-2",c?.footer),"data-slot":`${i}-footer`,children:l})]})})]})},T=({value:o,defaultValue:u,onValueChange:f,placeholder:p="Seleccionar fecha",disabled:g,disabledDate:s,renderFooter:c,className:m,classNames:l,required:i})=>{const[v,d]=P.useState(!1),[r,a]=C.useControllableState({prop:o,onChange:t=>f?.(t??null),defaultProp:u??null}),n={mode:"single",value:r??null,clear:()=>a(null),selectToday:()=>{const t=new Date;s?.(t)||a(t)},setValue:t=>a(t)};return e.jsx(k,{slot:"date-picker",open:v,onOpenChange:d,displayText:b.formatSingleDate(r,p),hasValue:!!r,disabled:g,className:m,classNames:l,footer:c?.(n),formValue:b.formatISODate(r),required:i,children:e.jsx(V.Calendar,{className:h.cn("border-none",l?.calendar),mode:"single",selected:r??void 0,onSelect:t=>{s&&t&&s(t)||(a(t??null),d(!1))},disabled:s})})},j={start:null,end:null},D=({value:o,defaultValue:u,onValueChange:f,placeholder:p="Seleccionar rango",disabled:g,disabledDate:s,renderFooter:c,className:m,classNames:l,required:i})=>{const[v,d]=P.useState(!1),[r,a]=C.useControllableState({prop:o,onChange:x=>f?.(x??j),defaultProp:u??j}),n=r??j,t={mode:"range",value:n,clear:()=>a(j),setValue:x=>a(x)};return e.jsx(k,{slot:"date-picker",open:v,onOpenChange:d,displayText:b.formatRangeDate(n.start||n.end?n:void 0,p),hasValue:!!(n.start||n.end),disabled:g,className:m,classNames:l,footer:c?.(t),formValue:b.formatRangeDate(n.start||n.end?n:void 0,""),required:i,children:e.jsx(V.Calendar,{className:h.cn("border-none",l?.calendar),mode:"range",selected:{from:n.start??void 0,to:n.end??void 0},onSelect:x=>{a({start:x?.from??null,end:x?.to??null})},disabled:s})})},F=({value:o,defaultValue:u,onValueChange:f,placeholder:p="Seleccionar fechas",disabled:g,disabledDate:s,renderFooter:c,className:m,classNames:l,required:i})=>{const[v,d]=P.useState(!1),[r,a]=C.useControllableState({prop:o,onChange:t=>f?.(t??[]),defaultProp:u??[]}),n={mode:"multiple",value:r??[],clear:()=>a([]),setValue:t=>a(t)};return e.jsx(k,{slot:"date-picker",open:v,onOpenChange:d,displayText:b.formatMultipleDates(r,p),hasValue:(r?.length??0)>0,disabled:g,className:m,classNames:l,footer:c?.(n),formValue:b.formatMultipleDates(r,""),required:i,children:e.jsx(V.Calendar,{className:h.cn("border-none",l?.calendar),mode:"multiple",selected:r??[],onSelect:t=>{a(t??[])},disabled:s})})};exports.DatePicker=N;
|
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
import { jsx as o, jsxs as V } from "react/jsx-runtime";
|
|
3
3
|
import { useControllableState as S } from "@radix-ui/react-use-controllable-state";
|
|
4
4
|
import { CalendarIcon as N } from "lucide-react";
|
|
5
|
-
import { useState as
|
|
5
|
+
import { useState as k, useRef as O } from "react";
|
|
6
6
|
import { formatRangeDate as y, formatMultipleDates as R, formatISODate as T, formatSingleDate as F } from "./date-picker.utils.es.js";
|
|
7
7
|
import { useHiddenFieldValue as I } from "./use-hidden-field-value.es.js";
|
|
8
|
-
import { Calendar as
|
|
8
|
+
import { Calendar as C } from "../calendar/calendar.es.js";
|
|
9
9
|
import { cn as b } from "../../lib/cn.es.js";
|
|
10
10
|
import { PopoverRoot as w, PopoverTrigger as D, PopoverPopup as M } from "../popover/popover.es.js";
|
|
11
11
|
import { inputBaseClasses as j } from "../input/input.es.js";
|
|
12
12
|
import { FieldControl as E, FieldRoot as $ } from "../field/field.es.js";
|
|
13
|
-
function X(
|
|
14
|
-
return
|
|
13
|
+
function X(n) {
|
|
14
|
+
return n.mode === "range" ? /* @__PURE__ */ o(B, { ...n }) : n.mode === "multiple" ? /* @__PURE__ */ o(G, { ...n }) : /* @__PURE__ */ o(A, { ...n });
|
|
15
15
|
}
|
|
16
16
|
const x = ({
|
|
17
|
-
open:
|
|
17
|
+
open: n,
|
|
18
18
|
onOpenChange: u,
|
|
19
19
|
displayText: f,
|
|
20
20
|
hasValue: p,
|
|
@@ -27,8 +27,8 @@ const x = ({
|
|
|
27
27
|
formValue: v,
|
|
28
28
|
required: c
|
|
29
29
|
}) => {
|
|
30
|
-
const r = O(null),
|
|
31
|
-
return /* @__PURE__ */ V(w, { "data-slot": s, open:
|
|
30
|
+
const r = O(null), a = I(v);
|
|
31
|
+
return /* @__PURE__ */ V(w, { "data-slot": s, open: n, onOpenChange: u, children: [
|
|
32
32
|
/* @__PURE__ */ V(
|
|
33
33
|
D,
|
|
34
34
|
{
|
|
@@ -37,15 +37,12 @@ const x = ({
|
|
|
37
37
|
{
|
|
38
38
|
ref: r,
|
|
39
39
|
disabled: m,
|
|
40
|
+
"data-slot": "date-picker-trigger",
|
|
40
41
|
className: b(
|
|
41
42
|
j,
|
|
42
43
|
"inline-flex items-center gap-2 h-8 cursor-pointer text-left",
|
|
43
44
|
"focus-visible:border-ring",
|
|
44
45
|
"aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
|
|
45
|
-
// Attribute selector (specificity 0,2,0) beats `border-input`;
|
|
46
|
-
// `group-data-[invalid]` ties and loses. Matches the OTP convention.
|
|
47
|
-
// The `focus-visible` variant re-asserts the error border so it is
|
|
48
|
-
// not washed out by `focus-visible:border-ring` while focused.
|
|
49
46
|
"in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:ring-error/20",
|
|
50
47
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
51
48
|
!p && "text-muted-foreground",
|
|
@@ -71,7 +68,7 @@ const x = ({
|
|
|
71
68
|
render: /* @__PURE__ */ o(
|
|
72
69
|
"input",
|
|
73
70
|
{
|
|
74
|
-
ref:
|
|
71
|
+
ref: a,
|
|
75
72
|
type: "text",
|
|
76
73
|
tabIndex: -1,
|
|
77
74
|
"aria-hidden": "true",
|
|
@@ -103,7 +100,7 @@ const x = ({
|
|
|
103
100
|
)
|
|
104
101
|
] });
|
|
105
102
|
}, A = ({
|
|
106
|
-
value:
|
|
103
|
+
value: n,
|
|
107
104
|
defaultValue: u,
|
|
108
105
|
onValueChange: f,
|
|
109
106
|
placeholder: p = "Seleccionar fecha",
|
|
@@ -114,19 +111,19 @@ const x = ({
|
|
|
114
111
|
classNames: l,
|
|
115
112
|
required: s
|
|
116
113
|
}) => {
|
|
117
|
-
const [v, c] =
|
|
118
|
-
prop:
|
|
114
|
+
const [v, c] = k(!1), [r, a] = S({
|
|
115
|
+
prop: n,
|
|
119
116
|
onChange: (e) => f?.(e ?? null),
|
|
120
117
|
defaultProp: u ?? null
|
|
121
118
|
}), t = {
|
|
122
119
|
mode: "single",
|
|
123
120
|
value: r ?? null,
|
|
124
|
-
clear: () =>
|
|
121
|
+
clear: () => a(null),
|
|
125
122
|
selectToday: () => {
|
|
126
123
|
const e = /* @__PURE__ */ new Date();
|
|
127
|
-
i?.(e) ||
|
|
124
|
+
i?.(e) || a(e);
|
|
128
125
|
},
|
|
129
|
-
setValue: (e) =>
|
|
126
|
+
setValue: (e) => a(e)
|
|
130
127
|
};
|
|
131
128
|
return /* @__PURE__ */ o(
|
|
132
129
|
x,
|
|
@@ -143,13 +140,13 @@ const x = ({
|
|
|
143
140
|
formValue: T(r),
|
|
144
141
|
required: s,
|
|
145
142
|
children: /* @__PURE__ */ o(
|
|
146
|
-
|
|
143
|
+
C,
|
|
147
144
|
{
|
|
148
145
|
className: b("border-none", l?.calendar),
|
|
149
146
|
mode: "single",
|
|
150
147
|
selected: r ?? void 0,
|
|
151
148
|
onSelect: (e) => {
|
|
152
|
-
i && e && i(e) || (
|
|
149
|
+
i && e && i(e) || (a(e ?? null), c(!1));
|
|
153
150
|
},
|
|
154
151
|
disabled: i
|
|
155
152
|
}
|
|
@@ -157,7 +154,7 @@ const x = ({
|
|
|
157
154
|
}
|
|
158
155
|
);
|
|
159
156
|
}, P = { start: null, end: null }, B = ({
|
|
160
|
-
value:
|
|
157
|
+
value: n,
|
|
161
158
|
defaultValue: u,
|
|
162
159
|
onValueChange: f,
|
|
163
160
|
placeholder: p = "Seleccionar rango",
|
|
@@ -168,15 +165,15 @@ const x = ({
|
|
|
168
165
|
classNames: l,
|
|
169
166
|
required: s
|
|
170
167
|
}) => {
|
|
171
|
-
const [v, c] =
|
|
172
|
-
prop:
|
|
168
|
+
const [v, c] = k(!1), [r, a] = S({
|
|
169
|
+
prop: n,
|
|
173
170
|
onChange: (h) => f?.(h ?? P),
|
|
174
171
|
defaultProp: u ?? P
|
|
175
172
|
}), t = r ?? P, e = {
|
|
176
173
|
mode: "range",
|
|
177
174
|
value: t,
|
|
178
|
-
clear: () =>
|
|
179
|
-
setValue: (h) =>
|
|
175
|
+
clear: () => a(P),
|
|
176
|
+
setValue: (h) => a(h)
|
|
180
177
|
};
|
|
181
178
|
return /* @__PURE__ */ o(
|
|
182
179
|
x,
|
|
@@ -199,7 +196,7 @@ const x = ({
|
|
|
199
196
|
),
|
|
200
197
|
required: s,
|
|
201
198
|
children: /* @__PURE__ */ o(
|
|
202
|
-
|
|
199
|
+
C,
|
|
203
200
|
{
|
|
204
201
|
className: b("border-none", l?.calendar),
|
|
205
202
|
mode: "range",
|
|
@@ -208,7 +205,7 @@ const x = ({
|
|
|
208
205
|
to: t.end ?? void 0
|
|
209
206
|
},
|
|
210
207
|
onSelect: (h) => {
|
|
211
|
-
|
|
208
|
+
a({ start: h?.from ?? null, end: h?.to ?? null });
|
|
212
209
|
},
|
|
213
210
|
disabled: i
|
|
214
211
|
}
|
|
@@ -216,7 +213,7 @@ const x = ({
|
|
|
216
213
|
}
|
|
217
214
|
);
|
|
218
215
|
}, G = ({
|
|
219
|
-
value:
|
|
216
|
+
value: n,
|
|
220
217
|
defaultValue: u,
|
|
221
218
|
onValueChange: f,
|
|
222
219
|
placeholder: p = "Seleccionar fechas",
|
|
@@ -227,15 +224,15 @@ const x = ({
|
|
|
227
224
|
classNames: l,
|
|
228
225
|
required: s
|
|
229
226
|
}) => {
|
|
230
|
-
const [v, c] =
|
|
231
|
-
prop:
|
|
227
|
+
const [v, c] = k(!1), [r, a] = S({
|
|
228
|
+
prop: n,
|
|
232
229
|
onChange: (e) => f?.(e ?? []),
|
|
233
230
|
defaultProp: u ?? []
|
|
234
231
|
}), t = {
|
|
235
232
|
mode: "multiple",
|
|
236
233
|
value: r ?? [],
|
|
237
|
-
clear: () =>
|
|
238
|
-
setValue: (e) =>
|
|
234
|
+
clear: () => a([]),
|
|
235
|
+
setValue: (e) => a(e)
|
|
239
236
|
};
|
|
240
237
|
return /* @__PURE__ */ o(
|
|
241
238
|
x,
|
|
@@ -252,13 +249,13 @@ const x = ({
|
|
|
252
249
|
formValue: R(r, ""),
|
|
253
250
|
required: s,
|
|
254
251
|
children: /* @__PURE__ */ o(
|
|
255
|
-
|
|
252
|
+
C,
|
|
256
253
|
{
|
|
257
254
|
className: b("border-none", l?.calendar),
|
|
258
255
|
mode: "multiple",
|
|
259
256
|
selected: r ?? [],
|
|
260
257
|
onSelect: (e) => {
|
|
261
|
-
|
|
258
|
+
a(e ?? []);
|
|
262
259
|
},
|
|
263
260
|
disabled: i
|
|
264
261
|
}
|
package/package.json
CHANGED
|
@@ -102,14 +102,13 @@ export const DateInput = (props: DateInputProps) => {
|
|
|
102
102
|
"relative flex items-center gap-2 h-8",
|
|
103
103
|
"has-[:focus-visible]:border-ring",
|
|
104
104
|
"aria-invalid:border-error has-[:focus-visible]:aria-invalid:ring-error/20",
|
|
105
|
-
// Re-assert the error border on focus: `has-[:focus-visible]:border-ring`
|
|
106
|
-
// ties on specificity and would otherwise wash the red out while typing.
|
|
107
105
|
"has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:ring-error/20",
|
|
108
106
|
"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
|
|
109
107
|
!selectedDate && "text-muted-foreground",
|
|
110
108
|
className,
|
|
111
109
|
"field-error",
|
|
112
110
|
)}
|
|
111
|
+
data-slot="date-input-trigger"
|
|
113
112
|
onClick={(e) => {
|
|
114
113
|
if (e.target === e.currentTarget) inputRef.current?.focus();
|
|
115
114
|
}}
|
|
@@ -154,7 +153,7 @@ export const DateInput = (props: DateInputProps) => {
|
|
|
154
153
|
<PopoverTrigger
|
|
155
154
|
type="button"
|
|
156
155
|
disabled={disabled}
|
|
157
|
-
data-slot="date-input-trigger"
|
|
156
|
+
data-slot="date-input-calendar-trigger"
|
|
158
157
|
className="flex shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
|
|
159
158
|
>
|
|
160
159
|
<CalendarIcon data-slot="date-input-icon" />
|
|
@@ -19,11 +19,11 @@ describe("DatePicker component", () => {
|
|
|
19
19
|
});
|
|
20
20
|
|
|
21
21
|
describe("data-slot", () => {
|
|
22
|
-
it("trigger has data-slot
|
|
22
|
+
it("trigger has data-slot date-picker-trigger", () => {
|
|
23
23
|
render(<DatePicker mode="single" />);
|
|
24
24
|
expect(screen.getByRole("button")).toHaveAttribute(
|
|
25
25
|
"data-slot",
|
|
26
|
-
"
|
|
26
|
+
"date-picker-trigger",
|
|
27
27
|
);
|
|
28
28
|
});
|
|
29
29
|
|
|
@@ -348,7 +348,7 @@ describe("DateInput component", () => {
|
|
|
348
348
|
it("disables the calendar trigger button", () => {
|
|
349
349
|
render(<DateInput name="date" disabled />);
|
|
350
350
|
expect(
|
|
351
|
-
document.querySelector('[data-slot="date-input-trigger"]'),
|
|
351
|
+
document.querySelector('[data-slot="date-input-calendar-trigger"]'),
|
|
352
352
|
).toBeDisabled();
|
|
353
353
|
});
|
|
354
354
|
});
|
|
@@ -79,15 +79,12 @@ const PickerShell = ({
|
|
|
79
79
|
<button
|
|
80
80
|
ref={triggerRef}
|
|
81
81
|
disabled={disabled}
|
|
82
|
+
data-slot="date-picker-trigger"
|
|
82
83
|
className={cn(
|
|
83
84
|
inputBaseClasses,
|
|
84
85
|
"inline-flex items-center gap-2 h-8 cursor-pointer text-left",
|
|
85
86
|
"focus-visible:border-ring",
|
|
86
87
|
"aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
|
|
87
|
-
// Attribute selector (specificity 0,2,0) beats `border-input`;
|
|
88
|
-
// `group-data-[invalid]` ties and loses. Matches the OTP convention.
|
|
89
|
-
// The `focus-visible` variant re-asserts the error border so it is
|
|
90
|
-
// not washed out by `focus-visible:border-ring` while focused.
|
|
91
88
|
"in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:ring-error/20",
|
|
92
89
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
93
90
|
!hasValue && "text-muted-foreground",
|