@opengeoweb/time-series 14.1.0 → 14.2.2

package/index.esm.js

@@ -4,7 +4,7 @@ import React__default, { useState, useMemo, useEffect, useCallback, memo } from
 import { useDispatch, useSelector } from 'react-redux';
 import { mapUtils, selectorMemoizationOptions, genericSelectors, uiSelectors, uiTypes, uiActions, useSetupDialog, mapSelectors, mapListener, serviceListener, layersListener, syncGroupsListener, genericListener, openlayersListener, uiReducer, syncGroupsReducer, layerReducer, serviceReducer, mapReducer, loadingIndicatorActions, syncGroupsActions, genericActions, mapActions, layerActions } from '@opengeoweb/store';
 import { snackbarActions, snackbarTypes, snackbarListener, snackbarReducer } from '@opengeoweb/snackbar';
-import { dateUtils, CustomTooltip, CustomToggleButton, TooltipSelect, CustomIconButton, CustomAccordion, ToolContainerDraggable, SearchHighlight, SearchField, ToggleMenu, CustomDialog, AlertBanner, useConfirmationDialog, SwitchButton } from '@opengeoweb/shared';
+import { dateUtils, CustomTooltip, CustomToggleButton, TooltipSelect, CustomIconButton, CustomAccordion, ToolContainerDraggable, SearchHighlight, SearchField, ToggleMenu, CustomDialog, AlertBanner, useConfirmationDialog, SwitchButton, useResizeObserver } from '@opengeoweb/shared';
 import { MenuItem, useTheme, LinearProgress, Grid, Box, Typography, ClickAwayListener, Input, Collapse, ListItem, ListItemButton, ListItemText, List, Button, InputAdornment, Card, styled, Stack, Tooltip, ListItemIcon, Checkbox } from '@mui/material';
 import { isString, trim, trimStart, compact, chain, groupBy, sortBy, uniqBy, isEqual } from 'lodash';
 import { ReactSortable } from 'react-sortablejs';
@@ -7830,7 +7830,26 @@ var LocationListItem = function LocationListItem(_ref) {
   var theme = useTheme();
   var _useTimeseriesTransla = useTimeseriesTranslation();
     _useTimeseriesTransla.t;
+  // Wrapper ref used for hover detection AND restoring keyboard focus after selection.
   var mouseMoveRef = React__default.useRef(null);
+  // Listen for global selection events so we can re-focus the item that was activated via keyboard.
+  React__default.useEffect(function () {
+    var handleSelection = function handleSelection(e) {
+      var _custom$detail;
+      var custom = e;
+      if (((_custom$detail = custom.detail) == null ? void 0 : _custom$detail.location) === location && mouseMoveRef.current) {
+        // Delay to allow parent state updates / virtualization re-render.
+        requestAnimationFrame(function () {
+          var _mouseMoveRef$current;
+          (_mouseMoveRef$current = mouseMoveRef.current) == null || _mouseMoveRef$current.focus();
+        });
+      }
+    };
+    window.addEventListener('location-list-selection', handleSelection);
+    return function () {
+      window.removeEventListener('location-list-selection', handleSelection);
+    };
+  }, [location]);
   var textContainerRef = React__default.useRef(null);
   var _React$useState = React__default.useState(false),
     isHovering = _React$useState[0],
@@ -7866,6 +7885,23 @@ var LocationListItem = function LocationListItem(_ref) {
       setTextContainerWidth(textContainerRef.current.clientWidth);
     }
   }, [textContainerRef]);
+  // If selection state changes and this item is now the selected one, ensure it regains focus.
+  React__default.useEffect(function () {
+    if (selectedLocation === location && mouseMoveRef.current) {
+      // If focus already on this item, do nothing.
+      if (mouseMoveRef.current === document.activeElement) {
+        return;
+      }
+      // If focus is outside the list item, re-focus after render settles.
+      // Use double rAF for virtualization/layout stability.
+      requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+          var _mouseMoveRef$current2;
+          (_mouseMoveRef$current2 = mouseMoveRef.current) == null || _mouseMoveRef$current2.focus();
+        });
+      });
+    }
+  }, [selectedLocation, location]);
   return jsx(OverflowTooltip, {
     text: location,
     textContainerWidth: textContainerWidth,
@@ -7875,6 +7911,29 @@ var LocationListItem = function LocationListItem(_ref) {
       onMouseLeave: handleMouseLeave,
       onFocus: handleMouseEnter,
       onBlur: handleMouseLeave,
+      tabIndex: 0,
+      role: "option",
+      "aria-selected": selectedLocation === location,
+      onKeyDown: function onKeyDown(e) {
+        if (isDisabled) {
+          return;
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleChange(location);
+          // Dispatch custom event to remove focus styling from outer list container
+          window.dispatchEvent(new CustomEvent('location-list-selection', {
+            detail: {
+              location: location
+            }
+          }));
+          // Explicitly retain focus immediately (backup before effect runs)
+          requestAnimationFrame(function () {
+            var _mouseMoveRef$current3;
+            (_mouseMoveRef$current3 = mouseMoveRef.current) == null || _mouseMoveRef$current3.focus();
+          });
+        }
+      },
       children: jsxs(ListItem, Object.assign({
         "data-testid": "locationDropdownListItem",
         role: "listitem"
@@ -7909,7 +7968,19 @@ var LocationListItem = function LocationListItem(_ref) {
                 backgroundColor: 'transparent'
               }
             },
-            disabled: isDisabled
+            disabled: isDisabled,
+            // Remove from tab order so row wrapper is the single focus target
+            tabIndex: -1,
+            onChange: function onChange() {
+              if (!isDisabled) {
+                handleChange(location);
+                window.dispatchEvent(new CustomEvent('location-list-selection', {
+                  detail: {
+                    location: location
+                  }
+                }));
+              }
+            }
           })
         }), jsx(Typography, {
           ref: textContainerRef,
@@ -7949,6 +8020,121 @@ var renderRow = function renderRow(features, handleChange, selectedLocation, isD
   };
 };
 
+var FocusableListOuter = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  // Track last interaction modality to conditionally show focus ring only for keyboard navigation.
+  var lastInteractionWasKeyboard = React.useRef(false);
+  React.useEffect(function () {
+    var handleKey = function handleKey(e) {
+      // Ignore modifier-only keys; any navigation key sets keyboard modality.
+      if (e.key) {
+        lastInteractionWasKeyboard.current = true;
+      }
+    };
+    var handlePointer = function handlePointer() {
+      lastInteractionWasKeyboard.current = false;
+    };
+    window.addEventListener('keydown', handleKey, {
+      capture: true
+    });
+    window.addEventListener('mousedown', handlePointer, {
+      capture: true
+    });
+    window.addEventListener('pointerdown', handlePointer, {
+      capture: true
+    });
+    window.addEventListener('touchstart', handlePointer, {
+      capture: true
+    });
+    // Listen for custom selection event to remove focus styling after keyboard activation.
+    var handleSelection = function handleSelection() {
+      setIsFocusVisible(false);
+    };
+    window.addEventListener('location-list-selection', handleSelection);
+    return function () {
+      window.removeEventListener('keydown', handleKey, {
+        capture: true
+      });
+      window.removeEventListener('mousedown', handlePointer, {
+        capture: true
+      });
+      window.removeEventListener('pointerdown', handlePointer, {
+        capture: true
+      });
+      window.removeEventListener('touchstart', handlePointer, {
+        capture: true
+      });
+      window.removeEventListener('location-list-selection', handleSelection);
+    };
+  }, []);
+  var handleKeyDown = function handleKeyDown(e) {
+    var el = ref && typeof ref === 'object' && 'current' in ref ? ref.current : null;
+    if (!el) {
+      return;
+    }
+    var lineHeight = 40; // matches itemSize
+    var pageHeight = el.clientHeight;
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        el.scrollTop += lineHeight;
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        el.scrollTop -= lineHeight;
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        el.scrollTop += pageHeight;
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        el.scrollTop -= pageHeight;
+        break;
+      case 'Home':
+        e.preventDefault();
+        el.scrollTop = 0;
+        break;
+      case 'End':
+        e.preventDefault();
+        el.scrollTop = el.scrollHeight;
+        break;
+    }
+  };
+  // merge any existing style prop with our outline override
+  var mergedStyle = Object.assign({}, props.style, {
+    outline: 'none',
+    transition: 'box-shadow 120ms ease, background-color 120ms ease'
+  });
+  var _React$useState = React.useState(false),
+    isFocusVisible = _React$useState[0],
+    setIsFocusVisible = _React$useState[1];
+  var onFocus = function onFocus() {
+    if (lastInteractionWasKeyboard.current) {
+      setIsFocusVisible(true);
+    }
+  };
+  var onBlur = function onBlur() {
+    return setIsFocusVisible(false);
+  };
+  if (isFocusVisible) {
+    mergedStyle.boxShadow = '0 0 0 2px var(--focus-ring-color, #1976d2)';
+    mergedStyle.backgroundColor = 'rgba(25,118,210,0.06)';
+  }
+  return jsx("div", Object.assign({}, props, {
+    ref: ref,
+    tabIndex: 0,
+    role: "listbox",
+    "aria-label": "Locations list",
+    onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    // Remove focus styling immediately on mouse interaction
+    onMouseDown: function onMouseDown() {
+      setIsFocusVisible(false);
+    },
+    style: mergedStyle
+  }));
+});
 var LocationDropdown = function LocationDropdown(_ref) {
   var _combinedSelectedLoca;
   var geoJson = _ref.geoJson,
@@ -7956,10 +8142,11 @@ var LocationDropdown = function LocationDropdown(_ref) {
     handleChange = _ref.handleChange,
     selectedLocation = _ref.selectedLocation,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
-  var _React$useState = React.useState(''),
-    searchTerm = _React$useState[0],
-    setSearchTerm = _React$useState[1];
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    defaultExpanded = _ref.defaultExpanded;
+  var _React$useState2 = React.useState(''),
+    searchTerm = _React$useState2[0],
+    setSearchTerm = _React$useState2[1];
   var combinedSelectedLocation = geoJson == null ? void 0 : geoJson.features.find(function (feature) {
     var _feature$properties;
     return selectedLocation === ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties.name);
@@ -7978,8 +8165,11 @@ var LocationDropdown = function LocationDropdown(_ref) {
       });
     });
   }, [searchTerm, splitGeoJson]);
