@entur/datepicker 9.4.11 → 9.4.12

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, timings } from '@entur/tokens';
+import { space, zIndexes } from '@entur/tokens';
 import { Modal } from '@entur/modal';
 
 function _extends() {
@@ -526,10 +526,6 @@ var DatePicker = function DatePicker(_ref) {
   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 +562,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 +591,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
@@ -640,10 +620,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, {
@@ -656,7 +633,7 @@ var DatePicker = function DatePicker(_ref) {
     maxDate: maxDate,
     showTime: showTime,
     showTimeZone: showTimeZone,
-    ref: dateFieldRef,
+    ref: refs.setReference,
     variant: variant,
     feedback: feedback,
     validationVariant: validationVariant,