@entur/datepicker 11.0.1-beta.0 → 11.0.2

package/dist/DatePicker/DateField.d.ts

@@ -77,9 +77,10 @@ export type DateFieldProps<DateType extends DateValue> = Omit<AriaDatePickerProp
     fieldProps?: DateFieldProps<DateType>;
     dateFieldRef?: React.Ref<HTMLDivElement>;
     disabled?: boolean;
+    readOnly?: boolean;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
 };
-export declare const DateField: <DateType extends DateValue>({ selectedDate, onChange, label, locale: customLocale, showTimeZone, showTime, granularity, disabled, isDisabled, variant, feedback, validationVariant, validationFeedback, labelTooltip, minDate, maxDate, forcedReturnType, style, className, labelProps: parentLabelProps, append, prepend, dateFieldRef: ref, ...rest }: DateFieldProps<DateType>) => React.JSX.Element;
+export declare const DateField: <DateType extends DateValue>({ selectedDate, onChange, label, locale: customLocale, showTimeZone, showTime, granularity, disabled, readOnly, isDisabled, variant, feedback, validationVariant, validationFeedback, labelTooltip, minDate, maxDate, forcedReturnType, style, className, labelProps: parentLabelProps, append, prepend, dateFieldRef: ref, ...rest }: DateFieldProps<DateType>) => React.JSX.Element;
 export {};

package/dist/DatePicker/DatePicker.d.ts

@@ -39,4 +39,4 @@ export type DatePickerProps<DateType extends DateValue> = Omit<DateFieldProps<Da
      */
     ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const DatePicker: <DateType extends DateValue>({ selectedDate, locale, disabled, showTime, showTimeZone, classNameForDate, className, variant, feedback, validationVariant, validationFeedback, showWeekNumbers, weekNumberHeader, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, append, prepend, granularity, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
+export declare const DatePicker: <DateType extends DateValue>({ 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, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;

package/dist/TimePicker/TimePicker.d.ts

@@ -47,6 +47,7 @@ export type TimePickerProps<TimeType extends TimeValue> = {
     variant?: VariantType | typeof error | typeof info;
     labelTooltip?: React.ReactNode;
     disabled?: boolean;
+    readOnly?: boolean;
     inputRef?: React.ForwardedRef<HTMLDivElement>;
     /** Tvinger typen på onChange til den gitte typen.
      * Dette er nyttig når utgangsverdien din er 'null', men du ønsker at
@@ -63,5 +64,5 @@ export type TimePickerProps<TimeType extends TimeValue> = {
     className?: string;
     style?: React.CSSProperties;
 } & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'> & Omit<Partial<BaseFormControlProps>, 'children' | 'label'>;
-export declare const TimePicker: <TimeType extends TimeValue>({ selectedTime, onChange, disabled, className, style, label, labelTooltip, feedback, granularity, variant, locale: customLocale, showTimeZone, showSeconds, minuteIncrementForArrowButtons, leftArrowButtonAriaLabel, rightArrowButtonAriaLabel, inputRef, forcedReturnType, forcedTimeZone, append, prepend, ...rest }: TimePickerProps<TimeType>) => React.JSX.Element;
+export declare const TimePicker: <TimeType extends TimeValue>({ selectedTime, onChange, disabled, readOnly, className, style, label, labelTooltip, feedback, granularity, variant, locale: customLocale, showTimeZone, showSeconds, minuteIncrementForArrowButtons, leftArrowButtonAriaLabel, rightArrowButtonAriaLabel, inputRef, forcedReturnType, forcedTimeZone, append, prepend, ...rest }: TimePickerProps<TimeType>) => React.JSX.Element;
 export {};

package/dist/TimePicker/TimePickerArrowButton.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 type TimePickerArrowButtonProps = {
     direction: 'left' | 'right';
     disabled?: boolean;
+    readonly?: boolean;
     'aria-label': string;
     onClick?: () => void;
     onFocus?: () => void;
 };
-export declare const TimePickerArrowButton: ({ direction, onClick, disabled, "aria-label": ariaLabel, ...rest }: TimePickerArrowButtonProps) => React.JSX.Element;
+export declare const TimePickerArrowButton: ({ direction, onClick, disabled, readonly, "aria-label": ariaLabel, ...rest }: TimePickerArrowButtonProps) => React.JSX.Element;
 export {};

package/dist/datepicker.cjs.development.js

@@ -220,7 +220,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,
@@ -231,6 +231,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,
@@ -269,7 +270,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 = datepicker$1.useDateFieldState(_props);
@@ -292,6 +293,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,
@@ -524,11 +526,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,
@@ -565,7 +568,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 = datepicker$1.useDatePickerState(_props);
   var _useDatePicker = datepicker.useDatePicker(_props, state, datePickerRef),
@@ -639,7 +642,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'
@@ -656,6 +659,7 @@ var DatePicker = function DatePicker(_ref) {
       'eds-datepicker--disabled': disabled
     }),
     disabled: disabled,
+    readOnly: readOnly,
     feedback: feedback,
     labelProps: labelProps,
     labelTooltip: labelTooltip,
@@ -747,7 +751,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,
@@ -766,11 +770,12 @@ var TimePickerArrowButton = function TimePickerArrowButton(_ref) {
   }, rest), direction === 'left' ? React.createElement(icons.LeftArrowIcon, null) : React.createElement(icons.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,
@@ -816,7 +821,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 = React.useRef(null);
@@ -856,7 +861,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');
@@ -869,9 +874,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,
@@ -887,7 +894,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');