+  var listContainerRef = React.useRef(null);
+  var heightObserver = useResizeObserver(listContainerRef, filteredResults);
   return jsx(Box, {
     "data-testid": "locationDropdownContainer",
+    ref: listContainerRef,
     sx: {
       width: '100%',
       height: '100%',
@@ -8023,16 +8213,17 @@ var LocationDropdown = function LocationDropdown(_ref) {
             title: collectionName,
             title2: serviceName,
             amountOfItems: collectionGeoJson.features.length || 0,
-            defaultExpanded: false,
+            defaultExpanded: defaultExpanded || false,
             sx: {
               mx: 1,
               mb: 1
             },
             children: jsx(FixedSizeList, {
-              height: 350,
+              height: heightObserver,
               width: "100%",
               itemSize: 40,
               itemCount: collectionGeoJson.features.length,
+              outerElementType: FocusableListOuter,
               children: renderRow(collectionGeoJson.features, handleChange, collectionSelectedLocation == null || (_collectionSelectedLo = collectionSelectedLocation.properties) == null ? void 0 : _collectionSelectedLo.name, isDisabled)
             })
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/time-series",
-  "version": "14.1.0",
+  "version": "14.2.2",
   "description": "GeoWeb time-series library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -9,26 +9,26 @@
   },
   "dependencies": {
     "immer": "^10.0.3",
-    "@opengeoweb/shared": "14.1.0",
+    "@opengeoweb/shared": "14.2.2",
     "@reduxjs/toolkit": "^2.6.1",
     "react-redux": "^9.2.0",
-    "@opengeoweb/webmap": "14.1.0",
-    "@opengeoweb/webmap-react": "14.1.0",
+    "@opengeoweb/webmap": "14.2.2",
+    "@opengeoweb/webmap-react": "14.2.2",
     "lodash": "^4.17.21",
-    "@opengeoweb/api": "14.1.0",
-    "@opengeoweb/theme": "14.1.0",
-    "@opengeoweb/store": "14.1.0",
+    "@opengeoweb/api": "14.2.2",
+    "@opengeoweb/theme": "14.2.2",
+    "@opengeoweb/store": "14.2.2",
     "echarts-for-react": "^3.0.2",
     "echarts": "^5.4.3",
     "react-sortablejs": "^6.1.4",
-    "@opengeoweb/snackbar": "14.1.0",
+    "@opengeoweb/snackbar": "14.2.2",
     "react-window": "^1.8.10",
     "react-virtualized-auto-sizer": "^1.0.21",
     "msw": "^2.7.3",
     "i18next": "^25.0.1",
     "react-i18next": "^15.1.1",
-    "@opengeoweb/core": "14.1.0",
-    "@opengeoweb/form-fields": "14.1.0",
+    "@opengeoweb/core": "14.2.2",
+    "@opengeoweb/form-fields": "14.2.2",
     "@mui/material": "^7.0.1",
     "react-hook-form": "^7.61.1",
     "uuid": "^10.0.0",

package/src/lib/components/TimeSeries/LocationDropdown/LocationDropdown.d.ts

@@ -7,6 +7,7 @@ interface LocationDropdownProps {
     selectedLocation: string;
     geoJson?: FeatureCollection<GeometryObject>;
     isDisabled?: boolean;
+    defaultExpanded?: boolean;
 }
 export declare const LocationDropdown: React.FC<LocationDropdownProps>;
 export {};

package/src/lib/components/TimeSeries/LocationDropdown/LocationDropdown.stories.d.ts

@@ -6,4 +6,6 @@ type Story = StoryObj<typeof LocationDropdown>;
 export declare const Component: Story;
 export declare const ComponentDark: Story;
 export declare const LocationDropdownDemoLight: Story;
+export declare const LocationDropdownExpandedDemoLight: Story;
 export declare const LocationDropdownDemoDark: Story;
+export declare const LocationDropdownExpandedDemoDark: Story;