@zendeskgarden/react-datepickers 9.12.3 → 9.12.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/elements/DatePicker/DatePicker.js +2 -2
- package/dist/esm/elements/DatePicker/components/Calendar.js +10 -11
- package/dist/esm/elements/DatePicker/components/Input.js +6 -7
- package/dist/esm/elements/DatePicker/components/MonthSelector.js +4 -5
- package/dist/esm/elements/DatePicker/utils/date-picker-reducer.js +110 -115
- package/dist/esm/elements/DatePicker/utils/useDatePickerContext.js +2 -2
- package/dist/esm/elements/DatePickerRange/components/Calendar.js +1 -1
- package/dist/esm/elements/DatePickerRange/components/Month.js +5 -6
- package/dist/esm/elements/DatePickerRange/utils/date-picker-range-reducer.js +207 -212
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +4 -4
- package/dist/esm/styled/StyledCalendar.js +3 -3
- package/dist/esm/styled/StyledCalendarItem.js +9 -10
- package/dist/esm/styled/StyledDatePicker.js +11 -13
- package/dist/esm/styled/StyledDay.js +7 -8
- package/dist/esm/styled/StyledDayLabel.js +3 -3
- package/dist/esm/styled/StyledHeader.js +3 -3
- package/dist/esm/styled/StyledHeaderLabel.js +3 -3
- package/dist/esm/styled/StyledHeaderPaddle.js +11 -13
- package/dist/esm/styled/StyledHighlight.js +13 -15
- package/dist/esm/styled/StyledMenu.js +3 -3
- package/dist/esm/styled/StyledMenuWrapper.js +3 -3
- package/dist/esm/styled/StyledRangeCalendar.js +3 -3
- package/dist/index.cjs.js +384 -406
- package/package.json +4 -4
|
@@ -15,12 +15,11 @@ import { startOfMonth } from 'date-fns/startOfMonth';
|
|
|
15
15
|
import { compareAsc } from 'date-fns/compareAsc';
|
|
16
16
|
import { isAfter } from 'date-fns/isAfter';
|
|
17
17
|
|
|
18
|
-
function formatValue(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} = _ref;
|
|
18
|
+
function formatValue({
|
|
19
|
+
value,
|
|
20
|
+
locale,
|
|
21
|
+
formatDate
|
|
22
|
+
}) {
|
|
24
23
|
let stringValue = '';
|
|
25
24
|
if (value !== undefined && isValid(value)) {
|
|
26
25
|
if (formatDate) {
|
|
@@ -35,10 +34,9 @@ function formatValue(_ref) {
|
|
|
35
34
|
}
|
|
36
35
|
return stringValue;
|
|
37
36
|
}
|
|
38
|
-
function parseInputValue(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
} = _ref2;
|
|
37
|
+
function parseInputValue({
|
|
38
|
+
inputValue
|
|
39
|
+
}) {
|
|
42
40
|
const MINIMUM_DATE = new Date(1001, 0, 0);
|
|
43
41
|
let tryParseDate = parse(inputValue || '', 'P', new Date());
|
|
44
42
|
if (isValid(tryParseDate) && !isBefore(tryParseDate, MINIMUM_DATE)) {
|
|
@@ -54,177 +52,184 @@ function parseInputValue(_ref2) {
|
|
|
54
52
|
}
|
|
55
53
|
return new Date(NaN);
|
|
56
54
|
}
|
|
57
|
-
const datepickerRangeReducer =
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
{
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
if (compareAsc(startValue, startOfMonth(state.previewDate)) === 1 && compareAsc(startValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
|
|
72
|
-
previewDate = state.previewDate;
|
|
73
|
-
} else {
|
|
74
|
-
previewDate = startOfMonth(startValue);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
return {
|
|
78
|
-
...state,
|
|
79
|
-
previewDate,
|
|
80
|
-
isStartFocused: true,
|
|
81
|
-
isEndFocused: false
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
|
-
case 'END_FOCUS':
|
|
85
|
-
{
|
|
86
|
-
let previewDate = state.previewDate;
|
|
87
|
-
if (endValue) {
|
|
88
|
-
if (compareAsc(endValue, startOfMonth(state.previewDate)) === 1 && compareAsc(endValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
|
|
89
|
-
previewDate = state.previewDate;
|
|
90
|
-
} else {
|
|
91
|
-
previewDate = startOfMonth(endValue);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
return {
|
|
95
|
-
...state,
|
|
96
|
-
previewDate,
|
|
97
|
-
isEndFocused: true,
|
|
98
|
-
isStartFocused: false
|
|
99
|
-
};
|
|
100
|
-
}
|
|
101
|
-
case 'START_BLUR':
|
|
102
|
-
{
|
|
103
|
-
let parsedDate;
|
|
104
|
-
if (customParseDate) {
|
|
105
|
-
parsedDate = customParseDate(state.startInputValue);
|
|
55
|
+
const datepickerRangeReducer = ({
|
|
56
|
+
startValue,
|
|
57
|
+
endValue,
|
|
58
|
+
locale,
|
|
59
|
+
formatDate,
|
|
60
|
+
customParseDate
|
|
61
|
+
}) => (state, action) => {
|
|
62
|
+
switch (action.type) {
|
|
63
|
+
case 'START_FOCUS':
|
|
64
|
+
{
|
|
65
|
+
let previewDate = state.previewDate;
|
|
66
|
+
if (startValue) {
|
|
67
|
+
if (compareAsc(startValue, startOfMonth(state.previewDate)) === 1 && compareAsc(startValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
|
|
68
|
+
previewDate = state.previewDate;
|
|
106
69
|
} else {
|
|
107
|
-
|
|
108
|
-
inputValue: state.startInputValue
|
|
109
|
-
});
|
|
70
|
+
previewDate = startOfMonth(startValue);
|
|
110
71
|
}
|
|
111
|
-
const startInputValue = formatValue({
|
|
112
|
-
value: parsedDate,
|
|
113
|
-
locale,
|
|
114
|
-
formatDate
|
|
115
|
-
});
|
|
116
|
-
return {
|
|
117
|
-
...state,
|
|
118
|
-
startInputValue: startInputValue || formatValue({
|
|
119
|
-
value: startValue,
|
|
120
|
-
locale,
|
|
121
|
-
formatDate
|
|
122
|
-
}),
|
|
123
|
-
isStartFocused: false
|
|
124
|
-
};
|
|
125
72
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
73
|
+
return {
|
|
74
|
+
...state,
|
|
75
|
+
previewDate,
|
|
76
|
+
isStartFocused: true,
|
|
77
|
+
isEndFocused: false
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
case 'END_FOCUS':
|
|
81
|
+
{
|
|
82
|
+
let previewDate = state.previewDate;
|
|
83
|
+
if (endValue) {
|
|
84
|
+
if (compareAsc(endValue, startOfMonth(state.previewDate)) === 1 && compareAsc(endValue, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
|
|
85
|
+
previewDate = state.previewDate;
|
|
131
86
|
} else {
|
|
132
|
-
|
|
133
|
-
inputValue: state.endInputValue
|
|
134
|
-
});
|
|
87
|
+
previewDate = startOfMonth(endValue);
|
|
135
88
|
}
|
|
136
|
-
const endInputValue = formatValue({
|
|
137
|
-
value: parsedDate,
|
|
138
|
-
locale,
|
|
139
|
-
formatDate
|
|
140
|
-
}) || formatValue({
|
|
141
|
-
value: endValue,
|
|
142
|
-
locale,
|
|
143
|
-
formatDate
|
|
144
|
-
});
|
|
145
|
-
return {
|
|
146
|
-
...state,
|
|
147
|
-
endInputValue,
|
|
148
|
-
isEndFocused: false
|
|
149
|
-
};
|
|
150
89
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
90
|
+
return {
|
|
91
|
+
...state,
|
|
92
|
+
previewDate,
|
|
93
|
+
isEndFocused: true,
|
|
94
|
+
isStartFocused: false
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
case 'START_BLUR':
|
|
98
|
+
{
|
|
99
|
+
let parsedDate;
|
|
100
|
+
if (customParseDate) {
|
|
101
|
+
parsedDate = customParseDate(state.startInputValue);
|
|
102
|
+
} else {
|
|
103
|
+
parsedDate = parseInputValue({
|
|
104
|
+
inputValue: state.startInputValue
|
|
157
105
|
});
|
|
158
|
-
let previewDate = state.previewDate;
|
|
159
|
-
if (action.value) {
|
|
160
|
-
if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
|
|
161
|
-
previewDate = state.previewDate;
|
|
162
|
-
} else {
|
|
163
|
-
previewDate = startOfMonth(action.value);
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
return {
|
|
167
|
-
...state,
|
|
168
|
-
startInputValue,
|
|
169
|
-
hoverDate: undefined,
|
|
170
|
-
previewDate
|
|
171
|
-
};
|
|
172
106
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
107
|
+
const startInputValue = formatValue({
|
|
108
|
+
value: parsedDate,
|
|
109
|
+
locale,
|
|
110
|
+
formatDate
|
|
111
|
+
});
|
|
112
|
+
return {
|
|
113
|
+
...state,
|
|
114
|
+
startInputValue: startInputValue || formatValue({
|
|
115
|
+
value: startValue,
|
|
177
116
|
locale,
|
|
178
117
|
formatDate
|
|
118
|
+
}),
|
|
119
|
+
isStartFocused: false
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
case 'END_BLUR':
|
|
123
|
+
{
|
|
124
|
+
let parsedDate;
|
|
125
|
+
if (customParseDate) {
|
|
126
|
+
parsedDate = customParseDate(state.endInputValue);
|
|
127
|
+
} else {
|
|
128
|
+
parsedDate = parseInputValue({
|
|
129
|
+
inputValue: state.endInputValue
|
|
179
130
|
});
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
131
|
+
}
|
|
132
|
+
const endInputValue = formatValue({
|
|
133
|
+
value: parsedDate,
|
|
134
|
+
locale,
|
|
135
|
+
formatDate
|
|
136
|
+
}) || formatValue({
|
|
137
|
+
value: endValue,
|
|
138
|
+
locale,
|
|
139
|
+
formatDate
|
|
140
|
+
});
|
|
141
|
+
return {
|
|
142
|
+
...state,
|
|
143
|
+
endInputValue,
|
|
144
|
+
isEndFocused: false
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
case 'CONTROLLED_START_VALUE_CHANGE':
|
|
148
|
+
{
|
|
149
|
+
const startInputValue = formatValue({
|
|
150
|
+
value: action.value,
|
|
151
|
+
locale,
|
|
152
|
+
formatDate
|
|
153
|
+
});
|
|
154
|
+
let previewDate = state.previewDate;
|
|
155
|
+
if (action.value) {
|
|
156
|
+
if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
|
|
157
|
+
previewDate = state.previewDate;
|
|
158
|
+
} else {
|
|
159
|
+
previewDate = startOfMonth(action.value);
|
|
187
160
|
}
|
|
188
|
-
return {
|
|
189
|
-
...state,
|
|
190
|
-
endInputValue,
|
|
191
|
-
hoverDate: undefined,
|
|
192
|
-
previewDate
|
|
193
|
-
};
|
|
194
161
|
}
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
162
|
+
return {
|
|
163
|
+
...state,
|
|
164
|
+
startInputValue,
|
|
165
|
+
hoverDate: undefined,
|
|
166
|
+
previewDate
|
|
167
|
+
};
|
|
168
|
+
}
|
|
169
|
+
case 'CONTROLLED_END_VALUE_CHANGE':
|
|
170
|
+
{
|
|
171
|
+
const endInputValue = formatValue({
|
|
172
|
+
value: action.value,
|
|
173
|
+
locale,
|
|
174
|
+
formatDate
|
|
175
|
+
});
|
|
176
|
+
let previewDate = state.previewDate;
|
|
177
|
+
if (action.value) {
|
|
178
|
+
if (compareAsc(action.value, startOfMonth(state.previewDate)) === 1 && compareAsc(action.value, addMonths(endOfMonth(state.previewDate), 1)) === -1) {
|
|
179
|
+
previewDate = state.previewDate;
|
|
180
|
+
} else {
|
|
181
|
+
previewDate = startOfMonth(action.value);
|
|
204
182
|
}
|
|
183
|
+
}
|
|
184
|
+
return {
|
|
185
|
+
...state,
|
|
186
|
+
endInputValue,
|
|
187
|
+
hoverDate: undefined,
|
|
188
|
+
previewDate
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
case 'CLICK_DATE':
|
|
192
|
+
if (state.isStartFocused) {
|
|
193
|
+
if (endValue !== undefined && (isBefore(action.value, endValue) || isSameDay(action.value, endValue))) {
|
|
205
194
|
return {
|
|
206
195
|
...state,
|
|
207
196
|
startInputValue: formatValue({
|
|
208
197
|
value: action.value
|
|
209
|
-
})
|
|
210
|
-
endInputValue: undefined
|
|
198
|
+
})
|
|
211
199
|
};
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
200
|
+
}
|
|
201
|
+
return {
|
|
202
|
+
...state,
|
|
203
|
+
startInputValue: formatValue({
|
|
204
|
+
value: action.value
|
|
205
|
+
}),
|
|
206
|
+
endInputValue: undefined
|
|
207
|
+
};
|
|
208
|
+
} else if (state.isEndFocused) {
|
|
209
|
+
if (startValue !== undefined && (isAfter(action.value, startValue) || isSameDay(action.value, startValue))) {
|
|
221
210
|
return {
|
|
222
211
|
...state,
|
|
223
|
-
|
|
212
|
+
endInputValue: formatValue({
|
|
224
213
|
value: action.value
|
|
225
214
|
})
|
|
226
215
|
};
|
|
227
|
-
}
|
|
216
|
+
}
|
|
217
|
+
return {
|
|
218
|
+
...state,
|
|
219
|
+
startInputValue: formatValue({
|
|
220
|
+
value: action.value
|
|
221
|
+
})
|
|
222
|
+
};
|
|
223
|
+
} else if (startValue === undefined) {
|
|
224
|
+
return {
|
|
225
|
+
...state,
|
|
226
|
+
startInputValue: formatValue({
|
|
227
|
+
value: action.value
|
|
228
|
+
}),
|
|
229
|
+
endInputValue: undefined
|
|
230
|
+
};
|
|
231
|
+
} else if (endValue === undefined) {
|
|
232
|
+
if (isBefore(action.value, startValue)) {
|
|
228
233
|
return {
|
|
229
234
|
...state,
|
|
230
235
|
startInputValue: formatValue({
|
|
@@ -232,65 +237,55 @@ const datepickerRangeReducer = _ref3 => {
|
|
|
232
237
|
}),
|
|
233
238
|
endInputValue: undefined
|
|
234
239
|
};
|
|
235
|
-
} else if (endValue === undefined) {
|
|
236
|
-
if (isBefore(action.value, startValue)) {
|
|
237
|
-
return {
|
|
238
|
-
...state,
|
|
239
|
-
startInputValue: formatValue({
|
|
240
|
-
value: action.value
|
|
241
|
-
}),
|
|
242
|
-
endInputValue: undefined
|
|
243
|
-
};
|
|
244
|
-
}
|
|
245
|
-
return {
|
|
246
|
-
...state,
|
|
247
|
-
endInputValue: formatValue({
|
|
248
|
-
value: action.value
|
|
249
|
-
})
|
|
250
|
-
};
|
|
251
|
-
}
|
|
252
|
-
return state;
|
|
253
|
-
case 'START_INPUT_ONCHANGE':
|
|
254
|
-
{
|
|
255
|
-
return {
|
|
256
|
-
...state,
|
|
257
|
-
startInputValue: action.value
|
|
258
|
-
};
|
|
259
240
|
}
|
|
260
|
-
case 'END_INPUT_ONCHANGE':
|
|
261
|
-
{
|
|
262
|
-
return {
|
|
263
|
-
...state,
|
|
264
|
-
endInputValue: action.value
|
|
265
|
-
};
|
|
266
|
-
}
|
|
267
|
-
case 'HOVER_DATE':
|
|
268
241
|
return {
|
|
269
242
|
...state,
|
|
270
|
-
|
|
243
|
+
endInputValue: formatValue({
|
|
244
|
+
value: action.value
|
|
245
|
+
})
|
|
271
246
|
};
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
247
|
+
}
|
|
248
|
+
return state;
|
|
249
|
+
case 'START_INPUT_ONCHANGE':
|
|
250
|
+
{
|
|
251
|
+
return {
|
|
252
|
+
...state,
|
|
253
|
+
startInputValue: action.value
|
|
254
|
+
};
|
|
255
|
+
}
|
|
256
|
+
case 'END_INPUT_ONCHANGE':
|
|
257
|
+
{
|
|
258
|
+
return {
|
|
259
|
+
...state,
|
|
260
|
+
endInputValue: action.value
|
|
261
|
+
};
|
|
262
|
+
}
|
|
263
|
+
case 'HOVER_DATE':
|
|
264
|
+
return {
|
|
265
|
+
...state,
|
|
266
|
+
hoverDate: action.value
|
|
267
|
+
};
|
|
268
|
+
case 'PREVIEW_NEXT_MONTH':
|
|
269
|
+
{
|
|
270
|
+
const previewDate = addMonths(state.previewDate, 1);
|
|
271
|
+
return {
|
|
272
|
+
...state,
|
|
273
|
+
previewDate,
|
|
274
|
+
hoverDate: undefined
|
|
275
|
+
};
|
|
276
|
+
}
|
|
277
|
+
case 'PREVIEW_PREVIOUS_MONTH':
|
|
278
|
+
{
|
|
279
|
+
const previewDate = subMonths(state.previewDate, 1);
|
|
280
|
+
return {
|
|
281
|
+
...state,
|
|
282
|
+
previewDate,
|
|
283
|
+
hoverDate: undefined
|
|
284
|
+
};
|
|
285
|
+
}
|
|
286
|
+
default:
|
|
287
|
+
throw new Error();
|
|
288
|
+
}
|
|
294
289
|
};
|
|
295
290
|
function retrieveInitialState(initialProps) {
|
|
296
291
|
let previewDate = initialProps.startValue;
|
|
@@ -6,17 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
|
|
9
|
-
var _path;
|
|
10
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
9
|
+
var _path$1;
|
|
10
|
+
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
11
11
|
var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
12
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
13
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
14
14
|
width: 16,
|
|
15
15
|
height: 16,
|
|
16
16
|
focusable: "false",
|
|
17
17
|
viewBox: "0 0 16 16",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
20
20
|
fill: "currentColor",
|
|
21
21
|
d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
|
|
22
22
|
})));
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'datepickers.calendar';
|
|
10
|
+
const COMPONENT_ID$4 = 'datepickers.calendar';
|
|
11
11
|
const StyledCalendar = styled.div.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$4,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledCalendar",
|
|
16
16
|
componentId: "sc-g5hoe8-0"
|
|
@@ -7,12 +7,11 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'datepickers.calendar_item';
|
|
11
|
-
const sizeStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$3 = 'datepickers.calendar_item';
|
|
11
|
+
const sizeStyles$2 = ({
|
|
12
|
+
$isCompact,
|
|
13
|
+
theme
|
|
14
|
+
}) => {
|
|
16
15
|
let size;
|
|
17
16
|
if ($isCompact) {
|
|
18
17
|
size = `${theme.space.base * 8}px`;
|
|
@@ -22,11 +21,11 @@ const sizeStyles = _ref => {
|
|
|
22
21
|
return css(["width:", ";height:", ";"], size, size);
|
|
23
22
|
};
|
|
24
23
|
const StyledCalendarItem = styled.div.attrs({
|
|
25
|
-
'data-garden-id': COMPONENT_ID,
|
|
26
|
-
'data-garden-version': '9.12.
|
|
24
|
+
'data-garden-id': COMPONENT_ID$3,
|
|
25
|
+
'data-garden-version': '9.12.5'
|
|
27
26
|
}).withConfig({
|
|
28
27
|
displayName: "StyledCalendarItem",
|
|
29
28
|
componentId: "sc-143w8wb-0"
|
|
30
|
-
})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], sizeStyles, componentStyles);
|
|
29
|
+
})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], sizeStyles$2, componentStyles);
|
|
31
30
|
|
|
32
|
-
export { StyledCalendarItem, sizeStyles };
|
|
31
|
+
export { StyledCalendarItem, sizeStyles$2 as sizeStyles };
|
|
@@ -7,19 +7,17 @@
|
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'datepickers.datepicker';
|
|
11
|
-
const sizeStyles =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
10
|
+
const COMPONENT_ID$9 = 'datepickers.datepicker';
|
|
11
|
+
const sizeStyles$4 = ({
|
|
12
|
+
$isCompact,
|
|
13
|
+
theme
|
|
14
|
+
}) => {
|
|
16
15
|
const margin = theme.space.base * ($isCompact ? 4 : 5);
|
|
17
16
|
return css(["margin:", "px;"], margin);
|
|
18
17
|
};
|
|
19
|
-
const colorStyles =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} = _ref2;
|
|
18
|
+
const colorStyles$3 = ({
|
|
19
|
+
theme
|
|
20
|
+
}) => {
|
|
23
21
|
const foreground = getColor({
|
|
24
22
|
variable: 'foreground.default',
|
|
25
23
|
theme
|
|
@@ -27,11 +25,11 @@ const colorStyles = _ref2 => {
|
|
|
27
25
|
return css(["background-color:transparent;color:", ";"], foreground);
|
|
28
26
|
};
|
|
29
27
|
const StyledDatePicker = styled.div.attrs({
|
|
30
|
-
'data-garden-id': COMPONENT_ID,
|
|
31
|
-
'data-garden-version': '9.12.
|
|
28
|
+
'data-garden-id': COMPONENT_ID$9,
|
|
29
|
+
'data-garden-version': '9.12.5'
|
|
32
30
|
}).withConfig({
|
|
33
31
|
displayName: "StyledDatePicker",
|
|
34
32
|
componentId: "sc-15hwqzh-0"
|
|
35
|
-
})(["direction:", ";", " ", " ", ";"], p => p.theme.rtl && 'rtl', sizeStyles, colorStyles, componentStyles);
|
|
33
|
+
})(["direction:", ";", " ", " ", ";"], p => p.theme.rtl && 'rtl', sizeStyles$4, colorStyles$3, componentStyles);
|
|
36
34
|
|
|
37
35
|
export { StyledDatePicker };
|
|
@@ -10,13 +10,12 @@ import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
|
10
10
|
const sizeStyles = () => {
|
|
11
11
|
return css(["border-radius:50%;width:100%;height:100%;"]);
|
|
12
12
|
};
|
|
13
|
-
const colorStyles =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
13
|
+
const colorStyles = ({
|
|
14
|
+
$isToday,
|
|
15
|
+
$isPreviousMonth,
|
|
16
|
+
theme,
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
20
19
|
const isSelected = props['aria-selected'];
|
|
21
20
|
const isDisabled = props['aria-disabled'];
|
|
22
21
|
let backgroundColor = 'inherit';
|
|
@@ -83,7 +82,7 @@ const colorStyles = _ref => {
|
|
|
83
82
|
const COMPONENT_ID = 'datepickers.day';
|
|
84
83
|
const StyledDay = styled.div.attrs({
|
|
85
84
|
'data-garden-id': COMPONENT_ID,
|
|
86
|
-
'data-garden-version': '9.12.
|
|
85
|
+
'data-garden-version': '9.12.5'
|
|
87
86
|
}).withConfig({
|
|
88
87
|
displayName: "StyledDay",
|
|
89
88
|
componentId: "sc-v42uk5-0"
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'datepickers.day_label';
|
|
10
|
+
const COMPONENT_ID$2 = 'datepickers.day_label';
|
|
11
11
|
const StyledDayLabel = styled.div.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$2,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledDayLabel",
|
|
16
16
|
componentId: "sc-9bh1p7-0"
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'datepickers.header';
|
|
10
|
+
const COMPONENT_ID$7 = 'datepickers.header';
|
|
11
11
|
const StyledHeader = styled.div.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$7,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledHeader",
|
|
16
16
|
componentId: "sc-upq318-0"
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'datepickers.header_label';
|
|
10
|
+
const COMPONENT_ID$5 = 'datepickers.header_label';
|
|
11
11
|
const StyledHeaderLabel = styled.div.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$5,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledHeaderLabel",
|
|
16
16
|
componentId: "sc-1ryf5ub-0"
|