@entur/datepicker 3.0.8 → 3.0.9

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.
@@ -19,39 +19,46 @@ function _extends() {
19
19
  _extends = Object.assign || function (target) {
20
20
  for (var i = 1; i < arguments.length; i++) {
21
21
  var source = arguments[i];
22
+
22
23
  for (var key in source) {
23
24
  if (Object.prototype.hasOwnProperty.call(source, key)) {
24
25
  target[key] = source[key];
25
26
  }
26
27
  }
27
28
  }
29
+
28
30
  return target;
29
31
  };
32
+
30
33
  return _extends.apply(this, arguments);
31
34
  }
35
+
32
36
  function _objectWithoutPropertiesLoose(source, excluded) {
33
37
  if (source == null) return {};
34
38
  var target = {};
35
39
  var sourceKeys = Object.keys(source);
36
40
  var key, i;
41
+
37
42
  for (i = 0; i < sourceKeys.length; i++) {
38
43
  key = sourceKeys[i];
39
44
  if (excluded.indexOf(key) >= 0) continue;
40
45
  target[key] = source[key];
41
46
  }
47
+
42
48
  return target;
43
49
  }
44
50
 
45
51
  var DatePickerHeader = function DatePickerHeader(_ref) {
46
52
  var _date$getMonth;
53
+
47
54
  var date = _ref.date,
48
- decreaseMonth = _ref.decreaseMonth,
49
- increaseMonth = _ref.increaseMonth,
50
- prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
51
- nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
52
- nextMonthAriaLabel = _ref.nextMonthAriaLabel,
53
- previousMonthAriaLabel = _ref.previousMonthAriaLabel,
54
- locale = _ref.locale;
55
+ decreaseMonth = _ref.decreaseMonth,
56
+ increaseMonth = _ref.increaseMonth,
57
+ prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
58
+ nextMonthButtonDisabled = _ref.nextMonthButtonDisabled,
59
+ nextMonthAriaLabel = _ref.nextMonthAriaLabel,
60
+ previousMonthAriaLabel = _ref.previousMonthAriaLabel,
61
+ locale = _ref.locale;
55
62
  var currentMonthIndex = (_date$getMonth = date == null ? void 0 : date.getMonth()) != null ? _date$getMonth : 0;
56
63
  return React.createElement("div", {
57
64
  className: "eds-datepicker__calender__header"
@@ -73,6 +80,7 @@ var DatePickerHeader = function DatePickerHeader(_ref) {
73
80
  "aria-label": nextMonthAriaLabel + " (" + getMonthName(currentMonthIndex + 1, locale) + ")"
74
81
  }, React.createElement(RightArrowIcon, null)));
75
82
  };
