@entur/datepicker 9.4.12 → 10.0.0-beta.0

package/dist/DatePicker/DateField.d.ts

@@ -1,16 +1,17 @@
 import React from 'react';
-import type { SpectrumDateFieldProps, DateValue } from '@react-types/datepicker';
+import type { SpectrumDateFieldProps, DateValue, AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
+import { BaseFormControlProps } from '@entur/form';
 import { VariantType } from '@entur/utils';
 import './DateField.scss';
 /** @deprecated use variant="information" instead */
 declare const info = "info";
 /** @deprecated use variant="negative" instead */
 declare const error = "error";
-export type DateFieldProps = {
+export type DateFieldProps<DateType extends DateValue> = {
     /** Den valgte tiden. Tid i '@internationalized/date'-pakkens format */
-    selectedDate: DateValue | null;
+    selectedDate: DateType | null;
     /** Kalles når tiden endres. Tid i '@internationalized/date'-pakkens format */
-    onChange: (value: DateValue) => void;
+    onChange: (value: MappedDateValue<DateType> | null) => void;
     /** Label til TimePicker */
     label: string;
     /** BCP47-språkkoden til locale-en du ønsker å bruke.
@@ -47,13 +48,16 @@ export type DateFieldProps = {
     /** Valideringsvariant for melding om ugyldig dato
      * @default "negative"
      */
-    validationVariant?: VariantType;
+    validationVariant?: VariantType | typeof error | typeof info;
     labelTooltip?: React.ReactNode;
+    labelProps?: React.DOMAttributes<Element>;
+    fieldProps?: AriaDatePickerProps<DateValue>;
+    groupProps?: React.DOMAttributes<Element>;
+    dateFieldRef?: React.Ref<HTMLDivElement>;
     disabled?: boolean;
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-    [key: string]: any;
-} & Omit<SpectrumDateFieldProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const DateField: React.ForwardRefExoticComponent<Omit<DateFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<SpectrumDateFieldProps<DateValue>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'> & Omit<Partial<BaseFormControlProps>, 'children'>;
+export declare const DateField: <DateType extends DateValue>({ selectedDate, onChange, label, locale: customLocale, showTimeZone, showTime, granularity, disabled, isDisabled, variant, feedback, validationVariant, validationFeedback, labelTooltip, minDate, maxDate, style, className, labelProps: parentLabelProps, fieldProps: parentFieldProps, groupProps: parentGroupProps, append, prepend, dateFieldRef: ref, ...rest }: DateFieldProps<DateType>) => React.JSX.Element;
 export {};

package/dist/DatePicker/DatePicker.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CalendarDate, DateValue } from '@internationalized/date';
 import type { AriaDatePickerProps, MappedDateValue } from '@react-types/datepicker';
+import type { BaseFormControlProps } from '@entur/form';
 import type { VariantType } from '@entur/utils';
 import './DatePicker.scss';
 /** @deprecated use variant="information" instead */
@@ -104,6 +105,6 @@ export type DatePickerProps<DateType extends DateValue> = {
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-} & Omit<AriaDatePickerProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, classNameForDate, className, style, variant, feedback, validationVariant, validationFeedback, showWeekNumbers, weekNumberHeader, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
+} & Omit<AriaDatePickerProps<DateType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'> & Omit<Partial<BaseFormControlProps>, 'children'>;
+export declare const DatePicker: <DateType extends DateValue>({ selectedDate, onChange, locale, disabled, showTime, showTimeZone, classNameForDate, className, style, variant, feedback, validationVariant, validationFeedback, showWeekNumbers, weekNumberHeader, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, forcedReturnType, ariaLabelForDate, append, prepend, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
 export {};

package/dist/TimePicker/SimpleTimePicker.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TimeValue, AriaTimeFieldProps, MappedTimeValue } from '@react-types/datepicker';
+import { BaseFormControlProps } from '@entur/form';
 import { VariantType } from '@entur/utils';
 import './SimpleTimePicker.scss';
 /** @deprecated use variant="information" instead */
@@ -41,6 +42,6 @@ export type SimpleTimePickerProps<TimeType extends TimeValue> = {
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-} & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue' | 'locale' | 'isReadOnly' | 'isDisabled' | 'locale'>;
+} & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue' | 'locale' | 'isReadOnly' | 'isDisabled' | 'locale'> & Omit<Partial<BaseFormControlProps>, 'children'>;
 export declare const SimpleTimePicker: <TimeType extends TimeValue>({ append, className, disabled, feedback, showClockIcon, inputRef, label, labelTooltip, onChange, padding, prepend, readOnly, selectedTime, showSeconds, style, variant, ...rest }: SimpleTimePickerProps<TimeType>) => React.JSX.Element;
 export {};

package/dist/TimePicker/TimePicker.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TimeValue, AriaTimeFieldProps, MappedTimeValue } from '@react-types/datepicker';
+import { BaseFormControlProps } from '@entur/form';
 import { VariantType } from '@entur/utils';
 import './TimePicker.scss';
 /** @deprecated use variant="information" instead */
@@ -61,6 +62,6 @@ export type TimePickerProps<TimeType extends TimeValue> = {
     /** Ekstra klassenavn */
     className?: string;
     style?: React.CSSProperties;
-} & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'>;
-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, ...rest }: TimePickerProps<TimeType>) => React.JSX.Element;
+} & Omit<AriaTimeFieldProps<TimeType>, 'value' | 'onChange' | 'label' | 'hideTimeZone' | 'placeholder' | 'minValue' | 'maxValue'> & Partial<BaseFormControlProps>;
+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 {};

package/dist/datepicker.cjs.development.js

@@ -214,8 +214,8 @@ function getWeekNumberForDate(date$1) {
   return weekNumber;
 }
 
-var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "append"];
-var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var _excluded$a = ["selectedDate", "onChange", "label", "locale", "showTimeZone", "showTime", "granularity", "disabled", "isDisabled", "variant", "feedback", "validationVariant", "validationFeedback", "labelTooltip", "minDate", "maxDate", "style", "className", "labelProps", "fieldProps", "groupProps", "append", "prepend", "dateFieldRef"];
+var DateField = function DateField(_ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
     label = _ref.label,
@@ -238,7 +238,11 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style = _ref.style,
     className = _ref.className,
     parentLabelProps = _ref.labelProps,
+    parentFieldProps = _ref.fieldProps,
+    parentGroupProps = _ref.groupProps,
     append = _ref.append,
+    prepend = _ref.prepend,
+    ref = _ref.dateFieldRef,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
@@ -246,6 +250,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     locale: customLocale != null ? customLocale : locale,
     createCalendar: createCalendar,
     value: selectedDate,
+    //@ts-expect-error incorrect type in package
     onChange: onChange,
     hideTimeZone: !showTimeZone,
     granularity: showTime ? 'minute' : granularity,
@@ -256,7 +261,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     shouldForceLeadingZeros: true
   }));
   var dateFieldRef = React.useRef(null);
-  var _useDateField = datepicker.useDateField(_extends({}, rest, {
+  var _useDateField = datepicker.useDateField(_extends({}, parentFieldProps, rest, {
       label: label
     }), state, dateFieldRef),
     labelProps = _useDateField.labelProps,
@@ -270,28 +275,36 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, child);
     }
   }, React.createElement(form.BaseFormControl, _extends({
-    style: style,
-    className: classNames('eds-datefield', className),
-    labelId: id,
-    ref: utils.mergeRefs(dateFieldRef, ref),
+    append: append,
+    ariaAlertOnFeedback: true,
+    className: classNames('eds-datefield', className, {
+      'eds-datefield--has-tooltip': labelTooltip !== undefined
+    }),
     disabled: isDisabled || disabled,
     disableLabelAnimation: true,
+    feedback: feedback != null ? feedback : state.validationState === 'invalid' ? validationFeedback : undefined,
     label: label,
+    labelId: id,
+    labelProps: parentLabelProps != null ? parentLabelProps : labelProps,
     labelTooltip: labelTooltip,
-    labelProps: parentLabelProps != null ? parentLabelProps : labelProps
+    prepend: prepend,
+    ref: ref,
+    style: style,
+    variant: variant != null ? variant : state.validationState === 'invalid' ? validationVariant : undefined
+  }, parentGroupProps), React.createElement("span", _extends({
+    ref: dateFieldRef
   }, fieldProps, {
-    variant: variant != null ? variant : state.validationState === 'invalid' ? validationVariant : undefined,
-    feedback: feedback != null ? feedback : state.validationState === 'invalid' ? validationFeedback : undefined,
-    append: append,
-    ariaAlertOnFeedback: true
+    style: {
+      display: 'contents'
+    }
   }), state.segments.map(function (segment, i) {
     return React.createElement(FieldSegment, {
       segment: segment,
       state: state,
       key: i
     });
-  })));
-});
+  }))));
+};
 
 var _excluded$9 = ["children", "className", "style"];
 var CalendarButton = function CalendarButton(_ref) {
@@ -498,7 +511,7 @@ var CalendarBase = function CalendarBase(_ref2) {
   }));
 };
 
