@opengeoweb/time-slider 19.5.1 → 19.6.0

package/dist/index.esm.js

@@ -2059,6 +2059,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
     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,
@@ -2188,6 +2189,7 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
             if (!isSelected) {
               onChangeSliderValue(mark.value);
             }
+            onSelectSliderValue == null || onSelectSliderValue(mark.value);
             setOpen(false);
           },
           selected: !!isSelected && !displayLengthInputField,
@@ -2715,6 +2717,16 @@ var getTimeStepShortcutDirection = function getTimeStepShortcutDirection(event)
   }
   return null;
 };
+var focusAdjacentMenuItem = function focusAdjacentMenuItem(target, direction) {
+  var _target$parentElement, _target$parentElement2, _menuItems$nextIndex;
+  if (!(target instanceof HTMLElement) || target.getAttribute('role') !== 'menuitem') {
+    return;
+  }
+  var menuItems = Array.from((_target$parentElement = (_target$parentElement2 = target.parentElement) == null ? void 0 : _target$parentElement2.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')) != null ? _target$parentElement : []);
+  var currentIndex = menuItems.indexOf(target);
+  var nextIndex = currentIndex + (direction === 'up' ? -1 : 1);
+  (_menuItems$nextIndex = menuItems[nextIndex]) == null || _menuItems$nextIndex.focus();
+};
 var TimeStepShortcutContext = /*#__PURE__*/React.createContext(null);
 // Listens for the time-step keyboard shortcut on document (capture phase, so it
 // runs before any element-level handlers that may stopPropagation). Ignores
@@ -2738,7 +2750,9 @@ var useTimeStepShortcutListener = function useTimeStepShortcutListener(enabled,
         return;
       }
       event.preventDefault();
+      event.stopPropagation();
       onShortcutRef.current(direction);
+      focusAdjacentMenuItem(target, direction);
     };
     document.addEventListener('keydown', handleKeyDown, {
       capture: true
@@ -2880,30 +2894,14 @@ var _TimeStepButton = function TimeStepButton(_ref) {
   var _useState = useState(isOpenByDefault),
     open = _useState[0],
     setOpen = _useState[1];
-  var stepToAdjacentMark = useCallback(function (direction) {
-    var _marks$nextIndex;
-    var currentIndex = marks.findIndex(function (mark) {
-      return mark.value === timeStep;
-    });
-    if (currentIndex === -1) {
-      return;
-    }
-    var indexDelta = direction === 'up' ? -1 : 1;
-    var nextIndex = Math.min(Math.max(currentIndex + indexDelta, 0), marks.length - 1);
-    var nextValue = (_marks$nextIndex = marks[nextIndex]) == null ? void 0 : _marks$nextIndex.value;
-    if (nextValue !== undefined && nextValue !== timeStep) {
-      onMenuItemClick(nextValue);
-    }
-  }, [timeStep, onMenuItemClick]);
   var shortcutContext = useContext(TimeStepShortcutContext);
   useEffect(function () {
     if (!(shortcutContext != null && shortcutContext.pendingDirection)) {
       return;
     }
     setOpen(true);
-    stepToAdjacentMark(shortcutContext.pendingDirection);
     shortcutContext.consume();
-  }, [shortcutContext, stepToAdjacentMark]);
+  }, [shortcutContext]);
   return jsx(TimeSliderMenu, {
     allOptionsDisabled: disabled,
     displayCurrentLength: true,
@@ -2915,6 +2913,7 @@ var _TimeStepButton = function TimeStepButton(_ref) {
     isAutoSelected: isTimestepAuto,
     marks: translatedMarks,
     onChangeSliderValue: onMenuItemClick,
+    onSelectSliderValue: shortcutContext == null ? void 0 : shortcutContext.closeOptionsMenu,
     open: open,
     setOpen: setOpen,
     title: t('timeslider-time-step'),
@@ -2986,6 +2985,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
   var _useState3 = useState(null),
     pendingDirection = _useState3[0],
     setPendingDirection = _useState3[1];
+  var openedByShortcutRef = useRef(false);
   var _useTimesliderTransla = useTimesliderTranslation(),
     t = _useTimesliderTransla.t;
   useEffect(function () {
@@ -2994,12 +2994,24 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
     }
   }, [anchorEl, isOpenByDefault]);
   useTimeStepShortcutListener(enableKeyboardShortcut, function (direction) {
-    setOpen(true);
+    setOpen(function (wasOpen) {
+      if (!wasOpen) {
+        openedByShortcutRef.current = true;
+      }
+      return true;
+    });
     setPendingDirection(direction);
   });
   var shortcutContextValue = useMemo(function () {
     return {
       pendingDirection: pendingDirection,
+      closeOptionsMenu: function closeOptionsMenu() {
+        if (openedByShortcutRef.current) {
+          setOpen(false);
+        }
+        openedByShortcutRef.current = false;
+        setPendingDirection(null);
+      },
       consume: function consume() {
         return setPendingDirection(null);
       }
@@ -3011,6 +3023,7 @@ var OptionsMenuButton = function OptionsMenuButton(_ref) {
       "data-testid": "optionsMenuButton",
       isSelected: open,
       onClick: function onClick() {
+        openedByShortcutRef.current = false;
         setOpen(!open);
       },
       ref: function ref(_ref2) {

package/dist/src/lib/components/TimeSliderButtons/OptionsMenuButton/optionsMenuShortcut.d.ts

@@ -3,6 +3,7 @@ export type TimeStepDirection = 'up' | 'down';
 export declare const getTimeStepShortcutDirection: (event: KeyboardEvent | React.KeyboardEvent) => TimeStepDirection | null;
 export interface TimeStepShortcutContextValue {
     pendingDirection: TimeStepDirection | null;
+    closeOptionsMenu: () => void;
     consume: () => void;
 }
 export declare const TimeStepShortcutContext: React.Context<TimeStepShortcutContextValue | null>;

package/dist/src/lib/components/TimeSliderButtons/TimeSliderMenu/TimeSliderMenu.d.ts

@@ -14,6 +14,7 @@ export interface TimeSliderMenuProps {
     handleAutoClick?: () => void;
     isAutoSelected?: boolean;
     onChangeSliderValue?: (markValue: number) => void;
+    onSelectSliderValue?: (markValue: number) => void;
     setOpen: (display: boolean) => void;
     open: boolean;
     displayCurrentLength?: boolean;
@@ -21,4 +22,4 @@ export interface TimeSliderMenuProps {
     customLengthSelector?: React.ReactNode;
     customFieldHeader?: string;
 }
-export declare const TimeSliderMenu: ({ marks, value, allOptionsDisabled, isAutoDisabled, handleAutoClick, isAutoSelected, title, icon, onChangeSliderValue, displayCurrentLength, disbleUserSetDuration, customLengthSelector, setOpen, customFieldHeader, open, }: TimeSliderMenuProps) => React.ReactElement;
+export declare const TimeSliderMenu: ({ marks, value, allOptionsDisabled, isAutoDisabled, handleAutoClick, isAutoSelected, title, icon, onChangeSliderValue, onSelectSliderValue, displayCurrentLength, disbleUserSetDuration, customLengthSelector, setOpen, customFieldHeader, open, }: TimeSliderMenuProps) => React.ReactElement;

package/package.json

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