@opengeoweb/time-slider 20.0.0 → 20.0.1-nightly-20261002

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Grid, useTheme, Box, Typography, Menu, MenuItem, CardHeader, InputAdornment, RadioGroup, FormControlLabel, Radio, Divider, FormHelperText, FormControl, TextField, Select, Popper, Paper, Stack, ClickAwayListener } from '@mui/material';
+import { Grid, useTheme, Box, InputAdornment, Typography, RadioGroup, FormControlLabel, Radio, Divider, FormHelperText, Popover, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, Stack, ClickAwayListener } from '@mui/material';
 import React, { useState, useRef, useEffect, useCallback, useContext, useMemo, createElement } from 'react';
 import { dateUtils, isTargetInteractiveInput, isDialogFocused, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, NumberWithUnitField, DateTimePicker, renderCounter, pickerDateToUTC, CustomToggleButton } from '@opengeoweb/shared';
 import { debounce, throttle } from 'lodash';
-import { ChevronDown, ChevronUp, dragHandlePath, Edit, Animation, Clock, CalendarToday, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, FastForward, Options, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
+import { ChevronDown, ChevronUp, dragHandlePath, Clock, CalendarToday, Animation, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Edit, Speed, FastForward, Options, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
@@ -15,7 +15,6 @@ import { PickerDay } from '@mui/x-date-pickers/PickerDay';
 var en = {
 	"timeslider-auto": "Auto",
 	"timeslider-length": "length",
-	"timeslider-animation": "Animation",
 	"timeslider-auto-update-on": "Auto update on",
 	"timeslider-auto-update-off": "Auto update off",
 	"timeslider-backward": "Backward",
@@ -96,7 +95,6 @@ var en = {
 var fi = {
 	"timeslider-auto": "Auto",
 	"timeslider-length": "pituus",
-	"timeslider-animation": "Animaatio",
 	"timeslider-auto-update-on": "Auto update päällä",
 	"timeslider-auto-update-off": "Auto update pois päältä",
 	"timeslider-backward": "Taaksepäin",
@@ -175,7 +173,6 @@ var fi = {
 var no = {
 	"timeslider-auto": "Auto",
 	"timeslider-length": "lengde",
-	"timeslider-animation": "Animasjon",
 	"timeslider-auto-update-on": "Autooppdatering på",
 	"timeslider-auto-update-off": "Autooppdatering av",
 	"timeslider-backward": "Bakover",
@@ -254,7 +251,6 @@ var no = {
 var nl = {
 	"timeslider-auto": "Auto",
 	"timeslider-length": "lengte",
-	"timeslider-animation": "Animatie",
 	"timeslider-auto-update-on": "Auto update aan",
 	"timeslider-auto-update-off": "Auto update uit",
 	"timeslider-backward": "Achteruit",
@@ -390,17 +386,6 @@ var Scale;
   Scale[Scale["Months3"] = 8] = "Months3";
   Scale[Scale["Year"] = 9] = "Year";
 })(Scale || (Scale = {}));
-var AnimationLength;
-(function (AnimationLength) {
-  AnimationLength[AnimationLength["Minutes15"] = 15] = "Minutes15";
-  AnimationLength[AnimationLength["Minutes30"] = 30] = "Minutes30";
-  AnimationLength[AnimationLength["Hours1"] = 60] = "Hours1";
-  AnimationLength[AnimationLength["Hours2"] = 120] = "Hours2";
-  AnimationLength[AnimationLength["Hours3"] = 180] = "Hours3";
-  AnimationLength[AnimationLength["Hours6"] = 360] = "Hours6";
-  AnimationLength[AnimationLength["Hours12"] = 720] = "Hours12";
-  AnimationLength[AnimationLength["Hours24"] = 1440] = "Hours24";
-})(AnimationLength || (AnimationLength = {}));
 /**
  * In this Map collection all fundamental scales
  * (Scale.Minutes5 ... Scale.Year) are mapped with their corresponding
@@ -433,22 +418,6 @@ var timestampToPixel = function timestampToPixel(timestamp, centerTime, widthPx,
 var pixelToTimestamp = function pixelToTimestamp(timePx, centerTime, widthPx, secondsPerPx) {
   return centerTime - (widthPx / 2 - timePx) * secondsPerPx;
 };
-/**
- * This function creates and returns an array where there is secondsPerPx
- * number of the data set added for a data scale (secondsPerPx)
- * to secondsPerPxToScale.
- * @param secondsPerPx
- * @returns an array containing secondsPerPx numbers.
- * The secondsPerPx number for a data scale is included
- * contrary to secondsPerPxToScale.
- */
-var secondsPerPxValues = function secondsPerPxValues(secondsPerPx) {
-  var sortedSecondsPerPx = [].concat(secondsPerPxToScale).map(function (value) {
-    return Number(value[0]);
-  });
-  var full = [].concat(sortedSecondsPerPx, [secondsPerPx]);
-  return full;
-};
 var secondsPerPxFromCanvasWidth = function secondsPerPxFromCanvasWidth(canvasWidth, spanInSeconds) {
   if (canvasWidth <= 0 || spanInSeconds <= 0) {
     return undefined;
@@ -459,14 +428,6 @@ var getNewCenterOfFixedPointZoom = function getNewCenterOfFixedPointZoom(fixedTi
   var centerToFixedPointPx = (fixedTimePoint - oldCenterTime) / oldSecondsPerPx;
   return fixedTimePoint - centerToFixedPointPx * newSecondsPerPx;
 };
-/**
- * Move the time slider such that a given time point (timePoint)
- * is at a given pixel width (timePointPx).
- * @returns a new center time for the resulting position
- */
-var moveRelativeToTimePoint = function moveRelativeToTimePoint(timePoint, timePointPx, secondsPerPx, canvasWidth) {
-  return timePoint - secondsPerPx * (timePointPx - canvasWidth / 2);
-};
 /** This reusable custom hook tells whether given pointer event targets current canvas node.
  * Example:
  *
@@ -583,14 +544,15 @@ function getLargestTimeUnit(minutes) {
   }
   return TimeInMinutes.MINUTE;
 }
-// For a data scale an appropriate fundamental scale is chosen
-// depending on secondsPerPx of data. When a time range of
-// data is for example many months. the fundamental scale Scale.Year
-// is chosen here and the legend of the time slider is drawn in the
-// same as if otiginally a year scale would have been chose.
-//
-// If a  time range of data is a few weeks, Scale.Month is chosen. So, all
-// the time range of data can be shown in the window.
+/** For a data scale an appropriate fundamental scale is chosen
+ * depending on secondsPerPx of data. When a time range of
+ * data is for example many months. the fundamental scale Scale.Year
+ * is chosen here and the legend of the time slider is drawn in the
+ * same as if originally a year scale would have been chose.
+ *
+ * If a  time range of data is a few weeks, Scale.Month is chosen. So, all
+ * the time range of data can be shown in the window.
+ */
 var getFundamentalScale = function getFundamentalScale(secondsPerPx) {
   if (secondsPerPx >= scaleToSecondsPerPx[Scale.Month]) {
     return Scale.Year;
@@ -631,17 +593,6 @@ var getScaleFromSpan = function getScaleFromSpan(span) {
   }
   return sortedScales[0][1];
 };
-var calculateMouseTimeAndCheckBounds = function calculateMouseTimeAndCheckBounds(x, startAnimationPosition, endAnimationPosition, DRAG_AREA_WIDTH, pixelsBetweenViewportAndTimesliderOnLeft, centerTime, canvasWidth, secondsPerPx, tooltipPosition) {
-  var mousePosition = startAnimationPosition + x;
-  var startAnimationMaxPosition = endAnimationPosition - DRAG_AREA_WIDTH * 2;
-  var isDraggingWithinBounds = mousePosition >= startAnimationMaxPosition || mousePosition <= 0;
-  if (isDraggingWithinBounds) {
-    return undefined;
-  }
-  // eslint-disable-next-line no-param-reassign
-  tooltipPosition.current = pixelsBetweenViewportAndTimesliderOnLeft && mousePosition + pixelsBetweenViewportAndTimesliderOnLeft;
-  return pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
-};
 // default values
 var defaultAnimationDelayAtStart = 250;
 var defaultDelay = 1000; // [ms]
@@ -668,30 +619,12 @@ var roundWithTimeStep = function roundWithTimeStep(unixTime, timeStep, type) {
 var getSpeedDelay = function getSpeedDelay(speedFactor) {
   return defaultDelay / speedFactor;
 };
-var timeSliderLegendDefaultProps = {
-  timeSliderWidth: 100,
-  centerTime: dateUtils.unix(dateUtils.set(dateUtils.utc(), {
-    hours: 12,
-    minutes: 0,
-    seconds: 0,
-    milliseconds: 0
-  })),
-  secondsPerPx: defaultSecondsPerPx,
-  selectedTime: dateUtils.unix(dateUtils.set(dateUtils.utc(), {
-    hours: 12,
-    minutes: 0,
-    seconds: 0,
-    milliseconds: 0
-  }))
-};
 
 var timeSliderUtils = /*#__PURE__*/Object.freeze({
   __proto__: null,
   AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
-  get AnimationLength () { return AnimationLength; },
   get Scale () { return Scale; },
   get TimeInMinutes () { return TimeInMinutes; },
-  calculateMouseTimeAndCheckBounds: calculateMouseTimeAndCheckBounds,
   defaultAnimationDelayAtStart: defaultAnimationDelayAtStart,
   defaultDelay: defaultDelay,
   defaultSecondsPerPx: defaultSecondsPerPx,
@@ -704,18 +637,15 @@ var timeSliderUtils = /*#__PURE__*/Object.freeze({
   getScaleFromSpan: getScaleFromSpan,
   getSpeedDelay: getSpeedDelay,
   minutesToDescribedDuration: minutesToDescribedDuration,
-  moveRelativeToTimePoint: moveRelativeToTimePoint,
   pixelToTimestamp: pixelToTimestamp,
   roundWithTimeStep: roundWithTimeStep,
   scaleToSecondsPerPx: scaleToSecondsPerPx,
   scalingCoefficient: scalingCoefficient,
   secondsPerPxFromCanvasWidth: secondsPerPxFromCanvasWidth,
   secondsPerPxToScale: secondsPerPxToScale,
-  secondsPerPxValues: secondsPerPxValues,
   spanToScale: spanToScale,
   speedFactors: speedFactors,
   timeBoxGeom: timeBoxGeom,
-  timeSliderLegendDefaultProps: timeSliderLegendDefaultProps,
   timestampToPixel: timestampToPixel,
   timestampToPixelEdges: timestampToPixelEdges,
   useCanvasTarget: useCanvasTarget
@@ -905,78 +835,500 @@ var HideSliderButtonComponent = function HideSliderButtonComponent(_ref) {
 };
 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.
- * 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 _modeTranslationKey;
+var AnimationLengthMode;
+(function (AnimationLengthMode) {
+  AnimationLengthMode["Auto"] = "auto";
+  AnimationLengthMode["Now"] = "now";
+  AnimationLengthMode["RecurringPeriod"] = "recurringPeriod";
+  AnimationLengthMode["ReferenceTime"] = "referenceTime";
+  AnimationLengthMode["Exact"] = "exact";
+})(AnimationLengthMode || (AnimationLengthMode = {}));
+var timeUnits = ['years', 'months', 'weeks', 'days', 'hours', 'minutes'];
+var maxOffsetByUnit = {
+  minutes: 999,
+  hours: 999,
+  days: 365,
+  weeks: 99,
+  months: 99,
+  years: 99
+};
+/** Shared by the menu and the slider handles, so neither can reach an offset the other rejects. */
+var clampOffset = function clampOffset(_ref) {
+  var value = _ref.value,
+    unit = _ref.unit;
+  var maxOffset = maxOffsetByUnit[unit];
+  return {
+    value: Math.max(-maxOffset, Math.min(maxOffset, value)),
+    unit: unit
+  };
+};
+var defaultStartOffset = {
+  value: 0,
+  unit: 'hours'
+};
+var defaultEndOffset = {
+  value: 2,
+  unit: 'hours'
+};
+var defaultOffsetSelections = {
+  startOffset: defaultStartOffset,
+  endOffset: defaultEndOffset
+};
+var unitTranslationKey = {
+  years: 'timeslider-unit-years',
+  months: 'timeslider-unit-months',
+  weeks: 'timeslider-unit-weeks',
+  days: 'timeslider-unit-days',
+  hours: 'timeslider-unit-hours',
+  minutes: 'timeslider-unit-minutes'
+};
+var shortUnitTranslationKey = {
+  years: 'timeslider-unit-short-years',
+  months: 'timeslider-unit-short-months',
+  weeks: 'timeslider-unit-short-weeks',
+  days: 'timeslider-unit-short-days',
+  hours: 'timeslider-unit-short-hours',
+  minutes: 'timeslider-unit-short-minutes'
+};
+var modeTranslationKey = (_modeTranslationKey = {}, _modeTranslationKey[AnimationLengthMode.Auto] = 'timeslider-animation-length-auto', _modeTranslationKey[AnimationLengthMode.Now] = 'timeslider-animation-length-now', _modeTranslationKey[AnimationLengthMode.RecurringPeriod] = 'timeslider-animation-length-recurring-period', _modeTranslationKey[AnimationLengthMode.ReferenceTime] = 'timeslider-animation-length-reference-time', _modeTranslationKey[AnimationLengthMode.Exact] = 'timeslider-animation-length-exact', _modeTranslationKey);
+var offsetToDuration = function offsetToDuration(_ref2) {
+  var _ref3;
+  var value = _ref2.value,
+    unit = _ref2.unit;
+  return _ref3 = {}, _ref3[unit] = value, _ref3;
+};
+var toAnimationTime = function toAnimationTime(date) {
+  return dateUtils.dateToString(date, dateUtils.DATE_FORMAT_UTC);
+};
+/* The clock in the menu offers minutes in these increments, so an anchor must land on one. */
+var ANCHOR_MINUTE_STEP = 5;
+var padded = function padded(value) {
+  return String(value).padStart(2, '0');
+};
 /**
- * @param x The pin location
- * @param selectedTimePx The selected px
- * @param width The default width of a hoverable icon (usually 24px)
- * @returns
+ * Reads the UTC fields directly: `dateUtils.dateToString` formats a local twin of the
+ * date, which a DST gap shifts by an hour.
  */
-var isSelectedTimeIconArea = function isSelectedTimeIconArea(x, selectedTimePx, width) {
-  return x >= selectedTimePx && x <= selectedTimePx + width / 2;
+var toAnchorTime = function toAnchorTime(date) {
+  var minutes = date.getUTCMinutes();
+  return padded(date.getUTCHours()) + ":" + padded(minutes - minutes % ANCHOR_MINUTE_STEP);
+};
+/* Modes that count their offsets from an anchor instant rather than a stored range. */
+var anchoredModes = [AnimationLengthMode.Now, AnimationLengthMode.RecurringPeriod, AnimationLengthMode.ReferenceTime];
+var isAnchoredMode = function isAnchoredMode(mode) {
+  return !!mode && anchoredModes.includes(mode);
+};
+/** Narrows the mode so the compiler can require an anchor time alongside it. */
+var isRecurringPeriodMode = function isRecurringPeriodMode(mode) {
+  return mode === AnimationLengthMode.RecurringPeriod;
+};
+var ANCHOR_TIME_PATTERN = /^([01]\d|2[0-3]):[0-5]\d$/;
+var isValidAnchorTime = function isValidAnchorTime(anchorTime) {
+  return !!anchorTime && ANCHOR_TIME_PATTERN.test(anchorTime);
+};
+var selectionsForMode = function selectionsForMode(setting) {
+  if (setting.mode === AnimationLengthMode.Now) {
+    return setting.now;
+  }
+  if (setting.mode === AnimationLengthMode.RecurringPeriod) {
+    return setting.recurringPeriod;
+  }
+  if (setting.mode === AnimationLengthMode.ReferenceTime) {
+    return setting.referenceTime;
+  }
+  return defaultOffsetSelections;
+};
+/** The offsets of whichever mode is selected; the modes without offsets use the defaults. */
+var activeOffsets = function activeOffsets(setting) {
+  var _selectionsForMode = selectionsForMode(setting),
+    startOffset = _selectionsForMode.startOffset,
+    endOffset = _selectionsForMode.endOffset;
+  return {
+    startOffset: startOffset,
+    endOffset: endOffset
+  };
+};
+/** The unit the offsets are edited and dragged in. */
+var activeEditUnit = function activeEditUnit(setting) {
+  return selectionsForMode(setting).startOffset.unit;
+};
+var defaultRecurringPeriodSelections = function defaultRecurringPeriodSelections(now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return Object.assign({}, defaultOffsetSelections, {
+    anchorTime: toAnchorTime(now)
+  });
+};
+/** Presets carry settings the compiler cannot vouch for, so the selected mode is given the slice it needs. */
+var withModeSelections = function withModeSelections(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (setting.mode === AnimationLengthMode.Now) {
+    return Object.assign({}, setting, {
+      now: Object.assign({}, defaultOffsetSelections, setting.now)
+    });
+  }
+  if (setting.mode === AnimationLengthMode.RecurringPeriod) {
+    var merged = Object.assign({}, defaultRecurringPeriodSelections(now), setting.recurringPeriod);
+    return Object.assign({}, setting, {
+      recurringPeriod: isValidAnchorTime(merged.anchorTime) ? merged : Object.assign({}, merged, {
+        anchorTime: toAnchorTime(now)
+      })
+    });
+  }
+  if (setting.mode === AnimationLengthMode.Exact) {
+    return Object.assign({}, setting, {
+      exact: Object.assign({}, defaultExactSelections(now), setting.exact)
+    });
+  }
+  return setting;
 };
 /**
- * @param x The pin location
- * @param selectedTimePx The selected px
- * @param width The default width of a hoverable icon (usually 24px)
- * @returns
+ * A recurring period anchors on its time of day within the current UTC date, so the
+ * window it resolves rolls onto the next day once the clock passes midnight.
  */
-var isRightAnimationIconArea = function isRightAnimationIconArea(x, rightMarkerPx, width) {
-  return x >= rightMarkerPx - width && x <= rightMarkerPx;
+var resolveAnchorInstant = function resolveAnchorInstant(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (setting.mode !== AnimationLengthMode.RecurringPeriod) {
+    return now;
+  }
+  var _setting$recurringPer = setting.recurringPeriod.anchorTime.split(':').map(Number),
+    hours = _setting$recurringPer[0],
+    minutes = _setting$recurringPer[1];
+  return dateUtils.set(now, {
+    hours: hours,
+    minutes: minutes,
+    seconds: 0,
+    milliseconds: 0
+  });
 };
-var isInsideAnimationArea = function isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) {
-  var isInsideOnLeftSide = x >= leftMarkerPx;
-  var isInsideOnRightSide = x <= rightMarkerPx;
-  return isInsideOnLeftSide && isInsideOnRightSide;
+/**
+ * The instant a mode counts its offsets from. Only ReferenceTime takes one from
+ * outside, so handing a layer's reference time to any other mode cannot move it.
+ */
+var anchorInstantFor = function anchorInstantFor(setting, referenceTime, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return setting.mode === AnimationLengthMode.ReferenceTime && referenceTime ? dateUtils.utc(referenceTime) : resolveAnchorInstant(setting, now);
 };
 /**
- * @param x The pin location
- * @param selectedTimePx The selected px
- * @param width The default width of a hoverable icon (usually 24px)
- * @returns
+ * Offsets are signed: negative lands before the anchor, positive after. They are
+ * applied as calendar durations, so "+ 1 month" lands on the same day of the next
+ * month rather than a fixed number of days later.
  */
-var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx, width) {
-  return x >= leftMarkerPx && x <= leftMarkerPx + width;
+var resolveAnimationRange = function resolveAnimationRange(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  var _activeOffsets = activeOffsets(setting),
+    startOffset = _activeOffsets.startOffset,
+    endOffset = _activeOffsets.endOffset;
+  var anchor = resolveAnchorInstant(setting, now);
+  return {
+    animationStartTime: toAnimationTime(dateUtils.add(anchor, offsetToDuration(startOffset))),
+    animationEndTime: toAnimationTime(dateUtils.add(anchor, offsetToDuration(endOffset)))
+  };
 };
-function convertStringTimeToUnix(time) {
-  return time ? dateUtils.unix(new Date(time)) : undefined;
-}
-var timeValues = [3600, 10800, 21600, 43200, 86400, 172800, 604800, 1209600, 2592000, 7776000, 31536000];
-var TIME_SLIDER_LEGEND_HEIGHT = 24;
-var DRAG_AREA_WIDTH = 24;
-var isDraggingStartWithinBounds = function isDraggingStartWithinBounds(endPos, mousePosition) {
-  var startAnimationMaxPosition = endPos - DRAG_AREA_WIDTH * 2;
-  return mousePosition >= startAnimationMaxPosition || mousePosition <= 0;
+/* Calendar units have no fixed length, so this only seeds the search for the nearest offset. */
+var approximateMinutesPerUnit = {
+  minutes: 1,
+  hours: 60,
+  days: 60 * 24,
+  weeks: 60 * 24 * 7,
+  months: 60 * 24 * 30,
+  years: 60 * 24 * 365
+};
+/** The whole-unit offset landing nearest the instant, so a handle reaches only what the menu can express. */
+var offsetForInstant = function offsetForInstant(anchor, instant, unit) {
+  var estimate = Math.round(dateUtils.differenceInMinutes(instant, anchor) / approximateMinutesPerUnit[unit]);
+  var distanceFromInstant = function distanceFromInstant(value) {
+    return Math.abs(dateUtils.add(anchor, offsetToDuration({
+      value: value,
+      unit: unit
+    })).getTime() - instant.getTime());
+  };
+  var nearest = [estimate - 1, estimate, estimate + 1].reduce(function (closest, value) {
+    return distanceFromInstant(value) < distanceFromInstant(closest) ? value : closest;
+  });
+  return {
+    value: nearest,
+    unit: unit
+  };
 };
-var isDraggingEndWithinBounds = function isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth) {
-  var endAnimationMinimumPosition = startPos + DRAG_AREA_WIDTH * 2;
-  return endAnimationMinimumPosition >= mousePosition || mousePosition >= canvasWidth;
+/** Snaps a dragged handle onto the grid the mode's offsets can describe. */
+var snapInstantToOffsetGrid = function snapInstantToOffsetGrid(anchor, instant, unit) {
+  return dateUtils.add(anchor, offsetToDuration(clampOffset(offsetForInstant(anchor, instant, unit))));
 };
-var getTimeSliderLegendId = function getTimeSliderLegendId(mapId) {
-  return "timeSliderLegend_" + mapId;
+var isWithinOffsetLimit = function isWithinOffsetLimit(_ref4) {
+  var value = _ref4.value,
+    unit = _ref4.unit;
+  return Math.abs(value) <= maxOffsetByUnit[unit];
 };
-var getTimeSliderLegendElement = function getTimeSliderLegendElement(mapId) {
-  return document.querySelector(".timeSliderLegend_" + mapId);
+/**
+ * Recounts only the edges the range names, on the grid of the unit in use. An edge left
+ * out keeps the offset it holds: reading its instant back would subtract whatever time
+ * passed since that instant was resolved.
+ */
+var offsetsForRange = function offsetsForRange(setting, _ref5, now) {
+  var animationStartTime = _ref5.animationStartTime,
+    animationEndTime = _ref5.animationEndTime;
+  var anchor = resolveAnchorInstant(setting, now);
+  var unit = activeEditUnit(setting);
+  var heldOffsets = activeOffsets(setting);
+  var offsetOf = function offsetOf(time) {
+    return offsetForInstant(anchor, dateUtils.utc(time), unit);
+  };
+  var startOffset = animationStartTime ? offsetOf(animationStartTime) : heldOffsets.startOffset;
+  var endOffset = animationEndTime ? offsetOf(animationEndTime) : heldOffsets.endOffset;
+  var movedBeyondReach = !!animationStartTime && !isWithinOffsetLimit(startOffset) || !!animationEndTime && !isWithinOffsetLimit(endOffset);
+  return movedBeyondReach ? undefined : {
+    startOffset: startOffset,
+    endOffset: endOffset
+  };
 };
-var getPixelsBetweenViewportAndTimesliderOnLeft = function getPixelsBetweenViewportAndTimesliderOnLeft(mapId) {
-  var timeSliderLegendElement = document.querySelector(".timeSliderLegend_" + mapId);
-  return timeSliderLegendElement == null ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
+/**
+ * A range set on the slider belongs to whichever mode is selected, so only that mode's
+ * own selections change, and only on the edges the range names; the modes that read their
+ * range from elsewhere keep it, and so does an edge the mode's offsets cannot reach.
+ */
+var withDraggedRange = function withDraggedRange(setting, range, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (setting.mode === AnimationLengthMode.Exact) {
+    var _range$animationStart, _range$animationEndTi;
+    return Object.assign({}, setting, {
+      exact: {
+        animationStartTime: (_range$animationStart = range.animationStartTime) != null ? _range$animationStart : setting.exact.animationStartTime,
+        animationEndTime: (_range$animationEndTi = range.animationEndTime) != null ? _range$animationEndTi : setting.exact.animationEndTime
+      }
+    });
+  }
+  var offsets = isAnchoredMode(setting.mode) ? offsetsForRange(setting, range, now) : undefined;
+  if (!offsets) {
+    return setting;
+  }
+  if (setting.mode === AnimationLengthMode.RecurringPeriod) {
+    return Object.assign({}, setting, {
+      recurringPeriod: Object.assign({}, setting.recurringPeriod, offsets)
+    });
+  }
+  if (setting.mode === AnimationLengthMode.ReferenceTime) {
+    return Object.assign({}, setting, {
+      referenceTime: Object.assign({}, setting.referenceTime, offsets)
+    });
+  }
+  return Object.assign({}, setting, {
+    now: Object.assign({}, setting.now, offsets)
+  });
+};
+/** Offsets can use different units, so validity is decided on the resolved instants. */
+/** Exact names its range outright; every other mode resolves one from its offsets. */
+var settingRange = function settingRange(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return setting.mode === AnimationLengthMode.Exact ? setting.exact : resolveAnimationRange(setting, now);
+};
+/* Exact times are picked to the minute, so seconds must not decide validity. */
+var isValidAnimationLength = function isValidAnimationLength(setting, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  var _settingRange = settingRange(setting, now),
+    animationStartTime = _settingRange.animationStartTime,
+    animationEndTime = _settingRange.animationEndTime;
+  return dateUtils.isBefore(dateUtils.utc(animationStartTime).setSeconds(0, 0), dateUtils.utc(animationEndTime).setSeconds(0, 0));
+};
+/** Frames the animation may hold; the range is expanded one entry per time step. */
+var MAX_ANIMATION_STEPS = 10000;
+/**
+ * The cost of an animation is its span divided by the time step, so a wide range
+ * is affordable with a coarse step and unaffordable with a fine one.
+ */
+var isWithinAnimationStepLimit = function isWithinAnimationStepLimit(setting, timeStepInMinutes, now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  if (!timeStepInMinutes) {
+    return true;
+  }
+  var _settingRange2 = settingRange(setting, now),
+    animationStartTime = _settingRange2.animationStartTime,
+    animationEndTime = _settingRange2.animationEndTime;
+  var spanInMinutes = dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime));
+  return Math.abs(spanInMinutes) / timeStepInMinutes <= MAX_ANIMATION_STEPS;
+};
+/* Shares the animation-time format, so a typed and a dragged range serialise alike. */
+var toExactAnimationTime = toAnimationTime;
+/** A day either side of now, so an exact window opens on something usable. */
+var defaultExactSelections = function defaultExactSelections(now) {
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  var wholeMinute = dateUtils.set(now, {
+    seconds: 0,
+    milliseconds: 0
+  });
+  return {
+    animationStartTime: toExactAnimationTime(dateUtils.sub(wholeMinute, {
+      days: 1
+    })),
+    animationEndTime: toExactAnimationTime(dateUtils.add(wholeMinute, {
+      days: 1
+    }))
+  };
+};
+/** Starts Exact from whatever range is already on screen, falling back to the defaults. */
+var exactAnimationLengthFrom = function exactAnimationLengthFrom(_ref6, now) {
+  var animationStartTime = _ref6.animationStartTime,
+    animationEndTime = _ref6.animationEndTime;
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  return {
+    mode: AnimationLengthMode.Exact,
+    exact: animationStartTime && animationEndTime ? {
+      animationStartTime: animationStartTime,
+      animationEndTime: animationEndTime
+    } : defaultExactSelections(now)
+  };
+};
+var getOffsetFromTime = function getOffsetFromTime(time, anchorTime) {
+  var relativeTime = dateUtils.utc(time);
+  var value = dateUtils.differenceInMinutes(relativeTime, anchorTime);
+  return {
+    unit: 'minutes',
+    value: value
+  };
+};
+var getAnimationLengthFromRange = function getAnimationLengthFromRange(mode, _ref7, now) {
+  var animationStartTime = _ref7.animationStartTime,
+    animationEndTime = _ref7.animationEndTime;
+  if (now === void 0) {
+    now = dateUtils.utc();
+  }
+  switch (mode) {
+    case AnimationLengthMode.Now:
+      {
+        return {
+          mode: mode,
+          now: {
+            startOffset: getOffsetFromTime(animationStartTime, now),
+            endOffset: getOffsetFromTime(animationEndTime, now)
+          }
+        };
+      }
+    case AnimationLengthMode.RecurringPeriod:
+      {
+        var today = dateUtils.startOfDayUTC(now);
+        return {
+          mode: mode,
+          recurringPeriod: {
+            anchorTime: '00:00',
+            startOffset: getOffsetFromTime(animationStartTime, today),
+            endOffset: getOffsetFromTime(animationEndTime, today)
+          }
+        };
+      }
+    case AnimationLengthMode.Exact:
+    default:
+      return exactAnimationLengthFrom({
+        animationStartTime: animationStartTime,
+        animationEndTime: animationEndTime
+      });
+  }
+};
+
+/* *
+ * 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)
+ * */
+/**
+ * @param x The pin location
+ * @param selectedTimePx The selected px
+ * @param width The default width of a hoverable icon (usually 24px)
+ * @returns
+ */
+var isSelectedTimeIconArea = function isSelectedTimeIconArea(x, selectedTimePx, width) {
+  return x >= selectedTimePx && x <= selectedTimePx + width / 2;
+};
+/**
+ * @param x The pin location
+ * @param selectedTimePx The selected px
+ * @param width The default width of a hoverable icon (usually 24px)
+ * @returns
+ */
+var isRightAnimationIconArea = function isRightAnimationIconArea(x, rightMarkerPx, width) {
+  return x >= rightMarkerPx - width && x <= rightMarkerPx;
+};
+var isInsideAnimationArea = function isInsideAnimationArea(x, leftMarkerPx, rightMarkerPx) {
+  var isInsideOnLeftSide = x >= leftMarkerPx;
+  var isInsideOnRightSide = x <= rightMarkerPx;
+  return isInsideOnLeftSide && isInsideOnRightSide;
+};
+/**
+ * @param x The pin location
+ * @param selectedTimePx The selected px
+ * @param width The default width of a hoverable icon (usually 24px)
+ * @returns
+ */
+var isLeftAnimationIconArea = function isLeftAnimationIconArea(x, leftMarkerPx, width) {
+  return x >= leftMarkerPx && x <= leftMarkerPx + width;
+};
+function convertStringTimeToUnix(time) {
+  return time ? dateUtils.unix(new Date(time)) : undefined;
+}
+var timeValues = [3600, 10800, 21600, 43200, 86400, 172800, 604800, 1209600, 2592000, 7776000, 31536000];
+var TIME_SLIDER_LEGEND_HEIGHT = 24;
+var DRAG_AREA_WIDTH = 24;
+/* A window narrower than the handles would otherwise trap them, so only closing the gap is refused. */
+var isDraggingStartWithinBounds = function isDraggingStartWithinBounds(endPos, mousePosition, startPos) {
+  var startAnimationMaxPosition = endPos - DRAG_AREA_WIDTH * 2;
+  var crowdsTheEndHandle = mousePosition >= startAnimationMaxPosition && mousePosition >= startPos;
+  return crowdsTheEndHandle || mousePosition <= 0;
+};
+var isDraggingEndWithinBounds = function isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth, endPos) {
+  var endAnimationMinimumPosition = startPos + DRAG_AREA_WIDTH * 2;
+  var crowdsTheStartHandle = endAnimationMinimumPosition >= mousePosition && mousePosition <= endPos;
+  return crowdsTheStartHandle || mousePosition >= canvasWidth;
+};
+/** The animation holds one frame per time step, so a wide enough range would outgrow the limit. */
+var exceedsAnimationStepLimit = function exceedsAnimationStepLimit(startTimeUnix, endTimeUnix, timeStepInMinutes) {
+  if (!timeStepInMinutes) {
+    return false;
+  }
+  var spanInMinutes = Math.abs(endTimeUnix - startTimeUnix) / 60;
+  return spanInMinutes / timeStepInMinutes > MAX_ANIMATION_STEPS;
+};
+var getTimeSliderLegendId = function getTimeSliderLegendId(mapId) {
+  return "timeSliderLegend_" + mapId;
+};
+var getTimeSliderLegendElement = function getTimeSliderLegendElement(mapId) {
+  return document.querySelector(".timeSliderLegend_" + mapId);
+};
+var getPixelsBetweenViewportAndTimesliderOnLeft = function getPixelsBetweenViewportAndTimesliderOnLeft(mapId) {
+  var timeSliderLegendElement = document.querySelector(".timeSliderLegend_" + mapId);
+  return timeSliderLegendElement == null ? void 0 : timeSliderLegendElement.getBoundingClientRect()['left'];
 };
 function getPositions(width, unfilteredSelectedTime, centerTime, secondsPerPx, start, end) {
   var selectedTimePosition = timestampToPixel(unfilteredSelectedTime, centerTime, width, secondsPerPx);
@@ -1747,6 +2099,9 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     onStartTimeChange = _ref.onStartTimeChange,
     onEndTimeChange = _ref.onEndTimeChange,
     onSetTimeSliderSpan = _ref.onSetTimeSliderSpan,
+    snapAnimationTime = _ref.snapAnimationTime,
+    _ref$isAnimationRange = _ref.isAnimationRangeDraggable,
+    isAnimationRangeDraggable = _ref$isAnimationRange === void 0 ? true : _ref$isAnimationRange,
     _ref$adjustSelectedTi = _ref.adjustSelectedTimeOnWheel,
     adjustSelectedTimeOnWheel = _ref$adjustSelectedTi === void 0 ? function () {} : _ref$adjustSelectedTi;
   var _useCanvasTarget = useCanvasTarget('mousedown'),
@@ -1817,18 +2172,17 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         return undefined;
     }
   };
+  /** The handles already sit on the grid their mode allows, so their time is reported as it is. */
   var getTooltipText = function getTooltipText() {
     var time = getTooltipTime();
     if (!time) {
       return undefined;
     }
-    var roundedTooltipTime = showTooltip === 'mousePointer' ? time : roundWithTimeStep$1(time);
-    var tooltipText = dateUtils.dateToString(dateUtils.fromUnix(roundedTooltipTime), dateUtils.DATE_FORMAT_HOURS);
-    return tooltipText;
-  };
-  var roundWithTimeStep$1 = function roundWithTimeStep$1(time) {
-    return roundWithTimeStep(time, timeStep);
+    return dateUtils.dateToString(dateUtils.fromUnix(time), dateUtils.DATE_FORMAT_HOURS);
   };
+  var snapAnimationTimeToGrid = React.useCallback(function (time) {
+    return snapAnimationTime ? snapAnimationTime(time) : roundWithTimeStep(time, timeStep);
+  }, [snapAnimationTime, timeStep]);
   var currentIndex = timeValues.indexOf(timeSliderSpan);
   var updateTimeSpan = function updateTimeSpan(deltaY) {
     if (onSetTimeSliderSpan) {
@@ -1850,8 +2204,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     var startPos = timestampToPixel(localAnimationStartTime, centerTime, canvasWidth, secondsPerPx);
     var endPos = timestampToPixel(localAnimationEndTime, centerTime, canvasWidth, secondsPerPx);
     var mouseTimeUnix = pixelToTimestamp(mousePosition, centerTime, canvasWidth, secondsPerPx);
-    var startTime = roundWithTimeStep(mouseTimeUnix, timeStep);
-    var endTime = roundWithTimeStep(mouseTimeUnix, timeStep);
+    var snappedMouseTime = snapAnimationTimeToGrid(mouseTimeUnix);
     var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
     if (isDraggingStartAnimation || isDraggingEndAnimation || isDraggingAnimationArea) {
       if (!isAnimationTimeModifiedSetRef.current) {
@@ -1859,24 +2212,24 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       }
     }
     if (isDraggingStartAnimation) {
-      if (isDraggingStartWithinBounds(endPos, mousePosition)) {
+      if (isDraggingStartWithinBounds(endPos, mousePosition, startPos) || exceedsAnimationStepLimit(snappedMouseTime, end, timeStep)) {
         return;
       }
-      setLocalAnimationStartTime(roundWithTimeStep(mouseTimeUnix, timeStep));
-      if (lastHandledRoundedTime !== startTime) {
-        setLastHandledRoundedTime(startTime);
+      setLocalAnimationStartTime(snappedMouseTime);
+      if (lastHandledRoundedTime !== snappedMouseTime) {
+        setLastHandledRoundedTime(snappedMouseTime);
         setShowTooltip('animationStart');
-        onStartTimeChange == null || onStartTimeChange(startTime);
+        onStartTimeChange == null || onStartTimeChange(snappedMouseTime);
       }
     } else if (isDraggingEndAnimation && pixelsBetweenOnLeft) {
-      if (isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth)) {
+      if (isDraggingEndWithinBounds(startPos, mousePosition, canvasWidth, endPos) || exceedsAnimationStepLimit(start, snappedMouseTime, timeStep)) {
         return;
       }
-      setLocalAnimationEndTime(roundWithTimeStep(mouseTimeUnix, timeStep));
-      if (lastHandledRoundedTime !== endTime) {
-        setLastHandledRoundedTime(endTime);
+      setLocalAnimationEndTime(snappedMouseTime);
+      if (lastHandledRoundedTime !== snappedMouseTime) {
+        setLastHandledRoundedTime(snappedMouseTime);
         setShowTooltip('animationEnd');
-        onEndTimeChange == null || onEndTimeChange(endTime);
+        onEndTimeChange == null || onEndTimeChange(snappedMouseTime);
       }
     }
     if (isDraggingAnimationArea) {
@@ -1897,12 +2250,10 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
         timeFromMouseToStart = _timeBetweenMouseAndS.timeFromMouseToStart;
       var newStartTime = mouseTimeUnix - timeFromMouseToStart;
       var newEndTime = mouseTimeUnix + timeFromMouseToEnd;
-      var roundedNewStartTime = roundWithTimeStep(newStartTime, timeStep);
-      var roundedNewEndTime = roundWithTimeStep(newEndTime, timeStep);
-      setLocalAnimationStartTime(roundedNewStartTime);
-      setLocalAnimationEndTime(roundedNewEndTime);
+      setLocalAnimationStartTime(snapAnimationTimeToGrid(newStartTime));
+      setLocalAnimationEndTime(snapAnimationTimeToGrid(newEndTime));
     }
-  }, [canvasWidth, centerTime, end, isDraggingAnimationArea, isDraggingEndAnimation, isDraggingStartAnimation, lastHandledRoundedTime, localAnimationEndTime, localAnimationStartTime, mapId, onEndTimeChange, onStartTimeChange, secondsPerPx, start, timeStep, xOffset]);
+  }, [canvasWidth, centerTime, end, isDraggingAnimationArea, isDraggingEndAnimation, isDraggingStartAnimation, lastHandledRoundedTime, localAnimationEndTime, localAnimationStartTime, mapId, onEndTimeChange, onStartTimeChange, secondsPerPx, snapAnimationTimeToGrid, start, timeStep, xOffset]);
   useEffect(function () {
     var handleMouseUp = function handleMouseUp() {
       pixelsMovedSinceStartDragging.current = 0;
@@ -2009,7 +2360,7 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       setIsDraggingSelectedTime(true);
       return;
     }
-    if (reduxAnimationStartTime && reduxAnimationEndTime) {
+    if (isAnimationRangeDraggable && reduxAnimationStartTime && reduxAnimationEndTime) {
       var pixelsBetweenOnLeft = getPixelsBetweenViewportAndTimesliderOnLeft(mapId);
       tooltipPosition.current = pixelsBetweenOnLeft ? x + pixelsBetweenOnLeft : x;
       // start dragging either marker
@@ -2145,603 +2496,21 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
       "data-testid": "customCanvasMouseOverContainer",
       onMouseLeave: function onMouseLeave() {
         return setIsMouseOverCanvas(false);
-      },
-      onMouseOver: function onMouseOver() {
-        return setIsMouseOverCanvas(true);
-      },
-      sx: {
-        position: 'absolute',
-        top: '-40px',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: TIME_SLIDER_LEGEND_HEIGHT + " + 40px",
-        zIndex: isMouseOverCanvas ? 100 : 0
-      }
-    })]
-  });
-};
-
-var THROTTLE_WAIT_TIME = 300; // [ms]
-var THROTTLE_OPTIONS = {
-  trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
-};
-var TimeSliderMenu = function TimeSliderMenu(_ref) {
-  var marks = _ref.marks,
-    value = _ref.value,
-    allOptionsDisabled = _ref.allOptionsDisabled,
-    isAutoDisabled = _ref.isAutoDisabled,
-    handleAutoClick = _ref.handleAutoClick,
-    isAutoSelected = _ref.isAutoSelected,
-    title = _ref.title,
-    icon = _ref.icon,
-    _ref$onChangeSliderVa = _ref.onChangeSliderValue,
-    onChangeSliderValue = _ref$onChangeSliderVa === void 0 ? function () {} : _ref$onChangeSliderVa,
-    onSelectSliderValue = _ref.onSelectSliderValue,
-    displayCurrentLength = _ref.displayCurrentLength,
-    _ref$disbleUserSetDur = _ref.disbleUserSetDuration,
-    disbleUserSetDuration = _ref$disbleUserSetDur === void 0 ? true : _ref$disbleUserSetDur,
-    customLengthSelector = _ref.customLengthSelector,
-    _ref$setOpen = _ref.setOpen,
-    setOpen = _ref$setOpen === void 0 ? function () {} : _ref$setOpen,
-    _ref$customFieldHeade = _ref.customFieldHeader,
-    customFieldHeader = _ref$customFieldHeade === void 0 ? 'timeslider-length' : _ref$customFieldHeade,
-    open = _ref.open;
-  var currentMarkIndex = marks.findIndex(function (mark) {
-    return mark.value === value;
-  });
-  var currentMark = marks[currentMarkIndex];
-  var _React$useState = React.useState(null),
-    anchorRef = _React$useState[0],
-    setAnchorRef = _React$useState[1];
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var _useState = useState(false),
-    displayLengthInputField = _useState[0],
-    setDisplayLengthInputField = _useState[1];
-  React.useEffect(function () {
-    if (!open && displayLengthInputField) {
-      setDisplayLengthInputField(false);
-    }
-  }, [displayLengthInputField, open]);
-  var getDisplayTextFromMark = function getDisplayTextFromMark(mark) {
-    if (!(mark != null && mark.label)) {
-      return '';
-    }
-    var parts = t(mark.label).split(' ');
-    if (parts.length > 1) {
-      return parts[0] + parts.slice(1).join(' ');
-    }
-    return parts.join('');
-  };
-  var buttonText = function buttonText(value, displayCurrentLength, currentMark) {
-    if (displayCurrentLength) {
-      if (!Number.isInteger(value)) {
-        return value + "m";
-      }
-      return minutesToDescribedDuration(value);
-    }
-    if (currentMark != null && currentMark.label) {
-      return getDisplayTextFromMark(currentMark);
-    }
-    return '';
-  };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  var throttledScroll = React.useCallback(throttle(function (newValue) {
-    onChangeSliderValue(newValue);
-  }, THROTTLE_WAIT_TIME, THROTTLE_OPTIONS), []);
-  var onWheel = React.useCallback(function (event) {
-    var direction = event.deltaY < 0 ? 1 : -1;
-    var newValue = marks[Math.min(Math.max(currentMarkIndex - direction, 0), marks.length - 1)];
-    throttledScroll(newValue.value);
-  }, [currentMarkIndex, marks, throttledScroll]);
-  var buttonDisplayText = buttonText(value, displayCurrentLength, currentMark);
-  var menuDisplayValue = !Number.isInteger(value) ? value + "m" : minutesToDescribedDuration(value);
-  var displayValue = isAutoSelected ? "A: " + buttonDisplayText : buttonDisplayText;
-  return jsxs(Box, {
-    onKeyDown: function onKeyDown(event) {
-      event.stopPropagation();
-    },
-    children: [jsxs(CustomIconButton, {
-      isSelected: true,
-      onClick: function onClick() {
-        setOpen(true);
-      },
-      onWheel: onWheel,
-      ref: setAnchorRef,
-      sx: {
-        padding: '0px',
-        paddingRight: '12px',
-        width: '100%!important',
-        minWidth: '64px',
-        justifyContent: 'space-between'
-      },
-      tooltipTitle: title,
-      variant: "tool",
-      children: [icon, jsx(Typography, {
-        sx: {
-          fontSize: 12,
-          fontWeight: 400,
-          textTransform: 'none'
-        },
-        children: displayValue
-      })]
-    }), !!anchorRef && jsxs(Menu, {
-      anchorEl: anchorRef,
-      anchorOrigin: {
-        vertical: -15,
-        horizontal: 'center'
-      },
-      onClose: function onClose() {
-        return setOpen(false);
-      },
-      open: open,
-      slotProps: {
-        backdrop: {
-          sx: {
-            backgroundColor: 'transparent'
-          }
-        }
-      },
-      transformOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      },
-      children: [jsx(MenuItem, {
-        disabled: true,
-        sx: {
-          fontSize: '12px',
-          opacity: 0.67,
-          padding: '0px 12px',
-          '&.MuiMenuItem-root': {
-            minHeight: '30px!important',
-            minWidth: 150
-          }
-        },
-        children: title
-      }), marks.map(function (mark) {
-        var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value;
-        return jsx(MenuItem, {
-          disabled: allOptionsDisabled,
-          onClick: function onClick() {
-            if (!isSelected) {
-              onChangeSliderValue(mark.value);
-            }
-            onSelectSliderValue == null || onSelectSliderValue(mark.value);
-            setOpen(false);
-          },
-          selected: !!isSelected && !displayLengthInputField,
-          children: mark.label || mark.text
-        }, mark.value);
-      }), !!handleAutoClick && jsx(MenuItem, {
-        disabled: allOptionsDisabled || isAutoDisabled,
-        onClick: function onClick() {
-          handleAutoClick();
-          setOpen(false);
-        },
-        selected: isAutoSelected,
-        children: t('timeslider-auto')
-      }), !!displayCurrentLength && jsxs(MenuItem, {
-        disabled: disbleUserSetDuration,
-        onClick: function onClick() {
-          return setDisplayLengthInputField(true);
-        },
-        sx: {
-          maxWidth: '175px'
-        },
-        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
-          sx: {
-            flexDirection: 'column',
-            display: 'flex',
-            flexGrow: 1
-          },
-          children: [jsx(CardHeader, {
-            slotProps: {
-              title: {
-                sx: {
-                  fontSize: 12
-                }
-              }
-            },
-            sx: {
-              height: 2,
-              padding: 0,
-              color: 'geowebColors.greys.accessible'
-            },
-            title: t(customFieldHeader)
-          }), jsxs(Box, {
-            sx: {
-              flexDirection: 'row',
-              display: 'flex',
-              justifyContent: 'space-between',
-              flexGrow: 1,
-              paddingTop: 0.5
-            },
-            children: [jsx(Typography, {
-              sx: {
-                fontSize: 14,
-                textTransform: 'none',
-                lineHeight: 2
-              },
-              children: menuDisplayValue
-            }), jsx(CustomTooltip, {
-              title: t('timeslider-edit'),
-              children: jsx("span", {
-                children: jsx(CustomIconButton, {
-                  "aria-label": "edit animation option",
-                  "data-testid": "editAnimationOption",
-                  children: jsx(Edit, {})
-                })
-              })
-            })]
-          })]
-        })]
-      })]
-    })]
-  });
-};
-
-var marks$2 = [{
-  value: AnimationLength.Minutes15,
-  text: 'timeslider-min',
-  count: 15
-}, {
-  value: AnimationLength.Minutes30,
-  text: 'timeslider-min',
-  count: 30
-}, {
-  value: AnimationLength.Hours1,
-  text: 'timeslider-hour',
-  count: 1
-}, {
-  value: AnimationLength.Hours2,
-  text: 'timeslider-hour',
-  count: 2
-}, {
-  value: AnimationLength.Hours3,
-  text: 'timeslider-hour',
-  count: 3
-}, {
-  value: AnimationLength.Hours6,
-  text: 'timeslider-hour',
-  count: 6
-}, {
-  value: AnimationLength.Hours12,
-  text: 'timeslider-hour',
-  count: 12
-}, {
-  value: AnimationLength.Hours24,
-  text: 'timeslider-hour',
-  count: 24
-}].sort(function (ta, tb) {
-  return tb.value - ta.value;
-});
-var AnimationLengthButton = function AnimationLengthButton(_ref) {
-  var _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;
-  var _useTimesliderTransla = useTimesliderTranslation(),
-    t = _useTimesliderTransla.t;
-  var translatedMarks = marks$2.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 == null || onChangeAnimationLength(newLength);
-  };
-  var _useState = useState(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return jsx(TimeSliderMenu, {
-    allOptionsDisabled: disabled,
-    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 _modeTranslationKey;
-var AnimationLengthMode;
-(function (AnimationLengthMode) {
-  AnimationLengthMode["Auto"] = "auto";
-  AnimationLengthMode["Now"] = "now";
-  AnimationLengthMode["RecurringPeriod"] = "recurringPeriod";
-  AnimationLengthMode["ReferenceTime"] = "referenceTime";
-  AnimationLengthMode["Exact"] = "exact";
-})(AnimationLengthMode || (AnimationLengthMode = {}));
-var timeUnits = ['years', 'months', 'weeks', 'days', 'hours', 'minutes'];
-var defaultStartOffset = {
-  value: 0,
-  unit: 'hours'
-};
-var defaultEndOffset = {
-  value: 2,
-  unit: 'hours'
-};
-var defaultOffsetSelections = {
-  startOffset: defaultStartOffset,
-  endOffset: defaultEndOffset
-};
-var unitTranslationKey = {
-  years: 'timeslider-unit-years',
-  months: 'timeslider-unit-months',
-  weeks: 'timeslider-unit-weeks',
-  days: 'timeslider-unit-days',
-  hours: 'timeslider-unit-hours',
-  minutes: 'timeslider-unit-minutes'
-};
-var shortUnitTranslationKey = {
-  years: 'timeslider-unit-short-years',
-  months: 'timeslider-unit-short-months',
-  weeks: 'timeslider-unit-short-weeks',
-  days: 'timeslider-unit-short-days',
-  hours: 'timeslider-unit-short-hours',
-  minutes: 'timeslider-unit-short-minutes'
-};
-var modeTranslationKey = (_modeTranslationKey = {}, _modeTranslationKey[AnimationLengthMode.Auto] = 'timeslider-animation-length-auto', _modeTranslationKey[AnimationLengthMode.Now] = 'timeslider-animation-length-now', _modeTranslationKey[AnimationLengthMode.RecurringPeriod] = 'timeslider-animation-length-recurring-period', _modeTranslationKey[AnimationLengthMode.ReferenceTime] = 'timeslider-animation-length-reference-time', _modeTranslationKey[AnimationLengthMode.Exact] = 'timeslider-animation-length-exact', _modeTranslationKey);
-var offsetToDuration = function offsetToDuration(_ref) {
-  var _ref2;
-  var value = _ref.value,
-    unit = _ref.unit;
-  return _ref2 = {}, _ref2[unit] = value, _ref2;
-};
-var toAnimationTime = function toAnimationTime(date) {
-  return dateUtils.dateToString(date, dateUtils.DATE_FORMAT_UTC);
-};
-/* The clock in the menu offers minutes in these increments, so an anchor must land on one. */
-var ANCHOR_MINUTE_STEP = 5;
-var padded = function padded(value) {
-  return String(value).padStart(2, '0');
-};
-/**
- * Reads the UTC fields directly: `dateUtils.dateToString` formats a local twin of the
- * date, which a DST gap shifts by an hour.
- */
-var toAnchorTime = function toAnchorTime(date) {
-  var minutes = date.getUTCMinutes();
-  return padded(date.getUTCHours()) + ":" + padded(minutes - minutes % ANCHOR_MINUTE_STEP);
-};
-/* Modes that count their offsets from an anchor instant rather than a stored range. */
-var anchoredModes = [AnimationLengthMode.Now, AnimationLengthMode.RecurringPeriod, AnimationLengthMode.ReferenceTime];
-var isAnchoredMode = function isAnchoredMode(mode) {
-  return !!mode && anchoredModes.includes(mode);
-};
-/** Narrows the mode so the compiler can require an anchor time alongside it. */
-var isRecurringPeriodMode = function isRecurringPeriodMode(mode) {
-  return mode === AnimationLengthMode.RecurringPeriod;
-};
-var ANCHOR_TIME_PATTERN = /^([01]\d|2[0-3]):[0-5]\d$/;
-var isValidAnchorTime = function isValidAnchorTime(anchorTime) {
-  return !!anchorTime && ANCHOR_TIME_PATTERN.test(anchorTime);
-};
-var selectionsForMode = function selectionsForMode(setting) {
-  if (setting.mode === AnimationLengthMode.Now) {
-    return setting.now;
-  }
-  if (setting.mode === AnimationLengthMode.RecurringPeriod) {
-    return setting.recurringPeriod;
-  }
-  if (setting.mode === AnimationLengthMode.ReferenceTime) {
-    return setting.referenceTime;
-  }
-  return defaultOffsetSelections;
-};
-/** The offsets of whichever mode is selected; the modes without offsets use the defaults. */
-var activeOffsets = function activeOffsets(setting) {
-  var _selectionsForMode = selectionsForMode(setting),
-    startOffset = _selectionsForMode.startOffset,
-    endOffset = _selectionsForMode.endOffset;
-  return {
-    startOffset: startOffset,
-    endOffset: endOffset
-  };
-};
-var defaultRecurringPeriodSelections = function defaultRecurringPeriodSelections(now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  return Object.assign({}, defaultOffsetSelections, {
-    anchorTime: toAnchorTime(now)
-  });
-};
-/** Presets carry settings the compiler cannot vouch for, so the selected mode is given the slice it needs. */
-var withModeSelections = function withModeSelections(setting, now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  if (setting.mode === AnimationLengthMode.Now) {
-    return Object.assign({}, setting, {
-      now: Object.assign({}, defaultOffsetSelections, setting.now)
-    });
-  }
-  if (setting.mode === AnimationLengthMode.RecurringPeriod) {
-    var merged = Object.assign({}, defaultRecurringPeriodSelections(now), setting.recurringPeriod);
-    return Object.assign({}, setting, {
-      recurringPeriod: isValidAnchorTime(merged.anchorTime) ? merged : Object.assign({}, merged, {
-        anchorTime: toAnchorTime(now)
-      })
-    });
-  }
-  if (setting.mode === AnimationLengthMode.Exact) {
-    return Object.assign({}, setting, {
-      exact: Object.assign({}, defaultExactSelections(now), setting.exact)
-    });
-  }
-  return setting;
-};
-/**
- * A recurring period anchors on its time of day within the current UTC date, so the
- * window it resolves rolls onto the next day once the clock passes midnight.
- */
-var resolveAnchorInstant = function resolveAnchorInstant(setting, now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  if (setting.mode !== AnimationLengthMode.RecurringPeriod) {
-    return now;
-  }
-  var _setting$recurringPer = setting.recurringPeriod.anchorTime.split(':').map(Number),
-    hours = _setting$recurringPer[0],
-    minutes = _setting$recurringPer[1];
-  return dateUtils.set(now, {
-    hours: hours,
-    minutes: minutes,
-    seconds: 0,
-    milliseconds: 0
-  });
-};
-/**
- * Offsets are signed: negative lands before the anchor, positive after. They are
- * applied as calendar durations, so "+ 1 month" lands on the same day of the next
- * month rather than a fixed number of days later.
- */
-var resolveAnimationRange = function resolveAnimationRange(setting, now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  var _activeOffsets = activeOffsets(setting),
-    startOffset = _activeOffsets.startOffset,
-    endOffset = _activeOffsets.endOffset;
-  var anchor = resolveAnchorInstant(setting, now);
-  return {
-    animationStartTime: toAnimationTime(dateUtils.add(anchor, offsetToDuration(startOffset))),
-    animationEndTime: toAnimationTime(dateUtils.add(anchor, offsetToDuration(endOffset)))
-  };
-};
-/** Offsets can use different units, so validity is decided on the resolved instants. */
-/** Exact names its range outright; every other mode resolves one from its offsets. */
-var settingRange = function settingRange(setting, now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  return setting.mode === AnimationLengthMode.Exact ? setting.exact : resolveAnimationRange(setting, now);
-};
-/* Exact times are picked to the minute, so seconds must not decide validity. */
-var isValidAnimationLength = function isValidAnimationLength(setting, now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  var _settingRange = settingRange(setting, now),
-    animationStartTime = _settingRange.animationStartTime,
-    animationEndTime = _settingRange.animationEndTime;
-  return dateUtils.isBefore(dateUtils.utc(animationStartTime).setSeconds(0, 0), dateUtils.utc(animationEndTime).setSeconds(0, 0));
-};
-/** Frames the animation may hold; the range is expanded one entry per time step. */
-var MAX_ANIMATION_STEPS = 10000;
-/**
- * The cost of an animation is its span divided by the time step, so a wide range
- * is affordable with a coarse step and unaffordable with a fine one.
- */
-var isWithinAnimationStepLimit = function isWithinAnimationStepLimit(setting, timeStepInMinutes, now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  if (!timeStepInMinutes) {
-    return true;
-  }
-  var _settingRange2 = settingRange(setting, now),
-    animationStartTime = _settingRange2.animationStartTime,
-    animationEndTime = _settingRange2.animationEndTime;
-  var spanInMinutes = dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime));
-  return Math.abs(spanInMinutes) / timeStepInMinutes <= MAX_ANIMATION_STEPS;
-};
-/* Shares the animation-time format, so a typed and a dragged range serialise alike. */
-var toExactAnimationTime = toAnimationTime;
-/** A day either side of now, so an exact window opens on something usable. */
-var defaultExactSelections = function defaultExactSelections(now) {
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  var wholeMinute = dateUtils.set(now, {
-    seconds: 0,
-    milliseconds: 0
-  });
-  return {
-    animationStartTime: toExactAnimationTime(dateUtils.sub(wholeMinute, {
-      days: 1
-    })),
-    animationEndTime: toExactAnimationTime(dateUtils.add(wholeMinute, {
-      days: 1
-    }))
-  };
-};
-/** Starts Exact from whatever range is already on screen, falling back to the defaults. */
-var exactAnimationLengthFrom = function exactAnimationLengthFrom(_ref3, now) {
-  var animationStartTime = _ref3.animationStartTime,
-    animationEndTime = _ref3.animationEndTime;
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  return {
-    mode: AnimationLengthMode.Exact,
-    exact: animationStartTime && animationEndTime ? {
-      animationStartTime: animationStartTime,
-      animationEndTime: animationEndTime
-    } : defaultExactSelections(now)
-  };
-};
-var getOffsetFromTime = function getOffsetFromTime(time, anchorTime) {
-  var relativeTime = dateUtils.utc(time);
-  var value = dateUtils.differenceInMinutes(relativeTime, anchorTime);
-  return {
-    unit: 'minutes',
-    value: value
-  };
-};
-var getAnimationLengthFromRange = function getAnimationLengthFromRange(mode, _ref4, now) {
-  var animationStartTime = _ref4.animationStartTime,
-    animationEndTime = _ref4.animationEndTime;
-  if (now === void 0) {
-    now = dateUtils.utc();
-  }
-  switch (mode) {
-    case AnimationLengthMode.Now:
-      {
-        return {
-          mode: mode,
-          now: {
-            startOffset: getOffsetFromTime(animationStartTime, now),
-            endOffset: getOffsetFromTime(animationEndTime, now)
-          }
-        };
-      }
-    case AnimationLengthMode.RecurringPeriod:
-      {
-        var today = dateUtils.startOfDayUTC(now);
-        return {
-          mode: mode,
-          recurringPeriod: {
-            anchorTime: '00:00',
-            startOffset: getOffsetFromTime(animationStartTime, today),
-            endOffset: getOffsetFromTime(animationEndTime, today)
-          }
-        };
+      },
+      onMouseOver: function onMouseOver() {
+        return setIsMouseOverCanvas(true);
+      },
+      sx: {
+        position: 'absolute',
+        top: '-40px',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: TIME_SLIDER_LEGEND_HEIGHT + " + 40px",
+        zIndex: isMouseOverCanvas ? 100 : 0
       }
-    case AnimationLengthMode.Exact:
-    default:
-      return exactAnimationLengthFrom({
-        animationStartTime: animationStartTime,
-        animationEndTime: animationEndTime
-      });
-  }
+    })]
+  });
 };
 
 var styles$2 = {
@@ -2834,14 +2603,6 @@ var AnchorTimeField = function AnchorTimeField(_ref) {
 
 var selectableModes = [AnimationLengthMode.Auto, AnimationLengthMode.Now, AnimationLengthMode.RecurringPeriod, AnimationLengthMode.ReferenceTime, AnimationLengthMode.Exact];
 var OFFSET_MAX_DIGITS = 3;
-var maxOffsetByUnit = {
-  minutes: 999,
-  hours: 999,
-  days: 365,
-  weeks: 99,
-  months: 99,
-  years: 99
-};
 /* One line of MuiFormHelperText: 20px line box plus its 3px top margin. */
 var RESERVED_ERROR_HEIGHT = '23px';
 /* Every row splits the panel the same way, so the fields line up in two columns. */
@@ -2924,6 +2685,7 @@ var AnimationLengthMenu = function AnimationLengthMenu(_ref) {
     referenceTimeFromLayer = _ref.referenceTimeFromLayer;
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
+  var modeGroupLabelId = React.useId();
   /* Spreading the setting keeps every other mode's selections while this one changes. */
   var changeMode = function changeMode(mode) {
     if (isRecurringPeriodMode(mode)) {
@@ -3002,11 +2764,10 @@ var AnimationLengthMenu = function AnimationLengthMenu(_ref) {
   var asTimeOffset = function asTimeOffset(_ref2) {
     var value = _ref2.value,
       unit = _ref2.unit;
-    var maxOffset = maxOffsetByUnit[unit];
-    return {
-      value: Math.max(-maxOffset, Math.min(maxOffset, value)),
+    return clampOffset({
+      value: value,
       unit: unit
-    };
+    });
   };
   /* One unit spans the whole window, so picking it on either field moves both. */
   var changeStartOffset = function changeStartOffset(offset, isStep) {
@@ -3047,12 +2808,6 @@ var AnimationLengthMenu = function AnimationLengthMenu(_ref) {
   var asDisplayTime = function asDisplayTime(time) {
     return time ? "" + dateUtils.dateToString(dateUtils.utc(time), dateUtils.DATE_FORMAT_DATEPICKER, true) : '';
   };
-  /* The surrounding Menu dismisses itself on Tab; keep it open so focus can reach the next field. */
-  var keepMenuOpenOnTab = function keepMenuOpenOnTab(event) {
-    if (event.key === 'Tab') {
-      event.stopPropagation();
-    }
-  };
   var isSteppingExactTimeRef = React.useRef(false);
   var handleExactTimeKeyDown = function handleExactTimeKeyDown(event) {
     isSteppingExactTimeRef.current = event.key === 'ArrowUp' || event.key === 'ArrowDown';
@@ -3083,12 +2838,13 @@ var AnimationLengthMenu = function AnimationLengthMenu(_ref) {
     }), isStep);
   };
   return jsxs(Box, {
-    onKeyDown: keepMenuOpenOnTab,
     sx: styles$1.menu,
     children: [jsx(Typography, {
+      id: modeGroupLabelId,
       sx: styles$1.sectionTitle,
       children: t('timeslider-animation-length')
     }), jsx(RadioGroup, {
+      "aria-labelledby": modeGroupLabelId,
       onChange: function onChange(event) {
         return changeMode(event.target.value);
       },
@@ -3330,6 +3086,8 @@ var AnimationLengthPanel = function AnimationLengthPanel(_ref) {
       event.stopPropagation();
     },
     children: [jsxs(CustomIconButton, {
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
       "aria-label": t('timeslider-animation-length'),
       "data-testid": "animationLengthPanelButton",
       isSelected: true,
@@ -3347,7 +3105,7 @@ var AnimationLengthPanel = function AnimationLengthPanel(_ref) {
         sx: styles.buttonLabel,
         children: buttonLabel
       })]
-    }), !!anchorRef && jsx(Menu, {
+    }), !!anchorRef && jsx(Popover, {
       anchorEl: anchorRef,
       anchorOrigin: {
         vertical: -15,
@@ -3362,6 +3120,10 @@ var AnimationLengthPanel = function AnimationLengthPanel(_ref) {
           sx: {
             backgroundColor: 'transparent'
           }
+        },
+        paper: {
+          role: 'dialog',
+          'aria-label': t('timeslider-animation-length')
         }
       },
       transformOrigin: {
@@ -3506,6 +3268,225 @@ var ControlButtons = function ControlButtons(_ref) {
   });
 };
 
+var THROTTLE_WAIT_TIME = 300; // [ms]
+var THROTTLE_OPTIONS = {
+  trailing: false // Invoke function when called, but not more than once every <THROTTLE_WAIT_TIME>.
+};
+var TimeSliderMenu = function TimeSliderMenu(_ref) {
+  var marks = _ref.marks,
+    value = _ref.value,
+    allOptionsDisabled = _ref.allOptionsDisabled,
+    isAutoDisabled = _ref.isAutoDisabled,
+    handleAutoClick = _ref.handleAutoClick,
+    isAutoSelected = _ref.isAutoSelected,
+    title = _ref.title,
+    icon = _ref.icon,
+    _ref$onChangeSliderVa = _ref.onChangeSliderValue,
+    onChangeSliderValue = _ref$onChangeSliderVa === void 0 ? function () {} : _ref$onChangeSliderVa,
+    onSelectSliderValue = _ref.onSelectSliderValue,
+    displayCurrentLength = _ref.displayCurrentLength,
+    _ref$disbleUserSetDur = _ref.disbleUserSetDuration,
+    disbleUserSetDuration = _ref$disbleUserSetDur === void 0 ? true : _ref$disbleUserSetDur,
+    customLengthSelector = _ref.customLengthSelector,
+    _ref$setOpen = _ref.setOpen,
+    setOpen = _ref$setOpen === void 0 ? function () {} : _ref$setOpen,
+    _ref$customFieldHeade = _ref.customFieldHeader,
+    customFieldHeader = _ref$customFieldHeade === void 0 ? 'timeslider-length' : _ref$customFieldHeade,
+    open = _ref.open;
+  var currentMarkIndex = marks.findIndex(function (mark) {
+    return mark.value === value;
+  });
+  var currentMark = marks[currentMarkIndex];
+  var _React$useState = React.useState(null),
+    anchorRef = _React$useState[0],
+    setAnchorRef = _React$useState[1];
+  var _useTimesliderTransla = useTimesliderTranslation(),
+    t = _useTimesliderTransla.t;
+  var _useState = useState(false),
+    displayLengthInputField = _useState[0],
+    setDisplayLengthInputField = _useState[1];
+  React.useEffect(function () {
+    if (!open && displayLengthInputField) {
+      setDisplayLengthInputField(false);
+    }
+  }, [displayLengthInputField, open]);
+  var getDisplayTextFromMark = function getDisplayTextFromMark(mark) {
+    if (!(mark != null && mark.label)) {
+      return '';
+    }
+    var parts = t(mark.label).split(' ');
+    if (parts.length > 1) {
+      return parts[0] + parts.slice(1).join(' ');
+    }
+    return parts.join('');
+  };
+  var buttonText = function buttonText(value, displayCurrentLength, currentMark) {
+    if (displayCurrentLength) {
+      if (!Number.isInteger(value)) {
+        return value + "m";
+      }
+      return minutesToDescribedDuration(value);
+    }
+    if (currentMark != null && currentMark.label) {
+      return getDisplayTextFromMark(currentMark);
+    }
+    return '';
+  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var throttledScroll = React.useCallback(throttle(function (newValue) {
+    onChangeSliderValue(newValue);
+  }, THROTTLE_WAIT_TIME, THROTTLE_OPTIONS), []);
+  var onWheel = React.useCallback(function (event) {
+    var direction = event.deltaY < 0 ? 1 : -1;
+    var newValue = marks[Math.min(Math.max(currentMarkIndex - direction, 0), marks.length - 1)];
+    throttledScroll(newValue.value);
+  }, [currentMarkIndex, marks, throttledScroll]);
+  var buttonDisplayText = buttonText(value, displayCurrentLength, currentMark);
+  var menuDisplayValue = !Number.isInteger(value) ? value + "m" : minutesToDescribedDuration(value);
+  var displayValue = isAutoSelected ? "A: " + buttonDisplayText : buttonDisplayText;
+  return jsxs(Box, {
+    onKeyDown: function onKeyDown(event) {
+      event.stopPropagation();
+    },
+    children: [jsxs(CustomIconButton, {
+      isSelected: true,
+      onClick: function onClick() {
+        setOpen(true);
+      },
+      onWheel: onWheel,
+      ref: setAnchorRef,
+      sx: {
+        padding: '0px',
+        paddingRight: '12px',
+        width: '100%!important',
+        minWidth: '64px',
+        justifyContent: 'space-between'
+      },
+      tooltipTitle: title,
+      variant: "tool",
+      children: [icon, jsx(Typography, {
+        sx: {
+          fontSize: 12,
+          fontWeight: 400,
+          textTransform: 'none'
+        },
+        children: displayValue
+      })]
+    }), !!anchorRef && jsxs(Menu, {
+      anchorEl: anchorRef,
+      anchorOrigin: {
+        vertical: -15,
+        horizontal: 'center'
+      },
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      open: open,
+      slotProps: {
+        backdrop: {
+          sx: {
+            backgroundColor: 'transparent'
+          }
+        }
+      },
+      transformOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      children: [jsx(MenuItem, {
+        disabled: true,
+        sx: {
+          fontSize: '12px',
+          opacity: 0.67,
+          padding: '0px 12px',
+          '&.MuiMenuItem-root': {
+            minHeight: '30px!important',
+            minWidth: 150
+          }
+        },
+        children: title
+      }), marks.map(function (mark) {
+        var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value;
+        return jsx(MenuItem, {
+          disabled: allOptionsDisabled,
+          onClick: function onClick() {
+            if (!isSelected) {
+              onChangeSliderValue(mark.value);
+            }
+            onSelectSliderValue == null || onSelectSliderValue(mark.value);
+            setOpen(false);
+          },
+          selected: !!isSelected && !displayLengthInputField,
+          children: mark.label || mark.text
+        }, mark.value);
+      }), !!handleAutoClick && jsx(MenuItem, {
+        disabled: allOptionsDisabled || isAutoDisabled,
+        onClick: function onClick() {
+          handleAutoClick();
+          setOpen(false);
+        },
+        selected: isAutoSelected,
+        children: t('timeslider-auto')
+      }), !!displayCurrentLength && jsxs(MenuItem, {
+        disabled: disbleUserSetDuration,
+        onClick: function onClick() {
+          return setDisplayLengthInputField(true);
+        },
+        sx: {
+          maxWidth: '175px'
+        },
+        children: [!!displayLengthInputField && customLengthSelector, !displayLengthInputField && jsxs(Box, {
+          sx: {
+            flexDirection: 'column',
+            display: 'flex',
+            flexGrow: 1
+          },
+          children: [jsx(CardHeader, {
+            slotProps: {
+              title: {
+                sx: {
+                  fontSize: 12
+                }
+              }
+            },
+            sx: {
+              height: 2,
+              padding: 0,
+              color: 'geowebColors.greys.accessible'
+            },
+            title: t(customFieldHeader)
+          }), jsxs(Box, {
+            sx: {
+              flexDirection: 'row',
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexGrow: 1,
+              paddingTop: 0.5
+            },
+            children: [jsx(Typography, {
+              sx: {
+                fontSize: 14,
+                textTransform: 'none',
+                lineHeight: 2
+              },
+              children: menuDisplayValue
+            }), jsx(CustomTooltip, {
+              title: t('timeslider-edit'),
+              children: jsx("span", {
+                children: jsx(CustomIconButton, {
+                  "aria-label": "edit animation option",
+                  "data-testid": "editAnimationOption",
+                  children: jsx(Edit, {})
+                })
+              })
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
+};
+
 var SpeedButton = function SpeedButton(_ref) {
   var animationDelay = _ref.animationDelay,
     setMapAnimationDelay = _ref.setMapAnimationDelay;
@@ -3975,9 +3956,11 @@ var OptionsMenu = function OptionsMenu(_ref) {
       size: {
         xs: 'auto'
       },
-      children: animationLengthBtn || jsx(AnimationLengthButton, {
-        onChangeAnimationLength: function onChangeAnimationLength() {},
-        toggleAnimationLengthAuto: function toggleAnimationLengthAuto() {}
+      children: animationLengthBtn || jsx(AnimationLengthPanel, {
+        onChange: function onChange() {},
+        setting: {
+          mode: AnimationLengthMode.Auto
+        }
       })
     }), jsx(Grid, {
       size: {
@@ -4696,4 +4679,4 @@ var DemoWrapper = function DemoWrapper(_ref2) {
   });
 };
 
-export { ANCHOR_MINUTE_STEP, AUTO_MOVE_AREA_PADDING, AnchorTimeField, AnimationLength, AnimationLengthButton, AnimationLengthMenu, AnimationLengthMode, AnimationLengthPanel, AutoUpdateButton, _BackwardForwardStepButton as BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, MAX_ANIMATION_STEPS, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, _TimeStepButton as TimeStepButton, activeOffsets, anchorTimeToPickerDate, asDisplayTime, calculateMouseTimeAndCheckBounds, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultEndOffset, defaultExactSelections, defaultOffsetSelections, defaultRecurringPeriodSelections, defaultSecondsPerPx, defaultStartOffset, defaultTimeSpan, defaultTimeStep, exactAnimationLengthFrom, getAnimationLengthFromRange, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isAnchoredMode, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRecurringPeriodMode, isRightAnimationIconArea, isSelectedTimeIconArea, isValidAnchorTime, isValidAnimationLength, isWithinAnimationStepLimit, marks$1 as marks, minutesToDescribedDuration, modeTranslationKey, moveRelativeToTimePoint, moveSelectedTimePx, onsetNewDateDebounced, pickerDateToAnchorTime, pixelToTimestamp, resolveAnchorInstant, resolveAnimationRange, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, secondsPerPxValues, setNextTimeStep, setPreviousTimeStep, settingRange, shortUnitTranslationKey, spanToScale, speedFactors, timeBoxGeom, timeSliderLegendDefaultProps, timeSliderUtils, timeUnits, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, toAnchorTime, toExactAnimationTime, unitTranslationKey, useCanvasTarget, withModeSelections };
+export { ANCHOR_MINUTE_STEP, AUTO_MOVE_AREA_PADDING, AnchorTimeField, AnimationLengthMenu, AnimationLengthMode, AnimationLengthPanel, AutoUpdateButton, _BackwardForwardStepButton as BackwardForwardStepButton, ControlButtons, DRAG_AREA_WIDTH, DemoWrapper, HideSliderButton, MAX_ANIMATION_STEPS, NowButton, OptionsMenu, OptionsMenuButton, PlayButton, Scale, SpeedButton, TIME_SLIDER_LEGEND_HEIGHT, TIME_SLIDER_NAMESPACE, TimeInMinutes, TimeSlider, TimeSliderButtons, TimeSliderCurrentTimeBox, TimeSliderLegend, TimeSliderMenu, TimeSpanButton, _TimeStepButton as TimeStepButton, activeEditUnit, activeOffsets, anchorInstantFor, anchorTimeToPickerDate, asDisplayTime, clampOffset, convertStringTimeToUnix, defaultAnimationDelayAtStart, defaultDelay, defaultEndOffset, defaultExactSelections, defaultOffsetSelections, defaultRecurringPeriodSelections, defaultSecondsPerPx, defaultStartOffset, defaultTimeSpan, defaultTimeStep, exactAnimationLengthFrom, exceedsAnimationStepLimit, getAnimationLengthFromRange, getAutoMoveAreaWidth, getFilteredTime, getFundamentalScale, getLargestTimeUnit, getNewCenterOfFixedPointZoom, getPixelsBetweenViewportAndTimesliderOnLeft, getPositions, getScaleFromSpan, getSpeedDelay, getTimeBoxWidth, getTimeSliderLegendElement, getTimeSliderLegendId, handleSetNowEvent, isAnchoredMode, isDraggingEndWithinBounds, isDraggingStartWithinBounds, isInsideAnimationArea, isLeftAnimationIconArea, isRecurringPeriodMode, isRightAnimationIconArea, isSelectedTimeIconArea, isValidAnchorTime, isValidAnimationLength, isWithinAnimationStepLimit, marks$1 as marks, maxOffsetByUnit, minutesToDescribedDuration, modeTranslationKey, moveSelectedTimePx, offsetForInstant, onsetNewDateDebounced, pickerDateToAnchorTime, pixelToTimestamp, resolveAnchorInstant, resolveAnimationRange, roundWithTimeStep, scaleToSecondsPerPx, scalingCoefficient, secondsPerPxFromCanvasWidth, secondsPerPxToScale, setNextTimeStep, setPreviousTimeStep, settingRange, shortUnitTranslationKey, snapInstantToOffsetGrid, spanToScale, speedFactors, timeBoxGeom, timeSliderUtils, timeUnits, timeValues, timesliderTranslations, timestampToPixel, timestampToPixelEdges, toAnchorTime, toExactAnimationTime, unitTranslationKey, useCanvasTarget, withDraggedRange, withModeSelections };