-var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate"];
+var _excluded$5 = ["selectedDate", "onChange", "locale", "disabled", "showTime", "showTimeZone", "classNameForDate", "className", "style", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
     onChange = _ref.onChange,
@@ -509,6 +522,7 @@ var DatePicker = function DatePicker(_ref) {
     showTimeZone = _ref$showTimeZone === void 0 ? false : _ref$showTimeZone,
     classNameForDate = _ref.classNameForDate,
     className = _ref.className,
+    style = _ref.style,
     variant = _ref.variant,
     feedback = _ref.feedback,
     validationVariant = _ref.validationVariant,
@@ -525,6 +539,8 @@ var DatePicker = function DatePicker(_ref) {
     modalTreshold = _ref$modalTreshold === void 0 ? 1000 : _ref$modalTreshold,
     forcedReturnType = _ref.forcedReturnType,
     ariaLabelForDate = _ref.ariaLabelForDate,
+    append = _ref.append,
+    prepend = _ref.prepend,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   var datePickerRef = React.useRef(null);
@@ -620,38 +636,45 @@ var DatePicker = function DatePicker(_ref) {
         locale: locale
       }, child);
     }
-  }, React.createElement("div", {
-    className: classNames('eds-datepicker', className)
-  }, React.createElement("div", _extends({}, groupProps, {
-    ref: datePickerRef,
-    id: undefined,
-    className: "eds-datepicker__datefield__wrapper"
-  }), React.createElement(DateField, _extends({}, fieldProps, {
-    selectedDate: selectedDate,
-    onChange: handleOnChange,
+  }, React.createElement(DateField, {
+    append: !disabled && React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, append, React.createElement(CalendarButton, _extends({}, buttonProps, {
+      onPress: function onPress() {
+        state.setOpen(!state.isOpen);
+        update();
+      },
+      className: "eds-datepicker__open-calendar-button"
+    }), React.createElement(icons.CalendarIcon, null))),
+    prepend: prepend,
+    className: classNames('eds-datepicker', className, {
+      'eds-datepicker--disabled': disabled
+    }),
+    disabled: disabled,
+    feedback: feedback,
+    fieldProps: fieldProps,
+    groupProps: groupProps,
     label: rest.label,
     labelProps: labelProps,
-    disabled: disabled,
-    minDate: minDate,
+    labelTooltip: labelTooltip,
     maxDate: maxDate,
+    minDate: minDate,
+    onChange: handleOnChange,
+    dateFieldRef: function dateFieldRef(node) {
+      refs.setReference(node);
+      datePickerRef.current = node;
+    },
+    selectedDate: selectedDate,
     showTime: showTime,
     showTimeZone: showTimeZone,
-    ref: refs.setReference,
-    variant: variant,
-    feedback: feedback,
-    validationVariant: validationVariant,
+    style: style,
     validationFeedback: validationFeedback,
-    labelTooltip: labelTooltip,
-    className: classNames('eds-datepicker__datefield', {
-      'eds-datepicker__datefield--disabled': disabled
-    })
-  })), !disabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
-    onPress: function onPress() {
-      state.setOpen(!state.isOpen);
-      update();
-    },
-    className: "eds-datepicker__open-calendar-button"
-  }), React.createElement(icons.CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
+    validationVariant: validationVariant,
+    variant: variant
+  }), useModal ? modalCalendar : popoverCalendar);
 };
 
 var _excluded$4 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
