@entur/datepicker 8.1.0-beta.2 → 8.1.1
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 +13 -13
- package/dist/DatePicker/CalendarCell.d.ts +10 -10
- package/dist/DatePicker/CalendarGrid.d.ts +9 -9
- package/dist/DatePicker/DateField.d.ts +45 -45
- package/dist/DatePicker/DatePicker.d.ts +65 -65
- package/dist/DatePicker/NativeDatePicker.d.ts +38 -38
- package/dist/DatePicker/index.d.ts +4 -4
- package/dist/TimePicker/NativeTimePicker.d.ts +27 -27
- package/dist/TimePicker/SimpleTimePicker.d.ts +41 -39
- package/dist/TimePicker/TimePicker.d.ts +43 -43
- package/dist/TimePicker/TimePickerArrowButton.d.ts +6 -6
- package/dist/TimePicker/index.d.ts +4 -4
- package/dist/datepicker.cjs.development.js +109 -99
- 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 +21 -20
- package/dist/datepicker.esm.js.map +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/shared/CalendarButton.d.ts +9 -9
- package/dist/shared/FieldSegment.d.ts +9 -9
- package/dist/shared/index.d.ts +1 -1
- package/dist/shared/utils.d.ts +30 -30
- package/dist/styles.css +114 -120
- package/package.json +10 -10
|
@@ -21,12 +21,6 @@ var FocusLock = require('react-focus-lock');
|
|
|
21
21
|
var tokens = require('@entur/tokens');
|
|
22
22
|
var modal = require('@entur/modal');
|
|
23
23
|
|
|
24
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
|
-
|
|
26
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
27
|
-
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
28
|
-
var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
|
|
29
|
-
|
|
30
24
|
function _extends() {
|
|
31
25
|
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
32
26
|
for (var i = 1; i < arguments.length; i++) {
|
|
@@ -69,9 +63,9 @@ var FieldSegment = function FieldSegment(_ref) {
|
|
|
69
63
|
if (segment.text.match(/\d+/)) return segment.text.padStart(2, '0');
|
|
70
64
|
return segment.text;
|
|
71
65
|
};
|
|
72
|
-
return
|
|
66
|
+
return React.createElement("div", _extends({}, segmentProps, {
|
|
73
67
|
ref: ref,
|
|
74
|
-
className:
|
|
68
|
+
className: classNames('eds-date-and-time-field__segment', {
|
|
75
69
|
'eds-date-and-time-field__segment--placeholder': segment.isPlaceholder,
|
|
76
70
|
'eds-date-and-time-field__segment--dot-separator': segment.text === '.'
|
|
77
71
|
}),
|
|
@@ -88,13 +82,13 @@ var nativeDateToDateTime = function nativeDateToDateTime(date$1, timeZone, offse
|
|
|
88
82
|
}
|
|
89
83
|
return new date.CalendarDateTime(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate(), date$1.getHours(), date$1.getMinutes(), date$1.getSeconds());
|
|
90
84
|
};
|
|
91
|
-
/**
|
|
92
|
-
* Tar inn et JS Date-objekt og returnerer et av DateValue-objektene fra @internationalized/date-pakken
|
|
93
|
-
* @param {Date} date JS Date-objekt som ønskes konvertert til et DateValue-objekt
|
|
94
|
-
* @param {boolean} noTimeOnlyDate Hvis tidspunktet er irrelevant kan denne settes til true, da får man et CalendarDate-objekt uten tidspunkt tilbake
|
|
95
|
-
* @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
|
|
96
|
-
* @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.
|
|
97
|
-
* @returns {CalendarDateTime | ZonedDateTime | CalendarDate} et av DateValue-objektene med verdier fra date
|
|
85
|
+
/**
|
|
86
|
+
* Tar inn et JS Date-objekt og returnerer et av DateValue-objektene fra @internationalized/date-pakken
|
|
87
|
+
* @param {Date} date JS Date-objekt som ønskes konvertert til et DateValue-objekt
|
|
88
|
+
* @param {boolean} noTimeOnlyDate Hvis tidspunktet er irrelevant kan denne settes til true, da får man et CalendarDate-objekt uten tidspunkt tilbake
|
|
89
|
+
* @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
|
|
90
|
+
* @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.
|
|
91
|
+
* @returns {CalendarDateTime | ZonedDateTime | CalendarDate} et av DateValue-objektene med verdier fra date
|
|
98
92
|
*/
|
|
99
93
|
var nativeDateToDateValue = function nativeDateToDateValue(date$1, noTimeOnlyDate, timeZone, offset) {
|
|
100
94
|
if (noTimeOnlyDate === void 0) {
|
|
@@ -103,13 +97,13 @@ var nativeDateToDateValue = function nativeDateToDateValue(date$1, noTimeOnlyDat
|
|
|
103
97
|
if (noTimeOnlyDate) return new date.CalendarDate(date$1.getFullYear(), date$1.getMonth() + 1, date$1.getDate());
|
|
104
98
|
return nativeDateToDateTime(date$1, timeZone, offset);
|
|
105
99
|
};
|
|
106
|
-
/**
|
|
107
|
-
* Tar inn et JS Date-objekt og returnerer et av TimeValue-objektene fra @internationalized/date-pakken
|
|
108
|
-
* @param {Date} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
|
|
109
|
-
* @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato tilbake
|
|
110
|
-
* @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
|
|
111
|
-
* @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.
|
|
112
|
-
* @returns {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
|
|
100
|
+
/**
|
|
101
|
+
* Tar inn et JS Date-objekt og returnerer et av TimeValue-objektene fra @internationalized/date-pakken
|
|
102
|
+
* @param {Date} date JS Date-objekt som ønskes konvertert til et TimeValue-objekt
|
|
103
|
+
* @param {boolean} noDateOnlyTime Hvis datoen er irrelevant kan denne settes til true, da får man et Time-objekt uten dato tilbake
|
|
104
|
+
* @param {string} timeZone Tidssonen på IANA-formatet som tidpunktet skal konverteres til. Utelates denne får man et tidspunkt uten tidssone. Kan brukes med og uten en UTC-offset Vær obs på annen oppførsel med offset, les mer på beskrivelsen av offset
|
|
105
|
+
* @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.
|
|
106
|
+
* @returns {Time | CalendarDateTime | ZonedDateTime} et av TimeValue-objektene med verdier fra date
|
|
113
107
|
*/
|
|
114
108
|
var nativeDateToTimeValue = function nativeDateToTimeValue(date$1, noDateOnlyTime, timeZone, offset) {
|
|
115
109
|
if (noDateOnlyTime === void 0) {
|
|
@@ -118,11 +112,11 @@ var nativeDateToTimeValue = function nativeDateToTimeValue(date$1, noDateOnlyTim
|
|
|
118
112
|
if (noDateOnlyTime) return new date.Time(date$1.getHours(), date$1.getMinutes(), date$1.getSeconds(), 0);
|
|
119
113
|
return nativeDateToDateTime(date$1, timeZone, offset);
|
|
120
114
|
};
|
|
121
|
-
/**
|
|
122
|
-
* Tar inn et av Date- eller TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
|
|
123
|
-
* @param {DateValue | TimeValue} value En dato eller et tidspunkt på Date- eller TimeValue-formatet som ønskes konvertert til et JS Date-objekt
|
|
124
|
-
* @param {string} timeZoneForCalendarDateTime Tidssonen value er i. Fungerer kun med typen er CalendarDateTime
|
|
125
|
-
* @returns {Date} et Date-objekt med verdier fra time
|
|
115
|
+
/**
|
|
116
|
+
* Tar inn et av Date- eller TimeValue-objektene fra @internationalized/date-pakken og returnerer et JS Date-objekt
|
|
117
|
+
* @param {DateValue | TimeValue} value En dato eller et tidspunkt på Date- eller TimeValue-formatet som ønskes konvertert til et JS Date-objekt
|
|
118
|
+
* @param {string} timeZoneForCalendarDateTime Tidssonen value er i. Fungerer kun med typen er CalendarDateTime
|
|
119
|
+
* @returns {Date} et Date-objekt med verdier fra time
|
|
126
120
|
*/
|
|
127
121
|
// This function uses a lot of @ts-expect-error to make it work with all Date- and TimeValue types. Sorry ...
|
|
128
122
|
var timeOrDateValueToNativeDate = function timeOrDateValueToNativeDate(value, timeZoneForCalendarDateTime) {
|
|
@@ -184,7 +178,7 @@ var ariaLabelIfNorwegian = function ariaLabelIfNorwegian(norwegianAriaLabel, loc
|
|
|
184
178
|
};
|
|
185
179
|
|
|
186
180
|
var _excluded$9 = ["selectedDate", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
|
|
187
|
-
var DateField = /*#__PURE__*/
|
|
181
|
+
var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
188
182
|
var value = _ref.selectedDate,
|
|
189
183
|
label = _ref.label,
|
|
190
184
|
customLocale = _ref.locale,
|
|
@@ -226,16 +220,16 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
226
220
|
labelProps = _useDateField.labelProps,
|
|
227
221
|
fieldProps = _useDateField.fieldProps;
|
|
228
222
|
var id = utils.useRandomId('datefield');
|
|
229
|
-
return
|
|
223
|
+
return React.createElement(utils.ConditionalWrapper, {
|
|
230
224
|
condition: customLocale !== undefined,
|
|
231
225
|
wrapper: function wrapper(child) {
|
|
232
|
-
return
|
|
226
|
+
return React.createElement(i18n.I18nProvider, {
|
|
233
227
|
locale: customLocale
|
|
234
228
|
}, child);
|
|
235
229
|
}
|
|
236
|
-
},
|
|
230
|
+
}, React.createElement(form.BaseFormControl, _extends({
|
|
237
231
|
style: style,
|
|
238
|
-
className:
|
|
232
|
+
className: classNames('eds-datefield', className),
|
|
239
233
|
labelId: id,
|
|
240
234
|
ref: utils.mergeRefs(dateFieldRef, ref),
|
|
241
235
|
disabled: state.isDisabled,
|
|
@@ -249,7 +243,7 @@ var DateField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
249
243
|
append: append,
|
|
250
244
|
ariaAlertOnFeedback: true
|
|
251
245
|
}), state.segments.map(function (segment, i) {
|
|
252
|
-
return
|
|
246
|
+
return React.createElement(FieldSegment, {
|
|
253
247
|
segment: segment,
|
|
254
248
|
state: state,
|
|
255
249
|
key: i
|
|
@@ -266,7 +260,7 @@ var CalendarButton = function CalendarButton(_ref) {
|
|
|
266
260
|
var ref = React.useRef(null);
|
|
267
261
|
var _useButton = button.useButton(props, ref),
|
|
268
262
|
buttonProps = _useButton.buttonProps;
|
|
269
|
-
return
|
|
263
|
+
return React.createElement(button$1.IconButton, _extends({}, buttonProps, {
|
|
270
264
|
ref: ref,
|
|
271
265
|
className: className,
|
|
272
266
|
style: style
|
|
@@ -294,12 +288,12 @@ var CalendarCell = function CalendarCell(_ref) {
|
|
|
294
288
|
isDisabled = _useCalendarCell.isDisabled,
|
|
295
289
|
isUnavailable = _useCalendarCell.isUnavailable,
|
|
296
290
|
formattedDate = _useCalendarCell.formattedDate;
|
|
297
|
-
return
|
|
291
|
+
return React.createElement("td", _extends({}, cellProps, {
|
|
298
292
|
className: "eds-datepicker__calendar__grid__cell__td"
|
|
299
|
-
}),
|
|
293
|
+
}), React.createElement("div", _extends({}, buttonProps, {
|
|
300
294
|
ref: cellRef,
|
|
301
295
|
hidden: isOutsideVisibleRange,
|
|
302
|
-
className:
|
|
296
|
+
className: classNames('eds-datepicker__calendar__grid__cell', {
|
|
303
297
|
'eds-datepicker__calendar__grid__cell--selected': isSelected,
|
|
304
298
|
'eds-datepicker__calendar__grid__cell--disabled': isDisabled || isUnavailable,
|
|
305
299
|
'eds-datepicker__calendar__grid__cell--outside-month': isOutsideVisibleRange,
|
|
@@ -350,34 +344,34 @@ var CalendarGrid = function CalendarGrid(_ref) {
|
|
|
350
344
|
if (locale.toLowerCase().includes('en')) return 'Use the arrow keys to navigate between dates';
|
|
351
345
|
return 'Bruk piltastene til å navigere mellom datoer';
|
|
352
346
|
};
|
|
353
|
-
return
|
|
347
|
+
return React.createElement(React.Fragment, null, React.createElement("table", _extends({}, gridProps, {
|
|
354
348
|
cellSpacing: "0",
|
|
355
349
|
className: "eds-datepicker__calendar__grid"
|
|
356
|
-
}),
|
|
357
|
-
return
|
|
350
|
+
}), React.createElement("thead", _extends({}, headerProps), React.createElement("tr", null, weekDaysMapped().map(function (day, index) {
|
|
351
|
+
return React.createElement("th", {
|
|
358
352
|
key: index
|
|
359
353
|
}, day);
|
|
360
|
-
}))),
|
|
361
|
-
return
|
|
354
|
+
}))), React.createElement("tbody", null, weeksArray.map(function (weekIndex) {
|
|
355
|
+
return React.createElement("tr", {
|
|
362
356
|
key: weekIndex
|
|
363
357
|
}, state.getDatesInWeek(weekIndex).map(function (date, i) {
|
|
364
|
-
return date ?
|
|
358
|
+
return date ? React.createElement(CalendarCell, {
|
|
365
359
|
key: i,
|
|
366
360
|
state: state,
|
|
367
361
|
date: date,
|
|
368
362
|
"aria-describedby": calendarGridId + 'description',
|
|
369
363
|
onSelectedCellClick: onSelectedCellClick
|
|
370
|
-
}) :
|
|
364
|
+
}) : React.createElement("td", {
|
|
371
365
|
key: i
|
|
372
366
|
});
|
|
373
367
|
}));
|
|
374
|
-
}))),
|
|
368
|
+
}))), React.createElement(a11y.VisuallyHidden, {
|
|
375
369
|
id: calendarGridId + 'description'
|
|
376
370
|
}, getNavigationDescription()));
|
|
377
371
|
};
|
|
378
372
|
|
|
379
373
|
var _excluded$5 = ["selectedDate", "onChange", "locale", "style", "children", "navigationDescription", "onSelectedCellClick"];
|
|
380
|
-
var Calendar = /*#__PURE__*/
|
|
374
|
+
var Calendar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
381
375
|
var onChange = _ref.onChange,
|
|
382
376
|
customLocale = _ref.locale,
|
|
383
377
|
style = _ref.style,
|
|
@@ -399,28 +393,28 @@ var Calendar = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
|
399
393
|
prevButtonProps = _useCalendar.prevButtonProps,
|
|
400
394
|
nextButtonProps = _useCalendar.nextButtonProps,
|
|
401
395
|
title = _useCalendar.title;
|
|
402
|
-
return
|
|
396
|
+
return React.createElement(utils.ConditionalWrapper, {
|
|
403
397
|
condition: customLocale,
|
|
404
398
|
wrapper: function wrapper(child) {
|
|
405
|
-
return
|
|
399
|
+
return React.createElement(i18n.I18nProvider, {
|
|
406
400
|
locale: customLocale
|
|
407
401
|
}, child);
|
|
408
402
|
}
|
|
409
|
-
},
|
|
403
|
+
}, React.createElement("div", _extends({}, calendarProps, {
|
|
410
404
|
ref: ref,
|
|
411
405
|
className: "eds-datepicker__calendar",
|
|
412
406
|
style: style
|
|
413
|
-
}),
|
|
407
|
+
}), React.createElement("div", {
|
|
414
408
|
className: "eds-datepicker__calendar__header"
|
|
415
|
-
},
|
|
409
|
+
}, React.createElement(CalendarButton, _extends({}, prevButtonProps, {
|
|
416
410
|
"aria-label": ariaLabelIfNorwegian('Forrige måned', locale, prevButtonProps)
|
|
417
|
-
}),
|
|
411
|
+
}), React.createElement(icons.LeftArrowIcon, {
|
|
418
412
|
size: 20
|
|
419
|
-
})),
|
|
413
|
+
})), React.createElement("h2", null, title), React.createElement(CalendarButton, _extends({}, nextButtonProps, {
|
|
420
414
|
"aria-label": ariaLabelIfNorwegian('Neste måned', locale, nextButtonProps)
|
|
421
|
-
}),
|
|
415
|
+
}), React.createElement(icons.RightArrowIcon, {
|
|
422
416
|
size: 20
|
|
423
|
-
}))),
|
|
417
|
+
}))), React.createElement(CalendarGrid, {
|
|
424
418
|
state: state,
|
|
425
419
|
navigationDescription: navigationDescription,
|
|
426
420
|
onSelectedCellClick: onSelectedCellClick
|
|
@@ -508,8 +502,8 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
508
502
|
onChange: onChangeCalendar,
|
|
509
503
|
granularity: showTime ? 'minute' : rest.granularity
|
|
510
504
|
});
|
|
511
|
-
var useModal = width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
|
|
512
|
-
var popoverCalendar =
|
|
505
|
+
var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
|
|
506
|
+
var popoverCalendar = React.createElement("div", {
|
|
513
507
|
// styling for floating-UI popover
|
|
514
508
|
style: {
|
|
515
509
|
position: strategy,
|
|
@@ -520,13 +514,13 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
520
514
|
ref: function ref(node) {
|
|
521
515
|
floating(node);
|
|
522
516
|
}
|
|
523
|
-
},
|
|
517
|
+
}, React.createElement(FocusLock, {
|
|
524
518
|
disabled: !state.isOpen || useModal,
|
|
525
519
|
returnFocus: true
|
|
526
|
-
}, state.isOpen &&
|
|
520
|
+
}, state.isOpen && React.createElement(Calendar, _extends({}, calendarSharedProps, {
|
|
527
521
|
ref: calendarRef
|
|
528
522
|
}))));
|
|
529
|
-
var modalCalendar =
|
|
523
|
+
var modalCalendar = React.createElement(modal.Modal, {
|
|
530
524
|
size: "small",
|
|
531
525
|
title: "",
|
|
532
526
|
open: state.isOpen,
|
|
@@ -535,24 +529,24 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
535
529
|
},
|
|
536
530
|
closeOnClickOutside: true,
|
|
537
531
|
className: "eds-datepicker__calendar-modal"
|
|
538
|
-
},
|
|
539
|
-
return
|
|
532
|
+
}, React.createElement(Calendar, _extends({}, calendarSharedProps)));
|
|
533
|
+
return React.createElement(utils.ConditionalWrapper, {
|
|
540
534
|
condition: locale !== undefined,
|
|
541
535
|
wrapper: function wrapper(child) {
|
|
542
|
-
return
|
|
536
|
+
return React.createElement(i18n.I18nProvider, {
|
|
543
537
|
locale: locale
|
|
544
538
|
}, child);
|
|
545
539
|
}
|
|
546
|
-
},
|
|
547
|
-
className:
|
|
548
|
-
},
|
|
540
|
+
}, React.createElement("div", {
|
|
541
|
+
className: classNames('eds-datepicker', className)
|
|
542
|
+
}, React.createElement("div", _extends({}, groupProps, {
|
|
549
543
|
ref: function ref(node) {
|
|
550
544
|
datePickerRef.current = node;
|
|
551
545
|
reference(node);
|
|
552
546
|
},
|
|
553
547
|
id: undefined,
|
|
554
548
|
className: "eds-datepicker__datefield__wrapper"
|
|
555
|
-
}),
|
|
549
|
+
}), React.createElement(DateField, _extends({}, fieldProps, {
|
|
556
550
|
selectedDate: state.value,
|
|
557
551
|
label: rest.label,
|
|
558
552
|
labelProps: labelProps,
|
|
@@ -564,20 +558,20 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
564
558
|
validationVariant: validationVariant,
|
|
565
559
|
validationFeedback: validationFeedback,
|
|
566
560
|
labelTooltip: labelTooltip,
|
|
567
|
-
className:
|
|
561
|
+
className: classNames('eds-datepicker__datefield', {
|
|
568
562
|
'eds-datepicker__datefield--disabled': fieldProps.isDisabled
|
|
569
563
|
})
|
|
570
|
-
})), !fieldProps.isDisabled &&
|
|
564
|
+
})), !fieldProps.isDisabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
|
|
571
565
|
onPress: function onPress() {
|
|
572
566
|
return state.setOpen(!state.isOpen);
|
|
573
567
|
},
|
|
574
568
|
className: "eds-datepicker__open-calendar-button"
|
|
575
|
-
}),
|
|
569
|
+
}), React.createElement(icons.CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
|
|
576
570
|
};
|
|
577
571
|
|
|
578
572
|
var _excluded$3 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
|
|
579
573
|
_excluded2$2 = ["onChange", "variant", "value"];
|
|
580
|
-
var NativeDatePicker = /*#__PURE__*/
|
|
574
|
+
var NativeDatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
581
575
|
var className = _ref.className,
|
|
582
576
|
style = _ref.style,
|
|
583
577
|
label = _ref.label,
|
|
@@ -586,12 +580,12 @@ var NativeDatePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
586
580
|
variant = _ref.variant,
|
|
587
581
|
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
588
582
|
_ref$prepend = _ref.prepend,
|
|
589
|
-
prepend = _ref$prepend === void 0 ?
|
|
583
|
+
prepend = _ref$prepend === void 0 ? React.createElement(icons.DateIcon, {
|
|
590
584
|
inline: true
|
|
591
585
|
}) : _ref$prepend,
|
|
592
586
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
593
587
|
var nativedatepickerId = utils.useRandomId('eds-nativetimepicker');
|
|
594
|
-
return
|
|
588
|
+
return React.createElement(form.BaseFormControl, {
|
|
595
589
|
style: style,
|
|
596
590
|
className: className,
|
|
597
591
|
prepend: prepend,
|
|
@@ -601,14 +595,14 @@ var NativeDatePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
601
595
|
labelId: nativedatepickerId,
|
|
602
596
|
disableLabelAnimation: disableLabelAnimation,
|
|
603
597
|
isFilled: true
|
|
604
|
-
},
|
|
598
|
+
}, React.createElement(NativeDatePickerBase, _extends({
|
|
605
599
|
onChange: onChange,
|
|
606
600
|
"aria-labelledby": nativedatepickerId,
|
|
607
601
|
ref: ref,
|
|
608
602
|
variant: variant
|
|
609
603
|
}, rest)));
|
|
610
604
|
});
|
|
611
|
-
var NativeDatePickerBase = /*#__PURE__*/
|
|
605
|
+
var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
612
606
|
var onChange = _ref2.onChange,
|
|
613
607
|
variant = _ref2.variant,
|
|
614
608
|
value = _ref2.value,
|
|
@@ -621,7 +615,7 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
|
621
615
|
utils.useOnMount(function () {
|
|
622
616
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
623
617
|
});
|
|
624
|
-
|
|
618
|
+
React.useEffect(function () {
|
|
625
619
|
if (value) {
|
|
626
620
|
setFiller && !isDatepickerFilled && setFiller(true);
|
|
627
621
|
} else {
|
|
@@ -638,7 +632,7 @@ var NativeDatePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
|
638
632
|
onChange(event);
|
|
639
633
|
}
|
|
640
634
|
};
|
|
641
|
-
return
|
|
635
|
+
return React.createElement("input", _extends({
|
|
642
636
|
ref: ref,
|
|
643
637
|
"aria-invalid": currentVariant === 'error',
|
|
644
638
|
type: "date",
|
|
@@ -653,8 +647,8 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
|
653
647
|
onClick = _ref.onClick,
|
|
654
648
|
disabled = _ref.disabled,
|
|
655
649
|
ariaLabel = _ref['aria-label'];
|
|
656
|
-
return
|
|
657
|
-
className:
|
|
650
|
+
return React.createElement(button$1.IconButton, {
|
|
651
|
+
className: classNames('eds-timepicker__arrowbutton', "eds-timepicker__arrowbutton--" + direction, {
|
|
658
652
|
'eds-timepicker__arrowbutton--disabled': disabled
|
|
659
653
|
}),
|
|
660
654
|
type: "button",
|
|
@@ -662,7 +656,7 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
|
|
|
662
656
|
onClick: onClick,
|
|
663
657
|
"aria-label": ariaLabel,
|
|
664
658
|
disabled: disabled
|
|
665
|
-
}, direction === 'left' ?
|
|
659
|
+
}, direction === 'left' ? React.createElement(icons.LeftArrowIcon, null) : React.createElement(icons.RightArrowIcon, null));
|
|
666
660
|
};
|
|
667
661
|
|
|
668
662
|
var _excluded$2 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "variant", "locale", "showTimeZone", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef"];
|
|
@@ -731,18 +725,18 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
731
725
|
minutes: minutes
|
|
732
726
|
}));
|
|
733
727
|
};
|
|
734
|
-
return
|
|
728
|
+
return React.createElement(i18n.I18nProvider, {
|
|
735
729
|
locale: locale
|
|
736
|
-
},
|
|
737
|
-
className:
|
|
738
|
-
},
|
|
730
|
+
}, React.createElement("div", {
|
|
731
|
+
className: classNames(className, 'eds-timepicker__wrapper')
|
|
732
|
+
}, React.createElement(TimePickerArrowButton, {
|
|
739
733
|
direction: "left",
|
|
740
734
|
disabled: disabled,
|
|
741
735
|
"aria-label": leftArrowButtonAriaLabel,
|
|
742
736
|
onClick: function onClick() {
|
|
743
737
|
return handleOnClickArrowButton(minuteIncrementForArrowButtons * -1);
|
|
744
738
|
}
|
|
745
|
-
}),
|
|
739
|
+
}), React.createElement(form.BaseFormControl, _extends({
|
|
746
740
|
style: style,
|
|
747
741
|
className: 'eds-timepicker',
|
|
748
742
|
labelId: id,
|
|
@@ -756,12 +750,12 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
756
750
|
variant: variant,
|
|
757
751
|
feedback: feedback
|
|
758
752
|
}), state.segments.map(function (segment, i) {
|
|
759
|
-
return
|
|
753
|
+
return React.createElement(FieldSegment, {
|
|
760
754
|
segment: segment,
|
|
761
755
|
state: state,
|
|
762
756
|
key: i
|
|
763
757
|
});
|
|
764
|
-
})),
|
|
758
|
+
})), React.createElement(TimePickerArrowButton, {
|
|
765
759
|
direction: "right",
|
|
766
760
|
disabled: disabled,
|
|
767
761
|
"aria-label": rightArrowButtonAriaLabel,
|
|
@@ -773,7 +767,7 @@ var TimePicker = function TimePicker(_ref) {
|
|
|
773
767
|
|
|
774
768
|
var _excluded$1 = ["className", "style", "onChange", "label", "feedback", "variant", "prepend"],
|
|
775
769
|
_excluded2$1 = ["onChange", "value"];
|
|
776
|
-
var NativeTimePicker = /*#__PURE__*/
|
|
770
|
+
var NativeTimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
777
771
|
var className = _ref.className,
|
|
778
772
|
style = _ref.style,
|
|
779
773
|
onChange = _ref.onChange,
|
|
@@ -783,22 +777,22 @@ var NativeTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
|
|
|
783
777
|
prepend = _ref.prepend,
|
|
784
778
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
785
779
|
var nativetimepickerId = utils.useRandomId('eds-native-timepicker');
|
|
786
|
-
return
|
|
780
|
+
return React.createElement(form.BaseFormControl, {
|
|
787
781
|
style: style,
|
|
788
|
-
className:
|
|
782
|
+
className: classNames(className, 'eds-native-timepicker'),
|
|
789
783
|
prepend: prepend,
|
|
790
784
|
label: label,
|
|
791
785
|
feedback: feedback,
|
|
792
786
|
variant: variant,
|
|
793
787
|
labelId: nativetimepickerId,
|
|
794
788
|
disableLabelAnimation: true
|
|
795
|
-
},
|
|
789
|
+
}, React.createElement(NativeTimePickerBase, _extends({
|
|
796
790
|
onChange: onChange,
|
|
797
791
|
"aria-labelledby": nativetimepickerId,
|
|
798
792
|
ref: ref
|
|
799
793
|
}, rest)));
|
|
800
794
|
});
|
|
801
|
-
var NativeTimePickerBase = /*#__PURE__*/
|
|
795
|
+
var NativeTimePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
802
796
|
var onChange = _ref2.onChange,
|
|
803
797
|
value = _ref2.value,
|
|
804
798
|
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
@@ -810,7 +804,7 @@ var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
|
810
804
|
utils.useOnMount(function () {
|
|
811
805
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
812
806
|
});
|
|
813
|
-
|
|
807
|
+
React.useEffect(function () {
|
|
814
808
|
if (value) {
|
|
815
809
|
setFiller && !isTimepickerFilled && setFiller(true);
|
|
816
810
|
} else {
|
|
@@ -827,7 +821,7 @@ var NativeTimePickerBase = /*#__PURE__*/React__default["default"].forwardRef(fun
|
|
|
827
821
|
onChange(event);
|
|
828
822
|
}
|
|
829
823
|
};
|
|
830
|
-
return
|
|
824
|
+
return React.createElement("input", _extends({
|
|
831
825
|
ref: ref,
|
|
832
826
|
"aria-invalid": currentVariant === 'error',
|
|
833
827
|
type: "time",
|
|
@@ -976,16 +970,16 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
|
|
|
976
970
|
return selectedTimeWithUpdateTime;
|
|
977
971
|
};
|
|
978
972
|
var usedFieldProps = _objectWithoutPropertiesLoose(fieldProps, _excluded2);
|
|
979
|
-
return
|
|
973
|
+
return React.createElement(i18n.I18nProvider, {
|
|
980
974
|
locale: locale
|
|
981
|
-
},
|
|
982
|
-
append: append || (showClockIcon === true || showClockIcon === 'right' ?
|
|
975
|
+
}, React.createElement(form.TextField, _extends({
|
|
976
|
+
append: append || (showClockIcon === true || showClockIcon === 'right' ? React.createElement(icons.ClockIcon, {
|
|
983
977
|
onClick: function onClick() {
|
|
984
978
|
var _timeFieldRef$current;
|
|
985
979
|
return timeFieldRef == null ? void 0 : (_timeFieldRef$current = timeFieldRef.current) == null ? void 0 : _timeFieldRef$current.focus();
|
|
986
980
|
}
|
|
987
981
|
}) : undefined),
|
|
988
|
-
className:
|
|
982
|
+
className: classNames('eds-simple-timepicker', {
|
|
989
983
|
'eds-simple-timepicker--padding-large': padding === 'large',
|
|
990
984
|
'eds-simple-timepicker--show-seconds': showSeconds,
|
|
991
985
|
'eds-simple-timepicker--hide-clock': !showClockIcon
|
|
@@ -1015,7 +1009,7 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
|
|
|
1015
1009
|
if (key === 'Enter') handleChangeTime();
|
|
1016
1010
|
},
|
|
1017
1011
|
placeholder: showSeconds ? '–– : –– : ––' : '–– : ––',
|
|
1018
|
-
prepend: prepend || (showClockIcon === 'left' ?
|
|
1012
|
+
prepend: prepend || (showClockIcon === 'left' ? React.createElement(icons.ClockIcon, {
|
|
1019
1013
|
onClick: function onClick() {
|
|
1020
1014
|
var _timeFieldRef$current2;
|
|
1021
1015
|
return timeFieldRef == null ? void 0 : (_timeFieldRef$current2 = timeFieldRef.current) == null ? void 0 : _timeFieldRef$current2.focus();
|
|
@@ -1031,6 +1025,22 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
|
|
|
1031
1025
|
|
|
1032
1026
|
utils.warnAboutMissingStyles('datepicker', 'form', 'icons');
|
|
1033
1027
|
|
|
1028
|
+
Object.defineProperty(exports, 'CalendarDate', {
|
|
1029
|
+
enumerable: true,
|
|
1030
|
+
get: function () { return date.CalendarDate; }
|
|
1031
|
+
});
|
|
1032
|
+
Object.defineProperty(exports, 'CalendarDateTime', {
|
|
1033
|
+
enumerable: true,
|
|
1034
|
+
get: function () { return date.CalendarDateTime; }
|
|
1035
|
+
});
|
|
1036
|
+
Object.defineProperty(exports, 'Time', {
|
|
1037
|
+
enumerable: true,
|
|
1038
|
+
get: function () { return date.Time; }
|
|
1039
|
+
});
|
|
1040
|
+
Object.defineProperty(exports, 'ZonedDateTime', {
|
|
1041
|
+
enumerable: true,
|
|
1042
|
+
get: function () { return date.ZonedDateTime; }
|
|
1043
|
+
});
|
|
1034
1044
|
exports.Calendar = Calendar;
|
|
1035
1045
|
exports.DateField = DateField;
|
|
1036
1046
|
exports.DatePicker = DatePicker;
|