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