@opengeoweb/time-slider 14.4.0 → 14.5.1

package/index.esm.js

@@ -1,18 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Grid, Typography, Box, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, useTheme, Stack, InputAdornment, ClickAwayListener } from '@mui/material';
-import { safelyInitI18nForTestsAndStories, CustomIconButton, dateUtils, CustomTooltip, renderCounter, useMakeSureContainerStaysInsideWindow, CanvasComponent, CustomToggleButton } from '@opengeoweb/shared';
-import { ChevronDown, ChevronUp, ChevronRight, ChevronLeft, Edit, Speed, FastForward, Clock, Animation, Pause, Play, StepForward, StepBackward, Now, AutoUpdateActive, AutoUpdateInActive, Resize, dragHandlePath, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
-import * as React from 'react';
-import React__default, { useState, useRef, useEffect, createElement } from 'react';
+import React, { useState, useRef, useEffect, createElement } from 'react';
+import { dateUtils, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, renderCounter, useMakeSureContainerStaysInsideWindow, CanvasComponent, CustomToggleButton } from '@opengeoweb/shared';
+import { debounce, throttle } from 'lodash';
+import { ChevronDown, ChevronUp, ChevronRight, ChevronLeft, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Edit, Animation, Speed, Clock, FastForward, Resize, dragHandlePath, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
-import { debounce, throttle } from 'lodash';
-import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
+import Draggable from 'react-draggable';
 import { Box as Box$1 } from '@mui/system';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
 
 var en = {
@@ -223,51 +222,6 @@ var timesliderTranslations = {
 	nl: nl
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var TIME_SLIDER_NAMESPACE = 'timeslider';
-var initTimesliderI18n = function initTimesliderI18n() {
-  safelyInitI18nForTestsAndStories(i18n, TIME_SLIDER_NAMESPACE, [{
-    ns: TIME_SLIDER_NAMESPACE,
-    translations: timesliderTranslations
-  }]);
-};
-var useTimesliderTranslation = function useTimesliderTranslation() {
-  return useTranslation(TIME_SLIDER_NAMESPACE);
-};
-
-var HideSliderButtonComponent = function HideSliderButtonComponent(_ref) {
-  var isVisible = _ref.isVisible,
-    toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    variant: "tool",
-    onClick: function onClick() {
-      toggleTimeSliderIsVisible(!isVisible);
-    },
-    "data-testid": "hideTimeSliderButton",
-    tooltipTitle: isVisible ? t('timeslider-hide') : t('timeslider-show'),
-    children: isVisible ? jsx(ChevronDown, {}) : jsx(ChevronUp, {})
-  });
-};
-var HideSliderButton = /*#__PURE__*/React__default.memo(HideSliderButtonComponent);
-
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
@@ -406,15 +360,15 @@ var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePo
  *  ...
  */
 var useCanvasTarget = function useCanvasTarget(eventType) {
-  var nodeRef = React__default.useRef(null);
-  var _React$useState = React__default.useState(false),
+  var nodeRef = React.useRef(null);
+  var _React$useState = React.useState(false),
     isTargetNode = _React$useState[0],
-    setTargetNode = _React$useState[1];
+    setIsTargetNode = _React$useState[1];
   // Check if pointer event targets current node element
-  var pointerEventListener = React__default.useCallback(function (event) {
-    setTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
+  var pointerEventListener = React.useCallback(function (event) {
+    setIsTargetNode(nodeRef.current.canvas ? nodeRef.current.canvas.isEqualNode(event.target) : false);
   }, [nodeRef]);
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     document.addEventListener(eventType, pointerEventListener);
     return function () {
       return document.removeEventListener(eventType, pointerEventListener);
@@ -572,15 +526,6 @@ var calculateMouseTimeAndCheckBounds = function calculateMouseTimeAndCheckBounds
   tooltipPosition.current = pixelsBetweenViewportAndTimesliderOnLeft && mousePosition + pixelsBetweenViewportAndTimesliderOnLeft;
   return pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
 };
-var MockDOMRect = function MockDOMRect(x, y, width, height) {
-  this.x = x;
-  this.y = y;
-  this.width = width;
-  this.height = height;
-}; // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-var setTooltipPosition = function setTooltipPosition(tooltipX, tooltipY) {
-  return new MockDOMRect(tooltipX, tooltipY, 0, 0);
-};
 // default values
 var defaultAnimationDelayAtStart = 250;
 var defaultDelay = 1000; // [ms]
@@ -651,7 +596,6 @@ var timeSliderUtils = /*#__PURE__*/Object.freeze({
   secondsPerPxFromCanvasWidth: secondsPerPxFromCanvasWidth,
   secondsPerPxToScale: secondsPerPxToScale,
   secondsPerPxValues: secondsPerPxValues,
-  setTooltipPosition: setTooltipPosition,
   spanToScale: spanToScale,
   speedFactors: speedFactors,
   timeBoxGeom: timeBoxGeom,
@@ -753,7 +697,7 @@ var handleSetNowEvent = function handleSetNowEvent(timeStep, dataStartTime, data
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
  * */
 var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIsActive, isVisible, onToggleTimeSlider) {
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       var target = event.target;
       if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && (event.key === 't' || event.key === 'T') && mapIsActive) {
@@ -767,7 +711,7 @@ var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIs
   }, [mapIsActive, isVisible, onToggleTimeSlider]);
 };
 var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime) {
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Home' && mapIsActive) {
         handleSetNowEvent(timeStep, dataStartTime, dataEndTime, dateUtils.unix(dateUtils.utc()), onSetNewDate, onSetCenterTime);
@@ -792,6 +736,51 @@ var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, time
   }, [dataEndTime, dataStartTime, mapIsActive, onSetCenterTime, onSetNewDate, selectedTime, timeStep]);
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var TIME_SLIDER_NAMESPACE = 'timeslider';
+var initTimesliderI18n = function initTimesliderI18n() {
+  safelyInitI18nForTestsAndStories(i18n, TIME_SLIDER_NAMESPACE, [{
+    ns: TIME_SLIDER_NAMESPACE,
+    translations: timesliderTranslations
+  }]);
+};
+var useTimesliderTranslation = function useTimesliderTranslation() {
+  return useTranslation(TIME_SLIDER_NAMESPACE);
+};
+
+var HideSliderButtonComponent = function HideSliderButtonComponent(_ref) {
+  var isVisible = _ref.isVisible,
+    toggleTimeSliderIsVisible = _ref.toggleTimeSliderIsVisible;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "data-testid": "hideTimeSliderButton",
+    onClick: function onClick() {
+      toggleTimeSliderIsVisible(!isVisible);
+    },
+    tooltipTitle: isVisible ? t('timeslider-hide') : t('timeslider-show'),
+    variant: "tool",
+    children: isVisible ? jsx(ChevronDown, {}) : jsx(ChevronUp, {})
+  });
+};
+var HideSliderButton = /*#__PURE__*/React.memo(HideSliderButtonComponent);
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -900,6 +889,7 @@ var TimeSlider = function TimeSlider(_ref) {
   // these components will always be created as TimeSlider never runs in isolation from the store
   return isVisible ? jsxs(Grid, {
     container: true,
+    "data-testid": "timeSlider",
     sx: {
       display: 'grid',
       gridTemplateColumns: '175px 1fr 40px',
@@ -915,7 +905,6 @@ var TimeSlider = function TimeSlider(_ref) {
         paddingRight: '5%'
       }
     },
-    "data-testid": "timeSlider",
     children: [jsx(Grid, {
       sx: {
         gridArea: 'timebox',
@@ -940,8 +929,8 @@ var TimeSlider = function TimeSlider(_ref) {
         paddingLeft: 1
       },
       children: jsx(HideSliderButton, {
-        toggleTimeSliderIsVisible: onToggleTimeSlider,
-        isVisible: isVisible
+        isVisible: isVisible,
+        toggleTimeSliderIsVisible: onToggleTimeSlider
       })
     })]
   }) : jsx(Grid, {
@@ -953,8 +942,8 @@ var TimeSlider = function TimeSlider(_ref) {
       justifyContent: 'flex-end'
     },
     children: jsx(HideSliderButton, {
-      toggleTimeSliderIsVisible: onToggleTimeSlider,
-      isVisible: isVisible
+      isVisible: isVisible,
+      toggleTimeSliderIsVisible: onToggleTimeSlider
     })
   });
 };
@@ -1058,7 +1047,6 @@ var ClockContainer = function ClockContainer(_ref) {
   var currentDateString = dateToManualFormatString(dateUtils.fromUnix(time));
   return jsxs(Grid, {
     container: true,
-    wrap: "nowrap",
     sx: {
       justifyContent: 'space-evenly',
       alignItems: 'center',
@@ -1068,6 +1056,7 @@ var ClockContainer = function ClockContainer(_ref) {
       backgroundColor: 'geowebColors.timeSlider.playerTimeMarkers.fill',
       borderRadius: '5px'
     },
+    wrap: "nowrap",
     children: [jsx(Grid, {
       sx: {
         width: '4px'
@@ -1080,13 +1069,13 @@ var ClockContainer = function ClockContainer(_ref) {
           zIndex: 2
         },
         children: jsx(CustomIconButton, {
-          variant: "tool",
+          "aria-label": "Animation options",
+          isSelected: isPopperOpen,
           onClick: onButtonClick,
           sx: {
             color: '#fff!important'
           },
-          "aria-label": "Animation options",
-          isSelected: isPopperOpen,
+          variant: "tool",
           children: jsx(Icon, {
             isPopperOpen: isPopperOpen,
             popperPlacement: popperPlacement
@@ -1095,12 +1084,12 @@ var ClockContainer = function ClockContainer(_ref) {
       })
     }), jsx(Grid, {
       children: jsx(Typography, {
-        variant: "subtitle2",
         sx: {
           whiteSpace: 'nowrap',
           fontSize: fontSize,
           color: '#fff'
         },
+        variant: "subtitle2",
         children: currentDateString
       })
     })]
@@ -1146,6 +1135,128 @@ var Icon = function Icon(_ref2) {
   });
 };
 
+var AutoUpdateButton = function AutoUpdateButton(_ref) {
+  var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
+    toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
+    _ref$isAutoUpdating = _ref.isAutoUpdating,
+    isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "data-testid": "autoUpdateButton",
+    disabled: disabled,
+    isSelected: isAutoUpdating,
+    onClick: function onClick() {
+      return toggleAutoUpdate();
+    },
+    tooltipTitle: isAutoUpdating ? t('timeslider-auto-update-on') : t('timeslider-auto-update-off'),
+    variant: "tool",
+    children: isAutoUpdating ? jsx(AutoUpdateActive, {
+      "data-testid": "auto-update-svg-on"
+    }) : jsx(AutoUpdateInActive, {
+      "data-testid": "auto-update-svg-off"
+    })
+  });
+};
+
+var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
+  var isForwardStep = _ref.isForwardStep,
+    isDisabled = _ref.isDisabled,
+    _ref$onClickBFButton = _ref.onClickBFButton,
+    onClickBFButton = _ref$onClickBFButton === void 0 ? function () {} : _ref$onClickBFButton;
+  // Added renderCounter for testing and performance purposes
+  renderCounter.count(BackwardForwardStepButton.name);
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "aria-label": isForwardStep ? 'forward' : 'backward',
+    "data-testid": isForwardStep ? 'stepForwardButton' : 'stepBackwardButton',
+    disabled: isDisabled,
+    onClick: onClickBFButton,
+    tooltipTitle: isForwardStep ? t('timeslider-forward') : t('timeslider-backward'),
+    variant: "tool",
+    children: isForwardStep ? jsx(StepForward, {
+      "data-testid": "step-forward-svg-path"
+    }) : jsx(StepBackward, {
+      "data-testid": "step-backward-svg-path"
+    })
+  });
+};
+
+var NowButton = function NowButton(_ref) {
+  var _ref$onSetNow = _ref.onSetNow,
+    onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "aria-label": "now",
+    "data-testid": "nowButtonTooltip",
+    disabled: disabled,
+    onClick: function onClick() {
+      return onSetNow();
+    },
+    tooltipTitle: t('timeslider-now'),
+    variant: "tool",
+    children: jsx(Now, {
+      "data-testid": "now-svg"
+    })
+  });
+};
+
+var PlayButton = function PlayButton(_ref) {
+  var isAnimating = _ref.isAnimating,
+    isDisabled = _ref.isDisabled,
+    _ref$onTogglePlayButt = _ref.onTogglePlayButton,
+    onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {} : _ref$onTogglePlayButt;
+  var onTogglePlay = function onTogglePlay() {
+    onTogglePlayButton();
+  };
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  return jsx(CustomIconButton, {
+    "data-testid": "playButton",
+    disabled: isDisabled,
+    isSelected: isAnimating,
+    onClick: onTogglePlay,
+    tooltipTitle: isAnimating ? t('timeslider-pause') : t('timeslider-play'),
+    variant: "tool",
+    children: isAnimating ? jsx(Pause, {
+      "data-testid": "pause-svg-path"
+    }) : jsx(Play, {
+      "data-testid": "play-svg-path"
+    })
+  });
+};
+
+var ControlButtons = function ControlButtons(_ref) {
+  var backwardBtn = _ref.backwardBtn,
+    forwardBtn = _ref.forwardBtn,
+    playBtn = _ref.playBtn,
+    nowBtn = _ref.nowBtn,
+    autoUpdateBtn = _ref.autoUpdateBtn;
+  return jsxs(Fragment, {
+    children: [jsx(Grid, {
+      children: backwardBtn || jsx(BackwardForwardStepButton, {
+        isForwardStep: false
+      })
+    }), jsx(Grid, {
+      children: forwardBtn || jsx(BackwardForwardStepButton, {
+        isForwardStep: true
+      })
+    }), jsx(Grid, {
+      children: playBtn || jsx(PlayButton, {})
+    }), jsx(Grid, {
+      children: nowBtn || jsx(NowButton, {})
+    }), jsx(Grid, {
+      children: autoUpdateBtn || jsx(AutoUpdateButton, {})
+    })]
+  });
+};
+
 var THROTTLE_WAIT_TIME = 300; // [ms]
 var THROTTLE_OPTIONS = {
   trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
@@ -1181,10 +1292,10 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     t = _useTimesliderTransla.t;
   var _useState = useState(false),
     displayLengthInputField = _useState[0],
-    setdisplayLengthInputField = _useState[1];
+    setDisplayLengthInputField = _useState[1];
   React.useEffect(function () {
     if (!open && displayLengthInputField) {
-      setdisplayLengthInputField(false);
+      setDisplayLengthInputField(false);
     }
   }, [displayLengthInputField, open]);
   var buttonText = function buttonText(value, displayCurrentLength, currentMark) {
@@ -1214,18 +1325,18 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       event.stopPropagation();
     },
     children: [jsxs(CustomIconButton, {
-      variant: "tool",
-      tooltipTitle: title,
+      isSelected: true,
       onClick: function onClick() {
         setOpen(true);
       },
-      ref: setAnchorRef,
-      isSelected: true,
       onWheel: onWheel,
+      ref: setAnchorRef,
       sx: {
         padding: '11px!important',
         width: '100%!important'
       },
+      tooltipTitle: title,
+      variant: "tool",
       children: [icon, jsx(Typography, {
         sx: {
           fontSize: 12,
@@ -1234,12 +1345,16 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         },
         children: buttonText(value, displayCurrentLength, currentMark)
       })]
-    }), anchorRef && jsxs(Menu, {
+    }), !!anchorRef && jsxs(Menu, {
       anchorEl: anchorRef,
-      open: open,
+      anchorOrigin: {
+        vertical: -15,
+        horizontal: 'center'
+      },
       onClose: function onClose() {
         return setOpen(false);
       },
+      open: open,
       slotProps: {
         backdrop: {
           sx: {
@@ -1247,10 +1362,6 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
           }
         }
       },
-      anchorOrigin: {
-        vertical: -15,
-        horizontal: 'center'
-      },
       transformOrigin: {
         vertical: 'bottom',
         horizontal: 'center'
@@ -1270,50 +1381,50 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       }), marks.map(function (mark) {
         var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value && !isAutoSelected;
         return jsx(MenuItem, {
+          disabled: allOptionsDisabled,
           onClick: function onClick() {
             if (!isSelected) {
               onChangeSliderValue(mark.value);
             }
             setOpen(false);
           },
-          selected: isSelected && !displayLengthInputField,
-          disabled: allOptionsDisabled,
+          selected: !!isSelected && !displayLengthInputField,
           children: mark.label || mark.text
         }, mark.value);
-      }), handleAutoClick && jsx(MenuItem, {
+      }), !!handleAutoClick && jsx(MenuItem, {
+        disabled: allOptionsDisabled || isAutoDisabled,
         onClick: function onClick() {
           handleAutoClick();
           setOpen(false);
         },
         selected: isAutoSelected,
-        disabled: allOptionsDisabled || isAutoDisabled,
         children: t('timeslider-auto')
-      }), displayCurrentLength && jsxs(MenuItem, {
+      }), !!displayCurrentLength && jsxs(MenuItem, {
+        disabled: disbleUserSetDuration,
         onClick: function onClick() {
-          return setdisplayLengthInputField(true);
+          return setDisplayLengthInputField(true);
         },
-        disabled: disbleUserSetDuration,
         sx: {
           maxWidth: '175px'
         },
-        children: [displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
+        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
           sx: {
             flexDirection: 'column',
             display: 'flex',
             flexGrow: 1
           },
           children: [jsx(CardHeader, {
-            title: t(customFieldHeader),
+            slotProps: {
+              title: {
+                fontSize: 12
+              }
+            },
             sx: {
               height: 2,
               padding: 0,
               color: 'geowebColors.greys.accessible'
             },
-            slotProps: {
-              title: {
-                fontSize: 12
-              }
-            }
+            title: t(customFieldHeader)
           }), jsxs(Box, {
             sx: {
               flexDirection: 'row',
@@ -1346,137 +1457,51 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
   });
 };
 
-var SpeedButton = function SpeedButton(_ref) {
-  var animationDelay = _ref.animationDelay,
-    setMapAnimationDelay = _ref.setMapAnimationDelay;
-  var sorted = [].concat(speedFactors).sort(function (sa, sb) {
-    return sb - sa;
-  });
-  var marks = sorted.map(function (speedFactor) {
-    return {
-      value: getSpeedDelay(speedFactor),
-      text: "x" + speedFactor,
-      label: "x" + speedFactor
-    };
-  });
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    onChangeSliderValue: function onChangeSliderValue(markValue) {
-      setMapAnimationDelay(markValue);
-    },
-    icon: jsx(Speed, {}),
-    marks: marks,
-    title: t('timeslider-speed'),
-    value: animationDelay,
-    open: open,
-    setOpen: setOpen
-  });
-};
-
 var marks$2 = [{
-  value: 1,
-  text: 'timeslider-min',
-  count: 1
-}, {
-  value: 2,
-  text: 'timeslider-min',
-  count: 2
-}, {
-  value: 5,
-  text: 'timeslider-min',
-  count: 5
-}, {
-  value: 10,
-  text: 'timeslider-min',
-  count: 10
-}, {
-  value: 15,
+  value: AnimationLength.Minutes15,
   text: 'timeslider-min',
   count: 15
 }, {
-  value: 30,
+  value: AnimationLength.Minutes30,
   text: 'timeslider-min',
   count: 30
 }, {
-  value: 60,
+  value: AnimationLength.Hours1,
   text: 'timeslider-hour',
   count: 1
 }, {
-  value: 120,
+  value: AnimationLength.Hours2,
   text: 'timeslider-hour',
   count: 2
 }, {
-  value: 180,
+  value: AnimationLength.Hours3,
   text: 'timeslider-hour',
   count: 3
 }, {
-  value: 360,
+  value: AnimationLength.Hours6,
   text: 'timeslider-hour',
   count: 6
 }, {
-  value: 720,
+  value: AnimationLength.Hours12,
   text: 'timeslider-hour',
   count: 12
 }, {
-  value: 1440,
+  value: AnimationLength.Hours24,
   text: 'timeslider-hour',
   count: 24
-}, {
-  value: 2880,
-  text: 'timeslider-hour',
-  count: 48
-}, {
-  value: 4320,
-  text: 'timeslider-hour',
-  count: 72
-}, {
-  value: 10080,
-  text: 'timeslider-week',
-  count: 1
-}, {
-  value: 20160,
-  text: 'timeslider-weeks',
-  count: 2
-}, {
-  value: 43200,
-  text: 'timeslider-month',
-  count: 1
-}, {
-  value: 87600,
-  text: 'timeslider-months',
-  count: 2
-}, {
-  value: 262800,
-  text: 'timeslider-months',
-  count: 6
-}, {
-  value: 525600,
-  text: 'timeslider-year',
-  count: 1
-}, {
-  value: 5256000,
-  text: 'timeslider-years',
-  count: 10
 }].sort(function (ta, tb) {
   return tb.value - ta.value;
 });
-var TimeStepButton = function TimeStepButton(_ref) {
-  var _ref$timeStep = _ref.timeStep,
-    timeStep = _ref$timeStep === void 0 ? marks$2[0].value : _ref$timeStep,
-    _ref$disabled = _ref.disabled,
+var AnimationLengthButton = function AnimationLengthButton(_ref) {
+  var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$isTimestepAuto = _ref.isTimestepAuto,
-    isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
-    onChangeTimeStep = _ref.onChangeTimeStep,
-    _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
-    onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
-    _ref$isOpenByDefault = _ref.isOpenByDefault,
-    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
-    timeStepFromLayer = _ref.timeStepFromLayer;
+    _ref$animationLength = _ref.animationLength,
+    animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
+    _ref$isAuto = _ref.isAuto,
+    isAuto = _ref$isAuto === void 0 ? false : _ref$isAuto,
+    layerHasTimeStep = _ref.layerHasTimeStep,
+    onChangeAnimationLength = _ref.onChangeAnimationLength,
+    toggleAnimationLengthAuto = _ref.toggleAnimationLengthAuto;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
   var translatedMarks = marks$2.map(function (mark) {
@@ -1484,39 +1509,59 @@ var TimeStepButton = function TimeStepButton(_ref) {
       label: mark.count + " " + t(mark.text)
     });
   });
-  var onMenuItemClick = function onMenuItemClick(markValue) {
-    if (isTimestepAuto) {
-      onToggleTimestepAuto();
-    }
-    onChangeTimeStep(markValue);
-  };
-  var handleToggleTimeStep = function handleToggleTimeStep() {
-    if (isTimestepAuto) {
-      return;
-    }
-    onToggleTimestepAuto();
-    timeStepFromLayer && onChangeTimeStep(timeStepFromLayer);
+  var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
+    var newLength = newSliderValue ? Math.round(newSliderValue) : 0;
+    onChangeAnimationLength == null || onChangeAnimationLength(newLength);
   };
-  var layerHasTimeStep = Boolean(timeStepFromLayer);
-  renderCounter.count(TimeStepButton.name);
-  var _useState = useState(isOpenByDefault),
+  var _useState = useState(false),
     open = _useState[0],
     setOpen = _useState[1];
   return jsx(TimeSliderMenu, {
-    title: t('timeslider-time-step'),
-    marks: translatedMarks,
-    value: timeStep || translatedMarks[0].value,
-    onChangeSliderValue: onMenuItemClick,
     allOptionsDisabled: disabled,
-    isAutoSelected: isTimestepAuto,
-    isAutoDisabled: !layerHasTimeStep,
-    handleAutoClick: handleToggleTimeStep,
-    icon: jsx(FastForward, {
-      "data-testid": "timeStepButton"
-    }),
     displayCurrentLength: true,
+    handleAutoClick: toggleAnimationLengthAuto,
+    icon: jsx(Animation, {
+      "data-testid": "animationLengthButton"
+    }),
+    isAutoDisabled: !layerHasTimeStep,
+    isAutoSelected: isAuto,
+    marks: translatedMarks,
+    onChangeSliderValue: onChangeSliderValue,
+    open: open,
+    setOpen: setOpen,
+    title: t('timeslider-animation'),
+    value: animationLength
+  });
+};
+
+var SpeedButton = function SpeedButton(_ref) {
+  var animationDelay = _ref.animationDelay,
+    setMapAnimationDelay = _ref.setMapAnimationDelay;
+  var sorted = [].concat(speedFactors).sort(function (sa, sb) {
+    return sb - sa;
+  });
+  var marks = sorted.map(function (speedFactor) {
+    return {
+      value: getSpeedDelay(speedFactor),
+      text: "x" + speedFactor,
+      label: "x" + speedFactor
+    };
+  });
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    icon: jsx(Speed, {}),
+    marks: marks,
+    onChangeSliderValue: function onChangeSliderValue(markValue) {
+      setMapAnimationDelay(markValue);
+    },
     open: open,
-    setOpen: setOpen
+    setOpen: setOpen,
+    title: t('timeslider-speed'),
+    value: animationDelay
   });
 };
 
@@ -1526,71 +1571,71 @@ var TimeSpanButtonCustomSelect = function TimeSpanButtonCustomSelect(_ref) {
     onChangeSliderValue = _ref.onChangeSliderValue;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  var _React$useState = React__default.useState(timeSliderSpan / getLargestTimeUnit(timeSliderSpan)),
+  var _React$useState = React.useState(timeSliderSpan / getLargestTimeUnit(timeSliderSpan)),
     selectedTimeValue = _React$useState[0],
     setSelectedTimeValue = _React$useState[1];
-  var _React$useState2 = React__default.useState(getLargestTimeUnit(timeSliderSpan).toString()),
+  var _React$useState2 = React.useState(getLargestTimeUnit(timeSliderSpan).toString()),
     selectedTimeResolution = _React$useState2[0],
     setSelectedTimeResolution = _React$useState2[1];
-  var _React$useState3 = React__default.useState(true),
+  var _React$useState3 = React.useState(true),
     isANumber = _React$useState3[0],
-    setisANumber = _React$useState3[1];
+    setIsANumber = _React$useState3[1];
   return jsx(Box, {
     children: jsxs(FormControl, {
-      variant: "standard",
+      onKeyDown: function onKeyDown(event) {
+        event.stopPropagation();
+      },
       size: "small",
       sx: {
         flexDirection: 'row',
         display: 'flex'
       },
-      onKeyDown: function onKeyDown(event) {
-        event.stopPropagation();
-      },
+      variant: "standard",
       children: [jsx(TextField, {
-        label: t('timeslider-span'),
-        size: "small",
-        variant: "standard",
-        value: Math.round(selectedTimeValue * 100) / 100,
         autoFocus: true,
+        color: isANumber ? 'primary' : 'warning',
+        label: t('timeslider-span'),
+        onBlur: function onBlur() {
+          onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
+        },
         onChange: function onChange(e) {
           if (!isNaN(+e.target.value)) {
-            setisANumber(true);
+            setIsANumber(true);
             setSelectedTimeValue(Number(e.target.value));
           } else {
-            setisANumber(false);
+            setIsANumber(false);
           }
         },
-        color: isANumber ? 'primary' : 'warning',
-        onBlur: function onBlur() {
-          onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
-        },
         onKeyDown: function onKeyDown(e) {
           if (e.key === 'Enter' || e.key === 'Escape') {
             onChangeSliderValue(selectedTimeValue * Number(selectedTimeResolution));
             setOpen(false);
           }
         },
+        size: "small",
         slotProps: {
           htmlInput: {
             maxLength: 4,
             'aria-label': 'custom-input'
           }
-        }
+        },
+        value: Math.round(selectedTimeValue * 100) / 100,
+        variant: "standard"
       }), jsx(Box, {
         sx: {
           alignContent: 'end'
         },
         children: jsxs(Select, {
-          value: selectedTimeResolution,
+          "aria-label": "time-resolution-selector",
           defaultValue: "h",
           onChange: function onChange(e) {
             setSelectedTimeResolution(e.target.value);
             onChangeSliderValue(selectedTimeValue * Number(e.target.value));
             setOpen(false);
           },
-          "aria-label": "time-resolution-selector",
           size: "small",
           tabIndex: -1,
+          value: selectedTimeResolution,
           children: [jsx(MenuItem, {
             value: TimeInMinutes.YEAR,
             children: t('years')
@@ -1687,269 +1732,213 @@ var TimeSpanButton = function TimeSpanButton(_ref) {
     open = _useState[0],
     setOpen = _useState[1];
   return jsx(TimeSliderMenu, {
+    allOptionsDisabled: disabled,
+    customFieldHeader: t('timeslider-span'),
+    customLengthSelector: jsx(TimeSpanButtonCustomSelect, {
+      onChangeSliderValue: onChangeSliderValue,
+      setOpen: setOpen,
+      timeSliderSpan: timeSliderSpan
+    }),
+    disbleUserSetDuration: false,
+    displayCurrentLength: true,
+    handleAutoClick: onToggleTimeSpan,
     icon: jsx(Clock, {}),
+    isAutoDisabled: !layerHasTimeStep,
+    isAutoSelected: isTimeSpanAuto,
     marks: translatedMarks,
-    displayCurrentLength: true,
-    title: t('timeslider-time-span'),
-    customFieldHeader: t('timeslider-span'),
-    value: timeSliderSpan,
     onChangeSliderValue: onChangeSliderValue,
-    allOptionsDisabled: disabled,
-    isAutoSelected: isTimeSpanAuto,
-    isAutoDisabled: !layerHasTimeStep,
-    handleAutoClick: onToggleTimeSpan,
-    disbleUserSetDuration: false,
     open: open,
     setOpen: setOpen,
-    customLengthSelector: jsx(TimeSpanButtonCustomSelect, {
-      timeSliderSpan: timeSliderSpan,
-      setOpen: setOpen,
-      onChangeSliderValue: onChangeSliderValue
-    })
+    title: t('timeslider-time-span'),
+    value: timeSliderSpan
   });
 };
 
 var marks = [{
-  value: AnimationLength.Minutes15,
+  value: 1,
+  text: 'timeslider-min',
+  count: 1
+}, {
+  value: 2,
+  text: 'timeslider-min',
+  count: 2
+}, {
+  value: 5,
+  text: 'timeslider-min',
+  count: 5
+}, {
+  value: 10,
+  text: 'timeslider-min',
+  count: 10
+}, {
+  value: 15,
   text: 'timeslider-min',
   count: 15
 }, {
-  value: AnimationLength.Minutes30,
+  value: 30,
   text: 'timeslider-min',
   count: 30
 }, {
-  value: AnimationLength.Hours1,
+  value: 60,
   text: 'timeslider-hour',
   count: 1
 }, {
-  value: AnimationLength.Hours2,
+  value: 120,
   text: 'timeslider-hour',
   count: 2
 }, {
-  value: AnimationLength.Hours3,
+  value: 180,
   text: 'timeslider-hour',
   count: 3
 }, {
-  value: AnimationLength.Hours6,
+  value: 360,
   text: 'timeslider-hour',
   count: 6
 }, {
-  value: AnimationLength.Hours12,
+  value: 720,
   text: 'timeslider-hour',
   count: 12
 }, {
-  value: AnimationLength.Hours24,
+  value: 1440,
   text: 'timeslider-hour',
   count: 24
+}, {
+  value: 2880,
+  text: 'timeslider-hour',
+  count: 48
+}, {
+  value: 4320,
+  text: 'timeslider-hour',
+  count: 72
+}, {
+  value: 10080,
+  text: 'timeslider-week',
+  count: 1
+}, {
+  value: 20160,
+  text: 'timeslider-weeks',
+  count: 2
+}, {
+  value: 43200,
+  text: 'timeslider-month',
+  count: 1
+}, {
+  value: 87600,
+  text: 'timeslider-months',
+  count: 2
+}, {
+  value: 262800,
+  text: 'timeslider-months',
+  count: 6
+}, {
+  value: 525600,
+  text: 'timeslider-year',
+  count: 1
+}, {
+  value: 5256000,
+  text: 'timeslider-years',
+  count: 10
 }].sort(function (ta, tb) {
   return tb.value - ta.value;
 });
-var AnimationLengthButton = function AnimationLengthButton(_ref) {
-  var _ref$disabled = _ref.disabled,
+var TimeStepButton = function TimeStepButton(_ref) {
+  var _ref$timeStep = _ref.timeStep,
+    timeStep = _ref$timeStep === void 0 ? marks[0].value : _ref$timeStep,
+    _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$animationLength = _ref.animationLength,
-    animationLength = _ref$animationLength === void 0 ? AnimationLength.Hours1 : _ref$animationLength,
-    _ref$isAuto = _ref.isAuto,
-    isAuto = _ref$isAuto === void 0 ? false : _ref$isAuto,
-    layerHasTimeStep = _ref.layerHasTimeStep,
-    onChangeAnimationLength = _ref.onChangeAnimationLength,
-    toggleAnimationLengthAuto = _ref.toggleAnimationLengthAuto;
+    _ref$isTimestepAuto = _ref.isTimestepAuto,
+    isTimestepAuto = _ref$isTimestepAuto === void 0 ? false : _ref$isTimestepAuto,
+    onChangeTimeStep = _ref.onChangeTimeStep,
+    _ref$onToggleTimestep = _ref.onToggleTimestepAuto,
+    onToggleTimestepAuto = _ref$onToggleTimestep === void 0 ? function () {} : _ref$onToggleTimestep,
+    _ref$isOpenByDefault = _ref.isOpenByDefault,
+    isOpenByDefault = _ref$isOpenByDefault === void 0 ? false : _ref$isOpenByDefault,
+    timeStepFromLayer = _ref.timeStepFromLayer;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
   var translatedMarks = marks.map(function (mark) {
     return Object.assign({}, mark, {
       label: mark.count + " " + t(mark.text)
-    });
-  });
-  var onChangeSliderValue = function onChangeSliderValue(newSliderValue) {
-    var newLength = newSliderValue ? Math.round(newSliderValue) : 0;
-    onChangeAnimationLength && onChangeAnimationLength(newLength);
-  };
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    onChangeSliderValue: onChangeSliderValue,
-    icon: jsx(Animation, {
-      "data-testid": "animationLengthButton"
-    }),
-    marks: translatedMarks,
-    title: t('timeslider-animation'),
-    isAutoSelected: isAuto,
-    isAutoDisabled: !layerHasTimeStep,
-    handleAutoClick: toggleAnimationLengthAuto,
-    allOptionsDisabled: disabled,
-    value: animationLength,
-    displayCurrentLength: true,
-    open: open,
-    setOpen: setOpen
-  });
-};
-
-var OptionsMenu = function OptionsMenu(_ref) {
-  var speedBtn = _ref.speedBtn,
-    timeSpanBtn = _ref.timeSpanBtn,
-    timeStepBtn = _ref.timeStepBtn,
-    animationLengthBtn = _ref.animationLengthBtn;
-  return jsxs(Fragment, {
-    children: [jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: timeSpanBtn || jsx(TimeSpanButton, {
-        onChangeSliderValue: function onChangeSliderValue() {},
-        onToggleTimeSpan: function onToggleTimeSpan() {},
-        isTimeSpanAuto: false,
-        layerHasTimeStep: false,
-        timeSliderSpan: 0,
-        disabled: false
-      })
-    }), jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: animationLengthBtn || jsx(AnimationLengthButton, {
-        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {},
-        onChangeAnimationLength: function onChangeAnimationLength() {}
-      })
-    }), jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: timeStepBtn || jsx(TimeStepButton, {
-        onChangeTimeStep: function onChangeTimeStep() {},
-        isTimestepAuto: false
-      })
-    }), jsx(Grid, {
-      size: {
-        xs: 'auto'
-      },
-      children: speedBtn || jsx(SpeedButton, {
-        animationDelay: defaultAnimationDelayAtStart,
-        setMapAnimationDelay: function setMapAnimationDelay() {}
-      })
-    })]
-  });
-};
-
-var PlayButton = function PlayButton(_ref) {
-  var isAnimating = _ref.isAnimating,
-    isDisabled = _ref.isDisabled,
-    _ref$onTogglePlayButt = _ref.onTogglePlayButton,
-    onTogglePlayButton = _ref$onTogglePlayButt === void 0 ? function () {} : _ref$onTogglePlayButt;
-  var onTogglePlay = function onTogglePlay() {
-    onTogglePlayButton();
-  };
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    variant: "tool",
-    tooltipTitle: isAnimating ? t('timeslider-pause') : t('timeslider-play'),
-    onClick: onTogglePlay,
-    disabled: isDisabled,
-    "data-testid": "playButton",
-    isSelected: isAnimating,
-    children: isAnimating ? jsx(Pause, {
-      "data-testid": "pause-svg-path"
-    }) : jsx(Play, {
-      "data-testid": "play-svg-path"
-    })
-  });
-};
-
-var BackwardForwardStepButton = function BackwardForwardStepButton(_ref) {
-  var isForwardStep = _ref.isForwardStep,
-    isDisabled = _ref.isDisabled,
-    _ref$onClickBFButton = _ref.onClickBFButton,
-    onClickBFButton = _ref$onClickBFButton === void 0 ? function () {} : _ref$onClickBFButton;
-  // Added renderCounter for testing and performance purposes
-  renderCounter.count(BackwardForwardStepButton.name);
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    variant: "tool",
-    "data-testid": isForwardStep ? 'stepForwardButton' : 'stepBackwardButton',
-    disabled: isDisabled,
-    "aria-label": isForwardStep ? 'forward' : 'backward',
-    onClick: onClickBFButton,
-    tooltipTitle: isForwardStep ? t('timeslider-forward') : t('timeslider-backward'),
-    children: isForwardStep ? jsx(StepForward, {
-      "data-testid": "step-forward-svg-path"
-    }) : jsx(StepBackward, {
-      "data-testid": "step-backward-svg-path"
-    })
-  });
-};
-
-var NowButton = function NowButton(_ref) {
-  var _ref$onSetNow = _ref.onSetNow,
-    onSetNow = _ref$onSetNow === void 0 ? function () {} : _ref$onSetNow,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    variant: "tool",
-    "aria-label": "now",
-    tooltipTitle: t('timeslider-now'),
-    "data-testid": "nowButtonTooltip",
-    disabled: disabled,
-    onClick: function onClick() {
-      return onSetNow();
-    },
-    children: jsx(Now, {
-      "data-testid": "now-svg"
-    })
-  });
-};
-
-var AutoUpdateButton = function AutoUpdateButton(_ref) {
-  var _ref$toggleAutoUpdate = _ref.toggleAutoUpdate,
-    toggleAutoUpdate = _ref$toggleAutoUpdate === void 0 ? function () {} : _ref$toggleAutoUpdate,
-    _ref$isAutoUpdating = _ref.isAutoUpdating,
-    isAutoUpdating = _ref$isAutoUpdating === void 0 ? false : _ref$isAutoUpdating,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  return jsx(CustomIconButton, {
-    variant: "tool",
-    isSelected: isAutoUpdating,
-    disabled: disabled,
-    onClick: function onClick() {
-      return toggleAutoUpdate();
-    },
-    "data-testid": "autoUpdateButton",
-    tooltipTitle: isAutoUpdating ? t('timeslider-auto-update-on') : t('timeslider-auto-update-off'),
-    children: isAutoUpdating ? jsx(AutoUpdateActive, {
-      "data-testid": "auto-update-svg-on"
-    }) : jsx(AutoUpdateInActive, {
-      "data-testid": "auto-update-svg-off"
-    })
+    });
+  });
+  var onMenuItemClick = function onMenuItemClick(markValue) {
+    if (isTimestepAuto) {
+      onToggleTimestepAuto();
+    }
+    onChangeTimeStep(markValue);
+  };
+  var handleToggleTimeStep = function handleToggleTimeStep() {
+    if (isTimestepAuto) {
+      return;
+    }
+    onToggleTimestepAuto();
+    timeStepFromLayer && onChangeTimeStep(timeStepFromLayer);
+  };
+  var layerHasTimeStep = Boolean(timeStepFromLayer);
+  renderCounter.count(TimeStepButton.name);
+  var _useState = useState(isOpenByDefault),
+    open = _useState[0],
+    setOpen = _useState[1];
+  return jsx(TimeSliderMenu, {
+    allOptionsDisabled: disabled,
+    displayCurrentLength: true,
+    handleAutoClick: handleToggleTimeStep,
+    icon: jsx(FastForward, {
+      "data-testid": "timeStepButton"
+    }),
+    isAutoDisabled: !layerHasTimeStep,
+    isAutoSelected: isTimestepAuto,
+    marks: translatedMarks,
+    onChangeSliderValue: onMenuItemClick,
+    open: open,
+    setOpen: setOpen,
+    title: t('timeslider-time-step'),
+    value: timeStep || translatedMarks[0].value
   });
 };
 
