@entur/datepicker 9.4.10 → 9.4.11

package/dist/datepicker.esm.js

@@ -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 } from '@entur/tokens';
+import { space, zIndexes, timings } from '@entur/tokens';
 import { Modal } from '@entur/modal';
 
 function _extends() {
@@ -527,11 +527,12 @@ var DatePicker = function DatePicker(_ref) {
   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) {
-    // 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,
@@ -559,7 +560,11 @@ var DatePicker = function DatePicker(_ref) {
     calendarProps = _useDatePicker.calendarProps;
   // calculations for floating-UI popover position
   var _useFloating = useFloating({
-      whileElementsMounted: autoUpdate,
+      whileElementsMounted: function whileElementsMounted(ref, _float, update) {
+        return autoUpdate(ref, _float, update, {
+          elementResize: false
+        });
+      },
       placement: 'bottom-start',
       middleware: [offset(space.extraSmall), flip(), shift({
         padding: space.extraSmall
@@ -567,9 +572,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;
   useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
   });
@@ -592,17 +597,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.
+  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: zIndexes.popover
+      top: y,
+      left: x,
+      zIndex: zIndexes.popover,
+      transition: showAnimations ? "top " + timings.medium + " ease-in-out" : 'unset'
     },
     ref: function ref(node) {
-      floating(node);
+      refs.setFloating(node);
     }
   }, React.createElement(FocusLock, {
     disabled: !state.isOpen || useModal,
@@ -629,7 +642,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"
@@ -654,7 +667,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(CalendarIcon, null)), useModal ? modalCalendar : popoverCalendar)));