@opengeoweb/time-slider 19.3.0 → 19.5.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Grid, useTheme, Box, Typography, Menu, MenuItem, CardHeader, FormControl, TextField, Select, Popper, Paper, Stack, InputAdornment, ClickAwayListener } from '@mui/material';
 import React, { useState, useRef, useEffect, useCallback, useContext, useMemo, createElement } from 'react';
-import { dateUtils, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, renderCounter, CustomToggleButton } from '@opengeoweb/shared';
+import { dateUtils, isTargetInteractiveInput, isDialogFocused, safelyInitI18nForTestsAndStories, CustomIconButton, CustomTooltip, CanvasComponent, renderCounter, CustomToggleButton } from '@opengeoweb/shared';
 import { debounce, throttle } from 'lodash';
 import { ChevronDown, ChevronUp, dragHandlePath, Edit, Animation, AutoUpdateActive, AutoUpdateInActive, StepForward, StepBackward, Now, Pause, Play, Speed, Clock, FastForward, Options, CalendarToday, ThemeWrapper, lightTheme, darkTheme } from '@opengeoweb/theme';
 import i18n from 'i18next';
@@ -702,7 +702,7 @@ var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIs
   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) {
+      if (!isTargetInteractiveInput(target) && !isDialogFocused() && (event.key === 't' || event.key === 'T') && mapIsActive) {
         onToggleTimeSlider(!isVisible);
       }
     };
@@ -715,6 +715,10 @@ var useToggleTimesliderVisibility = function useToggleTimesliderVisibility(mapIs
 var useMoveTimeWithKeyboard = function useMoveTimeWithKeyboard(mapIsActive, timeStep, dataStartTime, dataEndTime, onSetNewDate, onSetCenterTime, selectedTime) {
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
+      var target = event.target;
+      if (isTargetInteractiveInput(target) || isDialogFocused()) {
+        return;
+      }
       if (event.key === 'Home' && mapIsActive) {
         handleSetNowEvent(timeStep, dataStartTime, dataEndTime, dateUtils.unix(dateUtils.utc()), onSetNewDate, onSetCenterTime);
       }
@@ -2081,16 +2085,25 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       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) {
-      var parts = t(currentMark.label).split(' ');
-      if (parts.length > 1) {
-        return parts[0] + parts.slice(1).join(' ');
-      }
-      return parts.join('');
+    if (currentMark != null && currentMark.label) {
+      return getDisplayTextFromMark(currentMark);
     }
     return '';
   };
@@ -2103,6 +2116,9 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     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();
@@ -2129,7 +2145,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
           fontWeight: 400,
           textTransform: 'none'
         },
-        children: buttonText(value, displayCurrentLength, currentMark)
+        children: displayValue
       })]
     }), !!anchorRef && jsxs(Menu, {
       anchorEl: anchorRef,
@@ -2165,7 +2181,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
         },
         children: title
       }), marks.map(function (mark) {
-        var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value && !isAutoSelected;
+        var isSelected = (currentMark == null ? void 0 : currentMark.value) === mark.value;
         return jsx(MenuItem, {
           disabled: allOptionsDisabled,
           onClick: function onClick() {
@@ -2227,7 +2243,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
                 textTransform: 'none',
                 lineHeight: 2
               },
-              children: minutesToDescribedDuration(value)
+              children: menuDisplayValue
             }), jsx(CustomTooltip, {
               title: t('timeslider-edit'),
               children: jsx("span", {
@@ -2714,7 +2730,7 @@ var useTimeStepShortcutListener = function useTimeStepShortcutListener(enabled,
     }
     var handleKeyDown = function handleKeyDown(event) {
       var target = event.target;
-      if ((target == null ? void 0 : target.tagName) === 'INPUT' || (target == null ? void 0 : target.tagName) === 'TEXTAREA' || target != null && target.isContentEditable) {
+      if (isTargetInteractiveInput(target) || isDialogFocused()) {
         return;
       }
       var direction = getTimeStepShortcutDirection(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/time-slider",
-  "version": "19.3.0",
+  "version": "19.5.0",
   "description": "GeoWeb time-slider library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {