@entur/datepicker 11.0.1-beta.0 → 11.0.2

package/dist/datepicker.esm.js

@@ -217,7 +217,7 @@ function handleOnChange(_ref2) {
   onChange == null || onChange(value);
 }
 
-var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "forcedReturnType", "style", "className", "labelProps", "append", "prepend", "dateFieldRef"];
+var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "readOnly", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "forcedReturnType", "style", "className", "labelProps", "append", "prepend", "dateFieldRef"];
 var DateField = function DateField(_ref) {
   var selectedDate = _ref.selectedDate,
     _onChange = _ref.onChange,
@@ -228,6 +228,7 @@ var DateField = function DateField(_ref) {
     _ref$granularity = _ref.granularity,
     granularity = _ref$granularity === void 0 ? showTime ? 'minute' : 'day' : _ref$granularity,
     disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
     isDisabled = _ref.isDisabled,
     variant = _ref.variant,
     feedback = _ref.feedback,
@@ -266,7 +267,7 @@ var DateField = function DateField(_ref) {
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
     maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
-    isDisabled: isDisabled || disabled,
+    isDisabled: isDisabled || disabled || readOnly,
     shouldForceLeadingZeros: true
   });
   var state = useDateFieldState(_props);
@@ -289,6 +290,7 @@ var DateField = function DateField(_ref) {
       'eds-datefield--has-tooltip': labelTooltip !== undefined
     }),
     disabled: isDisabled || disabled,
+    readOnly: readOnly,
     disableLabelAnimation: true,
     feedback: feedback != null ? feedback : state.validationState === 'invalid' ? validationFeedback : undefined,
     label: label,
@@ -521,11 +523,12 @@ var CalendarBase = function CalendarBase(_ref2) {
   })));
 };
 
-var _excluded$5 = ["selectedDate", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend", "granularity"];
+var _excluded$5 = ["selectedDate", "locale", "disabled", "readOnly", "showTime", "showTimeZone", "classNameForDate", "className", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend", "granularity"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
     locale = _ref.locale,
     disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
     showTime = _ref.showTime,
     _ref$showTimeZone = _ref.showTimeZone,
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
@@ -562,7 +565,7 @@ var DatePicker = function DatePicker(_ref) {
     maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
     value: selectedDate,
     granularity: granularity,
-    isDisabled: disabled
+    isDisabled: disabled || readOnly
   });
   var state = useDatePickerState(_props);
   var _useDatePicker = useDatePicker(_props, state, datePickerRef),
@@ -636,7 +639,7 @@ var DatePicker = function DatePicker(_ref) {
       }, child);
     }
   }, React.createElement(DateField, _extends({}, groupProps, fieldProps, rest, {
-    append: !disabled && React.createElement("div", {
+    append: !disabled && !readOnly && React.createElement("div", {
       style: {
         display: 'flex',
         alignItems: 'center'
@@ -653,6 +656,7 @@ var DatePicker = function DatePicker(_ref) {
       'eds-datepicker--disabled': disabled
     }),
     disabled: disabled,
+    readOnly: readOnly,
     feedback: feedback,
     labelProps: labelProps,
     labelTooltip: labelTooltip,
@@ -744,7 +748,7 @@ var NativeDatePickerBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, rest));
 });
 
-var _excluded$3 = ["direction", "onClick", "disabled", "aria-label"];
+var _excluded$3 = ["direction", "onClick", "disabled", "readonly", "aria-label"];
 var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   var direction = _ref.direction,
     onClick = _ref.onClick,
@@ -763,11 +767,12 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   }, rest), direction === 'left' ? React.createElement(LeftArrowIcon, null) : React.createElement(RightArrowIcon, null));
 };
 
-var _excluded$2 = ["selectedTime", "onChange", "disabled", "className", "style", "label", "labelTooltip", "feedback", "granularity", "variant", "locale", "showTimeZone", "showSeconds", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef", "forcedReturnType", "forcedTimeZone", "append", "prepend"];
+var _excluded$2 = ["selectedTime", "onChange", "disabled", "readOnly", "className", "style", "label", "labelTooltip", "feedback", "granularity", "variant", "locale", "showTimeZone", "showSeconds", "minuteIncrementForArrowButtons", "leftArrowButtonAriaLabel", "rightArrowButtonAriaLabel", "inputRef", "forcedReturnType", "forcedTimeZone", "append", "prepend"];
 var TimePicker = function TimePicker(_ref) {
   var selectedTime = _ref.selectedTime,
     onChange = _ref.onChange,
     disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
     className = _ref.className,
     style = _ref.style,
     label = _ref.label,
@@ -813,7 +818,7 @@ var TimePicker = function TimePicker(_ref) {
     value: selectedTime,
     granularity: (granularity != null ? granularity : showSeconds) ? 'second' : 'minute',
     hideTimeZone: !showTimeZone,
-    isDisabled: disabled,
+    isDisabled: disabled || readOnly,
     shouldForceLeadingZeros: true
   }, rest));
   var timeFieldRef = useRef(null);
@@ -853,7 +858,7 @@ var TimePicker = function TimePicker(_ref) {
       }
     }, append, React.createElement(TimePickerArrowButton, {
       direction: "right",
-      disabled: disabled,
+      disabled: disabled || readOnly,
       "aria-label": rightArrowButtonAriaLabel,
       onClick: function onClick() {
         return handleOnClickArrowButton('add');
@@ -866,9 +871,11 @@ var TimePicker = function TimePicker(_ref) {
     "aria-describedby": timePickerId + 'description',
     className: classNames('eds-timepicker', className, {
       'eds-timepicker--disabled': disabled,
-      'eds-timepicker--has-tooltip': labelTooltip !== undefined
+      'eds-timepicker--has-tooltip': labelTooltip !== undefined,
+      'eds-timepicker--readonly': readOnly
     }),
     disabled: disabled,
+    readOnly: readOnly,
     disableLabelAnimation: true,
     feedback: feedback,
     label: label,
@@ -884,7 +891,7 @@ var TimePicker = function TimePicker(_ref) {
       }
     }, React.createElement(TimePickerArrowButton, {
       direction: "left",
-      disabled: disabled,
+      disabled: disabled || readOnly,
       "aria-label": leftArrowButtonAriaLabel,
       onClick: function onClick() {
         return handleOnClickArrowButton('subtract');