@entur/datepicker 9.4.10-beta.0 → 9.4.11-beta.0

package/dist/datepicker.cjs.development.js

@@ -530,11 +530,12 @@ var DatePicker = function DatePicker(_ref) {
   var datePickerRef = React.useRef(null);
   var calendarRef = React.useRef(null);
   var dateFieldRef = React.useRef(null);
+  var _useState = React.useState(false),
+    showAnimations = _useState[0],
+    setShowAnimations = _useState[1];
   var _useWindowDimensions = utils.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var handleOnChange = function handleOnChange(value) {
-    // console.log(value && value.compare(parseDate('1000-01-01')) < 0);
-    // if (value && value.compare(parseDate('1000-01-01')) < 0) return;
     if (forcedReturnType !== undefined) {
       return onChange(convertValueToType({
         value: value,
@@ -562,7 +563,11 @@ var DatePicker = function DatePicker(_ref) {
     calendarProps = _useDatePicker.calendarProps;
   // calculations for floating-UI popover position
   var _useFloating = reactDom.useFloating({
-      whileElementsMounted: reactDom.autoUpdate,
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return reactDom.autoUpdate(ref, _float, update, {
+          elementResize: false
+        });
+      },
       placement: 'bottom-start',
       middleware: [reactDom.offset(tokens.space.extraSmall), reactDom.flip(), reactDom.shift({
         padding: tokens.space.extraSmall
@@ -570,9 +575,9 @@ var DatePicker = function DatePicker(_ref) {
     }),
     x = _useFloating.x,
     y = _useFloating.y,
-    reference = _useFloating.reference,
-    floating = _useFloating.floating,
-    strategy = _useFloating.strategy;
+    refs = _useFloating.refs,
+    strategy = _useFloating.strategy,
+    update = _useFloating.update;
   utils.useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
   });
@@ -595,17 +600,25 @@ 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.
+  React.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 != null ? y : 0,
-      left: x != null ? x : 0,
-      zIndex: tokens.zIndexes.popover
+      top: y,
+      left: x,
+      zIndex: tokens.zIndexes.popover,
+      transition: showAnimations ? "top " + tokens.timings.medium + " ease-in-out" : 'unset'
     },
     ref: function ref(node) {
-      floating(node);
+      refs.setFloating(node);
     }
   }, React.createElement(FocusLock, {
     disabled: !state.isOpen || useModal,
@@ -632,7 +645,7 @@ var DatePicker = function DatePicker(_ref) {
   }, React.createElement("div", _extends({}, groupProps, {
     ref: function ref(node) {
       datePickerRef.current = node;
-      reference(node);
+      refs.setReference(node);
     },
     id: undefined,
     className: "eds-datepicker__datefield__wrapper"
@@ -657,7 +670,8 @@ var DatePicker = function DatePicker(_ref) {
     })
   })), !disabled && React.createElement(CalendarButton, _extends({}, buttonProps, {
     onPress: function onPress() {
-      return state.setOpen(!state.isOpen);
+      state.setOpen(!state.isOpen);
+      update();
     },
     className: "eds-datepicker__open-calendar-button"
   }), React.createElement(icons.CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));