@@ -746,7 +769,7 @@ 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"];
+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 TimePicker = function TimePicker(_ref) {
   var selectedTime = _ref.selectedTime,
     onChange = _ref.onChange,
@@ -771,6 +794,8 @@ var TimePicker = function TimePicker(_ref) {
     inputRef = _ref.inputRef,
     forcedReturnType = _ref.forcedReturnType,
     forcedTimeZone = _ref.forcedTimeZone,
+    append = _ref.append,
+    prepend = _ref.prepend,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
@@ -826,28 +851,44 @@ var TimePicker = function TimePicker(_ref) {
   };
   return React.createElement(i18n.I18nProvider, {
     locale: locale
-  }, React.createElement("div", {
-    className: classNames(className, 'eds-timepicker__wrapper')
-  }, React.createElement(form.BaseFormControl, _extends({
-    style: style,
-    className: classNames('eds-timepicker', {
-      'eds-timepicker--disabled': disabled
+  }, React.createElement(form.BaseFormControl, {
+    append: React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, append, React.createElement(TimePickerArrowButton, {
+      direction: "right",
+      disabled: disabled,
+      "aria-label": rightArrowButtonAriaLabel,
+      onClick: function onClick() {
+        return handleOnClickArrowButton('add');
+      },
+      onFocus: function onFocus() {
+        return focusSegment(timeFieldRef, 'last');
+      }
+    })),
+    ariaAlertOnFeedback: true,
+    "aria-describedby": timePickerId + 'description',
+    className: classNames('eds-timepicker', className, {
+      'eds-timepicker--disabled': disabled,
+      'eds-timepicker--has-tooltip': labelTooltip !== undefined
     }),
-    labelId: id,
+    disabled: disabled,
+    disableLabelAnimation: true,
+    feedback: feedback,
     label: label,
+    labelId: id,
     labelProps: _extends({}, labelProps, {
       'aria-describedby': timePickerId + 'description'
     }),
-    ref: utils.mergeRefs(timeFieldRef, inputRef),
-    disabled: disabled,
-    disableLabelAnimation: true,
-    labelTooltip: labelTooltip
-  }, fieldProps, {
-    variant: variant,
-    feedback: feedback,
-    ariaAlertOnFeedback: true,
-    "aria-describedby": timePickerId + 'description',
-    prepend: React.createElement(TimePickerArrowButton, {
+    labelTooltip: labelTooltip,
+    prepend: React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, React.createElement(TimePickerArrowButton, {
       direction: "left",
       disabled: disabled,
       "aria-label": leftArrowButtonAriaLabel,
@@ -857,18 +898,16 @@ var TimePicker = function TimePicker(_ref) {
       onFocus: function onFocus() {
         return focusSegment(timeFieldRef, 'first');
       }
-    }),
-    append: React.createElement(TimePickerArrowButton, {
-      direction: "right",
-      disabled: disabled,
-      "aria-label": rightArrowButtonAriaLabel,
-      onClick: function onClick() {
-        return handleOnClickArrowButton('add');
-      },
-      onFocus: function onFocus() {
-        return focusSegment(timeFieldRef, 'last');
-      }
-    })
+    }), prepend),
+    ref: inputRef,
+    style: style,
+    variant: variant
+  }, React.createElement("span", _extends({
+    ref: timeFieldRef
+  }, fieldProps, {
+    style: {
+      display: 'contents'
+    }
   }), state.segments.map(function (segment, i) {
     return React.createElement(FieldSegment, {
       segment: segment,
@@ -1093,12 +1132,14 @@ var SimpleTimePicker = function SimpleTimePicker(_ref) {
       onClick: function onClick() {
         var _timeFieldRef$current;
         return timeFieldRef == null ? void 0 : (_timeFieldRef$current = timeFieldRef.current) == null ? void 0 : _timeFieldRef$current.focus();
-      }
+      },
+      inline: true
     }) : undefined),
     className: classNames('eds-simple-timepicker', {
       'eds-simple-timepicker--padding-large': padding === 'large',
       'eds-simple-timepicker--show-seconds': showSeconds,
-      'eds-simple-timepicker--hide-clock': !showClockIcon
+      'eds-simple-timepicker--hide-clock': !showClockIcon,
+      'eds-simple-timepicker--has-tooltip': labelTooltip !== undefined
     }),
     disabled: disabled,
     disableLabelAnimation: true,