-var ControlButtons = function ControlButtons(_ref) {
-  var backwardBtn = _ref.backwardBtn,
-    forwardBtn = _ref.forwardBtn,
-    playBtn = _ref.playBtn,
-    nowBtn = _ref.nowBtn,
-    autoUpdateBtn = _ref.autoUpdateBtn;
+var OptionsMenu = function OptionsMenu(_ref) {
+  var speedBtn = _ref.speedBtn,
+    timeSpanBtn = _ref.timeSpanBtn,
+    timeStepBtn = _ref.timeStepBtn,
+    animationLengthBtn = _ref.animationLengthBtn;
   return jsxs(Fragment, {
     children: [jsx(Grid, {
-      children: backwardBtn || jsx(BackwardForwardStepButton, {
-        isForwardStep: false
+      size: {
+        xs: 'auto'
+      },
+      children: timeSpanBtn || jsx(TimeSpanButton, {
+        disabled: false,
+        isTimeSpanAuto: false,
+        layerHasTimeStep: false,
+        onChangeSliderValue: function onChangeSliderValue() {},
+        onToggleTimeSpan: function onToggleTimeSpan() {},
+        timeSliderSpan: 0
       })
     }), jsx(Grid, {
-      children: forwardBtn || jsx(BackwardForwardStepButton, {
-        isForwardStep: true
+      size: {
+        xs: 'auto'
+      },
+      children: animationLengthBtn || jsx(AnimationLengthButton, {
+        onChangeAnimationLength: function onChangeAnimationLength() {},
+        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
       })
     }), jsx(Grid, {
-      children: playBtn || jsx(PlayButton, {})
-    }), jsx(Grid, {
-      children: nowBtn || jsx(NowButton, {})
+      size: {
+        xs: 'auto'
+      },
+      children: timeStepBtn || jsx(TimeStepButton, {
+        isTimestepAuto: false,
+        onChangeTimeStep: function onChangeTimeStep() {}
+      })
     }), jsx(Grid, {
-      children: autoUpdateBtn || jsx(AutoUpdateButton, {})
+      size: {
+        xs: 'auto'
+      },
+      children: speedBtn || jsx(SpeedButton, {
+        animationDelay: defaultAnimationDelayAtStart,
+        setMapAnimationDelay: function setMapAnimationDelay() {}
+      })
     })]
   });
 };
@@ -1966,16 +1955,19 @@ var PopperMenu = function PopperMenu(_ref) {
   var direction = ['bottom', 'top'].includes(popperPlacement) ? 'column' : 'row';
   var margin = getMargin(buttonElement, popperPlacement);
   return jsx(Popper, {
+    anchorEl: direction === 'row' ? buttonElement == null ? void 0 : buttonElement.parentElement : buttonElement,
+    open: isPopperOpen,
+    placement: popperPlacement,
     sx: {
       zIndex: 3
     },
-    placement: popperPlacement,
-    open: isPopperOpen,
-    anchorEl: direction === 'row' ? buttonElement == null ? void 0 : buttonElement.parentElement : buttonElement,
     children: jsx(Paper, {
-      sx: Object.assign({}, margin),
       elevation: 3,
+      sx: Object.assign({}, margin),
       children: jsxs(Grid, {
+        container: true,
+        direction: direction,
+        spacing: 0.5,
         sx: Object.assign({
           padding: '4px 8px 8px'
         }, direction === 'column' && {
@@ -1985,9 +1977,6 @@ var PopperMenu = function PopperMenu(_ref) {
         }, direction === 'row' && {
           marginTop: -0.5
         }),
-        container: true,
-        spacing: 0.5,
-        direction: direction,
         children: [options != null ? options : jsx(OptionsMenu, {}), controls != null ? controls : jsx(ControlButtons, {})]
       })
     })
@@ -2072,41 +2061,53 @@ var TimeSliderClock = function TimeSliderClock(_ref2) {
   }, [buttonElement, isPopperOpenByDefault]);
   return jsxs(Fragment, {
     children: [jsx(PopperMenu, {
-      popperPlacement: popperPlacement,
-      isPopperOpen: isPopperOpen,
       buttonElement: buttonElement,
+      controls: controls,
+      isPopperOpen: isPopperOpen,
       options: options,
-      controls: controls
+      popperPlacement: popperPlacement
     }), jsx(Draggable, {
+      bounds: "parent",
       cancel: ".MuiButtonBase-root",
       nodeRef: clockElement,
-      bounds: "parent",
-      position: position,
       onStop: function onStop(_event, position) {
         setPosition(position);
         setPopperPlacement(getPopperplacement(clockElement.current));
       },
+      position: position,
       children: jsx("div", {
+        ref: function ref(_ref3) {
+          clockElement.current = _ref3;
+          setPopperPlacement(getPopperplacement(_ref3));
+        },
         style: {
           position: 'absolute',
           zIndex: 1001,
           top: '10px',
           right: '10px'
         },
-        ref: function ref(_ref3) {
-          clockElement.current = _ref3;
-          setPopperPlacement(getPopperplacement(_ref3));
-        },
         children: jsx(Resizable, {
-          onResizeStart: function onResizeStart(event) {
-            event.stopPropagation();
+          enable: resizeHandlePlacement,
+          handleComponent: {
+            bottomLeft: jsx(Resize, {
+              isRightAligned: true,
+              style: {
+                fill: '#FFFFFF'
+              }
+            })
           },
+          lockAspectRatio: true,
+          minHeight: MIN_HEIGHT,
+          minWidth: hideButton ? MIN_WIDTH : MIN_WIDTH + BUTTON_WIDTH,
           onResize: function onResize(_event, _direction, _ref, delta) {
             var width = size.width + delta.width;
             var adjustedWidth = hideButton ? width : width - BUTTON_WIDTH;
             var fontSize = FONT_SIZE_WIDTH_RATIO * adjustedWidth;
             setFontSize(fontSize);
           },
+          onResizeStart: function onResizeStart(event) {
+            event.stopPropagation();
+          },
           onResizeStop: function onResizeStop(_event, _direction, _ref, delta) {
             var width = size.width + delta.width;
             var height = size.height + delta.height;
@@ -2116,32 +2117,20 @@ var TimeSliderClock = function TimeSliderClock(_ref2) {
             });
             setPopperPlacement(getPopperplacement(clockElement.current));
           },
-          lockAspectRatio: true,
-          minHeight: MIN_HEIGHT,
-          minWidth: hideButton ? MIN_WIDTH : MIN_WIDTH + BUTTON_WIDTH,
           size: size,
-          handleComponent: {
-            bottomLeft: jsx(Resize, {
-              isRightAligned: true,
-              style: {
-                fill: '#FFFFFF'
-              }
-            })
-          },
-          enable: resizeHandlePlacement,
           children: jsx(ClockContainer, {
+            fontSize: fontSize,
             hideButton: hideButton,
+            isPopperOpen: isPopperOpen,
             onButtonClick: function onButtonClick() {
               if (!isPopperOpen) {
                 setPopperPlacement(getPopperplacement(clockElement.current));
               }
               setIsPopperOpen(!isPopperOpen);
             },
-            isPopperOpen: isPopperOpen,
-            fontSize: fontSize,
-            time: time,
+            popperPlacement: popperPlacement,
             setButtonElement: setButtonElement,
-            popperPlacement: popperPlacement
+            time: time
           })
         })
       })
@@ -2530,124 +2519,39 @@ var drawTimeScale = function drawTimeScale(context, theme, visibleTimeStart, vis
     var timeFormat = getTimeFormat(fundamentalScale);
     var timeText = dateUtils.dateToString(dateUtils.fromUnix(timestep), timeFormat);
     if ([Scale.Minutes5, Scale.Hour, Scale.Hours3, Scale.Hours6, Scale.Day].includes(fundamentalScale) &&
-    // eslint-disable-next-line @typescript-eslint/no-confusing-non-null-assertion
-    timestep % scaleToUnitSeconds[fundamentalScale] === 0 || fundamentalScale === Scale.Week && dateUtils.getDay(dateUtils.fromUnix(timestep)) === 1) {
-      drawTimeText(ctx, theme, stepPx, height, timeText, fundamentalScale);
-    }
-    if (fundamentalScale === Scale.Year && dateUtils.getMonth(dateUtils.fromUnix(timestep)) === 0) {
-      drawYearScaleText(ctx, theme, timeText, stepPx, height);
-    }
-  });
-  // draw month overlay lines
-  if (fundamentalScale === Scale.Week || fundamentalScale === Scale.Weeks2 || fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
-    var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, Scale.Year),
-      _roundedStart = _getCustomRoundedStar[0],
-      _roundedEnd = _getCustomRoundedStar[1];
-    var monthTimesteps = getCustomTimesteps(_roundedStart, _roundedEnd, 'months');
-    monthTimesteps.forEach(function (timestep) {
-      var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
-      if (fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
-        var month = dateUtils.dateToString(dateUtils.fromUnix(timestep), 'MMM');
-        // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-        drawDateChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
-        drawTimeText(ctx, theme, stepPx, height, month, fundamentalScale);
-        return;
-      }
-      // adding 0.5 to make line not so blurred
-      drawDashedMonthChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
-    });
-  }
-  // draw date change texts
-  if (fundamentalScale === Scale.Year) {
-    return;
-  }
-  var dateText = getLeftSideDateText(visibleTimeStart, fundamentalScale);
-  drawLeftSideDateText(ctx, theme, dateText, height);
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var drawNeedle = function drawNeedle(context, theme, width, height, startTime, endTime, selectedTime) {
-  if (!selectedTime) {
-    return;
-  }
-  var ctx = context;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
-    playerNeedlePlayer = _theme$palette$geoweb.playerNeedlePlayer,
-    playerNeedlePlayerTop = _theme$palette$geoweb.playerNeedlePlayerTop,
-    playerTimeMarkers = _theme$palette$geoweb.playerTimeMarkers;
-  var selectedPx = timestampToPixelEdges(selectedTime, startTime, endTime, width);
-  // Draw a high vertical line (needle) indicating the current or selected time
-  ctx.beginPath();
-  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-  ctx.moveTo(Math.floor(selectedPx) + 0.5, height - 50);
-  ctx.lineTo(Math.floor(selectedPx) + 0.5, height);
-  ctx.lineWidth = 5;
-  ctx.strokeStyle = playerNeedlePlayer.rgba;
-  ctx.stroke();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = playerNeedlePlayerTop.rgba;
-  ctx.stroke();
-  // Triange connecting timebox.
-  ctx.beginPath();
-  ctx.moveTo(Math.floor(selectedPx) + 5, 0);
-  ctx.lineTo(Math.floor(selectedPx) + 0.5, 5);
-  ctx.lineTo(Math.floor(selectedPx) - 5, 0);
-  ctx.closePath();
-  ctx.fillStyle = playerTimeMarkers.fill;
-  ctx.fill();
-};
-
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2022 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var drawCurrentTime = function drawCurrentTime(context, theme, width, height, startTime, endTime, currentTime) {
-  var ctx = context;
-  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
-    playerNeedleTime = _theme$palette$geoweb.playerNeedleTime,
-    playerNeedleTimeTop = _theme$palette$geoweb.playerNeedleTimeTop;
-  var current = currentTime;
-  var currentPx = current ? timestampToPixelEdges(current, startTime, endTime, width) : 0;
-  // Draw a high vertical line (needle) indicating the current or selected time
-  ctx.beginPath();
-  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
-  ctx.moveTo(Math.floor(currentPx) + 0.5, height - 24);
-  ctx.lineTo(Math.floor(currentPx) + 0.5, height);
-  ctx.lineWidth = 5;
-  ctx.strokeStyle = playerNeedleTime.rgba;
-  ctx.stroke();
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = playerNeedleTimeTop.rgba;
-  ctx.stroke();
+    // eslint-disable-next-line @typescript-eslint/no-confusing-non-null-assertion
+    timestep % scaleToUnitSeconds[fundamentalScale] === 0 || fundamentalScale === Scale.Week && dateUtils.getDay(dateUtils.fromUnix(timestep)) === 1) {
+      drawTimeText(ctx, theme, stepPx, height, timeText, fundamentalScale);
+    }
+    if (fundamentalScale === Scale.Year && dateUtils.getMonth(dateUtils.fromUnix(timestep)) === 0) {
+      drawYearScaleText(ctx, theme, timeText, stepPx, height);
+    }
+  });
+  // draw month overlay lines
+  if (fundamentalScale === Scale.Week || fundamentalScale === Scale.Weeks2 || fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
+    var _getCustomRoundedStar = getCustomRoundedStartAndEnd(visibleTimeStart, visibleTimeEnd, Scale.Year),
+      _roundedStart = _getCustomRoundedStar[0],
+      _roundedEnd = _getCustomRoundedStar[1];
+    var monthTimesteps = getCustomTimesteps(_roundedStart, _roundedEnd, 'months');
+    monthTimesteps.forEach(function (timestep) {
+      var stepPx = timestampToPixelEdges(timestep, visibleTimeStart, visibleTimeEnd, canvasWidth);
+      if (fundamentalScale === Scale.Month || fundamentalScale === Scale.Months3) {
+        var month = dateUtils.dateToString(dateUtils.fromUnix(timestep), 'MMM');
+        // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
+        drawDateChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
+        drawTimeText(ctx, theme, stepPx, height, month, fundamentalScale);
+        return;
+      }
+      // adding 0.5 to make line not so blurred
+      drawDashedMonthChangeLine(ctx, theme, Math.floor(stepPx) + 0.5, height);
+    });
+  }
+  // draw date change texts
+  if (fundamentalScale === Scale.Year) {
+    return;
+  }
+  var dateText = getLeftSideDateText(visibleTimeStart, fundamentalScale);
+  drawLeftSideDateText(ctx, theme, dateText, height);
 };
 
 /* *
@@ -2779,6 +2683,91 @@ function getColorChangeTimesteps(scale, visibleTimeStart, visibleTimeEnd) {
   return colorChangeTimesteps;
 }
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var drawCurrentTime = function drawCurrentTime(context, theme, width, height, startTime, endTime, currentTime) {
+  var ctx = context;
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
+    playerNeedleTime = _theme$palette$geoweb.playerNeedleTime,
+    playerNeedleTimeTop = _theme$palette$geoweb.playerNeedleTimeTop;
+  var current = currentTime;
+  var currentPx = current ? timestampToPixelEdges(current, startTime, endTime, width) : 0;
+  // Draw a high vertical line (needle) indicating the current or selected time
+  ctx.beginPath();
+  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
+  ctx.moveTo(Math.floor(currentPx) + 0.5, height - 24);
+  ctx.lineTo(Math.floor(currentPx) + 0.5, height);
+  ctx.lineWidth = 5;
+  ctx.strokeStyle = playerNeedleTime.rgba;
+  ctx.stroke();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = playerNeedleTimeTop.rgba;
+  ctx.stroke();
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var drawNeedle = function drawNeedle(context, theme, width, height, startTime, endTime, selectedTime) {
+  if (!selectedTime) {
+    return;
+  }
+  var ctx = context;
+  var _theme$palette$geoweb = theme.palette.geowebColors.timeSlider,
+    playerNeedlePlayer = _theme$palette$geoweb.playerNeedlePlayer,
+    playerNeedlePlayerTop = _theme$palette$geoweb.playerNeedlePlayerTop,
+    playerTimeMarkers = _theme$palette$geoweb.playerTimeMarkers;
+  var selectedPx = timestampToPixelEdges(selectedTime, startTime, endTime, width);
+  // Draw a high vertical line (needle) indicating the current or selected time
+  ctx.beginPath();
+  // Move 1 pixel line by 0.5 pixels to prevent it from being shown as blurry: https://usefulangle.com/post/17/html5-canvas-drawing-1px-crisp-straight-lines
+  ctx.moveTo(Math.floor(selectedPx) + 0.5, height - 50);
+  ctx.lineTo(Math.floor(selectedPx) + 0.5, height);
+  ctx.lineWidth = 5;
+  ctx.strokeStyle = playerNeedlePlayer.rgba;
+  ctx.stroke();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = playerNeedlePlayerTop.rgba;
+  ctx.stroke();
+  // Triange connecting timebox.
+  ctx.beginPath();
+  ctx.moveTo(Math.floor(selectedPx) + 5, 0);
+  ctx.lineTo(Math.floor(selectedPx) + 0.5, 5);
+  ctx.lineTo(Math.floor(selectedPx) - 5, 0);
+  ctx.closePath();
+  ctx.fillStyle = playerTimeMarkers.fill;
+  ctx.fill();
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2973,7 +2962,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       if (lastHandledRoundedTime !== startTime) {
         setLastHandledRoundedTime(startTime);
         setShowTooltip('animationStart');
-        onStartTimeChange && onStartTimeChange(startTime);
+        onStartTimeChange == null || onStartTimeChange(startTime);
       }
     } else if (isDraggingEndAnimation && pixelsBetweenOnLeft) {
       if (isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth)) {
@@ -2983,7 +2972,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       if (lastHandledRoundedTime !== endTime) {
         setLastHandledRoundedTime(endTime);
         setShowTooltip('animationEnd');
-        onEndTimeChange && onEndTimeChange(endTime);
+        onEndTimeChange == null || onEndTimeChange(endTime);
       }
     }
     if (isDraggingAnimationArea) {
@@ -3041,13 +3030,13 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
   useEffect(function () {
     var handleMouseUp = function handleMouseUp() {
       if (isDraggingAnimationArea) {
-        onStartTimeChange && onStartTimeChange(localAnimationStartTime);
-        onEndTimeChange && onEndTimeChange(localAnimationEndTime);
+        onStartTimeChange == null || onStartTimeChange(localAnimationStartTime);
+        onEndTimeChange == null || onEndTimeChange(localAnimationEndTime);
       }
       setCursorStyle('auto');
       setIsDraggingSelectedTime(false);
-      setIsDraggingStartAnimation && setIsDraggingStartAnimation(false);
-      setIsDraggingEndAnimation && setIsDraggingEndAnimation(false);
+      setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(false);
+      setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(false);
       setIsDraggingLegend(false);
       setShowTooltip(undefined);
       setIsDraggingAnimationArea(false);
@@ -3122,13 +3111,13 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       // start dragging either marker
       if (isLeftAnimationIconArea(x, startAnimationPosition, DRAG_AREA_WIDTH)) {
         setCursorStyle('grabbing');
-        setIsDraggingStartAnimation && setIsDraggingStartAnimation(true);
+        setIsDraggingStartAnimation == null || setIsDraggingStartAnimation(true);
         setShowTooltip('animationStart');
         return;
       }
       if (isRightAnimationIconArea(x, endAnimationPosition, DRAG_AREA_WIDTH)) {
         setCursorStyle('grabbing');
-        setIsDraggingEndAnimation && setIsDraggingEndAnimation(true);
+        setIsDraggingEndAnimation == null || setIsDraggingEndAnimation(true);
         setShowTooltip('animationEnd');
         return;
       }
@@ -3214,7 +3203,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       height: TIME_SLIDER_LEGEND_HEIGHT + "px"
     },
     children: [jsx(CustomTooltip, {
-      title: getTooltipText(),
       open: Boolean(showTooltip),
       slotProps: {
         popper: {
@@ -3224,32 +3212,39 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
           }
         }
       },
+      title: getTooltipText(),
       children: jsx(Box, {
-        "data-testid": "timeSliderLegend",
         className: getTimeSliderLegendId(mapId),
+        "data-testid": "timeSliderLegend",
+        onMouseLeave: function onMouseLeave() {
+          setPointerTime(undefined);
+        },
         sx: {
           height: TIME_SLIDER_LEGEND_HEIGHT + "px",
           borderRadius: '4.5px',
           overflow: 'hidden',
           cursor: cursorStyle
         },
-        onMouseLeave: function onMouseLeave() {
-          setPointerTime(undefined);
-        },
         children: jsx(CanvasComponent, {
-          ref: node,
-          onMouseMove: onMouseMove,
-          onWheel: onWheelOverCanvas,
           onMouseDown: onMouseDown,
+          onMouseMove: onMouseMove,
           onMouseUp: onMouseUp,
           onRenderCanvas: function onRenderCanvas(ctx, width, height) {
             updateCanvasWidth(canvasWidth, width);
             drawTimeSliderLegend(ctx, theme, width, height, centerTime, secondsPerPx, timeSliderSpan, filteredTime, currentTime, start, end, dataStartTime, dataEndTime);
-          }
+          },
+          onWheel: onWheelOverCanvas,
+          ref: node
         })
       })
-    }), isTimeSliderHoverOn && jsx(Box, {
+    }), !!isTimeSliderHoverOn && jsx(Box, {
       "data-testid": "customCanvasMouseOverContainer",
+      onMouseLeave: function onMouseLeave() {
+        return setIsMouseOverCanvas(false);
+      },
+      onMouseOver: function onMouseOver() {
+        return setIsMouseOverCanvas(true);
+      },
       sx: {
         position: 'absolute',
         top: '-40px',
@@ -3258,12 +3253,6 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         bottom: 0,
         height: TIME_SLIDER_LEGEND_HEIGHT + " + 40px",
         zIndex: isMouseOverCanvas ? 100 : 0
-      },
-      onMouseOver: function onMouseOver() {
-        return setIsMouseOverCanvas(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setIsMouseOverCanvas(false);
       }
     })]
   });
@@ -3291,29 +3280,29 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   }, [anchorEl, isOpenByDefault]);
   return jsxs("div", {
     children: [jsx(CustomIconButton, {
-      variant: "tool",
+      "aria-label": "animation options",
+      "data-testid": "optionsMenuButton",
+      isSelected: open,
       onClick: function onClick() {
         setOpen(!open);
       },
-      "data-testid": "optionsMenuButton",
-      isSelected: open,
-      "aria-label": "animation options",
+      ref: function ref(_ref2) {
+        setAnchorEl(_ref2);
+      },
       tooltipProps: {
         title: t('timeslider-animation-options'),
         placement: 'bottom'
       },
-      ref: function ref(_ref2) {
-        setAnchorEl(_ref2);
-      },
+      variant: "tool",
       children: jsx(Options, {})
     }), jsx(Popper, {
+      anchorEl: anchorEl,
+      "data-testid": "optionsMenuPopOver",
+      open: open,
+      placement: "top-start",
       sx: {
         zIndex: 10
       },
-      placement: "top-start",
-      open: open,
-      "data-testid": "optionsMenuPopOver",
-      anchorEl: anchorEl,
       children: jsx(Paper, {
         elevation: 3,
         sx: {
@@ -3321,16 +3310,16 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
           top: '-2rem'
         },
         children: jsx(Grid, {
+          container: true,
+          spacing: 1,
           sx: {
             padding: '10px'
           },
-          container: true,
-          spacing: 1,
           children: jsx(OptionsMenu, {
-            timeSpanBtn: timeSpanBtn,
-            timeStepBtn: timeStepBtn,
+            animationLengthBtn: animationLengthBtn,
             speedBtn: speedBtn,
-            animationLengthBtn: animationLengthBtn
+            timeSpanBtn: timeSpanBtn,
+            timeStepBtn: timeStepBtn
           })
         })
       })
@@ -3357,11 +3346,11 @@ var TimeSliderButtons = function TimeSliderButtons(_ref) {
       children: [jsx(Grid, {
         children: optionsMenuBtn || jsx(OptionsMenuButton, {})
       }), jsx(ControlButtons, {
+        autoUpdateBtn: autoUpdateBtn,
         backwardBtn: backwardBtn,
         forwardBtn: forwardBtn,
-        playBtn: playBtn,
         nowBtn: nowBtn,
-        autoUpdateBtn: autoUpdateBtn
+        playBtn: playBtn
       })]
     })
   });
@@ -3534,10 +3523,10 @@ var AvailableDayByTimeRange = function AvailableDayByTimeRange(props, isDisabled
     today = props.today,
     outsideCurrentMonth = props.outsideCurrentMonth,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  var _React$useState = React__default.useState({}),
+  var _React$useState = React.useState({}),
     calendarDayStyle = _React$useState[0],
     setCalendarDayStyle = _React$useState[1];
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     if (outsideCurrentMonth || isDisabledStyle) {
       setCalendarDayStyle(disabledButtonStyle);
     } else if (today) {
@@ -3547,12 +3536,12 @@ var AvailableDayByTimeRange = function AvailableDayByTimeRange(props, isDisabled
     }
   }, [day, today, outsideCurrentMonth, isDisabledStyle]);
   return /*#__PURE__*/createElement(PickersDay, Object.assign({}, other, {
-    key: day.toString(),
-    sx: Object.assign({}, calendarDayStyle),
-    outsideCurrentMonth: outsideCurrentMonth,
     day: day,
+    disableHighlightToday: true,
     disableMargin: true,
-    disableHighlightToday: true
+    key: day.toString(),
+    outsideCurrentMonth: outsideCurrentMonth,
+    sx: Object.assign({}, calendarDayStyle)
   }));
 };
 var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
@@ -3567,13 +3556,13 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
     onCancel = _ref$onCancel === void 0 ? function () {} : _ref$onCancel;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
-  var _React$useState2 = React__default.useState(value ? toLocalTime(value) : null),
+  var _React$useState2 = React.useState(value ? toLocalTime(value) : null),
     localTimeValue = _React$useState2[0],
     setLocalTimeValue = _React$useState2[1];
-  var _React$useState3 = React__default.useState(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime),
+  var _React$useState3 = React.useState(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime),
     isUndefinedDateRange = _React$useState3[0],
     setIsUndefinedDateRange = _React$useState3[1];
-  var isDateRangeDisabled = React__default.useCallback(function (date) {
+  var isDateRangeDisabled = React.useCallback(function (date) {
     if (dataStartTime === undefined || dataEndTime === undefined || dataStartTime > dataEndTime) {
       return true;
     }
@@ -3583,7 +3572,7 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
     var day = dateUtils.unix(date);
     return day < dateUtils.unix(startOfFirstDay) || day > dateUtils.unix(endOfLastDay);
   }, [dataStartTime, dataEndTime]);
-  var _React$useState4 = React__default.useState(isDateRangeDisabled(localTimeValue)),
+  var _React$useState4 = React.useState(isDateRangeDisabled(localTimeValue)),
     isDisabledRange = _React$useState4[0],
     setIsDisabledRange = _React$useState4[1];
   var handleSelect = function handleSelect() {
@@ -3609,7 +3598,7 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
   var AvailableDay = function AvailableDay(props) {
     return AvailableDayByTimeRange(props, isDateRangeDisabled(props.day));
   };
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     setIsUndefinedDateRange(!dataStartTime || !dataEndTime || dataStartTime > dataEndTime);
     setIsDisabledRange(isDateRangeDisabled(localTimeValue));
   }, [dataStartTime, dataEndTime, localTimeValue, isDateRangeDisabled]);
@@ -3649,36 +3638,28 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
       }), jsx(LocalizationProvider, {
         dateAdapter: AdapterDateFns,
         children: jsx(DateTimePicker, {
-          desktopModeMediaQuery: "@media (min-width: 720px)",
-          label: t('timeslider-marker-label'),
           ampm: false,
-          value: localTimeValue,
+          autoFocus: true,
+          closeOnSelect: false,
+          desktopModeMediaQuery: "@media (min-width: 720px)",
+          disableIgnoringDatePartForTimeValidation: true,
           format: format,
+          label: t('timeslider-marker-label'),
+          maxDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataEndTime),
+          minDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataStartTime),
           onChange: handleDateChange,
-          closeOnSelect: false,
           onClose: handleSelect,
-          autoFocus: true,
-          disableIgnoringDatePartForTimeValidation: true,
           shouldDisableDate: isDisabledDateWithSomeAvailableData,
-          minDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataStartTime),
-          maxDateTime: isUndefinedDateRange ? undefined : toLocalTime(dataEndTime),
-          sx: {
-            marginTop: '8px',
-            marginBottom: '8px',
-            marginLeft: '8px',
-            marginRight: '8px',
-            borderRadius: '0px'
-          },
           slotProps: {
             textField: {
               variant: 'filled',
               InputProps: {
                 onKeyDownCapture: handleKeyDown,
                 endAdornment: jsx(InputAdornment, {
+                  position: "end",
                   sx: {
                     paddingTop: '16px'
                   },
-                  position: "end",
                   children: "UTC"
                 })
               }
@@ -3697,9 +3678,17 @@ var MarkerTimeSelector = function MarkerTimeSelector(_ref) {
             openPickerIcon: OpenPicker,
             day: AvailableDay
           },
+          sx: {
+            marginTop: '8px',
+            marginBottom: '8px',
+            marginLeft: '8px',
+            marginRight: '8px',
+            borderRadius: '0px'
+          },
           timeSteps: {
             minutes: 1
-          }
+          },
+          value: localTimeValue
         })
       })]
     })
@@ -3730,19 +3719,19 @@ var CalendarButton = function CalendarButton(_ref) {
     selectedTime = _ref.selectedTime,
     _ref$onSelect = _ref.onSelect,
     _onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect;
-  var _React$useState = React__default.useState(null),
+  var _React$useState = React.useState(null),
     anchorEl = _React$useState[0],
     setAnchorEl = _React$useState[1];
-  var _React$useState2 = React__default.useState(false),
+  var _React$useState2 = React.useState(false),
     open = _React$useState2[0],
     setOpen = _React$useState2[1];
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
   return jsx(ClickAwayListener, {
+    mouseEvent: "onMouseDown",
     onClickAway: function onClickAway() {
       return setOpen(false);
     },
-    mouseEvent: "onMouseDown",
     children: jsxs("div", {
       style: {
         position: 'absolute',
@@ -3750,22 +3739,22 @@ var CalendarButton = function CalendarButton(_ref) {
         left: calendarIconPx + "px"
       },
       children: [jsx(CustomTooltip, {
-        title: !open && t('timeslider-marker-placement'),
         slotProps: {
           transition: {
             exit: false
           }
         },
+        title: !open && t('timeslider-marker-placement'),
         children: jsx(CustomToggleButton, {
-          sx: style,
-          selected: open,
-          variant: "flat",
           onClick: function onClick() {
             return setOpen(!open);
           },
           ref: function ref(_ref2) {
             setAnchorEl(_ref2);
           },
+          selected: open,
+          sx: style,
+          variant: "flat",
           children: jsx(CalendarToday, {
             style: {
               marginRight: '0px'
@@ -3773,24 +3762,24 @@ var CalendarButton = function CalendarButton(_ref) {
           })
         })
       }), jsx(Popper, {
+        anchorEl: anchorEl,
+        "data-testid": "dateTimePickerPopOver",
+        open: open,
+        placement: "top-start",
         sx: {
           zIndex: 10
         },
-        placement: "top-start",
-        open: open,
-        "data-testid": "dateTimePickerPopOver",
-        anchorEl: anchorEl,
         children: jsx(MarkerTimeSelector, {
-          dataStartTime: dataStartTime,
           dataEndTime: dataEndTime,
-          value: selectedTime,
+          dataStartTime: dataStartTime,
+          onCancel: function onCancel() {
+            return setOpen(false);
+          },
           onSelect: function onSelect(newTime) {
             setOpen(false);
             _onSelect(newTime);
           },
-          onCancel: function onCancel() {
-            return setOpen(false);
-          }
+          value: selectedTime
         })
       })]
     })
@@ -3826,13 +3815,13 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   var theme = useTheme();
   var _useCanvasTarget = useCanvasTarget('mousedown'),
     node = _useCanvasTarget[1];
-  var _React$useState = React__default.useState('auto'),
+  var _React$useState = React.useState('auto'),
     cursorStyle = _React$useState[0],
     setCursorStyle = _React$useState[1];
-  var _React$useState2 = React__default.useState(false),
+  var _React$useState2 = React.useState(false),
     mouseDownInTimeBox = _React$useState2[0],
     setMouseDownInTimeBox = _React$useState2[1];
-  var _React$useState3 = React__default.useState(0),
+  var _React$useState3 = React.useState(0),
     canvasWidth = _React$useState3[0],
     setCanvasWidth = _React$useState3[1];
   var isAnimating = linkedMapAnimationInfo == null ? void 0 : linkedMapAnimationInfo.isAnimating;
@@ -3859,7 +3848,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   };
   var mouseDownX = useRef(0);
   var unfilteredSelectedTimePxAtMouseDown = useRef(0);
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     var handleMouseUp = function handleMouseUp() {
       mouseDownInTimeBox ? setCursorStyle('grab') : setCursorStyle('auto');
       setMouseDownInTimeBox(false);
@@ -3892,36 +3881,35 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   var currentTimeBoxWidth = getTimeBoxWidth(span);
   var calendarIconPx = timePx - currentTimeBoxWidth / 2 + CALENDAR_ICON_LEFT_SPACING;
   return jsxs(Box$1, {
-    "data-testid": "timeSliderTimeBox",
     className: "timeSliderTimeBox",
+    "data-testid": "timeSliderTimeBox",
     sx: {
       height: '24px',
       cursor: cursorStyle
     },
     children: [jsx(CanvasComponent, {
-      ref: node,
-      onMouseMove: function onMouseMove$1(x, y, event, width) {
+      onMouseDown: function onMouseDown$1(x, y, width) {
         if (!unfilteredSelectedTime) {
           return;
         }
-        onMouseMove(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle);
+        onMouseDown(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox);
       },
-      onMouseDown: function onMouseDown$1(x, y, width) {
+      onMouseMove: function onMouseMove$1(x, y, event, width) {
         if (!unfilteredSelectedTime) {
           return;
         }
-        onMouseDown(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, isTimeBoxArea, setCursorStyle, setMouseDownInTimeBox);
+        onMouseMove(x, width, unfilteredSelectedTime, centerTime, secondsPerPx, mouseDownInTimeBox, isTimeBoxArea, setCursorStyle);
       },
       onRenderCanvas: function onRenderCanvas(ctx, width, height) {
         setCanvasWidth(width);
         var filteredTime = getFilteredTime(unfilteredSelectedTime, timeStep, dataStartTime, dataEndTime);
         renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, filteredTime, secondsPerPx, span, isAutoUpdating);
-      }
+      },
+      ref: node
     }), jsx(CalendarButton, {
       calendarIconPx: calendarIconPx,
-      dataStartTime: dataStartTime,
       dataEndTime: dataEndTime,
-      selectedTime: filteredTime,
+      dataStartTime: dataStartTime,
       onSelect: function onSelect(newSelectedTime) {
         if (newSelectedTime) {
           onCalendarSelect(newSelectedTime);
@@ -3929,7 +3917,8 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
             onSetCenterTime(newSelectedTime - filteredTime + centerTime);
           }
         }
-      }
+      },
+      selectedTime: filteredTime
     })]
   });
 };
@@ -3955,4 +3944,4 @@ var DemoWrapper = function DemoWrapper(_ref2) {
   });
 };
 
-export { AUTO_MOVE_AREA_PADDING, AnimationLength, AnimationLengthButton, AutoUpdateButton, BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderClock, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, TimeStepButton, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultSecondsPerPx, defaultTimeSpan, defaultTimeStep, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRightAnimationIconArea, isSelectedTimeIconArea, marks$1 as marks, minutesToDescribedDuration, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pixelToTimestamp, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, setTooltipPosition, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, useCanvasTarget };
+export { AUTO_MOVE_AREA_PADDING, AnimationLength, AnimationLengthButton, AutoUpdateButton, BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderClock, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, TimeStepButton, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultSecondsPerPx, defaultTimeSpan, defaultTimeStep, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRightAnimationIconArea, isSelectedTimeIconArea, marks$1 as marks, minutesToDescribedDuration, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pixelToTimestamp, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, useCanvasTarget };