@lets-events/react 12.0.0 → 12.1.1
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/.turbo/turbo-build.log +10 -8
- package/CHANGELOG.md +12 -0
- package/dist/index.css +1067 -0
- package/dist/index.d.mts +21 -9
- package/dist/index.d.ts +21 -9
- package/dist/index.js +327 -168
- package/dist/index.mjs +324 -165
- package/package.json +1 -2
- package/src/components/Button/styledComponents.ts +1 -0
- package/src/components/Calendar/index.tsx +14 -7
- package/src/components/Calendar/styledComponents.ts +247 -206
- package/src/components/Drawer/index.tsx +76 -2
- package/src/components/FormFields/CalendarFormField.tsx +4 -1
- package/src/components/FormFields/IdentityDocumentNumberFormField.tsx +4 -7
- package/src/components/FormFields/MultiSelectFormField.tsx +3 -0
- package/src/components/FormFields/TimePickerFormField.tsx +1 -1
- package/src/components/MultiSelect.tsx +100 -55
- package/src/components/RichEditor/QuillComponent.tsx +1 -3
- package/src/components/TimePicker.tsx +32 -8
- package/src/hooks/useOnClickOutside.tsx +25 -3
package/dist/index.mjs
CHANGED
|
@@ -1683,6 +1683,7 @@ var ButtonStyled = styled(ButtonRadix, {
|
|
|
1683
1683
|
color: "$$buttonColor",
|
|
1684
1684
|
width: "100%",
|
|
1685
1685
|
borderRadius: 0,
|
|
1686
|
+
whiteSpace: "nowrap",
|
|
1686
1687
|
"&:hover": {
|
|
1687
1688
|
backgroundColor: "$dark100"
|
|
1688
1689
|
}
|
|
@@ -3660,10 +3661,24 @@ import { useEffect as useEffect2 } from "react";
|
|
|
3660
3661
|
function useOnClickOutside(ref, handler) {
|
|
3661
3662
|
useEffect2(() => {
|
|
3662
3663
|
const listener = (event) => {
|
|
3663
|
-
if (!ref.current ||
|
|
3664
|
+
if (!(ref == null ? void 0 : ref.current) || !event.target) {
|
|
3664
3665
|
return;
|
|
3665
3666
|
}
|
|
3666
|
-
|
|
3667
|
+
const target = event.target;
|
|
3668
|
+
const currentTarget = event.currentTarget;
|
|
3669
|
+
if (ref.current.contains(target) || ref.current.contains(currentTarget)) {
|
|
3670
|
+
return;
|
|
3671
|
+
}
|
|
3672
|
+
if (target.tagName === "HTML" || target.tagName === "BODY") {
|
|
3673
|
+
const elementAtPoint = document.elementFromPoint(
|
|
3674
|
+
event.clientX,
|
|
3675
|
+
event.clientY
|
|
3676
|
+
);
|
|
3677
|
+
if (elementAtPoint && ref.current.contains(elementAtPoint)) {
|
|
3678
|
+
return;
|
|
3679
|
+
}
|
|
3680
|
+
}
|
|
3681
|
+
handler(event);
|
|
3667
3682
|
};
|
|
3668
3683
|
document.addEventListener("mousedown", listener);
|
|
3669
3684
|
document.addEventListener("touchstart", listener);
|
|
@@ -7589,7 +7604,17 @@ var CalendarStyled = styled("div", {
|
|
|
7589
7604
|
lineHeight: "$base",
|
|
7590
7605
|
fontSize: "$14",
|
|
7591
7606
|
borderRadius: "$sm",
|
|
7592
|
-
position: "relative"
|
|
7607
|
+
position: "relative",
|
|
7608
|
+
width: "fit-content",
|
|
7609
|
+
variants: {
|
|
7610
|
+
expand: {
|
|
7611
|
+
true: {
|
|
7612
|
+
width: "100%",
|
|
7613
|
+
flex: "1",
|
|
7614
|
+
display: "flex"
|
|
7615
|
+
}
|
|
7616
|
+
}
|
|
7617
|
+
}
|
|
7593
7618
|
});
|
|
7594
7619
|
var CalendarButtonStyled = styled("button", {
|
|
7595
7620
|
backgroundColor: "transparent",
|
|
@@ -7598,25 +7623,52 @@ var CalendarButtonStyled = styled("button", {
|
|
|
7598
7623
|
padding: "0",
|
|
7599
7624
|
cursor: "pointer",
|
|
7600
7625
|
"> div > div": {
|
|
7601
|
-
paddingLeft: "
|
|
7602
|
-
|
|
7626
|
+
paddingLeft: "0",
|
|
7627
|
+
input: {
|
|
7603
7628
|
textAlign: "right"
|
|
7604
7629
|
}
|
|
7630
|
+
},
|
|
7631
|
+
variants: {
|
|
7632
|
+
expand: {
|
|
7633
|
+
true: {
|
|
7634
|
+
flex: "1",
|
|
7635
|
+
display: "flex",
|
|
7636
|
+
maxWidth: "100%"
|
|
7637
|
+
}
|
|
7638
|
+
}
|
|
7605
7639
|
}
|
|
7606
7640
|
});
|
|
7607
7641
|
var CalendarContentStyled = styled("div", {
|
|
7608
7642
|
fontFamily: "$default",
|
|
7609
7643
|
lineHeight: "$base",
|
|
7610
7644
|
fontSize: "$14",
|
|
7611
|
-
width: "100%",
|
|
7612
7645
|
maxWidth: "fit-content",
|
|
7613
7646
|
border: "1px solid $neutral300",
|
|
7614
7647
|
borderRadius: "$sm",
|
|
7615
7648
|
boxShadow: "0px 2px 8px 0px $shadow50",
|
|
7616
7649
|
position: "absolute",
|
|
7617
|
-
left: "0",
|
|
7618
7650
|
backgroundColor: "$neutral50",
|
|
7619
|
-
zIndex: "999999"
|
|
7651
|
+
zIndex: "999999",
|
|
7652
|
+
variants: {
|
|
7653
|
+
position: {
|
|
7654
|
+
top: {
|
|
7655
|
+
bottom: "110%",
|
|
7656
|
+
left: "0"
|
|
7657
|
+
},
|
|
7658
|
+
bottom: {
|
|
7659
|
+
top: "110%",
|
|
7660
|
+
left: "0"
|
|
7661
|
+
},
|
|
7662
|
+
"top-right": {
|
|
7663
|
+
bottom: "110%",
|
|
7664
|
+
right: "0"
|
|
7665
|
+
},
|
|
7666
|
+
"bottom-right": {
|
|
7667
|
+
top: "110%",
|
|
7668
|
+
right: "0"
|
|
7669
|
+
}
|
|
7670
|
+
}
|
|
7671
|
+
}
|
|
7620
7672
|
});
|
|
7621
7673
|
var CalendarFooterStyled = styled("div", {
|
|
7622
7674
|
borderTop: "2px solid $neutral100",
|
|
@@ -7633,7 +7685,7 @@ var DayPickerWrapperStyled = styled("div", {
|
|
|
7633
7685
|
color: "$dark500"
|
|
7634
7686
|
},
|
|
7635
7687
|
".rdp-root": {
|
|
7636
|
-
padding: "$
|
|
7688
|
+
padding: "$8"
|
|
7637
7689
|
},
|
|
7638
7690
|
".rdp-today .rdp-day_button": {
|
|
7639
7691
|
color: "$brand500",
|
|
@@ -7805,7 +7857,9 @@ function Calendar(_a) {
|
|
|
7805
7857
|
selected,
|
|
7806
7858
|
setSelected,
|
|
7807
7859
|
position = "bottom",
|
|
7808
|
-
hasError
|
|
7860
|
+
hasError,
|
|
7861
|
+
expand,
|
|
7862
|
+
allowPastDates = false
|
|
7809
7863
|
} = _b, props = __objRest(_b, [
|
|
7810
7864
|
"action",
|
|
7811
7865
|
"actionText",
|
|
@@ -7813,7 +7867,9 @@ function Calendar(_a) {
|
|
|
7813
7867
|
"selected",
|
|
7814
7868
|
"setSelected",
|
|
7815
7869
|
"position",
|
|
7816
|
-
"hasError"
|
|
7870
|
+
"hasError",
|
|
7871
|
+
"expand",
|
|
7872
|
+
"allowPastDates"
|
|
7817
7873
|
]);
|
|
7818
7874
|
const [inputValue, setInputValue] = useState2("");
|
|
7819
7875
|
const [showContainer, setShowCalendar] = useState2(false);
|
|
@@ -7835,15 +7891,20 @@ function Calendar(_a) {
|
|
|
7835
7891
|
setInputValue(masked);
|
|
7836
7892
|
const parsed = parse(masked, "dd/MM/yyyy", /* @__PURE__ */ new Date());
|
|
7837
7893
|
if (isValid(parsed)) {
|
|
7894
|
+
if (!allowPastDates && parsed < today) {
|
|
7895
|
+
console.warn("Datas passadas n\xE3o s\xE3o permitidas:", masked);
|
|
7896
|
+
return;
|
|
7897
|
+
}
|
|
7838
7898
|
setSelected(parsed);
|
|
7839
7899
|
} else {
|
|
7840
7900
|
console.warn("Data inv\xE1lida inserida no input:", masked);
|
|
7841
7901
|
}
|
|
7842
7902
|
};
|
|
7843
|
-
return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs6(CalendarStyled, __spreadProps(__spreadValues({}, props), { ref: dropdownRef, children: [
|
|
7903
|
+
return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs6(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
|
|
7844
7904
|
/* @__PURE__ */ jsx15(
|
|
7845
7905
|
CalendarButtonStyled,
|
|
7846
7906
|
{
|
|
7907
|
+
expand,
|
|
7847
7908
|
type: "button",
|
|
7848
7909
|
onClick: () => setShowCalendar((prev) => !prev),
|
|
7849
7910
|
children: /* @__PURE__ */ jsx15(
|
|
@@ -7861,42 +7922,36 @@ function Calendar(_a) {
|
|
|
7861
7922
|
)
|
|
7862
7923
|
}
|
|
7863
7924
|
),
|
|
7864
|
-
showContainer && /* @__PURE__ */ jsxs6(
|
|
7865
|
-
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
|
|
7873
|
-
|
|
7874
|
-
|
|
7875
|
-
|
|
7876
|
-
|
|
7877
|
-
|
|
7878
|
-
|
|
7879
|
-
|
|
7880
|
-
|
|
7881
|
-
|
|
7882
|
-
|
|
7883
|
-
|
|
7884
|
-
|
|
7885
|
-
|
|
7886
|
-
|
|
7887
|
-
|
|
7888
|
-
|
|
7889
|
-
|
|
7890
|
-
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
children: actionText != null ? actionText : "Aplicar"
|
|
7895
|
-
}
|
|
7896
|
-
) })
|
|
7897
|
-
]
|
|
7898
|
-
}
|
|
7899
|
-
)
|
|
7925
|
+
showContainer && /* @__PURE__ */ jsxs6(CalendarContentStyled, { position, children: [
|
|
7926
|
+
/* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx15(
|
|
7927
|
+
DayPicker,
|
|
7928
|
+
{
|
|
7929
|
+
mode: "single",
|
|
7930
|
+
captionLayout: calendarLayout,
|
|
7931
|
+
selected,
|
|
7932
|
+
onSelect: setSelected,
|
|
7933
|
+
required: true,
|
|
7934
|
+
locale: ptBR,
|
|
7935
|
+
disabled: allowPastDates ? void 0 : { before: today },
|
|
7936
|
+
startMonth: allowPastDates ? void 0 : today,
|
|
7937
|
+
endMonth: maxDate
|
|
7938
|
+
}
|
|
7939
|
+
) }) }),
|
|
7940
|
+
action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { children: /* @__PURE__ */ jsx15(
|
|
7941
|
+
Button,
|
|
7942
|
+
{
|
|
7943
|
+
variant: "text",
|
|
7944
|
+
color: "brand",
|
|
7945
|
+
type: "button",
|
|
7946
|
+
onClick: () => {
|
|
7947
|
+
setShowCalendar(false);
|
|
7948
|
+
},
|
|
7949
|
+
size: "medium",
|
|
7950
|
+
fontWeight: "medium",
|
|
7951
|
+
children: actionText != null ? actionText : "Aplicar"
|
|
7952
|
+
}
|
|
7953
|
+
) })
|
|
7954
|
+
] })
|
|
7900
7955
|
] })) });
|
|
7901
7956
|
}
|
|
7902
7957
|
|
|
@@ -7959,8 +8014,45 @@ function Drawer({
|
|
|
7959
8014
|
}) {
|
|
7960
8015
|
if (!isOpen) return null;
|
|
7961
8016
|
const drawerContainerRef = useRef4(null);
|
|
7962
|
-
useOnClickOutside(drawerContainerRef, () => {
|
|
7963
|
-
|
|
8017
|
+
useOnClickOutside(drawerContainerRef, (event) => {
|
|
8018
|
+
var _a;
|
|
8019
|
+
if (!event || !drawerContainerRef.current) {
|
|
8020
|
+
return;
|
|
8021
|
+
}
|
|
8022
|
+
let target = event.target;
|
|
8023
|
+
if (target.tagName === "HTML" || target.tagName === "BODY") {
|
|
8024
|
+
if (event instanceof MouseEvent) {
|
|
8025
|
+
const actualElement = document.elementFromPoint(
|
|
8026
|
+
event.clientX,
|
|
8027
|
+
event.clientY
|
|
8028
|
+
);
|
|
8029
|
+
if (actualElement) {
|
|
8030
|
+
target = actualElement;
|
|
8031
|
+
}
|
|
8032
|
+
}
|
|
8033
|
+
}
|
|
8034
|
+
let currentElement = target;
|
|
8035
|
+
let hierarchy = [];
|
|
8036
|
+
while (currentElement && currentElement !== document.body) {
|
|
8037
|
+
hierarchy.push({
|
|
8038
|
+
tagName: currentElement.tagName,
|
|
8039
|
+
className: currentElement.className,
|
|
8040
|
+
id: currentElement.id,
|
|
8041
|
+
attributes: Array.from(currentElement.attributes || []).map((attr) => ({
|
|
8042
|
+
name: attr.name,
|
|
8043
|
+
value: attr.value
|
|
8044
|
+
}))
|
|
8045
|
+
});
|
|
8046
|
+
currentElement = currentElement.parentElement;
|
|
8047
|
+
}
|
|
8048
|
+
if ((_a = drawerContainerRef.current) == null ? void 0 : _a.contains(target)) {
|
|
8049
|
+
return;
|
|
8050
|
+
}
|
|
8051
|
+
const isDropdownOpen = target.closest("[data-radix-popper-content-wrapper]") || target.closest('[role="dialog"]') || target.closest('[data-state="open"]') || target.closest("[data-radix-dropdown-menu-content]") || target.closest("[data-radix-dropdown-menu-root]") || target.closest("[data-radix-dropdown-menu-trigger]") || target.closest("[data-radix-dropdown-menu-portal]") || target.closest("[data-radix-dropdown-menu-item]") || target.closest("[data-radix-dropdown-menu-checkbox-item]") || target.closest("[data-radix-dropdown-menu-radio-item]") || target.closest("[data-radix-dropdown-menu-separator]") || target.closest("[data-radix-dropdown-menu-label]") || target.closest("[data-radix-dropdown-menu-group]") || target.closest("[data-radix-dropdown-menu-sub]") || target.closest("[data-radix-dropdown-menu-sub-trigger]") || target.closest("[data-radix-dropdown-menu-sub-content]") || target.closest("[data-radix-dropdown-menu-radio-group]");
|
|
8052
|
+
const shouldPreventClose = isDropdownOpen || target.closest("[data-radix-dropdown-menu-root]") || target.closest("[data-radix-dropdown-menu-trigger]") || target.closest("[data-radix-dropdown-menu-content]") || target.closest("[data-radix-dropdown-menu-portal]") || target.closest("[data-radix-dropdown-menu-item]") || target.closest("[data-radix-dropdown-menu-checkbox-item]") || target.closest("[data-radix-dropdown-menu-radio-item]") || target.closest("[data-radix-dropdown-menu-separator]") || target.closest("[data-radix-dropdown-menu-label]") || target.closest("[data-radix-dropdown-menu-group]") || target.closest("[data-radix-dropdown-menu-sub]") || target.closest("[data-radix-dropdown-menu-sub-trigger]") || target.closest("[data-radix-dropdown-menu-sub-content]") || target.closest("[data-radix-dropdown-menu-radio-group]");
|
|
8053
|
+
if (!shouldPreventClose) {
|
|
8054
|
+
onClose();
|
|
8055
|
+
}
|
|
7964
8056
|
});
|
|
7965
8057
|
return /* @__PURE__ */ jsx16(DrawerOverlayStyled, { children: /* @__PURE__ */ jsxs7(
|
|
7966
8058
|
DrawerContainerStyled,
|
|
@@ -7989,18 +8081,24 @@ var TimePickerStyled = styled("div", {
|
|
|
7989
8081
|
fontFamily: "$default",
|
|
7990
8082
|
lineHeight: "$base",
|
|
7991
8083
|
fontSize: "$14",
|
|
7992
|
-
maxWidth: "200px",
|
|
7993
8084
|
borderRadius: "$sm",
|
|
7994
8085
|
"> div > div": {
|
|
7995
|
-
paddingLeft: "1rem",
|
|
7996
8086
|
input: {
|
|
7997
8087
|
textAlign: "right"
|
|
7998
8088
|
}
|
|
8089
|
+
},
|
|
8090
|
+
variants: {
|
|
8091
|
+
expand: {
|
|
8092
|
+
true: {
|
|
8093
|
+
width: "100%",
|
|
8094
|
+
flex: "1",
|
|
8095
|
+
display: "flex"
|
|
8096
|
+
}
|
|
8097
|
+
}
|
|
7999
8098
|
}
|
|
8000
8099
|
});
|
|
8001
8100
|
var TimePickerDropdownStyled = styled("div", {
|
|
8002
8101
|
position: "absolute",
|
|
8003
|
-
left: 0,
|
|
8004
8102
|
zIndex: 10,
|
|
8005
8103
|
width: "100%",
|
|
8006
8104
|
maxWidth: "8.875rem",
|
|
@@ -8070,14 +8168,21 @@ var InputStyled = styled("input", {
|
|
|
8070
8168
|
var TimePickerButtonStyled = styled("button", {
|
|
8071
8169
|
backgroundColor: "transparent",
|
|
8072
8170
|
border: "none",
|
|
8073
|
-
maxWidth: "200px",
|
|
8074
8171
|
padding: "0",
|
|
8075
8172
|
cursor: "pointer",
|
|
8076
8173
|
"> div > div": {
|
|
8077
|
-
paddingLeft: "1rem",
|
|
8078
8174
|
input: {
|
|
8079
8175
|
textAlign: "right"
|
|
8080
8176
|
}
|
|
8177
|
+
},
|
|
8178
|
+
variants: {
|
|
8179
|
+
expand: {
|
|
8180
|
+
true: {
|
|
8181
|
+
flex: "1",
|
|
8182
|
+
display: "flex",
|
|
8183
|
+
maxWidth: "100%"
|
|
8184
|
+
}
|
|
8185
|
+
}
|
|
8081
8186
|
}
|
|
8082
8187
|
});
|
|
8083
8188
|
var pad = (num) => String(num).padStart(2, "0");
|
|
@@ -8085,7 +8190,8 @@ function TimePicker({
|
|
|
8085
8190
|
selected,
|
|
8086
8191
|
setSelected,
|
|
8087
8192
|
position = "bottom",
|
|
8088
|
-
hasError
|
|
8193
|
+
hasError,
|
|
8194
|
+
expand = false
|
|
8089
8195
|
}) {
|
|
8090
8196
|
const [hours, setHours] = useState3("00");
|
|
8091
8197
|
const [minutes, setMinutes] = useState3("00");
|
|
@@ -8122,12 +8228,13 @@ function TimePicker({
|
|
|
8122
8228
|
},
|
|
8123
8229
|
[hours, minutes]
|
|
8124
8230
|
);
|
|
8125
|
-
return /* @__PURE__ */ jsxs8(TimePickerStyled, { ref: dropdownRef, children: [
|
|
8231
|
+
return /* @__PURE__ */ jsxs8(TimePickerStyled, { ref: dropdownRef, expand, children: [
|
|
8126
8232
|
/* @__PURE__ */ jsx17(
|
|
8127
8233
|
TimePickerButtonStyled,
|
|
8128
8234
|
{
|
|
8129
8235
|
type: "button",
|
|
8130
8236
|
onClick: () => setIsOpen((prev) => !prev),
|
|
8237
|
+
expand,
|
|
8131
8238
|
children: /* @__PURE__ */ jsx17(
|
|
8132
8239
|
TextField,
|
|
8133
8240
|
{
|
|
@@ -8146,7 +8253,7 @@ function TimePicker({
|
|
|
8146
8253
|
isOpen && /* @__PURE__ */ jsxs8(
|
|
8147
8254
|
TimePickerDropdownStyled,
|
|
8148
8255
|
{
|
|
8149
|
-
style: position === "top" ? { bottom: "110%" } : { top: "110%" },
|
|
8256
|
+
style: position === "top" ? { bottom: "110%", left: "0" } : position === "top-right" ? { bottom: "110%", right: "0" } : position === "bottom-right" ? { top: "110%", right: "0" } : { top: "110%", left: "0" },
|
|
8150
8257
|
children: [
|
|
8151
8258
|
/* @__PURE__ */ jsxs8(TimerPickerContentStyled, { children: [
|
|
8152
8259
|
["hours", "minutes"].map((unit) => /* @__PURE__ */ jsxs8(
|
|
@@ -9171,6 +9278,7 @@ function Tooltip({
|
|
|
9171
9278
|
}
|
|
9172
9279
|
|
|
9173
9280
|
// src/components/MultiSelect.tsx
|
|
9281
|
+
import React9, { useCallback as useCallback2, useRef as useRef7, useState as useState6 } from "react";
|
|
9174
9282
|
import { DropdownMenu as DropdownMenu3, Theme as Theme3 } from "@radix-ui/themes";
|
|
9175
9283
|
import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
|
|
9176
9284
|
import {
|
|
@@ -9178,8 +9286,7 @@ import {
|
|
|
9178
9286
|
faChevronUp as faChevronUp2,
|
|
9179
9287
|
faSquareXmark
|
|
9180
9288
|
} from "@fortawesome/free-solid-svg-icons";
|
|
9181
|
-
import {
|
|
9182
|
-
import React9 from "react";
|
|
9289
|
+
import { useMemo } from "react";
|
|
9183
9290
|
import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
9184
9291
|
var StyledContent = styled(DropdownMenu3.Content, {
|
|
9185
9292
|
backgroundColor: "$dark50",
|
|
@@ -9187,7 +9294,10 @@ var StyledContent = styled(DropdownMenu3.Content, {
|
|
|
9187
9294
|
padding: "$8 0",
|
|
9188
9295
|
boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
|
|
9189
9296
|
boxSizing: "border-box",
|
|
9190
|
-
border: "1px solid $dark300"
|
|
9297
|
+
border: "1px solid $dark300",
|
|
9298
|
+
zIndex: 999999,
|
|
9299
|
+
minWidth: "var(--radix-dropdown-menu-trigger-width)",
|
|
9300
|
+
maxWidth: "var(--radix-dropdown-menu-trigger-width)"
|
|
9191
9301
|
});
|
|
9192
9302
|
var StyledTrigger = styled("div", {
|
|
9193
9303
|
minHeight: "40px",
|
|
@@ -9199,6 +9309,7 @@ var StyledTrigger = styled("div", {
|
|
|
9199
9309
|
padding: "$6 $14",
|
|
9200
9310
|
boxSizing: "border-box",
|
|
9201
9311
|
gap: "4px",
|
|
9312
|
+
width: "100%",
|
|
9202
9313
|
variants: {
|
|
9203
9314
|
color: {
|
|
9204
9315
|
default: {
|
|
@@ -9234,6 +9345,38 @@ var StyledItem2 = styled("div", __spreadValues({}, itemStyle));
|
|
|
9234
9345
|
var BadgeCloseBtn = styled("div", {
|
|
9235
9346
|
cursor: "pointer"
|
|
9236
9347
|
});
|
|
9348
|
+
var StyledFlexWithMaxHeight = styled(Flex2, {
|
|
9349
|
+
variants: {
|
|
9350
|
+
hasMaxHeight: {
|
|
9351
|
+
true: {
|
|
9352
|
+
overflowY: "auto",
|
|
9353
|
+
"&::-webkit-scrollbar": {
|
|
9354
|
+
width: "4px"
|
|
9355
|
+
},
|
|
9356
|
+
"&::-webkit-scrollbar-track": {
|
|
9357
|
+
backgroundColor: "$dark100",
|
|
9358
|
+
borderRadius: "2px"
|
|
9359
|
+
},
|
|
9360
|
+
"&::-webkit-scrollbar-thumb": {
|
|
9361
|
+
backgroundColor: "$dark300",
|
|
9362
|
+
borderRadius: "2px",
|
|
9363
|
+
"&:hover": {
|
|
9364
|
+
backgroundColor: "$dark400"
|
|
9365
|
+
}
|
|
9366
|
+
}
|
|
9367
|
+
}
|
|
9368
|
+
}
|
|
9369
|
+
},
|
|
9370
|
+
defaultVariants: {
|
|
9371
|
+
hasMaxHeight: false
|
|
9372
|
+
}
|
|
9373
|
+
});
|
|
9374
|
+
var StyledText = styled(Text, {
|
|
9375
|
+
flex: 1,
|
|
9376
|
+
overflow: "hidden",
|
|
9377
|
+
whiteSpace: "nowrap",
|
|
9378
|
+
textOverflow: "ellipsis"
|
|
9379
|
+
});
|
|
9237
9380
|
var MultiSelect = React9.forwardRef(
|
|
9238
9381
|
({
|
|
9239
9382
|
placeholder,
|
|
@@ -9246,9 +9389,9 @@ var MultiSelect = React9.forwardRef(
|
|
|
9246
9389
|
showSelectedValues = true,
|
|
9247
9390
|
singleSelect = false,
|
|
9248
9391
|
selectedOrientation = "column",
|
|
9249
|
-
disabled = false
|
|
9392
|
+
disabled = false,
|
|
9393
|
+
maxHeight
|
|
9250
9394
|
}, fowardedRef) => {
|
|
9251
|
-
var _a;
|
|
9252
9395
|
const [isOpen, setIsOpen] = useState6(false);
|
|
9253
9396
|
const triggerRef = useRef7(null);
|
|
9254
9397
|
const labelByValue = useMemo(() => {
|
|
@@ -9265,7 +9408,6 @@ var MultiSelect = React9.forwardRef(
|
|
|
9265
9408
|
},
|
|
9266
9409
|
[selectedValues, onValueChange]
|
|
9267
9410
|
);
|
|
9268
|
-
const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
|
|
9269
9411
|
const text = useMemo(() => {
|
|
9270
9412
|
if (selectedValues.length > 0 && singleSelect) {
|
|
9271
9413
|
const value = selectedValues[0];
|
|
@@ -9277,67 +9419,60 @@ var MultiSelect = React9.forwardRef(
|
|
|
9277
9419
|
onValueChange == null ? void 0 : onValueChange([v]);
|
|
9278
9420
|
setIsOpen(false);
|
|
9279
9421
|
};
|
|
9422
|
+
const handleToggle = useCallback2(
|
|
9423
|
+
(e) => {
|
|
9424
|
+
e.preventDefault();
|
|
9425
|
+
e.stopPropagation();
|
|
9426
|
+
if (disabled) return;
|
|
9427
|
+
setIsOpen((prev) => !prev);
|
|
9428
|
+
},
|
|
9429
|
+
[disabled]
|
|
9430
|
+
);
|
|
9280
9431
|
return /* @__PURE__ */ jsxs14(Theme3, { children: [
|
|
9281
|
-
/* @__PURE__ */ jsxs14(DropdownMenu3.Root, {
|
|
9282
|
-
/* @__PURE__ */ jsx26(
|
|
9283
|
-
|
|
9432
|
+
/* @__PURE__ */ jsxs14(DropdownMenu3.Root, { children: [
|
|
9433
|
+
/* @__PURE__ */ jsx26(DropdownMenu3.Trigger, { children: /* @__PURE__ */ jsxs14(
|
|
9434
|
+
StyledTrigger,
|
|
9284
9435
|
{
|
|
9285
|
-
|
|
9286
|
-
if (
|
|
9287
|
-
|
|
9288
|
-
|
|
9289
|
-
|
|
9290
|
-
|
|
9291
|
-
|
|
9292
|
-
|
|
9293
|
-
width
|
|
9294
|
-
},
|
|
9295
|
-
ref: (r) => {
|
|
9296
|
-
if (!r) return;
|
|
9297
|
-
triggerRef.current = r;
|
|
9298
|
-
if (fowardedRef) {
|
|
9299
|
-
if (typeof fowardedRef === "function") fowardedRef(r);
|
|
9300
|
-
else {
|
|
9301
|
-
fowardedRef.current = r;
|
|
9302
|
-
}
|
|
9303
|
-
}
|
|
9304
|
-
},
|
|
9305
|
-
color,
|
|
9306
|
-
disabled,
|
|
9307
|
-
children: [
|
|
9308
|
-
/* @__PURE__ */ jsx26(
|
|
9309
|
-
Text,
|
|
9310
|
-
{
|
|
9311
|
-
typography: "labelMedium",
|
|
9312
|
-
css: {
|
|
9313
|
-
flex: 1,
|
|
9314
|
-
overflow: "hidden",
|
|
9315
|
-
whiteSpace: "nowrap",
|
|
9316
|
-
textOverflow: "ellipsis"
|
|
9317
|
-
},
|
|
9318
|
-
color: disabled ? "dark400" : void 0,
|
|
9319
|
-
children: text
|
|
9320
|
-
}
|
|
9321
|
-
),
|
|
9322
|
-
/* @__PURE__ */ jsx26(
|
|
9323
|
-
FontAwesomeIcon3,
|
|
9324
|
-
{
|
|
9325
|
-
icon: isOpen ? faChevronUp2 : faChevronDown2,
|
|
9326
|
-
size: "sm",
|
|
9327
|
-
color: disabled ? colors.dark400 : colors.dark600
|
|
9328
|
-
}
|
|
9329
|
-
)
|
|
9330
|
-
]
|
|
9436
|
+
ref: (r) => {
|
|
9437
|
+
if (!r) return;
|
|
9438
|
+
triggerRef.current = r;
|
|
9439
|
+
if (fowardedRef) {
|
|
9440
|
+
if (typeof fowardedRef === "function") fowardedRef(r);
|
|
9441
|
+
else {
|
|
9442
|
+
fowardedRef.current = r;
|
|
9443
|
+
}
|
|
9331
9444
|
}
|
|
9332
|
-
|
|
9445
|
+
},
|
|
9446
|
+
color,
|
|
9447
|
+
disabled,
|
|
9448
|
+
style: width !== "100%" ? { width } : void 0,
|
|
9449
|
+
onClick: handleToggle,
|
|
9450
|
+
children: [
|
|
9451
|
+
/* @__PURE__ */ jsx26(
|
|
9452
|
+
StyledText,
|
|
9453
|
+
{
|
|
9454
|
+
typography: "labelMedium",
|
|
9455
|
+
color: disabled ? "dark400" : void 0,
|
|
9456
|
+
children: text
|
|
9457
|
+
}
|
|
9458
|
+
),
|
|
9459
|
+
/* @__PURE__ */ jsx26(
|
|
9460
|
+
FontAwesomeIcon3,
|
|
9461
|
+
{
|
|
9462
|
+
icon: isOpen ? faChevronUp2 : faChevronDown2,
|
|
9463
|
+
size: "sm",
|
|
9464
|
+
color: disabled ? colors.dark400 : colors.dark600
|
|
9465
|
+
}
|
|
9466
|
+
)
|
|
9467
|
+
]
|
|
9333
9468
|
}
|
|
9334
|
-
),
|
|
9469
|
+
) }),
|
|
9335
9470
|
/* @__PURE__ */ jsx26(
|
|
9336
9471
|
StyledContent,
|
|
9337
9472
|
{
|
|
9338
9473
|
css: {
|
|
9339
|
-
width:
|
|
9340
|
-
zIndex
|
|
9474
|
+
width: "100%",
|
|
9475
|
+
zIndex: zIndex === "auto" ? 999999 : zIndex
|
|
9341
9476
|
},
|
|
9342
9477
|
children: !singleSelect ? /* @__PURE__ */ jsx26(
|
|
9343
9478
|
CheckboxGroup,
|
|
@@ -9346,9 +9481,27 @@ var MultiSelect = React9.forwardRef(
|
|
|
9346
9481
|
onValueChange: (v) => {
|
|
9347
9482
|
onValueChange == null ? void 0 : onValueChange(v);
|
|
9348
9483
|
},
|
|
9349
|
-
children: /* @__PURE__ */ jsx26(
|
|
9484
|
+
children: /* @__PURE__ */ jsx26(
|
|
9485
|
+
StyledFlexWithMaxHeight,
|
|
9486
|
+
{
|
|
9487
|
+
direction: "column",
|
|
9488
|
+
gap: 8,
|
|
9489
|
+
hasMaxHeight: !!maxHeight,
|
|
9490
|
+
style: maxHeight ? { maxHeight } : void 0,
|
|
9491
|
+
children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i))
|
|
9492
|
+
}
|
|
9493
|
+
)
|
|
9494
|
+
}
|
|
9495
|
+
) : /* @__PURE__ */ jsx26(
|
|
9496
|
+
StyledFlexWithMaxHeight,
|
|
9497
|
+
{
|
|
9498
|
+
direction: "column",
|
|
9499
|
+
gap: 8,
|
|
9500
|
+
hasMaxHeight: !!maxHeight,
|
|
9501
|
+
style: maxHeight ? { maxHeight } : void 0,
|
|
9502
|
+
children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i))
|
|
9350
9503
|
}
|
|
9351
|
-
)
|
|
9504
|
+
)
|
|
9352
9505
|
}
|
|
9353
9506
|
)
|
|
9354
9507
|
] }),
|
|
@@ -9357,35 +9510,40 @@ var MultiSelect = React9.forwardRef(
|
|
|
9357
9510
|
{
|
|
9358
9511
|
direction: selectedOrientation,
|
|
9359
9512
|
gap: 8,
|
|
9360
|
-
align: "center",
|
|
9513
|
+
align: selectedOrientation === "column" ? "start" : "center",
|
|
9361
9514
|
justify: "start",
|
|
9362
|
-
css: {
|
|
9363
|
-
|
|
9364
|
-
|
|
9365
|
-
|
|
9366
|
-
|
|
9367
|
-
|
|
9368
|
-
|
|
9369
|
-
|
|
9370
|
-
|
|
9371
|
-
|
|
9372
|
-
|
|
9373
|
-
|
|
9374
|
-
|
|
9375
|
-
|
|
9376
|
-
|
|
9377
|
-
|
|
9378
|
-
|
|
9379
|
-
|
|
9380
|
-
|
|
9381
|
-
|
|
9382
|
-
|
|
9383
|
-
|
|
9384
|
-
|
|
9385
|
-
|
|
9386
|
-
|
|
9387
|
-
|
|
9388
|
-
|
|
9515
|
+
css: { margin: "8px 0" },
|
|
9516
|
+
children: selectedValues.map((value) => /* @__PURE__ */ jsxs14(
|
|
9517
|
+
Flex2,
|
|
9518
|
+
{
|
|
9519
|
+
gap: 4,
|
|
9520
|
+
align: "center",
|
|
9521
|
+
css: { flexWrap: "wrap" },
|
|
9522
|
+
children: [
|
|
9523
|
+
/* @__PURE__ */ jsx26(
|
|
9524
|
+
BadgeCloseBtn,
|
|
9525
|
+
{
|
|
9526
|
+
onClick: (e) => {
|
|
9527
|
+
e.stopPropagation();
|
|
9528
|
+
handleRemove(value);
|
|
9529
|
+
},
|
|
9530
|
+
role: "button",
|
|
9531
|
+
children: /* @__PURE__ */ jsx26(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
|
|
9532
|
+
}
|
|
9533
|
+
),
|
|
9534
|
+
/* @__PURE__ */ jsx26(
|
|
9535
|
+
Text,
|
|
9536
|
+
{
|
|
9537
|
+
typography: "captionMedium",
|
|
9538
|
+
fontWeight: "regular",
|
|
9539
|
+
color: "dark600",
|
|
9540
|
+
children: labelByValue[value]
|
|
9541
|
+
}
|
|
9542
|
+
)
|
|
9543
|
+
]
|
|
9544
|
+
},
|
|
9545
|
+
value
|
|
9546
|
+
))
|
|
9389
9547
|
}
|
|
9390
9548
|
) })
|
|
9391
9549
|
] });
|
|
@@ -9794,13 +9952,15 @@ var MultiSelectFormField = (_a) => {
|
|
|
9794
9952
|
label,
|
|
9795
9953
|
required,
|
|
9796
9954
|
selectedOrientation = "column",
|
|
9797
|
-
zIndex
|
|
9955
|
+
zIndex,
|
|
9956
|
+
maxHeight
|
|
9798
9957
|
} = _b, rest = __objRest(_b, [
|
|
9799
9958
|
"name",
|
|
9800
9959
|
"label",
|
|
9801
9960
|
"required",
|
|
9802
9961
|
"selectedOrientation",
|
|
9803
|
-
"zIndex"
|
|
9962
|
+
"zIndex",
|
|
9963
|
+
"maxHeight"
|
|
9804
9964
|
]);
|
|
9805
9965
|
var _a2;
|
|
9806
9966
|
const { field, fieldState } = useController2({
|
|
@@ -9834,7 +9994,8 @@ var MultiSelectFormField = (_a) => {
|
|
|
9834
9994
|
ref,
|
|
9835
9995
|
color: haveError ? "error" : "default",
|
|
9836
9996
|
selectedOrientation,
|
|
9837
|
-
zIndex
|
|
9997
|
+
zIndex,
|
|
9998
|
+
maxHeight
|
|
9838
9999
|
}, rest)
|
|
9839
10000
|
),
|
|
9840
10001
|
/* @__PURE__ */ jsx35(ErrorFormMessage, { message: errorMsg })
|
|
@@ -10084,10 +10245,6 @@ var BirthDateFormField = ({
|
|
|
10084
10245
|
|
|
10085
10246
|
// src/components/FormFields/IdentityDocumentNumberFormField.tsx
|
|
10086
10247
|
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
10087
|
-
var isValidRG = (rg) => {
|
|
10088
|
-
const cleaned = rg.replace(/[^\d]/g, "");
|
|
10089
|
-
return /^\d{9}$/.test(cleaned);
|
|
10090
|
-
};
|
|
10091
10248
|
var IdentityDocumentNumberFormField = ({
|
|
10092
10249
|
name,
|
|
10093
10250
|
label,
|
|
@@ -10107,9 +10264,11 @@ var IdentityDocumentNumberFormField = ({
|
|
|
10107
10264
|
replacement: { _: /[0-9]/ }
|
|
10108
10265
|
},
|
|
10109
10266
|
validate: (value) => {
|
|
10110
|
-
const
|
|
10267
|
+
const cleaned = value.replace(/[^\d]/g, "");
|
|
10268
|
+
const isEmpty = cleaned.length === 0;
|
|
10111
10269
|
if (!required && isEmpty) return true;
|
|
10112
|
-
|
|
10270
|
+
if (cleaned.length >= 3) return true;
|
|
10271
|
+
return validationErrorMessage;
|
|
10113
10272
|
}
|
|
10114
10273
|
}
|
|
10115
10274
|
);
|
|
@@ -10694,7 +10853,6 @@ import { useController as useController3 } from "react-hook-form";
|
|
|
10694
10853
|
// src/components/RichEditor/QuillComponent.tsx
|
|
10695
10854
|
import { useState as useState8, useRef as useRef8, useEffect as useEffect5, useCallback as useCallback4 } from "react";
|
|
10696
10855
|
import { useQuill } from "react-quilljs";
|
|
10697
|
-
import "quill/dist/quill.snow.css";
|
|
10698
10856
|
|
|
10699
10857
|
// src/utils/uploadService.ts
|
|
10700
10858
|
var generateUniqueFilename = (originalName) => {
|
|
@@ -11013,10 +11171,8 @@ var QuillComponent = ({
|
|
|
11013
11171
|
const headerSelect = toolbarElement.querySelector(
|
|
11014
11172
|
"select[data-value]"
|
|
11015
11173
|
);
|
|
11016
|
-
console.log(headerSelect, "headerSelect");
|
|
11017
11174
|
if (headerSelect) {
|
|
11018
11175
|
const options = headerSelect.querySelectorAll("option");
|
|
11019
|
-
console.log(options, "options");
|
|
11020
11176
|
options.forEach((option) => {
|
|
11021
11177
|
if (option.value === "1") {
|
|
11022
11178
|
option.textContent = "T\xEDtulo 1";
|
|
@@ -11028,7 +11184,7 @@ var QuillComponent = ({
|
|
|
11028
11184
|
});
|
|
11029
11185
|
}
|
|
11030
11186
|
}
|
|
11031
|
-
},
|
|
11187
|
+
}, 2e3);
|
|
11032
11188
|
}
|
|
11033
11189
|
}, [quill, onChange, handleImageUpload]);
|
|
11034
11190
|
useEffect5(() => {
|
|
@@ -11328,7 +11484,8 @@ var CalendarFormField = (_a) => {
|
|
|
11328
11484
|
validate,
|
|
11329
11485
|
validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
|
|
11330
11486
|
rules,
|
|
11331
|
-
onChange
|
|
11487
|
+
onChange,
|
|
11488
|
+
allowPastDates
|
|
11332
11489
|
} = _b, calendarProps = __objRest(_b, [
|
|
11333
11490
|
"name",
|
|
11334
11491
|
"label",
|
|
@@ -11336,7 +11493,8 @@ var CalendarFormField = (_a) => {
|
|
|
11336
11493
|
"validate",
|
|
11337
11494
|
"validationErrorMessage",
|
|
11338
11495
|
"rules",
|
|
11339
|
-
"onChange"
|
|
11496
|
+
"onChange",
|
|
11497
|
+
"allowPastDates"
|
|
11340
11498
|
]);
|
|
11341
11499
|
const handleValidate = useCallback5(
|
|
11342
11500
|
(value) => {
|
|
@@ -11364,7 +11522,7 @@ var CalendarFormField = (_a) => {
|
|
|
11364
11522
|
const handleCalendarChange = (date) => {
|
|
11365
11523
|
setSelected(date);
|
|
11366
11524
|
};
|
|
11367
|
-
return /* @__PURE__ */ jsxs27(Flex2, { direction: "column", children: [
|
|
11525
|
+
return /* @__PURE__ */ jsxs27(Flex2, { direction: "column", style: { flex: "1" }, children: [
|
|
11368
11526
|
label && /* @__PURE__ */ jsx53(
|
|
11369
11527
|
FormLabel,
|
|
11370
11528
|
{
|
|
@@ -11382,7 +11540,8 @@ var CalendarFormField = (_a) => {
|
|
|
11382
11540
|
const date = typeof value === "function" ? value(selected) : value;
|
|
11383
11541
|
handleCalendarChange(date);
|
|
11384
11542
|
},
|
|
11385
|
-
hasError: haveError
|
|
11543
|
+
hasError: haveError,
|
|
11544
|
+
allowPastDates
|
|
11386
11545
|
}, calendarProps)
|
|
11387
11546
|
),
|
|
11388
11547
|
/* @__PURE__ */ jsx53(ErrorFormMessage, { message: errorMsg })
|
|
@@ -11435,7 +11594,7 @@ var TimePickerFormField = (_a) => {
|
|
|
11435
11594
|
const handleTimePickerChange = (time) => {
|
|
11436
11595
|
setSelected(time);
|
|
11437
11596
|
};
|
|
11438
|
-
return /* @__PURE__ */ jsxs28(Flex2, { direction: "column", children: [
|
|
11597
|
+
return /* @__PURE__ */ jsxs28(Flex2, { direction: "column", style: { flex: "1" }, children: [
|
|
11439
11598
|
label && /* @__PURE__ */ jsx54(
|
|
11440
11599
|
FormLabel,
|
|
11441
11600
|
{
|