@entur/datepicker 9.4.11-beta.0 → 9.4.12

package/dist/datepicker.cjs.development.js

@@ -529,10 +529,6 @@ var DatePicker = function DatePicker(_ref) {
   var CALENDAR_MODAL_MAX_SCREEN_WIDTH = modalTreshold;
   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) {
@@ -569,14 +565,12 @@ var DatePicker = function DatePicker(_ref) {
         });
       },
       placement: 'bottom-start',
-      middleware: [reactDom.offset(tokens.space.extraSmall), reactDom.flip(), reactDom.shift({
+      middleware: [reactDom.offset(tokens.space.extraSmall2), reactDom.flip(), reactDom.shift({
         padding: tokens.space.extraSmall
       })]
     }),
-    x = _useFloating.x,
-    y = _useFloating.y,
     refs = _useFloating.refs,
-    strategy = _useFloating.strategy,
+    floatingStyles = _useFloating.floatingStyles,
     update = _useFloating.update;
   utils.useOnClickOutside([calendarRef], function () {
     state.setOpen(false);
@@ -600,26 +594,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.
-  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,
-      left: x,
-      zIndex: tokens.zIndexes.popover,
-      transition: showAnimations ? "top " + tokens.timings.medium + " ease-in-out" : 'unset'
-    },
-    ref: function ref(node) {
-      refs.setFloating(node);
-    }
+    style: _extends({}, floatingStyles, {
+      zIndex: tokens.zIndexes.popover
+    }),
+    ref: refs.setFloating
   }, React.createElement(FocusLock, {
     disabled: !state.isOpen || useModal,
     returnFocus: true
@@ -643,10 +623,7 @@ var DatePicker = function DatePicker(_ref) {
   }, React.createElement("div", {
     className: classNames('eds-datepicker', className)
   }, React.createElement("div", _extends({}, groupProps, {
-    ref: function ref(node) {
-      datePickerRef.current = node;
-      refs.setReference(node);
-    },
+    ref: datePickerRef,
     id: undefined,
     className: "eds-datepicker__datefield__wrapper"
   }), React.createElement(DateField, _extends({}, fieldProps, {
@@ -659,7 +636,7 @@ var DatePicker = function DatePicker(_ref) {
     maxDate: maxDate,
     showTime: showTime,
     showTimeZone: showTimeZone,
-    ref: dateFieldRef,
+    ref: refs.setReference,
     variant: variant,
     feedback: feedback,
     validationVariant: validationVariant,