@entur/datepicker 9.4.11 → 10.0.0-beta.0

package/dist/datepicker.esm.js

@@ -1,4 +1,4 @@
-import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from '@entur/utils';
+import { useRandomId, ConditionalWrapper, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, mergeRefs, warnAboutMissingStyles } from '@entur/utils';
 import React, { useRef, useState, useEffect } from 'react';
 import { useDateFieldState, useDatePickerState, useTimeFieldState } from '@react-stately/datepicker';
 import { useDateSegment, useDateField, useDatePicker, useTimeField } from '@react-aria/datepicker';
@@ -15,7 +15,7 @@ import { IconButton } from '@entur/button';
 import { VisuallyHidden } from '@entur/a11y';
 import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react-dom';
 import FocusLock from 'react-focus-lock';
-import { space, zIndexes, timings } from '@entur/tokens';
+import { space, zIndexes } from '@entur/tokens';
 import { Modal } from '@entur/modal';
 
 function _extends() {
@@ -211,8 +211,8 @@ function getWeekNumberForDate(date) {
   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,
@@ -235,7 +235,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 = useLocale(),
     locale = _useLocale.locale;
@@ -243,6 +247,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,
@@ -253,7 +258,7 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     shouldForceLeadingZeros: true
   }));
   var dateFieldRef = useRef(null);
-  var _useDateField = useDateField(_extends({}, rest, {
+  var _useDateField = useDateField(_extends({}, parentFieldProps, rest, {
       label: label
     }), state, dateFieldRef),
     labelProps = _useDateField.labelProps,
@@ -267,28 +272,36 @@ var DateField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, child);
     }
   }, React.createElement(BaseFormControl, _extends({
-    style: style,
-    className: classNames('eds-datefield', className),
-    labelId: id,
-    ref: 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) {
@@ -495,7 +508,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,
@@ -506,6 +519,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,
@@ -522,14 +536,12 @@ 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 = useRef(null);
   var calendarRef = useRef(null);
-  var dateFieldRef = useRef(null);
-  var _useState = useState(false),
-    showAnimations = _useState[0],
-    setShowAnimations = _useState[1];
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var handleOnChange = function handleOnChange(value) {
@@ -566,14 +578,12 @@ var DatePicker = function DatePicker(_ref) {
         });
       },
       placement: 'bottom-start',
-      middleware: [offset(space.extraSmall), flip(), shift({
+      middleware: [offset(space.extraSmall2), flip(), shift({
         padding: space.extraSmall
       })]
     }),
-    x = _useFloating.x,
-    y = _useFloating.y,
     refs = _useFloating.refs,
-    strategy = _useFloating.strategy,
+    floatingStyles = _useFloating.floatingStyles,
     update = _useFloating.update;
   useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
@@ -597,26 +607,12 @@ var DatePicker = function DatePicker(_ref) {
     showWeekNumbers: showWeekNumbers,
     weekNumberHeader: weekNumberHeader
   });
-  // Initial position for popover is (0,0) before being moved to calculated position.
-  // To avoid animating this move we delay turning on animation by a few ms.
-  useEffect(function () {
-    setTimeout(function () {
-      return setShowAnimations(state.isOpen);
-    }, 10);
-  }, [state.isOpen]);
   var useModal = typeof width !== 'undefined' && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   var popoverCalendar = React.createElement("div", {
-    // styling for floating-UI popover
-    style: {
-      position: strategy,
-      top: y,
-      left: x,
-      zIndex: zIndexes.popover,
-      transition: showAnimations ? "top " + timings.medium + " ease-in-out" : 'unset'
-    },
-    ref: function ref(node) {
-      refs.setFloating(node);
-    }
+    style: _extends({}, floatingStyles, {
+      zIndex: zIndexes.popover
+    }),
+    ref: refs.setFloating
   }, React.createElement(FocusLock, {
     disabled: !state.isOpen || useModal,
     returnFocus: true
@@ -637,41 +633,45 @@ var DatePicker = function DatePicker(_ref) {
         locale: locale
       }, child);
     }
-  }, React.createElement("div", {
-    className: classNames('eds-datepicker', className)
-  }, React.createElement("div", _extends({}, groupProps, {
-    ref: function ref(node) {
-      datePickerRef.current = node;
-      refs.setReference(node);
-    },
-    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(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: dateFieldRef,
-    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(CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));
+    validationVariant: validationVariant,
+    variant: variant
+  }), useModal ? modalCalendar : popoverCalendar);
 };
 
 var _excluded$4 = ["className", "style", "label", "onChange", "feedback", "variant", "disableLabelAnimation", "prepend"],
@@ -766,7 +766,7 @@ 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"];
+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,
@@ -791,6 +791,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 = useLocale(),
     locale = _useLocale.locale;
@@ -846,28 +848,44 @@ var TimePicker = function TimePicker(_ref) {
   };
   return React.createElement(I18nProvider, {
     locale: locale
-  }, React.createElement("div", {
-    className: classNames(className, 'eds-timepicker__wrapper')
-  }, React.createElement(BaseFormControl, _extends({
-    style: style,
-    className: classNames('eds-timepicker', {
-      'eds-timepicker--disabled': disabled
+  }, React.createElement(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: 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,
@@ -877,18 +895,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,
@@ -1113,12 +1129,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,