@entur/datepicker 4.0.1 → 4.0.2
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/DatePicker/Calendar.d.ts +1 -1
- package/dist/DatePicker/CalendarCell.d.ts +1 -1
- package/dist/DatePicker/CalendarGrid.d.ts +1 -1
- package/dist/DatePicker/DateField.d.ts +1 -1
- package/dist/DatePicker/DatePicker.d.ts +1 -1
- package/dist/DatePicker/NativeDatePicker.d.ts +1 -1
- package/dist/TimePicker/NativeTimePicker.d.ts +1 -1
- package/dist/TimePicker/TimePicker.d.ts +1 -1
- package/dist/TimePicker/TimePickerArrowButton.d.ts +1 -1
- package/dist/datepicker.cjs.development.js +197 -268
- package/dist/datepicker.cjs.development.js.map +1 -1
- package/dist/datepicker.cjs.production.min.js +1 -1
- package/dist/datepicker.cjs.production.min.js.map +1 -1
- package/dist/datepicker.esm.js +197 -268
- package/dist/datepicker.esm.js.map +1 -1
- package/dist/shared/CalendarButton.d.ts +1 -1
- package/dist/shared/FieldSegment.d.ts +1 -1
- package/dist/shared/utils.d.ts +2 -2
- package/dist/styles.css +93 -94
- package/package.json +13 -13
- package/CHANGELOG.md +0 -769
|
@@ -28,57 +28,47 @@ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
|
28
28
|
var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
|
|
29
29
|
|
|
30
30
|
function _extends() {
|
|
31
|
-
_extends = Object.assign
|
|
31
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
32
32
|
for (var i = 1; i < arguments.length; i++) {
|
|
33
33
|
var source = arguments[i];
|
|
34
|
-
|
|
35
34
|
for (var key in source) {
|
|
36
35
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
37
36
|
target[key] = source[key];
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
|
-
|
|
42
40
|
return target;
|
|
43
41
|
};
|
|
44
|
-
|
|
45
42
|
return _extends.apply(this, arguments);
|
|
46
43
|
}
|
|
47
|
-
|
|
48
44
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
49
45
|
if (source == null) return {};
|
|
50
46
|
var target = {};
|
|
51
47
|
var sourceKeys = Object.keys(source);
|
|
52
48
|
var key, i;
|
|
53
|
-
|
|
54
49
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
55
50
|
key = sourceKeys[i];
|
|
56
51
|
if (excluded.indexOf(key) >= 0) continue;
|
|
57
52
|
target[key] = source[key];
|
|
58
53
|
}
|
|
59
|
-
|
|
60
54
|
return target;
|
|
61
55
|
}
|
|
62
56
|
|
|
63
57
|
var FieldSegment = function FieldSegment(_ref) {
|
|
64
58
|
var segment = _ref.segment,
|
|
65
|
-
|
|
59
|
+
state = _ref.state;
|
|
66
60
|
var ref = React.useRef(null);
|
|
67
|
-
|
|
68
61
|
var _useDateSegment = datepicker.useDateSegment(segment, state, ref),
|
|
69
|
-
|
|
70
|
-
|
|
62
|
+
segmentProps = _useDateSegment.segmentProps;
|
|
71
63
|
var is12HourFormatted = state.segments.some(function (segment) {
|
|
72
64
|
return segment.text === 'AM' || segment.text === 'PM';
|
|
73
65
|
});
|
|
74
|
-
|
|
75
66
|
var segmentDisplayText = function segmentDisplayText() {
|
|
76
|
-
if (is12HourFormatted) return segment.text;
|
|
77
|
-
|
|
67
|
+
if (is12HourFormatted) return segment.text;
|
|
68
|
+
// if number add '0' padding to start when one digit
|
|
78
69
|
if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
|
|
79
70
|
return segment.text;
|
|
80
71
|
};
|
|
81
|
-
|
|
82
72
|
return React__default["default"].createElement("div", _extends({}, segmentProps, {
|
|
83
73
|
ref: ref,
|
|
84
74
|
className: classNames__default["default"]('eds-date-and-time-field__segment', {
|
|
@@ -98,24 +88,19 @@ var FieldSegment = function FieldSegment(_ref) {
|
|
|
98
88
|
* @param {number} offset UTC-offset i millisekunder, må brukes med en tidssone. Ved å legge på en offset lager du en variant av en tidssone. Det betyr at tidspunktet ikke endres (time, minutt, sekund uendret), men tidssonen, med tilhørende offset, tidspunktet er i endres.
|
|
99
89
|
* @returns {Time | CalendarDateTime | ZonedDateTime | CalendarDate} et av Time- eller DateValue-objektene med verdier fra date
|
|
100
90
|
*/
|
|
101
|
-
|
|
102
91
|
var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date$1, noDateOnlyTime, noTimeOnlyDate, timeZone, offset) {
|
|
103
92
|
if (noDateOnlyTime === void 0) {
|
|
104
93
|
noDateOnlyTime = false;
|
|
105
94
|
}
|
|
106
|
-
|
|
107
95
|
if (noTimeOnlyDate === void 0) {
|
|
108
96
|
noTimeOnlyDate = false;
|
|
109
97
|
}
|
|
110
|
-
|
|
111
98
|
if (timeZone) {
|
|
112
99
|
if (offset) {
|
|
113
100
|
return new date.ZonedDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), timeZone, offset, date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
|
|
114
101
|
}
|
|
115
|
-
|
|
116
102
|
return date.parseAbsolute(date$1.toISOString(), timeZone);
|
|
117
103
|
}
|
|
118
|
-
|
|
119
104
|
if (noDateOnlyTime) return new date.Time(date$1.getHours(), date$1.getMinutes(), date$1.getSeconds(), 0);
|
|
120
105
|
if (noTimeOnlyDate) return new date.CalendarDate(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate());
|
|
121
106
|
return new date.CalendarDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
|
|
@@ -127,54 +112,55 @@ var nativeDateToTimeOrDateValue = function nativeDateToTimeOrDateValue(date$1, n
|
|
|
127
112
|
* @returns {Date} et Date-objekt med verdier fra time
|
|
128
113
|
*/
|
|
129
114
|
// This function uses a lot of @ts-expect-error to make it work with all Date- and TimeValue types. Sorry ...
|
|
130
|
-
|
|
131
115
|
var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
|
|
132
116
|
// @ts-expect-error .day does not exist on Time-object
|
|
133
117
|
if (!value.day) {
|
|
134
118
|
// type is Time
|
|
135
|
-
var date$1 = new Date();
|
|
136
|
-
|
|
137
|
-
date$1.setHours(value.hour);
|
|
138
|
-
|
|
139
|
-
date$1.setMinutes(value.minute);
|
|
140
|
-
|
|
119
|
+
var date$1 = new Date();
|
|
120
|
+
// @ts-expect-error hour does not exist on CalendarDate
|
|
121
|
+
date$1.setHours(value.hour);
|
|
122
|
+
// @ts-expect-error minute does not exist on CalendarDate
|
|
123
|
+
date$1.setMinutes(value.minute);
|
|
124
|
+
// @ts-expect-error second does not exist on CalendarDate
|
|
141
125
|
date$1.setSeconds(value.second);
|
|
142
126
|
return date$1;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
127
|
+
}
|
|
128
|
+
// @ts-expect-error .day does not exist on Time-object
|
|
146
129
|
if (!value.hour) {
|
|
147
130
|
// type is CalendarDate
|
|
148
131
|
// @ts-expect-error .toDate(timeZone) does not exist in type Time
|
|
149
132
|
return value.toDate(timeZoneForCalendarDateTime != null ? timeZoneForCalendarDateTime : date.getLocalTimeZone());
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
|
|
133
|
+
}
|
|
134
|
+
// @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
|
|
153
135
|
if (!value.timeZone) {
|
|
154
136
|
// type is CalendarDateTime
|
|
155
|
-
if (timeZoneForCalendarDateTime)
|
|
137
|
+
if (timeZoneForCalendarDateTime)
|
|
138
|
+
// @ts-expect-error .toDate(timeZone) does not exist in type Time
|
|
156
139
|
return value.toDate(timeZoneForCalendarDateTime);
|
|
157
|
-
return new Date(
|
|
158
|
-
|
|
159
|
-
value.
|
|
160
|
-
|
|
161
|
-
value.
|
|
162
|
-
|
|
140
|
+
return new Date(
|
|
141
|
+
// @ts-expect-error not in type Time
|
|
142
|
+
value.year,
|
|
143
|
+
// @ts-expect-error not in type Time
|
|
144
|
+
value.month - 1,
|
|
145
|
+
// @ts-expect-error not in type Time
|
|
146
|
+
value.day,
|
|
147
|
+
// @ts-expect-error not in type CalendarDate
|
|
148
|
+
value.hour,
|
|
149
|
+
// @ts-expect-error not in type CalendarDate
|
|
150
|
+
value.minute,
|
|
151
|
+
// @ts-expect-error not in type CalendarDate
|
|
163
152
|
value.second);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
|
|
153
|
+
}
|
|
154
|
+
// @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
|
|
167
155
|
return value.toDate();
|
|
168
156
|
};
|
|
169
157
|
var createCalendar = function createCalendar(identifier) {
|
|
170
158
|
if (identifier === void 0) {
|
|
171
159
|
identifier = 'gregory';
|
|
172
160
|
}
|
|
173
|
-
|
|
174
161
|
switch (identifier) {
|
|
175
162
|
case 'gregory':
|
|
176
163
|
return new date.GregorianCalendar();
|
|
177
|
-
|
|
178
164
|
default:
|
|
179
165
|
throw new Error("Unsupported calendar " + identifier);
|
|
180
166
|
}
|
|
@@ -187,31 +173,29 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
|
|
|
187
173
|
var _excluded$8 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
|
|
188
174
|
var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
189
175
|
var value = _ref.selectedDate,
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
176
|
+
label = _ref.label,
|
|
177
|
+
customLocale = _ref.locale,
|
|
178
|
+
showTimeZone = _ref.showTimeZone,
|
|
179
|
+
showTime = _ref.showTime,
|
|
180
|
+
_ref$granularity = _ref.granularity,
|
|
181
|
+
granularity = _ref$granularity === void 0 ? 'day' : _ref$granularity,
|
|
182
|
+
disabled = _ref.disabled,
|
|
183
|
+
variant = _ref.variant,
|
|
184
|
+
feedback = _ref.feedback,
|
|
185
|
+
_ref$validationVarian = _ref.validationVariant,
|
|
186
|
+
validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
|
|
187
|
+
_ref$validationFeedba = _ref.validationFeedback,
|
|
188
|
+
validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
|
|
189
|
+
labelTooltip = _ref.labelTooltip,
|
|
190
|
+
minValue = _ref.minDate,
|
|
191
|
+
maxValue = _ref.maxDate,
|
|
192
|
+
style = _ref.style,
|
|
193
|
+
className = _ref.className,
|
|
194
|
+
parentLabelProps = _ref.labelProps,
|
|
195
|
+
append = _ref.append,
|
|
196
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
212
197
|
var _useLocale = i18n.useLocale(),
|
|
213
|
-
|
|
214
|
-
|
|
198
|
+
locale = _useLocale.locale;
|
|
215
199
|
var state = datepicker$1.useDateFieldState(_extends({}, rest, {
|
|
216
200
|
locale: customLocale != null ? customLocale : locale,
|
|
217
201
|
createCalendar: createCalendar,
|
|
@@ -222,14 +206,12 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
222
206
|
maxValue: maxValue
|
|
223
207
|
}));
|
|
224
208
|
var dateFieldRef = React.useRef(null);
|
|
225
|
-
|
|
226
209
|
var _useDateField = datepicker.useDateField(_extends({}, rest, {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
210
|
+
label: label,
|
|
211
|
+
isDisabled: disabled || rest.isDisabled
|
|
212
|
+
}), state, dateFieldRef),
|
|
213
|
+
labelProps = _useDateField.labelProps,
|
|
214
|
+
fieldProps = _useDateField.fieldProps;
|
|
233
215
|
var id = utils.useRandomId('datefield');
|
|
234
216
|
return React__default["default"].createElement(utils.ConditionalWrapper, {
|
|
235
217
|
condition: customLocale !== undefined,
|
|
@@ -265,15 +247,12 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
265
247
|
var _excluded$7 = ["children", "className", "style"];
|
|
266
248
|
var CalendarButton = function CalendarButton(_ref) {
|
|
267
249
|
var children = _ref.children,
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
250
|
+
className = _ref.className,
|
|
251
|
+
style = _ref.style,
|
|
252
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
272
253
|
var ref = React.useRef(null);
|
|
273
|
-
|
|
274
254
|
var _useButton = button.useButton(props, ref),
|
|
275
|
-
|
|
276
|
-
|
|
255
|
+
buttonProps = _useButton.buttonProps;
|
|
277
256
|
return React__default["default"].createElement(button$1.IconButton, _extends({}, buttonProps, {
|
|
278
257
|
ref: ref,
|
|
279
258
|
className: className,
|
|
@@ -284,28 +263,24 @@ var CalendarButton = function CalendarButton(_ref) {
|
|
|
284
263
|
var _excluded$6 = ["state", "date", "onSelectedCellClick"];
|
|
285
264
|
var CalendarCell = function CalendarCell(_ref) {
|
|
286
265
|
var _state$timeZone;
|
|
287
|
-
|
|
288
266
|
var state = _ref.state,
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
267
|
+
date$1 = _ref.date,
|
|
268
|
+
_ref$onSelectedCellCl = _ref.onSelectedCellClick,
|
|
269
|
+
onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
|
|
270
|
+
return;
|
|
271
|
+
} : _ref$onSelectedCellCl,
|
|
272
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
296
273
|
var cellRef = React.useRef(null);
|
|
297
|
-
|
|
298
274
|
var _useCalendarCell = calendar.useCalendarCell({
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
275
|
+
date: date$1
|
|
276
|
+
}, state, cellRef),
|
|
277
|
+
cellProps = _useCalendarCell.cellProps,
|
|
278
|
+
buttonProps = _useCalendarCell.buttonProps,
|
|
279
|
+
isSelected = _useCalendarCell.isSelected,
|
|
280
|
+
isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
|
|
281
|
+
isDisabled = _useCalendarCell.isDisabled,
|
|
282
|
+
isUnavailable = _useCalendarCell.isUnavailable,
|
|
283
|
+
formattedDate = _useCalendarCell.formattedDate;
|
|
309
284
|
return React__default["default"].createElement("td", _extends({}, cellProps, {
|
|
310
285
|
className: "eds-datepicker__calendar__grid__cell__td"
|
|
311
286
|
}), React__default["default"].createElement("div", _extends({}, buttonProps, {
|
|
@@ -332,45 +307,36 @@ var CalendarCell = function CalendarCell(_ref) {
|
|
|
332
307
|
var _excluded$5 = ["state", "navigationDescription", "onSelectedCellClick"];
|
|
333
308
|
var CalendarGrid = function CalendarGrid(_ref) {
|
|
334
309
|
var state = _ref.state,
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
310
|
+
navigationDescription = _ref.navigationDescription,
|
|
311
|
+
_ref$onSelectedCellCl = _ref.onSelectedCellClick,
|
|
312
|
+
onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
|
|
313
|
+
return;
|
|
314
|
+
} : _ref$onSelectedCellCl,
|
|
315
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
342
316
|
var calendarGridId = utils.useRandomId('eds-calendar');
|
|
343
|
-
|
|
344
317
|
var _useLocale = i18n.useLocale(),
|
|
345
|
-
|
|
346
|
-
|
|
318
|
+
locale = _useLocale.locale;
|
|
347
319
|
var _useCalendarGrid = calendar.useCalendarGrid(rest, state),
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
320
|
+
gridProps = _useCalendarGrid.gridProps,
|
|
321
|
+
headerProps = _useCalendarGrid.headerProps,
|
|
322
|
+
weekDays = _useCalendarGrid.weekDays;
|
|
352
323
|
var weeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
|
|
353
324
|
var weeksArray = Array.from(Array(weeksInMonth).keys());
|
|
354
|
-
|
|
355
325
|
var weekDaysMapped = function weekDaysMapped() {
|
|
356
326
|
if (locale.toLowerCase().includes('no')) return ['ma', 'ti', 'on', 'to', 'fr', 'lø', 'sø'];
|
|
357
|
-
|
|
358
327
|
if (locale.toLowerCase().includes('en')) {
|
|
359
328
|
if (weekDays[0] === 'M') return ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
|
|
360
329
|
if (weekDays[0] === 'S') return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
361
330
|
}
|
|
362
|
-
|
|
363
331
|
return weekDays.map(function (day) {
|
|
364
332
|
return day.toLowerCase();
|
|
365
333
|
});
|
|
366
334
|
};
|
|
367
|
-
|
|
368
335
|
var getNavigationDescription = function getNavigationDescription() {
|
|
369
336
|
if (navigationDescription) return navigationDescription;
|
|
370
337
|
if (locale.toLowerCase().includes('en')) return 'Use the arrow keys to navigate between dates';
|
|
371
338
|
return 'Bruk piltastene til å navigere mellom datoer';
|
|
372
339
|
};
|
|
373
|
-
|
|
374
340
|
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("table", _extends({}, gridProps, {
|
|
375
341
|
cellSpacing: "0",
|
|
376
342
|
className: "eds-datepicker__calendar__grid"
|
|
@@ -400,30 +366,26 @@ var CalendarGrid = function CalendarGrid(_ref) {
|
|
|
400
366
|
var _excluded$4 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
|
|
401
367
|
var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
402
368
|
var onChange = _ref.onChange,
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
369
|
+
customLocale = _ref.locale,
|
|
370
|
+
style = _ref.style,
|
|
371
|
+
navigationDescription = _ref.navigationDescription,
|
|
372
|
+
_ref$onSelectedCellCl = _ref.onSelectedCellClick,
|
|
373
|
+
onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
|
|
374
|
+
return;
|
|
375
|
+
} : _ref$onSelectedCellCl,
|
|
376
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
412
377
|
var _useLocale = i18n.useLocale(),
|
|
413
|
-
|
|
414
|
-
|
|
378
|
+
locale = _useLocale.locale;
|
|
415
379
|
var state = calendar$1.useCalendarState(_extends({}, rest, {
|
|
416
380
|
onChange: onChange,
|
|
417
381
|
locale: customLocale != null ? customLocale : locale,
|
|
418
382
|
createCalendar: createCalendar
|
|
419
383
|
}));
|
|
420
|
-
|
|
421
384
|
var _useCalendar = calendar.useCalendar(rest, state),
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
385
|
+
calendarProps = _useCalendar.calendarProps,
|
|
386
|
+
prevButtonProps = _useCalendar.prevButtonProps,
|
|
387
|
+
nextButtonProps = _useCalendar.nextButtonProps,
|
|
388
|
+
title = _useCalendar.title;
|
|
427
389
|
return React__default["default"].createElement(utils.ConditionalWrapper, {
|
|
428
390
|
condition: customLocale,
|
|
429
391
|
wrapper: function wrapper(child) {
|
|
@@ -455,82 +417,74 @@ var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
|
455
417
|
var _excluded$3 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold"];
|
|
456
418
|
var DatePicker = function DatePicker(_ref) {
|
|
457
419
|
var value = _ref.selectedDate,
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
420
|
+
onChange = _ref.onChange,
|
|
421
|
+
locale = _ref.locale,
|
|
422
|
+
isDisabled = _ref.disabled,
|
|
423
|
+
showTime = _ref.showTime,
|
|
424
|
+
_ref$showTimeZone = _ref.showTimeZone,
|
|
425
|
+
showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
|
|
426
|
+
className = _ref.className,
|
|
427
|
+
variant = _ref.variant,
|
|
428
|
+
feedback = _ref.feedback,
|
|
429
|
+
validationVariant = _ref.validationVariant,
|
|
430
|
+
validationFeedback = _ref.validationFeedback,
|
|
431
|
+
_ref$disableModal = _ref.disableModal,
|
|
432
|
+
disableModal = _ref$disableModal === void 0 ? false : _ref$disableModal,
|
|
433
|
+
labelTooltip = _ref.labelTooltip,
|
|
434
|
+
navigationDescription = _ref.navigationDescription,
|
|
435
|
+
minValue = _ref.minDate,
|
|
436
|
+
maxValue = _ref.maxDate,
|
|
437
|
+
_ref$modalTreshold = _ref.modalTreshold,
|
|
438
|
+
modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
|
|
439
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
479
440
|
var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
|
|
480
441
|
var datePickerRef = React.useRef(null);
|
|
481
442
|
var calendarRef = React.useRef(null);
|
|
482
443
|
var dateFieldRef = React.useRef(null);
|
|
483
|
-
|
|
484
444
|
var _useWindowDimensions = utils.useWindowDimensions(),
|
|
485
|
-
|
|
486
|
-
|
|
445
|
+
width = _useWindowDimensions.width;
|
|
487
446
|
var state = datepicker$1.useDatePickerState(_extends({}, rest, {
|
|
488
447
|
minValue: minValue,
|
|
489
448
|
maxValue: maxValue,
|
|
490
449
|
value: value,
|
|
491
450
|
onChange: onChange
|
|
492
451
|
}));
|
|
493
|
-
|
|
494
452
|
var _useDatePicker = datepicker.useDatePicker(_extends({
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
453
|
+
isDisabled: isDisabled,
|
|
454
|
+
minValue: minValue,
|
|
455
|
+
maxValue: maxValue
|
|
456
|
+
}, rest), state, datePickerRef),
|
|
457
|
+
groupProps = _useDatePicker.groupProps,
|
|
458
|
+
labelProps = _useDatePicker.labelProps,
|
|
459
|
+
fieldProps = _useDatePicker.fieldProps,
|
|
460
|
+
buttonProps = _useDatePicker.buttonProps,
|
|
461
|
+
dialogProps = _useDatePicker.dialogProps,
|
|
462
|
+
calendarProps = _useDatePicker.calendarProps;
|
|
463
|
+
// calculations for floating-UI popover position
|
|
507
464
|
var _useFloating = reactDom.useFloating({
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
465
|
+
whileElementsMounted: reactDom.autoUpdate,
|
|
466
|
+
placement: 'bottom-start',
|
|
467
|
+
middleware: [reactDom.offset(tokens.space.extraSmall), reactDom.flip(), reactDom.shift({
|
|
468
|
+
padding: tokens.space.extraSmall
|
|
469
|
+
})]
|
|
470
|
+
}),
|
|
471
|
+
x = _useFloating.x,
|
|
472
|
+
y = _useFloating.y,
|
|
473
|
+
reference = _useFloating.reference,
|
|
474
|
+
floating = _useFloating.floating,
|
|
475
|
+
strategy = _useFloating.strategy;
|
|
520
476
|
var onChangeCalendar = function onChangeCalendar(newSelectedDate) {
|
|
521
477
|
// Necessary to avoid state update on unmounted component
|
|
522
478
|
requestAnimationFrame(function () {
|
|
523
479
|
calendarProps.onChange && calendarProps.onChange(newSelectedDate);
|
|
524
480
|
});
|
|
525
481
|
};
|
|
526
|
-
|
|
527
482
|
utils.useOnClickOutside([calendarRef], function () {
|
|
528
483
|
state.setOpen(false);
|
|
529
484
|
});
|
|
530
485
|
utils.useOnEscape(calendarRef, function () {
|
|
531
486
|
state.setOpen(false);
|
|
532
487
|
});
|
|
533
|
-
|
|
534
488
|
var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
|
|
535
489
|
disabled: calendarProps.isDisabled,
|
|
536
490
|
navigationDescription: navigationDescription,
|
|
@@ -539,7 +493,6 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
539
493
|
},
|
|
540
494
|
onChange: onChangeCalendar
|
|
541
495
|
});
|
|
542
|
-
|
|
543
496
|
var useModal = width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
|
|
544
497
|
var popoverCalendar = React__default["default"].createElement("div", {
|
|
545
498
|
// styling for floating-UI popover
|
|
@@ -608,21 +561,20 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
608
561
|
};
|
|
609
562
|
|
|
610
563
|
var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
|
|
611
|
-
|
|
564
|
+
_excluded2$1 = ["onChange", "variant", "value"];
|
|
612
565
|
var NativeDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
613
566
|
var className = _ref.className,
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
567
|
+
style = _ref.style,
|
|
568
|
+
label = _ref.label,
|
|
569
|
+
onChange = _ref.onChange,
|
|
570
|
+
feedback = _ref.feedback,
|
|
571
|
+
variant = _ref.variant,
|
|
572
|
+
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
573
|
+
_ref$prepend = _ref.prepend,
|
|
574
|
+
prepend = _ref$prepend === void 0 ? React__default["default"].createElement(icons.DateIcon, {
|
|
575
|
+
inline: true
|
|
576
|
+
}) : _ref$prepend,
|
|
577
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
626
578
|
var nativedatepickerId = utils.useRandomId('eds-nativetimepicker');
|
|
627
579
|
return React__default["default"].createElement(form.BaseFormControl, {
|
|
628
580
|
style: style,
|
|
@@ -643,17 +595,14 @@ var NativeDatePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
643
595
|
});
|
|
644
596
|
var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
|
|
645
597
|
var onChange = _ref2.onChange,
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
598
|
+
variant = _ref2.variant,
|
|
599
|
+
value = _ref2.value,
|
|
600
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
650
601
|
var contextVariant = form.useVariant();
|
|
651
602
|
var currentVariant = variant || contextVariant;
|
|
652
|
-
|
|
653
603
|
var _useInputGroupContext = form.useInputGroupContext(),
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
604
|
+
isDatepickerFilled = _useInputGroupContext.isFilled,
|
|
605
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
657
606
|
utils.useOnMount(function () {
|
|
658
607
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
659
608
|
});
|
|
@@ -664,19 +613,16 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
|
664
613
|
setFiller && isDatepickerFilled && setFiller(false);
|
|
665
614
|
}
|
|
666
615
|
}, [value, setFiller, isDatepickerFilled]);
|
|
667
|
-
|
|
668
616
|
var handleChange = function handleChange(event) {
|
|
669
617
|
if (form.isFilled(event.target)) {
|
|
670
618
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
671
619
|
} else {
|
|
672
620
|
setFiller && isDatepickerFilled && setFiller(false);
|
|
673
621
|
}
|
|
674
|
-
|
|
675
622
|
if (onChange) {
|
|
676
623
|
onChange(event);
|
|
677
624
|
}
|
|
678
625
|
};
|
|
679
|
-
|
|
680
626
|
return React__default["default"].createElement("input", _extends({
|
|
681
627
|
ref: ref,
|
|
682
628
|
"aria-invalid": currentVariant === 'error',
|
|
@@ -689,9 +635,9 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
|
689
635
|
|
|
690
636
|
var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
691
637
|
var direction = _ref.direction,
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
638
|
+
onClick = _ref.onClick,
|
|
639
|
+
disabled = _ref.disabled,
|
|
640
|
+
ariaLabel = _ref['aria-label'];
|
|
695
641
|
return React__default["default"].createElement(button$1.IconButton, {
|
|
696
642
|
className: classNames__default["default"]('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
|
|
697
643
|
'eds-timepicker__arrowbutton--disabled': disabled
|
|
@@ -707,27 +653,25 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
|
707
653
|
var _excluded$1 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel"];
|
|
708
654
|
var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
709
655
|
var selectedTime = _ref.selectedTime,
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
656
|
+
onChange = _ref.onChange,
|
|
657
|
+
disabled = _ref.disabled,
|
|
658
|
+
className = _ref.className,
|
|
659
|
+
style = _ref.style,
|
|
660
|
+
label = _ref.label,
|
|
661
|
+
labelTooltip = _ref.labelTooltip,
|
|
662
|
+
feedback = _ref.feedback,
|
|
663
|
+
variant = _ref.variant,
|
|
664
|
+
customLocale = _ref.locale,
|
|
665
|
+
showTimeZone = _ref.showTimeZone,
|
|
666
|
+
_ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
|
|
667
|
+
minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
|
|
668
|
+
_ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
|
|
669
|
+
leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
|
|
670
|
+
_ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
|
|
671
|
+
rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
|
|
672
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
728
673
|
var _useLocale = i18n.useLocale(),
|
|
729
|
-
|
|
730
|
-
|
|
674
|
+
locale = _useLocale.locale;
|
|
731
675
|
if (customLocale) locale = customLocale;
|
|
732
676
|
var state = datepicker$1.useTimeFieldState(_extends({
|
|
733
677
|
onChange: onChange,
|
|
@@ -738,15 +682,12 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
|
738
682
|
isDisabled: disabled
|
|
739
683
|
}, rest));
|
|
740
684
|
var timeFieldRef = React.useRef(null);
|
|
741
|
-
|
|
742
685
|
var _useTimeField = datepicker.useTimeField(_extends({}, rest, {
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
686
|
+
label: label
|
|
687
|
+
}), state, timeFieldRef),
|
|
688
|
+
labelProps = _useTimeField.labelProps,
|
|
689
|
+
fieldProps = _useTimeField.fieldProps;
|
|
748
690
|
var id = utils.useRandomId('timepicker');
|
|
749
|
-
|
|
750
691
|
var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
|
|
751
692
|
if (someSegmentIsUndefined) {
|
|
752
693
|
setTimeToNearestMinuteIncrement();
|
|
@@ -754,11 +695,9 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
|
754
695
|
addMinutesToSelectedTime(minutes);
|
|
755
696
|
}
|
|
756
697
|
};
|
|
757
|
-
|
|
758
698
|
var someSegmentIsUndefined = state.segments.some(function (segment) {
|
|
759
699
|
return segment.text === '––';
|
|
760
700
|
});
|
|
761
|
-
|
|
762
701
|
var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
|
|
763
702
|
var currentTime = date.now(date.getLocalTimeZone());
|
|
764
703
|
var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
|
|
@@ -767,15 +706,12 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
|
767
706
|
});
|
|
768
707
|
onChange(newTime);
|
|
769
708
|
};
|
|
770
|
-
|
|
771
709
|
var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
|
|
772
710
|
var _state$value;
|
|
773
|
-
|
|
774
711
|
state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
|
|
775
712
|
minutes: minutes
|
|
776
713
|
}));
|
|
777
714
|
};
|
|
778
|
-
|
|
779
715
|
return React__default["default"].createElement(i18n.I18nProvider, {
|
|
780
716
|
locale: locale
|
|
781
717
|
}, React__default["default"].createElement("div", {
|
|
@@ -817,17 +753,16 @@ var TimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
|
817
753
|
});
|
|
818
754
|
|
|
819
755
|
var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
|
|
820
|
-
|
|
756
|
+
_excluded2 = ["onChange", "value"];
|
|
821
757
|
var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
822
758
|
var className = _ref.className,
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
759
|
+
style = _ref.style,
|
|
760
|
+
onChange = _ref.onChange,
|
|
761
|
+
label = _ref.label,
|
|
762
|
+
feedback = _ref.feedback,
|
|
763
|
+
variant = _ref.variant,
|
|
764
|
+
prepend = _ref.prepend,
|
|
765
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
831
766
|
var nativetimepickerId = utils.useRandomId('eds-native-timepicker');
|
|
832
767
|
return React__default["default"].createElement(form.BaseFormControl, {
|
|
833
768
|
style: style,
|
|
@@ -846,16 +781,13 @@ var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
846
781
|
});
|
|
847
782
|
var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
|
|
848
783
|
var onChange = _ref2.onChange,
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
784
|
+
value = _ref2.value,
|
|
785
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
852
786
|
var contextVariant = form.useVariant();
|
|
853
787
|
var currentVariant = rest.variant || contextVariant;
|
|
854
|
-
|
|
855
788
|
var _useInputGroupContext = form.useInputGroupContext(),
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
789
|
+
isTimepickerFilled = _useInputGroupContext.isFilled,
|
|
790
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
859
791
|
utils.useOnMount(function () {
|
|
860
792
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
861
793
|
});
|
|
@@ -866,19 +798,16 @@ var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
|
866
798
|
setFiller && isTimepickerFilled && setFiller(false);
|
|
867
799
|
}
|
|
868
800
|
}, [value, setFiller, isTimepickerFilled]);
|
|
869
|
-
|
|
870
801
|
var handleChange = function handleChange(event) {
|
|
871
802
|
if (form.isFilled(event.target)) {
|
|
872
803
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
873
804
|
} else {
|
|
874
805
|
setFiller && isTimepickerFilled && setFiller(false);
|
|
875
806
|
}
|
|
876
|
-
|
|
877
807
|
if (onChange) {
|
|
878
808
|
onChange(event);
|
|
879
809
|
}
|
|
880
810
|
};
|
|
881
|
-
|
|
882
811
|
return React__default["default"].createElement("input", _extends({
|
|
883
812
|
ref: ref,
|
|
884
813
|
"aria-invalid": currentVariant === 'error',
|