@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.js
CHANGED
|
@@ -1796,6 +1796,7 @@ var ButtonStyled = styled(import_themes2.Button, {
|
|
|
1796
1796
|
color: "$$buttonColor",
|
|
1797
1797
|
width: "100%",
|
|
1798
1798
|
borderRadius: 0,
|
|
1799
|
+
whiteSpace: "nowrap",
|
|
1799
1800
|
"&:hover": {
|
|
1800
1801
|
backgroundColor: "$dark100"
|
|
1801
1802
|
}
|
|
@@ -3769,10 +3770,24 @@ var import_react5 = require("react");
|
|
|
3769
3770
|
function useOnClickOutside(ref, handler) {
|
|
3770
3771
|
(0, import_react5.useEffect)(() => {
|
|
3771
3772
|
const listener = (event) => {
|
|
3772
|
-
if (!ref.current ||
|
|
3773
|
+
if (!(ref == null ? void 0 : ref.current) || !event.target) {
|
|
3773
3774
|
return;
|
|
3774
3775
|
}
|
|
3775
|
-
|
|
3776
|
+
const target = event.target;
|
|
3777
|
+
const currentTarget = event.currentTarget;
|
|
3778
|
+
if (ref.current.contains(target) || ref.current.contains(currentTarget)) {
|
|
3779
|
+
return;
|
|
3780
|
+
}
|
|
3781
|
+
if (target.tagName === "HTML" || target.tagName === "BODY") {
|
|
3782
|
+
const elementAtPoint = document.elementFromPoint(
|
|
3783
|
+
event.clientX,
|
|
3784
|
+
event.clientY
|
|
3785
|
+
);
|
|
3786
|
+
if (elementAtPoint && ref.current.contains(elementAtPoint)) {
|
|
3787
|
+
return;
|
|
3788
|
+
}
|
|
3789
|
+
}
|
|
3790
|
+
handler(event);
|
|
3776
3791
|
};
|
|
3777
3792
|
document.addEventListener("mousedown", listener);
|
|
3778
3793
|
document.addEventListener("touchstart", listener);
|
|
@@ -7698,7 +7713,17 @@ var CalendarStyled = styled("div", {
|
|
|
7698
7713
|
lineHeight: "$base",
|
|
7699
7714
|
fontSize: "$14",
|
|
7700
7715
|
borderRadius: "$sm",
|
|
7701
|
-
position: "relative"
|
|
7716
|
+
position: "relative",
|
|
7717
|
+
width: "fit-content",
|
|
7718
|
+
variants: {
|
|
7719
|
+
expand: {
|
|
7720
|
+
true: {
|
|
7721
|
+
width: "100%",
|
|
7722
|
+
flex: "1",
|
|
7723
|
+
display: "flex"
|
|
7724
|
+
}
|
|
7725
|
+
}
|
|
7726
|
+
}
|
|
7702
7727
|
});
|
|
7703
7728
|
var CalendarButtonStyled = styled("button", {
|
|
7704
7729
|
backgroundColor: "transparent",
|
|
@@ -7707,25 +7732,52 @@ var CalendarButtonStyled = styled("button", {
|
|
|
7707
7732
|
padding: "0",
|
|
7708
7733
|
cursor: "pointer",
|
|
7709
7734
|
"> div > div": {
|
|
7710
|
-
paddingLeft: "
|
|
7711
|
-
|
|
7735
|
+
paddingLeft: "0",
|
|
7736
|
+
input: {
|
|
7712
7737
|
textAlign: "right"
|
|
7713
7738
|
}
|
|
7739
|
+
},
|
|
7740
|
+
variants: {
|
|
7741
|
+
expand: {
|
|
7742
|
+
true: {
|
|
7743
|
+
flex: "1",
|
|
7744
|
+
display: "flex",
|
|
7745
|
+
maxWidth: "100%"
|
|
7746
|
+
}
|
|
7747
|
+
}
|
|
7714
7748
|
}
|
|
7715
7749
|
});
|
|
7716
7750
|
var CalendarContentStyled = styled("div", {
|
|
7717
7751
|
fontFamily: "$default",
|
|
7718
7752
|
lineHeight: "$base",
|
|
7719
7753
|
fontSize: "$14",
|
|
7720
|
-
width: "100%",
|
|
7721
7754
|
maxWidth: "fit-content",
|
|
7722
7755
|
border: "1px solid $neutral300",
|
|
7723
7756
|
borderRadius: "$sm",
|
|
7724
7757
|
boxShadow: "0px 2px 8px 0px $shadow50",
|
|
7725
7758
|
position: "absolute",
|
|
7726
|
-
left: "0",
|
|
7727
7759
|
backgroundColor: "$neutral50",
|
|
7728
|
-
zIndex: "999999"
|
|
7760
|
+
zIndex: "999999",
|
|
7761
|
+
variants: {
|
|
7762
|
+
position: {
|
|
7763
|
+
top: {
|
|
7764
|
+
bottom: "110%",
|
|
7765
|
+
left: "0"
|
|
7766
|
+
},
|
|
7767
|
+
bottom: {
|
|
7768
|
+
top: "110%",
|
|
7769
|
+
left: "0"
|
|
7770
|
+
},
|
|
7771
|
+
"top-right": {
|
|
7772
|
+
bottom: "110%",
|
|
7773
|
+
right: "0"
|
|
7774
|
+
},
|
|
7775
|
+
"bottom-right": {
|
|
7776
|
+
top: "110%",
|
|
7777
|
+
right: "0"
|
|
7778
|
+
}
|
|
7779
|
+
}
|
|
7780
|
+
}
|
|
7729
7781
|
});
|
|
7730
7782
|
var CalendarFooterStyled = styled("div", {
|
|
7731
7783
|
borderTop: "2px solid $neutral100",
|
|
@@ -7742,7 +7794,7 @@ var DayPickerWrapperStyled = styled("div", {
|
|
|
7742
7794
|
color: "$dark500"
|
|
7743
7795
|
},
|
|
7744
7796
|
".rdp-root": {
|
|
7745
|
-
padding: "$
|
|
7797
|
+
padding: "$8"
|
|
7746
7798
|
},
|
|
7747
7799
|
".rdp-today .rdp-day_button": {
|
|
7748
7800
|
color: "$brand500",
|
|
@@ -7914,7 +7966,9 @@ function Calendar(_a) {
|
|
|
7914
7966
|
selected,
|
|
7915
7967
|
setSelected,
|
|
7916
7968
|
position = "bottom",
|
|
7917
|
-
hasError
|
|
7969
|
+
hasError,
|
|
7970
|
+
expand,
|
|
7971
|
+
allowPastDates = false
|
|
7918
7972
|
} = _b, props = __objRest(_b, [
|
|
7919
7973
|
"action",
|
|
7920
7974
|
"actionText",
|
|
@@ -7922,7 +7976,9 @@ function Calendar(_a) {
|
|
|
7922
7976
|
"selected",
|
|
7923
7977
|
"setSelected",
|
|
7924
7978
|
"position",
|
|
7925
|
-
"hasError"
|
|
7979
|
+
"hasError",
|
|
7980
|
+
"expand",
|
|
7981
|
+
"allowPastDates"
|
|
7926
7982
|
]);
|
|
7927
7983
|
const [inputValue, setInputValue] = (0, import_react7.useState)("");
|
|
7928
7984
|
const [showContainer, setShowCalendar] = (0, import_react7.useState)(false);
|
|
@@ -7944,15 +8000,20 @@ function Calendar(_a) {
|
|
|
7944
8000
|
setInputValue(masked);
|
|
7945
8001
|
const parsed = parse(masked, "dd/MM/yyyy", /* @__PURE__ */ new Date());
|
|
7946
8002
|
if (isValid(parsed)) {
|
|
8003
|
+
if (!allowPastDates && parsed < today) {
|
|
8004
|
+
console.warn("Datas passadas n\xE3o s\xE3o permitidas:", masked);
|
|
8005
|
+
return;
|
|
8006
|
+
}
|
|
7947
8007
|
setSelected(parsed);
|
|
7948
8008
|
} else {
|
|
7949
8009
|
console.warn("Data inv\xE1lida inserida no input:", masked);
|
|
7950
8010
|
}
|
|
7951
8011
|
};
|
|
7952
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { ref: dropdownRef, children: [
|
|
8012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
|
|
7953
8013
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7954
8014
|
CalendarButtonStyled,
|
|
7955
8015
|
{
|
|
8016
|
+
expand,
|
|
7956
8017
|
type: "button",
|
|
7957
8018
|
onClick: () => setShowCalendar((prev) => !prev),
|
|
7958
8019
|
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
@@ -7970,42 +8031,36 @@ function Calendar(_a) {
|
|
|
7970
8031
|
)
|
|
7971
8032
|
}
|
|
7972
8033
|
),
|
|
7973
|
-
showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
7974
|
-
|
|
7975
|
-
|
|
7976
|
-
|
|
7977
|
-
|
|
7978
|
-
|
|
7979
|
-
|
|
7980
|
-
|
|
7981
|
-
|
|
7982
|
-
|
|
7983
|
-
|
|
7984
|
-
|
|
7985
|
-
|
|
7986
|
-
|
|
7987
|
-
|
|
7988
|
-
|
|
7989
|
-
|
|
7990
|
-
|
|
7991
|
-
|
|
7992
|
-
|
|
7993
|
-
|
|
7994
|
-
|
|
7995
|
-
|
|
7996
|
-
|
|
7997
|
-
|
|
7998
|
-
|
|
7999
|
-
|
|
8000
|
-
|
|
8001
|
-
|
|
8002
|
-
|
|
8003
|
-
children: actionText != null ? actionText : "Aplicar"
|
|
8004
|
-
}
|
|
8005
|
-
) })
|
|
8006
|
-
]
|
|
8007
|
-
}
|
|
8008
|
-
)
|
|
8034
|
+
showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarContentStyled, { position, children: [
|
|
8035
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8036
|
+
import_react_day_picker.DayPicker,
|
|
8037
|
+
{
|
|
8038
|
+
mode: "single",
|
|
8039
|
+
captionLayout: calendarLayout,
|
|
8040
|
+
selected,
|
|
8041
|
+
onSelect: setSelected,
|
|
8042
|
+
required: true,
|
|
8043
|
+
locale: ptBR,
|
|
8044
|
+
disabled: allowPastDates ? void 0 : { before: today },
|
|
8045
|
+
startMonth: allowPastDates ? void 0 : today,
|
|
8046
|
+
endMonth: maxDate
|
|
8047
|
+
}
|
|
8048
|
+
) }) }),
|
|
8049
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8050
|
+
Button,
|
|
8051
|
+
{
|
|
8052
|
+
variant: "text",
|
|
8053
|
+
color: "brand",
|
|
8054
|
+
type: "button",
|
|
8055
|
+
onClick: () => {
|
|
8056
|
+
setShowCalendar(false);
|
|
8057
|
+
},
|
|
8058
|
+
size: "medium",
|
|
8059
|
+
fontWeight: "medium",
|
|
8060
|
+
children: actionText != null ? actionText : "Aplicar"
|
|
8061
|
+
}
|
|
8062
|
+
) })
|
|
8063
|
+
] })
|
|
8009
8064
|
] })) });
|
|
8010
8065
|
}
|
|
8011
8066
|
|
|
@@ -8068,8 +8123,45 @@ function Drawer({
|
|
|
8068
8123
|
}) {
|
|
8069
8124
|
if (!isOpen) return null;
|
|
8070
8125
|
const drawerContainerRef = (0, import_react8.useRef)(null);
|
|
8071
|
-
useOnClickOutside(drawerContainerRef, () => {
|
|
8072
|
-
|
|
8126
|
+
useOnClickOutside(drawerContainerRef, (event) => {
|
|
8127
|
+
var _a;
|
|
8128
|
+
if (!event || !drawerContainerRef.current) {
|
|
8129
|
+
return;
|
|
8130
|
+
}
|
|
8131
|
+
let target = event.target;
|
|
8132
|
+
if (target.tagName === "HTML" || target.tagName === "BODY") {
|
|
8133
|
+
if (event instanceof MouseEvent) {
|
|
8134
|
+
const actualElement = document.elementFromPoint(
|
|
8135
|
+
event.clientX,
|
|
8136
|
+
event.clientY
|
|
8137
|
+
);
|
|
8138
|
+
if (actualElement) {
|
|
8139
|
+
target = actualElement;
|
|
8140
|
+
}
|
|
8141
|
+
}
|
|
8142
|
+
}
|
|
8143
|
+
let currentElement = target;
|
|
8144
|
+
let hierarchy = [];
|
|
8145
|
+
while (currentElement && currentElement !== document.body) {
|
|
8146
|
+
hierarchy.push({
|
|
8147
|
+
tagName: currentElement.tagName,
|
|
8148
|
+
className: currentElement.className,
|
|
8149
|
+
id: currentElement.id,
|
|
8150
|
+
attributes: Array.from(currentElement.attributes || []).map((attr) => ({
|
|
8151
|
+
name: attr.name,
|
|
8152
|
+
value: attr.value
|
|
8153
|
+
}))
|
|
8154
|
+
});
|
|
8155
|
+
currentElement = currentElement.parentElement;
|
|
8156
|
+
}
|
|
8157
|
+
if ((_a = drawerContainerRef.current) == null ? void 0 : _a.contains(target)) {
|
|
8158
|
+
return;
|
|
8159
|
+
}
|
|
8160
|
+
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]");
|
|
8161
|
+
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]");
|
|
8162
|
+
if (!shouldPreventClose) {
|
|
8163
|
+
onClose();
|
|
8164
|
+
}
|
|
8073
8165
|
});
|
|
8074
8166
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerOverlayStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
8075
8167
|
DrawerContainerStyled,
|
|
@@ -8098,18 +8190,24 @@ var TimePickerStyled = styled("div", {
|
|
|
8098
8190
|
fontFamily: "$default",
|
|
8099
8191
|
lineHeight: "$base",
|
|
8100
8192
|
fontSize: "$14",
|
|
8101
|
-
maxWidth: "200px",
|
|
8102
8193
|
borderRadius: "$sm",
|
|
8103
8194
|
"> div > div": {
|
|
8104
|
-
paddingLeft: "1rem",
|
|
8105
8195
|
input: {
|
|
8106
8196
|
textAlign: "right"
|
|
8107
8197
|
}
|
|
8198
|
+
},
|
|
8199
|
+
variants: {
|
|
8200
|
+
expand: {
|
|
8201
|
+
true: {
|
|
8202
|
+
width: "100%",
|
|
8203
|
+
flex: "1",
|
|
8204
|
+
display: "flex"
|
|
8205
|
+
}
|
|
8206
|
+
}
|
|
8108
8207
|
}
|
|
8109
8208
|
});
|
|
8110
8209
|
var TimePickerDropdownStyled = styled("div", {
|
|
8111
8210
|
position: "absolute",
|
|
8112
|
-
left: 0,
|
|
8113
8211
|
zIndex: 10,
|
|
8114
8212
|
width: "100%",
|
|
8115
8213
|
maxWidth: "8.875rem",
|
|
@@ -8179,14 +8277,21 @@ var InputStyled = styled("input", {
|
|
|
8179
8277
|
var TimePickerButtonStyled = styled("button", {
|
|
8180
8278
|
backgroundColor: "transparent",
|
|
8181
8279
|
border: "none",
|
|
8182
|
-
maxWidth: "200px",
|
|
8183
8280
|
padding: "0",
|
|
8184
8281
|
cursor: "pointer",
|
|
8185
8282
|
"> div > div": {
|
|
8186
|
-
paddingLeft: "1rem",
|
|
8187
8283
|
input: {
|
|
8188
8284
|
textAlign: "right"
|
|
8189
8285
|
}
|
|
8286
|
+
},
|
|
8287
|
+
variants: {
|
|
8288
|
+
expand: {
|
|
8289
|
+
true: {
|
|
8290
|
+
flex: "1",
|
|
8291
|
+
display: "flex",
|
|
8292
|
+
maxWidth: "100%"
|
|
8293
|
+
}
|
|
8294
|
+
}
|
|
8190
8295
|
}
|
|
8191
8296
|
});
|
|
8192
8297
|
var pad = (num) => String(num).padStart(2, "0");
|
|
@@ -8194,7 +8299,8 @@ function TimePicker({
|
|
|
8194
8299
|
selected,
|
|
8195
8300
|
setSelected,
|
|
8196
8301
|
position = "bottom",
|
|
8197
|
-
hasError
|
|
8302
|
+
hasError,
|
|
8303
|
+
expand = false
|
|
8198
8304
|
}) {
|
|
8199
8305
|
const [hours, setHours] = (0, import_react9.useState)("00");
|
|
8200
8306
|
const [minutes, setMinutes] = (0, import_react9.useState)("00");
|
|
@@ -8231,12 +8337,13 @@ function TimePicker({
|
|
|
8231
8337
|
},
|
|
8232
8338
|
[hours, minutes]
|
|
8233
8339
|
);
|
|
8234
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TimePickerStyled, { ref: dropdownRef, children: [
|
|
8340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TimePickerStyled, { ref: dropdownRef, expand, children: [
|
|
8235
8341
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8236
8342
|
TimePickerButtonStyled,
|
|
8237
8343
|
{
|
|
8238
8344
|
type: "button",
|
|
8239
8345
|
onClick: () => setIsOpen((prev) => !prev),
|
|
8346
|
+
expand,
|
|
8240
8347
|
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
8241
8348
|
TextField,
|
|
8242
8349
|
{
|
|
@@ -8255,7 +8362,7 @@ function TimePicker({
|
|
|
8255
8362
|
isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
8256
8363
|
TimePickerDropdownStyled,
|
|
8257
8364
|
{
|
|
8258
|
-
style: position === "top" ? { bottom: "110%" } : { top: "110%" },
|
|
8365
|
+
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" },
|
|
8259
8366
|
children: [
|
|
8260
8367
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TimerPickerContentStyled, { children: [
|
|
8261
8368
|
["hours", "minutes"].map((unit) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
@@ -9280,11 +9387,11 @@ function Tooltip({
|
|
|
9280
9387
|
}
|
|
9281
9388
|
|
|
9282
9389
|
// src/components/MultiSelect.tsx
|
|
9390
|
+
var import_react16 = __toESM(require("react"));
|
|
9283
9391
|
var import_themes18 = require("@radix-ui/themes");
|
|
9284
9392
|
var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
|
|
9285
9393
|
var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
|
|
9286
|
-
var
|
|
9287
|
-
var import_react17 = __toESM(require("react"));
|
|
9394
|
+
var import_react17 = require("react");
|
|
9288
9395
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
9289
9396
|
var StyledContent = styled(import_themes18.DropdownMenu.Content, {
|
|
9290
9397
|
backgroundColor: "$dark50",
|
|
@@ -9292,7 +9399,10 @@ var StyledContent = styled(import_themes18.DropdownMenu.Content, {
|
|
|
9292
9399
|
padding: "$8 0",
|
|
9293
9400
|
boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
|
|
9294
9401
|
boxSizing: "border-box",
|
|
9295
|
-
border: "1px solid $dark300"
|
|
9402
|
+
border: "1px solid $dark300",
|
|
9403
|
+
zIndex: 999999,
|
|
9404
|
+
minWidth: "var(--radix-dropdown-menu-trigger-width)",
|
|
9405
|
+
maxWidth: "var(--radix-dropdown-menu-trigger-width)"
|
|
9296
9406
|
});
|
|
9297
9407
|
var StyledTrigger = styled("div", {
|
|
9298
9408
|
minHeight: "40px",
|
|
@@ -9304,6 +9414,7 @@ var StyledTrigger = styled("div", {
|
|
|
9304
9414
|
padding: "$6 $14",
|
|
9305
9415
|
boxSizing: "border-box",
|
|
9306
9416
|
gap: "4px",
|
|
9417
|
+
width: "100%",
|
|
9307
9418
|
variants: {
|
|
9308
9419
|
color: {
|
|
9309
9420
|
default: {
|
|
@@ -9339,7 +9450,39 @@ var StyledItem2 = styled("div", __spreadValues({}, itemStyle));
|
|
|
9339
9450
|
var BadgeCloseBtn = styled("div", {
|
|
9340
9451
|
cursor: "pointer"
|
|
9341
9452
|
});
|
|
9342
|
-
var
|
|
9453
|
+
var StyledFlexWithMaxHeight = styled(Flex2, {
|
|
9454
|
+
variants: {
|
|
9455
|
+
hasMaxHeight: {
|
|
9456
|
+
true: {
|
|
9457
|
+
overflowY: "auto",
|
|
9458
|
+
"&::-webkit-scrollbar": {
|
|
9459
|
+
width: "4px"
|
|
9460
|
+
},
|
|
9461
|
+
"&::-webkit-scrollbar-track": {
|
|
9462
|
+
backgroundColor: "$dark100",
|
|
9463
|
+
borderRadius: "2px"
|
|
9464
|
+
},
|
|
9465
|
+
"&::-webkit-scrollbar-thumb": {
|
|
9466
|
+
backgroundColor: "$dark300",
|
|
9467
|
+
borderRadius: "2px",
|
|
9468
|
+
"&:hover": {
|
|
9469
|
+
backgroundColor: "$dark400"
|
|
9470
|
+
}
|
|
9471
|
+
}
|
|
9472
|
+
}
|
|
9473
|
+
}
|
|
9474
|
+
},
|
|
9475
|
+
defaultVariants: {
|
|
9476
|
+
hasMaxHeight: false
|
|
9477
|
+
}
|
|
9478
|
+
});
|
|
9479
|
+
var StyledText = styled(Text, {
|
|
9480
|
+
flex: 1,
|
|
9481
|
+
overflow: "hidden",
|
|
9482
|
+
whiteSpace: "nowrap",
|
|
9483
|
+
textOverflow: "ellipsis"
|
|
9484
|
+
});
|
|
9485
|
+
var MultiSelect = import_react16.default.forwardRef(
|
|
9343
9486
|
({
|
|
9344
9487
|
placeholder,
|
|
9345
9488
|
value: selectedValues = [],
|
|
@@ -9351,12 +9494,12 @@ var MultiSelect = import_react17.default.forwardRef(
|
|
|
9351
9494
|
showSelectedValues = true,
|
|
9352
9495
|
singleSelect = false,
|
|
9353
9496
|
selectedOrientation = "column",
|
|
9354
|
-
disabled = false
|
|
9497
|
+
disabled = false,
|
|
9498
|
+
maxHeight
|
|
9355
9499
|
}, fowardedRef) => {
|
|
9356
|
-
var _a;
|
|
9357
9500
|
const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
|
|
9358
9501
|
const triggerRef = (0, import_react16.useRef)(null);
|
|
9359
|
-
const labelByValue = (0,
|
|
9502
|
+
const labelByValue = (0, import_react17.useMemo)(() => {
|
|
9360
9503
|
return options.reduce((prev, curr) => {
|
|
9361
9504
|
return __spreadProps(__spreadValues({}, prev), {
|
|
9362
9505
|
[curr.value]: curr.label
|
|
@@ -9370,8 +9513,7 @@ var MultiSelect = import_react17.default.forwardRef(
|
|
|
9370
9513
|
},
|
|
9371
9514
|
[selectedValues, onValueChange]
|
|
9372
9515
|
);
|
|
9373
|
-
const
|
|
9374
|
-
const text = (0, import_react16.useMemo)(() => {
|
|
9516
|
+
const text = (0, import_react17.useMemo)(() => {
|
|
9375
9517
|
if (selectedValues.length > 0 && singleSelect) {
|
|
9376
9518
|
const value = selectedValues[0];
|
|
9377
9519
|
return labelByValue[value];
|
|
@@ -9382,67 +9524,60 @@ var MultiSelect = import_react17.default.forwardRef(
|
|
|
9382
9524
|
onValueChange == null ? void 0 : onValueChange([v]);
|
|
9383
9525
|
setIsOpen(false);
|
|
9384
9526
|
};
|
|
9527
|
+
const handleToggle = (0, import_react16.useCallback)(
|
|
9528
|
+
(e) => {
|
|
9529
|
+
e.preventDefault();
|
|
9530
|
+
e.stopPropagation();
|
|
9531
|
+
if (disabled) return;
|
|
9532
|
+
setIsOpen((prev) => !prev);
|
|
9533
|
+
},
|
|
9534
|
+
[disabled]
|
|
9535
|
+
);
|
|
9385
9536
|
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.Theme, { children: [
|
|
9386
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.DropdownMenu.Root, {
|
|
9387
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9388
|
-
|
|
9537
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.DropdownMenu.Root, { children: [
|
|
9538
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
9539
|
+
StyledTrigger,
|
|
9389
9540
|
{
|
|
9390
|
-
|
|
9391
|
-
if (
|
|
9392
|
-
|
|
9393
|
-
|
|
9394
|
-
|
|
9395
|
-
|
|
9396
|
-
|
|
9397
|
-
|
|
9398
|
-
width
|
|
9399
|
-
},
|
|
9400
|
-
ref: (r) => {
|
|
9401
|
-
if (!r) return;
|
|
9402
|
-
triggerRef.current = r;
|
|
9403
|
-
if (fowardedRef) {
|
|
9404
|
-
if (typeof fowardedRef === "function") fowardedRef(r);
|
|
9405
|
-
else {
|
|
9406
|
-
fowardedRef.current = r;
|
|
9407
|
-
}
|
|
9408
|
-
}
|
|
9409
|
-
},
|
|
9410
|
-
color,
|
|
9411
|
-
disabled,
|
|
9412
|
-
children: [
|
|
9413
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9414
|
-
Text,
|
|
9415
|
-
{
|
|
9416
|
-
typography: "labelMedium",
|
|
9417
|
-
css: {
|
|
9418
|
-
flex: 1,
|
|
9419
|
-
overflow: "hidden",
|
|
9420
|
-
whiteSpace: "nowrap",
|
|
9421
|
-
textOverflow: "ellipsis"
|
|
9422
|
-
},
|
|
9423
|
-
color: disabled ? "dark400" : void 0,
|
|
9424
|
-
children: text
|
|
9425
|
-
}
|
|
9426
|
-
),
|
|
9427
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9428
|
-
import_react_fontawesome3.FontAwesomeIcon,
|
|
9429
|
-
{
|
|
9430
|
-
icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
|
|
9431
|
-
size: "sm",
|
|
9432
|
-
color: disabled ? colors.dark400 : colors.dark600
|
|
9433
|
-
}
|
|
9434
|
-
)
|
|
9435
|
-
]
|
|
9541
|
+
ref: (r) => {
|
|
9542
|
+
if (!r) return;
|
|
9543
|
+
triggerRef.current = r;
|
|
9544
|
+
if (fowardedRef) {
|
|
9545
|
+
if (typeof fowardedRef === "function") fowardedRef(r);
|
|
9546
|
+
else {
|
|
9547
|
+
fowardedRef.current = r;
|
|
9548
|
+
}
|
|
9436
9549
|
}
|
|
9437
|
-
|
|
9550
|
+
},
|
|
9551
|
+
color,
|
|
9552
|
+
disabled,
|
|
9553
|
+
style: width !== "100%" ? { width } : void 0,
|
|
9554
|
+
onClick: handleToggle,
|
|
9555
|
+
children: [
|
|
9556
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9557
|
+
StyledText,
|
|
9558
|
+
{
|
|
9559
|
+
typography: "labelMedium",
|
|
9560
|
+
color: disabled ? "dark400" : void 0,
|
|
9561
|
+
children: text
|
|
9562
|
+
}
|
|
9563
|
+
),
|
|
9564
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9565
|
+
import_react_fontawesome3.FontAwesomeIcon,
|
|
9566
|
+
{
|
|
9567
|
+
icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
|
|
9568
|
+
size: "sm",
|
|
9569
|
+
color: disabled ? colors.dark400 : colors.dark600
|
|
9570
|
+
}
|
|
9571
|
+
)
|
|
9572
|
+
]
|
|
9438
9573
|
}
|
|
9439
|
-
),
|
|
9574
|
+
) }),
|
|
9440
9575
|
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9441
9576
|
StyledContent,
|
|
9442
9577
|
{
|
|
9443
9578
|
css: {
|
|
9444
|
-
width:
|
|
9445
|
-
zIndex
|
|
9579
|
+
width: "100%",
|
|
9580
|
+
zIndex: zIndex === "auto" ? 999999 : zIndex
|
|
9446
9581
|
},
|
|
9447
9582
|
children: !singleSelect ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9448
9583
|
CheckboxGroup,
|
|
@@ -9451,9 +9586,27 @@ var MultiSelect = import_react17.default.forwardRef(
|
|
|
9451
9586
|
onValueChange: (v) => {
|
|
9452
9587
|
onValueChange == null ? void 0 : onValueChange(v);
|
|
9453
9588
|
},
|
|
9454
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9589
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9590
|
+
StyledFlexWithMaxHeight,
|
|
9591
|
+
{
|
|
9592
|
+
direction: "column",
|
|
9593
|
+
gap: 8,
|
|
9594
|
+
hasMaxHeight: !!maxHeight,
|
|
9595
|
+
style: maxHeight ? { maxHeight } : void 0,
|
|
9596
|
+
children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
|
|
9597
|
+
}
|
|
9598
|
+
)
|
|
9599
|
+
}
|
|
9600
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9601
|
+
StyledFlexWithMaxHeight,
|
|
9602
|
+
{
|
|
9603
|
+
direction: "column",
|
|
9604
|
+
gap: 8,
|
|
9605
|
+
hasMaxHeight: !!maxHeight,
|
|
9606
|
+
style: maxHeight ? { maxHeight } : void 0,
|
|
9607
|
+
children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
|
|
9455
9608
|
}
|
|
9456
|
-
)
|
|
9609
|
+
)
|
|
9457
9610
|
}
|
|
9458
9611
|
)
|
|
9459
9612
|
] }),
|
|
@@ -9462,35 +9615,40 @@ var MultiSelect = import_react17.default.forwardRef(
|
|
|
9462
9615
|
{
|
|
9463
9616
|
direction: selectedOrientation,
|
|
9464
9617
|
gap: 8,
|
|
9465
|
-
align: "center",
|
|
9618
|
+
align: selectedOrientation === "column" ? "start" : "center",
|
|
9466
9619
|
justify: "start",
|
|
9467
|
-
css: {
|
|
9468
|
-
|
|
9469
|
-
|
|
9470
|
-
|
|
9471
|
-
|
|
9472
|
-
|
|
9473
|
-
|
|
9474
|
-
|
|
9475
|
-
|
|
9476
|
-
|
|
9477
|
-
|
|
9478
|
-
|
|
9479
|
-
|
|
9480
|
-
|
|
9481
|
-
|
|
9482
|
-
|
|
9483
|
-
|
|
9484
|
-
|
|
9485
|
-
|
|
9486
|
-
|
|
9487
|
-
|
|
9488
|
-
|
|
9489
|
-
|
|
9490
|
-
|
|
9491
|
-
|
|
9492
|
-
|
|
9493
|
-
|
|
9620
|
+
css: { margin: "8px 0" },
|
|
9621
|
+
children: selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
9622
|
+
Flex2,
|
|
9623
|
+
{
|
|
9624
|
+
gap: 4,
|
|
9625
|
+
align: "center",
|
|
9626
|
+
css: { flexWrap: "wrap" },
|
|
9627
|
+
children: [
|
|
9628
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9629
|
+
BadgeCloseBtn,
|
|
9630
|
+
{
|
|
9631
|
+
onClick: (e) => {
|
|
9632
|
+
e.stopPropagation();
|
|
9633
|
+
handleRemove(value);
|
|
9634
|
+
},
|
|
9635
|
+
role: "button",
|
|
9636
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
|
|
9637
|
+
}
|
|
9638
|
+
),
|
|
9639
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
9640
|
+
Text,
|
|
9641
|
+
{
|
|
9642
|
+
typography: "captionMedium",
|
|
9643
|
+
fontWeight: "regular",
|
|
9644
|
+
color: "dark600",
|
|
9645
|
+
children: labelByValue[value]
|
|
9646
|
+
}
|
|
9647
|
+
)
|
|
9648
|
+
]
|
|
9649
|
+
},
|
|
9650
|
+
value
|
|
9651
|
+
))
|
|
9494
9652
|
}
|
|
9495
9653
|
) })
|
|
9496
9654
|
] });
|
|
@@ -9894,13 +10052,15 @@ var MultiSelectFormField = (_a) => {
|
|
|
9894
10052
|
label,
|
|
9895
10053
|
required,
|
|
9896
10054
|
selectedOrientation = "column",
|
|
9897
|
-
zIndex
|
|
10055
|
+
zIndex,
|
|
10056
|
+
maxHeight
|
|
9898
10057
|
} = _b, rest = __objRest(_b, [
|
|
9899
10058
|
"name",
|
|
9900
10059
|
"label",
|
|
9901
10060
|
"required",
|
|
9902
10061
|
"selectedOrientation",
|
|
9903
|
-
"zIndex"
|
|
10062
|
+
"zIndex",
|
|
10063
|
+
"maxHeight"
|
|
9904
10064
|
]);
|
|
9905
10065
|
var _a2;
|
|
9906
10066
|
const { field, fieldState } = (0, import_react_hook_form4.useController)({
|
|
@@ -9934,7 +10094,8 @@ var MultiSelectFormField = (_a) => {
|
|
|
9934
10094
|
ref,
|
|
9935
10095
|
color: haveError ? "error" : "default",
|
|
9936
10096
|
selectedOrientation,
|
|
9937
|
-
zIndex
|
|
10097
|
+
zIndex,
|
|
10098
|
+
maxHeight
|
|
9938
10099
|
}, rest)
|
|
9939
10100
|
),
|
|
9940
10101
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorFormMessage, { message: errorMsg })
|
|
@@ -10184,10 +10345,6 @@ var BirthDateFormField = ({
|
|
|
10184
10345
|
|
|
10185
10346
|
// src/components/FormFields/IdentityDocumentNumberFormField.tsx
|
|
10186
10347
|
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
10187
|
-
var isValidRG = (rg) => {
|
|
10188
|
-
const cleaned = rg.replace(/[^\d]/g, "");
|
|
10189
|
-
return /^\d{9}$/.test(cleaned);
|
|
10190
|
-
};
|
|
10191
10348
|
var IdentityDocumentNumberFormField = ({
|
|
10192
10349
|
name,
|
|
10193
10350
|
label,
|
|
@@ -10207,9 +10364,11 @@ var IdentityDocumentNumberFormField = ({
|
|
|
10207
10364
|
replacement: { _: /[0-9]/ }
|
|
10208
10365
|
},
|
|
10209
10366
|
validate: (value) => {
|
|
10210
|
-
const
|
|
10367
|
+
const cleaned = value.replace(/[^\d]/g, "");
|
|
10368
|
+
const isEmpty = cleaned.length === 0;
|
|
10211
10369
|
if (!required && isEmpty) return true;
|
|
10212
|
-
|
|
10370
|
+
if (cleaned.length >= 3) return true;
|
|
10371
|
+
return validationErrorMessage;
|
|
10213
10372
|
}
|
|
10214
10373
|
}
|
|
10215
10374
|
);
|
|
@@ -10794,7 +10953,6 @@ var import_react_hook_form11 = require("react-hook-form");
|
|
|
10794
10953
|
// src/components/RichEditor/QuillComponent.tsx
|
|
10795
10954
|
var import_react20 = require("react");
|
|
10796
10955
|
var import_react_quilljs = require("react-quilljs");
|
|
10797
|
-
var import_quill_snow = require("quill/dist/quill.snow.css");
|
|
10798
10956
|
|
|
10799
10957
|
// src/utils/uploadService.ts
|
|
10800
10958
|
var generateUniqueFilename = (originalName) => {
|
|
@@ -11113,10 +11271,8 @@ var QuillComponent = ({
|
|
|
11113
11271
|
const headerSelect = toolbarElement.querySelector(
|
|
11114
11272
|
"select[data-value]"
|
|
11115
11273
|
);
|
|
11116
|
-
console.log(headerSelect, "headerSelect");
|
|
11117
11274
|
if (headerSelect) {
|
|
11118
11275
|
const options = headerSelect.querySelectorAll("option");
|
|
11119
|
-
console.log(options, "options");
|
|
11120
11276
|
options.forEach((option) => {
|
|
11121
11277
|
if (option.value === "1") {
|
|
11122
11278
|
option.textContent = "T\xEDtulo 1";
|
|
@@ -11128,7 +11284,7 @@ var QuillComponent = ({
|
|
|
11128
11284
|
});
|
|
11129
11285
|
}
|
|
11130
11286
|
}
|
|
11131
|
-
},
|
|
11287
|
+
}, 2e3);
|
|
11132
11288
|
}
|
|
11133
11289
|
}, [quill, onChange, handleImageUpload]);
|
|
11134
11290
|
(0, import_react20.useEffect)(() => {
|
|
@@ -11428,7 +11584,8 @@ var CalendarFormField = (_a) => {
|
|
|
11428
11584
|
validate,
|
|
11429
11585
|
validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
|
|
11430
11586
|
rules,
|
|
11431
|
-
onChange
|
|
11587
|
+
onChange,
|
|
11588
|
+
allowPastDates
|
|
11432
11589
|
} = _b, calendarProps = __objRest(_b, [
|
|
11433
11590
|
"name",
|
|
11434
11591
|
"label",
|
|
@@ -11436,7 +11593,8 @@ var CalendarFormField = (_a) => {
|
|
|
11436
11593
|
"validate",
|
|
11437
11594
|
"validationErrorMessage",
|
|
11438
11595
|
"rules",
|
|
11439
|
-
"onChange"
|
|
11596
|
+
"onChange",
|
|
11597
|
+
"allowPastDates"
|
|
11440
11598
|
]);
|
|
11441
11599
|
const handleValidate = (0, import_react21.useCallback)(
|
|
11442
11600
|
(value) => {
|
|
@@ -11464,7 +11622,7 @@ var CalendarFormField = (_a) => {
|
|
|
11464
11622
|
const handleCalendarChange = (date) => {
|
|
11465
11623
|
setSelected(date);
|
|
11466
11624
|
};
|
|
11467
|
-
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex2, { direction: "column", children: [
|
|
11625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
|
|
11468
11626
|
label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
11469
11627
|
FormLabel,
|
|
11470
11628
|
{
|
|
@@ -11482,7 +11640,8 @@ var CalendarFormField = (_a) => {
|
|
|
11482
11640
|
const date = typeof value === "function" ? value(selected) : value;
|
|
11483
11641
|
handleCalendarChange(date);
|
|
11484
11642
|
},
|
|
11485
|
-
hasError: haveError
|
|
11643
|
+
hasError: haveError,
|
|
11644
|
+
allowPastDates
|
|
11486
11645
|
}, calendarProps)
|
|
11487
11646
|
),
|
|
11488
11647
|
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorFormMessage, { message: errorMsg })
|
|
@@ -11535,7 +11694,7 @@ var TimePickerFormField = (_a) => {
|
|
|
11535
11694
|
const handleTimePickerChange = (time) => {
|
|
11536
11695
|
setSelected(time);
|
|
11537
11696
|
};
|
|
11538
|
-
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex2, { direction: "column", children: [
|
|
11697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
|
|
11539
11698
|
label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
11540
11699
|
FormLabel,
|
|
11541
11700
|
{
|