83
+
76
84
  function getMonthName(monthIndex, locale) {
77
85
  var year = new Date().getFullYear();
78
86
  var formatter = new Intl.DateTimeFormat(locale.code, {
@@ -84,68 +92,79 @@ function getMonthName(monthIndex, locale) {
84
92
  var _excluded$4 = ["style", "label", "inputPlaceholder", "prepend", "feedback", "variant", "disabled", "calendarButtonTooltipOpen", "calendarButtonTooltipClose", "hideCalendarButton", "disableLabelAnimation", "inputRef", "calendarButtonId", "forwardRef", "toggleCalendarGUI", "onKeyDownInput", "onBlurInput", "selectedDate", "setFocusToCalendarGUI", "setShouldFocusOnCalendarButtonAfterSelect", "calendarGUIIsOpen", "placeholder", "onClick", "aria-labelledby"];
85
93
  var DatePickerInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
86
94
  var style = _ref.style,
87
- label = _ref.label,
88
- inputPlaceholder = _ref.inputPlaceholder,
89
- prepend = _ref.prepend,
90
- feedback = _ref.feedback,
91
- variant = _ref.variant,
92
- disabled = _ref.disabled,
93
- calendarButtonTooltipOpen = _ref.calendarButtonTooltipOpen,
94
- calendarButtonTooltipClose = _ref.calendarButtonTooltipClose,
95
- hideCalendarButton = _ref.hideCalendarButton,
96
- disableLabelAnimation = _ref.disableLabelAnimation,
97
- inputRef = _ref.inputRef,
98
- calendarButtonId = _ref.calendarButtonId,
99
- forwardRef = _ref.forwardRef,
100
- toggleCalendarGUI = _ref.toggleCalendarGUI,
101
- onKeyDownInput = _ref.onKeyDownInput,
102
- onBlurInput = _ref.onBlurInput,
103
- selectedDate = _ref.selectedDate,
104
- setFocusToCalendarGUI = _ref.setFocusToCalendarGUI,
105
- setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
106
- calendarGUIIsOpen = _ref.calendarGUIIsOpen,
107
- onClick = _ref.onClick,
108
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
95
+ label = _ref.label,
96
+ inputPlaceholder = _ref.inputPlaceholder,
97
+ prepend = _ref.prepend,
98
+ feedback = _ref.feedback,
99
+ variant = _ref.variant,
100
+ disabled = _ref.disabled,
101
+ calendarButtonTooltipOpen = _ref.calendarButtonTooltipOpen,
102
+ calendarButtonTooltipClose = _ref.calendarButtonTooltipClose,
103
+ hideCalendarButton = _ref.hideCalendarButton,
104
+ disableLabelAnimation = _ref.disableLabelAnimation,
105
+ inputRef = _ref.inputRef,
106
+ calendarButtonId = _ref.calendarButtonId,
107
+ forwardRef = _ref.forwardRef,
108
+ toggleCalendarGUI = _ref.toggleCalendarGUI,
109
+ onKeyDownInput = _ref.onKeyDownInput,
110
+ onBlurInput = _ref.onBlurInput,
111
+ selectedDate = _ref.selectedDate,
112
+ setFocusToCalendarGUI = _ref.setFocusToCalendarGUI,
113
+ setShouldFocusOnCalendarButtonAfterSelect = _ref.setShouldFocusOnCalendarButtonAfterSelect,
114
+ calendarGUIIsOpen = _ref.calendarGUIIsOpen,
115
+ onClick = _ref.onClick,
116
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
117
+
109
118
  React.useEffect(function () {
110
119
  var _inputRef$current, _inputRef$current2, _inputRef$current3;
120
+
111
121
  (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.addEventListener('keydown', handleOnKeyDown);
112
122
  (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.addEventListener('blur', handleOnBlur);
113
123
  (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.addEventListener('focus', handleOnFocus);
114
124
  return function () {
115
125
  var _inputRef$current4, _inputRef$current5, _inputRef$current6;
126
+
116
127
  (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.removeEventListener('keydown', handleOnKeyDown);
117
128
  (_inputRef$current5 = inputRef.current) == null ? void 0 : _inputRef$current5.removeEventListener('blur', handleOnBlur);
118
129
  (_inputRef$current6 = inputRef.current) == null ? void 0 : _inputRef$current6.removeEventListener('focus', handleOnFocus);
119
- };
120
- // eslint-disable-next-line react-hooks/exhaustive-deps
130
+ }; // eslint-disable-next-line react-hooks/exhaustive-deps
121
131
  }, [inputRef, selectedDate]);
132
+
122
133
  function handleOnKeyDown(event) {
123
134
  onKeyDownInput(event);
124
135
  }
136
+
125
137
  function handleOnBlur(event) {
126
138
  onBlurInput(event);
127
139
  }
140
+
128
141
  var handleOnFocus = function handleOnFocus() {
129
142
  return requestAnimationFrame(function () {
130
143
  var _inputRef$current7;
144
+
131
145
  return (_inputRef$current7 = inputRef.current) == null ? void 0 : _inputRef$current7.select();
132
146
  });
133
147
  };
148
+
134
149
  var handleOnClickInputField = function handleOnClickInputField(event) {
135
150
  setShouldFocusOnCalendarButtonAfterSelect(false);
136
151
  onClick && onClick(event);
137
152
  };
153
+
138
154
  var handleOnClickCalendarButton = function handleOnClickCalendarButton() {
139
155
  toggleCalendarGUI();
140
156
  setFocusToCalendarGUI();
141
157
  setShouldFocusOnCalendarButtonAfterSelect(true);
142
158
  };
159
+
143
160
  var calendarButtonAriaLabel = function calendarButtonAriaLabel() {
144
161
  var _inputRef$current8;
162
+
145
163
  var buttonStateText = calendarGUIIsOpen() ? calendarButtonTooltipClose : calendarButtonTooltipOpen;
146
164
  var currentSelectionText = selectedDate ? ((_inputRef$current8 = inputRef.current) == null ? void 0 : _inputRef$current8.value) + " valgt" : 'Ingen dato valgt';
147
165
  return buttonStateText + ", " + currentSelectionText;
148
166
  };
167
+
149
168
  return React.createElement(TextField, _extends({
150
169
  style: style,
151
170
  label: label,
@@ -176,85 +195,95 @@ var _excluded$3 = ["style", "className", "selectedDate", "label", "placeholder",
176
195
  registerLocale('nb', nb);
177
196
  var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
178
197
  var style = _ref.style,
179
- className = _ref.className,
180
- selectedDate = _ref.selectedDate,
181
- label = _ref.label,
182
- _ref$placeholder = _ref.placeholder,
183
- placeholder = _ref$placeholder === void 0 ? 'dd.mm.yyyy' : _ref$placeholder,
184
- onChange = _ref.onChange,
185
- _ref$onKeyDown = _ref.onKeyDown,
186
- onKeyDown = _ref$onKeyDown === void 0 ? function () {
187
- return null;
188
- } : _ref$onKeyDown,
189
- _ref$dateFormats = _ref.dateFormats,
190
- dateFormats = _ref$dateFormats === void 0 ? ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy'] : _ref$dateFormats,
191
- minDate = _ref.minDate,
192
- maxDate = _ref.maxDate,
193
- _ref$inline = _ref.inline,
194
- inline = _ref$inline === void 0 ? false : _ref$inline,
195
- disabled = _ref.disabled,
196
- prepend = _ref.prepend,
197
- _ref$feedback = _ref.feedback,
198
- feedback = _ref$feedback === void 0 ? '' : _ref$feedback,
199
- variant = _ref.variant,
200
- _ref$validationFeedba = _ref.validationFeedback,
201
- validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
202
- _ref$validationVarian = _ref.validationVariant,
203
- validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
204
- _ref$disableLabelAnim = _ref.disableLabelAnimation,
205
- disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
206
- _ref$calendarButtonTo = _ref.calendarButtonTooltipOpen,
207
- calendarButtonTooltipOpen = _ref$calendarButtonTo === void 0 ? 'Åpne\xa0kalender' : _ref$calendarButtonTo,
208
- _ref$calendarButtonTo2 = _ref.calendarButtonTooltipClose,
209
- calendarButtonTooltipClose = _ref$calendarButtonTo2 === void 0 ? 'Lukk\xa0kalender' : _ref$calendarButtonTo2,
210
- _ref$hideCalendarButt = _ref.hideCalendarButton,
211
- hideCalendarButton = _ref$hideCalendarButt === void 0 ? false : _ref$hideCalendarButt,
212
- _ref$hideCalendar = _ref.hideCalendar,
213
- hideCalendar = _ref$hideCalendar === void 0 ? false : _ref$hideCalendar,
214
- _ref$hideValidation = _ref.hideValidation,
215
- hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation,
216
- _ref$weekLabel = _ref.weekLabel,
217
- weekLabel = _ref$weekLabel === void 0 ? 'uke' : _ref$weekLabel,
218
- _ref$chooseDayAriaLab = _ref.chooseDayAriaLabelPrefix,
219
- chooseDayAriaLabelPrefix = _ref$chooseDayAriaLab === void 0 ? 'Velg' : _ref$chooseDayAriaLab,
220
- _ref$previousMonthAri = _ref.previousMonthAriaLabel,
221
- previousMonthAriaLabel = _ref$previousMonthAri === void 0 ? 'Forrige måned' : _ref$previousMonthAri,
222
- _ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
223
- nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? 'Neste måned' : _ref$nextMonthAriaLab,
224
- _ref$locale = _ref.locale,
225
- locale = _ref$locale === void 0 ? nb : _ref$locale,
226
- open = _ref.open,
227
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
198
+ className = _ref.className,
199
+ selectedDate = _ref.selectedDate,
200
+ label = _ref.label,
201
+ _ref$placeholder = _ref.placeholder,
202
+ placeholder = _ref$placeholder === void 0 ? 'dd.mm.yyyy' : _ref$placeholder,
203
+ onChange = _ref.onChange,
204
+ _ref$onKeyDown = _ref.onKeyDown,
205
+ onKeyDown = _ref$onKeyDown === void 0 ? function () {
206
+ return null;
207
+ } : _ref$onKeyDown,
208
+ _ref$dateFormats = _ref.dateFormats,
209
+ dateFormats = _ref$dateFormats === void 0 ? ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'ddMMyy'] : _ref$dateFormats,
210
+ minDate = _ref.minDate,
211
+ maxDate = _ref.maxDate,
212
+ _ref$inline = _ref.inline,
213
+ inline = _ref$inline === void 0 ? false : _ref$inline,
214
+ disabled = _ref.disabled,
215
+ prepend = _ref.prepend,
216
+ _ref$feedback = _ref.feedback,
217
+ feedback = _ref$feedback === void 0 ? '' : _ref$feedback,
218
+ variant = _ref.variant,
219
+ _ref$validationFeedba = _ref.validationFeedback,
220
+ validationFeedback = _ref$validationFeedba === void 0 ? 'Ugyldig dato' : _ref$validationFeedba,
221
+ _ref$validationVarian = _ref.validationVariant,
222
+ validationVariant = _ref$validationVarian === void 0 ? 'error' : _ref$validationVarian,
223
+ _ref$disableLabelAnim = _ref.disableLabelAnimation,
224
+ disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
225
+ _ref$calendarButtonTo = _ref.calendarButtonTooltipOpen,
226
+ calendarButtonTooltipOpen = _ref$calendarButtonTo === void 0 ? 'Åpne\xa0kalender' : _ref$calendarButtonTo,
227
+ _ref$calendarButtonTo2 = _ref.calendarButtonTooltipClose,
228
+ calendarButtonTooltipClose = _ref$calendarButtonTo2 === void 0 ? 'Lukk\xa0kalender' : _ref$calendarButtonTo2,
229
+ _ref$hideCalendarButt = _ref.hideCalendarButton,
230
+ hideCalendarButton = _ref$hideCalendarButt === void 0 ? false : _ref$hideCalendarButt,
231
+ _ref$hideCalendar = _ref.hideCalendar,
232
+ hideCalendar = _ref$hideCalendar === void 0 ? false : _ref$hideCalendar,
233
+ _ref$hideValidation = _ref.hideValidation,
234
+ hideValidation = _ref$hideValidation === void 0 ? false : _ref$hideValidation,
235
+ _ref$weekLabel = _ref.weekLabel,
236
+ weekLabel = _ref$weekLabel === void 0 ? 'uke' : _ref$weekLabel,
237
+ _ref$chooseDayAriaLab = _ref.chooseDayAriaLabelPrefix,
238
+ chooseDayAriaLabelPrefix = _ref$chooseDayAriaLab === void 0 ? 'Velg' : _ref$chooseDayAriaLab,
239
+ _ref$previousMonthAri = _ref.previousMonthAriaLabel,
240
+ previousMonthAriaLabel = _ref$previousMonthAri === void 0 ? 'Forrige måned' : _ref$previousMonthAri,
241
+ _ref$nextMonthAriaLab = _ref.nextMonthAriaLabel,
242
+ nextMonthAriaLabel = _ref$nextMonthAriaLab === void 0 ? 'Neste måned' : _ref$nextMonthAriaLab,
243
+ _ref$locale = _ref.locale,
244
+ locale = _ref$locale === void 0 ? nb : _ref$locale,
245
+ open = _ref.open,
246
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
247
+
228
248
  var datepickerId = useRandomId('eds-datepicker');
229
249
  var datepickerRef = useRef(null);
230
250
  var inputRef = React.useRef(null);
231
251
  var calendarButton = document.getElementById(datepickerId + '-button');
252
+
232
253
  var _useState = useState(false),
233
- showValidation = _useState[0],
234
- setShowValidation = _useState[1];
254
+ showValidation = _useState[0],
255
+ setShowValidation = _useState[1];
256
+
235
257
  var _useState2 = useState(false),
236
- shouldFocusOnCalendarButtonAfterSelect = _useState2[0],
237
- setShouldFocusOnCalendarButtonAfterSelect = _useState2[1];
238
- // eslint-disable-next-line react-hooks/exhaustive-deps
258
+ shouldFocusOnCalendarButtonAfterSelect = _useState2[0],
259
+ setShouldFocusOnCalendarButtonAfterSelect = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
260
+
261
+
239
262
  React.useEffect(function () {
240
263
  return validateInput();
241
264
  }, [selectedDate]);
265
+
242
266
  var handleOnChange = function handleOnChange(date, event) {
243
267
  var _inputRef$current;
268
+
244
269
  if (shouldFocusOnCalendarButtonAfterSelect && !hideCalendarButton) {
245
270
  calendarButton == null ? void 0 : calendarButton.focus();
246
271
  setShouldFocusOnCalendarButtonAfterSelect(false);
247
272
  } else (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
273
+
248
274
  onChange(date, event);
249
275
  };
276
+
250
277
  var handleOnKeyDown = function handleOnKeyDown(event) {
251
278
  setShowValidation(false);
279
+
252
280
  if (event.key === 'Enter') {
253
281
  if (!datePickerGUIIsOpen()) {
254
282
  // onBlurInput will validate if calendar is open
255
283
  validateInput();
256
284
  forceUpdateInputFormat();
257
285
  }
286
+
258
287
  focusAndSelectInputField();
259
288
  } else if (event.key === 'Tab' && datePickerGUIIsOpen()) {
260
289
  forceUpdateInputFormat();
@@ -263,18 +292,23 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
263
292
  focusAndSelectInputField();
264
293
  if (datePickerGUIIsOpen()) toggleCalendarGUI();
265
294
  }
295
+
266
296
  onKeyDown(event);
267
297
  };
298
+
268
299
  var handleOnClickOutside = function handleOnClickOutside() {
269
300
  return setShouldFocusOnCalendarButtonAfterSelect(false);
270
301
  };
302
+
271
303
  var handleOnBlurInput = function handleOnBlurInput() {
272
304
  if (datePickerGUIIsOpen()) return;
273
305
  validateInput();
274
306
  forceUpdateInputFormat();
275
307
  };
308
+
276
309
  var validateInput = function validateInput() {
277
310
  var _inputRef$current2;
311
+
278
312
  setShowValidation(false);
279
313
  var inputValue = (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value;
280
314
  if (!inputValue) return;
@@ -286,6 +320,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
286
320
  var parsedDateFromInputIsTheSameAsSelectedDate = selectedDate && inputValueParsedWithAllDateFormats.some(function (dateFormat) {
287
321
  return isSameDay(dateFormat, selectedDate);
288
322
  });
323
+
289
324
  if (parsedDateFromInputIsTheSameAsSelectedDate) {
290
325
  // valid date inputted
291
326
  setShowValidation(false);
@@ -294,6 +329,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
294
329
  setShowValidation(true);
295
330
  }
296
331
  };
332
+
297
333
  var getFeedbackAndVariant = function getFeedbackAndVariant() {
298
334
  if (feedback) return {
299
335
  feedback: feedback,
@@ -308,32 +344,42 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
308
344
  variant: undefined
309
345
  };
310
346
  };
347
+
311
348
  var focusAndSelectInputField = function focusAndSelectInputField() {
312
349
  return requestAnimationFrame(function () {
313
350
  var _inputRef$current3;
351
+
314
352
  return (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.select();
315
353
  });
316
354
  };
355
+
317
356
  var forceUpdateInputFormat = function forceUpdateInputFormat() {
318
357
  var _datepickerRef$curren;
358
+
319
359
  return (_datepickerRef$curren = datepickerRef.current) == null ? void 0 : _datepickerRef$curren.setState({
320
360
  inputValue: null
321
361
  });
322
362
  };
363
+
323
364
  var toggleCalendarGUI = function toggleCalendarGUI() {
324
365
  var _datepickerRef$curren2;
366
+
325
367
  return (_datepickerRef$curren2 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren2.setOpen(!datePickerGUIIsOpen());
326
368
  };
369
+
327
370
  var setFocusToCalendarGUI = function setFocusToCalendarGUI() {
328
- if (inline || hideCalendar || datePickerGUIIsOpen()) return;
329
- // 1 frame delay to allow calendar to spawn
371
+ if (inline || hideCalendar || datePickerGUIIsOpen()) return; // 1 frame delay to allow calendar to spawn
372
+
330
373
  requestAnimationFrame(function () {
331
374
  var _datepickerRef$curren3;
375
+
332
376
  var datepickerGUIWrapper = // @ts-expect-error .calendar does actually exist in ReactDatePicker ref
333
377
  (_datepickerRef$curren3 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren3.calendar.componentNode;
334
378
  var dateToSetFocusTo = selectedDate ? datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[tabindex="0"]') : datepickerGUIWrapper.querySelector('.eds-datepicker__calender__day[aria-current="date"]');
379
+
335
380
  if (dateToSetFocusTo !== null) {
336
381
  var _datepickerRef$curren4;
382
+
337
383
  (_datepickerRef$curren4 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren4.setBlur();
338
384
  dateToSetFocusTo.focus({
339
385
  preventScroll: true
@@ -343,10 +389,13 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
343
389
  setShouldFocusOnCalendarButtonAfterSelect(true);
344
390
  setShowValidation(false);
345
391
  };
392
+
346
393
  var datePickerGUIIsOpen = function datePickerGUIIsOpen() {
347
394
  var _datepickerRef$curren5;
395
+
348
396
  return (_datepickerRef$curren5 = datepickerRef.current) == null ? void 0 : _datepickerRef$curren5.isCalendarOpen();
349
397
  };
398
+
350
399
  return React.createElement(React.Fragment, null, React.createElement(ReactDatepicker, _extends({
351
400
  selected: selectedDate,
352
401
  minDate: minDate,
@@ -381,12 +430,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
381
430
  }],
382
431
  renderCustomHeader: function renderCustomHeader(_ref2) {
383
432
  var date = _ref2.date,
384
- changeYear = _ref2.changeYear,
385
- changeMonth = _ref2.changeMonth,
386
- decreaseMonth = _ref2.decreaseMonth,
387
- increaseMonth = _ref2.increaseMonth,
388
- prevMonthButtonDisabled = _ref2.prevMonthButtonDisabled,
389
- nextMonthButtonDisabled = _ref2.nextMonthButtonDisabled;
433
+ changeYear = _ref2.changeYear,
434
+ changeMonth = _ref2.changeMonth,
435
+ decreaseMonth = _ref2.decreaseMonth,
436
+ increaseMonth = _ref2.increaseMonth,
437
+ prevMonthButtonDisabled = _ref2.prevMonthButtonDisabled,
438
+ nextMonthButtonDisabled = _ref2.nextMonthButtonDisabled;
390
439
  return React.createElement(DatePickerHeader, {
391
440
  date: date,
392
441
  changeYear: changeYear,
@@ -427,20 +476,21 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
427
476
  });
428
477
 
429
478
  var _excluded$2 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
430
- _excluded2$1 = ["onChange", "variant", "value"];
479
+ _excluded2$1 = ["onChange", "variant", "value"];
431
480
  var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
432
481
  var className = _ref.className,
433
- style = _ref.style,
434
- label = _ref.label,
435
- onChange = _ref.onChange,
436
- feedback = _ref.feedback,
437
- variant = _ref.variant,
438
- disableLabelAnimation = _ref.disableLabelAnimation,
439
- _ref$prepend = _ref.prepend,
440
- prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
441
- inline: true
442
- }) : _ref$prepend,
443
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
482
+ style = _ref.style,
483
+ label = _ref.label,
484
+ onChange = _ref.onChange,
485
+ feedback = _ref.feedback,
486
+ variant = _ref.variant,
487
+ disableLabelAnimation = _ref.disableLabelAnimation,
488
+ _ref$prepend = _ref.prepend,
489
+ prepend = _ref$prepend === void 0 ? React.createElement(DateIcon, {
490
+ inline: true
491
+ }) : _ref$prepend,
492
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
493
+
444
494
  var nativedatepickerId = useRandomId('eds-nativetimepicker');
445
495
  return React.createElement(BaseFormControl, {
446
496
  style: style,
@@ -461,14 +511,17 @@ var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
461
511
  });
462
512
  var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
463
513
  var onChange = _ref2.onChange,
464
- variant = _ref2.variant,
465
- value = _ref2.value,
466
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
514
+ variant = _ref2.variant,
515
+ value = _ref2.value,
516
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
517
+
467
518
  var contextVariant = useVariant();
468
519
  var currentVariant = variant || contextVariant;
520
+
469
521
  var _useInputGroupContext = useInputGroupContext(),
470
- isDatepickerFilled = _useInputGroupContext.isFilled,
471
- setFiller = _useInputGroupContext.setFilled;
522
+ isDatepickerFilled = _useInputGroupContext.isFilled,
523
+ setFiller = _useInputGroupContext.setFilled;
524
+
472
525
  useOnMount(function () {
473
526
  setFiller && !isDatepickerFilled && setFiller(true);
474
527
  });
@@ -479,16 +532,19 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
479
532
  setFiller && isDatepickerFilled && setFiller(false);
480
533
  }
481
534
  }, [value, setFiller, isDatepickerFilled]);
535
+
482
536
  var handleChange = function handleChange(event) {
483
537
  if (isFilled(event.target)) {
484
538
  setFiller && !isDatepickerFilled && setFiller(true);
485
539
  } else {
486
540
  setFiller && isDatepickerFilled && setFiller(false);
487
541
  }
542
+
488
543
  if (onChange) {
489
544
  onChange(event);
490
545
  }
491
546
  };
547
+
492
548
  return React.createElement("input", _extends({
493
549
  ref: ref,
494
550
  "aria-invalid": currentVariant === 'error',
@@ -501,19 +557,23 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
501
557
 
502
558
  var TimeSegment = function TimeSegment(_ref) {
503
559
  var segment = _ref.segment,
504
- state = _ref.state;
560
+ state = _ref.state;
505
561
  var ref = useRef(null);
562
+
506
563
  var _useDateSegment = useDateSegment(segment, state, ref),
507
- segmentProps = _useDateSegment.segmentProps;
564
+ segmentProps = _useDateSegment.segmentProps;
565
+
508
566
  var is12HourFormatted = state.segments.some(function (segment) {
509
567
  return segment.text === 'AM' || segment.text === 'PM';
510
568
  });
569
+
511
570
  var segmentDisplayText = function segmentDisplayText() {
512
- if (is12HourFormatted) return segment.text;
513
- // if number add '0' padding to start when one digit
571
+ if (is12HourFormatted) return segment.text; // if number add '0' padding to start when one digit
572
+
514
573
  if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
515
574
  return segment.text;
516
575
  };
576
+
517
577
  return React.createElement("div", _extends({}, segmentProps, {
518
578
  ref: ref,
519
579
  className: classNames('eds-timepicker__segment', {
@@ -524,9 +584,9 @@ var TimeSegment = function TimeSegment(_ref) {
524
584
 
525
585
  var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
526
586
  var direction = _ref.direction,
527
- onClick = _ref.onClick,
528
- disabled = _ref.disabled,
529
- ariaLabel = _ref['aria-label'];
587
+ onClick = _ref.onClick,
588
+ disabled = _ref.disabled,
589
+ ariaLabel = _ref['aria-label'];
530
590
  return React.createElement(IconButton, {
531
591
  className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
532
592
  'eds-timepicker__arrowbutton--disabled': disabled
@@ -542,25 +602,27 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
542
602
  var _excluded$1 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel"];
543
603
  var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
544
604
  var selectedTime = _ref.selectedTime,
545
- onChange = _ref.onChange,
546
- disabled = _ref.disabled,
547
- className = _ref.className,
548
- style = _ref.style,
549
- label = _ref.label,
550
- labelTooltip = _ref.labelTooltip,
551
- feedback = _ref.feedback,
552
- variant = _ref.variant,
553
- customLocale = _ref.locale,
554
- showTimeZone = _ref.showTimeZone,
555
- _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
556
- minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
557
- _ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
558
- leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
559
- _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
560
- rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
561
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
605
+ onChange = _ref.onChange,
606
+ disabled = _ref.disabled,
607
+ className = _ref.className,
608
+ style = _ref.style,
609
+ label = _ref.label,
610
+ labelTooltip = _ref.labelTooltip,
611
+ feedback = _ref.feedback,
612
+ variant = _ref.variant,
613
+ customLocale = _ref.locale,
614
+ showTimeZone = _ref.showTimeZone,
615
+ _ref$minuteIncrementF = _ref.minuteIncrementForArrowButtons,
616
+ minuteIncrementForArrowButtons = _ref$minuteIncrementF === void 0 ? 30 : _ref$minuteIncrementF,
617
+ _ref$leftArrowButtonA = _ref.leftArrowButtonAriaLabel,
618
+ leftArrowButtonAriaLabel = _ref$leftArrowButtonA === void 0 ? "Trekk fra " + minuteIncrementForArrowButtons + " minutter" : _ref$leftArrowButtonA,
619
+ _ref$rightArrowButton = _ref.rightArrowButtonAriaLabel,
620
+ rightArrowButtonAriaLabel = _ref$rightArrowButton === void 0 ? "Legg til " + minuteIncrementForArrowButtons + " minutter" : _ref$rightArrowButton,
621
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
622
+
562
623
  var _useLocale = useLocale(),
563
- locale = _useLocale.locale;
624
+ locale = _useLocale.locale;
625
+
564
626
  if (customLocale) locale = customLocale;
565
627
  var state = useTimeFieldState(_extends({
566
628
  onChange: onChange,
@@ -571,12 +633,15 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
571
633
  isDisabled: disabled
572
634
  }, rest));
573
635
  var timeFieldRef = useRef(null);
636
+
574
637
  var _useTimeField = useTimeField(_extends({}, rest, {
575
- label: label
576
- }), state, timeFieldRef),
577
- labelProps = _useTimeField.labelProps,
578
- fieldProps = _useTimeField.fieldProps;
638
+ label: label
639
+ }), state, timeFieldRef),
640
+ labelProps = _useTimeField.labelProps,
641
+ fieldProps = _useTimeField.fieldProps;
642
+
579
643
  var id = useRandomId('timepicker');
644
+
580
645
  var handleOnClickArrowButton = function handleOnClickArrowButton(minutes) {
581
646
  if (someSegmentIsUndefined) {
582
647
  setTimeToNearestMinuteIncrement();
@@ -584,9 +649,11 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
584
649
  addMinutesToSelectedTime(minutes);
585
650
  }
586
651
  };
652
+
587
653
  var someSegmentIsUndefined = state.segments.some(function (segment) {
588
654
  return segment.text === '––';
589
655
  });
656
+
590
657
  var setTimeToNearestMinuteIncrement = function setTimeToNearestMinuteIncrement() {
591
658
  var currentTime = now(getLocalTimeZone());
592
659
  var roundedMinute = Math.floor(currentTime.minute / minuteIncrementForArrowButtons) * minuteIncrementForArrowButtons;
@@ -595,12 +662,15 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
595
662
  });
596
663
  onChange(newTime);
597
664
  };
665
+
598
666
  var addMinutesToSelectedTime = function addMinutesToSelectedTime(minutes) {
599
667
  var _state$value;
668
+
600
669
  state.value && state.setValue((_state$value = state.value) == null ? void 0 : _state$value.add({
601
670
  minutes: minutes
602
671
  }));
603
672
  };
673
+
604
674
  return React.createElement(I18nProvider, {
605
675
  locale: locale
606
676
  }, React.createElement("div", {
@@ -642,16 +712,17 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
642
712
  });
643
713
 
644
714
  var _excluded = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
645
- _excluded2 = ["onChange", "value"];
715
+ _excluded2 = ["onChange", "value"];
646
716
  var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
647
717
  var className = _ref.className,
648
- style = _ref.style,
649
- onChange = _ref.onChange,
650
- label = _ref.label,
651
- feedback = _ref.feedback,
652
- variant = _ref.variant,
653
- prepend = _ref.prepend,
654
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
718
+ style = _ref.style,
719
+ onChange = _ref.onChange,
720
+ label = _ref.label,
721
+ feedback = _ref.feedback,
722
+ variant = _ref.variant,
723
+ prepend = _ref.prepend,
724
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
725
+
655
726
  var nativetimepickerId = useRandomId('eds-native-timepicker');
656
727
  return React.createElement(BaseFormControl, {
657
728
  style: style,
@@ -670,13 +741,16 @@ var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
670
741
  });
671
742
  var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
672
743
  var onChange = _ref2.onChange,
673
- value = _ref2.value,
674
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
744
+ value = _ref2.value,
745
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
746
+
675
747
  var contextVariant = useVariant();
676
748
  var currentVariant = rest.variant || contextVariant;
749
+
677
750
  var _useInputGroupContext = useInputGroupContext(),
678
- isTimepickerFilled = _useInputGroupContext.isFilled,
679
- setFiller = _useInputGroupContext.setFilled;
751
+ isTimepickerFilled = _useInputGroupContext.isFilled,
752
+ setFiller = _useInputGroupContext.setFilled;
753
+
680
754
  useOnMount(function () {
681
755
  setFiller && !isTimepickerFilled && setFiller(true);
682
756
  });
@@ -687,16 +761,19 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
687
761
  setFiller && isTimepickerFilled && setFiller(false);
688
762
  }
689
763
  }, [value, setFiller, isTimepickerFilled]);
764
+
690
765
  var handleChange = function handleChange(event) {
691
766
  if (isFilled(event.target)) {
692
767
  setFiller && !isTimepickerFilled && setFiller(true);
693
768
  } else {
694
769
  setFiller && isTimepickerFilled && setFiller(false);
695
770
  }
771
+
696
772
  if (onChange) {
697
773
  onChange(event);
698
774
  }
699
775
  };
776
+
700
777
  return React.createElement("input", _extends({
701
778
  ref: ref,
702
779
  "aria-invalid": currentVariant === 'error',
@@ -715,16 +792,20 @@ var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
715
792
  * @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.
716
793
  * @returns {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
717
794
  */
795
+
718
796
  var nativeDateToTimeValue = function nativeDateToTimeValue(date, noDateOnlyTime, timeZone, offset) {
719
797
  if (noDateOnlyTime === void 0) {
720
798
  noDateOnlyTime = false;
721
799
  }
800
+
722
801
  if (timeZone) {
723
802
  if (offset) {
724
803
  return new ZonedDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), timeZone, offset, date.getHours(), date.getMinutes(), date.getSeconds());
725
804
  }
805
+
726
806
  return parseAbsolute(date.toISOString(), timeZone);
727
807
  }
808
+
728
809
  if (noDateOnlyTime) return new Time(date.getHours(), date.getMinutes(), date.getSeconds(), 0);
729
810
  return new CalendarDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
730
811
  };
@@ -735,6 +816,7 @@ var nativeDateToTimeValue = function nativeDateToTimeValue(date, noDateOnlyTime,
735
816
  * @returns {Date} et Date-objekt med verdier fra time
736
817
  */
737
818
  // This function uses a lot of @ts-expect-error to make it work with all TimeValue types. Sorry ...
819
+
738
820
  var timeValueToNativeDate = function timeValueToNativeDate(time, timeZoneForCalendarDateTime) {
739
821
  // @ts-expect-error .day does not exist on Time-object
740
822
  if (!time.day) {
@@ -744,22 +826,20 @@ var timeValueToNativeDate = function timeValueToNativeDate(time, timeZoneForCale
744
826
  date.setMinutes(time.minute);
745
827
  date.setSeconds(time.second);
746
828
  return date;
747
- }
748
- // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
829
+ } // @ts-expect-error .timeZone does not exist in type Time and CalendarDateTime
830
+
831
+
749
832
  if (!time.timeZone) {
750
833
  // type is CalendarDateTime
751
- if (timeZoneForCalendarDateTime)
752
- // @ts-expect-error .toDate(timeZone) does not exist in type Time
834
+ if (timeZoneForCalendarDateTime) // @ts-expect-error .toDate(timeZone) does not exist in type Time
753
835
  return time.toDate(timeZoneForCalendarDateTime);
754
- return new Date(
755
- // @ts-expect-error not in type Time
756
- time.year,
757
- // @ts-expect-error not in type Time
758
- time.month - 1,
759
- // @ts-expect-error not in type Time
836
+ return new Date( // @ts-expect-error not in type Time
837
+ time.year, // @ts-expect-error not in type Time
838
+ time.month - 1, // @ts-expect-error not in type Time
760
839
  time.day, time.hour, time.minute, time.second);
761
- }
762
- // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
840
+ } // @ts-expect-error .toDate() does not exist in type Time or CalendarDateTime
841
+
842
+
763
843
  return time.toDate();
764
844
  };
765
845