@lets-events/react 12.0.0 → 12.1.0

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.
Files changed (19) hide show
  1. package/.turbo/turbo-build.log +8 -8
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.d.mts +21 -9
  4. package/dist/index.d.ts +21 -9
  5. package/dist/index.js +327 -167
  6. package/dist/index.mjs +324 -164
  7. package/package.json +1 -1
  8. package/src/components/Button/styledComponents.ts +1 -0
  9. package/src/components/Calendar/index.tsx +14 -7
  10. package/src/components/Calendar/styledComponents.ts +247 -206
  11. package/src/components/Drawer/index.tsx +76 -2
  12. package/src/components/FormFields/CalendarFormField.tsx +4 -1
  13. package/src/components/FormFields/IdentityDocumentNumberFormField.tsx +4 -7
  14. package/src/components/FormFields/MultiSelectFormField.tsx +3 -0
  15. package/src/components/FormFields/TimePickerFormField.tsx +1 -1
  16. package/src/components/MultiSelect.tsx +100 -55
  17. package/src/components/RichEditor/QuillComponent.tsx +1 -3
  18. package/src/components/TimePicker.tsx +32 -8
  19. package/src/hooks/useOnClickOutside.tsx +25 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lets-events/react",
3
- "version": "12.0.0",
3
+ "version": "12.1.0",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/components/Button/styledComponents.ts CHANGED
@@ -254,6 +254,7 @@ export const ButtonStyled = styled(ButtonRadix, {
254
254
  color: "$$buttonColor",
255
255
  width: "100%",
256
256
  borderRadius: 0,
257
+ whiteSpace: "nowrap",
257
258
  "&:hover": {
258
259
  backgroundColor: "$dark100",
259
260
  },
package/src/components/Calendar/index.tsx CHANGED
@@ -19,10 +19,12 @@ export type CalendarProps = ComponentProps<typeof CalendarStyled> & {
19
19
  calendarLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
20
20
  selected: Date | undefined;
21
21
  setSelected: React.Dispatch<React.SetStateAction<Date | undefined>>;
22
- position?: "top" | "bottom";
22
+ position?: "top" | "bottom" | "top-right" | "bottom-right";
23
23
  action?: boolean;
24
24
  actionText?: string;
25
25
  hasError?: boolean;
26
+ expand?: boolean;
27
+ allowPastDates?: boolean;
26
28
  };
27
29
 
28
30
  function formatToDateMask(value: string): string {
@@ -41,6 +43,8 @@ export function Calendar({
41
43
  setSelected,
42
44
  position = "bottom",
43
45
  hasError,
46
+ expand,
47
+ allowPastDates = false,
44
48
  ...props
45
49
  }: CalendarProps) {
46
50
  const [inputValue, setInputValue] = useState("");
@@ -68,6 +72,10 @@ export function Calendar({
68
72
 
69
73
  const parsed = parse(masked, "dd/MM/yyyy", new Date());
70
74
  if (isValid(parsed)) {
75
+ if (!allowPastDates && parsed < today) {
76
+ console.warn("Datas passadas não são permitidas:", masked);
77
+ return;
78
+ }
71
79
  setSelected(parsed);
72
80
  } else {
73
81
  console.warn("Data inválida inserida no input:", masked);
@@ -76,8 +84,9 @@ export function Calendar({
76
84
 
77
85
  return (
78
86
  <div>
79
- <CalendarStyled {...props} ref={dropdownRef}>
87
+ <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
80
88
  <CalendarButtonStyled
89
+ expand={expand}
81
90
  type="button"
82
91
  onClick={() => setShowCalendar((prev) => !prev)}
83
92
  >
@@ -96,9 +105,7 @@ export function Calendar({
96
105
  </TextField>
97
106
  </CalendarButtonStyled>
98
107
  {showContainer && (
99
- <CalendarContentStyled
100
- style={position === "top" ? { bottom: "110%" } : { top: "110%" }}
101
- >
108
+ <CalendarContentStyled position={position}>
102
109
  <Box>
103
110
  <DayPickerWrapperStyled>
104
111
  <DayPicker
@@ -108,8 +115,8 @@ export function Calendar({
108
115
  onSelect={setSelected}
109
116
  required
110
117
  locale={ptBR}
111
- disabled={{ before: today }}
112
- startMonth={today}
118
+ disabled={allowPastDates ? undefined : { before: today }}
119
+ startMonth={allowPastDates ? undefined : today}
113
120
  endMonth={maxDate}
114
121
  />
115
122
  </DayPickerWrapperStyled>
package/src/components/Calendar/styledComponents.ts CHANGED
@@ -1,209 +1,250 @@
1
- import { styled } from "../../styles"
1
+ import { styled } from "../../styles";
2
2
 
3
- export const CalendarStyled = styled('div', {
4
- fontFamily: '$default',
5
- lineHeight: '$base',
6
- fontSize: '$14',
7
- borderRadius: '$sm',
8
- position: 'relative',
9
- })
10
- export const CalendarButtonStyled = styled('button', {
11
- backgroundColor: 'transparent',
12
- border: 'none',
13
- maxWidth: '200px',
14
- padding: '0',
15
- cursor: 'pointer',
16
- '> div > div': {
17
- paddingLeft: '1rem',
18
- 'input': {
19
- textAlign: 'right',
20
- }
21
- },
22
- })
23
- export const CalendarContentStyled = styled('div', {
24
- fontFamily: '$default',
25
- lineHeight: '$base',
26
- fontSize: '$14',
27
- width: '100%',
28
- maxWidth: 'fit-content',
29
- border: '1px solid $neutral300',
30
- borderRadius: '$sm',
31
- boxShadow: '0px 2px 8px 0px $shadow50',
32
- position: 'absolute',
33
- left: '0',
34
- backgroundColor: '$neutral50',
35
- zIndex: '999999',
36
- })
37
-
38
- export const CalendarFooterStyled = styled('div', {
39
- borderTop: '2px solid $neutral100',
40
- padding: '$4 $16',
41
- display: 'flex',
42
- justifyContent: 'center',
43
- alignItems: 'center',
44
- height: '3rem',
45
- })
3
+ export const CalendarStyled = styled("div", {
4
+ fontFamily: "$default",
5
+ lineHeight: "$base",
6
+ fontSize: "$14",
7
+ borderRadius: "$sm",
8
+ position: "relative",
9
+ width: "fit-content",
10
+ variants: {
11
+ expand: {
12
+ true: {
13
+ width: "100%",
14
+ flex: "1",
15
+ display: "flex",
16
+ },
17
+ },
18
+ },
19
+ });
20
+ export const CalendarButtonStyled = styled("button", {
21
+ backgroundColor: "transparent",
22
+ border: "none",
23
+ maxWidth: "200px",
24
+ padding: "0",
25
+ cursor: "pointer",
26
+ "> div > div": {
27
+ paddingLeft: "0",
28
+ input: {
29
+ textAlign: "right",
30
+ },
31
+ },
32
+ variants: {
33
+ expand: {
34
+ true: {
35
+ flex: "1",
36
+ display: "flex",
37
+ maxWidth: "100%",
38
+ },
39
+ },
40
+ },
41
+ });
42
+ export const CalendarContentStyled = styled("div", {
43
+ fontFamily: "$default",
44
+ lineHeight: "$base",
45
+ fontSize: "$14",
46
+ maxWidth: "fit-content",
47
+ border: "1px solid $neutral300",
48
+ borderRadius: "$sm",
49
+ boxShadow: "0px 2px 8px 0px $shadow50",
50
+ position: "absolute",
51
+ backgroundColor: "$neutral50",
52
+ zIndex: "999999",
53
+ variants: {
54
+ position: {
55
+ top: {
56
+ bottom: "110%",
57
+ left: "0",
58
+ },
59
+ bottom: {
60
+ top: "110%",
61
+ left: "0",
62
+ },
63
+ "top-right": {
64
+ bottom: "110%",
65
+ right: "0",
66
+ },
67
+ "bottom-right": {
68
+ top: "110%",
69
+ right: "0",
70
+ },
71
+ },
72
+ },
73
+ });
46
74
 
47
- export const DayPickerWrapperStyled = styled('div', {
48
- '.rt-TextFieldInput': {
49
- fontFamily: '$default',
50
- fontSize: '$14',
51
- color: '$dark500',
52
- },
53
- '.rdp-root': {
54
- padding: '$16',
55
- },
56
- '.rdp-today .rdp-day_button': {
57
- color: '$brand500',
58
- textDecoration: 'underline',
59
- },
60
- '.rdp-day.rdp-disabled .rdp-day_button': {
61
- color: '$dark400'
62
- },
63
- '.rdp-day_button': {
64
- height: '32px',
65
- width: '32px',
66
- borderRadius: '$sm',
67
- fontSize: '$14',
68
- color: '$text',
69
- backgroundColor: 'transparent',
70
- border: '1px solid transparent',
71
- transition: 'all 0.2s ease-in-out',
72
- cursor: 'pointer',
73
- },
74
- '.rdp-day_button:hover': {
75
- backgroundColor: '$dark100',
76
- borderColor: '$brand500',
77
- },
78
- '.rdp-day.rdp-disabled .rdp-day_button:hover': {
79
- backgroundColor: 'transparent',
80
- borderColor: 'transparent',
81
- },
82
- '.rdp-nav': {
83
- display: 'flex',
84
- justifyContent: 'space-between',
85
- width: '100%',
86
- },
87
- '.rdp-nav .rdp-chevron': {
88
- display: 'none',
89
- },
90
- '.rdp-nav .rdp-button_previous': {
91
- display: 'block',
92
- backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cg%20transform=\'scale(-1,1)%20translate(-32,0)\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'white\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/g%3E%3C/svg%3E")',
93
- backgroundRepeat: 'no-repeat',
94
- backgroundPosition: 'center',
95
- backgroundSize: 'cover',
96
- width: '32px',
97
- height: '32px',
75
+ export const CalendarFooterStyled = styled("div", {
76
+ borderTop: "2px solid $neutral100",
77
+ padding: "$4 $16",
78
+ display: "flex",
79
+ justifyContent: "center",
80
+ alignItems: "center",
81
+ height: "3rem",
82
+ });
98
83
 
99
- },
100
- '.rdp-nav .rdp-button_next': {
101
- display: 'block',
102
- backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'white\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
103
- backgroundRepeat: 'no-repeat',
104
- backgroundPosition: 'center',
105
- backgroundSize: 'cover',
106
- width: '32px',
107
- height: '32px',
108
- },
109
- '.rdp-nav .rdp-button_previous:hover': {
110
- backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'%23F4F4F4\'/%3E%3Cpath%20d=\'M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
111
- transition: 'all 0.2s ease-in-out',
112
- },
113
- '.rdp-nav .rdp-button_next:hover': {
114
- backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'32\'%20height=\'32\'%20viewBox=\'0%200%2032%2032\'%20fill=\'none\'%3E%3Cpath%20d=\'M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z\'%20fill=\'%23F4F4F4\'/%3E%3Cpath%20d=\'M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
115
- transition: 'all 0.2s ease-in-out',
116
- },
117
- '.rdp-nav button': {
118
- border: 'none',
119
- backgroundColor: 'transparent',
120
- cursor: 'pointer',
121
- },
122
- '.rdp-month': {
123
- marginTop: '-24px',
124
- },
125
- '.rdp-month_caption': {
126
- display: 'flex',
127
- alignItems: 'center',
128
- justifyContent: 'center',
129
- width: 'calc(100% - 64px)',
130
- margin: '0 auto',
131
- columnGap: '12px',
132
- },
133
- '.rdp-dropdowns span, .rdp-caption_label': {
134
- fontSize: '$16',
135
- fontWeight: '$regular',
136
- lineHeight: '$20',
137
- textTransform: 'capitalize',
138
- },
139
- '.rdp-day.rdp-selected .rdp-day_button': {
140
- backgroundColor: '$brand500',
141
- color: '$neutral50',
142
- borderColor: '$brand500',
143
- },
144
- '.rdp-dropdowns': {
145
- display: 'flex',
146
- alignItems: 'center',
147
- justifyContent: 'center',
148
- width: 'calc(100% - 64px)',
149
- columnGap: '12px',
150
- },
151
- '.rdp-dropdowns .rdp-caption_label': {
152
- display: 'none',
153
- },
154
- '.rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown': {
155
- border: 'none',
156
- backgroundColor: 'transparent',
157
- textTransform: 'capitalize',
158
- height: '1.25rem',
159
- position: 'relative',
160
- fontFamily: '$default',
161
- fontSize: '$16',
162
- lineHeight: '1.25rem',
163
- appearance: 'none',
164
- WebkitAppearance: 'none',
165
- MozAppearance: 'none',
166
- paddingRight: '1.25rem',
167
- zIndex: '3',
168
- },
169
- '.rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active': {
170
- border: 'none',
171
- outline: 'none',
172
- boxShadow: 'none',
173
- },
174
- '.rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus': {
175
- border: 'none',
176
- },
177
- '.rdp-dropdown_root': {
178
- position: 'relative'
179
- },
180
- '.rdp-dropdown_root::after': {
181
- content: '',
182
- height: '1.25rem',
183
- width: '1.25rem',
184
- position: 'absolute',
185
- top: '0',
186
- right: '0',
187
- display: 'block',
188
- backgroundColor: '$neutral50',
189
- backgroundImage: 'url("data:image/svg+xml,%3Csvg%20xmlns=\'http://www.w3.org/2000/svg\'%20width=\'11\'%20height=\'20\'%20viewBox=\'0%200%2011%2020\'%20fill=\'none\'%3E%3Crect%20width=\'11\'%20height=\'20\'%20fill=\'white\'/%3E%3Cpath%20d=\'M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z\'%20fill=\'%23808289\'/%3E%3Cpath%20d=\'M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z\'%20fill=\'%23808289\'/%3E%3C/svg%3E")',
190
- backgroundRepeat: 'no-repeat',
191
- backgroundPosition: 'center',
192
- borderRadius: '0.5rem',
193
- zIndex: '2',
194
- },
195
- '.rdp-weekday': {
196
- textTransform: 'uppercase',
197
- fontWeight: '$regular',
198
- fontSize: '0px',
199
-
200
- },
201
- '.rdp-weekday::first-letter': {
202
- fontSize: '$14',
203
- },
204
- '.rdp-month_grid': {
205
- marginTop: '$16',
206
- paddingTop: '$16',
207
- borderTop: '2px solid $neutral100',
208
- },
209
- })
84
+ export const DayPickerWrapperStyled = styled("div", {
85
+ ".rt-TextFieldInput": {
86
+ fontFamily: "$default",
87
+ fontSize: "$14",
88
+ color: "$dark500",
89
+ },
90
+ ".rdp-root": {
91
+ padding: "$8",
92
+ },
93
+ ".rdp-today .rdp-day_button": {
94
+ color: "$brand500",
95
+ textDecoration: "underline",
96
+ },
97
+ ".rdp-day.rdp-disabled .rdp-day_button": {
98
+ color: "$dark400",
99
+ },
100
+ ".rdp-day_button": {
101
+ height: "32px",
102
+ width: "32px",
103
+ borderRadius: "$sm",
104
+ fontSize: "$14",
105
+ color: "$text",
106
+ backgroundColor: "transparent",
107
+ border: "1px solid transparent",
108
+ transition: "all 0.2s ease-in-out",
109
+ cursor: "pointer",
110
+ },
111
+ ".rdp-day_button:hover": {
112
+ backgroundColor: "$dark100",
113
+ borderColor: "$brand500",
114
+ },
115
+ ".rdp-day.rdp-disabled .rdp-day_button:hover": {
116
+ backgroundColor: "transparent",
117
+ borderColor: "transparent",
118
+ },
119
+ ".rdp-nav": {
120
+ display: "flex",
121
+ justifyContent: "space-between",
122
+ width: "100%",
123
+ },
124
+ ".rdp-nav .rdp-chevron": {
125
+ display: "none",
126
+ },
127
+ ".rdp-nav .rdp-button_previous": {
128
+ display: "block",
129
+ backgroundImage:
130
+ "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cg%20transform='scale(-1,1)%20translate(-32,0)'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/g%3E%3C/svg%3E\")",
131
+ backgroundRepeat: "no-repeat",
132
+ backgroundPosition: "center",
133
+ backgroundSize: "cover",
134
+ width: "32px",
135
+ height: "32px",
136
+ },
137
+ ".rdp-nav .rdp-button_next": {
138
+ display: "block",
139
+ backgroundImage:
140
+ "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='white'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
141
+ backgroundRepeat: "no-repeat",
142
+ backgroundPosition: "center",
143
+ backgroundSize: "cover",
144
+ width: "32px",
145
+ height: "32px",
146
+ },
147
+ ".rdp-nav .rdp-button_previous:hover": {
148
+ backgroundImage:
149
+ "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M12.2937%2015.2938C11.9031%2015.6844%2011.9031%2016.3188%2012.2937%2016.7094L17.2937%2021.7094C17.6844%2022.1%2018.3187%2022.1%2018.7094%2021.7094C19.1%2021.3188%2019.1%2020.6844%2018.7094%2020.2938L14.4156%2016L18.7062%2011.7063C19.0969%2011.3156%2019.0969%2010.6813%2018.7062%2010.2906C18.3156%209.90002%2017.6812%209.90002%2017.2906%2010.2906L12.2906%2015.2906L12.2937%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
150
+ transition: "all 0.2s ease-in-out",
151
+ },
152
+ ".rdp-nav .rdp-button_next:hover": {
153
+ backgroundImage:
154
+ "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Cpath%20d='M0%208C0%203.58172%203.58172%200%208%200H24C28.4183%200%2032%203.58172%2032%208V24C32%2028.4183%2028.4183%2032%2024%2032H8C3.58172%2032%200%2028.4183%200%2024V8Z'%20fill='%23F4F4F4'/%3E%3Cpath%20d='M19.7062%2015.2938C20.0969%2015.6844%2020.0969%2016.3188%2019.7062%2016.7094L14.7062%2021.7094C14.3156%2022.1%2013.6812%2022.1%2013.2906%2021.7094C12.9%2021.3188%2012.9%2020.6844%2013.2906%2020.2938L17.5844%2016L13.2937%2011.7063C12.9031%2011.3156%2012.9031%2010.6813%2013.2937%2010.2906C13.6844%209.90002%2014.3187%209.90002%2014.7094%2010.2906L19.7094%2015.2906L19.7062%2015.2938Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
155
+ transition: "all 0.2s ease-in-out",
156
+ },
157
+ ".rdp-nav button": {
158
+ border: "none",
159
+ backgroundColor: "transparent",
160
+ cursor: "pointer",
161
+ },
162
+ ".rdp-month": {
163
+ marginTop: "-24px",
164
+ },
165
+ ".rdp-month_caption": {
166
+ display: "flex",
167
+ alignItems: "center",
168
+ justifyContent: "center",
169
+ width: "calc(100% - 64px)",
170
+ margin: "0 auto",
171
+ columnGap: "12px",
172
+ },
173
+ ".rdp-dropdowns span, .rdp-caption_label": {
174
+ fontSize: "$16",
175
+ fontWeight: "$regular",
176
+ lineHeight: "$20",
177
+ textTransform: "capitalize",
178
+ },
179
+ ".rdp-day.rdp-selected .rdp-day_button": {
180
+ backgroundColor: "$brand500",
181
+ color: "$neutral50",
182
+ borderColor: "$brand500",
183
+ },
184
+ ".rdp-dropdowns": {
185
+ display: "flex",
186
+ alignItems: "center",
187
+ justifyContent: "center",
188
+ width: "calc(100% - 64px)",
189
+ columnGap: "12px",
190
+ },
191
+ ".rdp-dropdowns .rdp-caption_label": {
192
+ display: "none",
193
+ },
194
+ ".rdp-dropdown.rdp-months_dropdown, .rdp-dropdown.rdp-years_dropdown": {
195
+ border: "none",
196
+ backgroundColor: "transparent",
197
+ textTransform: "capitalize",
198
+ height: "1.25rem",
199
+ position: "relative",
200
+ fontFamily: "$default",
201
+ fontSize: "$16",
202
+ lineHeight: "1.25rem",
203
+ appearance: "none",
204
+ WebkitAppearance: "none",
205
+ MozAppearance: "none",
206
+ paddingRight: "1.25rem",
207
+ zIndex: "3",
208
+ },
209
+ ".rdp-dropdown:focus, .rdp-dropdown:focus-visible, .rdp-dropdown:active": {
210
+ border: "none",
211
+ outline: "none",
212
+ boxShadow: "none",
213
+ },
214
+ ".rdp-dropdown.rdp-months_dropdown:focus, .rdp-dropdown.rdp-years_dropdown:focus":
215
+ {
216
+ border: "none",
217
+ },
218
+ ".rdp-dropdown_root": {
219
+ position: "relative",
220
+ },
221
+ ".rdp-dropdown_root::after": {
222
+ content: "",
223
+ height: "1.25rem",
224
+ width: "1.25rem",
225
+ position: "absolute",
226
+ top: "0",
227
+ right: "0",
228
+ display: "block",
229
+ backgroundColor: "$neutral50",
230
+ backgroundImage:
231
+ "url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='20'%20viewBox='0%200%2011%2020'%20fill='none'%3E%3Crect%20width='11'%20height='20'%20fill='white'/%3E%3Cpath%20d='M5.9414%202.68359C5.69726%202.43945%205.30077%202.43945%205.05663%202.68359L2.55663%205.18359C2.37695%205.36328%202.32421%205.63086%202.42187%205.86523C2.51952%206.09961%202.74609%206.25195%202.99999%206.25195H7.99999C8.25195%206.25195%208.48046%206.09961%208.57812%205.86523C8.67578%205.63086%208.62109%205.36328%208.44335%205.18359L5.94335%202.68359H5.9414Z'%20fill='%23808289'/%3E%3Cpath%20d='M5.05858%2017.3164C5.30272%2017.5605%205.69921%2017.5605%205.94335%2017.3164L8.44335%2014.8164C8.62304%2014.6367%208.67577%2014.3691%208.57811%2014.1348C8.48046%2013.9004%208.25389%2013.748%207.99999%2013.748L2.99999%2013.75C2.74804%2013.75%202.51952%2013.9023%202.42186%2014.1367C2.32421%2014.3711%202.37889%2014.6387%202.55663%2014.8184L5.05663%2017.3184L5.05858%2017.3164Z'%20fill='%23808289'/%3E%3C/svg%3E\")",
232
+ backgroundRepeat: "no-repeat",
233
+ backgroundPosition: "center",
234
+ borderRadius: "0.5rem",
235
+ zIndex: "2",
236
+ },
237
+ ".rdp-weekday": {
238
+ textTransform: "uppercase",
239
+ fontWeight: "$regular",
240
+ fontSize: "0px",
241
+ },
242
+ ".rdp-weekday::first-letter": {
243
+ fontSize: "$14",
244
+ },
245
+ ".rdp-month_grid": {
246
+ marginTop: "$16",
247
+ paddingTop: "$16",
248
+ borderTop: "2px solid $neutral100",
249
+ },
250
+ });
package/src/components/Drawer/index.tsx CHANGED
@@ -30,8 +30,82 @@ export function Drawer({
30
30
  if (!isOpen) return null;
31
31
  const drawerContainerRef = useRef<HTMLDivElement>(null);
32
32
 
33
- useOnClickOutside(drawerContainerRef, () => {
34
- onClose();
33
+ useOnClickOutside(drawerContainerRef, (event?: MouseEvent | TouchEvent) => {
34
+ if (!event || !drawerContainerRef.current) {
35
+ return;
36
+ }
37
+
38
+ let target = event.target as Element;
39
+
40
+ if (target.tagName === "HTML" || target.tagName === "BODY") {
41
+ if (event instanceof MouseEvent) {
42
+ const actualElement = document.elementFromPoint(
43
+ event.clientX,
44
+ event.clientY
45
+ );
46
+ if (actualElement) {
47
+ target = actualElement;
48
+ }
49
+ }
50
+ }
51
+
52
+ let currentElement: Element | null = target;
53
+ let hierarchy = [];
54
+ while (currentElement && currentElement !== document.body) {
55
+ hierarchy.push({
56
+ tagName: currentElement.tagName,
57
+ className: currentElement.className,
58
+ id: currentElement.id,
59
+ attributes: Array.from(currentElement.attributes || []).map((attr) => ({
60
+ name: attr.name,
61
+ value: attr.value,
62
+ })),
63
+ });
64
+ currentElement = currentElement.parentElement;
65
+ }
66
+
67
+ if (drawerContainerRef.current?.contains(target)) {
68
+ return;
69
+ }
70
+ const isDropdownOpen =
71
+ target.closest("[data-radix-popper-content-wrapper]") ||
72
+ target.closest('[role="dialog"]') ||
73
+ target.closest('[data-state="open"]') ||
74
+ target.closest("[data-radix-dropdown-menu-content]") ||
75
+ target.closest("[data-radix-dropdown-menu-root]") ||
76
+ target.closest("[data-radix-dropdown-menu-trigger]") ||
77
+ target.closest("[data-radix-dropdown-menu-portal]") ||
78
+ target.closest("[data-radix-dropdown-menu-item]") ||
79
+ target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
80
+ target.closest("[data-radix-dropdown-menu-radio-item]") ||
81
+ target.closest("[data-radix-dropdown-menu-separator]") ||
82
+ target.closest("[data-radix-dropdown-menu-label]") ||
83
+ target.closest("[data-radix-dropdown-menu-group]") ||
84
+ target.closest("[data-radix-dropdown-menu-sub]") ||
85
+ target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
86
+ target.closest("[data-radix-dropdown-menu-sub-content]") ||
87
+ target.closest("[data-radix-dropdown-menu-radio-group]");
88
+
89
+ const shouldPreventClose =
90
+ isDropdownOpen ||
91
+ target.closest("[data-radix-dropdown-menu-root]") ||
92
+ target.closest("[data-radix-dropdown-menu-trigger]") ||
93
+ target.closest("[data-radix-dropdown-menu-content]") ||
94
+ target.closest("[data-radix-dropdown-menu-portal]") ||
95
+ target.closest("[data-radix-dropdown-menu-item]") ||
96
+ target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
97
+ target.closest("[data-radix-dropdown-menu-radio-item]") ||
98
+ target.closest("[data-radix-dropdown-menu-separator]") ||
99
+ target.closest("[data-radix-dropdown-menu-label]") ||
100
+ target.closest("[data-radix-dropdown-menu-group]") ||
101
+ target.closest("[data-radix-dropdown-menu-sub]") ||
102
+ target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
103
+ target.closest("[data-radix-dropdown-menu-sub-content]") ||
104
+ target.closest("[data-radix-dropdown-menu-radio-group]");
105
+
106
+ if (!shouldPreventClose) {
107
+ onClose();
108
+ }
35
109
  });
36
110
  return (
37
111
  <DrawerOverlayStyled>